@bendyline/squisq-editor-react 2.11.24 → 2.11.26

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CodeContext, E as EditorHostMode, S as SceneTextChannel, a as CalcEngineFactory, b as EditorView$1, c as CsvSourceMeta, X as XlsxSourceMeta, F as FormulaEditRecord } from './shell-Cg6Px8fs.js';
-export { A as ApplySourceEditsOptions, B as BlockInsertionBuilder, d as BlockInsertionContext, e as BlockPlacement, f as BlockRange, g as BlockSlice, h as BlockTagVisibility, i as CodeContextSection, j as CoverImageSaveOutput, D as DashboardImageSaveOutput, k as DocumentLinkCandidate, l as DocumentLinkProvider, m as EditorActions, n as EditorColorScheme, o as EditorContextMenuContext, p as EditorContextMenuItem, q as EditorContextMenuItemVisibility, r as EditorContextMenuProvider, s as EditorContextMenuProviderProps, t as EditorContextValue, u as EditorInsertMenuItem, v as EditorMode, w as EditorProvider, x as EditorProviderProps, y as EditorSelectionInfo, z as EditorShell, G as EditorShellProps, H as EditorState, I as FindOptions, J as FindRequest, K as FormulaSessionOptions, L as ImageDisplayMode, M as IngestedSidecar, N as InsertBlockOptions, O as LayoutMode, P as MentionCandidate, Q as MentionProvider, R as OutlineBlock, T as OutlineInsertion, U as PreviewPanel, V as PreviewPanelProps, W as RawEditor, Y as RawEditorProps, Z as ThemeInheritance, _ as ViewPreferences, $ as WriteCanvasSettings, a0 as WysiwygEditor, a1 as WysiwygEditorProps, a2 as XLSX_LOCKED_REASON, a3 as XlsxFormulaSession, a4 as applySourceEditsToText, a5 as blockInsertionPoint, a6 as createXlsxFormulaSession, a7 as getBlockSlices, a8 as headingDepthForInsertion, a9 as ingestSidecarBytes, aa as joinBlockAt, ab as lineToOffset, ac as minimalReplaceEdit, ad as normalizeSourceEdits, ae as offsetToLine, af as resolveOutlineInsertion, ag as sliceIndexAtOffset, ah as sourceOutline, ai as spliceBlock, aj as useEditorContext, ak as useEditorContextMenuItems, al as useEditorInsertMenuItems } from './shell-Cg6Px8fs.js';
+import { C as CodeContext, E as EditorHostMode, S as SceneTextChannel, a as CalcEngineFactory, b as EditorView$1, c as CsvSourceMeta, X as XlsxSourceMeta, F as FormulaEditRecord } from './shell-xuF3vK5Z.js';
+export { A as ApplySourceEditsOptions, B as BlockInsertionBuilder, d as BlockInsertionContext, e as BlockPlacement, f as BlockRange, g as BlockSlice, h as BlockTagVisibility, i as CodeContextSection, j as CoverImageSaveOutput, D as DashboardImageSaveOutput, k as DocumentLinkCandidate, l as DocumentLinkProvider, m as EditorActions, n as EditorColorScheme, o as EditorContextMenuContext, p as EditorContextMenuItem, q as EditorContextMenuItemVisibility, r as EditorContextMenuProvider, s as EditorContextMenuProviderProps, t as EditorContextValue, u as EditorInsertMenuItem, v as EditorMode, w as EditorProvider, x as EditorProviderProps, y as EditorSelectionInfo, z as EditorShell, G as EditorShellProps, H as EditorState, I as FindOptions, J as FindRequest, K as FormulaSessionOptions, L as ImageDisplayMode, M as IngestedSidecar, N as InsertBlockOptions, O as LayoutMode, P as MentionCandidate, Q as MentionProvider, R as OutlineBlock, T as OutlineInsertion, U as PreviewPanel, V as PreviewPanelProps, W as RawEditor, Y as RawEditorProps, Z as ThemeInheritance, _ as ViewPreferences, $ as WriteCanvasSettings, a0 as WysiwygEditor, a1 as WysiwygEditorProps, a2 as XLSX_LOCKED_REASON, a3 as XlsxFormulaSession, a4 as applySourceEditsToText, a5 as blockInsertionPoint, a6 as createXlsxFormulaSession, a7 as getBlockSlices, a8 as headingDepthForInsertion, a9 as ingestSidecarBytes, aa as joinBlockAt, ab as lineToOffset, ac as minimalReplaceEdit, ad as normalizeSourceEdits, ae as offsetToLine, af as resolveOutlineInsertion, ag as sliceIndexAtOffset, ah as sourceOutline, ai as spliceBlock, aj as useEditorContext, ak as useEditorContextMenuItems, al as useEditorInsertMenuItems } from './shell-xuF3vK5Z.js';
 import * as react from 'react';
 import { ReactNode, CSSProperties, ReactElement } from 'react';
 import { Doc, ScheduledClip, VideoPlacement, VideoPipSize, VideoPipShape, VideoPipPosition, MediaEdits, MediaProvider, Theme, CustomTemplateDefinition, ThemeSeedColors, ViewportPreset, ViewportConfig, Block, MediaEntry, DiagramEdgeAnchor } from '@bendyline/squisq/schemas';
@@ -1544,7 +1544,7 @@ interface UseMonacoLoaderResult {
 }
 /** Start Monaco and the requested language profile before a React editor mounts. */
 declare function preloadMonaco(requestedLanguages?: MonacoLanguageRequest, options?: MonacoLanguageLoadOptions): Promise<typeof monaco_editor>;
-/** Load completion and snippet UI after the compact editor is already usable. */
+/** Register completion and snippet UI before a React editor can mount. */
 declare function preloadMonacoSuggestions(): Promise<void>;
 /** Subscribe to the shared Monaco namespace and a demand-loaded language profile. */
 declare function useMonacoLoader(requestedLanguages?: MonacoLanguageRequest, options?: MonacoLanguageLoadOptions): UseMonacoLoaderResult;

package/dist/index.js

@@ -154,6 +154,7 @@ import {
   moveItemDownOp,
   moveItemUpOp,
   moveNodeOp,
+  navigateViewTabs,
   nextTimelineEventId,
   normalizeMermaidFlowchartShape,
   outdentItemOp,
@@ -232,7 +233,7 @@ import {
   videoEmbedParagraphJson,
   viewStateFromBinding,
   writeHeadingViewState
-} from "./chunk-E7JVS6N5.js";
+} from "./chunk-IRFFIMKM.js";
 import {
   EditorProvider,
   applySourceEditsToText,
@@ -436,6 +437,7 @@ function defaultIconFor(entry) {
 }
 
 // src/ViewSwitcher.tsx
+import { useEffect, useState } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var VIEWS = [
   { id: "wysiwyg", label: "Write", shortcutKey: "1" },
@@ -444,6 +446,8 @@ var VIEWS = [
 ];
 function ViewSwitcher({ className }) {
   const { activeView, setActiveView, editorMode } = useEditorContext();
+  const [focusedView, setFocusedView] = useState(activeView);
+  useEffect(() => setFocusedView(activeView), [activeView]);
   const visibleViews = editorMode === "code" ? VIEWS.filter((v) => v.id === "raw") : VIEWS;
   if (visibleViews.length <= 1) return null;
   return /* @__PURE__ */ jsx2(
@@ -455,8 +459,14 @@ function ViewSwitcher({ className }) {
       children: visibleViews.map((view) => /* @__PURE__ */ jsxs2(
         "button",
         {
+          type: "button",
           role: "tab",
+          tabIndex: focusedView === view.id ? 0 : -1,
+          onFocus: () => setFocusedView(view.id),
           "aria-selected": activeView === view.id,
+          onKeyDown: (event) => {
+            navigateViewTabs(event);
+          },
           className: `squisq-view-tab ${activeView === view.id ? "squisq-view-tab--active" : ""}`,
           onClick: () => setActiveView(view.id),
           title: `${view.label} (${platformShortcut(`Shift+${view.shortcutKey}`)})`,
@@ -474,11 +484,11 @@ function ViewSwitcher({ className }) {
 // src/ThemeCustomizerPanel.tsx
 import {
   useCallback,
-  useEffect,
+  useEffect as useEffect2,
   useLayoutEffect,
   useMemo,
   useRef,
-  useState
+  useState as useState2
 } from "react";
 import { deriveScale, isHex, serializeTheme } from "@bendyline/squisq/schemas";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -492,22 +502,22 @@ function ThemeCustomizerPanel({
   onReset,
   triggerLabel
 }) {
-  const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState(() => themeToDraft(value));
-  const [popoverPosition, setPopoverPosition] = useState(null);
+  const [open, setOpen] = useState2(false);
+  const [draft, setDraft] = useState2(() => themeToDraft(value));
+  const [popoverPosition, setPopoverPosition] = useState2(null);
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const close = useCallback(() => setOpen(false), []);
   useEscapeDismissal(open, close, triggerRef);
   const externalIdRef = useRef(value?.id ?? null);
-  useEffect(() => {
+  useEffect2(() => {
     const incomingId = value?.id ?? null;
     if (incomingId !== externalIdRef.current) {
       externalIdRef.current = incomingId;
       setDraft(themeToDraft(value));
     }
   }, [value]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {

package/dist/monaco.js

@@ -6,6 +6,7 @@ import {
 } from "./chunk-V4NBQF5C.js";
 
 // src/monacoFeatures.ts
+import "monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestMemory.js";
 import "monaco-editor/esm/vs/editor/browser/coreCommands.js";
 import "monaco-editor/esm/vs/editor/browser/widget/codeEditor/codeEditorWidget.js";
 import "monaco-editor/esm/vs/editor/contrib/bracketMatching/browser/bracketMatching.js";

package/dist/shell/index.d.ts

@@ -1,4 +1,4 @@
-export { h as BlockTagVisibility, k as DocumentLinkCandidate, l as DocumentLinkProvider, m as EditorActions, n as EditorColorScheme, o as EditorContextMenuContext, p as EditorContextMenuItem, q as EditorContextMenuItemVisibility, r as EditorContextMenuProvider, s as EditorContextMenuProviderProps, t as EditorContextValue, E as EditorHostMode, u as EditorInsertMenuItem, v as EditorMode, w as EditorProvider, x as EditorProviderProps, z as EditorShell, G as EditorShellProps, H as EditorState, b as EditorView, L as ImageDisplayMode, O as LayoutMode, P as MentionCandidate, Q as MentionProvider, U as PreviewPanel, V as PreviewPanelProps, W as RawEditor, Y as RawEditorProps, Z as ThemeInheritance, _ as ViewPreferences, a0 as WysiwygEditor, a1 as WysiwygEditorProps, aj as useEditorContext, ak as useEditorContextMenuItems, al as useEditorInsertMenuItems } from '../shell-Cg6Px8fs.js';
+export { h as BlockTagVisibility, k as DocumentLinkCandidate, l as DocumentLinkProvider, m as EditorActions, n as EditorColorScheme, o as EditorContextMenuContext, p as EditorContextMenuItem, q as EditorContextMenuItemVisibility, r as EditorContextMenuProvider, s as EditorContextMenuProviderProps, t as EditorContextValue, E as EditorHostMode, u as EditorInsertMenuItem, v as EditorMode, w as EditorProvider, x as EditorProviderProps, z as EditorShell, G as EditorShellProps, H as EditorState, b as EditorView, L as ImageDisplayMode, O as LayoutMode, P as MentionCandidate, Q as MentionProvider, U as PreviewPanel, V as PreviewPanelProps, W as RawEditor, Y as RawEditorProps, Z as ThemeInheritance, _ as ViewPreferences, a0 as WysiwygEditor, a1 as WysiwygEditorProps, aj as useEditorContext, ak as useEditorContextMenuItems, al as useEditorInsertMenuItems } from '../shell-xuF3vK5Z.js';
 import 'react';
 import '@bendyline/squisq/table';
 import '@bendyline/squisq-calc';

package/dist/shell/index.js

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

package/dist/{shell-Cg6Px8fs.d.ts → shell-xuF3vK5Z.d.ts}

@@ -1190,6 +1190,8 @@ interface WriteCanvasSettings {
 type EditorHostMode = 'document' | 'chat';
 
 interface EditorShellProps {
+    /** Accessible name for the editing surface, separate from its empty placeholder. */
+    ariaLabel?: string;
     /** Initial markdown content */
     initialMarkdown?: string;
     /** Initial active view (default: 'wysiwyg') */
@@ -1757,7 +1759,7 @@ interface EditorShellProps {
  * Complete markdown editor shell with toolbar, view switcher, and three
  * editing modes: Raw (Monaco), WYSIWYG (Tiptap), and Preview.
  */
-declare function EditorShell({ initialMarkdown, initialView, hostMode, defaultViewportPreset, articleId, basePath, onChange, onLinkClick, showCodeCopyButton, onCopyCode, colorScheme, className, height, minHeight, maxHeight, mediaProvider, mediaEditRenders, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, showFilesWhenNotEmpty, showFormattingControls, showInsertControls, allowBinaryDownloads, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, summarizationDesigner, statusBarSlotRight, sidePanelSlot, reviewProviders, showPlayTab, allowPresentationWindow, allowPresentationFullscreen, allowPrint, submitOnEnter, calcEngineFactory, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, saveCoverImageOutput, saveDashboardImageOutput, language, findMode, onFindModeChange, findRequest, findShortcut, mentionProvider, proofing, proofingDefaultEnabled, proofingSpellingEnabled, proofingGrammarEnabled, proofingIgnoreStore, speechInput, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, defaultThemeId, defaultThemeLabel, }: EditorShellProps): react.JSX.Element;
+declare function EditorShell({ ariaLabel, initialMarkdown, initialView, hostMode, defaultViewportPreset, articleId, basePath, onChange, onLinkClick, showCodeCopyButton, onCopyCode, colorScheme, className, height, minHeight, maxHeight, mediaProvider, mediaEditRenders, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, showFilesWhenNotEmpty, showFormattingControls, showInsertControls, allowBinaryDownloads, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, summarizationDesigner, statusBarSlotRight, sidePanelSlot, reviewProviders, showPlayTab, allowPresentationWindow, allowPresentationFullscreen, allowPrint, submitOnEnter, calcEngineFactory, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, saveCoverImageOutput, saveDashboardImageOutput, language, findMode, onFindModeChange, findRequest, findShortcut, mentionProvider, proofing, proofingDefaultEnabled, proofingSpellingEnabled, proofingGrammarEnabled, proofingIgnoreStore, speechInput, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, defaultThemeId, defaultThemeLabel, }: EditorShellProps): react.JSX.Element;
 
 /**
  * Shared editor context menu.
@@ -1815,6 +1817,8 @@ declare function EditorContextMenuProvider({ rootRef, readOnly, children, }: Edi
  * Syncs changes back to EditorContext on every keystroke (debounced).
  */
 interface RawEditorProps {
+    /** Accessible name shared by Monaco and its loading fallback. */
+    ariaLabel?: string;
     /**
      * Monaco editor theme name (default: `'vs'`). Accepts Monaco's built-in
      * theme ids (`'vs'`, `'vs-dark'`, `'hc-black'`) — which are transparently
@@ -1843,9 +1847,11 @@ interface RawEditorProps {
  * Raw markdown editor using Monaco Editor.
  * Binds to the shared EditorContext for source synchronization.
  */
-declare function RawEditor({ monacoTheme, minimap, fontSize, wordWrap, className, submitOnEnter, readOnly, }: RawEditorProps): react.JSX.Element;
+declare function RawEditor({ ariaLabel, monacoTheme, minimap, fontSize, wordWrap, className, submitOnEnter, readOnly, }: RawEditorProps): react.JSX.Element;
 
 interface WysiwygEditorProps {
+    /** Accessible name of this multiline text input. */
+    ariaLabel?: string;
     /**
      * Placeholder text when the editor is empty. If omitted, one of several
      * rotating prompts is picked at random on mount. Pass a fixed string to
@@ -1880,7 +1886,7 @@ interface WysiwygEditorProps {
  * Rich WYSIWYG markdown editor built on Tiptap (ProseMirror).
  * Binds to the shared EditorContext for source synchronization.
  */
-declare function WysiwygEditor({ placeholder, className, submitOnEnter, readOnly, writeCanvasSettings, onOpenFilesPanel, calcEngineFactory, }: WysiwygEditorProps): react.JSX.Element;
+declare function WysiwygEditor({ ariaLabel, placeholder, className, submitOnEnter, readOnly, writeCanvasSettings, onOpenFilesPanel, calcEngineFactory, }: WysiwygEditorProps): react.JSX.Element;
 
 interface PreviewPanelProps {
     /** Base path for resolving media URLs in DocPlayer */

package/dist/styles/index.css

@@ -7948,12 +7948,15 @@
   align-items: flex-end;
   box-sizing: border-box;
 }
-.squisq-toolbar-view-tab-wrap {
+.squisq-toolbar-view-tab-list,
+.squisq-toolbar-view-tab-wrap,
+.squisq-toolbar-use-menu {
   display: flex;
   align-items: flex-end;
   align-self: stretch;
 }
-.squisq-toolbar-use-tab {
+.squisq-toolbar-use-tab,
+.squisq-toolbar-use-menu {
   position: relative;
   border-bottom: 2px solid transparent;
 }
@@ -7966,10 +7969,11 @@
   border-bottom-color: var(--squisq-accent);
 }
 .squisq-toolbar-use-tab > .squisq-toolbar-view-tab:focus-visible,
-.squisq-toolbar-use-tab > .squisq-use-mode-trigger:focus-visible {
+.squisq-toolbar-use-menu > .squisq-use-mode-trigger:focus-visible {
   outline: none;
 }
-.squisq-toolbar-use-tab:has(> .squisq-toolbar-view-tab:focus-visible, > .squisq-use-mode-trigger:focus-visible)::after {
+.squisq-toolbar-use-tab:has(> .squisq-toolbar-view-tab:focus-visible)::after,
+.squisq-toolbar-use-menu:has(> .squisq-use-mode-trigger:focus-visible)::after {
   content: "";
   position: absolute;
   inset: 2px 0 4px;
@@ -12203,6 +12207,9 @@
   right: 0;
   z-index: 90;
   min-width: 200px;
+  max-width: calc(100vw - 16px);
+  box-sizing: border-box;
+  overflow-y: auto;
   margin-top: 4px;
   padding: 6px 0;
   background: var(--squisq-bg);
@@ -12210,6 +12217,7 @@
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   color: var(--squisq-text);
+  font-family: var(--squisq-ux-font, system-ui, sans-serif);
 }
 .squisq-view-menu-row {
   display: flex;
@@ -12223,10 +12231,39 @@
 .squisq-view-menu-row:hover {
   background: var(--squisq-row-hover);
 }
+button.squisq-view-menu-row,
+button.squisq-view-menu-radio-row {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  text-align: left;
+}
+button.squisq-view-menu-row:focus-visible,
+button.squisq-view-menu-radio-row:focus-visible {
+  outline: 2px solid var(--squisq-accent);
+  outline-offset: -2px;
+}
 .squisq-view-menu-checkbox {
   margin: 0;
   cursor: pointer;
 }
+.squisq-view-menu-checkbox,
+.squisq-view-menu-radio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  border: 1px solid var(--squisq-border-strong);
+  color: var(--squisq-accent-strong);
+  font-size: 10px;
+}
+.squisq-view-menu-radio {
+  border-radius: 50%;
+}
 .squisq-view-menu-label {
   flex: 1;
 }
@@ -14378,6 +14415,7 @@
 .squisq-doc-settings-dialog {
   width: 100%;
   max-width: 440px;
+  max-height: calc(100dvh - 32px);
   background: var(--squisq-bg);
   color: var(--squisq-text);
   border: 1px solid var(--squisq-border);
@@ -14387,6 +14425,7 @@
   flex-direction: column;
 }
 .squisq-doc-settings-header {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -14411,6 +14450,8 @@
   color: var(--squisq-text);
 }
 .squisq-doc-settings-body {
+  min-height: 0;
+  overflow-y: auto;
   padding: 16px;
   display: flex;
   flex-direction: column;
@@ -14452,6 +14493,7 @@
   font-weight: 600;
 }
 .squisq-doc-settings-footer {
+  flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
   gap: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.11.24",
+  "version": "2.11.26",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -105,9 +105,9 @@
     "@bendyline/squisq": "2.11.19",
     "@bendyline/squisq-calc": "2.11.2",
     "@bendyline/squisq-formats": "2.6.20",
-    "@bendyline/squisq-grid-react": "2.11.20",
-    "@bendyline/squisq-react": "2.11.22",
-    "@bendyline/squisq-video-react": "2.4.26",
+    "@bendyline/squisq-grid-react": "2.11.21",
+    "@bendyline/squisq-react": "2.11.24",
+    "@bendyline/squisq-video-react": "2.4.28",
     "@fortawesome/fontawesome-free": "7.3.1",
     "@tiptap/core": "2.27.3",
     "@tiptap/extension-heading": "2.27.3",