添加字数统计功能

src/components/Footer.ts

@@ -5,6 +5,7 @@ import { EditorEvents } from "@tiptap/core";
 import { UAIEditorEventListener, UAIEditorOptions } from "../core/UAIEditor.ts";
 
 import { ToggleToc } from "./menus/toolbar/page/ToggleToc";
+import { CharacterCount } from "./menus/statusbar/CharacterCount.ts";
 
 /**
  * 编辑器底部状态栏
@@ -15,11 +16,15 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
     // 文档大纲
     toggleToc!: ToggleToc;
 
+    // 字数统计
+    characterCount!: CharacterCount;
+
     constructor() {
         super();
 
         // 创建状态栏菜单
         this.toggleToc = new ToggleToc({ menuType: "button", enable: true });
+        this.characterCount = new CharacterCount();
     }
 
     /**
@@ -30,6 +35,7 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
     onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
         // 初始化状态栏菜单
         this.toggleToc.onCreate(event, options);
+        this.characterCount.onCreate(event, options);
 
         this.container = document.createElement("div");
         this.container.classList.add("uai-footer");
@@ -54,6 +60,18 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
 
         // 状态栏中添加功能菜单按钮
         statusBarLeft.appendChild(this.toggleToc);
+        statusBarLeft.appendChild(this.createSplit());
+        statusBarLeft.appendChild(this.characterCount);
+    }
+
+    /**
+     * 创建菜单分隔线
+     * @returns 
+     */
+    createSplit() {
+        const split = document.createElement("div");
+        split.classList.add("uai-status-bar-split");
+        return split;
     }
 
     /**
@@ -63,9 +81,11 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
      */
     onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
         this.toggleToc.onTransaction(event, options);
+        this.characterCount.onTransaction(event, options);
     }
 
     onEditableChange(editable: boolean) {
         this.toggleToc.onEditableChange(editable);
+        this.characterCount.onEditableChange(editable);
     }
 }

src/components/index.ts

@@ -96,6 +96,8 @@ import { VideoBubbleMenu } from "./menus/bubble/VideoBubbleMenu.ts";
 
 import { AudioBubbleMenu } from "./menus/bubble/AudioBubbleMenu.ts";
 
+import { CharacterCount } from "./menus/statusbar/CharacterCount.ts";
+
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
 defineCustomElement('uai-editor-editor', Editor);
@@ -182,6 +184,8 @@ defineCustomElement('uai-editor-export-menu-pdf', ExportPdf);
 defineCustomElement('uai-editor-export-menu-markdown', ExportMarkdown);
 defineCustomElement('uai-editor-export-menu-image', ExportImage);
 
+defineCustomElement('uai-editor-statusbar-menu-character-count', CharacterCount);
+
 defineCustomElement('uai-editor-bubble-menu-text-selection', TextSelectionBubbleMenu);
 
 defineCustomElement('uai-editor-bubble-menu-image', ImageBubbleMenu);

src/components/menus/statusbar/CharacterCount.ts

@@ -0,0 +1,96 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+import tippy, { Instance, Props } from "tippy.js";
+
+/**
+ * 状态栏菜单：字数统计
+ */
+export class CharacterCount extends HTMLElement implements UAIEditorEventListener {
+    // 字数统计容器
+    container!: HTMLDivElement;
+    // 提示框内容
+    tipsContent!: HTMLDivElement;
+    // 提示框实例
+    tippyInstance!: Instance<Props>;
+
+    constructor() {
+        super();
+        // 创建字数统计容器
+        this.container = document.createElement("div");
+        this.container.classList.add("uai-menu-button-wrap");
+        this.container.classList.add("uai-menu-button");
+        this.container.style.cursor = "pointer";
+        this.appendChild(this.container);
+        // 创建字数统计内容容器
+        this.tipsContent = document.createElement("div");
+        this.tipsContent.classList.add("uai-word-count-detail");
+        // 提示框实例化
+        this.tippyInstance = tippy(this.container, {
+            appendTo: "parent",
+            content: this.tipsContent,
+            theme: 'uai-tips',
+            placement: "top",
+            // trigger: "click",
+            // arrow: false,
+            // interactive: true,
+        });
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(_event: EditorEvents["create"], _options: UAIEditorOptions) {
+        this.addEventListener("click", () => {
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], _options: UAIEditorOptions) {
+        const { selection } = event.editor.state;
+        // 获取当前选中的内容
+        const text = event.editor.state.doc.textBetween(
+            selection.from,
+            selection.to,
+            '',
+        );
+
+        // 根据当前选定的内容，获取相应的字数
+        if (text.length > 0) {
+            this.container.innerHTML = `&nbsp;&nbsp;${text.length} / ${event.editor.storage.characterCount.characters()} 字符&nbsp;&nbsp;`;
+        } else {
+            this.container.innerHTML = `&nbsp;&nbsp;${event.editor.storage.characterCount.characters()} 字符&nbsp;&nbsp;`;
+        }
+
+        // 提示框内容
+        this.tipsContent.innerHTML = `
+            <div class="uai-word-count-title">${t('wordCount.title')}</div>
+            <ul>
+              <li>
+                ${t('wordCount.input')}
+                <span>
+                  ${event.editor.storage.characterCount.characters()}
+                </span>
+              </li>
+              <li>
+                ${t('wordCount.selection')}
+                <span>${text.length}</span>
+              </li>
+            </ul>
+          </div>
+        `
+    }
+
+    onEditableChange(_editable: boolean) {
+    }
+}
+

src/core/UAIExtensions.ts

@@ -5,6 +5,7 @@ import { Extension, Extensions, getTextBetween } from "@tiptap/core";
 import { UAIEditor, UAIEditorOptions } from "./UAIEditor";
 
 import { StarterKit } from "@tiptap/starter-kit";
+import { CharacterCount } from "@tiptap/extension-character-count";
 import { Color } from "@tiptap/extension-color";
 import { FontFamily } from "@tiptap/extension-font-family";
 import { Highlight } from "@tiptap/extension-highlight";
@@ -204,6 +205,7 @@ export const allExtensions = (uaiEditor: UAIEditor, _options: UAIEditorOptions):
         }),
         Audio,
         BulletList,
+        CharacterCount,
         Color,
         Export.configure({
             appId: process.env.TIPTAP_APP_ID,