EZP-29115: Add characters counter to RichText

src/bundle/Resources/public/js/scripts/fieldType/base/base-rich-text.js

@@ -196,6 +196,8 @@
                     this.xhtmlNamespace,
                     this.ezNamespace
                 );
+
+                this.countWordsCharacters(container, doc);
             };
 
             if (!section.hasChildNodes()) {
@@ -220,6 +222,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;

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);
+    }
+}

src/bundle/Resources/public/scss/_mixins.scss

@@ -243,7 +243,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 {

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';

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>

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 -%}

src/lib/UI/Module/ContentTree/NodeFactory.php

@@ -84,7 +84,6 @@ public function createNode(
             ? $loadSubtreeRequestNode->offset
             : 0;
 
-
         $children = [];
         if ($depth < $this->maxDepth && $loadChildren) {
             $searchResult = $this->findSubitems($location, $limit, $offset);