markstream-vue2 2.0.0 → 2.0.2

package/dist/index.js

@@ -6159,7 +6159,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const nodeVisibilityHandles = /* @__PURE__ */ new Map();
     const nodeVisibilityFallbackTimers = /* @__PURE__ */ new Map();
     const nodeSlotElements = /* @__PURE__ */ new Map();
-    const codeBlockRenderCache = /* @__PURE__ */ new WeakMap();
+    const codeBlockRenderCache = [];
+    watch(
+      () => parsedNodes.value.length,
+      (length) => {
+        if (codeBlockRenderCache.length > length)
+          codeBlockRenderCache.length = length;
+      }
+    );
     const nodeSlotVersion = ref(0);
     const sortedNodeSlots = computed(() => {
       void nodeSlotVersion.value;
@@ -7422,8 +7429,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const linkBindings = computed(() => __spreadValues(__spreadValues({}, nonCodeBindings.value), typeof props.showTooltips === "boolean" ? { showTooltip: props.showTooltips } : {}));
     const listBindings = computed(() => __spreadValues(__spreadValues({}, nonCodeBindings.value), typeof props.showTooltips === "boolean" ? { showTooltips: props.showTooltips } : {}));
     const legacyRenderedItems = computed(() => {
-      return legacyNodeItems.value.map((node, index2) => {
+      return legacyNodeItems.value.map((item, index2) => {
         var _a3, _b2, _c2, _d;
+        const node = getCodeBlockRenderNode(item, index2);
         const language = getCodeBlockLanguage(node);
         let resolvedNode = node;
         let component = getNodeComponent(node, language);
@@ -7480,7 +7488,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const renderedItems = computed(() => {
       return visibleNodes.value.map((item) => {
         var _a3, _b2, _c2, _d;
-        let node = getCodeBlockRenderNode(item.node);
+        let node = getCodeBlockRenderNode(item.node, item.index);
         const language = getCodeBlockLanguage(node);
         let component = getNodeComponent(node, language);
         if ((node.type === "html_block" || node.type === "html_inline") && component === nodeComponents[node.type]) {
@@ -7527,25 +7535,31 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         });
       });
     });
-    function getCodeBlockRenderNode(node) {
-      var _a3, _b2, _c2, _d, _e, _f, _g;
-      if (node.type !== "code_block")
+    function getCodeBlockRenderNode(node, index2) {
+      var _a3, _b2;
+      if (node.type !== "code_block") {
+        codeBlockRenderCache[index2] = void 0;
         return node;
+      }
       const codeBlockNode = node;
       const signature = [
-        String((_a3 = codeBlockNode.language) != null ? _a3 : ""),
-        String((_b2 = codeBlockNode.loading) != null ? _b2 : ""),
-        String((_c2 = codeBlockNode.diff) != null ? _c2 : ""),
-        String((_d = codeBlockNode.code) != null ? _d : ""),
-        String((_e = codeBlockNode.originalCode) != null ? _e : ""),
-        String((_f = codeBlockNode.updatedCode) != null ? _f : ""),
-        String((_g = codeBlockNode.raw) != null ? _g : "")
-      ].join("\0");
-      const cached = codeBlockRenderCache.get(codeBlockNode);
-      if (cached && cached.signature === signature)
+        codeBlockNode.language,
+        codeBlockNode.loading,
+        codeBlockNode.diff,
+        codeBlockNode.code,
+        codeBlockNode.originalCode,
+        codeBlockNode.updatedCode,
+        codeBlockNode.raw,
+        codeBlockNode.startLine,
+        codeBlockNode.endLine,
+        (_a3 = codeBlockNode.sourceMap) == null ? void 0 : _a3.startLine,
+        (_b2 = codeBlockNode.sourceMap) == null ? void 0 : _b2.endLine
+      ];
+      const cached = codeBlockRenderCache[index2];
+      if (cached && signature.every((value, signatureIndex) => value === cached.signature[signatureIndex]))
         return cached.node;
       const cloned = __spreadValues({}, codeBlockNode);
-      codeBlockRenderCache.set(codeBlockNode, { signature, node: cloned });
+      codeBlockRenderCache[index2] = { signature, node: cloned };
       return cloned;
     }
     function getCodeBlockLanguage(node) {
@@ -7847,7 +7861,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return { __sfc: true, props, emit, isNativeDomEvent, emitCodeCopy, MAX_DEFERRED_NODE_COUNT, MAX_VIEWPORT_OBSERVER_TARGETS, VIEWPORT_PRIORITY_RECOVERY_COUNT, containerRef, viewportPriorityAutoDisabled, SCROLL_PARENT_OVERFLOW_RE, isClient, instance, debugPerformanceEnabled, attrs, textStreamState, streamRenderVersion, smoothStream, resolvedShowTooltips, inheritedHtmlPolicy, inheritedSmoothStreaming, resolvedHtmlPolicy, smoothStreamingEligible, hasMountedForSmoothStreaming, smoothStreamingEnabled, renderContent, rawContent, smoothSourceSynced, requestedFinal, effectiveFinal, renderVersionSource, logPerf, resolveViewportRoot, instanceMsgId, defaultMd, customTagCache, EMPTY_PARSED_NODES, customComponentsMap, effectiveCustomHtmlTags, mdBase, mdInstance, cloneNodeValue, cloneParsedNodeList, mergedParseOptions, effectiveCustomHtmlTagsSet, parsedNodes, maxLiveNodesResolved, virtualizationEnabled, viewportPriorityEnabled, registerNodeVisibility, requestFrame, cancelFrame, isTestEnv, hasIdleCallback, resolvedBatchSize, resolvedInitialBatch, batchingEnabled, renderedCount, previousRenderContext, adaptiveBatchSize, nodeVisibilityState, nodeVisibilityHandles, nodeVisibilityFallbackTimers, nodeSlotElements, codeBlockRenderCache, nodeSlotVersion, sortedNodeSlots, scrollRootElement, detachScrollHandler, pendingFocusSync, liveRange, visibleNodes, deferNodes, incrementalRenderingActive, previousBatchConfig, shouldObserveSlots, liveNodeBufferResolved, focusIndex, nodeContentElements, legacyVue26, legacyNodesMode, legacyNodeItems, syncNodeRefs, resolveTemplateRef, desiredRenderedCount, resolveScrollContainer, isReverseFlexScrollRoot, getNormalizedScrollTop, getOffsetTopWithinRoot, cleanupScrollListener, setupScrollListener, cancelScheduledFocusSync, scheduleFocusSync, syncFocusToScroll, clamp, updateLiveRange, nodeHeights, heightStats, heightTreeSize, heightSumTree, heightKnownTree, resetHeightMeasurements, pruneHeightMeasurements, fenwickUpdate, fenwickQuery, fenwickRangeSum, rebuildHeightTrees, recordNodeHeight, averageNodeHeight, estimateHeightRange, topSpacerHeight, bottomSpacerHeight, estimateIndexForOffset, estimateIndexForOffsetFromEnd, cleanupNodeVisibility, markNodeVisible, shouldRenderNode, destroyNodeHandle, setNodeSlotElement, bumpNodeSlotVersion, setNodeContentRef, batchRaf, batchTimeout, batchPending, pendingIncrement, batchIdle, VIEWPORT_FALLBACK_DELAY, VIEWPORT_FALLBACK_MARGIN_PX, cancelBatchTimers, clearVisibilityFallback, scheduleVisibilityFallback, autoDisableViewportPriority, scheduleBatch, queueNextBatch, adjustAdaptiveBatchSize, MermaidBlockNodeLoading, mermaidBlockNodeComponent, mermaidBlockNodeImport, loadMermaidBlockNode, resolveMermaidBlockNodeComponent, InfographicBlockNodeLoading, infographicBlockNodeComponent, infographicBlockNodeImport, loadInfographicBlockNode, resolveInfographicBlockNodeComponent, D2BlockNodeAsync, codeBlockComponent, nodeComponents, indexPrefix, codeBlockExtraProps, builtinCodeBlockExtraProps, codeBlockBindings, customCodeBlockBindings, countCodeLines, estimateBuiltinCodeBlockHeight, pickBoolean, preCodeBlockBindings, mermaidBindings, d2Bindings, infographicBindings, nonCodeBindings, linkBindings, listBindings, legacyRenderedItems, legacyStructuredContentMode, renderedItems, getCodeBlockRenderNode, getCodeBlockLanguage, getCustomCodeLanguageComponent, isLegacyStructuredNode, getRenderKey, getMermaidBindingsFor, getInfographicBindingsFor, getNodeComponent, isCustomCodeBlockComponent, isCustomLanguageCodeBlockComponent, getBindingsFor, handleContainerClick, handleContainerMouseover, handleContainerMouseout, hasExplicitNodes, typewriterCursorRef, showTypewriterCursor, typewriterCursorTimeout, lastTypewriterContentLength, TYPEWRITER_CURSOR_EXCLUDED_NODE_TYPES, shouldSkipTypewriterCursorForNode, shouldShowTypewriterCursorForCurrentNodes, getNodeTextLength, getTypewriterContentLength, clearTypewriterCursorTimeout, getLastTextNode, updateTypewriterCursorPosition, LegacyNodesRenderer };
   }
 });
-const NodeRenderer_vue_vue_type_style_index_0_scoped_ebe176a0_lang = "";
+const NodeRenderer_vue_vue_type_style_index_0_scoped_cdb2b045_lang = "";
 const NodeRenderer_vue_vue_type_style_index_1_lang = "";
 var _sfc_render$9 = function render36() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
@@ -7885,7 +7899,7 @@ var __component__$9 = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$9,
   false,
   null,
-  "ebe176a0",
+  "cdb2b045",
   null,
   null
 );
@@ -8529,6 +8543,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const modalContent = ref();
     const modalCloneWrapper = ref(null);
     const baseCode = computed(() => props.node.code);
+    const hasPreview = ref(false);
+    const hasRenderError = ref(false);
     const maxPreviewHeight = computed(() => {
       if (!props.maxHeight || props.maxHeight === "none")
         return null;
@@ -8756,88 +8772,176 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       isDragging.value = false;
     }
     let infographicInstance2 = null;
-    function renderInfographic() {
+    let renderInFlight = false;
+    let rerenderQueued = false;
+    let rerenderForce = false;
+    let renderScheduled = false;
+    let renderScheduledForce = false;
+    let lastCompletedRenderSignature = "";
+    let unmounted = false;
+    let renderGeneration = 0;
+    function renderInfographic(force = false) {
       return __async(this, null, function* () {
-        var _a2;
-        if (!infographicContainer.value)
+        var _a2, _b, _c, _d, _e, _f;
+        if (unmounted || !infographicContainer.value)
+          return;
+        if (renderInFlight) {
+          rerenderQueued = true;
+          rerenderForce = rerenderForce || force;
+          return;
+        }
+        const signature = baseCode.value;
+        if (!force && signature === lastCompletedRenderSignature && hasPreview.value)
           return;
+        const source = baseCode.value;
+        const final = props.loading === false;
+        const generation = ++renderGeneration;
+        renderInFlight = true;
+        let nextInfographicInstance = null;
+        let previousChildren = null;
         try {
           const InfographicClass = yield getInfographic();
-          if (!InfographicClass) {
-            console.warn("Infographic library failed to load.");
+          if (unmounted || generation !== renderGeneration)
             return;
-          }
-          if (infographicInstance2) {
-            (_a2 = infographicInstance2.destroy) == null ? void 0 : _a2.call(infographicInstance2);
-            infographicInstance2 = null;
-          }
-          infographicContainer.value.innerHTML = "";
-          infographicInstance2 = new InfographicClass({
-            container: infographicContainer.value,
+          if (!InfographicClass)
+            throw new Error("Infographic library failed to load.");
+          const container = infographicContainer.value;
+          if (!container)
+            return;
+          const stillStreaming = props.loading === true;
+          const canRender = signature === baseCode.value || !final && stillStreaming && baseCode.value.startsWith(source);
+          if (!canRender)
+            return;
+          previousChildren = Array.from(container.childNodes);
+          nextInfographicInstance = new InfographicClass({
+            container,
             width: "100%",
             height: "100%"
           });
-          infographicInstance2.render(baseCode.value);
+          let renderErrorMessage = "";
+          let renderCompleted = false;
+          (_a2 = nextInfographicInstance.on) == null ? void 0 : _a2.call(nextInfographicInstance, "error", (error) => {
+            const errors = Array.isArray(error) ? error : [error];
+            renderErrorMessage = errors.map((item) => {
+              var _a3;
+              if (item instanceof Error)
+                return item.message;
+              if (typeof item === "string")
+                return item;
+              if (item && typeof item === "object" && "message" in item)
+                return String((_a3 = item.message) != null ? _a3 : "");
+              return String(item != null ? item : "");
+            }).filter(Boolean).join("; ");
+          });
+          (_b = nextInfographicInstance.on) == null ? void 0 : _b.call(nextInfographicInstance, "rendered", () => {
+            renderCompleted = true;
+          });
+          nextInfographicInstance.render(source);
+          if (renderErrorMessage)
+            throw new Error(renderErrorMessage);
+          const nextChildren = Array.from(container.childNodes);
+          const replacedChildren = nextChildren.length > 0 && (nextChildren.length !== previousChildren.length || nextChildren.some((child, index2) => child !== (previousChildren == null ? void 0 : previousChildren[index2])));
+          if (!renderCompleted && !replacedChildren)
+            throw new Error("Infographic render returned empty output.");
+          (_c = infographicInstance2 == null ? void 0 : infographicInstance2.destroy) == null ? void 0 : _c.call(infographicInstance2);
+          infographicInstance2 = nextInfographicInstance;
+          nextInfographicInstance = null;
+          hasPreview.value = true;
+          hasRenderError.value = false;
+          lastCompletedRenderSignature = signature;
           nextTick(() => {
-            updateContainerHeight();
+            if (!unmounted && generation === renderGeneration)
+              updateContainerHeight();
           });
         } catch (error) {
-          console.error("Failed to render infographic:", error);
-          if (infographicContainer.value) {
-            infographicContainer.value.innerHTML = `<div class="text-red-500 p-4">Failed to render infographic: ${error instanceof Error ? error.message : "Unknown error"}</div>`;
+          if (unmounted || generation !== renderGeneration)
+            return;
+          (_d = nextInfographicInstance == null ? void 0 : nextInfographicInstance.destroy) == null ? void 0 : _d.call(nextInfographicInstance);
+          nextInfographicInstance = null;
+          if (final && props.loading === false && signature === baseCode.value) {
+            console.error("Failed to render infographic:", error);
+            (_e = infographicInstance2 == null ? void 0 : infographicInstance2.destroy) == null ? void 0 : _e.call(infographicInstance2);
+            infographicInstance2 = null;
+            hasPreview.value = false;
+            hasRenderError.value = true;
+            lastCompletedRenderSignature = "";
+            if (infographicContainer.value) {
+              infographicContainer.value.innerHTML = `<div class="text-red-500 p-4">Failed to render infographic: ${error instanceof Error ? error.message : "Unknown error"}</div>`;
+            }
+          } else if (previousChildren && infographicContainer.value) {
+            infographicContainer.value.replaceChildren(...previousChildren);
+          }
+        } finally {
+          (_f = nextInfographicInstance == null ? void 0 : nextInfographicInstance.destroy) == null ? void 0 : _f.call(nextInfographicInstance);
+          renderInFlight = false;
+          if (!unmounted && generation === renderGeneration && rerenderQueued) {
+            const forceNext = rerenderForce;
+            rerenderQueued = false;
+            rerenderForce = false;
+            queueInfographicRender(forceNext);
           }
         }
       });
     }
+    function queueInfographicRender(force = false) {
+      if (unmounted || showSource.value || isCollapsed.value)
+        return;
+      renderScheduledForce = renderScheduledForce || force;
+      if (renderScheduled)
+        return;
+      renderScheduled = true;
+      nextTick(() => {
+        renderScheduled = false;
+        const forceNext = renderScheduledForce;
+        renderScheduledForce = false;
+        if (!unmounted)
+          void renderInfographic(forceNext);
+      });
+    }
     watch(
       () => baseCode.value,
       () => {
-        if (!showSource.value && !isCollapsed.value) {
-          nextTick(() => {
-            renderInfographic();
-          });
-        }
+        queueInfographicRender(true);
+      }
+    );
+    watch(
+      () => props.loading,
+      (loading, prev) => {
+        if (prev && !loading)
+          queueInfographicRender(true);
       }
     );
     watch(
       () => showSource.value,
       (isSource) => {
-        if (!isSource && !isCollapsed.value) {
-          nextTick(() => {
-            renderInfographic();
-          });
-        }
+        if (!isSource)
+          queueInfographicRender(true);
       }
     );
     watch(
       () => isCollapsed.value,
       (collapsed) => {
-        if (!collapsed && !showSource.value) {
-          nextTick(() => {
-            renderInfographic();
-          });
-        }
+        if (!collapsed)
+          queueInfographicRender();
       }
     );
     watch(
       () => props.maxHeight,
       () => {
-        if (!showSource.value && !isCollapsed.value) {
-          nextTick(() => {
-            renderInfographic();
-          });
-        }
+        nextTick(updateContainerHeight);
       }
     );
     onMounted(() => {
-      if (!showSource.value && !isCollapsed.value) {
-        nextTick(() => {
-          renderInfographic();
-        });
-      }
+      queueInfographicRender();
     });
     onBeforeUnmount(() => {
       var _a2;
+      unmounted = true;
+      renderGeneration += 1;
+      rerenderQueued = false;
+      rerenderForce = false;
+      renderScheduled = false;
+      renderScheduledForce = false;
       if (infographicInstance2) {
         (_a2 = infographicInstance2.destroy) == null ? void 0 : _a2.call(infographicInstance2);
         infographicInstance2 = null;
@@ -8864,17 +8968,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         }
       }
     );
-    return { __sfc: true, props, _emits, t, copyText, isCollapsed, infographicContainer, showSource, isModalOpen, modalContent, modalCloneWrapper, baseCode, maxPreviewHeight, estimatedPreviewHeight, containerHeight, resolveContainerHeight, updateContainerHeight, zoom, translateX, translateY, isDragging, dragStart, shouldSkipEventTarget, onBtnHover, onBtnLeave, onCopyHover, copy, handleSwitchMode, handleExportClick, exportSvg, handleKeydown, openModal, closeModal, handleOpenModalClick, zoomIn, zoomOut, resetZoom, startDrag, onDrag, stopDrag, infographicInstance: infographicInstance2, renderInfographic, computedButtonStyle, isFullscreenDisabled, transformStyle, infographicIconUrl, Portal };
+    return { __sfc: true, props, _emits, t, copyText, isCollapsed, infographicContainer, showSource, isModalOpen, modalContent, modalCloneWrapper, baseCode, hasPreview, hasRenderError, maxPreviewHeight, estimatedPreviewHeight, containerHeight, resolveContainerHeight, updateContainerHeight, zoom, translateX, translateY, isDragging, dragStart, shouldSkipEventTarget, onBtnHover, onBtnLeave, onCopyHover, copy, handleSwitchMode, handleExportClick, exportSvg, handleKeydown, openModal, closeModal, handleOpenModalClick, zoomIn, zoomOut, resetZoom, startDrag, onDrag, stopDrag, infographicInstance: infographicInstance2, renderInFlight, rerenderQueued, rerenderForce, renderScheduled, renderScheduledForce, lastCompletedRenderSignature, unmounted, renderGeneration, renderInfographic, queueInfographicRender, computedButtonStyle, isFullscreenDisabled, transformStyle, infographicIconUrl, Portal };
   }
 });
-const InfographicBlockNode_vue_vue_type_style_index_0_scoped_4fbaa9a8_lang = "";
+const InfographicBlockNode_vue_vue_type_style_index_0_scoped_c3368b0a_lang = "";
 var _sfc_render$6 = function render39() {
   var _a2;
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
   return _c("div", { staticClass: "my-4 rounded-lg border overflow-hidden shadow-sm", class: [
     _setup.props.isDark ? "border-gray-700/30" : "border-gray-200",
     { "is-rendering": _setup.props.loading }
-  ], attrs: { "data-markstream-infographic": "1", "data-markstream-mode": _setup.showSource ? "source" : _setup.infographicInstance ? "preview" : "pending" } }, [_setup.props.showHeader ? _c("div", { staticClass: "infographic-block-header flex justify-between items-center px-4 py-2.5 border-b", class: _setup.props.isDark ? "bg-gray-800 border-gray-700/30" : "bg-gray-50 border-gray-200" }, [_vm.$slots["header-left"] ? _c("div", [_vm._t("header-left")], 2) : _c("div", { staticClass: "flex items-center gap-x-2 overflow-hidden" }, [_c("img", { staticClass: "w-4 h-4 my-0", attrs: { "src": _setup.infographicIconUrl, "alt": "Infographic" } }), _c("span", { staticClass: "text-sm font-medium font-mono truncate", class: _setup.props.isDark ? "text-gray-400" : "text-gray-600" }, [_vm._v("Infographic")])]), _vm.$slots["header-center"] ? _c("div", [_vm._t("header-center")], 2) : _setup.props.showModeToggle ? _c("div", { staticClass: "flex items-center gap-x-1 rounded-md p-0.5", class: _setup.props.isDark ? "bg-gray-700" : "bg-gray-100" }, [_c("button", { staticClass: "px-2.5 py-1 text-xs rounded transition-colors", class: [
+  ], attrs: { "data-markstream-infographic": "1", "data-markstream-mode": _setup.showSource ? "source" : _setup.hasRenderError ? "error" : _setup.hasPreview ? "preview" : "pending" } }, [_setup.props.showHeader ? _c("div", { staticClass: "infographic-block-header flex justify-between items-center px-4 py-2.5 border-b", class: _setup.props.isDark ? "bg-gray-800 border-gray-700/30" : "bg-gray-50 border-gray-200" }, [_vm.$slots["header-left"] ? _c("div", [_vm._t("header-left")], 2) : _c("div", { staticClass: "flex items-center gap-x-2 overflow-hidden" }, [_c("img", { staticClass: "w-4 h-4 my-0", attrs: { "src": _setup.infographicIconUrl, "alt": "Infographic" } }), _c("span", { staticClass: "text-sm font-medium font-mono truncate", class: _setup.props.isDark ? "text-gray-400" : "text-gray-600" }, [_vm._v("Infographic")])]), _vm.$slots["header-center"] ? _c("div", [_vm._t("header-center")], 2) : _setup.props.showModeToggle ? _c("div", { staticClass: "flex items-center gap-x-1 rounded-md p-0.5", class: _setup.props.isDark ? "bg-gray-700" : "bg-gray-100" }, [_c("button", { staticClass: "px-2.5 py-1 text-xs rounded transition-colors", class: [
     !_setup.showSource ? _setup.props.isDark ? "bg-gray-600 text-gray-200 shadow-sm" : "bg-white text-gray-700 shadow-sm" : _setup.props.isDark ? "text-gray-400 hover:text-gray-200" : "text-gray-500 hover:text-gray-700"
   ], on: { "click": () => _setup.handleSwitchMode("preview"), "mouseenter": function($event) {
     _setup.onBtnHover($event, _setup.t("common.preview") || "Preview");
@@ -8922,7 +9026,7 @@ var _sfc_render$6 = function render39() {
     return _setup.onDrag.apply(null, arguments);
   }, "&touchend": function($event) {
     return _setup.stopDrag.apply(null, arguments);
-  } } }, [_c("div", { staticClass: "absolute inset-0 cursor-grab", class: { "cursor-grabbing": _setup.isDragging }, style: _setup.transformStyle }, [_c("div", { ref: "infographicContainer", staticClass: "w-full text-center flex items-center justify-center min-h-full" })])])])]), _c(_setup.Portal, { attrs: { "to": "body" } }, [_c("div", { staticClass: "markstream-vue" }, [_c("transition", { attrs: { "name": "infographic-dialog", "appear": "" } }, [_setup.isModalOpen ? _c("div", { staticClass: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4", on: { "click": function($event) {
+  } } }, [!_setup.hasPreview && !_setup.hasRenderError ? _c("pre", { staticClass: "absolute inset-0 overflow-auto p-4 text-left text-sm font-mono whitespace-pre-wrap" }, [_vm._v(_vm._s(_setup.baseCode))]) : _vm._e(), _c("div", { staticClass: "absolute inset-0 cursor-grab", class: { "cursor-grabbing": _setup.isDragging }, style: _setup.transformStyle }, [_c("div", { ref: "infographicContainer", staticClass: "w-full text-center flex items-center justify-center min-h-full" })])])])]), _c(_setup.Portal, { attrs: { "to": "body" } }, [_c("div", { staticClass: "markstream-vue" }, [_c("transition", { attrs: { "name": "infographic-dialog", "appear": "" } }, [_setup.isModalOpen ? _c("div", { staticClass: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4", on: { "click": function($event) {
     if ($event.target !== $event.currentTarget)
       return null;
     return _setup.closeModal.apply(null, arguments);
@@ -8941,7 +9045,7 @@ var __component__$6 = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$6,
   false,
   null,
-  "4fbaa9a8",
+  "c3368b0a",
   null,
   null
 );