@dxpos/markdown 0.0.1 → 0.0.3

package/README.md

@@ -63,6 +63,19 @@ import { Editor } from "@dxpos/markdown";
 
 `toolbar` 不传时使用当前文档编辑器的默认顺序，也可传入标识数组，例如 `["h1", "h2", "divider", "image"]`。同一组的变体写成 `组:值`，如 `align:center`、`list:bullet`。`divider` 是分隔线，`spacer` 把后面的按钮推到右侧。默认数组从包入口以 `DEFAULT_TOOLBAR` 导出。
 
+`initialCaret` 指定编辑器创建时的光标，只在创建时生效。`offset` 是光标之前的非空白字符数，`clientY` 是双击时的屏幕纵坐标，编辑器会把光标行尽量放在这个高度并保证完整可见。配合 `textOffsetAtPoint(root, x, y)` 可以从预览区的点击坐标得到 `offset`：
+
+```tsx
+<div
+  onDoubleClick={(event) => {
+    const offset = textOffsetAtPoint(event.currentTarget, event.clientX, event.clientY);
+    startEdit(offset === null ? null : { offset, clientY: event.clientY });
+  }}
+>
+  <Viewer content={markdown} />
+</div>
+```
+
 ## 渲染
 
 插件从子路径按需引入，通过 `plugins` 数组传入，没有默认项。

package/dist/editor/front-matter/index.d.ts

@@ -0,0 +1,33 @@
+import { Node } from "@tiptap/core";
+type FrontMatterBlockState = {
+    src: string;
+    bMarks: number[];
+    eMarks: number[];
+    line: number;
+    push: (type: string, tag: string, nesting: number) => {
+        content: string;
+        map: [number, number] | null;
+    };
+};
+type MarkdownItLike = {
+    block: {
+        ruler: {
+            before: (beforeName: string, ruleName: string, fn: (state: FrontMatterBlockState, startLine: number, endLine: number, silent: boolean) => boolean) => void;
+        };
+    };
+    renderer: {
+        rules: Record<string, (tokens: Array<{
+            content: string;
+        }>, idx: number) => string>;
+    };
+};
+/** 给 markdown-it 装上 front matter 块规则，重复调用只装一次 */
+export declare function installFrontMatterMarkdown(markdownit: MarkdownItLike): void;
+/** 块内文本为空时不输出，等同于删掉元数据 */
+export declare function serializeFrontMatter(content: string): string;
+/** 文档开头最多一个元数据块，后面至少还有一个正文块 */
+export declare const FrontMatterDocument: Node<any, any>;
+/** 文首 front matter：按 YAML 编辑，序列化回 --- 包裹的块 */
+export declare const FrontMatter: Node<any, any>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/editor/front-matter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/front-matter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,IAAI,EAAmB,MAAM,cAAc,CAAC;AAUhE,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA;KAAE,CAAC;CACzG,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,KAAK,EAAE;YACL,MAAM,EAAE,CACN,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,EAAE,EAAE,CAAC,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,KAC/F,IAAI,CAAC;SACX,CAAC;KACH,CAAC;IACF,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;KACpF,CAAC;CACH,CAAC;AA8CF,iDAAiD;AACjD,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,cAAc,GAAG,IAAI,CAS3E;AAED,0BAA0B;AAC1B,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAM5D;AAmJD,+BAA+B;AAC/B,eAAO,MAAM,mBAAmB,gBAI9B,CAAC;AAEH,8CAA8C;AAC9C,eAAO,MAAM,WAAW,gBAyJtB,CAAC"}

package/dist/editor/front-matter/index.js

@@ -0,0 +1,344 @@
+import { InputRule, Node, mergeAttributes } from "@tiptap/core";
+import { Fragment } from "@tiptap/pm/model";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { parseDocument } from "yaml";
+const FENCE_LINE = /^---[ \t]*$/;
+const frontMatterDecorationsKey = new PluginKey("frontMatterFieldKeys");
+const configuredMarkdown = new WeakSet();
+function blockLine(state, line) {
+    return state.src.slice(state.bMarks[line], state.eMarks[line]).replace(/\r$/, "");
+}
+function escapeHtml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/** 只认文档第 0 行的 ---，一直取到下一行独立的 --- */
+function frontMatterBlock(state, startLine, endLine, silent) {
+    if (startLine !== 0 || !FENCE_LINE.test(blockLine(state, startLine))) {
+        return false;
+    }
+    let closeLine = -1;
+    for (let line = startLine + 1; line < endLine; line += 1) {
+        if (FENCE_LINE.test(blockLine(state, line))) {
+            closeLine = line;
+            break;
+        }
+    }
+    if (closeLine < 0) {
+        return false;
+    }
+    if (silent) {
+        return true;
+    }
+    const content = closeLine === startLine + 1
+        ? ""
+        : state.src.slice(state.bMarks[startLine + 1], state.eMarks[closeLine - 1]).replace(/\r/g, "");
+    const token = state.push("front_matter", "pre", 0);
+    token.content = content;
+    token.map = [startLine, closeLine + 1];
+    state.line = closeLine + 1;
+    return true;
+}
+/** 给 markdown-it 装上 front matter 块规则，重复调用只装一次 */
+export function installFrontMatterMarkdown(markdownit) {
+    if (configuredMarkdown.has(markdownit)) {
+        return;
+    }
+    configuredMarkdown.add(markdownit);
+    markdownit.block.ruler.before("hr", "front_matter", frontMatterBlock);
+    markdownit.renderer.rules.front_matter = (tokens, idx) => {
+        return `<pre data-front-matter>${escapeHtml(tokens[idx]?.content ?? "")}</pre>\n`;
+    };
+}
+/** 块内文本为空时不输出，等同于删掉元数据 */
+export function serializeFrontMatter(content) {
+    const body = content.replace(/\r\n/g, "\n").replace(/\n+$/, "");
+    if (!body.trim()) {
+        return "";
+    }
+    return `---\n${body}\n---`;
+}
+function keyColon(line, start) {
+    if (line[start] === '"' || line[start] === "'") {
+        return -1;
+    }
+    for (let index = start; index < line.length; index += 1) {
+        if (line[index] === "#" && (index === start || /\s/.test(line[index - 1] ?? ""))) {
+            return -1;
+        }
+        if (line[index] === ":") {
+            const next = line[index + 1];
+            if (next === undefined || next === " " || next === "\t") {
+                return index;
+            }
+        }
+    }
+    return -1;
+}
+function quotedEnd(line, start) {
+    const quote = line[start];
+    for (let index = start + 1; index < line.length; index += 1) {
+        if (line[index] === "\\") {
+            index += 1;
+            continue;
+        }
+        if (line[index] === quote) {
+            return index + 1;
+        }
+    }
+    return -1;
+}
+function decorateLine(line, linePos, decorations) {
+    let index = /^ */.exec(line)?.[0].length ?? 0;
+    if (line[index] === "-" && (line[index + 1] === " " || line[index + 1] === undefined)) {
+        decorations.push(Decoration.inline(linePos + index, linePos + index + 1, { class: "wsmd-front-matter__bullet" }));
+        index += 1;
+        while (line[index] === " ") {
+            index += 1;
+        }
+    }
+    const colon = keyColon(line, index);
+    if (colon > index) {
+        decorations.push(Decoration.inline(linePos + index, linePos + colon, { class: "wsmd-front-matter__key" }));
+        index = colon + 1;
+    }
+    while (index < line.length) {
+        const char = line[index];
+        if (char === "#" && (index === 0 || /\s/.test(line[index - 1] ?? ""))) {
+            decorations.push(Decoration.inline(linePos + index, linePos + line.length, { class: "wsmd-front-matter__comment" }));
+            return;
+        }
+        if (char === '"' || char === "'") {
+            const end = quotedEnd(line, index);
+            if (end > index) {
+                decorations.push(Decoration.inline(linePos + index, linePos + end, { class: "wsmd-front-matter__string" }));
+                index = end;
+                continue;
+            }
+        }
+        index += 1;
+    }
+}
+/** 编辑器里的行号按块内可见行计算，不含外面的 --- */
+function frontMatterError(text) {
+    if (!text.trim()) {
+        return null;
+    }
+    const parsed = parseDocument(text, { prettyErrors: false });
+    const error = parsed.errors[0];
+    if (error) {
+        const offset = error.pos?.[0];
+        if (offset === undefined) {
+            return "元数据格式无效";
+        }
+        let line = 1;
+        const end = Math.min(offset, text.length);
+        for (let index = 0; index < end; index += 1) {
+            if (text[index] === "\n") {
+                line += 1;
+            }
+        }
+        return `第 ${line} 行：元数据格式无效`;
+    }
+    const data = parsed.toJS();
+    if (data !== null && data !== undefined && (typeof data !== "object" || Array.isArray(data))) {
+        return "元数据须为键值映射";
+    }
+    return null;
+}
+function frontMatterDecorations(doc) {
+    const node = doc.firstChild;
+    if (!node || node.type.name !== "frontMatter") {
+        return DecorationSet.empty;
+    }
+    const decorations = [];
+    const error = frontMatterError(node.textContent);
+    if (error) {
+        decorations.push(Decoration.node(0, node.nodeSize, {
+            class: "wsmd-front-matter--invalid",
+            "data-error": error,
+        }));
+    }
+    let offset = 0;
+    for (const line of node.textContent.split("\n")) {
+        decorateLine(line, 1 + offset, decorations);
+        offset += line.length + 1;
+    }
+    return decorations.length > 0 ? DecorationSet.create(doc, decorations) : DecorationSet.empty;
+}
+function replaceLines(tr, from, to, next) {
+    const text = tr.doc.textBetween(from, to, "\n");
+    if (text === next) {
+        return;
+    }
+    tr.insertText(next, from, to);
+}
+function indentFrontMatter(tr, from, to, direction) {
+    const text = tr.doc.textBetween(from, to, "\n");
+    const next = text
+        .split("\n")
+        .map((line) => {
+        if (direction > 0) {
+            return `  ${line}`;
+        }
+        if (line.startsWith("  ")) {
+            return line.slice(2);
+        }
+        if (line.startsWith(" ")) {
+            return line.slice(1);
+        }
+        return line;
+    })
+        .join("\n");
+    replaceLines(tr, from, to, next);
+}
+/** 文档开头最多一个元数据块，后面至少还有一个正文块 */
+export const FrontMatterDocument = Node.create({
+    name: "doc",
+    topNode: true,
+    content: "frontMatter? block+",
+});
+/** 文首 front matter：按 YAML 编辑，序列化回 --- 包裹的块 */
+export const FrontMatter = Node.create({
+    name: "frontMatter",
+    priority: 1000,
+    content: "text*",
+    marks: "",
+    code: true,
+    defining: true,
+    isolating: true,
+    parseHTML() {
+        return [{ tag: "pre[data-front-matter]", preserveWhitespace: "full" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["pre", mergeAttributes(HTMLAttributes, { "data-front-matter": "", class: "wsmd-front-matter" }), 0];
+    },
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node) {
+                    const markdown = serializeFrontMatter(node.textContent);
+                    if (!markdown) {
+                        return;
+                    }
+                    state.write(markdown);
+                    state.closeBlock(node);
+                },
+                parse: {
+                    setup(markdownit) {
+                        installFrontMatterMarkdown(markdownit);
+                    },
+                    updateDOM(element) {
+                        const first = element.firstElementChild;
+                        if (!first?.matches("pre[data-front-matter]") || first.nextElementSibling) {
+                            return;
+                        }
+                        element.appendChild(element.ownerDocument.createElement("p"));
+                    },
+                },
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Backspace: () => {
+                const { empty, $anchor } = this.editor.state.selection;
+                if (!empty || $anchor.parent.type !== this.type || $anchor.parent.textContent.length > 0) {
+                    return false;
+                }
+                const pos = $anchor.before();
+                return this.editor.commands.command(({ tr }) => {
+                    tr.delete(pos, pos + $anchor.parent.nodeSize);
+                    tr.setSelection(TextSelection.near(tr.doc.resolve(Math.min(pos, tr.doc.content.size))));
+                    return true;
+                });
+            },
+            // YAML 不允许 Tab 缩进，块内 Tab 固定插入两个空格
+            Tab: () => {
+                const { $from, $to, empty } = this.editor.state.selection;
+                if ($from.parent.type !== this.type || !$from.sameParent($to)) {
+                    return false;
+                }
+                return this.editor.commands.command(({ tr }) => {
+                    if (empty) {
+                        tr.insertText("  ", $from.pos);
+                        return true;
+                    }
+                    const start = $from.start();
+                    const text = $from.parent.textContent;
+                    const lineStart = text.lastIndexOf("\n", Math.max(0, $from.parentOffset - 1)) + 1;
+                    const lineEndIndex = text.indexOf("\n", $to.parentOffset);
+                    const lineEnd = lineEndIndex < 0 ? text.length : lineEndIndex;
+                    indentFrontMatter(tr, start + lineStart, start + lineEnd, 1);
+                    return true;
+                });
+            },
+            "Shift-Tab": () => {
+                const { $from, $to } = this.editor.state.selection;
+                if ($from.parent.type !== this.type || !$from.sameParent($to)) {
+                    return false;
+                }
+                return this.editor.commands.command(({ tr }) => {
+                    const start = $from.start();
+                    const text = $from.parent.textContent;
+                    const lineStart = text.lastIndexOf("\n", Math.max(0, $from.parentOffset - 1)) + 1;
+                    const lineEndIndex = text.indexOf("\n", $to.parentOffset);
+                    const lineEnd = lineEndIndex < 0 ? text.length : lineEndIndex;
+                    indentFrontMatter(tr, start + lineStart, start + lineEnd, -1);
+                    return true;
+                });
+            },
+        };
+    },
+    addInputRules() {
+        const type = this.type;
+        return [
+            new InputRule({
+                find: /^---$/,
+                handler: ({ state, range, commands }) => {
+                    const $from = state.doc.resolve(range.from);
+                    const $to = state.doc.resolve(range.to);
+                    // 只在文首文本块、且还没有元数据时生效；其余位置交给分隔线
+                    // range.from 是匹配起点，第三笔「-」还没进文档，尾部检查要用 range.to
+                    if ($from.depth !== 1 ||
+                        $from.before(1) !== 0 ||
+                        $from.parent.type === type ||
+                        $to.parent !== $from.parent ||
+                        $to.parent.textContent.slice($to.parentOffset).length > 0) {
+                        return null;
+                    }
+                    const paragraph = state.schema.nodes.paragraph;
+                    if (!paragraph) {
+                        return null;
+                    }
+                    const from = $from.before(1);
+                    const to = $from.after(1);
+                    const onlyBlock = state.doc.childCount === 1;
+                    const front = type.create();
+                    const applied = commands.command(({ tr }) => {
+                        tr.replaceWith(from, to, onlyBlock ? Fragment.from([front, paragraph.create()]) : front);
+                        tr.setSelection(TextSelection.create(tr.doc, 1));
+                        return true;
+                    });
+                    return applied ? undefined : null;
+                },
+            }),
+        ];
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: frontMatterDecorationsKey,
+                state: {
+                    init: (_, state) => frontMatterDecorations(state.doc),
+                    apply: (tr, decorations) => (tr.docChanged ? frontMatterDecorations(tr.doc) : decorations),
+                },
+                props: {
+                    decorations(state) {
+                        return frontMatterDecorationsKey.getState(state) ?? DecorationSet.empty;
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/editor/index.d.ts

@@ -1,11 +1,17 @@
 import { type FC } from "react";
 import { type ToolbarItem, type UploadFile } from "./toolbar/items";
+export type InitialCaret = {
+    offset: number;
+    clientY: number;
+};
 interface EditorProps {
     content: string;
     onChange: (markdown: string) => void;
     onError: (message: string) => void;
     uploadFile: UploadFile;
     toolbar?: readonly ToolbarItem[];
+    /** 初始光标：正文非空白字符偏移与屏幕纵坐标，仅在编辑器创建时生效 */
+    initialCaret?: InitialCaret | null;
 }
 export declare const Editor: FC<EditorProps>;
 export {};

package/dist/editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editor/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAA4D,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1F,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,UAAU,EAAuB,MAAM,iBAAiB,CAAC;AAI1G,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;CAClC;AA4ID,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAyPlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editor/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAA4D,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQ1F,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,UAAU,EAAuB,MAAM,iBAAiB,CAAC;AAI1G,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IACjC,sCAAsC;IACtC,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACpC;AAmJD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA2RlC,CAAC"}

package/dist/editor/index.js

@@ -19,12 +19,15 @@ import { NodeSelection } from "@tiptap/pm/state";
 import { GripVertical } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Markdown } from "tiptap-markdown";
+import { posAtTextOffset } from "../text-offset";
+import { FrontMatter, FrontMatterDocument } from "./front-matter";
 import { LetterSpacing } from "./letter-spacing";
 import { createSlashCommand } from "./slash-menu";
 import { Toolbar } from "./toolbar";
 import { DEFAULT_TOOLBAR } from "./toolbar/items";
 import { VideoEmbed } from "./video-embed";
 import { parseVideoUrl } from "./video-embed/video-url";
+const CARET_MARGIN = 24;
 const mediaFilesFrom = (data) => {
     const files = data ? Array.from(data.files) : [];
     return {
@@ -85,6 +88,11 @@ const BlockDragHandle = ({ editorDom, getEditor }) => {
                 hide();
                 return;
             }
+            const top = $pos.node(1);
+            if (top.type.name === "frontMatter") {
+                hide();
+                return;
+            }
             const nodePos = $pos.before(1);
             const coords = editor.view.coordsAtPos(nodePos);
             const editorRect = editor.view.dom.getBoundingClientRect();
@@ -125,7 +133,9 @@ const BlockDragHandle = ({ editorDom, getEditor }) => {
             }
         }, children: _jsx(GripVertical, { "aria-hidden": true }) }));
 };
-export const Editor = ({ content, onChange, onError, uploadFile, toolbar = DEFAULT_TOOLBAR }) => {
+export const Editor = ({ content, onChange, onError, uploadFile, toolbar = DEFAULT_TOOLBAR, initialCaret, }) => {
+    const initialCaretRef = useRef(initialCaret);
+    const canvasRef = useRef(null);
     const fileInputRef = useRef(null);
     const videoInputRef = useRef(null);
     const editorRef = useRef(null);
@@ -182,12 +192,15 @@ export const Editor = ({ content, onChange, onError, uploadFile, toolbar = DEFAU
     const editor = useEditor({
         immediatelyRender: false,
         extensions: [
+            FrontMatterDocument,
+            FrontMatter,
             StarterKit.configure({
+                document: false,
                 link: false,
                 heading: { levels: [1, 2, 3, 4, 5, 6] },
             }),
             Placeholder.configure({
-                placeholder: "输入 / 唤起命令",
+                placeholder: ({ node }) => (node.type.name === "frontMatter" ? "字段: 值" : "输入 / 唤起命令"),
             }),
             Image,
             VideoEmbed,
@@ -247,6 +260,21 @@ export const Editor = ({ content, onChange, onError, uploadFile, toolbar = DEFAU
             setEditorDom(editor.view.dom);
         }
     }, [editor]);
+    useEffect(() => {
+        const caret = initialCaretRef.current;
+        const canvas = canvasRef.current;
+        if (!editor || !caret || !canvas) {
+            return;
+        }
+        // focus(0) 会被 Tiptap 视为不聚焦
+        editor.commands.focus(caret.offset === 0 ? "start" : posAtTextOffset(editor.state.doc, caret.offset), { scrollIntoView: false });
+        const { top, bottom } = editor.view.coordsAtPos(editor.state.selection.from);
+        const rect = canvas.getBoundingClientRect();
+        const height = bottom - top;
+        // 光标行尽量保持在双击时的屏幕高度，并夹在编辑区可视范围内
+        const target = Math.min(Math.max(caret.clientY - height / 2, rect.top + CARET_MARGIN), rect.bottom - CARET_MARGIN - height);
+        canvas.scrollTop += top - target;
+    }, [editor]);
     const getEditor = useCallback(() => editorRef.current, []);
     const onEditorDragEnter = (event) => {
         if (!hasFilePayload(event.dataTransfer)) {
@@ -297,7 +325,7 @@ export const Editor = ({ content, onChange, onError, uploadFile, toolbar = DEFAU
                     editor.chain().focus().setVideoEmbed(parsed).run();
                     setVideoError(null);
                     setVideoOpen(false);
-                } }), _jsxs("div", { className: "wsmd-markdown-editor__canvas", children: [editorDom ? _jsx(BlockDragHandle, { editorDom: editorDom, getEditor: getEditor }) : null, _jsx(EditorContent, { editor: editor, className: "wsmd-markdown-editor__content wsmd-markdown-body" })] }), _jsx("input", { ref: fileInputRef, className: "wsmd-markdown-editor__file", type: "file", accept: "image/*", onChange: (event) => {
+                } }), _jsxs("div", { ref: canvasRef, className: "wsmd-markdown-editor__canvas", children: [editorDom ? _jsx(BlockDragHandle, { editorDom: editorDom, getEditor: getEditor }) : null, _jsx(EditorContent, { editor: editor, className: "wsmd-markdown-editor__content wsmd-markdown-body" })] }), _jsx("input", { ref: fileInputRef, className: "wsmd-markdown-editor__file", type: "file", accept: "image/*", onChange: (event) => {
                     const file = event.target.files?.[0];
                     event.target.value = "";
                     if (file) {

package/dist/editor/slash-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/slash-menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAiB,KAAK,MAAM,EAAE,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAClF,OAAmB,EAAE,KAAK,sBAAsB,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACnG,OAAO,EAEL,QAAQ,EAcT,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,OAAO,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAqBF,eAAO,MAAM,WAAW,EAAE,SAAS,EAwElC,CAAC;AAEF,UAAU,cAAe,SAAQ,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC;CAAG;AAEzE,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,OAAO,CAAC;CACvD;AAED,eAAO,MAAM,SAAS,4GAwDpB,CAAC;AAEH,mBAAmB;AACnB,eAAO,MAAM,kBAAkB,GAAI,eAAe,MAAM,IAAI,EAAE,eAAe,MAAM,IAAI,wBA+CtF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/slash-menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAiB,KAAK,MAAM,EAAE,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAClF,OAAmB,EAAE,KAAK,sBAAsB,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACnG,OAAO,EAEL,QAAQ,EAcT,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,OAAO,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAqBF,eAAO,MAAM,WAAW,EAAE,SAAS,EAwElC,CAAC;AAEF,UAAU,cAAe,SAAQ,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC;CAAG;AAEzE,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,OAAO,CAAC;CACvD;AAED,eAAO,MAAM,SAAS,4GAwDpB,CAAC;AAEH,mBAAmB;AACnB,eAAO,MAAM,kBAAkB,GAAI,eAAe,MAAM,IAAI,EAAE,eAAe,MAAM,IAAI,wBAgDtF,CAAC"}

package/dist/editor/slash-menu/index.js

@@ -139,6 +139,7 @@ export const createSlashCommand = (onInsertImage, onInsertVideo) => {
                 Suggestion({
                     editor: this.editor,
                     char: "/",
+                    allow: ({ state, range }) => state.doc.resolve(range.from).parent.type.name !== "frontMatter",
                     items: ({ query }) => SLASH_ITEMS.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())),
                     command: ({ editor, range, props }) => {
                         props.command({ editor, range, onInsertImage, onInsertVideo });

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { Editor } from "./editor";
+export { Editor, type InitialCaret } from "./editor";
 export { Viewer } from "./view";
+export { textOffsetAtPoint } from "./text-offset";
 export { DEFAULT_TOOLBAR, type ToolbarItem, type UploadFile, type UploadFileResult, type UploadFileType } from "./editor/toolbar/items";
 export type { MarkdownPlugin } from "./plugin";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxI,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxI,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 "use client";
 export { Editor } from "./editor";
 export { Viewer } from "./view";
+export { textOffsetAtPoint } from "./text-offset";
 export { DEFAULT_TOOLBAR } from "./editor/toolbar/items";

package/dist/text-offset.d.ts

@@ -0,0 +1,6 @@
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+/** 预览区坐标处光标之前的非空白字符数；预览与编辑器的空白处理不同，只按非空白字符对齐 */
+export declare const textOffsetAtPoint: (root: HTMLElement, x: number, y: number) => number | null;
+/** 文档中第 offset 个非空白字符之后的位置，超出时返回文档末尾 */
+export declare const posAtTextOffset: (doc: ProseMirrorNode, offset: number) => number;
+//# sourceMappingURL=text-offset.d.ts.map

package/dist/text-offset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-offset.d.ts","sourceRoot":"","sources":["../src/text-offset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIhE,gDAAgD;AAChD,eAAO,MAAM,iBAAiB,GAAI,MAAM,WAAW,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,kBASxE,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,eAAe,GAAI,KAAK,eAAe,EAAE,QAAQ,MAAM,WAoBnE,CAAC"}

package/dist/text-offset.js

@@ -0,0 +1,34 @@
+const WHITESPACE = /\s/;
+/** 预览区坐标处光标之前的非空白字符数；预览与编辑器的空白处理不同，只按非空白字符对齐 */
+export const textOffsetAtPoint = (root, x, y) => {
+    const caret = document.caretPositionFromPoint(x, y);
+    if (!caret || !root.contains(caret.offsetNode)) {
+        return null;
+    }
+    const range = document.createRange();
+    range.setStart(root, 0);
+    range.setEnd(caret.offsetNode, caret.offset);
+    return range.toString().replace(/\s/g, "").length;
+};
+/** 文档中第 offset 个非空白字符之后的位置，超出时返回文档末尾 */
+export const posAtTextOffset = (doc, offset) => {
+    let rest = offset;
+    let found = doc.content.size;
+    doc.descendants((node, pos) => {
+        if (rest === 0) {
+            return false;
+        }
+        if (!node.isText) {
+            return true;
+        }
+        const text = node.text ?? "";
+        for (let i = 0; i < text.length; i++) {
+            if (!WHITESPACE.test(text[i]) && --rest === 0) {
+                found = pos + i + 1;
+                return false;
+            }
+        }
+        return false;
+    });
+    return found;
+};

package/dist/view/image-lightbox/index.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from "react";
+export type PreviewImage = {
+    src: string;
+    alt: string;
+};
+interface ImageLightboxProps {
+    images: PreviewImage[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    onClose: () => void;
+}
+/** 全屏查看预览中的图片，并在文档顺序内切换 */
+export declare const ImageLightbox: FC<ImageLightboxProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/view/image-lightbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/view/image-lightbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAmBF,UAAU,kBAAkB;IAC1B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,2BAA2B;AAC3B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4EhD,CAAC"}

package/dist/view/image-lightbox/index.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+const keyHandlers = new Set();
+// 模块加载时挂到 window 捕获阶段，早于页面弹窗的 Esc 监听
+if (typeof window !== "undefined") {
+    window.addEventListener("keydown", (event) => {
+        for (const handler of keyHandlers) {
+            handler(event);
+        }
+    }, true);
+}
+/** 全屏查看预览中的图片，并在文档顺序内切换 */
+export const ImageLightbox = ({ images, index, onIndexChange, onClose }) => {
+    const current = images[index];
+    const showNav = images.length > 1;
+    useEffect(() => {
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previous;
+        };
+    }, []);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key !== "Escape" && event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (event.key === "Escape") {
+                onClose();
+                return;
+            }
+            if (event.key === "ArrowLeft" && index > 0) {
+                onIndexChange(index - 1);
+                return;
+            }
+            if (event.key === "ArrowRight" && index < images.length - 1) {
+                onIndexChange(index + 1);
+            }
+        };
+        keyHandlers.add(onKeyDown);
+        return () => {
+            keyHandlers.delete(onKeyDown);
+        };
+    }, [images.length, index, onClose, onIndexChange]);
+    if (!current) {
+        return null;
+    }
+    return createPortal(_jsxs("div", { className: "wsmd-image-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "\u56FE\u7247\u9884\u89C8", children: [_jsx("button", { className: "wsmd-image-lightbox__backdrop", type: "button", "aria-label": "\u5173\u95ED\u9884\u89C8", onClick: onClose }), _jsx("button", { className: "wsmd-image-lightbox__close", type: "button", "aria-label": "\u5173\u95ED", onClick: onClose, children: _jsx(X, {}) }), showNav ? (_jsx("button", { className: "wsmd-image-lightbox__nav wsmd-image-lightbox__nav--prev", type: "button", "aria-label": "\u4E0A\u4E00\u5F20", disabled: index === 0, onClick: () => onIndexChange(index - 1), children: _jsx(ChevronLeft, {}) })) : null, _jsx("img", { className: "wsmd-image-lightbox__image", src: current.src, alt: current.alt }), showNav ? (_jsx("button", { className: "wsmd-image-lightbox__nav wsmd-image-lightbox__nav--next", type: "button", "aria-label": "\u4E0B\u4E00\u5F20", disabled: index === images.length - 1, onClick: () => onIndexChange(index + 1), children: _jsx(ChevronRight, {}) })) : null, _jsxs("p", { className: "wsmd-image-lightbox__counter", children: [index + 1, " / ", images.length] })] }), document.body);
+};

package/dist/view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/view/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,wGAmBjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/view/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,eAAO,MAAM,MAAM,wGAkDjB,CAAC"}

package/dist/view/index.js

@@ -1,8 +1,28 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
 import Markdown from "react-markdown";
+import { ImageLightbox } from "./image-lightbox";
+const previewSrc = (image) => {
+    if (!image.getAttribute("src")) {
+        return "";
+    }
+    return image.currentSrc || image.src;
+};
+const previewImages = (root) => {
+    return Array.from(root.querySelectorAll("img")).flatMap((node) => {
+        if (!(node instanceof HTMLImageElement) || node.closest("a")) {
+            return [];
+        }
+        const src = previewSrc(node);
+        if (!src) {
+            return [];
+        }
+        return [{ node, image: { src, alt: node.alt } }];
+    });
+};
 export const Viewer = forwardRef(({ content, plugins = [], className }, ref) => {
+    const [gallery, setGallery] = useState(null);
     const remarkPlugins = [];
     const rehypePlugins = [];
     for (const plugin of plugins) {
@@ -13,6 +33,25 @@ export const Viewer = forwardRef(({ content, plugins = [], className }, ref) =>
             rehypePlugins.push(plugin.rehype);
         }
     }
+    useEffect(() => {
+        setGallery(null);
+    }, [content]);
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const image = target.closest("img");
+        if (!(image instanceof HTMLImageElement) || !event.currentTarget.contains(image) || image.closest("a")) {
+            return;
+        }
+        const images = previewImages(event.currentTarget);
+        const index = images.findIndex((item) => item.node === image);
+        if (index < 0) {
+            return;
+        }
+        setGallery({ images: images.map((item) => item.image), index });
+    };
     const rootClass = className ? `wsmd-markdown-body ${className}` : "wsmd-markdown-body";
-    return (_jsx("div", { ref: ref, className: rootClass, children: _jsx(Markdown, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, children: content }) }));
+    return (_jsxs("div", { ref: ref, className: rootClass, onClick: onClick, children: [_jsx(Markdown, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, children: content }), gallery ? (_jsx(ImageLightbox, { images: gallery.images, index: gallery.index, onIndexChange: (index) => setGallery({ images: gallery.images, index }), onClose: () => setGallery(null) })) : null] }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxpos/markdown",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Markdown 编辑器与渲染器",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,7 +55,8 @@
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "tiptap-markdown": "^0.9.0"
+    "tiptap-markdown": "^0.9.0",
+    "yaml": "2.9.0"
   },
   "license": "MIT"
 }

package/styles.css

@@ -303,6 +303,105 @@
   border-radius: 8px;
 }
 
+.wsmd-markdown-body img {
+  cursor: zoom-in;
+}
+
+.wsmd-markdown-body a img,
+.wsmd-tiptap img {
+  cursor: auto;
+}
+
+.wsmd-image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wsmd-image-lightbox__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  padding: 0;
+  background: rgb(0 0 0 / 72%);
+  cursor: zoom-out;
+}
+
+.wsmd-image-lightbox__image {
+  position: relative;
+  z-index: 1;
+  max-width: calc(100% - 128px);
+  max-height: calc(100% - 96px);
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.wsmd-image-lightbox__close,
+.wsmd-image-lightbox__nav {
+  position: absolute;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 45%);
+  color: #fff;
+  cursor: pointer;
+}
+
+.wsmd-image-lightbox__close:hover,
+.wsmd-image-lightbox__nav:hover:not(:disabled) {
+  background: rgb(255 255 255 / 20%);
+}
+
+.wsmd-image-lightbox__nav:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.wsmd-image-lightbox__close svg,
+.wsmd-image-lightbox__nav svg {
+  width: 20px;
+  height: 20px;
+}
+
+.wsmd-image-lightbox__close {
+  top: 16px;
+  right: 16px;
+}
+
+.wsmd-image-lightbox__nav {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.wsmd-image-lightbox__nav--prev {
+  left: 16px;
+}
+
+.wsmd-image-lightbox__nav--next {
+  right: 16px;
+}
+
+.wsmd-image-lightbox__counter {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  z-index: 2;
+  margin: 0;
+  transform: translateX(-50%);
+  color: #fff;
+  font-family: var(--wsmd-font-mono), ui-monospace, monospace;
+  font-size: 13px;
+}
+
 .wsmd-markdown-editor__loading {
   padding: 20px 24px;
   color: var(--wsmd-muted);
@@ -532,6 +631,70 @@
   pointer-events: none;
 }
 
+.wsmd-markdown-body pre.wsmd-front-matter {
+  margin: 0 0 16px;
+  padding: 10px 14px 12px;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 8px;
+  background: var(--wsmd-surface);
+  color: var(--wsmd-foreground);
+  font-family: var(--wsmd-font-mono), ui-monospace, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.wsmd-front-matter::before {
+  content: "元数据";
+  display: block;
+  margin-bottom: 6px;
+  color: var(--wsmd-muted);
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: normal;
+}
+
+.wsmd-front-matter__key {
+  color: var(--wsmd-muted);
+}
+
+.wsmd-front-matter__bullet {
+  color: var(--wsmd-hl-bullet);
+}
+
+.wsmd-front-matter__comment {
+  color: var(--wsmd-hl-comment);
+}
+
+.wsmd-front-matter__string {
+  color: var(--wsmd-hl-string);
+}
+
+.wsmd-markdown-body pre.wsmd-front-matter.wsmd-front-matter--invalid {
+  border-color: var(--wsmd-danger);
+}
+
+.wsmd-tiptap .wsmd-front-matter.is-empty::after {
+  content: attr(data-placeholder);
+  color: var(--wsmd-muted);
+  font-family: var(--wsmd-font-mono), ui-monospace, monospace;
+  pointer-events: none;
+  white-space: normal;
+}
+
+.wsmd-tiptap .wsmd-front-matter.wsmd-front-matter--invalid::after {
+  content: attr(data-error);
+  display: block;
+  margin-top: 6px;
+  color: var(--wsmd-danger);
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: normal;
+}
+
 .wsmd-tiptap ul[data-type="taskList"] {
   list-style: none;
   padding-left: 0;