@zjlab-fe/data-hub-ui 0.21.7 → 0.23.0

package/es/components/tip-tap/extensions/index.js

@@ -0,0 +1,133 @@
+import StarterKit from '@tiptap/starter-kit';
+import TextAlign from '@tiptap/extension-text-align';
+import Highlight from '@tiptap/extension-highlight';
+import Color from '@tiptap/extension-color';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Image from '@tiptap/extension-image';
+import { Table } from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import Placeholder from '@tiptap/extension-placeholder';
+import { Markdown } from '@tiptap/markdown';
+import { createLowlight, all } from 'lowlight';
+import { MarkdownPaste } from './markdown-paste.js';
+
+// Create lowlight instance with common languages
+const lowlight = createLowlight(all);
+const editorExtensions = (placeholder) => [
+    StarterKit.configure({
+        heading: {
+            levels: [1, 2, 3, 4],
+        },
+        codeBlock: false, // Using CodeBlockLowlight instead
+        link: {
+            openOnClick: false,
+            autolink: true,
+            defaultProtocol: 'https',
+            HTMLAttributes: {
+                rel: 'noopener noreferrer',
+                target: '_blank',
+            },
+        },
+    }),
+    Placeholder.configure({
+        placeholder: placeholder || '开始输入内容...',
+        emptyEditorClass: 'is-editor-empty',
+    }),
+    TextStyle,
+    Color.configure({
+        types: ['textStyle'],
+    }),
+    TextAlign.configure({
+        types: ['heading', 'paragraph'],
+    }),
+    Highlight.configure({
+        multicolor: true,
+    }),
+    Image.configure({
+        inline: true,
+        allowBase64: true,
+        HTMLAttributes: {
+            class: 'tip-tap-image',
+        },
+    }),
+    Table.configure({
+        resizable: true,
+        HTMLAttributes: {
+            class: 'tip-tap-table',
+        },
+    }),
+    TableRow,
+    TableCell,
+    TableHeader,
+    CodeBlockLowlight.configure({
+        lowlight,
+        defaultLanguage: 'javascript',
+        HTMLAttributes: {
+            class: 'tip-tap-code-block',
+        },
+    }),
+    // Markdown 支持 - 用于解析和序列化 Markdown
+    Markdown.configure({
+        markedOptions: {
+            gfm: true, // GitHub Flavored Markdown
+            breaks: true, // 换行符转为 <br>
+        },
+    }),
+    // 自动检测和解析粘贴的 Markdown
+    MarkdownPaste.configure({
+        enabled: true,
+    }),
+];
+const readerExtensions = () => [
+    StarterKit.configure({
+        heading: {
+            levels: [1, 2, 3, 4],
+        },
+        codeBlock: false,
+        link: {
+            openOnClick: true,
+            HTMLAttributes: {
+                rel: 'noopener noreferrer',
+                target: '_blank',
+            },
+        },
+    }),
+    TextStyle,
+    Color.configure({
+        types: ['textStyle'],
+    }),
+    TextAlign.configure({
+        types: ['heading', 'paragraph'],
+    }),
+    Highlight.configure({
+        multicolor: true,
+    }),
+    Image.configure({
+        inline: true,
+        allowBase64: true,
+        HTMLAttributes: {
+            class: 'tip-tap-image',
+        },
+    }),
+    Table.configure({
+        resizable: false,
+        HTMLAttributes: {
+            class: 'tip-tap-table',
+        },
+    }),
+    TableRow,
+    TableCell,
+    TableHeader,
+    CodeBlockLowlight.configure({
+        lowlight,
+        defaultLanguage: 'javascript',
+        HTMLAttributes: {
+            class: 'tip-tap-code-block',
+        },
+    }),
+];
+
+export { editorExtensions, readerExtensions };

package/es/components/tip-tap/extensions/markdown-paste.js

@@ -0,0 +1,148 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+/**
+ * 检测文本是否为 Markdown 格式
+ * 通过检查常见的 Markdown 语法特征来判断
+ */
+const isMarkdown = (text) => {
+    // 常见的 Markdown 模式
+    const markdownPatterns = [
+        /^#{1,6}\s+/m, // 标题: # ## ### 等
+        /^\s*[-*+]\s+/m, // 无序列表: - * +
+        /^\s*\d+\.\s+/m, // 有序列表: 1. 2. 3.
+        /\*\*[^*]+\*\*/, // 粗体: **text**
+        /\*[^*]+\*/, // 斜体: *text*
+        /__[^_]+__/, // 粗体: __text__
+        /_[^_]+_/, // 斜体: _text_
+        /`[^`]+`/, // 行内代码: `code`
+        /```[\s\S]*?```/, // 代码块: ```code```
+        /^\s*>\s+/m, // 引用: > quote
+        /\[([^\]]+)\]\(([^)]+)\)/, // 链接: [text](url)
+        /!\[([^\]]*)\]\(([^)]+)\)/, // 图片: ![alt](url)
+        /^\s*---\s*$/m, // 分割线: ---
+        /^\s*\*\*\*\s*$/m, // 分割线: ***
+        /^\s*\|.+\|/m, // 表格: | col1 | col2 |
+        /~~[^~]+~~/, // 删除线: ~~text~~
+        /^\s*-\s*\[[ x]\]\s+/im, // 任务列表: - [ ] 或 - [x]
+    ];
+    // 计算匹配的模式数量
+    let matchCount = 0;
+    for (const pattern of markdownPatterns) {
+        if (pattern.test(text)) {
+            matchCount++;
+        }
+    }
+    // 如果匹配了至少 1 个 Markdown 模式，则认为是 Markdown
+    // 对于更严格的检测，可以提高这个阈值
+    return matchCount >= 1;
+};
+/**
+ * Markdown 粘贴扩展
+ * 自动检测粘贴的内容是否为 Markdown 格式，如果是则解析为富文本
+ */
+const MarkdownPaste = Extension.create({
+    name: 'markdownPaste',
+    addOptions() {
+        return {
+            /**
+             * 是否启用 Markdown 粘贴检测
+             */
+            enabled: true,
+            /**
+             * 自定义 Markdown 检测函数
+             */
+            isMarkdown: isMarkdown,
+        };
+    },
+    addProseMirrorPlugins() {
+        const { editor } = this;
+        const options = this.options;
+        return [
+            new Plugin({
+                key: new PluginKey('markdownPaste'),
+                props: {
+                    handlePaste: (_view, event) => {
+                        if (!options.enabled) {
+                            return false;
+                        }
+                        const clipboardData = event.clipboardData;
+                        if (!clipboardData) {
+                            return false;
+                        }
+                        // 获取纯文本内容
+                        const text = clipboardData.getData('text/plain');
+                        // 获取 HTML 内容
+                        const html = clipboardData.getData('text/html');
+                        // 如果没有文本内容，让默认处理器处理
+                        if (!text) {
+                            return false;
+                        }
+                        // 如果有 HTML 内容且不是简单的纯文本包装，优先使用 HTML
+                        // 这样从富文本编辑器复制的内容会保持原格式
+                        if (html && !isSimpleTextHtml(html)) {
+                            return false;
+                        }
+                        // 检测是否为 Markdown
+                        if (!options.isMarkdown(text)) {
+                            return false;
+                        }
+                        // 阻止默认粘贴行为
+                        event.preventDefault();
+                        // 使用 Markdown 扩展解析内容
+                        // Tiptap 3 的 Markdown 扩展会覆盖 setContent 方法
+                        // 使用 insertContent 配合 contentType: 'markdown' 来插入解析后的内容
+                        try {
+                            // 检查 editor.markdown 是否可用
+                            if (editor.markdown) {
+                                // 解析 Markdown 为 JSON
+                                const json = editor.markdown.parse(text);
+                                if (json && json.content && json.content.length > 0) {
+                                    // 插入解析后的内容
+                                    editor.chain().focus().insertContent(json.content).run();
+                                    return true;
+                                }
+                            }
+                            else {
+                                // 如果 Markdown 管理器不可用，使用 insertContent 配合 contentType
+                                editor.commands.insertContent(text, {
+                                    contentType: 'markdown',
+                                });
+                                return true;
+                            }
+                        }
+                        catch (error) {
+                            console.warn('Markdown 解析失败，使用默认粘贴行为:', error);
+                            // 解析失败时，让默认处理器处理
+                            return false;
+                        }
+                        return false;
+                    },
+                },
+            }),
+        ];
+    },
+});
+/**
+ * 检查 HTML 是否只是简单的纯文本包装
+ * 例如: <meta charset="utf-8"><span>text</span>
+ */
+const isSimpleTextHtml = (html) => {
+    // 移除 meta 标签
+    const cleanHtml = html.replace(/<meta[^>]*>/gi, '').trim();
+    // 检查是否只包含简单的文本包装标签
+    const simplePatterns = [
+        /^<span[^>]*>([^<]*)<\/span>$/i,
+        /^<div[^>]*>([^<]*)<\/div>$/i,
+        /^<p[^>]*>([^<]*)<\/p>$/i,
+        /^([^<]*)$/, // 纯文本
+    ];
+    for (const pattern of simplePatterns) {
+        if (pattern.test(cleanHtml)) {
+            return true;
+        }
+    }
+    return false;
+};
+
+export { MarkdownPaste };

package/es/components/tip-tap/icons/index.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+
+const IconBold = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M6.8 19V5h5.525q1.625 0 3 1T16.7 8.775q0 1.275-.575 1.963t-1.075.987q.625.275 1.388 1.025T17.2 15q0 2.225-1.625 3.113T12.55 19zm2.825-8.025h2.6q1.2 0 1.463-.612t.262-.888q0-.275-.263-.9T12.2 8h-2.6zM9.625 16h3.2q.95 0 1.275-.45t.325-1.05t-.325-1.05t-1.275-.45h-3.2z" }) })));
+const IconItalic = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M5 19v-2.5h4l3-9H8V5h10v2.5h-3.5l-3 9H15V19z" }) })));
+const IconUnderline = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M5 21v-2h14v2zm7-4q-2.5 0-4.25-1.712T6 11.025V3h2.5v7.975q0 1.475 1.025 2.5T12 14.5t2.475-1.025t1.025-2.5V3H18v8.025q0 2.55-1.75 4.263T12 17" }) })));
+const IconStrikethrough = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M10 19v-3h4v3zm-7-5v-2h18v2zM8 9V7.5q0-.65.425-1.075T9.5 6h5q.65 0 1.075.425T16 7.5V9h-2v-1h-4v1z" }) })));
+const IconCode = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6z" }) })));
+const IconH1 = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M5 17V7h2v4h4V7h2v10h-2v-4H7v4zm10 0v-8h-2V7h4v10z" }) })));
+const IconH2 = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M3 17V7h2v4h4V7h2v10H9v-4H5v4zm10 0v-4q0-.825.588-1.412T15 11h3V9h-5V7h5q.825 0 1.413.588T20 9v2q0 .825-.587 1.413T18 13h-3v2h5v2z" }) })));
+const IconH3 = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M3 17V7h2v4h4V7h2v10H9v-4H5v4zm10 0v-2h5v-2h-3v-2h3V9h-5V7h5q.825 0 1.413.588T20 9v6q0 .825-.587 1.413T18 17z" }) })));
+const IconListBullet = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M9 19v-2h12v2zm0-6v-2h12v2zm0-6V5h12v2zM5 20q-.825 0-1.412-.587T3 18t.588-1.412T5 16t1.413.588T7 18t-.587 1.413T5 20m0-6q-.825 0-1.412-.587T3 12t.588-1.412T5 10t1.413.588T7 12t-.587 1.413T5 14m0-6q-.825 0-1.412-.587T3 6t.588-1.412T5 4t1.413.588T7 6t-.587 1.413T5 8" }) })));
+const IconListNumbered = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M3 22v-1.5h2.5V20H4v-1h1.5v-.5H3V17h4v5zm0-7v-1.75L5.25 11H3V9.5h4V11l-2.25 2.25H7V15zm1-7V4H3V2.5h2.5V8zm5 11v-2h12v2zm0-6v-2h12v2zm0-6V5h12v2z" }) })));
+const IconQuote = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M5 17h3l2-4V7H4v6h3zm8 0h3l2-4V7h-6v6h3zm-8-4l1-2H4v2zm8 0l1-2h-2v2z" }) })));
+const IconLink = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z" }) })));
+const IconImage = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm1-2h12l-3.75-5l-3 4L9 13zm-1 2V5z" }) })));
+const IconTable = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M3 21V3h18v18zm2-9h5V5H5zm7 0h7V5h-7zm-7 7h5v-5H5zm7 0h7v-5h-7z" }) })));
+const IconAlignLeft = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M3 21v-2h18v2zm0-4v-2h12v2zm0-4v-2h18v2zm0-4V7h12v2zm0-4V3h18v2z" }) })));
+const IconAlignCenter = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M3 21v-2h18v2zm4-4v-2h10v2zm-4-4v-2h18v2zm4-4V7h10v2zm-4-4V3h18v2z" }) })));
+const IconAlignRight = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M3 21v-2h18v2zm6-4v-2h12v2zm-6-4v-2h18v2zm6-4V7h12v2zm-6-4V3h18v2z" }) })));
+const IconHighlight = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "m18 14l-4-4l5.2-5.2q.4-.4 1-.4t1 .4l2 2q.4.4.4 1t-.4 1zm-5.7-1.3L2 23h7l3.3-3.3zm-1.1-4.9L3 16l-3 4l4-1l8.2-8.2z" }) })));
+const IconUndo = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M7 19v-2h7.1q1.575 0 2.738-1T18 13.5T16.838 11T14.1 10H7.8l2.6 2.6L9 14L4 9l5-5l1.4 1.4L7.8 8h6.3q2.425 0 4.163 1.575T20 13.5t-1.737 3.925T14.1 19z" }) })));
+const IconRedo = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M9.9 19q-2.425 0-4.162-1.575T4 13.5t1.738-3.925T9.9 8h6.3l-2.6-2.6L15 4l5 5l-5 5l-1.4-1.4l2.6-2.6H9.9q-1.575 0-2.738 1T6 13.5T7.163 16T9.9 17H17v2z" }) })));
+const IconMinus = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M5 13v-2h14v2z" }) })));
+const IconChevronDown = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z" }) })));
+const IconParagraph = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M10 21V11H7q-1.65 0-2.825-1.175T3 7t1.175-2.825T7 3h12v2h-3v16h-2V5h-2v16z" }) })));
+const IconCheck = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z" }) })));
+const IconTrash = (props) => (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { children: jsx("path", { fill: "currentColor", d: "M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z" }) })));
+
+export { IconAlignCenter, IconAlignLeft, IconAlignRight, IconBold, IconCheck, IconChevronDown, IconCode, IconH1, IconH2, IconH3, IconHighlight, IconImage, IconItalic, IconLink, IconListBullet, IconListNumbered, IconMinus, IconParagraph, IconQuote, IconRedo, IconStrikethrough, IconTable, IconTrash, IconUnderline, IconUndo };

package/es/components/tip-tap/reader.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { readerExtensions } from './extensions/index.js';
+
+function TipTapReader({ content, className = '' }) {
+    const editor = useEditor({
+        extensions: readerExtensions(),
+        content,
+        editable: false,
+        immediatelyRender: false,
+    });
+    return (jsx("div", { className: `tip-tap-reader ${className}`, children: jsx(EditorContent, { editor: editor, className: "tip-tap-reader__content" }) }));
+}
+
+export { TipTapReader as default };