EZP-29115: Add characters counter to RichText (ezsystems#741)

* EZP-29115: Add characters counter to RichText * removed implementation from plugin, moved user settings part to a separate PR * fixes after CR * fixes after review vol.2
konradoboza · May 29, 2019 · 5a98bb9 · 5a98bb9
1 parent e0ec4d9
commit 5a98bb9
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 1 deletion.
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/base-rich-text.js b/src/bundle/Resources/public/js/scripts/fieldType/base/base-rich-text.js
@@ -231,6 +231,8 @@
                     this.xhtmlNamespace,
                     this.ezNamespace
                 );
+
+                this.countWordsCharacters(container, doc);
             };
 
             if (!section.hasChildNodes()) {
@@ -255,6 +257,42 @@
 
             return alloyEditor;
         }
+
+        countWordsCharacters(container, editorHtml) {
+            const counterWrapper = container.parentElement.querySelector('.ez-character-counter');
+
+            if (counterWrapper) {
+                const countableTags = this.getCountableTags(editorHtml);
+                const wordWrapper = counterWrapper.querySelector('.ez-character-counter__word-count');
+                const charactersWrapper = counterWrapper.querySelector('.ez-character-counter__character-count');
+                let characterCount = 0;
+                let wordCount = 0;
+
+                countableTags.forEach((tag) => {
+                    const sanitizedText = this.cleanWhiteCharacters(tag.innerText);
+
+                    wordCount += sanitizedText ? sanitizedText.split(' ').length : 0;
+                    characterCount += sanitizedText.length;
+                });
+
+                wordWrapper.innerText = wordCount;
+                charactersWrapper.innerText = characterCount;
+            }
+        }
+
+        getCountableTags(html) {
+            const allowedTags = ['p:not(.ez-embed-content)', 'li', 'h1', 'h2', 'h3', 'h4', 'h5' , 'h6', 'th', 'td'];
+            const notCustomTagSelector = ':not([data-ezelement=ezattributes]) > ';
+            const allowedSelectors = allowedTags.map((item) => {
+                return notCustomTagSelector.concat(item);
+            });
+
+            return html.querySelectorAll(allowedSelectors.join(','));
+        }
+
+        cleanWhiteCharacters(text) {
+            return text.replace(/\s\r?\n/g, ' ').trim();
+        }
     };
 
     eZ.BaseRichText = BaseRichText;

diff --git a/src/bundle/Resources/public/scss/_alloyeditor-character-counter.scss b/src/bundle/Resources/public/scss/_alloyeditor-character-counter.scss
@@ -0,0 +1,15 @@
+.ez-character-counter {
+    position: relative;
+    background-color: $ez-ground-base-medium;
+    color: $ez-black;
+    font-size: calculateRem(10px);
+    margin: calculateRem(-16px) calculateRem(1px) 0 auto;
+    border-bottom-left-radius: calculateRem(5px);
+    border-bottom-right-radius: calculateRem(5px);
+    width: calc(100% - 2px);
+
+    &__word-count,
+    &__character-count {
+        margin-left: calculateRem(16px);
+    }
+}
diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
@@ -250,7 +250,7 @@
         border-radius: calculateRem(4px);
         display: inline-block;
         width: 100%;
-        padding: calculateRem(8px) calculateRem(24px);
+        padding: calculateRem(8px) calculateRem(24px) calculateRem(24px) calculateRem(24px);
 
         .is-block-focused,
         .cke_widget_wrapper.cke_widget_focused > .cke_widget_element {

diff --git a/src/bundle/Resources/public/scss/alloyeditor.scss b/src/bundle/Resources/public/scss/alloyeditor.scss
@@ -7,3 +7,4 @@
 @import 'alloyeditor-link-edit';
 @import 'alloyeditor-custom-tag';
 @import 'alloyeditor-custom-styles';
+@import 'alloyeditor-character-counter';
diff --git a/src/bundle/Resources/translations/user_settings.en.xliff b/src/bundle/Resources/translations/user_settings.en.xliff
@@ -61,6 +61,36 @@
         <target state="new">Sub-items</target>
         <note>key: settings.subitems_limit.value.title</note>
       </trans-unit>
+      <trans-unit id="98400a7e546231a994f6fea03dce3ebd52c1c33d" resname="settings.character_counter.value.description">
+        <source><![CDATA[Display character count for Online Editor]]></source>
+        <target state="new"><![CDATA[Display character count for Online Editor]]></target>
+        <note>key: settings.character_counter.value.description</note>
+      </trans-unit>
+      <trans-unit id="fd6ba122727aeacdb3e8c1c02d3e9ae023ca2174" resname="settings.character_counter.value.enabled">
+        <source>enabled</source>
+        <target state="new">Enabled</target>
+        <note>key: settings.character_counter.value.enabled</note>
+      </trans-unit>
+      <trans-unit id="3d03b64f879f2c57cb9395f31c7691ecb7cc2807" resname="settings.character_counter.value.disabled">
+        <source>disabled</source>
+        <target state="new">Disabled</target>
+        <note>key: settings.character_counter.value.disabled</note>
+      </trans-unit>
+      <trans-unit id="ca8c3eac8ffed6fed1ee9e028be185741f33bfec" resname="settings.character_counter.value.title">
+        <source>character counter</source>
+        <target state="new">Character counter</target>
+        <note>key: settings.character_counter.value.title</note>
+      </trans-unit>
+      <trans-unit id="4e0e12004096ce400ace603bc7177c044159b57b" resname="character_counter.words">
+        <source>words</source>
+        <target state="new">words</target>
+        <note>key: character_counter.words</note>
+      </trans-unit>
+      <trans-unit id="d69d746270269a4b3ff2a3ddca0a74086ef48ae6" resname="character_counter.characters">
+        <source>characters</source>
+        <target state="new">characters</target>
+        <note>key: character_counter.characters</note>
+      </trans-unit>
       <trans-unit id="dac7ffb84bac8bc5a682388098bded0f8f49d841" resname="settings.timezone.value.description">
         <source><![CDATA[Time Zone in use for displaying Date & Time]]></source>
         <target state="new"><![CDATA[Time Zone in use for displaying Date & Time]]></target>

diff --git a/src/bundle/Resources/views/fieldtypes/edit/ezrichtext.html.twig b/src/bundle/Resources/views/fieldtypes/edit/ezrichtext.html.twig
@@ -8,4 +8,10 @@
     <div class="hidden" data-udw-config-name="richtext_embed" data-udw-config="{{ ez_udw_config('richtext_embed', udw_context) }}"></div>
     <div class="hidden" data-udw-config-name="richtext_embed_image" data-udw-config="{{ ez_udw_config('richtext_embed_image', udw_context) }}"></div>
     <div class="ez-data-source__richtext" id="{{ form.vars.id }}__editable"></div>
+    {% if ez_user_settings['character_counter'] == 'Enabled' %}
+        <div class="ez-character-counter">
+            <span class="ez-character-counter__word-count">0</span> {{ 'character_counter.words'|trans|desc('words') }}
+            <span class="ez-character-counter__character-count">0</span> {{ 'character_counter.characters'|trans|desc('characters') }}
+        </div>
+    {% endif %}
 {%- endblock -%}