“Show word count” field setting

Resolves #75

Author: brandonkelly

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Added the “Show word count” field setting. ([#75](https://github.com/craftcms/ckeditor/issues/75))
 - Added the [Font](https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature) CKEditor plugin, which provides “Font Size” “Font Family”, “Font Color”, and “Font Background Color” toolbar buttons.
 - Ordered/unordered list buttons now include [additional options](https://ckeditor.com/docs/ckeditor5/latest/features/lists/lists.html#list-properties).
 - Config options are now automatically updated when “Heading”, “Style”, “Alignment”, and “Font Size” buttons are added/removed in the toolbar. ([#73](https://github.com/craftcms/ckeditor/pull/73))

src/Field.php

@@ -79,6 +79,12 @@ public static function displayName(): string
      */
     public ?string $ckeConfig = null;
 
+    /**
+     * @var bool Whether the word count should be shown below the field.
+     * @since 3.2.0
+     */
+    public bool $showWordCount = false;
+
     /**
      * @var string|array|null The volumes that should be available for image selection.
      * @since 1.2.0
@@ -184,6 +190,9 @@ protected function inputHtml(mixed $value, ElementInterface $element = null): st
 
         $id = Html::id($this->handle);
         $idJs = Json::encode($view->namespaceInputId($id));
+        $wordCountId = "$id-counts";
+        $wordCountIdJs = Json::encode($view->namespaceInputId($wordCountId));
+
         $baseConfig = [
             'ui' => [
                 'viewportOffset' => ['top' => 50],
@@ -245,9 +254,45 @@ protected function inputHtml(mixed $value, ElementInterface $element = null): st
         }
 
         $baseConfigJs = Json::encode($event->baseConfig);
+        $showWordCountJs = Json::encode($this->showWordCount);
 
         $view->registerJs(<<<JS
-Ckeditor.create($idJs, Object.assign($baseConfigJs, $configOptionsJs));
+(($) => {
+  const config = Object.assign($baseConfigJs, $configOptionsJs);
+  const extraRemovePlugins = [];
+  if ($showWordCountJs) {
+    if (typeof config.wordCount === 'undefined') {
+      config.wordCount = {};
+    }
+    const onUpdate = config.wordCount.onUpdate || (() => {});
+    config.wordCount.onUpdate = (stats) => {
+      const statText = [];
+      if (config.wordCount.displayWords || typeof config.wordCount.displayWords === 'undefined') {
+        statText.push(Craft.t('ckeditor', '{num, number} {num, plural, =1{word} other{words}}', {
+          num: stats.words,
+        }));
+      }
+      if (config.wordCount.displayCharacters) { // false by default
+        statText.push(Craft.t('ckeditor', '{num, number} {num, plural, =1{character} other{characters}}', {
+          num: stats.characters,
+        }));
+      }
+      $('#' + $wordCountIdJs).html(Craft.escapeHtml(statText.join(', ')) || '&nbsp;');
+      onUpdate(stats);
+    }
+  } else {
+    extraRemovePlugins.push('WordCount');
+  }
+  if (extraRemovePlugins.length) {
+    if (typeof config.removePlugins === 'undefined') {
+      config.removePlugins = [];
+    }
+    config.removePlugins.push(...extraRemovePlugins);
+    console.log(config);
+  }
+  Ckeditor.create($idJs, config).then((editor) => {
+  });
+})(jQuery)
 JS,
             View::POS_END,
         );
@@ -256,12 +301,23 @@ protected function inputHtml(mixed $value, ElementInterface $element = null): st
             $view->registerCss($ckeConfig->css);
         }
 
-        return Html::tag('div',
-            Html::textarea($this->handle, $this->prepValueForInput($value, $element), [
-                'id' => $id,
-                'class' => 'hidden',
-            ]),
-        );
+        $html = Html::textarea($this->handle, $this->prepValueForInput($value, $element), [
+            'id' => $id,
+            'class' => 'hidden',
+        ]);
+
+        if ($this->showWordCount) {
+            $html .= Html::tag('div', '&nbps;', [
+                'id' => $wordCountId,
+                'class' => ['ck-word-count', 'light', 'smalltext'],
+            ]);
+        }
+
+        return Html::tag('div', $html, [
+            'class' => array_filter([
+                $this->showWordCount ? 'ck-with-show-word-count' : null,
+            ])
+        ]);
     }
 
     /**

src/console/controllers/ConvertController.php

@@ -179,6 +179,7 @@ public function actionRedactor(): int
         // Map the Redactor configs to CKEditor configs
         $this->ckeConfigs = Plugin::getInstance()->getCkeConfigs();
         $ckeConfigs = $this->ckeConfigs->getAll();
+        $fieldSettingsByConfig = [];
         $configMap = [];
 
         foreach ($fields as $path => $field) {
@@ -195,13 +196,13 @@ public function actionRedactor(): int
                         throw new Exception('`manualConfig` contains invalid JSON.');
                     }
                     $configName = $field['name'] ?? (!empty($field['handle']) ? Inflector::camel2words($field['handle']) : 'Untitled');
-                    $ckeConfig = $this->generateCkeConfig($configName, $redactorConfig, $ckeConfigs);
+                    $ckeConfig = $this->generateCkeConfig($configName, $redactorConfig, $ckeConfigs, $fieldSettingsByConfig);
                     $this->stdout(PHP_EOL);
                 } else {
                     $basename = ($field['settings']['redactorConfig'] ?? null) ?: 'Default.json';
                     if (!isset($configMap[$basename])) {
                         $this->stdout(PHP_EOL . PHP_EOL);
-                        $configMap[$basename] = $this->resolveRedactorConfig($basename, $ckeConfigs);
+                        $configMap[$basename] = $this->resolveRedactorConfig($basename, $ckeConfigs, $fieldSettingsByConfig);
                         $this->stdout(PHP_EOL);
                     }
                     $ckeConfig = $configMap[$basename];
@@ -210,6 +211,10 @@ public function actionRedactor(): int
                 $field['type'] = Field::class;
                 $field['settings']['ckeConfig'] = $ckeConfig;
 
+                if (isset($fieldSettingsByConfig[$ckeConfig])) {
+                    $field['settings'] = array_merge($field['settings'], $fieldSettingsByConfig[$ckeConfig]);
+                }
+
                 unset(
                     $field['settings']['cleanupHtml'],
                     $field['settings']['configSelectionMode'],
@@ -280,11 +285,15 @@ private function pathAndHandleMarkdown(string $path, array $config): string
     /**
      * @param string $basename
      * @param CkeConfig[] $ckeConfigs
+     * @param array[] $fieldSettingsByConfig
      * @return string
      * @throws \Exception
      */
-    private function resolveRedactorConfig(string $basename, array &$ckeConfigs): string
-    {
+    private function resolveRedactorConfig(
+        string $basename,
+        array &$ckeConfigs,
+        array &$fieldSettingsByConfig,
+    ): string {
         $filename = pathinfo($basename, PATHINFO_FILENAME);
         $this->stdout('   ');
         if ($this->confirm($this->markdownToAnsi("Do you already have a CKEditor config that should be used in place of the `$filename` Redactor config?"))) {
@@ -299,17 +308,23 @@ private function resolveRedactorConfig(string $basename, array &$ckeConfigs): st
             $redactorConfig = [];
         }
 
-        return $this->generateCkeConfig(Inflector::camel2words($filename), $redactorConfig, $ckeConfigs);
+        return $this->generateCkeConfig(Inflector::camel2words($filename), $redactorConfig, $ckeConfigs, $fieldSettingsByConfig);
     }
 
     /**
+     * @param string $configName
      * @param array $redactorConfig
      * @param CkeConfig[] $ckeConfigs
+     * @param array[] $fieldSettingsByConfig
      * @return string
      * @throws OperationAbortedException
      */
-    private function generateCkeConfig(string $configName, array $redactorConfig, array &$ckeConfigs): string
-    {
+    private function generateCkeConfig(
+        string $configName,
+        array $redactorConfig,
+        array &$ckeConfigs,
+        array &$fieldSettingsByConfig,
+    ): string {
         // Make sure the name is unique
         $baseConfigName = $configName;
         $attempt = 1;
@@ -438,6 +453,9 @@ private function generateCkeConfig(string $configName, array $redactorConfig, ar
                 switch ($plugin) {
                     case 'alignment': $addButton('alignment'); break;
                     case 'clips': $addButton('clips'); break;
+                    case 'counter':
+                        $fieldSettingsByConfig[$ckeConfig->uid]['showWordCount'] = true;
+                        break;
                     case 'fontcolor': $addButton('fontcolor'); break;
                     case 'fontfamily': $addButton('fontfamily'); break;
                     case 'fontsize': $addButton('fontsize'); break;

src/templates/_field-settings.twig

@@ -34,6 +34,13 @@
   {% endblock %}
 {% endembed %}
 
+{{ forms.lightswitchField({
+  id: 'show-word-count',
+  name: 'showWordCount',
+  label: 'Show word count'|t('ckeditor'),
+  on: field.showWordCount
+}) }}
+
 <hr>
 
 <a class="fieldtoggle" data-target="assets">{{ 'Assets'|t('app') }}</a>