fix: [AIChatInput] Fixed the issue where addPasteRules for custom nod… (#3042)

* fix: [AIChatInput] Fixed the issue where addPasteRules for custom nodes was not working, closes #3040

* chore: update yarn.lock

Author: YyumeiZhang

packages/semi-foundation/aiChatInput/constants.ts

@@ -9,7 +9,8 @@ const strings = {
     TOPS_SLOT_POSITION_DEFAULT: "top",
     ZERO_WIDTH_CHAR: '\uFEFF',
     PIC_PREFIX: 'image/',
-    PIC_SUFFIX_ARRAY: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp']
+    PIC_SUFFIX_ARRAY: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'],
+    DELETABLE: 'skipCustomTransactionPlugin'
 };
 
 const numbers = {

packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx

@@ -10,8 +10,10 @@ import { getAttachmentType, isImageType } from '@douyinfe/semi-foundation/aiChat
 import suggestion from './suggestion';
 import Mention from '@tiptap/extension-mention';
 import ReferSlot from './referSlot';
-import { RadioGroup, Radio, Cascader } from '../../index';
+import { RadioGroup, Radio, Cascader, Toast } from '../../index';
 import getConfigureItem from '../configure/getConfigureItem';
+import DocSlot from './docSlot';
+import copy from 'copy-text-to-clipboard';
 
 export default {
   title: 'AIChatInput',
@@ -52,11 +54,19 @@ export const Basic = () => {
 const temp = {
     'input-slot': `我是一名<input-slot placeholder="[职业]">学生</input-slot>，帮我写一段面向<input-slot placeholder="[输入对象]"></input-slot>的话术内容`,
     'select-slot': `我的职业是<select-slot value="打工人" options='["打工人", "学生"]'></select-slot>，帮我写一份...`,
-    // 'skill-slot': '<skill-slot data-label="帮我写作" data-value="writing" data-template=true></skill-slot>帮我完成...',
-    'skill-slot': {
-        type: "skillSlot",
-        attrs: { label: "帮我写作", value: 'writing',  hasTemplate: false }
-      },
+    // 'skill-slot': '<skill-slot data-label="帮我写作" data-value="writing" data-template=true></skill-slot>',
+    "skill-slot": {
+        type: "doc",
+        content: [
+          {
+              type: "paragraph",
+              content: [{
+                  type: "skillSlot",
+                  attrs: { value: "writing", label: "帮我写作", hasTemplate: "true", isCustomSlot: true }
+              }]
+          }
+        ]
+    }
 };
 
 export const RichTextExample = () => {
@@ -575,3 +585,58 @@ export const CustomRichTextExtension = () => {
     </>
   );
 }
+
+export const AddPasteRule = () => {
+  const ref = useRef();
+  const extensions = useMemo(() => {
+    return [ DocSlot ]
+  }, []);
+
+  const onContentChange = useCallback((content) => {
+    console.log('onContentChange', content);
+  }, []);
+
+  const onButtonClick = useCallback(() => {
+    console.log('html', ref.current?.editor.getHTML());
+    console.log('json', ref.current?.editor.getJSON());
+  }, [ref]);
+
+  const transformer = useMemo(() => {
+    return new Map([
+      ['docSlot', (obj) => {
+        const { attrs = {} } = obj;
+        const { value, type = 'text', uniqueKey, urlValue } = attrs;
+        return {
+          type: type, 
+          value: value,
+          urlValue: urlValue,
+          uniqueKey: uniqueKey,
+        };
+      }],
+    ]);
+  }, []);
+
+  const onClickCopy = useCallback(() => {
+    const url = 'https://bytedance.larkoffice.com/docx/UihWdOxOmoya5CxbzKEcWTfTnnf';
+    copy(url);
+    Toast.success('复制成功，粘贴到富文本输入框中查看效果')
+  }, []);
+
+  return (
+    <>
+      <Button onClick={onClickCopy}>点我复制文档链接</Button>
+      <AIChatInput
+        className='customTopSlot'
+        extensions={extensions}
+        onContentChange={onContentChange}
+        ref={ref}
+        transformer={transformer}
+        uploadProps={uploadProps}
+        style={outerStyle}
+        placeholder="点击复制文档链接按钮，然后粘贴到这里"
+      />
+      <Button onClick={onButtonClick}>点我获取结果</Button>
+      {/* <Button onClick={onButtonClick2}>点我设置结果</Button> */}
+    </>
+  );
+}

packages/semi-ui/aiChatInput/_story/docSlot.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Typography, Tooltip, AIChatInput } from '@douyinfe/semi-ui';
+import { Extension, Node, mergeAttributes, nodePasteRule } from '@tiptap/core';
+import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react';
+
+import { IconFile } from '@douyinfe/semi-icons';
+
+
+export const docSlotComponent = props => {
+    const { Text } = Typography;
+    const { node } = props;
+    const value = node.attrs.urlValue ?? '';
+    return (<NodeViewWrapper
+        onClick={() => console.log('click doc slot', value)}
+        className={'docSlotContainer'}
+    >
+        <div className={'textContainer'}>
+            <IconFile />
+            <Text
+                className={'text'}
+                ellipsis={{ showTooltip: { opts: { content: value } } }}
+            >
+                {value}
+            </Text>
+        </div>
+    </NodeViewWrapper>
+    );
+};
+
+const DocSlot = Node.create({
+    name: 'docSlot',
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: false,
+
+    // 自定义粘贴规则用例测试
+    addPasteRules() {
+        return [
+            nodePasteRule({
+                find: /^https:\/\/bytedance\.larkoffice\.com\/(docx|wiki)\/[A-Za-z0-9]{27}(?:\?[^\s]*)?/g,
+                type: this.type,
+                getAttributes: match => {
+                    console.log('match', match[0]);
+                    return {
+                        urlValue: match[0],
+                    };
+                },
+            }),
+        ];
+    },
+
+    addAttributes() {
+        return {
+            value: {
+                default: '',
+                parseHTML: element => element.getAttribute('data-value'),
+                renderHTML: attributes => ({
+                    'data-value': attributes.value,
+                }),
+            },
+            urlValue: {
+                default: '',
+                parseHTML: element => element.getAttribute('data-url-value'),
+                renderHTML: attributes => ({
+                    'data-url-value': attributes.urlValue,
+                }),
+            },
+            type: {
+                default: 'url',
+            },
+            uniqueKey: {
+                default: '',
+                parseHTML: element => element.getAttribute('data-unique-key'),
+                renderHTML: attributes => ({
+                    'data-unique-key': attributes.uniqueKey,
+                }),
+            },
+            isCustomSlot: AIChatInput.getCustomSlotAttribute(),
+        };
+    },
+
+    parseHTML() {
+        return [ { tag: 'doc-slot' } ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['doc-slot', mergeAttributes(HTMLAttributes)];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(docSlotComponent);
+    },
+});
+
+export default DocSlot;

packages/semi-ui/aiChatInput/_story/stories.scss

@@ -188,6 +188,28 @@
 }
 
 
+.docSlotContainer {
+    display: inline-flex;
+    border: 1px solid var(--semi-color-border);
+    background: var(--semi-color-fill-0);
+    border-radius: 4px;
+    font-size: 16px;
+    line-height: 20px;
+
+    .textContainer {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        .text {
+            max-width: 150px;
+            font-size: 16px;
+            line-height: 20px;
+            color: var(--semi-color-text-0);
+        }
+    }
+}
+
 
 
 

packages/semi-ui/aiChatInput/extension/plugins.ts

@@ -93,15 +93,15 @@ export function handleZeroWidthCharLogic(newState: EditorState) {
 export function ensureTrailingText(schema: any) {
     return new Plugin({
         appendTransaction(transactions, oldState, newState) {
+            if (transactions.some(tr => tr.getMeta(strings.DELETABLE))) {
+                // 此次 transaction 是主动删除 inputSlot，不补零宽字符
+                // This is an active deletion of inputSlot, do not add zero-width characters
+                return null;
+            }
             // 只在内容发生变化时修正，防止选区丢失
             // Only correct when content changes to prevent loss of selections
             const docChanged = transactions.some(tr => tr.docChanged);
             if (!docChanged) return null;
-            // if (transactions.some(tr => tr.getMeta(strings.DeleteAble))) {
-            //     // 此次 transaction 是主动删除 inputSlot，不补零宽字符
-            //     // This is an active deletion of inputSlot, do not add zero-width characters
-            //     return null;
-            // }
             return handleZeroWidthCharLogic(newState);
         },
     });
@@ -409,51 +409,12 @@ export function keyDownHandlePlugin(schema: any) {
 }
 
 export function handlePasteLogic(view: EditorView, event: ClipboardEvent) {
-    // If there is rich text content, let tiptap handle it by default
-    const types = event.clipboardData?.types || [];
-    const html = event.clipboardData?.getData('text/html');
-    // 如果包含 html 内容，并且 html 内容中包含 input-slot, select-slot, skill-slot 节点，则不阻断
-    // todo：增加用户扩展 slot 的判断
-    if ((types.includes('text/html') && (['<input-slot', '<select-slot', '<skill-slot'].some(slot => html?.includes(slot))))
-        || types.includes('application/x-prosemirror-slice')) {
-        return false;
-    }
-    const text = event.clipboardData?.getData('text/plain');
-    if (text) {
-        const { state, dispatch } = view;
-        const $from = state.selection.$from;
-        let tr = state.tr;
-        removeZeroWidthChar($from, tr);
-        /* Use tr to continue the subsequent pasting logic and solve the problem of unsuccessful line wrapping of content 
-            pasted from certain web pages, such as the code of Feishu Documents */
-        const lines = text.split('\n');
-        let finalCursorPos = null;
-        if (lines.length === 1) {
-            // Insert the first line directly
-            tr = tr.insertText(lines[0], tr.selection.from, tr.selection.to);
-            finalCursorPos = tr.selection.$to.pos;
-        } else {
-            // other lines, insert one by one
-            tr = tr.insertText(lines[0], tr.selection.from, tr.selection.to);
-            let pos = tr.selection.$to.pos;
-            for (let i = 1; i < lines.length; i++) {
-                const paragraph = state.schema.nodes.paragraph.create(
-                    {},
-                    lines[i] ? state.schema.text(lines[i]) : null
-                );
-                tr = tr.insert(pos, paragraph);
-                pos += paragraph.nodeSize;
-            }
-            finalCursorPos = pos; // 粘贴多行时，光标应在最后插入内容末尾
-        }
-        // 设置 selection 到粘贴内容末尾
-        tr = tr.setSelection(TextSelection.create(tr.doc, finalCursorPos));
-        // scroll to the pasted position
-        tr = tr.scrollIntoView();
-        dispatch(tr);
-        event.preventDefault();
-        return true;
-    }
+    const { state, dispatch } = view;
+    const $from = state.selection.$from;
+    let tr = state.tr;
+    removeZeroWidthChar($from, tr);
+    tr.setMeta(strings.DELETABLE, true);
+    dispatch(tr);
     return false;
 }
 

packages/semi-ui/package.json

@@ -26,15 +26,15 @@
         "@douyinfe/semi-icons": "2.88.2",
         "@douyinfe/semi-illustrations": "2.88.2",
         "@douyinfe/semi-theme-default": "2.88.2",
-        "@tiptap/core": "^3.1.0",
-        "@tiptap/extension-document": "^3.3.0",
-        "@tiptap/extension-hard-break": "^3.3.0",
-        "@tiptap/extension-mention": "^3.1.0",
-        "@tiptap/extension-paragraph": "^3.3.0",
-        "@tiptap/extension-text": "^3.3.0",
-        "@tiptap/extensions": "^3.1.0",
-        "@tiptap/pm": "^3.1.0",
-        "@tiptap/react": "^3.1.0",
+        "@tiptap/core": "^3.10.7",
+        "@tiptap/extension-document": "^3.10.7",
+        "@tiptap/extension-hard-break": "^3.10.7",
+        "@tiptap/extension-mention": "^3.10.7",
+        "@tiptap/extension-paragraph": "^3.10.7",
+        "@tiptap/extension-text": "^3.10.7",
+        "@tiptap/extensions": "^3.10.7",
+        "@tiptap/pm": "^3.10.7",
+        "@tiptap/react": "^3.10.7",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",