@yltrcc/vditor 0.0.4 → 0.0.6

package/src/ts/markdown/docLink.ts

@@ -1,171 +1,202 @@
-/**
- * 文档链接支持
- * 将 ((文档ID '显示文本')) 语法渲染为可点击的文档链接
- */
-
-// 文档链接正则表达式
-const DOCLINK_REGEX = /\(\((\d+)\s+'([^']+)'\)\)/g;
-
-/**
- * 在 HTML 中渲染文档链接
- * 将 ((id 'text')) 转换为可点击的 span 元素
- */
-export const renderDocLink = (html: string, vditor?: any): string => {
-    // 如果禁用了 citation，直接返回原文
-    if (vditor?.options?.citation?.enable === false) {
-        return html;
-    }
-
-    return html.replace(
-        DOCLINK_REGEX,
-        '<span class="vditor-doclink" data-doc-id="$1" data-doc-text="$2">$2</span>'
-    );
-};
-
-/**
- * 在 WYSIWYG 编辑器中处理文档链接的实时渲染
- */
-export const processDocLinkInWYSIWYG = (element: HTMLElement, vditor?: any): void => {
-    // 如果禁用了 citation，不处理
-    if (vditor?.options?.citation?.enable === false) {
-        return;
-    }
-
-    const walker = document.createTreeWalker(
-        element,
-        NodeFilter.SHOW_TEXT,
-        null
-    );
-
-    const textNodes: Text[] = [];
-    let node: Node | null;
-    while ((node = walker.nextNode())) {
-        // 排除已经在 vditor-doclink 中的文本节点
-        if (!(node.parentElement?.classList.contains("vditor-doclink"))) {
-            textNodes.push(node as Text);
-        }
-    }
-
-    textNodes.forEach((textNode) => {
-        const text = textNode.textContent || "";
-        const matches: Array<{ index: number; length: number; id: string; text: string }> = [];
-
-        // 查找所有匹配
-        let match: RegExpExecArray | null;
-        const regex = new RegExp(DOCLINK_REGEX.source, "g");
-        while ((match = regex.exec(text)) !== null) {
-            matches.push({
-                index: match.index,
-                length: match[0].length,
-                id: match[1],
-                text: match[2]
-            });
-        }
-
-        if (matches.length === 0) return;
-
-        const parent = textNode.parentNode;
-        if (!parent) return;
-
-        // 构建新的节点列表
-        let lastIndex = 0;
-        const fragments: Node[] = [];
-
-        matches.forEach((m) => {
-            // 添加匹配前的文本
-            if (m.index > lastIndex) {
-                fragments.push(document.createTextNode(text.slice(lastIndex, m.index)));
-            }
-
-            // 创建文档链接元素
-            const span = document.createElement("span");
-            span.className = "vditor-doclink";
-            span.setAttribute("data-doc-id", m.id);
-            span.setAttribute("data-doc-text", m.text);
-            span.textContent = m.text;
-            
-            // 绑定点击事件
-            span.onclick = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleDocLinkClick(m.id, m.text, vditor);
-            };
-            fragments.push(span);
-
-            lastIndex = m.index + m.length;
-        });
-
-        // 添加剩余文本
-        if (lastIndex < text.length) {
-            fragments.push(document.createTextNode(text.slice(lastIndex)));
-        }
-
-        // 替换原节点
-        fragments.forEach((frag) => {
-            parent.insertBefore(frag, textNode);
-        });
-        parent.removeChild(textNode);
-    });
-};
-
-/**
- * 处理文档链接点击事件
- */
-export const handleDocLinkClick = (docId: string, text: string, vditor?: any): void => {
-    // 优先使用配置中的 click 回调
-    if (vditor?.options?.citation?.click) {
-        vditor.options.citation.click(docId, text);
-        return;
-    }
-
-    // 使用全局回调（兼容旧版本）
-    if (window.handleDocLinkClick) {
-        window.handleDocLinkClick(docId);
-        return;
-    }
-
-    // 配置了 URL，自动请求
-    const url = vditor?.options?.citation?.url;
-    if (url) {
-        fetch(`${url}/${docId}`)
-            .then(r => r.json())
-            .then(data => {
-                console.log('Citation data:', data);
-            })
-            .catch(err => {
-                console.error('Failed to fetch citation:', err);
-            });
-    }
-};
-
-/**
- * 从 Markdown 文本中提取文档链接
- */
-export const extractDocLinks = (markdown: string): Array<{ id: string; text: string }> => {
-    const links: Array<{ id: string; text: string }> = [];
-    const regex = new RegExp(DOCLINK_REGEX.source, "g");
-    let match: RegExpExecArray | null;
-
-    while ((match = regex.exec(markdown)) !== null) {
-        links.push({
-            id: match[1],
-            text: match[2]
-        });
-    }
-
-    return links;
-};
-
-/**
- * 检查文本是否包含文档链接语法
- */
-export const hasDocLink = (text: string): boolean => {
-    return DOCLINK_REGEX.test(text);
-};
-
-// 扩展 Window 接口
-declare global {
-    interface Window {
-        handleDocLinkClick?: (docId: string) => void;
-    }
-}
+/**
+ * 文档链接支持
+ * 将 ((文档ID '显示文本')) 语法渲染为可点击的文档链接
+ */
+
+// 文档链接正则表达式
+const DOCLINK_REGEX = /\(\((\d+)\s+'([^']+)'\)\)/g;
+
+/**
+ * 在 HTML 中渲染文档链接
+ * 将 ((id 'text')) 转换为可点击的 span 元素
+ */
+export const renderDocLink = (html: string, vditor?: any): string => {
+    // 如果禁用了 citation，直接返回原文
+    if (vditor?.options?.citation?.enable === false) {
+        return html;
+    }
+
+    return html.replace(
+        DOCLINK_REGEX,
+        '<span class="vditor-doclink" data-doc-id="$1" data-doc-text="$2" data-doc-markdown="(($1 \'$2\'))">$2</span>'
+    );
+};
+
+/**
+ * 在 WYSIWYG 编辑器中处理文档链接的实时渲染
+ */
+export const processDocLinkInWYSIWYG = (element: HTMLElement, vditor?: any): void => {
+    // 如果禁用了 citation，不处理
+    if (vditor?.options?.citation?.enable === false) {
+        return;
+    }
+
+    const walker = document.createTreeWalker(
+        element,
+        NodeFilter.SHOW_TEXT,
+        null
+    );
+
+    const textNodes: Text[] = [];
+    let node: Node | null;
+    while ((node = walker.nextNode())) {
+        // 排除已经在 vditor-doclink 中的文本节点
+        if (!(node.parentElement?.classList.contains("vditor-doclink"))) {
+            textNodes.push(node as Text);
+        }
+    }
+
+    textNodes.forEach((textNode) => {
+        const text = textNode.textContent || "";
+        const matches: Array<{ index: number; length: number; id: string; text: string; fullMatch: string }> = [];
+
+        // 查找所有匹配
+        let match: RegExpExecArray | null;
+        const regex = new RegExp(DOCLINK_REGEX.source, "g");
+        while ((match = regex.exec(text)) !== null) {
+            matches.push({
+                index: match.index,
+                length: match[0].length,
+                id: match[1],
+                text: match[2],
+                fullMatch: match[0]
+            });
+        }
+
+        if (matches.length === 0) return;
+
+        const parent = textNode.parentNode;
+        if (!parent) return;
+
+        // 构建新的节点列表
+        let lastIndex = 0;
+        const fragments: Node[] = [];
+
+        matches.forEach((m) => {
+            // 添加匹配前的文本
+            if (m.index > lastIndex) {
+                fragments.push(document.createTextNode(text.slice(lastIndex, m.index)));
+            }
+
+            // 创建文档链接容器 - 使用 contenteditable="false" 防止编辑时破坏结构
+            const container = document.createElement("span");
+            container.className = "vditor-doclink-wrapper";
+            container.setAttribute("contenteditable", "false");
+            container.setAttribute("data-doc-id", m.id);
+            container.setAttribute("data-doc-text", m.text);
+            // 存储完整的 Markdown 语法，用于复制
+            container.setAttribute("data-doc-markdown", m.fullMatch);
+
+            // 创建显示文本的元素
+            const span = document.createElement("span");
+            span.className = "vditor-doclink";
+            span.textContent = m.text;
+
+            // 绑定点击事件
+            container.onclick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleDocLinkClick(m.id, m.text, vditor);
+            };
+
+            container.appendChild(span);
+            fragments.push(container);
+
+            lastIndex = m.index + m.length;
+        });
+
+        // 添加剩余文本
+        if (lastIndex < text.length) {
+            fragments.push(document.createTextNode(text.slice(lastIndex)));
+        }
+
+        // 替换原节点
+        fragments.forEach((frag) => {
+            parent.insertBefore(frag, textNode);
+        });
+        parent.removeChild(textNode);
+    });
+};
+
+/**
+ * 处理文档链接点击事件
+ */
+export const handleDocLinkClick = (docId: string, text: string, vditor?: any): void => {
+    // 优先使用配置中的 click 回调
+    if (vditor?.options?.citation?.click) {
+        vditor.options.citation.click(docId, text);
+        return;
+    }
+
+    // 使用全局回调（兼容旧版本）
+    if (window.handleDocLinkClick) {
+        window.handleDocLinkClick(docId);
+        return;
+    }
+
+    // 配置了 URL，自动请求
+    const url = vditor?.options?.citation?.url;
+    if (url) {
+        fetch(`${url}/${docId}`)
+            .then(r => r.json())
+            .then(data => {
+                console.log('Citation data:', data);
+            })
+            .catch(err => {
+                console.error('Failed to fetch citation:', err);
+            });
+    }
+};
+
+/**
+ * 从 Markdown 文本中提取文档链接
+ */
+export const extractDocLinks = (markdown: string): Array<{ id: string; text: string }> => {
+    const links: Array<{ id: string; text: string }> = [];
+    const regex = new RegExp(DOCLINK_REGEX.source, "g");
+    let match: RegExpExecArray | null;
+
+    while ((match = regex.exec(markdown)) !== null) {
+        links.push({
+            id: match[1],
+            text: match[2]
+        });
+    }
+
+    return links;
+};
+
+/**
+ * 检查文本是否包含文档链接语法
+ */
+export const hasDocLink = (text: string): boolean => {
+    return DOCLINK_REGEX.test(text);
+};
+
+/**
+ * 获取文档链接的 Markdown 语法
+ * 用于复制操作时恢复原始语法
+ */
+export const getDocLinkMarkdown = (element: HTMLElement): string | null => {
+    // 优先从 data-doc-markdown 属性获取
+    const markdown = element.getAttribute("data-doc-markdown");
+    if (markdown) {
+        return markdown;
+    }
+
+    // 从 data-doc-id 和 data-doc-text 重建
+    const id = element.getAttribute("data-doc-id");
+    const text = element.getAttribute("data-doc-text");
+    if (id && text) {
+        return `((${id} '${text}'))`;
+    }
+
+    return null;
+};
+
+// 扩展 Window 接口
+declare global {
+    interface Window {
+        handleDocLinkClick?: (docId: string) => void;
+    }
+}

package/src/ts/markdown/getMarkdown.ts

@@ -1,12 +1,60 @@
-import {code160to32} from "../util/code160to32";
-
-export const getMarkdown = (vditor: IVditor) => {
-    if (vditor.currentMode === "sv") {
-        return code160to32(`${vditor.sv.element.textContent}\n`.replace(/\n\n$/, "\n"));
-    } else if (vditor.currentMode === "wysiwyg") {
-        return vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML);
-    } else if (vditor.currentMode === "ir") {
-        return vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML);
-    }
-    return "";
-};
+import {code160to32} from "../util/code160to32";
+
+/**
+ * 将 doclink DOM 元素转换回 Markdown 语法
+ * 处理 <span class="vditor-doclink-wrapper" data-doc-markdown="((id 'text'))">text</span>
+ */
+const processDocLinksInHTML = (html: string): string => {
+    // 创建临时 DOM 元素来解析 HTML
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+
+    // 查找所有 doclink wrapper 元素
+    const docLinkWrappers = tempDiv.querySelectorAll(".vditor-doclink-wrapper");
+    docLinkWrappers.forEach((wrapper) => {
+        const markdown = wrapper.getAttribute("data-doc-markdown");
+        if (markdown) {
+            // 用文本节点替换整个 wrapper，内容为 Markdown 语法
+            wrapper.replaceWith(document.createTextNode(markdown));
+        } else {
+            // 如果没有 data-doc-markdown，尝试从 data-doc-id 和 data-doc-text 重建
+            const id = wrapper.getAttribute("data-doc-id");
+            const text = wrapper.getAttribute("data-doc-text");
+            if (id && text) {
+                wrapper.replaceWith(document.createTextNode(`((${id} '${text}'))`));
+            }
+        }
+    });
+
+    // 也处理旧的 .vditor-doclink 元素（没有 wrapper 的情况）
+    const docLinks = tempDiv.querySelectorAll(".vditor-doclink");
+    docLinks.forEach((link) => {
+        const markdown = link.getAttribute("data-doc-markdown");
+        if (markdown) {
+            link.replaceWith(document.createTextNode(markdown));
+        } else {
+            const id = link.getAttribute("data-doc-id");
+            const text = link.getAttribute("data-doc-text");
+            if (id && text) {
+                link.replaceWith(document.createTextNode(`((${id} '${text}'))`));
+            }
+        }
+    });
+
+    return tempDiv.innerHTML;
+};
+
+export const getMarkdown = (vditor: IVditor) => {
+    if (vditor.currentMode === "sv") {
+        return code160to32(`${vditor.sv.element.textContent}\n`.replace(/\n\n$/, "\n"));
+    } else if (vditor.currentMode === "wysiwyg") {
+        // 先处理 doclink 元素，将其转换回 Markdown 语法
+        const processedHTML = processDocLinksInHTML(vditor.wysiwyg.element.innerHTML);
+        return vditor.lute.VditorDOM2Md(processedHTML);
+    } else if (vditor.currentMode === "ir") {
+        // 同样处理 IR 模式
+        const processedHTML = processDocLinksInHTML(vditor.ir.element.innerHTML);
+        return vditor.lute.VditorIRDOM2Md(processedHTML);
+    }
+    return "";
+};

package/src/ts/wysiwyg/index.ts

@@ -1,4 +1,5 @@
 import {Constants} from "../constants";
+import {getDocLinkMarkdown} from "../markdown/docLink";
 import {hidePanel} from "../toolbar/setToolbar";
 import {isCtrl, isFirefox} from "../util/compatibility";
 import {
@@ -239,6 +240,16 @@ class WYSIWYG {
         const tempElement = document.createElement("div");
         tempElement.appendChild(range.cloneContents());
 
+        // 处理文档链接的复制 - 将渲染后的元素替换为原始 Markdown 语法
+        const docLinkElements = tempElement.querySelectorAll(".vditor-doclink-wrapper, .vditor-doclink");
+        docLinkElements.forEach((el) => {
+            const markdown = getDocLinkMarkdown(el as HTMLElement);
+            if (markdown) {
+                // 用文本节点替换元素，内容为 Markdown 语法
+                el.replaceWith(document.createTextNode(markdown));
+            }
+        });
+
         event.clipboardData.setData("text/plain", vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim());
         event.clipboardData.setData("text/html", "");
     }