Super Textarea

is a rich text editor based on Quill with additional RTL support, Interpolated variable and plain text paste support.

Getting started

Since super textarea is based on Quill (big JS and Css lib) it is not part of the theme and it needs to be included specifically in the page that is using it. To include it, add the following -

-content_for(:head) do
  =stylesheet_link_tag 'vendor/bootstrap-4.4.1-iplan-theme/quill.snow-1.3.6-rtl'
  =javascript_include_tag 'vendor/bs4_iplan_theme/super_textarea'

Default behaviour

Super textarea is a regular text area with .form-control class and the following structure before it -

.super-textarea
  .form-control
    .super-textarea-placeholder
=text_area_tag super_text_area_id, nil, class: 'form-control'

To make this textarea a Super textarea it needs to be initialized -

$(selector).superTextArea({})

You can use the following options when initializing super textarea

rich: true / false (by default false)
toolbar: false / dom element, not jquery element, ex $(selector)[0] (only for rich text)
* .super-textarea-toolbar will be the custom toolbar wrapper by default if no toolbar option is passed

Plain text

Super text area is limitted to plain text by default. Note that even if you try to paste / drop reach text (or photo) into it it will reject all formatting, in addition using keyboard shortcuts like cmd + b to make text bold will not work.

Plain text

Raw content

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'Plain text'
        .super-textarea
          .form-control
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control'
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

Rich text

Super text area supports rich text. By default rich textarea has a toolbar. You can copy and paste rich text from other sources to this super text area or between super textareas

Rich text

Raw content

Preview text

Text preview with rich text should be wrapped with .ql-editor.p-0 and displayed with pre_line_text helper

------------------------

Hey!

this text is rich created by

a super text area!

------------------------

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'Rich text'
        .super-textarea
          .form-control
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true}
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

%hr

%h3 Preview text

Text preview with rich text should be wrapped with
%strong='.ql-editor.p-0'
and displayed with
%strong='pre_line_text'
helper

.p-2.mt-2.border
  .ql-editor.p-0=pre_line_text '------------------------
Hey! 
this  text  is rich created by 
a super text area!
------------------------
'

Height

Super text area has a default HEIGHT of 11rem.

The height is only for the main edit area and doesn't include toolbar
When content exceeds height the edit area will be scrollable
You can use the following classes (mix or standalone): 'qh-*', 'min-qh-*', 'max-qh-*' (* from 5 to 40) to control the height
- 'qh-*' will set specific height on .ql-editor
- 'min-qh-*' and 'max-qh-*' will set height to auto and min-height or max height to a specific height
- To create a dynamic text area you can set min height and max height and text area will expand or shrink accordingly

Default height

Raw content

qh-20 class

Raw content

min-qh-5 max-qh-10 class

Raw content

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'Default height'
        .super-textarea
          .form-control
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control'
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'qh-20 class'
        .super-textarea
          .form-control.qh-20
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control'
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'min-qh-5 max-qh-10 class'
        .super-textarea
          .form-control.min-qh-5.max-qh-10
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control'
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

By default rich text has a default toolbar. Use .super-textarea-toolbar container to define a custom toolbar. you can also specify other wrapper using toolbar attr at initialization. Passing toolbar: false will remove toolbar entirely

Rich text with custom toolbar (in dom)

Raw content

Rich text with custom toolbar in data vars

Raw content

Rich text without toolbar

Raw content

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'Rich text with custom toolbar (in dom)'
        .super-textarea
          .form-control
            .super-textarea-placeholder
            =render 'components/super_textarea/super_textarea_custom_toolbar'
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true}
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'Rich text with custom toolbar in data vars'
        .super-textarea
          .form-control
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true, toolbar: [['bold', 'italic', 'underline'],[{color: [] }, {background: [] }],[{ align: [] }, { direction: 'rtl'}],['clean']]}
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'


-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'Rich text without toolbar'
        .super-textarea
          .form-control
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true, toolbar: false}
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

Floating label

Floating label behave as it would behave with a normal textarea. Note that when using a super textarea with rich text and a default toolbar (or custom at the top) you should use fixed floating label.

Plain text

Raw text

Rich text

Raw text

Rich text

Raw text

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group.floating-label
        .super-textarea
          .form-control
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control', placeholder: true
        =label_tag super_text_area_id, 'Plain text'
    .col-24.col-md-12
      .form-group.floating-label
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control', placeholder: true
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group.floating-label.floating-label-fixed
        .super-textarea
          .form-control
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true}
        =label_tag super_text_area_id, 'Rich text'
    .col-24.col-md-12
      .form-group.floating-label.floating-label-fixed
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'



-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group.floating-label
        .super-textarea
          .form-control
            .super-textarea-placeholder
            =render 'components/super_textarea/super_textarea_custom_toolbar'
        =text_area_tag super_text_area_id, nil, class: 'form-control', placeholder: true, data: {rich: true}
        =label_tag super_text_area_id, 'Rich text'
    .col-24.col-md-12
      .form-group.floating-label
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control', placeholder: true
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'

Validations

Plain text

this is an invalid super textarea

Raw text

Plain text

this is an invalid super textarea

Raw text

Rich text

this is an invalid super textarea

Raw text

Rich text

this is an invalid super textarea

Raw text

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'Plain text'
        .super-textarea
          .form-control.is-invalid
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control is-invalid'
        .invalid-feedback='this is an invalid super textarea'
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control is-invalid'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group.floating-label
        .super-textarea
          .form-control.is-invalid
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control is-invalid', placeholder: true
        =label_tag super_text_area_id, 'Plain text'
        .invalid-feedback='this is an invalid super textarea'
    .col-24.col-md-12
      .form-group.floating-label
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control is-invalid', placeholder: true
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group.floating-label.floating-label-fixed
        .super-textarea
          .form-control.is-invalid
            .super-textarea-placeholder
        =text_area_tag super_text_area_id, nil, class: 'form-control is-invalid', data: {rich: true}
        =label_tag super_text_area_id, 'Rich text'
        .invalid-feedback='this is an invalid super textarea'
    .col-24.col-md-12
      .form-group.floating-label.floating-label-fixed
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control is-invalid'
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'



-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group.floating-label
        .super-textarea
          .form-control.is-invalid
            .super-textarea-placeholder
            =render 'components/super_textarea/super_textarea_custom_toolbar'
        =text_area_tag super_text_area_id, nil, class: 'form-control is-invalid', placeholder: true, data: {rich: true}
        =label_tag super_text_area_id, 'Rich text'
        .invalid-feedback='this is an invalid super textarea'
    .col-24.col-md-12
      .form-group.floating-label
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control is-invalid', placeholder: true
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'

Interpolated variables

You can use interpolated variables in a rich / plain text super textarea. At initialization you should pass the accepted interpolated variables like the following -

let interpolatedVariables = [
  {description: "variable",
   estimatedLength: 10,
   label: "interpolated variable",
   value: "%{interpolated-variable}"}
]

$(selector).superTextArea({'interpolated-variables': interpolatedVariables}) :

you can pass multiple variables, each containing the following attributes:

label - the text that will be used for preview
value - the text that will be saved
estimatedLength - the length of the interpolated text
description - will be used as a title on the preview text

interpolated variables can be copy and pasted between super textareas

תוכן עשיר

interpolated variable

התוכן שנשמר בפועל

תוכן עשיר

התוכן שנשמר בפועל

plain text

interpolated variable

התוכן שנשמר בפועל

Preview text

Text preview with interpolated variable like this interpolated variable can be copy and pasted to a super textarea that accepts this interpolated variable. Give it a try! copy this text with this interpolated variable and see for yourself

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo.with-interpolated-variables
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'תוכן עשיר'
        .super-textarea
          .form-control
            .super-textarea-placeholder
            .p-2.border-top
              =link_to 'javascript:;', class: '', data: {variable: 'var', action: 'add-variable'} do
                %i.far.fa-plus
                interpolated variable
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true}

    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'התוכן שנשמר בפועל'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo.with-interpolated-variables
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'תוכן עשיר'
        .super-textarea
          .form-control
            .super-textarea-placeholder
            =render 'components/super_textarea/super_textarea_custom_toolbar', interpolated_variable: true
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true}
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'התוכן שנשמר בפועל'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo.with-interpolated-variables
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, 'plain text'
        .super-textarea
          .form-control
            .super-textarea-placeholder
            .p-2.border-top
              =link_to 'javascript:;', class: '', data: {variable: 'var', action: 'add-variable'} do
                %i.far.fa-plus
                interpolated variable
        =text_area_tag super_text_area_id, nil, class: 'form-control'

    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'התוכן שנשמר בפועל'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

%hr

%h3 Preview text

%span{style: 'font-weight: 700; color: rgb(255, 255, 255); background-color: rgb(61, 20, 102);'}='Text preview'
with
%span{style: 'font-weight: 700'}
  %u='interpolated variable'
like this
=link_to 'interpolated variable',
         "javascript:alert('this is an interpolated variable');",
         title: 'An interpolated variable',
         data: {'interpolated-variable': '%{interpolated-variable}'}
can be copy and pasted to a super textarea that accepts this interpolated variable.
Give it a try! copy this text with this
=link_to 'interpolated variable',
         "javascript:alert('this is an interpolated variable');",
         title: 'An interpolated variable',
         data: {'interpolated-variable': '%{interpolated-variable}'}
and see for yourself

Character counter

Super textarea uses jquery.textarea-chars-counter.js exactly like it would be used with a regular textarea. To place it just add data-placeholder: 'char-counter'. Note that in the example below every interpolated variable length is 10 characters

using .d-flex class

Since counter is composed of numbers it will not take into account RTL so we add by default display flex to the wrapper element (with data-placeholder: 'char-counter'), but if you use char counter outside of .super-textarea you should add .d-flex yourself

Interpolated variables

An interpolated variable should support estimated length which is the length of the interpolation. jquery.textarea-chars-counter.js can receive a textLengthCalculator function which will use the superTextarea API to get the real content length (taking interpolation into account).

Plain text

interpolated variable

Raw content

Rich text

interpolated variable

Raw content

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo.with-interpolated-variables
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, class: 'd-flex align-items-center' do
          ='Plain text'
          .ml-auto.d-flex.text-muted.small{data: {placeholder: 'char-counter', 'max_chars': 200, toggle: 'tooltip', title: 'this content is limited to 200 characters', placement: 'top'}}
        .super-textarea
          .form-control
            .super-textarea-placeholder
            .p-2.border-top
              =link_to 'javascript:;', class: '', data: {variable: 'var', action: 'add-variable'} do
                %i.far.fa-plus
                interpolated variable
        =text_area_tag super_text_area_id, nil, class: 'form-control'
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo.with-interpolated-variables
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, class: 'd-flex align-items-center' do
          ='Rich text'
          .ml-auto.d-flex.text-muted.small{data: {placeholder: 'char-counter', 'max_chars': 200, toggle: 'tooltip', title: 'this content is limited to 200 characters', placement: 'top'}}
        .super-textarea
          .form-control
            .super-textarea-placeholder
            .p-2.border-top
              =link_to 'javascript:;', class: '', data: {variable: 'var', action: 'add-variable'} do
                %i.far.fa-plus
                interpolated variable
        =text_area_tag super_text_area_id, nil, class: 'form-control', data: {rich: true}
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'

Clear button

Super textarea includes a clear button that will be visible only when there is content in the super textarea

Plain text

Raw content

Plain text

Raw text

-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group
        =label_tag super_text_area_id, class: 'd-flex align-items-center' do
          ='Plain text'
        .super-textarea
          .form-control
            =link_to 'javascript:;', class: 'small bg-white d-none', data: {action: "clear", 'confirm-message': t('application.are_you_sure')}, tabindex: -1 do
              %i.fas.fa-eraser
              =t('application.clear')
            .super-textarea-placeholder
            .text-muted.small.p-2.d-inline-block{data: {toggle: 'tooltip', title: 'this content is limited to 200 characters', placement: 'top'}}
              %div{data: {placeholder: 'char-counter', 'max_chars': 200}}
        =text_area_tag super_text_area_id, nil, class: 'form-control'
    .col-24.col-md-12
      .form-group
        =label_tag "dummy-#{super_text_area_id}", 'Raw content'
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control'



-super_text_area_id = "super-textarea-#{rand(100000000)}"
.super-textarea-demo
  .form-row
    .col-24.col-md-12
      .form-group.floating-label
        .super-textarea
          .form-control
            =link_to 'javascript:;', class: 'small bg-white d-none', data: {action: "clear", 'confirm-message': t('application.are_you_sure')}, tabindex: -1 do
              %i.fas.fa-eraser
              =t('application.clear')
            .super-textarea-placeholder
            .text-muted.small.p-2.d-inline-block{data: {toggle: 'tooltip', title: 'this content is limited to 200 characters', placement: 'top'}}
              %div{data: {placeholder: 'char-counter', 'max_chars': 200}}
        =text_area_tag super_text_area_id, nil, class: 'form-control', placeholder: true
        =label_tag super_text_area_id, 'Plain text'
    .col-24.col-md-12
      .form-group.floating-label
        =text_area_tag "dummy-#{super_text_area_id}", nil, disabled: true, class: 'form-control', placeholder: true
        =label_tag "dummy-#{super_text_area_id}", 'Raw text'

On this page

Super Textarea

Getting started

Default behaviour

Plain text

Rich text

Preview text

Height

Custom toolbar

Floating label

Validations

Interpolated variables

Preview text

Character counter

using .d-flex class

Interpolated variables

Clear button

On this page

Loading