@yimingliao/cms 0.0.141 → 0.0.143

package/dist/src/client/interfaces/components/ui/form/control-fields/control-fields-display.js

@@ -2,23 +2,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { Eye, Binary, MapPinCheckInside, Star, House } from 'lucide-react';
-import 'react';
-import 'ua-parser-js';
-import 'clsx';
-import 'tailwind-merge';
-import 'next/navigation';
-import '@radix-ui/react-avatar';
-import '../../../shadcn/badge.js';
-import '../../../shadcn/button.js';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-dialog';
-import '@radix-ui/react-dropdown-menu';
-import '../../../shadcn/input-group.js';
-import '@radix-ui/react-label';
-import '@radix-ui/react-select';
-import '@radix-ui/react-separator';
-import '../../../shadcn/sidebar.js';
-import '@radix-ui/react-tooltip';
 import { Checkbox } from '../../inputs/checkbox.js';
 import { Field } from '../field.js';
 import { IndexField } from '../index-field.js';

package/dist/src/client/interfaces/components/ui/form/control-fields/control-fields-input.js

@@ -2,23 +2,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { Eye, EyeOff, Binary, MapPinCheckInside, Star, House } from 'lucide-react';
-import 'react';
-import 'ua-parser-js';
-import 'clsx';
-import 'tailwind-merge';
-import 'next/navigation';
-import '@radix-ui/react-avatar';
-import '../../../shadcn/badge.js';
-import '../../../shadcn/button.js';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-dialog';
-import '@radix-ui/react-dropdown-menu';
-import '../../../shadcn/input-group.js';
-import '@radix-ui/react-label';
-import '@radix-ui/react-select';
-import '@radix-ui/react-separator';
-import '../../../shadcn/sidebar.js';
-import '@radix-ui/react-tooltip';
 import { Checkbox } from '../../inputs/checkbox.js';
 import { Field } from '../field.js';
 import { IndexField } from '../index-field.js';

package/dist/src/client/interfaces/components/ui/form/index-field.js

@@ -7,20 +7,6 @@ import 'ua-parser-js';
 import { cn } from '../../../../applications/shadcn/utils.js';
 import 'next/navigation';
 import { ExpandableList } from '../features/expandable-list/expandable-list.js';
-import 'lucide-react';
-import '@radix-ui/react-avatar';
-import '../../shadcn/badge.js';
-import '../../shadcn/button.js';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-dialog';
-import '@radix-ui/react-dropdown-menu';
-import '../../shadcn/input-group.js';
-import '@radix-ui/react-label';
-import '@radix-ui/react-select';
-import '@radix-ui/react-separator';
-import '../../shadcn/sidebar.js';
-import '@radix-ui/react-tooltip';
-import 'intor/react';
 import { Checkbox } from '../inputs/checkbox.js';
 import { Input } from '../inputs/input.js';
 import { FieldBody } from './field-body.js';

package/dist/src/client/interfaces/components/ui/form/slug-field.js

@@ -7,22 +7,8 @@ import 'ua-parser-js';
 import { cn } from '../../../../applications/shadcn/utils.js';
 import 'next/navigation';
 import { ExpandableList } from '../features/expandable-list/expandable-list.js';
-import 'lucide-react';
-import '@radix-ui/react-avatar';
-import '../../shadcn/badge.js';
-import '../../shadcn/button.js';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-dialog';
-import '@radix-ui/react-dropdown-menu';
-import '../../shadcn/input-group.js';
-import '@radix-ui/react-label';
-import '@radix-ui/react-select';
-import '@radix-ui/react-separator';
-import '../../shadcn/sidebar.js';
-import '@radix-ui/react-tooltip';
-import 'intor/react';
-import { Textarea } from '../inputs/textarea.js';
 import { Checkbox } from '../inputs/checkbox.js';
+import { Textarea } from '../inputs/textarea.js';
 import { FieldBody } from './field-body.js';
 
 function SlugField({

package/dist/src/client/interfaces/components/ui/inputs/editor/base/base-editor.js

@@ -0,0 +1,143 @@
+import { ClassicEditor } from 'ckeditor5';
+import enTranslations from 'ckeditor5/translations/en.js';
+import zhTranslations from 'ckeditor5/translations/zh.js';
+import { ASSET_MANAGER_PLUGIN_NAME } from '../plugins/asset-manager/asset-manager.js';
+import 'intor/react';
+import 'react';
+import 'mime-types';
+import { WORD_COUNT_DISPLAY_PLUGIN_NAME } from '../plugins/word-count-display/word-count-display.js';
+import { builtinPlugins } from './built-in-plugins.js';
+import { headingConfig } from './configs/heading.config.js';
+import { tableConfig } from './configs/table.config.js';
+import { imageConfig } from './configs/image.config.js';
+
+class BaseEditor extends ClassicEditor {
+  static builtinPlugins = builtinPlugins;
+  static defaultConfig = {
+    licenseKey: "GPL",
+    //====== Translations ======
+    translations: [zhTranslations, enTranslations],
+    // schema: { allowIn: ["figure"], allowAttributes: ["src"] },
+    //====== Toolbar ======
+    toolbar: {
+      items: [
+        //------ 1 row ------
+        "undo",
+        // [Undo]
+        "redo",
+        // [Undo]
+        "|",
+        "heading",
+        // [Heading]
+        "fontFamily",
+        // [Font]
+        "fontSize",
+        // [Font]
+        "fontColor",
+        // [Font]
+        "fontBackgroundColor",
+        // [Font]
+        "highlight",
+        // [Highlight]
+        "|",
+        "emoji",
+        // [Emoji]
+        "specialCharacters",
+        // [SpecialCharacters]
+        "|",
+        "removeFormat",
+        // [RemoveFormat]
+        "|",
+        "selectAll",
+        // [SelectAll]
+        "findAndReplace",
+        // [FindAndReplace]
+        "-",
+        //------ 2 row ------
+        "alignment",
+        // [Alignment]
+        "indent",
+        // [Indent]
+        "outdent",
+        // [Indent]
+        "|",
+        "bold",
+        // [Bold]
+        "italic",
+        // [Italic]
+        "strikethrough",
+        // [Strikethrough]
+        "underline",
+        // [Underline]
+        "subscript",
+        // [Subscript]
+        "superscript",
+        // [Superscript]
+        "code",
+        // [Code]
+        "link",
+        // [Link]
+        "|",
+        ASSET_MANAGER_PLUGIN_NAME,
+        "insertImage",
+        // [Image]
+        "mediaEmbed",
+        // [MediaEmbed]
+        "|",
+        "codeBlock",
+        // [CodeBlock]
+        "htmlEmbed",
+        // [HtmlEmbed]
+        //------ 3 row ------
+        "-",
+        "bulletedList",
+        // [List]
+        "numberedList",
+        // [List]
+        "todoList",
+        // [TodoList]
+        "|",
+        "blockQuote",
+        // [BlockQuote]
+        "horizontalLine",
+        // [HorizontalLine]
+        "pageBreak",
+        // [PageBreak]
+        "|",
+        "insertTable",
+        // [Table]
+        "insertTableLayout",
+        // [Table]
+        "|",
+        "showBlocks",
+        // [ShowBlocks]
+        "sourceEditing",
+        // [SourceEditing]
+        "|",
+        //------ Word Count Display ------
+        WORD_COUNT_DISPLAY_PLUGIN_NAME.html,
+        WORD_COUNT_DISPLAY_PLUGIN_NAME.characters,
+        WORD_COUNT_DISPLAY_PLUGIN_NAME.words
+      ],
+      shouldNotGroupWhenFull: true
+    },
+    //====== Specific Configs ======
+    heading: headingConfig,
+    link: { addTargetToExternalLinks: true },
+    table: tableConfig,
+    image: imageConfig,
+    htmlSupport: {
+      allow: [{ name: /.*/, attributes: true, classes: true, styles: true }]
+    },
+    htmlEmbed: { showPreviews: true },
+    emoji: { skinTone: "light" },
+    fontFamily: { supportAllValues: false },
+    fontSize: {
+      options: [12, 14, "default", 16, 18, 20, 22, 24, 26, 28],
+      supportAllValues: false
+    }
+    // menuBar: { isVisible: true },
+  };
+}
+
+export { BaseEditor };

package/dist/src/client/interfaces/components/ui/inputs/editor/base/built-in-plugins.js

@@ -0,0 +1,71 @@
+import { Essentials, Paragraph, Autoformat, TextTransformation, Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline, Indent, IndentBlock, BlockQuote, CodeBlock, Emoji, Mention, FindAndReplace, Font, Heading, Highlight, HorizontalLine, GeneralHtmlSupport, HtmlComment, HtmlEmbed, Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, LinkImage, ImageInsert, AutoImage, ImageUpload, Link, AutoLink, List, TodoList, MediaEmbed, PageBreak, PasteFromOffice, PasteFromMarkdownExperimental, RemoveFormat, ShowBlocks, SourceEditing, SpecialCharacters, SpecialCharactersEssentials, Table, TableToolbar, TableProperties, TableCellProperties, TableColumnResize, TableCaption, TableLayout, Alignment, WordCount } from 'ckeditor5';
+import { AssetManager } from '../plugins/asset-manager/asset-manager.js';
+import 'intor/react';
+import 'react';
+import 'mime-types';
+import WordCountButtons from '../plugins/word-count-display/word-count-display.js';
+
+const builtinPlugins = [
+  Essentials,
+  Paragraph,
+  Autoformat,
+  // For markdown
+  TextTransformation,
+  Bold,
+  Code,
+  Italic,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Underline,
+  Indent,
+  IndentBlock,
+  BlockQuote,
+  CodeBlock,
+  Emoji,
+  Mention,
+  FindAndReplace,
+  Font,
+  Heading,
+  Highlight,
+  HorizontalLine,
+  GeneralHtmlSupport,
+  HtmlComment,
+  HtmlEmbed,
+  Image,
+  ImageToolbar,
+  ImageCaption,
+  ImageStyle,
+  ImageResize,
+  LinkImage,
+  ImageInsert,
+  AutoImage,
+  ImageUpload,
+  Link,
+  AutoLink,
+  List,
+  TodoList,
+  MediaEmbed,
+  PageBreak,
+  PasteFromOffice,
+  PasteFromMarkdownExperimental,
+  RemoveFormat,
+  ShowBlocks,
+  SourceEditing,
+  SpecialCharacters,
+  SpecialCharactersEssentials,
+  Table,
+  TableToolbar,
+  TableProperties,
+  TableCellProperties,
+  TableColumnResize,
+  TableCaption,
+  TableLayout,
+  Alignment,
+  WordCount,
+  //====== Custom Plugins ======
+  AssetManager,
+  WordCountButtons
+];
+
+export { builtinPlugins };

package/dist/src/client/interfaces/components/ui/inputs/editor/base/configs/heading.config.js

@@ -0,0 +1,41 @@
+const headingConfig = {
+  options: [
+    {
+      model: "paragraph",
+      title: "Paragraph",
+      class: "ck-heading_paragraph"
+    },
+    {
+      model: "heading2",
+      view: "h2",
+      title: "Heading 2",
+      class: "ck-heading_heading2"
+    },
+    {
+      model: "heading3",
+      view: "h3",
+      title: "Heading 3",
+      class: "ck-heading_heading3"
+    },
+    {
+      model: "heading4",
+      view: "h4",
+      title: "Heading 4",
+      class: "ck-heading_heading4"
+    },
+    {
+      model: "heading5",
+      view: "h5",
+      title: "Heading 5",
+      class: "ck-heading_heading5"
+    },
+    {
+      model: "heading6",
+      view: "h6",
+      title: "Heading 6",
+      class: "ck-heading_heading6"
+    }
+  ]
+};
+
+export { headingConfig };

package/dist/src/client/interfaces/components/ui/inputs/editor/base/configs/image.config.js

@@ -0,0 +1,32 @@
+const imageConfig = {
+  toolbar: [
+    "toggleImageCaption",
+    "imageTextAlternative",
+    "|",
+    "imageStyle:alignBlockLeft",
+    "imageStyle:alignCenter",
+    "imageStyle:alignBlockRight",
+    "|",
+    "imageStyle:alignLeft",
+    "imageStyle:alignRight",
+    "|",
+    "imageStyle:inline",
+    "|",
+    "resizeImage",
+    "|",
+    "linkImage"
+  ],
+  resizeOptions: [
+    { name: "resizeImage:original", label: "Original", value: null },
+    { name: "resizeImage:custom", label: "Custom", value: "custom" },
+    { name: "resizeImage:25", label: "25%", value: "25" },
+    { name: "resizeImage:50", label: "50%", value: "50" },
+    { name: "resizeImage:75", label: "75%", value: "75" },
+    { name: "resizeImage:100", label: "100%", value: "100" }
+  ],
+  insert: {
+    integrations: ["upload", "url"]
+  }
+};
+
+export { imageConfig };

package/dist/src/client/interfaces/components/ui/inputs/editor/base/configs/table.config.js

@@ -0,0 +1,15 @@
+const tableConfig = {
+  contentToolbar: [
+    "toggleTableCaption",
+    "|",
+    "tableColumn",
+    "tableRow",
+    "|",
+    "mergeTableCells",
+    "|",
+    "tableProperties",
+    "tableCellProperties"
+  ]
+};
+
+export { tableConfig };

package/dist/src/client/interfaces/components/ui/inputs/editor/editor.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import 'lucide-react';
+import 'intor/react';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import '@radix-ui/react-tooltip';
+import 'next/link';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import '../../../../../../constants/redirect-paths.js';
+import 'mime-types';
+import { FieldBody } from '../../form/field-body.js';
+import '../../../../../../domain/resources/admin/constants.js';
+import { PickModal } from '../../features/pick-modal/pick-modal.js';
+import 'next/image';
+import 'ckeditor5';
+import { useControlAssetManager } from './plugins/asset-manager/use-control-asset-mamager.js';
+import { useInitEditor } from './use-init-editor/use-init-editor.js';
+
+function createEditor({
+  Uploader,
+  useCommand,
+  fileCreateAction,
+  UploadAdapter,
+  FileList,
+  storageUrl,
+  maxWidth,
+  queryClient
+}) {
+  return function Editor({
+    // editor
+    locale,
+    value = "",
+    onEditorChange,
+    // ui states
+    isLoading = false,
+    isDisabled = false,
+    isError = false,
+    // base
+    className = "",
+    ...props
+  }) {
+    const containerRef = useRef(null);
+    const { execute } = useCommand(
+      (formData2) => fileCreateAction({ formData: formData2 }),
+      { clearAll: false }
+    );
+    const editorRef = useInitEditor({
+      enabled: !isLoading,
+      containerRef,
+      locale,
+      value,
+      onEditorChange,
+      createUploadAdapter: (loader) => new UploadAdapter(loader, execute, queryClient),
+      openAssetManager: () => setIsOpenAssetManager(true)
+    });
+    const { isOpenAssetManager, setIsOpenAssetManager, formData, setFormData } = useControlAssetManager(editorRef, storageUrl);
+    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+      FieldBody,
+      {
+        className: cn(
+          className,
+          "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+          "shadow-xs transition-[color,box-shadow]",
+          "rounded-lg",
+          "border",
+          isError && "border-destructive focus-within:ring-destructive/50",
+          "mx-auto"
+        ),
+        childrenClassName: "p-0",
+        style: { maxWidth },
+        isLoading,
+        isDisabled: isDisabled || isLoading,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: containerRef }),
+          /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
+            PickModal,
+            {
+              isOpen: isOpenAssetManager,
+              setIsOpen: setIsOpenAssetManager,
+              fieldName: "file",
+              formData,
+              setFormData,
+              isLoading,
+              isDisabled,
+              itemList: /* @__PURE__ */ jsx(FileList, {}),
+              aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "image/*" })
+            }
+          ) })
+        ]
+      }
+    ) });
+  };
+}
+
+export { createEditor };

package/dist/src/client/interfaces/components/ui/inputs/editor/plugins/asset-manager/asset-manager.js

@@ -0,0 +1,24 @@
+import { Plugin, ButtonView } from 'ckeditor5';
+
+const ASSET_MANAGER_PLUGIN_NAME = "asset-manager";
+const OPEN_ASSET_MANAGER_KEY = "open-asset-manager";
+class AssetManager extends Plugin {
+  init() {
+    const editor = this.editor;
+    editor.ui.componentFactory.add(ASSET_MANAGER_PLUGIN_NAME, () => {
+      const button = new ButtonView();
+      button.set({
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M1.201 1c-.662 0-1.2.47-1.2 1.1v14.248c0 .64.533 1.152 1.185 1.152h6.623v-7.236L6.617 9.15a.694.694 0 0 0-.957-.033L1.602 13.55V2.553l14.798.003V9.7H18V2.1c0-.63-.547-1.1-1.2-1.1zm11.723 2.805a2.1 2.1 0 0 0-1.621.832 2.127 2.127 0 0 0 1.136 3.357 2.13 2.13 0 0 0 2.611-1.506 2.13 2.13 0 0 0-.76-2.244 2.13 2.13 0 0 0-1.366-.44Z"/><path d="M19.898 12.369v6.187a.844.844 0 0 1-.844.844h-8.719a.844.844 0 0 1-.843-.844v-7.312a.844.844 0 0 1 .843-.844h2.531a.84.84 0 0 1 .597.248l.838.852h4.75c.223 0 .441.114.6.272a.84.84 0 0 1 .247.597m-1.52.654-4.377.02-1.1-1.143H11v6h7.4l-.023-4.877Z" clip-rule="evenodd"/></svg>`,
+        label: "Asset Manager",
+        tooltip: "Select a file from asset manager"
+      });
+      button.on("execute", () => {
+        const openAssetManager = editor.config.get(OPEN_ASSET_MANAGER_KEY);
+        openAssetManager?.();
+      });
+      return button;
+    });
+  }
+}
+
+export { ASSET_MANAGER_PLUGIN_NAME, AssetManager, OPEN_ASSET_MANAGER_KEY };

package/dist/src/client/interfaces/components/ui/inputs/editor/plugins/asset-manager/use-control-asset-mamager.js

@@ -0,0 +1,26 @@
+import { ImageUtils } from 'ckeditor5';
+import { useTranslator } from 'intor/react';
+import { useState, useEffect } from 'react';
+import 'mime-types';
+import { findTranslation } from '../../../../../../../../shared/translation/find-translation.js';
+import { joinUrl } from '../../../../../../../../shared/utils/join-url.js';
+
+const useControlAssetManager = (editorRef, storageUrl) => {
+  const { locale } = useTranslator();
+  const [isOpenAssetManager, setIsOpenAssetManager] = useState(false);
+  const [formData, setFormData] = useState({
+    file: null
+  });
+  useEffect(() => {
+    const { file } = formData;
+    if (!editorRef.current || !file) return;
+    const src = joinUrl(storageUrl, `${file.key}?id=${file.id}`);
+    const alt = findTranslation(file.translations, locale)?.alt ?? "";
+    const imageUtils = editorRef.current.plugins.get(ImageUtils.pluginName);
+    imageUtils.insertImage({ src, alt });
+    queueMicrotask(() => setFormData({ file: null }));
+  }, [editorRef, formData, locale]);
+  return { isOpenAssetManager, setIsOpenAssetManager, formData, setFormData };
+};
+
+export { useControlAssetManager };

package/dist/src/client/interfaces/components/ui/inputs/editor/plugins/word-count-display/icons.js

@@ -0,0 +1,17 @@
+const HTML_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+  <path d="M392.8 65.2C375.8 60.3 358.1 70.2 353.2 87.2L225.2 535.2C220.3 552.2 230.2 569.9 247.2 574.8C264.2 579.7 281.9 569.8 286.8 552.8L414.8 104.8C419.7 87.8 409.8 70.1 392.8 65.2zM457.4 201.3C444.9 213.8 444.9 234.1 457.4 246.6L530.8 320L457.4 393.4C444.9 405.9 444.9 426.2 457.4 438.7C469.9 451.2 490.2 451.2 502.7 438.7L598.7 342.7C611.2 330.2 611.2 309.9 598.7 297.4L502.7 201.4C490.2 188.9 469.9 188.9 457.4 201.4zM182.7 201.3C170.2 188.8 149.9 188.8 137.4 201.3L41.4 297.3C28.9 309.8 28.9 330.1 41.4 342.6L137.4 438.6C149.9 451.1 170.2 451.1 182.7 438.6C195.2 426.1 195.2 405.8 182.7 393.3L109.3 320L182.6 246.6C195.1 234.1 195.1 213.8 182.6 201.3z"/>
+</svg>
+`;
+const CHARACTERS_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+  <path d="M349.1 114.7C343.9 103.3 332.5 96 320 96C307.5 96 296.1 103.3 290.9 114.7L123.5 480L112 480C94.3 480 80 494.3 80 512C80 529.7 94.3 544 112 544L200 544C217.7 544 232 529.7 232 512C232 494.3 217.7 480 200 480L193.9 480L215.9 432L424.2 432L446.2 480L440.1 480C422.4 480 408.1 494.3 408.1 512C408.1 529.7 422.4 544 440.1 544L528.1 544C545.8 544 560.1 529.7 560.1 512C560.1 494.3 545.8 480 528.1 480L516.6 480L349.2 114.7zM394.8 368L245.2 368L320 204.8L394.8 368z"/>
+</svg>
+`;
+const WORDS_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+  <path d="M192 112L304 112L304 200C304 239.8 336.2 272 376 272L464 272L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 128C176 119.2 183.2 112 192 112zM352 131.9L444.1 224L376 224C362.7 224 352 213.3 352 200L352 131.9zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM263.3 338.2C260.1 325.3 247.1 317.5 234.2 320.7C221.3 323.9 213.5 337 216.7 349.8L248.7 477.8C251.2 488 260.1 495.3 270.6 495.9C281.1 496.5 290.7 490.2 294.4 480.4L319.9 412.3L345.4 480.4C349.1 490.2 358.7 496.5 369.2 495.9C379.7 495.3 388.6 488 391.1 477.8L423.1 349.8C426.3 336.9 418.5 323.9 405.6 320.7C392.7 317.5 379.7 325.3 376.5 338.2L363.2 391.4L342.3 335.6C339 326.2 330 320 320 320C310 320 301 326.2 297.5 335.6L276.6 391.4L263.3 338.2z"/>
+</svg>
+`;
+
+export { CHARACTERS_ICON, HTML_ICON, WORDS_ICON };

package/dist/src/client/interfaces/components/ui/inputs/editor/plugins/word-count-display/word-count-display.js

@@ -0,0 +1,81 @@
+import { Plugin, ButtonView } from 'ckeditor5';
+import 'mime-types';
+import { debounce } from '../../../../../../../../shared/utils/debounce.js';
+import { HTML_ICON, CHARACTERS_ICON, WORDS_ICON } from './icons.js';
+
+const WORD_COUNT = "WordCount";
+const WORD_COUNT_DISPLAY_PLUGIN_NAME = {
+  default: "word-count-display",
+  // CSS Class
+  characters: "word-count-display-characters",
+  // Plugin Name, CSS Class
+  words: "word-count-display-words",
+  // Plugin Name, CSS Class
+  html: "word-count-display-html"
+  // Plugin Name, CSS Class
+};
+class WordCountButtons extends Plugin {
+  init() {
+    const editor = this.editor;
+    const wordCountPlugin = editor.plugins.get(WORD_COUNT);
+    editor.ui.componentFactory.add(
+      WORD_COUNT_DISPLAY_PLUGIN_NAME.html,
+      (locale) => {
+        const button = new ButtonView(locale);
+        button.set({
+          icon: HTML_ICON,
+          label: `${editor.getData()?.length}`,
+          tooltip: true,
+          withText: true,
+          isEnabled: false,
+          class: `${WORD_COUNT_DISPLAY_PLUGIN_NAME.default} ${WORD_COUNT_DISPLAY_PLUGIN_NAME.html}`
+        });
+        const update = debounce(
+          () => button.label = `${editor.getData()?.length}`
+        );
+        editor.model.document.on("change:data", update);
+        return button;
+      }
+    );
+    editor.ui.componentFactory.add(
+      WORD_COUNT_DISPLAY_PLUGIN_NAME.characters,
+      (locale) => {
+        const button = new ButtonView(locale);
+        button.set({
+          icon: CHARACTERS_ICON,
+          label: `${wordCountPlugin.characters}`,
+          tooltip: true,
+          withText: true,
+          isEnabled: false,
+          class: `${WORD_COUNT_DISPLAY_PLUGIN_NAME.default} ${WORD_COUNT_DISPLAY_PLUGIN_NAME.characters}`
+        });
+        const update = debounce(
+          () => button.label = `${wordCountPlugin.characters}`
+        );
+        wordCountPlugin.on("change:characters", update);
+        return button;
+      }
+    );
+    editor.ui.componentFactory.add(
+      WORD_COUNT_DISPLAY_PLUGIN_NAME.words,
+      (locale) => {
+        const button = new ButtonView(locale);
+        button.set({
+          icon: WORDS_ICON,
+          label: `${wordCountPlugin.words}`,
+          tooltip: true,
+          withText: true,
+          isEnabled: false,
+          class: `${WORD_COUNT_DISPLAY_PLUGIN_NAME.default} ${WORD_COUNT_DISPLAY_PLUGIN_NAME.words}`
+        });
+        const update = debounce(
+          () => button.label = `${wordCountPlugin.words}`
+        );
+        wordCountPlugin.on("change:words", update);
+        return button;
+      }
+    );
+  }
+}
+
+export { WORD_COUNT_DISPLAY_PLUGIN_NAME, WordCountButtons as default };