@bendyline/squisq-editor-react 2.13.12 → 2.13.13

package/dist/{chunk-J5IUF3BC.js → chunk-FLCBGVPN.js}

@@ -40949,6 +40949,10 @@ import {
   parseMarkdown as parseMarkdown9,
   resolveWikiLinks
 } from "@bendyline/squisq/markdown";
+import {
+  isMediaAnnotationName,
+  parseStandaloneAnnotation
+} from "@bendyline/squisq/doc";
 import { sanitizedSvgImageUrl } from "@bendyline/squisq-react";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -40996,6 +41000,20 @@ function loadRenderFn() {
   }
   return cachedRenderPromise;
 }
+var preparationPromise = null;
+function loadPreparation() {
+  preparationPromise ?? (preparationPromise = Promise.all([
+    import("@bendyline/squisq-formats/html"),
+    import("@bendyline/squisq-formats/diagrams"),
+    import("@bendyline/squisq-react/diagram-pictures")
+  ]).then(([html, diagrams, pictures]) => ({
+    needs: html.needsPlainHtmlPreparation,
+    prepare: html.prepareMarkdownDocForPlainHtml,
+    renderDiagram: diagrams.cachingDiagramRasterizer(pictures.createDiagramPictureRenderer())
+  })));
+  return preparationPromise;
+}
+var PREPARE_DELAY_MS = 300;
 var IFRAME_STYLE = {
   width: "100%",
   height: "100%",
@@ -41010,6 +41028,7 @@ function PlainHtmlPreview({
   images,
   mediaProvider,
   mediaRevision,
+  container,
   theme,
   className,
   style,
@@ -41087,6 +41106,56 @@ function PlainHtmlPreview({
     return merged;
   }, [resolvedImages, images]);
   const iconsCss = useMemo52(() => collectInlineFontAwesomeCss(), []);
+  const [preparation, setPreparation] = useState76(null);
+  useEffect64(() => {
+    let cancelled = false;
+    loadPreparation().then(
+      (loaded) => {
+        if (!cancelled) setPreparation(loaded);
+      },
+      () => {
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const dataTableCache = useMemo52(
+    () => container ? dataTableCacheFor(container, mediaRevision ?? 0) : void 0,
+    [container, mediaRevision]
+  );
+  const needsPreparation = useMemo52(
+    () => preparation?.needs(mdDoc, { renderDiagram: preparation.renderDiagram, container }) ?? false,
+    [preparation, mdDoc, container]
+  );
+  const [prepared, setPrepared] = useState76(null);
+  const preparedOnceRef = useRef59(false);
+  useEffect64(() => {
+    if (!preparation || !needsPreparation) return;
+    let cancelled = false;
+    const prepare = () => {
+      preparation.prepare(mdDoc, {
+        renderDiagram: preparation.renderDiagram,
+        container,
+        dataTableCache
+      }).then(
+        (result) => {
+          if (!cancelled) setPrepared(result);
+        },
+        () => {
+          if (!cancelled)
+            setPrepared({ markdownDoc: mdDoc, images: /* @__PURE__ */ new Map(), icons: /* @__PURE__ */ new Map() });
+        }
+      );
+    };
+    const timer = setTimeout(prepare, preparedOnceRef.current ? PREPARE_DELAY_MS : 0);
+    preparedOnceRef.current = true;
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [preparation, needsPreparation, mdDoc, container, dataTableCache]);
+  const view = needsPreparation ? prepared : null;
   const [renderFn, setRenderFn] = useState76(() => cachedRender);
   useEffect64(() => {
     if (renderFn) return;
@@ -41098,14 +41167,18 @@ function PlainHtmlPreview({
       cancelled = true;
     };
   }, [renderFn]);
-  const html = useMemo52(
-    () => renderFn ? (
-      // The frame is sandboxed without scripts, and a nested player
-      // iframe inherits that sandbox — so videos show as linked posters.
-      renderFn(mdDoc, { title, images: mergedImages, theme, iconsCss, videoEmbeds: "poster" })
-    ) : "",
-    [renderFn, mdDoc, title, mergedImages, theme, iconsCss]
-  );
+  const html = useMemo52(() => {
+    if (!renderFn) return "";
+    const images2 = view && view.images.size > 0 ? new Map([...mergedImages ?? [], ...view.images]) : mergedImages;
+    return renderFn(view?.markdownDoc ?? mdDoc, {
+      title,
+      images: images2,
+      theme,
+      iconsCss,
+      icons: view?.icons,
+      videoEmbeds: "poster"
+    });
+  }, [renderFn, view, mdDoc, title, mergedImages, theme, iconsCss]);
   const installFrameLinkHandler = useCallback50(() => {
     removeFrameLinkHandlerRef.current();
     removeFrameLinkHandlerRef.current = () => void 0;
@@ -41292,6 +41365,12 @@ function collectImageRefs(doc) {
     if (n.type === "image" && typeof n.url === "string" && n.url) {
       refs.add(n.url);
     }
+    if (n.type === "paragraph") {
+      const tag = parseStandaloneAnnotation(node2);
+      if (tag?.template && isMediaAnnotationName(tag.template) && tag.params.src) {
+        refs.add(tag.params.src);
+      }
+    }
     if ((n.type === "htmlBlock" || n.type === "htmlInline") && Array.isArray(n.htmlChildren)) {
       visitHtml(n.htmlChildren);
     }
@@ -42278,7 +42357,8 @@ function PrintPreview({
   theme,
   showCover,
   transformStyle,
-  mediaRevision
+  mediaRevision,
+  container
 }) {
   const { slidesPerPage, registerPrintHandler } = usePrintMode();
   const mediaProvider = useMediaProvider();
@@ -42320,6 +42400,7 @@ function PrintPreview({
         title,
         mediaProvider,
         mediaRevision,
+        container,
         theme,
         onFrameChange: setDocumentFrame
       }
@@ -42845,7 +42926,8 @@ function PreviewPanel({
           theme: activeTheme,
           showCover: activeCoverSlide,
           transformStyle: activeTransformStyle,
-          mediaRevision
+          mediaRevision,
+          container: workspaceContainer ?? null
         }
       );
     }
@@ -42858,6 +42940,7 @@ function PreviewPanel({
           title: contentDoc?.frontmatter?.title ?? void 0,
           mediaProvider,
           mediaRevision,
+          container: workspaceContainer ?? null,
           theme: activeTheme,
           globalKeyboardShortcuts: !audience,
           onLinkClick,

package/dist/index.d.ts

@@ -434,6 +434,11 @@ interface PlainHtmlPreviewProps {
      *  Mirrors the `mediaRevision` bump the editor uses after an image
      *  edit so saves show up in the preview without remount. */
     mediaRevision?: number;
+    /**
+     * The workspace holding the document's data files, so a
+     * `{[dataTable src=…]}` reference shows its first rows as the export does.
+     */
+    container?: ContentContainer | null;
     /**
      * Squisq theme to apply. When set, the iframe loads any Google-
      * hosted fonts the theme uses and the rendered HTML adopts the
@@ -456,7 +461,7 @@ interface PlainHtmlPreviewProps {
     /** Optional host clipboard adapter; otherwise the browser Clipboard API is used. */
     onCopyCode?: CodeBlockCopyHandler;
 }
-declare function PlainHtmlPreview({ markdown, wikiLinks, title, images, mediaProvider, mediaRevision, theme, className, style, globalKeyboardShortcuts, onFrameChange, onLinkClick, showCodeCopyButton, onCopyCode, }: PlainHtmlPreviewProps): react.JSX.Element;
+declare function PlainHtmlPreview({ markdown, wikiLinks, title, images, mediaProvider, mediaRevision, container, theme, className, style, globalKeyboardShortcuts, onFrameChange, onLinkClick, showCodeCopyButton, onCopyCode, }: PlainHtmlPreviewProps): react.JSX.Element;
 
 /**
  * Emoji Dataset

package/dist/index.js

@@ -243,7 +243,7 @@ import {
   videoEmbedParagraphJson,
   viewStateFromBinding,
   writeHeadingViewState
-} from "./chunk-J5IUF3BC.js";
+} from "./chunk-FLCBGVPN.js";
 import {
   EditorProvider,
   applySourceEditsToText,

package/dist/shell/index.js

@@ -5,7 +5,7 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContextMenuItems
-} from "../chunk-J5IUF3BC.js";
+} from "../chunk-FLCBGVPN.js";
 import {
   EditorProvider,
   useEditorContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.13.12",
+  "version": "2.13.13",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -102,12 +102,12 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "2.13.7",
+    "@bendyline/squisq": "2.13.8",
     "@bendyline/squisq-calc": "2.11.2",
-    "@bendyline/squisq-formats": "2.8.8",
-    "@bendyline/squisq-grid-react": "2.11.36",
-    "@bendyline/squisq-react": "2.12.19",
-    "@bendyline/squisq-video-react": "2.5.20",
+    "@bendyline/squisq-formats": "2.8.9",
+    "@bendyline/squisq-grid-react": "2.11.37",
+    "@bendyline/squisq-react": "2.12.20",
+    "@bendyline/squisq-video-react": "2.5.21",
     "@fortawesome/fontawesome-free": "7.3.1",
     "@tiptap/core": "2.27.3",
     "@tiptap/extension-heading": "2.27.3",