tuikit-atomicx-vue3 4.5.0 → 4.5.1

package/src/components/MessageInput/TextEditor/EditorCore.ts

@@ -1,48 +1,72 @@
-import Image from '@tiptap/extension-image';
+/**
+ * EditorCore - Pure functional utilities for Tiptap editor
+ * Provides extension configuration and content conversion
+ */
 import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
-import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
-import { CharacterCount } from './extensions/characterCountExtension';
-import { createImageExtension } from './extensions/imageExtension';
+import {
+  CharacterCount,
+  createEmojiExtension,
+  createEnterKeyExtension,
+  createImageExtension,
+  createMentionExtension,
+} from './extensions';
 import type { InputContent } from '../../../states/MessageInputState';
-import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
+import type { JSONContent, Extensions } from '@tiptap/vue-3';
 import './Editor.scss';
 
-function createEmojiExtension() {
-  return Image.extend({
-    name: MessageContentType.EMOJI,
-    inline: true,
-    group: 'inline',
-    draggable: true,
-    addOptions() {
-      return {
-        ...this.parent?.(),
-        HTMLAttributes: {
-          class: 'message-emoji',
-        },
-      };
-    },
-  });
+// ============================================================================
+// Extension Configuration
+// ============================================================================
+
+interface ExtensionOptions {
+  placeholder?: string;
+  maxLength?: number;
+  showPlaceholderOnlyWhenEditable?: boolean;
+  onEnter?: () => void;
 }
 
-function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined }) {
-  return Extension.create({
-    addKeyboardShortcuts() {
-      return {
-        'Enter': () => {
-          options?.onEnter?.();
-          return true;
-        },
-        'Mod-Enter': ({ editor }) => {
-          editor.commands.setHardBreak();
-          return true;
-        },
-      };
-    },
-  });
+/**
+ * Create all editor extensions with given options
+ */
+function createExtensions(options: ExtensionOptions = {}): Extensions {
+  const {
+    placeholder = '',
+    maxLength,
+    showPlaceholderOnlyWhenEditable = true,
+    onEnter,
+  } = options;
+
+  return [
+    StarterKit.configure({
+      bold: false,
+      italic: false,
+      strike: false,
+      code: false,
+    }),
+    CharacterCount.configure({
+      limit: maxLength,
+    }),
+    createEnterKeyExtension(onEnter),
+    createEmojiExtension(),
+    createImageExtension(),
+    createMentionExtension(),
+    Placeholder.configure({
+      placeholder,
+      showOnlyWhenEditable: showPlaceholderOnlyWhenEditable,
+    }),
+  ];
 }
 
+// ============================================================================
+// Content Conversion
+// ============================================================================
+
+/**
+ * Convert Tiptap JSON content to business InputContent array
+ * Uses simple switch-case for clarity (no over-engineered registry pattern)
+ */
 function convertEditorContent(node: JSONContent): InputContent[] {
   if (!node?.content) {
     return [];
@@ -57,11 +81,13 @@ function convertEditorContent(node: JSONContent): InputContent[] {
             content: child.text,
           }]
           : [];
+
       case 'image':
         return [{
           type: MessageContentType.IMAGE,
           content: child.attrs?.fileData,
         }];
+
       case 'emoji':
         return [{
           type: MessageContentType.EMOJI,
@@ -71,81 +97,35 @@ function convertEditorContent(node: JSONContent): InputContent[] {
             text: child.attrs?.title,
           },
         }];
+
       case 'hardBreak':
         return [{
           type: MessageContentType.TEXT,
           content: '\n',
         }];
+
+      case 'mention':
+        return [{
+          type: MessageContentType.MENTION,
+          content: {
+            id: child.attrs?.id,
+            label: child.attrs?.label,
+            mentionSuggestionChar: child.attrs?.mentionSuggestionChar,
+          },
+        }];
+
       default:
+        // Recursively handle nested content (e.g., paragraph nodes)
         return convertEditorContent(child);
     }
   });
 }
 
-interface EditorOptions {
-  element: Element;
-  placeholder?: string;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  maxLength?: number;
-  isPlaceholderOnlyShowWhenEditable?: boolean;
-  onUpdate?: (content: InputContent[]) => void;
-  onEnter?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-function createEditor({
-  element,
-  placeholder = '',
-  autoFocus = false,
-  disabled = false,
-  isPlaceholderOnlyShowWhenEditable = true,
-  maxLength = undefined,
-  onUpdate,
-  onEnter,
-  onFocus,
-  onBlur,
-}: EditorOptions) {
-  const createBaseExtensions = (enterHandler?: () => void) => [
-    StarterKit.configure({
-      bold: false,
-      italic: false,
-      strike: false,
-      code: false,
-    }),
-    CharacterCount.configure({
-      limit: maxLength,
-    }),
-    createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : undefined),
-    createEmojiExtension(),
-    createImageExtension(),
-    Placeholder.configure({
-      placeholder,
-      showOnlyWhenEditable: isPlaceholderOnlyShowWhenEditable,
-    }),
-  ];
-
-  const editorConfig: Partial<TiptapEditorOptions> = {
-    element,
-    autofocus: autoFocus,
-    editable: !disabled,
-    extensions: createBaseExtensions(onEnter),
-    onUpdate: ({ editor }) => {
-      const content = convertEditorContent(editor.getJSON());
-      onUpdate?.(content);
-    },
-    onFocus,
-    onBlur,
-  };
-
-  return new Editor(editorConfig);
-}
+// ============================================================================
+// Exports
+// ============================================================================
 
 export {
-  createEditor,
-};
-
-export type {
-  Editor,
+  createExtensions,
+  convertEditorContent,
 };

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -3,10 +3,10 @@
     <div :class="styles['input-prefix']">
       <slot name="inputPrefix" />
     </div>
-    <div
-      ref="editorDomRef"
-      :key="props.disabled ? 'disabled' : 'enabled'"
+    <EditorContent
+      :editor="editor"
       :class="styles['editor']"
+      class="message-input"
     />
     <div :class="styles['input-suffix']">
       <slot name="inputSuffix" />
@@ -15,13 +15,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { computed, watch, onBeforeUnmount } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useEditor, EditorContent } from '@tiptap/vue-3';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageInputState } from '../../../states/MessageInputState';
-import { createEditor } from './EditorCore';
+import { createExtensions, convertEditorContent } from './EditorCore';
 import styles from './TextEditor.module.scss';
-import type { Editor } from './EditorCore';
 
 interface TextEditorProps {
   autoFocus?: boolean;
@@ -41,85 +41,81 @@ const { t, language } = useUIKit();
 const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
-const editorDomRef = ref<HTMLDivElement | null>(null);
-const isFocused = ref(props.autoFocus);
-
 const computedPlaceholder = computed(() => props.placeholder ?? t('MessageInput.enter_a_message'));
 
-let editorInstance: Editor | null = null;
+// Handle Enter key to send message
+const handleEnter = () => {
+  sendMessage();
+  setContent('');
+};
 
-onMounted(() => {
-  const element = editorDomRef.value;
-  if (!element) {
-    return;
+// Create editor using Tiptap's official useEditor composable
+const editor = useEditor({
+  autofocus: props.autoFocus,
+  editable: !props.disabled,
+  extensions: createExtensions({
+    placeholder: computedPlaceholder.value,
+    maxLength: props.maxLength,
+    showPlaceholderOnlyWhenEditable: props.placeholder === undefined,
+    onEnter: handleEnter,
+  }),
+  onUpdate: ({ editor: editorInstance }) => {
+    const content = convertEditorContent(editorInstance.getJSON());
+    updateRawValue(content);
+  },
+});
+
+// Sync editor instance to global state
+watch(editor, (newEditor) => {
+  setEditorInstance(newEditor ?? null);
+}, { immediate: true });
+
+// Reactive: disabled prop
+watch(() => props.disabled, (newDisabled) => {
+  editor.value?.setEditable(!newDisabled);
+  if (newDisabled) {
+    setContent('');
   }
+});
 
-  element.classList.add('message-input');
+// Reactive: placeholder (including language change)
+watch([computedPlaceholder, language], () => {
+  if (!editor.value) {
+    return;
+  }
 
-  if (!element.dataset.editorCreated) {
-    editorInstance = createEditor({
-      element,
-      placeholder: computedPlaceholder.value,
-      isPlaceholderOnlyShowWhenEditable: props.placeholder === undefined,
-      autoFocus: props.autoFocus,
-      disabled: props.disabled,
-      maxLength: props.maxLength,
-      onUpdate: (content) => {
-        updateRawValue(content);
-      },
-      onEnter: () => {
-        sendMessage();
-        setContent('');
-      },
-      onFocus: () => {
-        isFocused.value = true;
-      },
-      onBlur: () => {
-        isFocused.value = false;
-      },
-    });
-    element.dataset.editorCreated = 'true';
-    setEditorInstance(editorInstance);
+  const placeholderExtension = editor.value.extensionManager.extensions.find(
+    ext => ext.name === 'placeholder',
+  );
+  if (placeholderExtension) {
+    placeholderExtension.options.placeholder = computedPlaceholder.value;
+    editor.value.view.updateState(editor.value.state);
   }
 });
 
-onUnmounted(() => {
-  const element = editorDomRef.value;
-  if (editorInstance && element) {
-    editorInstance.destroy();
-    element.removeAttribute('data-editor-created');
-    setEditorInstance(null);
+// Reactive: maxLength
+watch(() => props.maxLength, (newMaxLength) => {
+  if (!editor.value) {
+    return;
+  }
+
+  const characterCountExtension = editor.value.extensionManager.extensions.find(
+    ext => ext.name === 'characterCount',
+  );
+  if (characterCountExtension) {
+    characterCountExtension.options.limit = newMaxLength;
   }
 });
 
+// Clear content when conversation changes
 watch(activeConversation, (newConversation, oldConversation) => {
   if (newConversation?.conversationID !== oldConversation?.conversationID) {
     setContent('');
   }
 });
 
-// Watch language change and update placeholder using Tiptap's extensionManager
-watch(language, () => {
-  if (editorInstance && props.placeholder === undefined) {
-    // Update placeholder extension options
-    const placeholderExtension = editorInstance.extensionManager.extensions.find(
-      ext => ext.name === 'placeholder',
-    );
-    if (placeholderExtension) {
-      // eslint-disable-next-line no-param-reassign
-      placeholderExtension.options.placeholder = computedPlaceholder.value;
-      // Force re-render to apply new placeholder
-      editorInstance.view.updateState(editorInstance.state);
-    }
-  }
-});
-
-watch(() => props.disabled, (newDisabled) => {
-  if (editorInstance) {
-    editorInstance.setEditable(!newDisabled);
-    if (newDisabled) {
-      setContent('');
-    }
-  }
+// Cleanup on unmount
+onBeforeUnmount(() => {
+  setEditorInstance(null);
 });
 </script>