@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/useMonacoLoader.ts

@@ -49,42 +49,19 @@ export function useMonacoLoader(): UseMonacoLoaderResult {
   useEffect(() => {
     if (state.ready) return;
     if (!monacoPromise) {
-      // Import the explicit ESM entry file rather than the bare
-      // package specifier `'monaco-editor'`. The package's
-      // `package.json` has no `main` / no `exports` (only `module`),
-      // which trips Vite's strict resolver on both static and
-      // dynamic imports of the bare name. Pointing at the file
-      // directly — the same path monaco's `module` field points at —
-      // turns this into a regular file-path resolve that doesn't
-      // care about the manifest's entry fields. Works identically
-      // in Vite dev / build, vitest's transform pipeline, and any
-      // bundler-using downstream consumer.
+      // Load Monaco through squisq's canonical `./monaco` entry (see that
+      // file for exactly which slice of Monaco ships and why). Centralizing
+      // the choice there means the editor and any downstream app that imports
+      // `@bendyline/squisq-editor-react/monaco` share ONE instance and feature
+      // set — no host aliasing, no hand-rolled slim entry that silently drops
+      // the suggest widget. The import is dynamic so consumers that only use
+      // types or `JsonEditor` never pull Monaco into their graph.
       //
-      // Use `editor.main.js`, NOT `editor.api.js`. The `api` entry is
-      // the bare standalone API with zero language contributions —
-      // RawEditor's `defaultLanguage="typescript"` then mounts with
-      // no tokenizer registered, and every file renders as
-      // undifferentiated foreground text (the regression that surfaced
-      // when a `.ts` file in the chat workspace previewer showed up
-      // with no syntax coloring). `editor.main.js` re-exports the API
-      // and additionally pulls in `basic-languages/monaco.contribution`
-      // (TM grammars for ~70 languages) plus the four rich language
-      // services (css / html / json / typescript). This is what makes
-      // `defaultLanguage` actually do anything. The cost is the language
-      // bundle — but since we load it lazily on first EditorShell mount,
-      // it stays out of the resolver graph for consumers that only
-      // import types or `JsonEditor` from this package.
-      // `editor.main.js` ships without a sibling `.d.ts` (only
-      // `editor.api.d.ts` is published), so the subpath import has no
-      // resolvable declaration. The `declare module` shim in
-      // `src/types/monaco-shims.d.ts` makes it import as `any`; the
-      // `as unknown as` cast below pins the surface to the full namespace.
-      // At runtime `main` re-exports the entire `editor.api` surface
-      // alongside the language contributions, so the cast is sound.
+      // `./monaco` re-exports `editor.api` (the only barrel with a `.d.ts`)
+      // after side-effect-importing `editor.main.js`; the `as unknown as` cast
+      // pins the settled module to the full monaco namespace.
       monacoPromise = (
-        import('monaco-editor/esm/vs/editor/editor.main.js') as unknown as Promise<
-          typeof import('monaco-editor')
-        >
+        import('./monaco.js') as unknown as Promise<typeof import('monaco-editor')>
       ).then((m) => {
         loader.config({ monaco: m });
         monacoNamespace = m;

package/src/wysiwygImageUpload.ts

@@ -0,0 +1,113 @@
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import type { EditorView as ProseMirrorView } from '@tiptap/pm/view';
+
+type ImageMutationView = Pick<ProseMirrorView, 'state' | 'dispatch'>;
+
+/**
+ * Upload images while stable placeholder nodes retain the original event
+ * position as the surrounding ProseMirror document continues to change.
+ */
+export async function uploadAndInsertImages(
+  view: ImageMutationView,
+  files: File[],
+  mediaProvider: MediaProvider,
+  onMediaUploaded?: () => void,
+): Promise<void> {
+  const placeholders = files.map(() => `squisq-upload:${uniquePasteToken()}`);
+  const imageType = view.state.schema.nodes.image;
+  if (!imageType) return;
+
+  let placeholderTr = view.state.tr;
+  for (const token of placeholders) {
+    placeholderTr = placeholderTr.replaceSelectionWith(
+      imageType.create({
+        src: 'data:image/gif;base64,R0lGODlhAQABAAAAACw=',
+        alt: 'Uploading image',
+        title: token,
+      }),
+    );
+  }
+  view.dispatch(placeholderTr);
+
+  for (let index = 0; index < files.length; index++) {
+    const file = files[index];
+    const token = placeholders[index];
+    try {
+      const buffer = await file.arrayBuffer();
+      const mimeType = file.type || 'image/png';
+      const name =
+        file.name && file.name !== 'image.png'
+          ? file.name
+          : `pasted-${uniquePasteToken()}.${extFromMime(mimeType)}`;
+      const relativePath = await mediaProvider.addMedia(name, buffer, mimeType);
+      const altText = name.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
+      replaceUploadPlaceholder(view, token, relativePath, altText);
+      onMediaUploaded?.();
+    } catch (err) {
+      removeUploadPlaceholder(view, token);
+      console.error('Failed to upload dropped image:', err);
+    }
+  }
+}
+
+function findUploadPlaceholder(
+  view: ImageMutationView,
+  token: string,
+): { pos: number; node: ProseMirrorNode } | null {
+  let found: { pos: number; node: ProseMirrorNode } | null = null;
+  view.state.doc.descendants((node, pos) => {
+    if (node.type === view.state.schema.nodes.image && node.attrs.title === token) {
+      found = { pos, node };
+      return false;
+    }
+    return undefined;
+  });
+  return found;
+}
+
+function replaceUploadPlaceholder(
+  view: ImageMutationView,
+  token: string,
+  src: string,
+  alt: string,
+): void {
+  const found = findUploadPlaceholder(view, token);
+  if (!found) return;
+  view.dispatch(
+    view.state.tr.setNodeMarkup(found.pos, undefined, {
+      ...found.node.attrs,
+      src,
+      alt,
+      title: null,
+    }),
+  );
+}
+
+function removeUploadPlaceholder(view: ImageMutationView, token: string): void {
+  const found = findUploadPlaceholder(view, token);
+  if (!found) return;
+  view.dispatch(view.state.tr.delete(found.pos, found.pos + found.node.nodeSize));
+}
+
+let pasteCounter = 0;
+function uniquePasteToken(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  pasteCounter = (pasteCounter + 1) % 1_000_000;
+  return `${Date.now()}-${pasteCounter.toString(36)}`;
+}
+
+function extFromMime(mime: string): string {
+  const map: Record<string, string> = {
+    'image/png': 'png',
+    'image/jpeg': 'jpg',
+    'image/jpg': 'jpg',
+    'image/gif': 'gif',
+    'image/webp': 'webp',
+    'image/svg+xml': 'svg',
+    'image/avif': 'avif',
+  };
+  return map[mime.toLowerCase()] ?? 'png';
+}

package/src/diagram/DiagramExtension.ts

@@ -1,209 +0,0 @@
-/**
- * DiagramExtension — Tiptap/ProseMirror plugin that:
- *
- * 1. Mounts a React-Flow canvas (`DiagramWidget`) immediately after every
- *    heading whose `dataTemplate === 'diagram'`.
- * 2. Hides the direct sub-headings of each diagram parent (until the next
- *    equal-or-shallower heading) by tagging them with a `data-squisq-diagram-child`
- *    attribute — CSS in `styles/diagram.css` does the actual hiding.
- *
- * Widgets are rendered as plain DOM nodes attached to a ProseMirror
- * `Decoration.widget`. React is mounted into the widget DOM with
- * `react-dom/client`'s `createRoot`, and unmounted on the widget's
- * `destroy` hook.
- */
-
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-import type { EditorState } from '@tiptap/pm/state';
-import type { Editor } from '@tiptap/react';
-import { createRoot, type Root } from 'react-dom/client';
-import { createElement } from 'react';
-import type { Node as PMNode } from '@tiptap/pm/model';
-import { parsePandocAttrTokens } from '@bendyline/squisq/markdown';
-import { DiagramWidget } from './DiagramWidget';
-
-/**
- * Stable identifier for a diagram heading — prefers the persisted
- * Pandoc `#id`, falls back to a slugified version of the heading's
- * text. Used as part of the widget decoration's `key` so the widget
- * survives attribute-only doc changes (drag/resize commits).
- */
-export function getHeadingKey(node: PMNode): string {
-  const raw = (node.attrs as Record<string, unknown>).dataBlockAttrs;
-  if (typeof raw === 'string' && raw.length > 0) {
-    const attrs = parsePandocAttrTokens(raw);
-    if (attrs.id) return attrs.id;
-  }
-  let text = '';
-  node.content.forEach((child) => {
-    if (child.isText) text += child.text ?? '';
-  });
-  return (
-    text
-      .toLowerCase()
-      .replace(/[^\w\s-]/g, '')
-      .replace(/[\s_]+/g, '-')
-      .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '') || 'block'
-  );
-}
-
-/**
- * Find the current document position of a diagram heading by its
- * stable key. Returns `null` if the heading no longer exists (e.g. the
- * user removed it). Used by the widget to re-resolve its parent
- * position on every read, since the kept-alive widget's captured
- * `parentPos` would otherwise go stale when content above shifts.
- */
-export function findDiagramHeadingPos(editor: Editor, headingKey: string): number | null {
-  let found: number | null = null;
-  editor.state.doc.descendants((node, pos) => {
-    if (found != null) return false;
-    if (node.type.name !== 'heading') return;
-    const attrs = node.attrs as { dataTemplate?: string };
-    if (attrs.dataTemplate !== 'diagram') return;
-    if (getHeadingKey(node) === headingKey) {
-      found = pos;
-      return false;
-    }
-  });
-  return found;
-}
-
-const KEY = new PluginKey('squisq-diagram');
-
-interface DiagramRoot {
-  el: HTMLElement;
-  root: Root;
-}
-
-function buildDecorations(state: EditorState, editor: Editor): DecorationSet {
-  const decos: Decoration[] = [];
-
-  state.doc.descendants((node, pos) => {
-    if (node.type.name !== 'heading') return;
-    const attrs = node.attrs as { level: number; dataTemplate?: string };
-    if (attrs.dataTemplate === 'diagram') {
-      const parentDepth = attrs.level;
-      const widgetPos = pos + node.nodeSize;
-      const parentPos = pos;
-      // Stable widget key derived from the heading's persisted id (or its
-      // text-derived slug). ProseMirror treats decorations with matching
-      // keys as equal, so it keeps the existing widget DOM (and the
-      // mounted React root) across attribute-only doc changes — which
-      // happen on every drag commit when we write `x=`/`y=` back to the
-      // heading. Without this, every drop would destroy and recreate the
-      // canvas, blowing away pan/zoom and making the cards appear to snap
-      // back to their pre-fit position.
-      const headingKey = getHeadingKey(node);
-      decos.push(
-        Decoration.widget(
-          widgetPos,
-          (view) => {
-            const container = document.createElement('div');
-            container.className = 'squisq-diagram-widget-host';
-            container.contentEditable = 'false';
-            // Stop ProseMirror from treating clicks/keys inside the
-            // widget as document interactions.
-            container.addEventListener('mousedown', (e) => e.stopPropagation());
-            container.addEventListener('keydown', (e) => e.stopPropagation());
-
-            const root = createRoot(container);
-            root.render(
-              createElement(DiagramWidget, {
-                editor,
-                headingKey,
-                fallbackParentPos: parentPos,
-                host: view.dom.parentElement ?? view.dom,
-              }),
-            );
-
-            // Stash for destroy.
-            (container as HTMLElement & { __squisqDiagramRoot?: DiagramRoot }).__squisqDiagramRoot =
-              {
-                el: container,
-                root,
-              };
-            return container;
-          },
-          {
-            destroy: (dom) => {
-              const ref = (dom as HTMLElement & { __squisqDiagramRoot?: DiagramRoot })
-                .__squisqDiagramRoot;
-              if (ref) {
-                // Defer to next tick so React isn't unmounted mid-render.
-                setTimeout(() => ref.root.unmount(), 0);
-              }
-            },
-            // Cluster the widget tightly after the heading; don't side-bias.
-            side: 1,
-            ignoreSelection: true,
-            key: `squisq-diagram-${headingKey}`,
-          },
-        ),
-      );
-
-      // Mark child headings (depth = parentDepth + 1 .. 6, until next ≤parentDepth).
-      let cursor = pos + node.nodeSize;
-      while (cursor < state.doc.content.size) {
-        const child = state.doc.nodeAt(cursor);
-        if (!child) break;
-        if (child.type.name === 'heading') {
-          const childLevel = (child.attrs as { level: number }).level;
-          if (childLevel <= parentDepth) break;
-          decos.push(
-            Decoration.node(cursor, cursor + child.nodeSize, {
-              'data-squisq-diagram-child': 'true',
-            }),
-          );
-        }
-        cursor += child.nodeSize;
-      }
-    }
-  });
-
-  return DecorationSet.create(state.doc, decos);
-}
-
-export interface DiagramExtensionOptions {
-  /** When false, the extension is inert (no widgets, no decorations). */
-  enabled?: boolean;
-}
-
-export const DiagramExtension = Extension.create<DiagramExtensionOptions>({
-  name: 'squisqDiagram',
-
-  addOptions() {
-    return {
-      enabled: true,
-    };
-  },
-
-  addProseMirrorPlugins() {
-    const editor = this.editor as Editor;
-    const enabled = this.options.enabled !== false;
-    if (!enabled) return [];
-
-    return [
-      new Plugin({
-        key: KEY,
-        state: {
-          init: (_config, state) => buildDecorations(state, editor),
-          apply: (tr, oldDecos, _oldState, newState) => {
-            if (!tr.docChanged) return oldDecos;
-            return buildDecorations(newState, editor);
-          },
-        },
-        props: {
-          decorations(state) {
-            return this.getState(state);
-          },
-        },
-      }),
-    ];
-  },
-});
-
-export default DiagramExtension;

package/src/diagram/DiagramWidget.tsx

@@ -1,270 +0,0 @@
-/**
- * DiagramWidget — the Squisq-Scene-backed canvas that sits below a
- * `### Title {[diagram]}` heading in the WYSIWYG view.
- *
- * Owns the maximize toggle. Resolves the parent heading's position
- * dynamically each render via `headingKey`, so the widget can survive
- * attribute-only doc changes (drag commits) without going stale when
- * content above the diagram shifts.
- *
- * Pushes user actions back through the `diagramCommands` helpers.
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import { DiagramCanvas, type DiagramCommand } from './DiagramCanvas';
-import { DIAGRAM_TOOLS, DIAGRAM_VIEWPORT } from './diagramConstants';
-import { DiagramMaximizedOverlay } from './DiagramMaximizedOverlay';
-import { useDiagramData } from './useDiagramData';
-import { findDiagramHeadingPos } from './DiagramExtension';
-import { SceneBlockToolbar, type SceneBlockAction } from '../scene/SceneBlockToolbar';
-import { nodeIdFromCardLayerId, NODE_WIDTH, NODE_HEIGHT } from '../scene';
-import { Icon } from '../Icon';
-import {
-  moveNode,
-  resizeNode,
-  addConnection,
-  removeConnection,
-  renameNode,
-  addNode,
-  removeNode,
-  getDiagramHeight,
-  setDiagramHeight,
-} from './diagramCommands';
-
-/** Smallest height the canvas can be dragged to (px). */
-const MIN_DIAGRAM_HEIGHT = 160;
-/** Default canvas height when none is pinned — must match `.squisq-diagram-inline` in diagram.css. */
-const DEFAULT_DIAGRAM_HEIGHT = 420;
-
-interface DiagramWidgetProps {
-  editor: Editor;
-  /** Stable id derived from the parent heading (slug / `#id`). */
-  headingKey: string;
-  /** Position of the parent heading at widget-creation time. Used as a
-   * fallback when the dynamic lookup fails (e.g. before the first
-   * transaction). */
-  fallbackParentPos: number;
-  /** Host element used for portal targeting by the maximize overlay. */
-  host?: HTMLElement | null;
-}
-
-export function DiagramWidget({ editor, headingKey, fallbackParentPos, host }: DiagramWidgetProps) {
-  // Re-resolve parentPos on every editor transaction so writes target
-  // the current heading position even after content above shifts. The same
-  // pass refreshes the pinned canvas height from the heading annotation so
-  // an external edit (or markdown reload) is reflected.
-  const [parentPos, setParentPos] = useState<number>(
-    () => findDiagramHeadingPos(editor, headingKey) ?? fallbackParentPos,
-  );
-  const [pinnedHeight, setPinnedHeight] = useState<number | null>(() =>
-    getDiagramHeight(editor, findDiagramHeadingPos(editor, headingKey) ?? fallbackParentPos),
-  );
-  useEffect(() => {
-    const onUpdate = () => {
-      const next = findDiagramHeadingPos(editor, headingKey);
-      if (next != null && next !== parentPos) setParentPos(next);
-      setPinnedHeight(getDiagramHeight(editor, next ?? parentPos));
-    };
-    editor.on('transaction', onUpdate);
-    return () => {
-      editor.off('transaction', onUpdate);
-    };
-  }, [editor, headingKey, parentPos]);
-
-  const { nodes, edges } = useDiagramData(editor, parentPos);
-  const [maximized, setMaximized] = useState(false);
-
-  // Live height while the bottom handle is being dragged (null = not
-  // dragging). Takes precedence over the persisted height so the canvas
-  // tracks the pointer before the markdown write lands on release.
-  const [dragHeight, setDragHeight] = useState<number | null>(null);
-  const inlineRef = useRef<HTMLDivElement>(null);
-  const effectiveHeight = dragHeight ?? pinnedHeight;
-
-  const onResizeStart = useCallback(
-    (e: React.PointerEvent) => {
-      // The handle owns this gesture — keep ProseMirror and the Scene from
-      // treating it as a selection / canvas drag.
-      e.preventDefault();
-      e.stopPropagation();
-      const startY = e.clientY;
-      // Measure the live rendered height so a drag starting from the CSS
-      // default (no pinned height yet) grows from the right baseline.
-      const startHeight =
-        inlineRef.current?.getBoundingClientRect().height ??
-        effectiveHeight ??
-        DEFAULT_DIAGRAM_HEIGHT;
-      const heightAt = (clientY: number) =>
-        Math.max(MIN_DIAGRAM_HEIGHT, Math.round(startHeight + (clientY - startY)));
-      const prevCursor = document.body.style.cursor;
-      const prevSelect = document.body.style.userSelect;
-      document.body.style.cursor = 'ns-resize';
-      document.body.style.userSelect = 'none';
-      const onMove = (ev: PointerEvent) => setDragHeight(heightAt(ev.clientY));
-      const onUp = (ev: PointerEvent) => {
-        window.removeEventListener('pointermove', onMove);
-        window.removeEventListener('pointerup', onUp);
-        document.body.style.cursor = prevCursor;
-        document.body.style.userSelect = prevSelect;
-        const finalH = heightAt(ev.clientY);
-        setDragHeight(null);
-        const livePos = findDiagramHeadingPos(editor, headingKey) ?? parentPos;
-        setDiagramHeight(editor, livePos, finalH);
-      };
-      window.addEventListener('pointermove', onMove);
-      window.addEventListener('pointerup', onUp);
-    },
-    [editor, headingKey, parentPos, effectiveHeight],
-  );
-
-  // Double-click the handle to clear the pinned height (revert to default).
-  const onResizeReset = useCallback(() => {
-    const livePos = findDiagramHeadingPos(editor, headingKey) ?? parentPos;
-    setDragHeight(null);
-    setDiagramHeight(editor, livePos, null);
-  }, [editor, headingKey, parentPos]);
-
-  const dispatch = useCallback(
-    (cmd: DiagramCommand) => {
-      // Re-resolve at dispatch time too — the React state may not have
-      // caught up yet when the user issues rapid-fire commands.
-      const livePos = findDiagramHeadingPos(editor, headingKey) ?? parentPos;
-      switch (cmd.kind) {
-        case 'moveNode':
-          moveNode(editor, livePos, cmd.nodeId, cmd.x, cmd.y);
-          break;
-        case 'resizeNode':
-          resizeNode(editor, livePos, cmd.nodeId, cmd.width, cmd.height);
-          break;
-        case 'addConnection':
-          addConnection(editor, livePos, cmd.source, cmd.target, cmd.type);
-          break;
-        case 'removeConnection':
-          removeConnection(editor, livePos, cmd.source, cmd.target, cmd.type);
-          break;
-        case 'renameNode':
-          renameNode(editor, livePos, cmd.nodeId, cmd.newLabel);
-          break;
-        case 'addNode': {
-          const used = new Set(nodes.map((n) => n.id));
-          let i = nodes.length + 1;
-          let id = `node-${i}`;
-          while (used.has(id)) {
-            i++;
-            id = `node-${i}`;
-          }
-          addNode(editor, livePos, id, `Node ${i}`, cmd.x, cmd.y);
-          break;
-        }
-        case 'removeNode':
-          removeNode(editor, livePos, cmd.nodeId);
-          break;
-      }
-    },
-    [editor, headingKey, parentPos, nodes],
-  );
-
-  // ── Shared toolbar (above the canvas) ────────────────────
-  // Tool selection + node CRUD live here rather than inside the canvas,
-  // so diagram/drawing/layout share one consistent bar above each canvas.
-  const [activeToolId, setActiveToolId] = useState<string>('select');
-  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(() => new Set());
-  // Map the Scene's selected layer ids (node cards) back to node ids.
-  const selectedNodeIds = useMemo(
-    () =>
-      [...selectedIds]
-        .map((id) => nodeIdFromCardLayerId(id))
-        .filter((id): id is string => id != null),
-    [selectedIds],
-  );
-
-  const actions: SceneBlockAction[] = [
-    {
-      id: 'add-node',
-      label: 'Node',
-      icon: <Icon icon="fa-solid fa-plus" />,
-      title: 'Add node',
-      onClick: () =>
-        dispatch({
-          kind: 'addNode',
-          x: DIAGRAM_VIEWPORT.width / 2 - NODE_WIDTH / 2,
-          y: DIAGRAM_VIEWPORT.height / 2 - NODE_HEIGHT / 2,
-        }),
-    },
-    {
-      id: 'delete',
-      label: 'Delete',
-      icon: <Icon icon="fa-solid fa-trash" />,
-      title: 'Delete selected node',
-      danger: true,
-      disabled: selectedNodeIds.length === 0,
-      onClick: () => selectedNodeIds.forEach((id) => dispatch({ kind: 'removeNode', nodeId: id })),
-    },
-  ];
-
-  const toolbar = (
-    <SceneBlockToolbar
-      tools={DIAGRAM_TOOLS}
-      activeToolId={activeToolId}
-      onSelectTool={setActiveToolId}
-      actions={actions}
-    />
-  );
-
-  const canvas = (
-    <DiagramCanvas
-      nodes={nodes}
-      edges={edges}
-      onCommand={dispatch}
-      showMaximize
-      maximized={maximized}
-      onToggleMaximize={() => setMaximized((m) => !m)}
-      activeToolId={activeToolId}
-      onActiveToolIdChange={setActiveToolId}
-      onSelectionChange={setSelectedIds}
-    />
-  );
-
-  const sideToolbar = <div className="squisq-scene-side-toolbar">{toolbar}</div>;
-
-  if (maximized) {
-    return (
-      <div
-        className="squisq-diagram-inline-placeholder"
-        style={effectiveHeight != null ? { height: effectiveHeight } : undefined}
-      >
-        <DiagramMaximizedOverlay host={host ?? null} onClose={() => setMaximized(false)}>
-          <div className="squisq-scene-block-max">
-            {canvas}
-            {sideToolbar}
-          </div>
-        </DiagramMaximizedOverlay>
-      </div>
-    );
-  }
-
-  return (
-    <div className="squisq-scene-shell">
-      <div
-        className="squisq-diagram-inline"
-        ref={inlineRef}
-        style={effectiveHeight != null ? { height: effectiveHeight } : undefined}
-      >
-        {canvas}
-        <div
-          className="squisq-diagram-resize-handle"
-          onPointerDown={onResizeStart}
-          onDoubleClick={onResizeReset}
-          role="separator"
-          aria-orientation="horizontal"
-          aria-label="Resize diagram height"
-          title="Drag to resize · double-click to reset"
-        />
-      </div>
-      {sideToolbar}
-    </div>
-  );
-}
-
-export default DiagramWidget;