@bendyline/squisq-editor-react 2.3.3 → 2.3.4

package/dist/{chunk-QN3Q64LV.js → chunk-GNIVYDZH.js}

@@ -30160,7 +30160,12 @@ function InlinePreviewGutter({
 }
 
 // src/buildPreviewDoc.ts
-import { deriveTemplateInputs as deriveTemplateInputs3, flattenRenderableBlocks, hasTemplate as hasTemplate2 } from "@bendyline/squisq/doc";
+import {
+  coerceTemplateParams,
+  deriveTemplateInputs as deriveTemplateInputs3,
+  flattenRenderableBlocks,
+  hasTemplate as hasTemplate2
+} from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText4, KNOWN_BLOCK_META_KEYS as KNOWN_BLOCK_META_KEYS2 } from "@bendyline/squisq/markdown";
 import { getChildren as getChildren2 } from "@bendyline/squisq/markdown";
 import { iconMarker } from "@bendyline/squisq/icon-marker";
@@ -30312,6 +30317,8 @@ function blockToSlide(block, index2, knownTemplates) {
   const recognized = hasTemplate2(requestedTemplate) || isCustomTemplate;
   const template = recognized ? requestedTemplate : "sectionHeader";
   const defaults = getTemplateDefaults2(template, headingText2, block);
+  const templateOverrides = omitStringBlockMeta(block.templateOverrides);
+  const coercedTemplateOverrides = templateOverrides ? coerceTemplateParams(template, templateOverrides).input : void 0;
   const {
     id: _id,
     startTime: _st,
@@ -30361,7 +30368,7 @@ function blockToSlide(block, index2, knownTemplates) {
     // `transition=vortex` into the string `"vortex"`, which the player can't
     // animate. Omit them from the content spreads so the typed fields win.
     ...omitBlockMeta(block.templateData),
-    ...omitBlockMeta(block.templateOverrides)
+    ...coercedTemplateOverrides
   };
 }
 var BLOCK_META_KEYS2 = new Set(Object.keys(KNOWN_BLOCK_META_KEYS2));
@@ -30378,6 +30385,19 @@ function omitBlockMeta(data) {
   }
   return hit ? out : data;
 }
+function omitStringBlockMeta(data) {
+  if (!data) return data;
+  let hit = false;
+  const out = {};
+  for (const key of Object.keys(data)) {
+    if (BLOCK_META_KEYS2.has(key)) {
+      hit = true;
+      continue;
+    }
+    out[key] = data[key];
+  }
+  return hit ? out : data;
+}
 var IMAGE_MOTIONS = [
   "zoomIn",
   "zoomOut",
@@ -32173,9 +32193,11 @@ function PlainHtmlPreview({
   className,
   style,
   globalKeyboardShortcuts = false,
-  onFrameChange
+  onFrameChange,
+  onLinkClick
 }) {
   const iframeRef = useRef45(null);
+  const removeFrameLinkHandlerRef = useRef45(() => void 0);
   const setIframeRef = useCallback44(
     (frame) => {
       iframeRef.current = frame;
@@ -32236,6 +32258,29 @@ function PlainHtmlPreview({
     () => renderFn ? renderFn(mdDoc, { title, images: mergedImages, theme, iconsCss }) : "",
     [renderFn, mdDoc, title, mergedImages, theme, iconsCss]
   );
+  const installFrameLinkHandler = useCallback44(() => {
+    removeFrameLinkHandlerRef.current();
+    removeFrameLinkHandlerRef.current = () => void 0;
+    const frameDocument = iframeRef.current?.contentDocument;
+    const FrameElement = frameDocument?.defaultView?.Element;
+    if (!frameDocument || !FrameElement || !onLinkClick) return;
+    const handleClick = (event) => {
+      if (event.button !== 0) return;
+      const target = event.target instanceof FrameElement ? event.target : null;
+      const anchor = target?.closest("a[href]");
+      if (!anchor || !frameDocument.contains(anchor)) return;
+      const href = anchor.getAttribute("href");
+      if (!href || onLinkClick(href) === false) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    frameDocument.addEventListener("click", handleClick, true);
+    removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
+  }, [onLinkClick]);
+  useEffect44(() => {
+    installFrameLinkHandler();
+    return () => removeFrameLinkHandlerRef.current();
+  }, [html, installFrameLinkHandler]);
   useEffect44(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
@@ -32268,6 +32313,7 @@ function PlainHtmlPreview({
       "data-testid": "plain-html-preview",
       title: title ?? "HTML preview",
       srcDoc: html,
+      onLoad: installFrameLinkHandler,
       sandbox: "allow-same-origin",
       style: { ...IFRAME_STYLE, ...style }
     }
@@ -33292,7 +33338,12 @@ function PrintPreview({
 
 // src/PreviewPanel.tsx
 import { Fragment as Fragment19, jsx as jsx66, jsxs as jsxs50 } from "react/jsx-runtime";
-function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
+function PreviewPanel({
+  basePath = "/",
+  className,
+  workspaceContainer,
+  onLinkClick
+}) {
   const {
     doc,
     parseError,
@@ -33483,7 +33534,8 @@ function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
           mediaProvider,
           mediaRevision,
           theme: activeTheme,
-          globalKeyboardShortcuts: !audience
+          globalKeyboardShortcuts: !audience,
+          onLinkClick
         }
       );
     }
@@ -35068,7 +35120,14 @@ ${snippet}` : snippet);
                               "inline"
                             )
                           ] }, "wysiwyg-shell"),
-                          isMarkdownMode && isPreview && /* @__PURE__ */ jsx71(PreviewPanel, { basePath, workspaceContainer })
+                          isMarkdownMode && isPreview && /* @__PURE__ */ jsx71(
+                            PreviewPanel,
+                            {
+                              basePath,
+                              workspaceContainer,
+                              onLinkClick
+                            }
+                          )
                         ]
                       }
                     ),

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CodeContext, S as SceneTextChannel } from './shell-YIIUac26.js';
-export { B as BlockTagVisibility, a as CodeContextSection, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from './shell-YIIUac26.js';
+import { C as CodeContext, S as SceneTextChannel } from './shell-C-KkTBz7.js';
+export { B as BlockTagVisibility, a as CodeContextSection, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from './shell-C-KkTBz7.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
@@ -324,8 +324,13 @@ interface PlainHtmlPreviewProps {
     globalKeyboardShortcuts?: boolean;
     /** Receives the rendered iframe, primarily for printing its isolated document. */
     onFrameChange?: (frame: HTMLIFrameElement | null) => void;
+    /**
+     * Delegate link activation from the isolated iframe to the embedding host.
+     * Return `false` to allow the iframe's default navigation.
+     */
+    onLinkClick?: (href: string) => boolean | undefined;
 }
-declare function PlainHtmlPreview({ markdown, title, images, mediaProvider, mediaRevision, theme, className, style, globalKeyboardShortcuts, onFrameChange, }: PlainHtmlPreviewProps): react_jsx_runtime.JSX.Element;
+declare function PlainHtmlPreview({ markdown, title, images, mediaProvider, mediaRevision, theme, className, style, globalKeyboardShortcuts, onFrameChange, onLinkClick, }: PlainHtmlPreviewProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Emoji Dataset

package/dist/index.js

@@ -182,7 +182,7 @@ import {
   usePreviewSettings,
   useTimelineData,
   useTreeViewData
-} from "./chunk-QN3Q64LV.js";
+} from "./chunk-GNIVYDZH.js";
 import {
   JsonEditor
 } from "./chunk-54UGTQBO.js";

package/dist/shell/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BlockTagVisibility, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from '../shell-YIIUac26.js';
+export { B as BlockTagVisibility, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from '../shell-C-KkTBz7.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@bendyline/squisq/schemas';

package/dist/shell/index.js

@@ -5,7 +5,7 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContext
-} from "../chunk-QN3Q64LV.js";
+} from "../chunk-GNIVYDZH.js";
 import "../chunk-NITZVAXL.js";
 import "../chunk-V44VP242.js";
 import "../chunk-MJJK7YQB.js";

package/dist/{shell-YIIUac26.d.ts → shell-C-KkTBz7.d.ts}

@@ -1071,12 +1071,14 @@ interface PreviewPanelProps {
      * `timing.json` reading.
      */
     workspaceContainer?: ContentContainer | null;
+    /** Delegate authored link activation to the embedding host. */
+    onLinkClick?: (href: string) => boolean | undefined;
 }
 /**
  * Live preview panel that renders the current document as a slideshow
  * or document view. Controls (viewport, mode, theme, transform, captions)
  * are rendered in the main toolbar via PreviewToolbarControls.
  */
-declare function PreviewPanel({ basePath, className, workspaceContainer }: PreviewPanelProps): react_jsx_runtime.JSX.Element;
+declare function PreviewPanel({ basePath, className, workspaceContainer, onLinkClick, }: PreviewPanelProps): react_jsx_runtime.JSX.Element;
 
 export { type BlockTagVisibility as B, type CodeContext as C, type DocumentLinkCandidate as D, type EditorActions as E, type ImageDisplayMode as I, type LayoutMode as L, type MentionCandidate as M, PreviewPanel as P, RawEditor as R, type SceneTextChannel as S, type ThemeInheritance as T, type ViewPreferences as V, type WriteCanvasSettings as W, type CodeContextSection as a, type DocumentLinkProvider as b, type EditorColorScheme as c, type EditorContextValue as d, type EditorMode as e, EditorProvider as f, type EditorProviderProps as g, EditorShell as h, type EditorShellProps as i, type EditorState as j, type EditorView as k, type MentionProvider as l, type PreviewPanelProps as m, type RawEditorProps as n, WysiwygEditor as o, type WysiwygEditorProps as p, useEditorContext as u };

package/dist/styles/index.css

@@ -14938,10 +14938,20 @@
   padding: 5px 9px;
   border: 1px solid var(--squisq-border, #cbd5e1);
   border-radius: 6px;
-  background: var(--squisq-surface-subtle, #f8fafc);
-  color: inherit;
+  background: var( --squisq-surface-subtle, var(--squisq-surface-raised, var(--squisq-input-bg, #f8fafc)) );
+  color: var(--squisq-text, #1e293b);
   cursor: pointer;
 }
+.squisq-mermaid-properties-header button:hover,
+.squisq-mermaid-properties-footer button:hover {
+  border-color: var(--squisq-accent, #4f46e5);
+  background: var( --squisq-surface-hover, var(--squisq-surface-subtle, var(--squisq-input-bg, #f1f5f9)) );
+}
+.squisq-mermaid-properties-header button:focus-visible,
+.squisq-mermaid-properties-footer button:focus-visible {
+  outline: 2px solid var(--squisq-accent, #4f46e5);
+  outline-offset: 2px;
+}
 .squisq-mermaid-properties-header button {
   width: 30px;
   padding: 0;
@@ -14950,9 +14960,13 @@
   justify-content: flex-end;
 }
 .squisq-mermaid-properties-footer button[data-primary=true] {
-  border-color: #4f46e5;
-  background: #4f46e5;
-  color: #fff;
+  border-color: var(--squisq-accent, #4f46e5);
+  background: var(--squisq-accent, #4f46e5);
+  color: var(--squisq-text-on-accent, #fff);
+}
+.squisq-mermaid-properties-footer button[data-primary=true]:hover {
+  border-color: var(--squisq-accent-hover, var(--squisq-accent, #4338ca));
+  background: var(--squisq-accent-hover, var(--squisq-accent, #4338ca));
 }
 .squisq-mermaid-properties-fields {
   display: flex;
@@ -14987,6 +15001,9 @@
   min-height: 30px;
   color: var(--squisq-text, #1e293b);
 }
+.squisq-mermaid-property-toggle input {
+  accent-color: var(--squisq-accent, #4f46e5);
+}
 .squisq-mermaid-shape-search {
   box-sizing: border-box;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -84,9 +84,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.3.2",
-    "@bendyline/squisq-formats": "2.3.2",
-    "@bendyline/squisq-react": "2.3.2",
+    "@bendyline/squisq": "2.3.3",
+    "@bendyline/squisq-formats": "2.3.3",
+    "@bendyline/squisq-react": "2.3.3",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@tiptap/extension-image": "2.27.2",
     "@tiptap/extension-link": "2.27.2",