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

package/utils/JsViewVueTools/JsvTextureStore/TextureBuilder.ts

@@ -0,0 +1,92 @@
+import { JsvTextureStoreApi } from "./JsvTextureStore";
+import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+
+/**
+ * CircleNinePatchTextureOptions
+ * 生成圆角九宫格纹理时的输入参数
+ *
+ * @property {number} targetCornerRadius 目标圆角半径
+ * @property {number} circleLineWidth 圆环描边宽度
+ * @property {string} [bgColor] 画布背景色，默认值: rgba(255,255,255,0)
+ * @property {string} [circleColor] 圆环描边颜色，默认值: #000000FF
+ * @property {number} [displayScale] 显示缩放比例，提高此值一提高清晰度, 
+ *                                   默认值: jsview.config.js的designMap.displayScale
+ */
+type CircleNinePatchTextureOptions = {
+  cornerRadius: number;
+  circleLineWidth: number;
+  bgColor?: string;
+  circleColor?: string;
+  displayScale?: number;
+};
+
+/**
+ * NinePatchTextureResult
+ * 圆角九宫格纹理构建结果
+ *
+ * @property {number} BorderOutset 九宫格外边距(像素)
+ * @property {number} ImageWidth 纹理图片宽度(像素)
+ * @property {number} CenterWidth 九宫格中心区域宽度(像素)
+ * @property {string} textureUrl 可用于背景图/图片src的纹理访问地址
+ */
+type NinePatchTextureResult = {
+  BorderOutset: number;
+  ImageWidth: number;
+  ImageDspWidth: number;
+  CenterWidth: number;
+  texAccessName: string;
+};
+
+/**
+ * buildCircleNinePatchTexture
+ * 生成用于 JsvNinePatch 的圆角九宫格纹理，
+ * 并返回可用于样式访问的texture URL与JsvNinePatch的参数
+ * 
+ * 特别注意!!: texAccessName 需要在不使用时使用 JsvTextureStoreApi.deleteTexture 释放资源
+ *
+ * @param {CircleNinePatchTextureOptions} options 生成圆角九宫格纹理的参数
+ * @return {NinePatchTextureResult}
+ */
+function buildCircleNinePatchTexture(
+  options: CircleNinePatchTextureOptions
+): NinePatchTextureResult {
+  const {
+    cornerRadius,
+    circleLineWidth,
+    bgColor = "rgba(255,255,255,0)", // 默认为透明白色底色
+    circleColor = "#000000FF", // 默认为黑色
+    displayScale = ForgeHandles.sRenderBridge.GetScreenInfo().scaleRatio,
+  } = options;
+  const innerRadius2 = Math.floor(cornerRadius * 2 * displayScale);
+  const innerLineWidth = Math.floor(circleLineWidth * displayScale);
+  const borderOutset = innerLineWidth + 4; // 外延4像素, 因为Canvas绘制外边缘有至少2px的过渡色以提升抗锯齿效果
+  const imageWidth = innerRadius2 + borderOutset * 2;
+  const centerWidth = 1;
+
+  const canvasRef = JsvTextureStoreApi.canvasTexture(imageWidth, imageWidth);
+  const circleRadius =
+    Math.floor(innerRadius2 / 2) + Math.floor(innerLineWidth / 2);
+  const circlePath = canvasRef.circlePath(
+    Math.floor(imageWidth / 2),
+    Math.floor(imageWidth / 2),
+    circleRadius
+  );
+
+  canvasRef.drawColor(bgColor);
+  circlePath?.stroke(innerLineWidth, circleColor);
+
+  const sourceId = String(canvasRef.commit());
+  return {
+    BorderOutset: borderOutset,
+    ImageWidth: imageWidth,
+    ImageDspWidth: Math.floor(imageWidth / displayScale),
+    CenterWidth: centerWidth,
+    texAccessName: sourceId,
+  };
+}
+
+const TextureBuilder = {
+  buildCircleNinePatchTexture,
+};
+
+export default TextureBuilder;

package/utils/JsViewVueTools/JsvTextureStore/index.js

@@ -0,0 +1,2 @@
+export * from "./JsvTextureStore";
+export { default as JsvTextureBuilder } from "./TextureBuilder";

package/utils/JsViewVueTools/index.js

@@ -20,7 +20,7 @@ export * from "./JsvTextTools";
 export * from "./JsvPreDownloader"
 export { default as DefaultKeyCodeMap } from "./DefaultKeyMap";
 export * from "./JsvPerformance"
-export * from "./JsvTextureStore/JsvTextureStore"
+export * from "./JsvTextureStore"
 export * from "./JsvTextureDefines"
 export * from "./JsvFederationTools"
 export * from "./ConstSymbol"
@@ -28,3 +28,5 @@ export * from "./ForgeConstDefine"
 export * from "./TextureManagerTools"
 export * from "./FeatureActive"
 export * from "./JsvTextureLoadTool"
+export * from "./JsvInteractionMode"
+export {default as BlobApi} from "./BlobApi"

package/utils/JsViewVueWidget/JsvApic/JsvApic2/JsvApic2.vue

@@ -14,6 +14,9 @@
  *      prop说明:
  *          src {string} 对应img标签的src, 传url时需要注意使用url([链接])
  *          style {object} 对应img标签的style
+ *          onStart 开始播放回调
+ *          onEnd 结束播放回调
+ *          onLoad 加载完成回调
  *      通过ref=拿到句柄后，可调用的方法:
  *          stop(): 停止播放
  *          show(): 显示某一帧
@@ -29,9 +32,10 @@
  *              播放结束后的状态: ApicEndState.HIDE 隐藏
  *                             ApicEndState.LAST_FRAME 保持最后一帧
 -->
-<script>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-// import { LoopType } from "../JsvCommonLoopToolBase";
+import { ApicEndState } from "../JsvCommonLoopToolBase";
 
 //为了打包后少加载一个文件这里单独定义
 const LoopType = {
@@ -42,99 +46,120 @@ const LoopType = {
   LOOP_SINGLE: 4,
 };
 
-export default {
-  props: {
-    src: String,
-    style: Object,
-    onStart: Function,
-    onEnd: Function,
-    onLoad: Function,
+const props = defineProps({
+  src: String,
+  style: Object,
+  onStart: {
+    type: Function,
   },
-  setup() {
-    return {
-      element: {},
-    };
+  onEnd: {
+    type: Function,
   },
-  data() {
-    return {
-      onStartId: -1,
-      onEndId: -1,
-    };
-  },
-  methods: {
-    show(frameIndex = 0) {
-      if (!isNaN(frameIndex)) {
-        this.play(LoopType.LOOP_SINGLE, [[0, frameIndex, 0]]);
-      }
-    },
-    play(loopType, loopInfo, endState) {
-      let params = {
-        LT: loopType,
-        ES: endState,
-      };
-      if (loopInfo instanceof Array) {
-        //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
-        params.LI = loopInfo;
-      } else if (!isNaN(loopInfo)) {
-        params.LI = [[loopInfo, 0, 0]];
-      } else {
-        params.LI = [[0, 0, 0]];
-      }
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
+  onLoad: Function,
+});
 
-        mainViewTexture.DispatchCommand(
-          Forge.NativeConstant.APIC_PLAY,
-          JSON.stringify(params)
-        );
-        mainViewTexture.unregisterOnStart(this.onStartId);
-        if (this.onStart) {
-          this.onStartId = mainViewTexture.registerOnStart(this.onStart);
-        }
-        mainViewTexture.unregisterOnEnd(this.onEndId);
-        if (this.onEnd) {
-          this.onEndId = mainViewTexture.registerOnEnd(this.onEnd);
-        }
-      }
-    },
-    stop(frameCount = -1) {
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
-      }
-    },
-  },
-  mounted() {
-    if (this.onLoad) {
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
-        mainViewTexture.RegisterLoadImageCallback(null, this.onLoad, null);
-      }
+const element = ref(null);
+const onStartId = ref(-1);
+const onEndId = ref(-1);
+
+const show = (frameIndex = 0) => {
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_SHOW_FRAME,
+      JSON.stringify({
+        index: frameIndex,
+      })
+    );
+  }
+};
+
+const play = (loopType, loopInfo, endState, onstart = null, onend = null) => {
+  let params = {
+    LT: loopType,
+    ES: endState,
+  };
+  if (loopInfo instanceof Array) {
+    //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
+    params.LI = loopInfo;
+  } else if (!isNaN(loopInfo)) {
+    params.LI = [[loopInfo, 0, 0]];
+  } else {
+    params.LI = [[0, 0, 0]];
+  }
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_PLAY,
+      JSON.stringify(params)
+    );
+    mainViewTexture.unregisterOnStart(onStartId.value);
+    onStartId.value = -1;
+    let onStart = onstart || props.onStart;
+    if (onStart) {
+      onStartId.value = mainViewTexture.registerOnStart(onStart);
     }
-  },
-  beforeUnmount() {
-    this.stop(0);
-    if (this.$refs.element) {
-      let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+    mainViewTexture.unregisterOnEnd(onEndId.value);
+    onEndId.value = -1;
+    let onEnd = onend || props.onEnd;
+    if (onEnd) {
+      onEndId.value = mainViewTexture.registerOnEnd(onEnd);
+    }
+  }
+};
+
+const stop = (frameCount = -1) => {
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_STOP,
+      `{"TF":${frameCount}}`
+    );
+  }
+};
+
+onMounted(() => {
+  if (props.onLoad) {
+    if (element.value) {
+      let mainViewTexture = element.value.jsvGetProxyTexture(
         ForgeHandles.TextureManager
       );
+      mainViewTexture.RegisterLoadImageCallback(null, props.onLoad, null);
+    }
+  }
+});
 
-      if (this.onStart) {
-        mainViewTexture.unregisterOnStart(this.onStartId);
-      }
+onBeforeUnmount(() => {
+  stop(0);
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
 
-      if (this.onEnd) {
-        mainViewTexture.unregisterOnEnd(this.onEndId);
-      }
+    if (onStartId.value >= 0) {
+      mainViewTexture.unregisterOnStart(onStartId.value);
     }
-  },
-};
+
+    if (onEndId.value >= 0) {
+      mainViewTexture.unregisterOnEnd(onEndId.value);
+    }
+  }
+});
+
+// 暴露方法给外部使用
+defineExpose({
+  show,
+  play,
+  stop,
+});
 </script>
 
 <template>

package/utils/JsViewVueWidget/JsvDomRenderer/JsViewHtmlToVNodesOptions.ts

@@ -0,0 +1,212 @@
+import { h } from "vue";
+import { JsvLatex, processLatexStr } from "../../JsViewPlugin/JsvLatex";
+import { JsvFlexDiv } from "../JsvFlexCell";
+import type {
+  HtmlToVNodesOptions,
+  TagHookContext,
+  StyleHookContext,
+  TextHookContext,
+} from "./htmlToVNodes";
+
+const FALLBACK_TAG = "div";
+function sanitizeTableAttrs(attrs: Record<string, string>): Record<string, string> {
+  const next = { ...attrs };
+  delete next.style;
+  delete next.width;
+  return next;
+}
+
+function parseNumericOrRaw(value?: string): number | string | undefined {
+  const raw = value?.trim();
+  if (!raw) return undefined;
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : raw;
+}
+
+function asVerticalFlexTag(extraStyle?: Record<string, unknown>) {
+  return {
+    component: JsvFlexDiv,
+    props: {
+      style: {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        ...(extraStyle ?? {}),
+      },
+    },
+  };
+}
+
+function asHorizontalFlexTag(withDot = false) {
+  return {
+    component: JsvFlexDiv,
+    prependBullet: withDot,
+    props: {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+      },
+    },
+  };
+}
+
+function tableTagHandler(
+  ctx: TagHookContext,
+  columnWidthRef: { values: Array<number | string | undefined> }
+) {
+  const tag = ctx.tag.toLowerCase();
+  if (tag === "table" || tag === "tbody" || tag === "thead" || tag === "tfoot") {
+    if (tag === "table") {
+      columnWidthRef.values = [];
+    }
+    return {
+      component: JsvFlexDiv,
+      attrs: sanitizeTableAttrs(ctx.attrs),
+      props: {
+        style: {
+          flexDirection: "column",
+          alignItems: "stretch",
+        },
+      },
+    };
+  }
+  if (tag === "tr") {
+    return {
+      component: JsvFlexDiv,
+      attrs: sanitizeTableAttrs(ctx.attrs),
+      props: {
+        style: {
+          flexDirection: "row",
+          alignItems: "flex-start",
+        },
+      },
+    };
+  }
+  if (tag === "td" || tag === "th") {
+    const colIndex = ctx.parentTag === "tr" ? ctx.indexInParent : undefined;
+    const ownWidth = parseNumericOrRaw(ctx.attrs.width);
+    if (colIndex !== undefined && ownWidth !== undefined) {
+      columnWidthRef.values[colIndex] = ownWidth;
+    }
+    const width =
+      ownWidth ??
+      (colIndex !== undefined ? columnWidthRef.values[colIndex] : undefined);
+    return {
+      component: JsvFlexDiv,
+      attrs: sanitizeTableAttrs(ctx.attrs),
+      props: {
+        style: {
+          ...(width !== undefined ? { width } : {}),
+          flexDirection: "column",
+          alignItems: "flex-start",
+        },
+      },
+    };
+  }
+}
+
+const TAG_HOOK_HANDLERS: Record<
+  string,
+  (ctx: TagHookContext) => {
+    text?: string;
+    tag?: string;
+    component?: any;
+    props?: Record<string, unknown>;
+    prependBullet?: boolean;
+    attrs?: Record<string, string>;
+    childrenText?: string;
+    drop?: boolean;
+  }
+> = {
+  span: (ctx) => ({ text: ctx.childrenText }),
+  div: () => asVerticalFlexTag(),
+  p: () => asVerticalFlexTag(),
+  ul: () => asVerticalFlexTag(),
+  li: () => asHorizontalFlexTag(true),
+  button: () => asVerticalFlexTag(),
+  br: () => ({ tag: "br" }),
+  img: () => ({ tag: "img" }),
+  sup: (ctx) => ({ text: `^{${ctx.childrenText}}` }),
+  sub: (ctx) => ({ text: `_{${ctx.childrenText}}` }),
+  a: (ctx) => ({ text: ctx.childrenText }),
+  strong: (ctx) => ({ text: ctx.childrenText }),
+  ol: () => asVerticalFlexTag(),
+  em: (ctx) => ({ text: ctx.childrenText }),
+};
+
+function defaultUnsupportedStyle(property: string, value: string): boolean {
+  const p = property.trim().toLowerCase();
+  const v = value.trim().toLowerCase();
+
+  if (p === "display" && v === "flex") return true;
+  if (p === "justify-content") return true;
+  if (p === "align-items") return true;
+  if (p === "flex-wrap") return true;
+  if (p === "padding" || p.startsWith("padding-")) return true;
+  if (p === "transition" && v.includes("all")) return true;
+  if (p === "transform" && v.includes("scale(")) return true;
+  if (p === "font-weight" && /^[0-9]+$/.test(v)) return true;
+
+  return false;
+}
+
+export class JsViewHtmlToVNodesOptions implements HtmlToVNodesOptions {
+  private columnWidthRef: { values: Array<number | string | undefined> } = { values: [] };
+
+  latex: NonNullable<HtmlToVNodesOptions["latex"]> = {
+    enabled: true,
+    width: 1000,
+    fontSize: 16,
+    lineSpace: 2,
+    color: "#000000",
+  };
+
+  onTag = (ctx: TagHookContext) => {
+    const before = { tag: ctx.tag, attrs: ctx.attrs };
+    console.log("[JsViewHtmlToVNodesOptions][onTag][before]", before);
+
+    const tag = ctx.tag.toLowerCase();
+    if (["table", "thead", "tbody", "tfoot", "tr", "td", "th"].includes(tag)) {
+      const after = tableTagHandler(ctx, this.columnWidthRef);
+      console.log("[JsViewHtmlToVNodesOptions][onTag][after]", after);
+      return after;
+    }
+
+    const tagHandler = TAG_HOOK_HANDLERS[tag];
+    if (tagHandler) {
+      const after = tagHandler(ctx);
+      console.log("[JsViewHtmlToVNodesOptions][onTag][after]", after);
+      return after;
+    } else {
+      const after = { drop: true };
+      console.log("[JsViewHtmlToVNodesOptions][onTag][unsupported-tag][drop]", {
+        tag: ctx.tag,
+        ...after,
+      });
+      return after;
+    }
+
+  };
+
+  onStyle = (ctx: StyleHookContext) => {
+    const before = { property: ctx.property, value: ctx.value, tag: ctx.tag };
+    console.log("[JsViewHtmlToVNodesOptions][onStyle][before]", before);
+
+    if (defaultUnsupportedStyle(ctx.property, ctx.value)) {
+      const after = { drop: true };
+      console.log("[JsViewHtmlToVNodesOptions][onStyle][after]", after);
+      return after;
+    }
+
+  };
+
+  onText = (ctx: TextHookContext) => {
+    if (this.latex.enabled === false) {
+      return ctx.text;
+    }
+    return ctx.text
+      .replace(/&nbsp;/g, "\\ ")
+      .replace(/\u00A0/g, "\\ ")
+      .replace(/ /g, "\\ ");
+  };
+}
+

package/utils/JsViewVueWidget/JsvDomRenderer/JsvDomRenderer.ts

@@ -0,0 +1,146 @@
+/*
+ * @file
+ *
+ * 【界面概述】
+ * JsvDomRenderer 用于接收一段 HTML 字符串并直接渲染为 JsView 可显示的内容区域。
+ * 适合题目正文、解析文本、图文混排等场景。
+ *
+ * 【组件介绍】
+ * JsvDomRenderer:
+ *   props:
+ *     html {string} (必选)
+ *       - 要渲染的 HTML 文本。
+ *       - 示例: "<p>如图，抛物线 y=-x<sup>2</sup>+bx+c</p>"
+ *
+ *     config {object} (可选)
+ *       - 组件配置对象，当前仅支持如下字段:
+ *         latexEnabled {boolean}
+ *           - 是否启用 latex 渲染。
+ *           - true: 公式/文本按 JsvLatex 渲染
+ *           - false: 公式/文本按普通 div 渲染
+ *       - 示例: { latexEnabled: true }
+ *
+ *     style {object} (可选)
+ *       - 渲染容器样式，会作用在组件根容器上。
+ *       - 常用字段:
+ *         width {number|string} 容器宽度
+ *         height {number|string} 容器高度
+ *         backgroundColor {string} 背景色
+ *         fontSize {number|string} 字体大小
+ *         color {string} 字体颜色
+ *       - 示例:
+ *         {
+ *           width: 1280,
+ *           height: 2000,
+ *           backgroundColor: "#FFFFFF",
+ *           fontSize: 18,
+ *           color: "#000000"
+ *         }
+ */
+import { defineComponent, h, type PropType } from "vue";
+import { JsvFlexDiv } from "../JsvFlexCell";
+import { htmlToVNodes } from "./htmlToVNodes";
+import type { HtmlToVNodesOptions } from "./htmlToVNodes";
+import { JsViewHtmlToVNodesOptions } from "./JsViewHtmlToVNodesOptions";
+
+function normalizeLatexWidthFromStyle(
+  value: unknown
+): NonNullable<HtmlToVNodesOptions["latex"]>["width"] | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value.replace(/px$/i, "").trim());
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return undefined;
+}
+
+function normalizeLatexFontSizeFromStyle(
+  value: unknown
+): NonNullable<HtmlToVNodesOptions["latex"]>["fontSize"] | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value.replace(/px$/i, "").trim());
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return undefined;
+}
+
+export default defineComponent({
+  name: "JsvDomRenderer",
+  props: {
+    html: {
+      type: String,
+      required: true,
+    },
+    config: {
+      type: Object as PropType<
+        Partial<NonNullable<HtmlToVNodesOptions["latex"]>> & { latexEnabled?: boolean }
+      >,
+      default: undefined,
+    },
+    style: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    // JsView 下用 JsvFlexDiv 做纵向布局，避免文本节点和图片出现重叠。
+    const render = () => {
+      const setupStartAt = Date.now();
+      console.log("[JsvDomRenderer][setup][start]");
+      const jsViewHtmlOptions = new JsViewHtmlToVNodesOptions();
+      const styleWidth = normalizeLatexWidthFromStyle(props.style?.width);
+      const styleFontSize = normalizeLatexFontSizeFromStyle(props.style?.fontSize);
+      const styleColor = typeof props.style?.color === "string" ? props.style.color : undefined;
+      if (props.config) {
+        const { latexEnabled, ...restConfig } = props.config;
+        jsViewHtmlOptions.latex = {
+          ...jsViewHtmlOptions.latex,
+          ...restConfig,
+          ...(latexEnabled !== undefined ? { enabled: latexEnabled } : {}),
+          ...(restConfig.width === undefined && styleWidth !== undefined ? { width: styleWidth } : {}),
+          ...(restConfig.fontSize === undefined && styleFontSize !== undefined
+            ? { fontSize: styleFontSize }
+            : {}),
+          ...(restConfig.color === undefined && styleColor !== undefined ? { color: styleColor } : {}),
+        };
+      } else if (styleWidth !== undefined || styleFontSize !== undefined || styleColor !== undefined) {
+        jsViewHtmlOptions.latex = {
+          ...jsViewHtmlOptions.latex,
+          ...(styleWidth !== undefined ? { width: styleWidth } : {}),
+          ...(styleFontSize !== undefined ? { fontSize: styleFontSize } : {}),
+          ...(styleColor !== undefined ? { color: styleColor } : {}),
+        };
+      }
+      const rawNodes = htmlToVNodes(props.html, jsViewHtmlOptions);
+      const normalizedNodes = rawNodes.map((node, idx) =>
+        typeof node === "string" ? h("div", { key: `txt-${idx}` }, node) : node
+      );
+      console.log("[JsvDomRenderer][setup][end][elapsedMs]", Date.now() - setupStartAt);
+      return h(
+        JsvFlexDiv,
+        {
+          class: "dom-json-renderer",
+          style: {
+            flexDirection: "column",
+            alignItems: "flex-start",
+            ...(props.style ?? {}),
+          },
+        },
+        {
+          default: () => normalizedNodes,
+        }
+      );
+    };
+
+    return render;
+  },
+});