@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0-test.0

package/Markdown/Markdown/parser.ts

@@ -0,0 +1,1365 @@
+import { marked, Token, Tokens } from "./marked";
+
+import { h, VNode, Ref, ref } from "vue";
+import { JsvTextBox, JsvFlexDiv, JsvLatex, processLatexStr } from "jsview";
+
+//禁用setext heading语法
+const tokenizer = {
+  lheading(src: string): false | Tokens.Heading | undefined {
+    return undefined;
+  },
+};
+const inlineMath = {
+  name: "inlineMath",
+  level: "inline" as const, // 设置为行内级别
+  // start 函数帮助 marked 快速定位潜在匹配点，提高性能
+  start(src: string) {
+    return src.indexOf("\\(");
+  },
+  tokenizer(src: string, tokens: Token[]) {
+    // 使用正则匹配 \( ... \) 格式，注意非贪婪匹配
+    const rule = /^\\\(([\s\S]*?)(\\\)|$)/;
+    // const rule = /^\\\(([\s\S]+?)\\\)/;
+    const match = rule.exec(src);
+    if (match) {
+      return {
+        type: "inlineMath", // token 类型名
+        raw: match[0], // 原始文本，包含 \( 和 \)
+        text: match[1].trim(), // 实际内容
+        tokens: [],
+        isComplete: Boolean(match[2]),
+      };
+    }
+  },
+};
+
+const blockMath = {
+  name: "blockMath",
+  level: "block" as const, // 设置为块级
+  // start 函数帮助 marked 快速定位潜在匹配点，提高性能
+  start(src: string) {
+    return src.indexOf("\\[");
+  },
+  tokenizer(src: string, tokens: Token[]) {
+    // 使用正则匹配 \[ ... \] 格式, 出现\[时认为不完整，直到出现\]时认为完整
+    const rule = /^\\\[([\s\S]*?)(\\\]|$)/;
+    // const rule = /^\\\[([\s\S]+?)\\\]/;
+    const match = rule.exec(src);
+    if (match) {
+      return {
+        type: "blockMath", // token 类型名
+        raw: match[0], // 原始文本，包含 \( 和 \)
+        text: match[1].trim(), // 实际内容
+        tokens: [],
+        isComplete: Boolean(match[2]),
+      };
+    }
+  },
+};
+
+marked.use({ extensions: [inlineMath] });
+marked.use({ extensions: [blockMath] });
+marked.use({
+  tokenizer,
+});
+
+function getMathNodeLoadingText(type: string): string {
+  if (type === "inline") {
+    return " ... ";
+  } else {
+    const num = Math.floor(Date.now() / 300) % 3;
+    return "公式生成中" + [".", "..", "..."][num];
+  }
+}
+
+let enableFormulaLoading = true;
+function showFormulaLoading(token: any) {
+  return enableFormulaLoading && !token.isComplete;
+}
+
+const inlineTokenToLatexMap: Record<string, (t: Token) => string> = {
+  escape: (t: Token) => t.raw,
+  html: (t: Token) => t.raw,
+  link: (t: Token) => t.raw,
+  image: (t: Token) => t.raw,
+  codespan: (t: Token) => t.raw,
+  strong: (t: Token) => {
+    return `\\textb{${inlineTokensToLatex((t as Tokens.Strong).tokens)}}`;
+  },
+  em: (t: Token) => {
+    return `\\texti{${inlineTokensToLatex((t as Tokens.Em).tokens)}}`;
+  },
+  br: (t: Token) => `\n`,
+  del: (t: Token) =>
+    `\\textdecoration{line-through}{${inlineTokensToLatex(
+      (t as Tokens.Del).tokens
+    )}}`,
+  text: (t: Token) => {
+    if ((t as Tokens.Text).tokens) {
+      return inlineTokensToLatex((t as Tokens.Text).tokens);
+    } else {
+      return t.raw;
+    }
+  },
+  inlineMath: (t: any) => {
+    if (showFormulaLoading(t)) {
+      return getMathNodeLoadingText("inline");
+    } else {
+      return t.raw;
+    }
+  },
+};
+
+function inlineTokensToLatex(tokens: Token[] | undefined): string {
+  let result = "";
+  if (!tokens) {
+    return result;
+  }
+  for (const token of tokens) {
+    if (inlineTokenToLatexMap[token.type]) {
+      result += inlineTokenToLatexMap[token.type](token);
+    } else {
+      result += token.raw;
+      console.warn(
+        "block token in inline token.",
+        tokens.reduce((acc, token) => acc + token.raw, "")
+      );
+    }
+  }
+  return result;
+}
+
+const DefaultFontStyle = {
+  p: {
+    fontSize: 1.0,
+  },
+  h1: {
+    fontSize: 2.0,
+  },
+  h2: {
+    fontSize: 1.5,
+  },
+  h3: {
+    fontSize: 1.17,
+  },
+  h4: {
+    fontSize: 1.0,
+  },
+  h5: {
+    fontSize: 0.83,
+  },
+  h6: {
+    fontSize: 0.67,
+  },
+};
+
+interface RenderSharedInfo {
+  baseFontSize: number;
+  curDepth: number;
+  totalWidth: number;
+  totalHeight: number;
+  tabWidth: number;
+  visibleStart: number;
+  visibleRange: number;
+  enableLatex?: boolean;
+  textColor?: string;
+}
+
+abstract class BlockNode {
+  public children: BlockNode[];
+  public parent: BlockNode | undefined = undefined;
+  public token: Token;
+  public depth: number = 0;
+
+  public left: number = 0;
+  public top: number = 0;
+  public width: number = 0;
+  public height: number = 0;
+
+  public startIndex: number = 0;
+  public endIndex: number = 0;
+
+  protected nodeKey: string | undefined = undefined;
+  protected visible: Ref<boolean> = ref(true);
+  protected onSizedCbk: (width: number, height: number) => void;
+
+  protected createKey: number;
+
+  protected isDone: boolean = false;
+
+  constructor(token: Token, d: number, key: number) {
+    this.children = [];
+    this.token = token;
+    this.depth = d;
+    this.onSizedCbk = this.onSized.bind(this);
+    this.createKey = key;
+  }
+
+  public abstract render(sharedInfo: RenderSharedInfo): VNode;
+
+  getChildNodes(sharedInfo: RenderSharedInfo) {
+    return this.children.map((child) => child.render(sharedInfo));
+  }
+
+  public getSize() {
+    return [this.width, this.height];
+  }
+
+  public addChild(child: BlockNode) {
+    this.children.push(child);
+    child.parent = this;
+  }
+
+  public insertChild(child: BlockNode, index: number) {
+    this.children.splice(index, 0, child);
+    child.parent = this;
+  }
+
+  public removeChild(child: BlockNode) {
+    const index = this.children.indexOf(child);
+    if (index !== -1) {
+      this.children.splice(index, 1);
+    }
+    child.parent = undefined;
+  }
+
+  public removeChildren(children: BlockNode[]) {
+    children.forEach((child) => {
+      this.removeChild(child);
+    });
+  }
+
+  public updateToken(token: Token) {
+    this.token = token;
+  }
+
+  public onSized(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+  }
+
+  public onChildSizeChanged(child: BlockNode) {
+    let top = 0;
+    let i = 0; //this.children.indexOf(child) + 1;
+    for (; i < this.children.length; ++i) {
+      const child = this.children[i];
+      child.top = top;
+      top += child.height;
+    }
+    this.parent?.onChildSizeChanged(this);
+  }
+
+  public merge(other: BlockNode) {
+    if (this.token.type != other.token.type) {
+      return false;
+    }
+    this.updateToken(other.token);
+    this.startIndex = other.startIndex;
+    this.endIndex = other.endIndex;
+    this.depth = other.depth;
+    return true;
+  }
+
+  protected getAbsoluteTop() {
+    let top = this.top;
+    let node: BlockNode | undefined = this;
+    while (node.parent) {
+      top += node.parent.top;
+      node = node.parent;
+    }
+    return top;
+  }
+
+  protected isVisible(top: number, height: number) {
+    //未获取尺寸时认为可见, 为了获得正确尺寸，未描画完前始终展示
+    if (this.width <= 0 || this.height <= 0 || height <= 0 || !this.isDone) {
+      return true;
+    }
+    const absoluteTop = this.getAbsoluteTop();
+    return absoluteTop + this.height >= top && absoluteTop <= top + height;
+  }
+
+  protected setInvisible() {
+    this.visible.value = false;
+    this.children.forEach((child) => child.setInvisible());
+  }
+
+  protected checkVisible(top: number, height: number) {
+    this.visible.value = this.isVisible(top, height);
+    if (!this.visible.value) {
+      this.children.forEach((child) => child.setInvisible());
+    } else {
+      this.children.forEach((child) => child.checkVisible(top, height));
+    }
+  }
+
+  public done() {
+    this.isDone = true;
+    this.children.forEach((child) => child.done());
+  }
+}
+
+class RootNode extends BlockNode {
+  private sharedInfo: RenderSharedInfo | undefined = undefined;
+  private visibleStart: number = 0;
+  private visibleRange: number = 0;
+  private rootVisible: boolean = true;
+  private customOnSizeChanged:
+    | ((width: number, height: number) => void)
+    | undefined = undefined;
+  private customOnContentChanged: ((text: string) => void) | undefined =
+    undefined;
+
+  public override render(sharedInfo: RenderSharedInfo) {
+    this.sharedInfo = sharedInfo;
+    this.visibleStart = sharedInfo.visibleStart;
+    this.visibleRange = sharedInfo.visibleRange;
+    return h(
+      JsvFlexDiv,
+      {
+        key: this.createKey,
+        style: {
+          width: sharedInfo.totalWidth,
+          flexDirection: "column",
+          alignItems: "flex-start",
+        },
+        onSized: this.onSizedCbk,
+      },
+      () => this.getChildNodes(sharedInfo)
+    );
+  }
+
+  public override onChildSizeChanged(child: BlockNode) {
+    super.onChildSizeChanged(child);
+    if (this.sharedInfo && this.rootVisible) {
+      this.checkVisible(this.visibleStart, this.visibleRange);
+    }
+    //子通知过来时，父的JsvFlexDiv的回调已经调用过了
+    this.customOnSizeChanged?.(this.width, this.height);
+  }
+
+  public setVisibleRange(start: number, range: number) {
+    this.visibleStart = start;
+    this.visibleRange = range;
+    if (this.rootVisible) {
+      this.checkVisible(start, range);
+    }
+  }
+
+  public getLeafNodesByIndexRange(start: number, end: number): BlockNode[] {
+    const result: BlockNode[] = [];
+
+    const traverse = (node: BlockNode) => {
+      // 如果是叶节点（没有子节点）
+      if (node.children.length === 0) {
+        if (node.startIndex < end && node.endIndex > start) {
+          result.push(node);
+        }
+      } else {
+        // 非叶节点，递归遍历所有子节点
+        node.children.forEach((child) => traverse(child));
+      }
+    };
+    this.children.forEach((child) => traverse(child));
+    return result;
+  }
+
+  public registerOnSizeChanged(
+    callback: (width: number, height: number) => void
+  ) {
+    this.customOnSizeChanged = callback;
+  }
+
+  public show() {
+    this.rootVisible = true;
+    this.checkVisible(this.visibleStart, this.visibleRange);
+  }
+
+  public hide() {
+    this.rootVisible = false;
+    this.setInvisible();
+  }
+}
+
+function hasText(token: Token): token is Token & { text: string } {
+  if (token == null) {
+    return false;
+  }
+  return "text" in token;
+}
+
+function hasTokens(token: Token): token is Token & { tokens: Token[] } {
+  if (token == null) {
+    return false;
+  }
+  return "tokens" in token;
+}
+
+function isMathNode(token: Token): boolean {
+  if (token.type == "inlineMath" || token.type == "blockMath") {
+    return true;
+  }
+  if (hasTokens(token) && token.tokens.length > 0) {
+    for (const t of token.tokens) {
+      if (t.type == "inlineMath" || t.type == "blockMath") {
+        return true;
+      } else {
+        if (isMathNode(t)) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+
+//绘制文字的叶节点
+abstract class DrawTextNode extends BlockNode {
+  public renderText: Ref<string> = ref("");
+  protected cachedStyle: any = undefined;
+  protected isMathNode: boolean = false;
+  protected textDrawKey: number = 0;
+
+  constructor(token: Token, d: number, key: number) {
+    super(token, d, key);
+    this.renderText.value = this.getDrawText();
+    this.isMathNode = isMathNode(token);
+  }
+
+  public abstract getDrawText(): string;
+  protected abstract getDrawStyleImpl(sharedInfo: RenderSharedInfo): any;
+  public getDrawStyle(sharedInfo: RenderSharedInfo): any {
+    const style = this.getDrawStyleImpl(sharedInfo);
+    if (this.isDone && this.height > 0) {
+      style.height = this.height;
+    }
+    if (
+      this.cachedStyle &&
+      this.cachedStyle.width == style.width &&
+      this.cachedStyle.fontSize == style.fontSize &&
+      this.cachedStyle.height == style.height &&
+      this.cachedStyle.color == style.color
+    ) {
+      return this.cachedStyle;
+    }
+    this.cachedStyle = style;
+    return style;
+  }
+
+  public override merge(other: BlockNode) {
+    let result = super.merge(other);
+    this.isMathNode = isMathNode(this.token);
+    return result;
+  }
+
+  public override render(sharedInfo: RenderSharedInfo) {
+    if (!this.visible.value && this.width > 0 && this.height > 0) {
+      return h("div", {
+        style: {
+          width: this.width,
+          height: this.height,
+          // backgroundColor: "#0000ff99",
+        },
+      });
+    }
+    const style = this.getDrawStyle(sharedInfo);
+
+    if (this.isMathNode && sharedInfo.enableLatex) {
+      const latexStr = wrapLongPlainTextOutsideMath(
+        processLatexStr(
+          this.renderText.value.replaceAll("\\textb{", "\\textbf{")
+        )!
+      );
+
+      let fixedWidth: number | undefined = undefined;
+      let fixedHeight: number | undefined = undefined;
+      if (this.isDone) {
+        fixedWidth = this.width;
+        fixedHeight = this.height;
+      };
+      return h(
+        JsvFlexDiv,
+        {
+          key: this.createKey,
+          onSized: this.onSizedCbk,
+          style: {
+            width: fixedWidth,
+            height: fixedHeight,
+          },
+        },
+        () =>
+          h(JsvLatex, {
+            latexStr,
+            width: style.width,
+            fontSize: style.fontSize,
+            color: style.color,
+            lineSpace: 2,
+          })
+      );
+    }
+    // 使用基于节点位置的稳定 key，而不是基于内容
+    // 这样即使内容更新，只要节点位置不变，key 就不变，组件会被正确复用
+    const { width, ...restStyle } = style;
+    return h(
+      JsvFlexDiv,
+      {
+        key: this.createKey,
+        onSized: this.onSizedCbk,
+      },
+      () =>
+        h(
+          JsvTextBox,
+          {
+            enableLatex: true,
+            style: { ...restStyle },
+            maxWidth: style.width,
+          },
+          () => this.renderText.value
+        )
+    );
+  }
+
+  public override updateToken(token: Token): void {
+    super.updateToken(token);
+    const newText = this.getDrawText();
+    if (newText !== this.renderText.value) {
+      this.renderText.value = newText;
+      this.textDrawKey++;
+    }
+  }
+
+  public override onSized(width: number, height: number) {
+    //JsvFlexDiv的onSized的触发顺序是先父后子，所以在叶节点的onSized中重新计算位置
+    super.onSized(width, height);
+    this.parent?.onChildSizeChanged(this);
+  }
+}
+
+//处理一些不支持的标准
+function latexSanitizer(text: string): string {
+  //align*环境替换为aligned环境
+  text = text
+    .replaceAll("\\begin{align*}", "\\begin{aligned}")
+    .replaceAll("\\end{align*}", "\\end{aligned}");
+  return text;
+}
+
+/** 将 \text{...} 内需要转义的 { } \ 转义，避免破坏 LaTeX 结构 */
+function escapeTextContent(s: string): string {
+  return s.replace(/\\/g, "\\\\").replace(/{/g, "\\{").replace(/}/g, "\\}");
+}
+
+const MIN_PLAIN_LENGTH_FOR_BREAK = 4;
+
+/**
+ * 在 \( \)、\[ \] 之外的普通文字（非 LaTeX 命令），若长度超过 4 个字符，
+ * 用 \breakEverywhere{true}\text{原文字}\breakEverywhere{false} 包裹，便于断行。
+ */
+function wrapLongPlainTextOutsideMath(latexStr: string): string {
+  const parts: string[] = [];
+  let i = 0;
+  const n = latexStr.length;
+
+  while (i < n) {
+    const two = () => latexStr.slice(i, i + 2);
+
+    // 1. 跳过 \( ... \) 整段（含可选的结尾 \)）
+    if (two() === "\\(") {
+      let j = i + 2;
+      while (j < n && latexStr.slice(j, j + 2) !== "\\)") j++;
+      if (latexStr.slice(j, j + 2) === "\\)") j += 2;
+      parts.push(latexStr.slice(i, j));
+      i = j;
+      continue;
+    }
+    // 2. 跳过 \[ ... \] 整段（含可选的结尾 \]）
+    if (two() === "\\[") {
+      let j = i + 2;
+      while (j < n && latexStr.slice(j, j + 2) !== "\\]") j++;
+      if (latexStr.slice(j, j + 2) === "\\]") j += 2;
+      parts.push(latexStr.slice(i, j));
+      i = j;
+      continue;
+    }
+    // 3. 孤立的 \) 或 \] 原样保留
+    if (two() === "\\)" || two() === "\\]") {
+      parts.push(two());
+      i += 2;
+      continue;
+    }
+    // 4. 当前在“公式外”：遇到反斜杠则整段 LaTeX 命令原样保留（\command 或 \command{...}）
+    if (latexStr[i] === "\\") {
+      let j = i + 1;
+      while (j < n && /[a-zA-Z]/.test(latexStr[j])) j++;
+      if (j < n && latexStr[j] === "{") {
+        let depth = 1;
+        j++;
+        while (j < n && depth > 0) {
+          if (latexStr[j] === "{") depth++;
+          else if (latexStr[j] === "}") depth--;
+          j++;
+        }
+      }
+      parts.push(latexStr.slice(i, j));
+      i = j;
+      continue;
+    }
+    // 5. 普通字符：收集一段连续普通文字（直到遇到 \(、\[ 或 \）
+    let runStart = i;
+    while (i < n) {
+      const t = latexStr.slice(i, i + 2);
+      if (t === "\\(" || t === "\\[" || t === "\\)" || t === "\\]") break;
+      if (latexStr[i] === "\\") break;
+      i++;
+    }
+    const run = latexStr.slice(runStart, i);
+    if (run.length > MIN_PLAIN_LENGTH_FOR_BREAK) {
+      parts.push(
+        `\\breakEverywhere{true}\\text{${escapeTextContent(
+          run
+        )}}\\breakEverywhere{false}`
+      );
+    } else {
+      parts.push(run);
+    }
+  }
+
+  return parts.join("");
+}
+
+//所有带数学公式的，整个节点作为公式处理
+class BlockMathNode extends DrawTextNode {
+  public override getDrawText(): string {
+    if (hasText(this.token)) {
+      if ((this.token as any).isComplete) {
+        return latexSanitizer(this.token.text);
+      } else {
+        return "公式生成中...";
+      }
+    }
+    return "";
+  }
+
+  public override render(sharedInfo: RenderSharedInfo) {
+    if (!this.visible.value && this.width > 0 && this.height > 0) {
+      return h("div", {
+        style: {
+          width: this.width,
+          height: this.height,
+          // backgroundColor: "#0000ff99",
+        },
+      });
+    }
+    if (!sharedInfo.enableLatex) {
+      //作为普通文本
+      return super.render(sharedInfo);
+    }
+
+    const style = this.getDrawStyle(sharedInfo);
+    if (showFormulaLoading(this.token)) {
+      const { width, ...restStyle } = style;
+      return h(
+        JsvFlexDiv,
+        {
+          key: this.createKey,
+          onSized: this.onSizedCbk,
+        },
+        () =>
+          h(
+            JsvTextBox,
+            {
+              enableLatex: true,
+              style: { ...restStyle },
+              maxWidth: style.width,
+            },
+            () => getMathNodeLoadingText("block")
+          )
+      );
+    } else {
+      // 处理文字：\( \)、\[ \] 外且长度超过 4 的普通文字用 \breakEverywhere{true}\text{原文字}\breakEverywhere{false} 包裹
+      const latexStr = wrapLongPlainTextOutsideMath(
+        processLatexStr(
+          this.renderText.value.replaceAll("\\textb{", "\\textbf{")
+        )!
+      );
+      let fixedWidth: number | undefined = undefined;
+      let fixedHeight: number | undefined = undefined;
+      if (this.isDone) {
+        fixedWidth = this.width;
+        fixedHeight = this.height;
+      };
+      return h(
+        JsvFlexDiv,
+        {
+          key: this.createKey,
+          onSized: this.onSizedCbk,
+          style: {
+            width: fixedWidth,
+            height: fixedHeight,
+          },
+        },
+        () =>
+          h(JsvLatex, {
+            latexStr,
+            width: style.width,
+            fontSize: style.fontSize,
+            color: style.color,
+            lineSpace: 2,
+          })
+      );
+    }
+  }
+
+  public override getDrawStyleImpl(sharedInfo: RenderSharedInfo): Object {
+    return {
+      width: sharedInfo.totalWidth - this.depth * sharedInfo.tabWidth,
+      fontSize: sharedInfo.baseFontSize * DefaultFontStyle["p"].fontSize,
+      color: sharedInfo.textColor,
+    };
+  }
+}
+
+class HeadingNode extends DrawTextNode {
+  public override getDrawText(): string {
+    return `\\textb{${inlineTokensToLatex(
+      (this.token as Tokens.Heading).tokens
+    )}}`;
+  }
+
+  public override getDrawStyleImpl(sharedInfo: RenderSharedInfo): Object {
+    return {
+      width: sharedInfo.totalWidth - this.depth * sharedInfo.tabWidth,
+      fontSize:
+        sharedInfo.baseFontSize *
+        DefaultFontStyle[
+          ("h" +
+            (this.token as Tokens.Heading)
+              .depth) as keyof typeof DefaultFontStyle
+        ].fontSize,
+      color: sharedInfo.textColor,
+    };
+  }
+}
+
+class ParagraphNode extends DrawTextNode {
+  public override getDrawText(): string {
+    return inlineTokensToLatex((this.token as Tokens.Paragraph).tokens);
+  }
+
+  public override getDrawStyleImpl(sharedInfo: RenderSharedInfo): Object {
+    return {
+      width: sharedInfo.totalWidth - this.depth * sharedInfo.tabWidth,
+      fontSize: sharedInfo.baseFontSize * DefaultFontStyle["p"].fontSize,
+      color: sharedInfo.textColor,
+    };
+  }
+}
+
+class ListNode extends BlockNode {
+  public override render(sharedInfo: RenderSharedInfo) {
+    if (!this.visible.value && this.width > 0 && this.height > 0) {
+      return h("div", {
+        style: {
+          width: this.width,
+          height: this.height,
+          // backgroundColor: "#00ff0099",
+        },
+      });
+    }
+    const ordered = (this.token as Tokens.List).ordered;
+    //创建itemNodes，一个item一个行间距的占位符
+    const itemNodes = this.children.map((child, index) => {
+      let orderSample = "• ";
+      if (ordered) {
+        let start = 1;
+        try {
+          start = parseInt(String((this.token as Tokens.List).start));
+        } catch (error) {}
+        orderSample = index + start + ". ";
+      }
+      return h(
+        JsvFlexDiv,
+        {
+          key: this.createKey,
+          style: {
+            width: sharedInfo.totalWidth,
+            flexDirection: "row",
+            alignItems: "flex-start",
+          },
+        },
+        () => [
+          h(
+            "div",
+            {
+              style: {
+                width: sharedInfo.tabWidth,
+                textAlign: "right",
+                fontSize:
+                  sharedInfo.baseFontSize * DefaultFontStyle["p"].fontSize,
+              },
+            },
+            orderSample
+          ),
+          child.render(sharedInfo),
+        ]
+      );
+    });
+
+    return h(
+      JsvFlexDiv,
+      {
+        key: this.createKey,
+        style: {
+          width: sharedInfo.totalWidth,
+          flexDirection: "column",
+          alignItems: "flex-start",
+        },
+        onSized: this.onSizedCbk,
+      },
+      () => itemNodes
+    );
+  }
+}
+
+class ListItemNode extends BlockNode {
+  public override render(sharedInfo: RenderSharedInfo): VNode {
+    //flexDiv bug，如果子节点为空，会影响整体的布局
+    if (this.children.length == 0) {
+      return h("div", {
+        style: {
+          width: 0,
+          height: 1,
+          // backgroundColor: "#0000ff99",
+        },
+      });
+    }
+    if (!this.visible.value && this.width > 0 && this.height > 0) {
+      return h("div", {
+        style: {
+          width: this.width,
+          height: this.height,
+          // backgroundColor: "#0000ff99",
+        },
+      });
+    }
+    return h(
+      JsvFlexDiv,
+      {
+        key: this.createKey,
+        style: {
+          width: sharedInfo.totalWidth,
+          flexDirection: "column",
+          alignItems: "flex-start",
+        },
+        onSized: this.onSized.bind(this),
+      },
+      () => this.getChildNodes(sharedInfo)
+    );
+  }
+}
+
+class TextNode extends DrawTextNode {
+  private cachedDrawText: string | undefined = undefined;
+  public override getDrawText(): string {
+    if ((this.token as Tokens.Text).tokens) {
+      this.cachedDrawText = inlineTokensToLatex(
+        (this.token as Tokens.Text).tokens
+      );
+    } else {
+      this.cachedDrawText = this.token.raw;
+    }
+    return this.cachedDrawText;
+  }
+
+  public override getDrawStyleImpl(sharedInfo: RenderSharedInfo): Object {
+    return {
+      width: sharedInfo.totalWidth - this.depth * sharedInfo.tabWidth,
+      fontSize: sharedInfo.baseFontSize * DefaultFontStyle["p"].fontSize,
+      color: sharedInfo.textColor,
+    };
+  }
+}
+
+class HrNode extends BlockNode {
+  constructor(token: Token, d: number, key: number) {
+    super(token, d, key);
+    this.height = 8;
+  }
+  public render(sharedInfo: RenderSharedInfo) {
+    this.width = sharedInfo.totalWidth;
+
+    return h(
+      "div",
+      {
+        style: {
+          width: sharedInfo.totalWidth,
+          height: this.height,
+        },
+      },
+      h("div", {
+        style: {
+          top: Math.round((this.height - 2) / 2),
+          width: sharedInfo.totalWidth,
+          height: 2,
+          backgroundColor: "#999999",
+        },
+      })
+    );
+  }
+}
+
+// class InlineMathNode extends BlockNode {
+//   constructor(token: Token, d: number, key: number) {
+//     super(token, d, key);
+//   }
+
+//   public render(sharedInfo: RenderSharedInfo) {
+//     console.log("InlineMathNode render", this.token.raw);
+//     return h(JsvLatex, {
+//       latexStr: this.token.raw,
+//       width: 1920, //保证单行描画，给足宽度
+//       fontSize: sharedInfo.baseFontSize * DefaultFontStyle["p"].fontSize,
+//       color: "#000000",
+//     });
+//   }
+// }
+
+class RawNode extends DrawTextNode {
+  public override getDrawText(): string {
+    return this.token.raw;
+  }
+
+  public override getDrawStyleImpl(sharedInfo: RenderSharedInfo): Object {
+    return {
+      width: sharedInfo.totalWidth - this.depth * sharedInfo.tabWidth,
+      fontSize: sharedInfo.baseFontSize * DefaultFontStyle["p"].fontSize,
+      color: sharedInfo.textColor,
+    };
+  }
+}
+
+class SpaceNode extends DrawTextNode {
+  public override getDrawText(): string {
+    return " ";
+  }
+
+  public override getDrawStyleImpl(sharedInfo: RenderSharedInfo): Object {
+    return {
+      width: sharedInfo.totalWidth - this.depth * sharedInfo.tabWidth,
+      fontSize: sharedInfo.baseFontSize * DefaultFontStyle["p"].fontSize,
+      color: sharedInfo.textColor,
+    };
+  }
+}
+
+function getBlockNode(token: Token, depth: number, key: number): BlockNode {
+  switch (token.type) {
+    case "heading":
+      return new HeadingNode(token, depth, key);
+    case "paragraph":
+      return new ParagraphNode(token, depth, key);
+    case "list":
+      return new ListNode(token, depth, key);
+    case "list_item":
+      return new ListItemNode(token, depth, key);
+    case "text":
+      return new TextNode(token, depth, key);
+    case "hr":
+      return new HrNode(token, depth, key);
+    case "space":
+      return new SpaceNode(token, depth, key);
+    case "blockquote":
+      return new RawNode(token, depth, key);
+    case "code":
+      return new RawNode(token, depth, key);
+    case "table":
+      return new RawNode(token, depth, key);
+    case "html":
+      return new RawNode(token, depth, key);
+    case "def":
+      return new RawNode(token, depth, key);
+    // case "inlineMath":
+    //   return new InlineMathNode(token, depth, key);
+    case "blockMath":
+      return new BlockMathNode(token, depth, key);
+    default:
+      return new RawNode(token, depth, key);
+  }
+}
+
+function getRangeByChildren(children: BlockNode[]): [number, number] {
+  let startIndex = Infinity;
+  let endIndex = -Infinity;
+  children.forEach((child) => {
+    if (child.startIndex < startIndex) {
+      startIndex = child.startIndex;
+    }
+    if (child.endIndex > endIndex) {
+      endIndex = child.endIndex;
+    }
+  });
+  return [startIndex, endIndex];
+}
+
+function getRenderTree(
+  raw: string,
+  tokens: Token[],
+  searchStartIndex: number,
+  depth: number,
+  keyGen: () => number
+): BlockNode[] {
+  let innerDepth = depth;
+  const result: BlockNode[] = [];
+  for (const token of tokens) {
+    let node = getBlockNode(token, innerDepth, keyGen());
+    if (token.type == "list") {
+      if ((token as any).items) {
+        innerDepth++;
+        for (const item of (token as any).items) {
+          const itemNode = getBlockNode(item, innerDepth, keyGen());
+          if (item.tokens) {
+            const children =
+              getRenderTree(
+                raw,
+                item.tokens!,
+                searchStartIndex,
+                innerDepth,
+                keyGen
+              ) || [];
+            children.forEach((child) => {
+              itemNode.addChild(child);
+            });
+            const [startIndex, endIndex] = getRangeByChildren(children);
+            itemNode.startIndex = startIndex;
+            itemNode.endIndex = endIndex;
+          }
+          node.addChild(itemNode);
+        }
+        const [startIndex, endIndex] = getRangeByChildren(node.children);
+        node.startIndex = startIndex;
+        node.endIndex = endIndex;
+        innerDepth--;
+      } else {
+        console.warn("list has no items", token);
+      }
+    } else {
+      //叶节点，获取开始和结束索引
+      const startIndex = raw.indexOf(token.raw, searchStartIndex);
+      if (startIndex < 0) {
+        console.warn("token not found in content", token.raw, searchStartIndex);
+      }
+      node.startIndex = startIndex;
+      node.endIndex = startIndex + token.raw.length;
+      searchStartIndex = node.endIndex;
+    }
+    result.push(node);
+  }
+  return result;
+}
+
+function mergeNode(oldNode: BlockNode, newNode: BlockNode) {
+  if (oldNode.token.type != newNode.token.type) {
+    return false;
+  }
+  if (oldNode.token.raw == newNode.token.raw) {
+    return true;
+  }
+  // const type = newNode.token.type;
+  // if (type !== "list" && type !== "list_item" && type !== "root") {
+  //   //叶节点直接更新
+  //   oldNode.merge(newNode);
+  //   return true;
+  // }
+  if (newNode.children.length == 0 && oldNode.children.length == 0) {
+    oldNode.merge(newNode);
+    return true;
+  }
+
+  if (newNode.children.length < oldNode.children.length) {
+    const needRemoveChildren = oldNode.children.slice(newNode.children.length);
+    needRemoveChildren.forEach((child) => {
+      oldNode.removeChild(child);
+    });
+  }
+
+  let lastSameItemIndex = -1;
+  for (let i = 0; i < oldNode.children.length; ++i) {
+    let oldChild = oldNode.children[i];
+    let newChild = newNode.children[i];
+    if (
+      newChild &&
+      oldChild.token.type == newChild.token.type &&
+      oldChild.token.raw == newChild.token.raw
+    ) {
+      lastSameItemIndex = i;
+    } else {
+      break;
+    }
+  }
+  const changeFrom = lastSameItemIndex + 1;
+  const changedChildren = oldNode.children.slice(changeFrom);
+  const newChangedChildren = newNode.children.slice(changeFrom);
+  newChangedChildren.forEach((child, index) => {
+    if (index < changedChildren.length) {
+      const merged = mergeNode(changedChildren[index], child);
+      if (!merged) {
+        oldNode.removeChild(changedChildren[index]);
+        oldNode.insertChild(child, index + changeFrom);
+      }
+    } else {
+      //new item
+      oldNode.addChild(child);
+    }
+  });
+  oldNode.merge(newNode);
+  return true;
+}
+
+
+//整体替换的函数
+export const normalizeLatexDelimiters = (text: string | null | undefined) => {
+  if (typeof text !== "string") {
+    return text;
+  }
+
+  // 先处理块公式，避免被行内公式规则误匹配。
+  const blockNormalized = text.replace(/\$\$([\s\S]+?)\$\$/g, (_, expr) => {
+    return `\\[${expr}\\]`;
+  });
+
+  // 匹配未转义的 $...$（不含换行），并保留前导字符。
+  return blockNormalized.replace(/(^|[^\\$])\$([^\n$]+?)\$/g, (_, prefix, expr) => {
+    return `${prefix}\\(${expr}\\)`;
+  });
+};
+
+const pattern = /\\([a-zA-Z]+)/;
+
+export function getMarkdownWriter() {
+  let text = "";
+  let root: BlockNode | undefined = undefined;
+  let oldTokens: Token[] | undefined = undefined;
+  let key = 0;
+
+  const maxCacheLength = 10;
+  let cacheText = "";
+  let pendingStartDelimiter: "$" | "$$" | "" = "";
+  let activeLatexDelimiter: "$" | "$$" | "" = "";
+  let hasPendingBlockCloseDollar = false;
+  let backslashCount = 0;
+
+  const isLatexContent = (text: string) => {
+    return pattern.test(text);
+  };
+
+  const updateBackslashCount = (char: string) => {
+    if (char === "\\") {
+      backslashCount += 1;
+    } else {
+      backslashCount = 0;
+    }
+  };
+
+  const preprocessChunk = (chunk: string, finalize = false) => {
+    let chunkText = "";
+
+    for (let i = 0; i < chunk.length; ++i) {
+      let char = chunk[i];
+      let isEscapedDollar = char === "$" && backslashCount % 2 === 1;
+
+      if (activeLatexDelimiter === "$$" && hasPendingBlockCloseDollar) {
+        if (char === "$" && !isEscapedDollar) {
+          chunkText += "\\]";
+          activeLatexDelimiter = "";
+          hasPendingBlockCloseDollar = false;
+          backslashCount = 0;
+          continue;
+        }
+        chunkText += "$";
+        hasPendingBlockCloseDollar = false;
+      }
+
+      if (activeLatexDelimiter) {
+        if (char === "$" && !isEscapedDollar) {
+          if (activeLatexDelimiter === "$$") {
+            hasPendingBlockCloseDollar = true;
+            backslashCount = 0;
+            continue;
+          }
+          chunkText += "\\)";
+          activeLatexDelimiter = "";
+          backslashCount = 0;
+          continue;
+        }
+        chunkText += char;
+        updateBackslashCount(char);
+        continue;
+      }
+
+      if (pendingStartDelimiter) {
+        if (
+          pendingStartDelimiter === "$" &&
+          cacheText.length === 0 &&
+          char === "$" &&
+          !isEscapedDollar
+        ) {
+          pendingStartDelimiter = "$$";
+          backslashCount = 0;
+          continue;
+        }
+
+        cacheText += char;
+        updateBackslashCount(char);
+
+        if (isLatexContent(cacheText)) {
+          chunkText += pendingStartDelimiter === "$$" ? "\\[" : "\\(";
+          chunkText += cacheText;
+          activeLatexDelimiter = pendingStartDelimiter;
+          pendingStartDelimiter = "";
+          cacheText = "";
+          continue;
+        }
+
+        if (cacheText.length >= maxCacheLength) {
+          chunkText += pendingStartDelimiter + cacheText;
+          pendingStartDelimiter = "";
+          cacheText = "";
+        }
+        continue;
+      }
+
+      if (char === "$" && !isEscapedDollar) {
+        if (chunk[i + 1] === "$") {
+          pendingStartDelimiter = "$$";
+          backslashCount = 0;
+          i += 1;
+          continue;
+        }
+        pendingStartDelimiter = "$";
+        backslashCount = 0;
+        continue;
+      }
+
+      chunkText += char;
+      updateBackslashCount(char);
+    }
+
+    if (finalize) {
+      if (activeLatexDelimiter === "$$" && hasPendingBlockCloseDollar) {
+        chunkText += "$";
+        hasPendingBlockCloseDollar = false;
+      }
+
+      if (pendingStartDelimiter) {
+        chunkText += pendingStartDelimiter + cacheText;
+        pendingStartDelimiter = "";
+        cacheText = "";
+      }
+    }
+
+    return chunkText;
+  };
+
+  const keyGen = () => {
+    return key++;
+  };
+
+  const parseAndSyncRoot = (appendText: string) => {
+    // console.log(`parseAndSyncRoot appendText: ${appendText} root: ${root}`);
+    if (!appendText && root) {
+      return root;
+    }
+
+    text += appendText;
+    let newTokens: Token[] | undefined = undefined;
+    const tokens = marked.lexer(text);
+    let rootChangeFrom = -1;
+    if (oldTokens) {
+      if (oldTokens.length > tokens.length) {
+        rootChangeFrom = tokens.length - 1;
+        newTokens = [tokens[tokens.length - 1]];
+      } else {
+        rootChangeFrom = oldTokens.length - 1;
+        newTokens = tokens.slice(rootChangeFrom);
+      }
+    } else {
+      newTokens = tokens;
+    }
+
+    oldTokens = tokens;
+    if (!newTokens) {
+      return;
+    }
+    const newNodes = getRenderTree(
+      text,
+      newTokens,
+      root && root.children[rootChangeFrom - 1]
+        ? root.children[rootChangeFrom - 1].endIndex
+        : 0,
+      0,
+      keyGen
+    );
+    // (window as any).newNodes = newNodes;
+    if (!root) {
+      let rootNode = new RootNode(
+        {
+          raw: text,
+          type: "root",
+          tokens: newTokens,
+        },
+        0,
+        keyGen()
+      );
+      newNodes.forEach((node) => {
+        rootNode.addChild(node);
+      });
+      root = rootNode;
+    } else {
+      if (rootChangeFrom >= 0) {
+        //已经完成的node
+        for (let i = 0; i < rootChangeFrom; ++i) {
+          root.children[i].done();
+        }
+        const needRemove = root.children.splice(
+          rootChangeFrom + newNodes.length
+        );
+        needRemove.forEach((child) => {
+          root!.removeChild(child);
+        });
+        for (let i = 0; i < newNodes.length; ++i) {
+          if (i + rootChangeFrom < root.children.length) {
+            const merged = mergeNode(
+              root.children[i + rootChangeFrom],
+              newNodes[i]
+            );
+            if (!merged) {
+              root.removeChild(root.children[i + rootChangeFrom]);
+              root.insertChild(newNodes[i], i + rootChangeFrom);
+            }
+          } else {
+            root.addChild(newNodes[i]);
+          }
+        }
+      } else {
+        console.warn("update root but rootChangeFrom < 0");
+      }
+    }
+    return root;
+  };
+
+  const writer = ((chunk: string) => {
+    const appendText = preprocessChunk(chunk, false);
+    return parseAndSyncRoot(appendText);
+  }) as ((chunk: string) => BlockNode | undefined) & { flush: () => BlockNode | undefined };
+
+  writer.flush = () => {
+    const appendText = preprocessChunk("", true);
+    return parseAndSyncRoot(appendText);
+  };
+
+  // writer.testPreprcess = (chunk: string, finalize) => {
+  //   return preprocessChunk(chunk, finalize);
+  // }
+
+  return writer;
+}