@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/notion-editor/code-block/languageDetector.js

@@ -0,0 +1,134 @@
+/** 根据代码内容特征自动识别语言 */
+const LANGUAGE_PATTERNS = [
+    // TypeScript — 优先于 JS/JSX 判断
+    [
+        'interface\\s+\\w+\\s*\\{|^type\\s+\\w+\\s*=|:\\s*(string|number|boolean|void|any)\\b(?!\\s*[:=])',
+        'typescript',
+    ],
+    ['\\.tsx?["\']|tsconfig|@types/', 'typescript'],
+    // TSX
+    ['as\\s+\\w+(?:\\[\\])?\\s*[,)}\\]>]', 'tsx'],
+    // JSX
+    [
+        '<[A-Z]\\w*(?:\\s+[\\w-]+(?:\\s*=\\s*["\'{[(][^"\'\\]})]*["\'})\\]])?\\s*>[\\s\\S]*?<\\/[A-Z]\\w+\\s*>|className=|onClick=|onChange=|return\\s*\\(',
+        'jsx',
+    ],
+    // JavaScript
+    [
+        'import\\s+.*\\s+from\\s+["\']|export\\s+(default|const|function)|const\\s+\\w+\\s*=\\s*(require|\\(|async)|module\\.exports|console\\.(log|error|warn)',
+        'javascript',
+    ],
+    ['function\\s*\\*|async\\s+function|=>\\s*[{ (]|let\\s+\\w+\\s*[=;]', 'javascript'],
+    // HTML — 优先于 XML
+    ['<!DOCTYPE\\s+html|<html[\\s>]|<head[\\s>]|<body[\\s>]|<div[\\s>]|<span[\\s>]', 'html'],
+    // CSS
+    ['[.#][\\w-]+\\s*\\{[^}]*[a-z-]+\\s*:\\s*[^;]+;', 'css'],
+    // SCSS
+    ['@mixin\\s+\\w|@include\\s+\\w|\\$\\w+:\\s*[^;]+;|&\\s*__', 'scss'],
+    // JSON
+    ['^\\s*[{[]\\s*[\\s\\S]*?"[\\w$]+"\\s*:', 'json'],
+    // C# — 放在 Java 前面，避免 C# 的 @Override 等注解被 Java 误匹配
+    ['using\\s+System[.;]|namespace\\s+\\w+|Console\\.(Write|Read|Line)', 'csharp'],
+    // Java — 放在 Python 前面，避免 Java 的 import 误匹配
+    [
+        '(?:public\\s+|protected\\s+|private\\s+)?(?:abstract\\s+)?(?:class|interface|enum)\\s+\\w+|System\\.(out|err|in)\\.|static\\s+void\\s+main|^import\\s+\\w+\\.\\w+',
+        'java',
+    ],
+    // Python
+    [
+        '^from\\s+\\w+\\s+import|^import\\s+(os|sys|re|json|datetime|math|collections|typing|pathlib|random)|^def\\s+\\w+\\s*\\(|^class\\s+\\w+\\s*[:\\(]|if\\s+__name__\\s*==\\s*["\']__main__["\']|print\\s*\\(|#.*coding|elif\\s|else\\s*:|except\\s|try\\s*:',
+        'python',
+    ],
+    // C
+    ['^#include\\s+<[^>]+\\.h>|printf\\s*\\(|scanf\\s*\\(|int\\s+main\\s*\\(', 'c'],
+    // C++
+    [
+        '^#include\\s+<(iostream|vector|string|map|algorithm)>|std::|cout\\s*<<|cin\\s*>>|template\\s*<|class\\s+\\w+\\s*[{:]',
+        'cpp',
+    ],
+    // Go
+    [
+        '^func\\s+\\w+|^package\\s+\\w+|^import\\s+[("]|fmt\\.(Print|Sprintf|Errorf)|:=|defer\\s+\\w|go\\s+func',
+        'go',
+    ],
+    // Rust
+    [
+        '^fn\\s+\\w+|let\\s+mut|match\\s+\\w+\\s*\\{|^impl\\s+\\w+|^pub\\s+(fn|struct|enum|trait)|^use\\s+\\w+|println!|vec!|unsafe\\s*\\{',
+        'rust',
+    ],
+    // Kotlin
+    [
+        '^fun\\s+\\w+\\s*\\(|^val\\s+\\w+|^var\\s+\\w+|^import\\s+\\w+\\.|^class\\s+\\w+\\s*[:(]|println\\s*\\(',
+        'kotlin',
+    ],
+    // Swift
+    [
+        '^func\\s+\\w+|^var\\s+\\w+|^let\\s+\\w+|^import\\s+(UIKit|Foundation|SwiftUI)|print\\s*\\(|guard\\s+let|#available',
+        'swift',
+    ],
+    // Dart
+    ['^void\\s+main|^import\\s+["\']package:|^class\\s+\\w+\\s*\\{|@override', 'dart'],
+    // PHP
+    ['^<\\?php|function\\s+\\w+\\s*\\(.*\\).*\\{|\\$\\w+|echo\\s+["\']', 'php'],
+    // Ruby
+    [
+        '^def\\s+\\w+|^end$|^require\\s+["\'][\\w\\/]+["\']|attr_(accessor|reader|writer)|^class\\s+\\w+\\s*[<$]',
+        'ruby',
+    ],
+    // Lua
+    ['^function\\s+\\w+|^local\\s+\\w+\\s*=|^end$|--\\[\\[', 'lua'],
+    // R
+    ['^library\\(|<- |data\\.frame\\(|ggplot\\(|^function\\(', 'r'],
+    // SQL
+    ['^(SELECT|FROM|WHERE|INSERT\\s+INTO|CREATE\\s+TABLE|UPDATE|DELETE\\s+FROM|JOIN|ALTER\\s+TABLE)\\b', 'sql'],
+    // Bash
+    ['^#!\\/|^echo\\s+|^export\\s+\\w+=|^source\\s+|^if\\s+\\[|^for\\s+\\w+\\s+in|^while\\s+read', 'bash'],
+    // PowerShell
+    ['Write-Host|Get-Item|Foreach-Object|\\$_|^param\\(', 'powershell'],
+    // Markdown — 放在 YAML 前面，避免 Markdown 列表项被误判为 YAML
+    ['^#{1,6}\\s|^\\[.*\\]\\(.*\\)|^-\\s+\\[[ x]\\]|^-\\s+\\w|^\\d+\\.\\s+\\w|^\\|.*\\|', 'markdown'],
+    // XML (非 HTML)
+    ['^<\\?xml\\s|<[A-Za-z]+\\s+[^>]*\\/>|<[A-Za-z]+[^>]*>[\\s\\S]*?<\\/[A-Za-z]+>', 'xml'],
+    // YAML
+    ['^---\\s*$|^[\\w.-]+:\\s+(?!\\s)|^\\s+-\\s+\\w+', 'yaml'],
+    // GraphQL
+    ['^type\\s+\\w+\\s*\\{|^query\\s+\\w+|^mutation\\s+\\w+|^schema\\s*\\{', 'graphql'],
+    // Diff
+    ['^---\\s+\\S+$|^\\+\\+\\+\\s+\\S+$|^@@\\s+-\\d+,\\d+\\s+\\+\\d+,\\d+\\s+@@', 'diff'],
+    // HTTP — 必须有请求行（GET/POST ... HTTP/）才能判定
+    ['^(GET|POST|PUT|DELETE|PATCH)\\s+\\S+\\s+HTTP\\/', 'http'],
+    // Makefile
+    ['^[A-Z_]+\\s*[:+]?=\\s*\\S+|^\\.PHONY:|^all:|^install:|^clean:', 'makefile'],
+    // Dockerfile
+    ['^FROM\\s+\\w+|^RUN\\s+|^CMD\\s+\\[|^COPY\\s+|^WORKDIR\\s+|^ENV\\s+', 'dockerfile'],
+    // Nginx
+    ['^server\\s*\\{|^location\\s+\\S+|proxy_pass|server_name', 'nginx'],
+];
+/**
+ * 检测代码内容对应的编程语言
+ * @param code 要检测的代码文本
+ * @returns 匹配的语言 key，未匹配则返回 'text'
+ */
+function detectLanguage(code) {
+    var _a;
+    if (!code) {
+        return 'text';
+    }
+    const firstLine = (_a = code.split('\n', 1)[0]) !== null && _a !== void 0 ? _a : '';
+    const sampleLines = code.split('\n').slice(0, 30);
+    const sampleText = sampleLines.join('\n');
+    for (const [pattern, lang] of LANGUAGE_PATTERNS) {
+        try {
+            const regex = new RegExp(pattern);
+            if (regex.test(sampleText) || regex.test(firstLine)) {
+                return lang;
+            }
+        }
+        catch (_b) {
+            // 正则异常时跳过
+        }
+    }
+    return 'text';
+}
+
+export { detectLanguage };

package/es/components/notion-editor/code-block/languages.js

@@ -0,0 +1,42 @@
+const LANGUAGES = {
+    // plain: { name: 'text', aliases: ['text', 'txt'] },
+    nginx: { name: 'Nginx' },
+    text: { name: '纯文本', aliases: ['plaintext', 'txt'] },
+    javascript: { name: 'JavaScript', aliases: ['js'] },
+    typescript: { name: 'TypeScript', aliases: ['ts'] },
+    jsx: { name: 'JSX' },
+    tsx: { name: 'TSX' },
+    html: { name: 'HTML' },
+    css: { name: 'CSS' },
+    scss: { name: 'SCSS', aliases: ['sass'] },
+    json: { name: 'JSON' },
+    python: { name: 'Python', aliases: ['py'] },
+    java: { name: 'Java' },
+    c: { name: 'C' },
+    cpp: { name: 'C++', aliases: ['cxx', 'cc'] },
+    csharp: { name: 'C#', aliases: ['cs', 'dotnet'] },
+    go: { name: 'Go', aliases: ['golang'] },
+    rust: { name: 'Rust', aliases: ['rs'] },
+    sql: { name: 'SQL' },
+    bash: { name: 'Bash', aliases: ['sh', 'shell', 'zsh'] },
+    powershell: { name: 'PowerShell', aliases: ['ps', 'ps1'] },
+    yaml: { name: 'YAML', aliases: ['yml'] },
+    xml: { name: 'XML' },
+    markdown: { name: 'Markdown', aliases: ['md'] },
+    php: { name: 'PHP' },
+    ruby: { name: 'Ruby', aliases: ['rb'] },
+    swift: { name: 'Swift' },
+    kotlin: { name: 'Kotlin', aliases: ['kt'] },
+    dart: { name: 'Dart' },
+    lua: { name: 'Lua' },
+    r: { name: 'R' },
+    dockerfile: { name: 'Dockerfile', aliases: ['docker'] },
+    graphql: { name: 'GraphQL', aliases: ['gql'] },
+    diff: { name: 'Diff' },
+    http: { name: 'HTTP' },
+    makefile: { name: 'Makefile', aliases: ['make'] },
+};
+/** Shiki 需要预加载的语言列表（排除纯文本） */
+const HIGHLIGHT_LANGS = Object.keys(LANGUAGES).filter((l) => l !== 'text');
+
+export { HIGHLIGHT_LANGS, LANGUAGES as default };

package/es/components/notion-editor/index.js

@@ -0,0 +1,258 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useCallback, useEffect, useMemo, useImperativeHandle } from 'react';
+import { createReactBlockSpec, useCreateBlockNote, FormattingToolbarController, FormattingToolbar, getFormattingToolbarItems, BasicTextStyleButton } from '@blocknote/react';
+import { Extension } from '@tiptap/core';
+import { TextSelection } from 'prosemirror-state';
+import { BlockNoteSchema, defaultStyleSpecs, defaultInlineContentSpecs, defaultBlockSpecs } from '@blocknote/core';
+import { BlockNoteView } from '@blocknote/mantine';
+import { zh } from '@blocknote/core/locales';
+import '@blocknote/core/fonts/inter.css';
+import '@blocknote/mantine/style.css';
+import './index.scss.js';
+import { CustomCodeBlock } from './code-block/index.js';
+import { detectLanguage } from './code-block/languageDetector.js';
+import { parsePastedMarkdown } from './parseMarkdown.js';
+
+// 自定义文件块，替换默认的文件块
+const CustomFileBlock = createReactBlockSpec({
+    type: 'file',
+    propSchema: {
+        name: { default: '' },
+        url: { default: '' },
+        caption: { default: '' },
+        backgroundColor: { default: 'default' },
+    },
+    content: 'none',
+}, {
+    render: ({ block }) => (jsxs("div", { className: "data-hub-ui-custom-file-block", onClick: () => window.open(block.props.url, '_blank'), children: [jsx("div", { className: "data-hub-ui-custom-file-block__icon", children: "\uD83D\uDCC4" }), jsx("div", { className: "data-hub-ui-custom-file-block__info", children: jsx("div", { className: "data-hub-ui-custom-file-block__name", children: block.props.name || '未命名文件' }) })] })),
+});
+// 创建自定义 Schema，替换默认 file 和 codeBlock 块
+const schema = BlockNoteSchema.create({
+    blockSpecs: Object.assign(Object.assign({}, defaultBlockSpecs), { codeBlock: CustomCodeBlock, file: CustomFileBlock() }),
+    inlineContentSpecs: defaultInlineContentSpecs,
+    styleSpecs: defaultStyleSpecs,
+});
+const ATTACHMENT_URL_REGEXP = /(\/api\/fes\/docs\/resource\/attachment\/)([^/?#]+)(\/[^/?#]+)/;
+const isCopyPastePayload = (value) => value.action === 'copy' && Array.isArray(value.data);
+const replaceAttachmentDocId = (url, docId) => url.replace(ATTACHMENT_URL_REGEXP, (_match, prefix, _oldId, suffix) => {
+    return `${prefix}${docId}${suffix}`;
+});
+const rewriteAttachmentUrls = (blocks, docId) => {
+    blocks.forEach((block) => {
+        if ((block.type === 'image' || block.type === 'file') && block.props) {
+            const url = block.props.url;
+            if (typeof url === 'string') {
+                block.props.url = replaceAttachmentDocId(url, docId);
+            }
+        }
+        if (Array.isArray(block.children)) {
+            rewriteAttachmentUrls(block.children, docId);
+        }
+    });
+};
+const isEmptyBlockContent = (block) => {
+    const blockContent = block.content;
+    return !blockContent || (Array.isArray(blockContent) && blockContent.length === 0);
+};
+const getInlineText = (content) => {
+    if (!Array.isArray(content)) {
+        return '';
+    }
+    return content
+        .map((item) => {
+        if ('text' in item && typeof item.text === 'string') {
+            return item.text;
+        }
+        return '';
+    })
+        .join('')
+        .trim();
+};
+const getHeadingTocItems = (blocks) => {
+    const tocItems = [];
+    const walkBlocks = (items) => {
+        items.forEach((block) => {
+            if (block.type === 'heading') {
+                const level = Number(block.props.level) || 1;
+                tocItems.push({
+                    id: block.id,
+                    level: Math.min(Math.max(level, 1), 6),
+                    title: getInlineText(block.content) || '未命名标题',
+                });
+            }
+            if (Array.isArray(block.children) && block.children.length > 0) {
+                walkBlocks(block.children);
+            }
+        });
+    };
+    walkBlocks(blocks);
+    return tocItems;
+};
+const parseCopyPasteBlocks = (plainText, docId) => {
+    if (!docId) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(plainText);
+        if (!isCopyPastePayload(parsed)) {
+            return null;
+        }
+        const blocks = JSON.parse(JSON.stringify(parsed.data));
+        rewriteAttachmentUrls(blocks, docId);
+        return blocks;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const NotionEditor = forwardRef(({ initContent, editable = false, className = '', docId, onChange, onImageUpload, onFileUpload, onImageUploadByUrl, }, ref) => {
+    const placeholder = '输入 "/" 快速插入内容';
+    const docIdRef = useRef(docId);
+    const [tocCollapsed, setTocCollapsed] = useState(false);
+    const [tocItems, setTocItems] = useState([]);
+    docIdRef.current = docId;
+    const uploadFile = useCallback((file) => __awaiter(void 0, void 0, void 0, function* () {
+        const isImage = file.type.startsWith('image/');
+        if (isImage && onImageUpload) {
+            return onImageUpload(file);
+        }
+        if (!isImage && onFileUpload) {
+            // const result = await onFileUpload(file);
+            // return result.url;
+            return onFileUpload(file);
+        }
+        return URL.createObjectURL(file);
+    }), [onImageUpload, onFileUpload]);
+    const editor = useCreateBlockNote({
+        dictionary: Object.assign(Object.assign({}, zh), { placeholders: Object.assign(Object.assign({}, zh.placeholders), { default: placeholder, emptyDocument: placeholder }) }),
+        initialContent: Array.isArray(initContent) && initContent.length > 0 ? initContent : undefined,
+        schema: schema,
+        setIdAttribute: true,
+        uploadFile,
+        tables: {
+            splitCells: true,
+        },
+        _tiptapOptions: {
+            extensions: [
+                Extension.create({
+                    name: 'codeBlockSelectAll',
+                    addKeyboardShortcuts() {
+                        return {
+                            'Mod-a': () => {
+                                const { state, view } = this.editor;
+                                const { selection, doc } = state;
+                                const { $from } = selection;
+                                const parent = $from.parent;
+                                // 仅在 codeBlock 内拦截 Ctrl+A
+                                if (parent.type.name === 'codeBlock') {
+                                    const start = $from.start();
+                                    const end = $from.end();
+                                    const tr = state.tr.setSelection(TextSelection.create(doc, start, end));
+                                    view.dispatch(tr);
+                                    return true; // 阻止默认全选
+                                }
+                                return false; // 其他 block 走默认行为
+                            },
+                        };
+                    },
+                }),
+            ],
+        },
+        pasteHandler: ({ event, editor: ed, defaultPasteHandler }) => {
+            var _a, _b, _c, _d, _e;
+            // return defaultPasteHandler();
+            // 在代码块内粘贴时不拦截，保持纯文本
+            const pos = ed.getTextCursorPosition();
+            if (pos.block.type === 'codeBlock') {
+                // 粘贴后自动识别语言并设置
+                const plainText = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain')) === null || _b === void 0 ? void 0 : _b.trim();
+                console.log('+++ plainText', plainText);
+                defaultPasteHandler();
+                if (plainText) {
+                    const lang = detectLanguage(plainText);
+                    if (lang !== 'text') {
+                        ed.updateBlock(pos.block, { props: { language: lang } });
+                    }
+                }
+                return true;
+            }
+            // 有纯文本且包含 Markdown 标记字符时，手动解析
+            if ((_c = event.clipboardData) === null || _c === void 0 ? void 0 : _c.types.includes('text/plain')) {
+                const plainText = (_d = event.clipboardData.getData('text/plain')) === null || _d === void 0 ? void 0 : _d.trim();
+                const copyPasteBlocks = plainText ? parseCopyPasteBlocks(plainText, docIdRef.current) : null;
+                if (copyPasteBlocks) {
+                    if (copyPasteBlocks.length > 0) {
+                        const cursorBlock = ed.getTextCursorPosition().block;
+                        const isEmpty = isEmptyBlockContent(cursorBlock);
+                        const refBlock = isEmpty ? ((_e = ed.getParentBlock(cursorBlock)) !== null && _e !== void 0 ? _e : cursorBlock) : cursorBlock;
+                        ed.insertBlocks(copyPasteBlocks, refBlock, 'after');
+                    }
+                    return true;
+                }
+                const hasHtmlImage = /<img\b[^>]*\bsrc=(["']).*?\1[^>]*\/?>/i.test(plainText);
+                if (plainText && (/[#*`\-[>|]/.test(plainText) || hasHtmlImage)) {
+                    // 以 < 开头像 HTML 代码 → 按 HTML 粘贴，包含 img 标签时走自定义上传逻辑
+                    if (/^\s*</.test(plainText) && !hasHtmlImage) {
+                        return defaultPasteHandler();
+                    }
+                    // 使用自定义解析：先提取 ```代码块```，剩余部分走标准 Markdown
+                    (() => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a;
+                        const cursorBlock = ed.getTextCursorPosition().block;
+                        const blocks = yield parsePastedMarkdown(plainText, (md) => ed.tryParseMarkdownToBlocks(md), onImageUploadByUrl);
+                        if (blocks.length > 0) {
+                            // 光标所在 block 如果内容为空则先移除
+                            const isEmpty = isEmptyBlockContent(cursorBlock);
+                            // 在光标 block 位置或其后插入
+                            const refBlock = isEmpty ? ((_a = ed.getParentBlock(cursorBlock)) !== null && _a !== void 0 ? _a : cursorBlock) : cursorBlock;
+                            ed.insertBlocks(blocks, refBlock, 'after');
+                        }
+                    }))();
+                    return true;
+                }
+            }
+            return defaultPasteHandler();
+        },
+    });
+    // Sync editable prop
+    useEffect(() => {
+        if (editor) {
+            editor.isEditable = editable;
+        }
+    }, [editor, editable]);
+    const handleChange = useCallback(() => {
+        if (editor) {
+            const blocks = editor.document;
+            setTocItems(getHeadingTocItems(blocks));
+            onChange === null || onChange === void 0 ? void 0 : onChange(blocks);
+        }
+    }, [editor, onChange]);
+    useEffect(() => {
+        if (editor) {
+            setTocItems(getHeadingTocItems(editor.document));
+        }
+    }, [editor]);
+    const showToc = tocItems.length > 0;
+    const tocTitle = useMemo(() => (tocCollapsed ? '展开目录' : '收起目录'), [tocCollapsed]);
+    const handleTocItemClick = useCallback((blockId) => {
+        const target = document.querySelector(`.data-hub-ui-blocknote-editor [data-id="${CSS.escape(blockId)}"]`);
+        target === null || target === void 0 ? void 0 : target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, []);
+    useImperativeHandle(ref, () => ({
+        getContent: () => editor.document,
+        // getJSON: () => (editor?.document ?? []) as unknown as Record<string, unknown>,
+        setContent: (content) => __awaiter(void 0, void 0, void 0, function* () {
+            if (editor) {
+                // @ts-expect-error - Block[] 与 PartialBlock[] 类型参数不匹配，但运行时安全
+                editor.replaceBlocks(editor.document, content);
+            }
+        }),
+        focus: () => editor === null || editor === void 0 ? void 0 : editor.focus(),
+        isEmpty: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.isEmpty) !== null && _a !== void 0 ? _a : true; },
+    }));
+    return (jsxs("div", { className: `data-hub-ui-blocknote-editor-wrapper ${tocCollapsed ? 'is-toc-collapsed' : ''} ${className}`, children: [jsx(BlockNoteView, { editor: editor, formattingToolbar: false, onChange: handleChange, theme: "light", className: "data-hub-ui-blocknote-editor", children: jsx(FormattingToolbarController, { formattingToolbar: () => (jsxs(FormattingToolbar, { children: [getFormattingToolbarItems(), jsx(BasicTextStyleButton, { basicTextStyle: "code" })] })) }) }), showToc && (jsxs("aside", { className: `data-hub-ui-blocknote-toc ${tocCollapsed ? 'is-collapsed' : ''}`, children: [jsxs("button", { type: "button", className: "data-hub-ui-blocknote-toc__toggle", "aria-label": tocTitle, "aria-expanded": !tocCollapsed, onClick: () => setTocCollapsed((value) => !value), children: [jsx("span", { children: "\u76EE\u5F55" }), jsx("span", { className: "data-hub-ui-blocknote-toc__toggle-icon", children: tocCollapsed ? '‹' : '›' })] }), !tocCollapsed && (jsx("nav", { className: "data-hub-ui-blocknote-toc__list", "aria-label": "\u6587\u6863\u76EE\u5F55", children: tocItems.map((item) => (jsx("button", { type: "button", className: "data-hub-ui-blocknote-toc__item", style: { '--toc-level': item.level }, title: item.title, onClick: () => handleTocItemClick(item.id), children: item.title }, item.id))) }))] }))] }));
+});
+NotionEditor.displayName = 'NotionEditor';
+
+export { NotionEditor as default };