@shijiu/jsview-vue 2.3.151-test.0 → 2.3.728-alpha.0

package/utils/JsViewVueWidget/JsvDomRenderer/htmlToVNodes.ts

@@ -0,0 +1,748 @@
+import { h, isVNode, type Component, type VNodeChild } from "vue";
+import { JsvLatex, processLatexStr } from "../../JsViewPlugin/JsvLatex";
+import { JsvFlexDiv } from "../JsvFlexCell";
+
+export type DomJsonNode = DomJsonElement | DomJsonText;
+
+export interface DomJsonElement {
+  type: "element";
+  tag: string;
+  attrs: Record<string, string>;
+  children: DomJsonNode[];
+}
+
+export interface DomJsonText {
+  type: "text";
+  content: string;
+}
+
+export interface TagHookContext {
+  // 当前节点的标签名（已转为小写）
+  tag: string;
+  // 当前节点原始属性（来自 HTML）
+  attrs: Record<string, string>;
+  // 当前节点子树提取出的纯文本（用于上标/下标等语义转换）
+  childrenText: string;
+  // 父节点标签名（已转为小写）
+  parentTag?: string;
+  // 在父节点 children 中的位置（从 0 开始）
+  indexInParent?: number;
+}
+
+export interface TagHookResult {
+  // 替换标签名（如把 span 替换成 div）
+  tag?: string;
+  // 直接替换为组件（如 JsvFlexDiv）
+  component?: Component;
+  // 直接覆盖/补充渲染 props（如给组件传 style 对象）
+  props?: Record<string, unknown>;
+  // 是否在 children 前插入项目符号（内部布局标记，不下发为属性）
+  prependBullet?: boolean;
+  // 覆盖当前节点属性
+  attrs?: Record<string, string>;
+  // 为 true 时直接丢弃该节点
+  drop?: boolean;
+  // 返回文本节点内容（如把 br 转成 "\n"）
+  text?: string;
+  // 给替换后的标签设置文本子内容（如 div + "\n"）
+  childrenText?: string;
+}
+
+export interface StyleHookContext {
+  // 当前 style 属性名（单条）
+  property: string;
+  // 当前 style 属性值（单条）
+  value: string;
+  // 该 style 所属的标签名
+  tag: string;
+  // 该标签的原始属性
+  attrs: Record<string, string>;
+}
+
+export interface StyleHookResult {
+  // 替换 style 属性名
+  property?: string;
+  // 替换 style 属性值
+  value?: string;
+  // 为 true 时删除这条 style
+  drop?: boolean;
+}
+
+export interface TextHookContext {
+  text: string;
+  key?: string;
+}
+
+export interface HtmlToVNodesOptions {
+  // 标签级别 hook：可改标签、改属性、删节点或改成文本节点
+  onTag?: (ctx: TagHookContext) => TagHookResult | string | void;
+  // 样式级别 hook：逐条处理 style
+  onStyle?: (ctx: StyleHookContext) => StyleHookResult | void;
+  // 文本级别 hook：可把文本改写成任意 VNodeChild（如 JsvLatex）
+  onText?: (ctx: TextHookContext) => VNodeChild | void;
+  // 文本转 JsvLatex 的渲染参数
+  latex?: {
+    enabled?: boolean;
+    width?: number;
+    fontSize?: number;
+    lineSpace?: number;
+    color?: string;
+    instantLoad?: boolean;
+  };
+}
+
+function parseStyleText(styleText: string): Array<{ property: string; value: string }> {
+  return styleText
+    .split(";")
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .map((part) => {
+      const idx = part.indexOf(":");
+      if (idx < 0) {
+        return null;
+      }
+      const property = part.slice(0, idx).trim();
+      const value = part.slice(idx + 1).trim();
+      if (!property) {
+        return null;
+      }
+      return { property, value };
+    })
+    .filter((item): item is { property: string; value: string } => item !== null);
+}
+
+function serializeStyle(styleEntries: Array<{ property: string; value: string }>): string {
+  return styleEntries.map((entry) => `${entry.property}: ${entry.value}`).join("; ");
+}
+
+function applyTagHook(
+  tag: string,
+  attrs: Record<string, string>,
+  childrenText: string,
+  parentTag: string | undefined,
+  indexInParent: number | undefined,
+  options?: HtmlToVNodesOptions
+): {
+  tag: string;
+  component?: Component;
+  props?: Record<string, unknown>;
+  prependBullet?: boolean;
+  attrs: Record<string, string>;
+  drop: boolean;
+  text?: string;
+  childrenText?: string;
+} {
+  const lowerTag = tag.toLowerCase();
+
+  if (!options?.onTag) {
+    return { tag: lowerTag, attrs, drop: false };
+  }
+
+  const result = options.onTag({
+    tag: lowerTag,
+    attrs: { ...attrs },
+    childrenText,
+    parentTag,
+    indexInParent,
+  });
+  if (!result) {
+    return { tag: lowerTag, attrs, drop: false };
+  }
+  if (typeof result === "string") {
+    return { tag: result.toLowerCase(), attrs, drop: false };
+  }
+  if (result.drop) {
+    return { tag: lowerTag, attrs, drop: true };
+  }
+  if (result.text !== undefined) {
+    return { tag: lowerTag, attrs, drop: false, text: result.text };
+  }
+  return {
+    tag: (result.tag ?? lowerTag).toLowerCase(),
+    component: result.component,
+    props: result.props,
+    prependBullet: result.prependBullet,
+    attrs: result.attrs ?? attrs,
+    drop: false,
+    childrenText: result.childrenText,
+  };
+}
+
+function applyStyleHook(
+  tag: string,
+  attrs: Record<string, string>,
+  options?: HtmlToVNodesOptions
+): Record<string, string> {
+  const styleText = attrs.style;
+  if (!styleText) {
+    return attrs;
+  }
+
+  const entries = parseStyleText(styleText);
+  const nextEntries: Array<{ property: string; value: string }> = [];
+
+  for (const entry of entries) {
+    if (!options?.onStyle) {
+      nextEntries.push(entry);
+      continue;
+    }
+
+    const result = options.onStyle({
+      property: entry.property,
+      value: entry.value,
+      tag,
+      attrs: { ...attrs },
+    });
+
+    if (!result) {
+      nextEntries.push(entry);
+      continue;
+    }
+    if (result.drop) {
+      continue;
+    }
+    nextEntries.push({
+      property: result.property ?? entry.property,
+      value: result.value ?? entry.value,
+    });
+  }
+
+  const nextAttrs = { ...attrs };
+  if (nextEntries.length === 0) {
+    delete nextAttrs.style;
+  } else {
+    nextAttrs.style = serializeStyle(nextEntries);
+  }
+  return nextAttrs;
+}
+
+function applyTextHook(text: string, key?: string, options?: HtmlToVNodesOptions): VNodeChild {
+  if (!options?.onText) {
+    return text;
+  }
+
+  const result = options.onText({ text, key });
+  if (result === undefined) {
+    return text;
+  }
+  return result;
+}
+
+function domNodeToJson(node: Node): DomJsonNode | null {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const content = node.textContent ?? "";
+    if (content.trim() === "") {
+      return null;
+    }
+    return {
+      type: "text",
+      content,
+    };
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return null;
+  }
+
+  const element = node as Element;
+  const attrs: Record<string, string> = {};
+
+  for (const attr of Array.from(element.attributes)) {
+    attrs[attr.name] = attr.value;
+  }
+
+  const children = Array.from(element.childNodes)
+    .map((child) => domNodeToJson(child))
+    .filter((item): item is DomJsonNode => item !== null);
+
+  return {
+    type: "element",
+    tag: element.tagName.toLowerCase(),
+    attrs,
+    children,
+  };
+}
+
+function normalizeAttrs(attrs: Record<string, string>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  for (const [name, value] of Object.entries(attrs)) {
+    if (name.toLowerCase() === "class") {
+      result.class = value;
+      continue;
+    }
+    if (name.toLowerCase() === "style") {
+      result.style = value;
+      continue;
+    }
+    result[name] = value;
+  }
+
+  return result;
+}
+
+function decodeHtmlEntities(text: string): string {
+  return text
+    .replace(/&nbsp;/g, " ")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)));
+}
+
+function parseAttributes(raw: string): Record<string, string> {
+  const attrs: Record<string, string> = {};
+  const attrRegex =
+    /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+  let match: RegExpExecArray | null = null;
+
+  while ((match = attrRegex.exec(raw)) !== null) {
+    const name = match[1];
+    const value = match[2] ?? match[3] ?? match[4] ?? "";
+    attrs[name] = decodeHtmlEntities(value);
+  }
+
+  return attrs;
+}
+
+function findTagEnd(html: string, start: number): number {
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+
+  for (let i = start; i < html.length; i++) {
+    const ch = html[i];
+    if (ch === "'" && !inDoubleQuote) {
+      inSingleQuote = !inSingleQuote;
+      continue;
+    }
+    if (ch === '"' && !inSingleQuote) {
+      inDoubleQuote = !inDoubleQuote;
+      continue;
+    }
+    if (ch === ">" && !inSingleQuote && !inDoubleQuote) {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+function parseHtmlWithSimpleParser(html: string): DomJsonNode[] {
+  const root: DomJsonElement = {
+    type: "element",
+    tag: "__root__",
+    attrs: {},
+    children: [],
+  };
+  const stack: DomJsonElement[] = [root];
+  const voidTags = new Set([
+    "br",
+    "img",
+    "hr",
+    "input",
+    "meta",
+    "link",
+    "source",
+    "track",
+    "wbr",
+  ]);
+
+  let i = 0;
+  while (i < html.length) {
+    if (html.startsWith("<!--", i)) {
+      const commentEnd = html.indexOf("-->", i + 4);
+      i = commentEnd >= 0 ? commentEnd + 3 : html.length;
+      continue;
+    }
+
+    if (html[i] === "<") {
+      const tagEnd = findTagEnd(html, i + 1);
+      if (tagEnd < 0) {
+        break;
+      }
+
+      const rawTag = html.slice(i + 1, tagEnd).trim();
+      i = tagEnd + 1;
+      if (!rawTag) {
+        continue;
+      }
+
+      if (rawTag.startsWith("/")) {
+        const closeTag = rawTag.slice(1).trim().toLowerCase();
+        while (stack.length > 1) {
+          const top = stack.pop();
+          if (top?.tag === closeTag) {
+            break;
+          }
+        }
+        continue;
+      }
+
+      const selfClosing = rawTag.endsWith("/");
+      const tagBody = selfClosing ? rawTag.slice(0, -1).trim() : rawTag;
+      const firstSpaceIdx = tagBody.search(/\s/);
+      const tagName =
+        (firstSpaceIdx >= 0 ? tagBody.slice(0, firstSpaceIdx) : tagBody).toLowerCase();
+      const attrText = firstSpaceIdx >= 0 ? tagBody.slice(firstSpaceIdx + 1) : "";
+
+      if (!tagName) {
+        continue;
+      }
+
+      const elementNode: DomJsonElement = {
+        type: "element",
+        tag: tagName,
+        attrs: parseAttributes(attrText),
+        children: [],
+      };
+      stack[stack.length - 1].children.push(elementNode);
+
+      if (!selfClosing && !voidTags.has(tagName)) {
+        stack.push(elementNode);
+      }
+      continue;
+    }
+
+    const nextTag = html.indexOf("<", i);
+    const textEnd = nextTag < 0 ? html.length : nextTag;
+    const rawText = html.slice(i, textEnd);
+    i = textEnd;
+
+    const decoded = decodeHtmlEntities(rawText);
+    if (decoded.trim() === "") {
+      continue;
+    }
+
+    stack[stack.length - 1].children.push({
+      type: "text",
+      content: decoded,
+    });
+  }
+
+  return root.children;
+}
+
+function htmlToDomJson(html: string): DomJsonNode[] {
+  // 固定使用轻量解析器，避免 JsView 环境下 DOMParser 兼容性问题
+  return parseHtmlWithSimpleParser(html);
+}
+
+function mergeAdjacentTextVNodes(nodes: VNodeChild[], options?: HtmlToVNodesOptions): VNodeChild[] {
+  const merged: VNodeChild[] = [];
+
+  for (const node of nodes) {
+    const prev = merged[merged.length - 1];
+    if (typeof node === "string" && typeof prev === "string") {
+      merged[merged.length - 1] = prev + node;
+      continue;
+    }
+    merged.push(node);
+  }
+
+  const latexOptions = options?.latex ?? {};
+  const renderAsLatex = latexOptions.enabled ?? true;
+  let latexKey = 0;
+  return merged.map((node) => {
+    if (typeof node !== "string") {
+      return node;
+    }
+
+    const latexStr = processLatexStr(node) ?? node;
+    const key = `latex-${latexKey++}`;
+    if (renderAsLatex) {
+      const width = latexOptions.width ?? 1000;
+      const fontSize = latexOptions.fontSize ?? 16;
+      const lineSpace = latexOptions.lineSpace ?? 2;
+      const color = latexOptions.color ?? "#000000";
+      const forceRefreshKey = `${key}-${width}-${fontSize}-${lineSpace}-${color}`;
+      return h(JsvLatex, {
+        key: forceRefreshKey,
+        latexStr,
+        width,
+        fontSize,
+        lineSpace,
+        color,
+        instantLoad: latexOptions.instantLoad,
+      });
+    }
+    return h(
+      "div",
+      {
+        key,
+        style: {
+          width: latexOptions.width ?? 1000,
+          fontSize: latexOptions.fontSize ?? 16,
+          color: latexOptions.color ?? "#000000",
+        },
+      },
+      node
+    );
+  });
+}
+
+function filterOutBrNodes(nodes: VNodeChild[]): VNodeChild[] {
+  return nodes.filter((node) => !(isVNode(node) && node.type === "br"));
+}
+
+function renderNodeWithChildren(
+  renderTarget: any,
+  props: Record<string, unknown>,
+  children: VNodeChild | VNodeChild[] | undefined
+): VNodeChild {
+  if (renderTarget === JsvFlexDiv) {
+    return h(renderTarget, props, {
+      default: () => children as any,
+    });
+  }
+  return h(renderTarget, props, children as any);
+}
+
+function hasFloatRightStyle(node: VNodeChild): boolean {
+  if (!isVNode(node) || !node.props) {
+    return false;
+  }
+  const style = (node.props as Record<string, unknown>).style;
+  if (typeof style === "string") {
+    return /(?:^|;)\s*float\s*:\s*right\s*(?:;|$)/i.test(style);
+  }
+  if (style && typeof style === "object") {
+    const styleObj = style as Record<string, unknown>;
+    const floatValue = styleObj.float ?? styleObj.FLOAT;
+    return typeof floatValue === "string" && floatValue.trim().toLowerCase() === "right";
+  }
+  return false;
+}
+
+function pickLayoutWidthFromVNode(node: VNodeChild): number | undefined {
+  if (!isVNode(node) || !node.props) {
+    return undefined;
+  }
+  const width = (node.props as Record<string, unknown>).width;
+  if (typeof width === "number" && Number.isFinite(width)) {
+    return width;
+  }
+  return undefined;
+}
+
+function mergeImageSizeStyle(
+  baseStyle: unknown,
+  imageWidth: number,
+  imageHeight: number
+): Record<string, unknown> {
+  const styleObj =
+    baseStyle && typeof baseStyle === "object" ? (baseStyle as Record<string, unknown>) : {};
+  return {
+    ...styleObj,
+    width: imageWidth,
+    height: imageHeight,
+  };
+}
+
+function pickLatexFontSize(node: VNodeChild): number {
+  if (!isVNode(node) || !node.props) {
+    return 16;
+  }
+  const fontSize = (node.props as Record<string, unknown>).fontSize;
+  if (typeof fontSize === "number" && Number.isFinite(fontSize)) {
+    return fontSize;
+  }
+  return 16;
+}
+
+function wrapFloatRightImageWithNextLatex(nodes: VNodeChild[]): VNodeChild[] {
+  const result: VNodeChild[] = [];
+
+  for (let i = 0; i < nodes.length; i++) {
+    const current = nodes[i];
+    const canStartWrap =
+      isVNode(current) && current.type === "img" && hasFloatRightStyle(current);
+
+    if (!canStartWrap) {
+      result.push(current);
+      continue;
+    }
+
+    const componentWidth = pickLayoutWidthFromVNode(current) ?? 1000;
+    const imageSize = componentWidth / 6;
+    const latexGroup: VNodeChild[] = [];
+    let j = i + 1;
+    while (j < nodes.length) {
+      const candidate = nodes[j];
+      if (!(isVNode(candidate) && candidate.type === JsvLatex)) {
+        break;
+      }
+      const fontSize = pickLatexFontSize(candidate);
+      if ((latexGroup.length + 1) * fontSize > imageSize) {
+        break;
+      }
+      latexGroup.push(candidate);
+      j++;
+    }
+
+    if (latexGroup.length === 0) {
+      result.push(current);
+      continue;
+    }
+
+    const resolvedComponentWidth = pickLayoutWidthFromVNode(latexGroup[0]) ?? componentWidth;
+    const resolvedImageSize = resolvedComponentWidth / 6;
+    const latexColumnWidth = (resolvedComponentWidth * 5) / 6;
+    const currentProps = (isVNode(current) ? (current.props as Record<string, unknown> | null) : null) ?? {};
+    const resizedImageVNode = h("img", {
+      ...currentProps,
+      style: mergeImageSizeStyle(currentProps.style, resolvedImageSize, resolvedImageSize),
+    });
+
+    result.push(
+      h(
+        JsvFlexDiv,
+        {
+          key: `float-right-row-${i}`,
+          style: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+          },
+        },
+        {
+          default: () => [
+            h(
+              JsvFlexDiv,
+              {
+                key: `float-right-col-${i}`,
+                style: {
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  width: latexColumnWidth,
+                },
+              },
+              {
+                default: () => latexGroup,
+              }
+            ),
+            resizedImageVNode,
+          ],
+        }
+      )
+    );
+    i = j - 1;
+  }
+
+  return result;
+}
+
+function domJsonToVNode(
+  node: DomJsonNode,
+  key?: string,
+  options?: HtmlToVNodesOptions,
+  parentTag?: string,
+  indexInParent?: number
+): VNodeChild | null {
+  if (node.type === "text") {
+    return applyTextHook(node.content, key, options);
+  }
+
+  const extractChildrenText = (children: DomJsonNode[]): string =>
+    children
+      .map((child) => {
+        if (child.type === "text") {
+          return child.content;
+        }
+        return extractChildrenText(child.children);
+      })
+      .join("");
+
+  const tagHandled = applyTagHook(
+    node.tag,
+    node.attrs,
+    extractChildrenText(node.children),
+    parentTag,
+    indexInParent,
+    options
+  );
+  if (tagHandled.drop) {
+    return null;
+  }
+  if (tagHandled.text !== undefined) {
+    return applyTextHook(tagHandled.text, key, options);
+  }
+  const attrsWithStyleHook = applyStyleHook(tagHandled.tag, tagHandled.attrs, options);
+  const props = normalizeAttrs(attrsWithStyleHook);
+  const finalProps: Record<string, unknown> = {
+    ...props,
+    ...(tagHandled.props ?? {}),
+  };
+  if (
+    typeof props.style === "object" &&
+    props.style !== null &&
+    typeof tagHandled.props?.style === "object" &&
+    tagHandled.props.style !== null
+  ) {
+    finalProps.style = {
+      ...(props.style as Record<string, unknown>),
+      ...(tagHandled.props.style as Record<string, unknown>),
+    };
+  }
+  const renderTarget = (tagHandled.component ?? tagHandled.tag) as any;
+  if (key) {
+    finalProps.key = key;
+  }
+  if (tagHandled.childrenText !== undefined) {
+    return renderNodeWithChildren(
+      renderTarget,
+      finalProps,
+      applyTextHook(tagHandled.childrenText, key, options) as any
+    );
+  }
+
+  const children = mergeAdjacentTextVNodes(
+    node.children
+      .map((child, idx) => domJsonToVNode(child, `${key ?? "node"}-${idx}`, options, node.tag, idx))
+      .filter((child): child is VNodeChild => child !== null),
+    options
+  );
+  const filteredChildren = filterOutBrNodes(children);
+  const bulletFontSize = options?.latex?.fontSize;
+  const finalChildren =
+    tagHandled.prependBullet
+      ? [
+          h(
+            "div",
+            {
+              key: `${key ?? "node"}-dot`,
+              ...(bulletFontSize !== undefined ? { style: { fontSize: bulletFontSize } } : {}),
+            },
+            "    ●"
+          ),
+          ...filteredChildren,
+        ]
+      : filteredChildren;
+
+  return renderNodeWithChildren(
+    renderTarget,
+    finalProps,
+    finalChildren.length > 0 ? finalChildren : undefined
+  );
+}
+
+export function htmlToVNodes(html: string, options?: HtmlToVNodesOptions): VNodeChild[] {
+  // 1) 先把原始 html 文本解析成轻量 JSON 结构树。
+  const jsonTree = htmlToDomJson(html);
+  console.log("[htmlToVNodes][jsonTree]", jsonTree);
+  // const vnodeTree = jsonTree.map((node, idx) => domJsonToVNode(node, `root-${idx}`, options));
+  // 2) 把 JSON 节点递归转换为 VNode，并在该阶段合并相邻文本节点。
+  const mergedVnodeTree = mergeAdjacentTextVNodes(
+    jsonTree
+      .map((node, idx) => domJsonToVNode(node, `root-${idx}`, options, undefined, idx))
+      .filter((node): node is VNodeChild => node !== null),
+    options
+  );
+  // 3) 过滤掉 br 节点（当前策略是直接移除而不是渲染换行节点）。
+  const filteredVnodeTree = filterOutBrNodes(mergedVnodeTree);
+  // 4) 对特殊布局做二次处理：把 float-right 图片与后续 Latex 节点按规则重新包裹。
+  const vnodeTree = wrapFloatRightImageWithNextLatex(filteredVnodeTree);
+  console.log("[htmlToVNodes][vnodeTree]", vnodeTree);
+  // 5) 返回最终可直接用于渲染的 VNode 列表。
+  return vnodeTree;
+}