feat: add word count

admin/src/components/CircleProgress/index.css

@@ -0,0 +1,38 @@
+.circle-progress {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.circle-progress__svg {
+  transform: rotate(-90deg);
+}
+
+.circle-progress__bg {
+  stroke: #e5e7eb;
+}
+
+.circle-progress__fg {
+  stroke: rgb(73, 69, 255);
+}
+
+.circle-progress__text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.circle-progress__count {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.circle-progress__label {
+  font-size: 1.2rem;
+  color: #6b7280;
+}

admin/src/components/CircleProgress/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import './index.css';
+
+interface CircleProgressProps {
+  percentage: number;
+  count: number;
+  label: string;
+}
+
+const CircleProgress: React.FC<CircleProgressProps> = ({ percentage, count, label }) => {
+  const radius = 40;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="circle-progress">
+      <svg className="circle-progress__svg" width="120" height="120">
+        <circle
+          cx="60"
+          cy="60"
+          r={radius}
+          strokeWidth="10"
+          fill="transparent"
+          className="circle-progress__bg"
+        />
+        <circle
+          cx="60"
+          cy="60"
+          r={radius}
+          strokeWidth="10"
+          fill="transparent"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          className="circle-progress__fg"
+        />
+      </svg>
+      <div className="circle-progress__text">
+        <span className="circle-progress__count">{count}</span>
+        <span className="circle-progress__label">{label}</span>
+      </div>
+    </div>
+  );
+};
+
+export default CircleProgress;

admin/src/lexical/Editor.tsx

@@ -7,6 +7,8 @@
  */
 
 import type { JSX } from 'react';
+import { useIntl } from 'react-intl';
+
 
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
@@ -26,7 +28,6 @@ import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useEffect, useState } from 'react';
-import { CAN_USE_DOM } from './utils/environment';
 
 import { EditorState, SerializedEditorState, SerializedLexicalNode } from 'lexical';
 import { useSharedHistoryContext } from './context/SharedHistoryContext';
@@ -59,6 +60,8 @@ import PageBreakPlugin from './plugins/PageBreakPlugin';
 import PollPlugin from './plugins/PollPlugin';
 import ShortcutsPlugin from './plugins/ShortcutsPlugin';
 import SpecialTextPlugin from './plugins/SpecialTextPlugin';
+import SpeechToTextPlugin from './plugins/SpeechToTextPlugin';
+import StrapiImagePlugin from './plugins/StrapiImagePlugin';
 import StrapiOnChangePlugin from './plugins/StrapiOnChangePlugin';
 import TabFocusPlugin from './plugins/TabFocusPlugin';
 import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
@@ -68,13 +71,15 @@ import TableOfContentsPlugin from './plugins/TableOfContentsPlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import TreeViewPlugin from './plugins/TreeViewPlugin';
 import TwitterPlugin from './plugins/TwitterPlugin';
+import WordCountPlugin from './plugins/WordCountPlugin';
 import YouTubePlugin from './plugins/YouTubePlugin';
 import ContentEditable from './ui/ContentEditable';
+import { CAN_USE_DOM } from './utils/environment';
 
-import { useIntl } from 'react-intl';
-import StrapiImagePlugin from './plugins/StrapiImagePlugin';
 import './styles.css';
 
+const CHARACTER_LIMIT = 1500;
+
 interface LexicalEditorProps {
   onChange: (newValue: SerializedEditorState<SerializedLexicalNode>) => void;
   ref: React.ForwardedRef<HTMLDivElement>;
@@ -244,8 +249,12 @@ export default function Editor(props: LexicalEditorProps): JSX.Element {
             <HistoryPlugin externalHistoryState={historyState} />
           </>
         )}
+        {/* @todo: maxLength should be a setting */}
         {(isCharLimit || isCharLimitUtf8) && (
-          <CharacterLimitPlugin charset={isCharLimit ? 'UTF-16' : 'UTF-8'} maxLength={5} />
+          <CharacterLimitPlugin
+            charset={isCharLimit ? 'UTF-16' : 'UTF-8'}
+            maxLength={CHARACTER_LIMIT}
+          />
         )}
         {isAutocomplete && <AutocompletePlugin />}
         <div>{showTableOfContents && <TableOfContentsPlugin />}</div>
@@ -256,6 +265,7 @@ export default function Editor(props: LexicalEditorProps): JSX.Element {
           shouldPreserveNewLinesInMarkdown={shouldPreserveNewLinesInMarkdown}
         />
       </div>
+      <WordCountPlugin limit={CHARACTER_LIMIT} charset={isCharLimit ? 'UTF-16' : 'UTF-8'} />
       {showTreeView && <TreeViewPlugin />}
       <StrapiOnChangePlugin onChange={onChange} expectedEditorState={props.expectedEditorState} />
       <StrapiImagePlugin />