@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/scene/SceneBlockExtension.ts

@@ -0,0 +1,198 @@
+/**
+ * SceneBlockExtension — Tiptap plugin that mounts a Scene-based editor
+ * below any heading whose `dataTemplate` is `layout` or `drawing`.
+ *
+ * Same shape as `DiagramExtension`: each matching heading gets a
+ * ProseMirror widget decoration that renders a `<SceneBlockWidget>`
+ * (React) into a contenteditable=false host. Sub-headings of the
+ * matched block are hidden via a `data-squisq-scene-child` attribute
+ * so the canvas is the sole visual representation of the section in
+ * the WYSIWYG view (mirrors the diagram hide rule).
+ */
+
+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 { SceneBlockWidget, type SceneBlockMode } from './SceneBlockWidget';
+
+/**
+ * Stable identifier for a layout/drawing heading — used as part of the
+ * widget decoration's `key` so the canvas survives attribute-only doc
+ * changes (drag/resize commits write into the heading's
+ * `data-block-attrs`).
+ */
+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 layout/drawing heading by
+ * its stable key. Returns `null` if the heading no longer exists.
+ */
+export function findSceneHeadingPos(
+  editor: Editor,
+  headingKey: string,
+  mode: SceneBlockMode,
+): number | null {
+  const expectedTemplate = mode;
+  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 !== expectedTemplate) return;
+    if (getHeadingKey(node) === headingKey) {
+      found = pos;
+      return false;
+    }
+  });
+  return found;
+}
+
+const KEY = new PluginKey('squisq-scene-block');
+const TEMPLATE_MODE: Record<string, SceneBlockMode> = {
+  layout: 'layout',
+  drawing: 'drawing',
+};
+
+interface SceneRoot {
+  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 };
+    const mode = attrs.dataTemplate ? TEMPLATE_MODE[attrs.dataTemplate] : undefined;
+    if (!mode) return;
+    const parentDepth = attrs.level;
+    const widgetPos = pos + node.nodeSize;
+    const parentPos = pos;
+    const headingKey = getHeadingKey(node);
+    decos.push(
+      Decoration.widget(
+        widgetPos,
+        (view) => {
+          const container = document.createElement('div');
+          container.className = 'squisq-scene-widget-host';
+          container.contentEditable = 'false';
+          container.addEventListener('mousedown', (e) => e.stopPropagation());
+          container.addEventListener('keydown', (e) => e.stopPropagation());
+
+          const root = createRoot(container);
+          root.render(
+            createElement(SceneBlockWidget, {
+              editor,
+              headingKey,
+              fallbackParentPos: parentPos,
+              mode,
+              host: view.dom.parentElement ?? view.dom,
+            }),
+          );
+
+          (container as HTMLElement & { __squisqSceneRoot?: SceneRoot }).__squisqSceneRoot = {
+            el: container,
+            root,
+          };
+          return container;
+        },
+        {
+          destroy: (dom) => {
+            const ref = (dom as HTMLElement & { __squisqSceneRoot?: SceneRoot }).__squisqSceneRoot;
+            if (ref) setTimeout(() => ref.root.unmount(), 0);
+          },
+          side: 1,
+          ignoreSelection: true,
+          // Stable key so the canvas survives attribute-only doc changes
+          // (drag/resize commits) — see DiagramExtension for the same
+          // pattern and rationale.
+          key: `squisq-scene-${mode}-${headingKey}`,
+        },
+      ),
+    );
+
+    // Hide direct sub-headings of this block — the Scene canvas is the
+    // visible representation of any nested structure.
+    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-scene-child': 'true',
+          }),
+        );
+      }
+      cursor += child.nodeSize;
+    }
+  });
+
+  return DecorationSet.create(state.doc, decos);
+}
+
+export interface SceneBlockExtensionOptions {
+  /** When false, the extension is inert. */
+  enabled?: boolean;
+}
+
+export const SceneBlockExtension = Extension.create<SceneBlockExtensionOptions>({
+  name: 'squisqSceneBlock',
+
+  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 SceneBlockExtension;

package/src/scene/SceneBlockToolbar.tsx

@@ -0,0 +1,201 @@
+/**
+ * SceneBlockToolbar — the shared chrome that sits *above* a diagram /
+ * drawing / layout canvas (right-aligned, outside the canvas box) and
+ * hosts the tools for CRUDing the block's shapes.
+ *
+ * It renders two groups:
+ *   - **Tools** — mode buttons that drive the Scene's `activeToolId`
+ *     (Select / Shape / Pen / Text / Connect …). Hidden when a block has
+ *     only one tool (e.g. layout's Select-only set), since a lone mode
+ *     button is noise.
+ *   - **Actions** — one-shot buttons (Create a shape, Delete the
+ *     selection, …). These are domain commands, not modes.
+ *
+ * Each host (DiagramWidget / SceneBlockWidget) owns the active-tool and
+ * selection state and supplies the tools + actions appropriate to its
+ * block type, so the bar looks and behaves consistently everywhere while
+ * the vocabulary differs per block.
+ */
+
+import type { ReactNode } from 'react';
+import type { SceneTool } from './tools/SceneTool';
+import { Icon } from '../Icon';
+
+export type HAlign = 'left' | 'center' | 'right';
+export type VAlign = 'top' | 'middle' | 'bottom';
+
+/** Text alignment controls shown when a textbox is the current selection. */
+export interface SceneAlignment {
+  textAlign: HAlign;
+  verticalAlign: VAlign;
+  onTextAlign: (v: HAlign) => void;
+  onVerticalAlign: (v: VAlign) => void;
+}
+
+export interface SceneBlockAction {
+  id: string;
+  label: string;
+  /** Optional glyph/icon; falls back to the label text. */
+  icon?: ReactNode;
+  title?: string;
+  onClick: () => void;
+  disabled?: boolean;
+  /** Render with the destructive (red) treatment — used for Delete. */
+  danger?: boolean;
+}
+
+export interface SceneBlockToolbarProps {
+  /** Mode tools that drive the Scene's active tool. */
+  tools?: readonly SceneTool[];
+  activeToolId?: string;
+  onSelectTool?: (id: string) => void;
+  /** One-shot command buttons (create / delete / …). */
+  actions?: readonly SceneBlockAction[];
+  /** Text-alignment controls — shown when a textbox is the selection. */
+  alignment?: SceneAlignment;
+  /**
+   * Per-selection style controls (Fill / Stroke / Color swatches, connector
+   * dropdowns) shown inline next to the tools when something is selected.
+   */
+  properties?: ReactNode;
+  /**
+   * A popover anchored *below* a specific tool button (e.g. the shape
+   * palette under the Shape tool). Rendered as a dropdown so it pops down
+   * from the button in the toolbar.
+   */
+  toolPopover?: { toolId: string; content: ReactNode };
+  /** Extra controls rendered at the start of the bar (e.g. a shape palette). */
+  leading?: ReactNode;
+}
+
+const H_ALIGNS: { value: HAlign; icon: string; label: string }[] = [
+  { value: 'left', icon: 'fa-solid fa-align-left', label: 'Align left' },
+  { value: 'center', icon: 'fa-solid fa-align-center', label: 'Align center' },
+  { value: 'right', icon: 'fa-solid fa-align-right', label: 'Align right' },
+];
+
+/** Vertical-align glyph: a box with a bar pinned to top / middle / bottom. */
+function VAlignIcon({ pos }: { pos: VAlign }) {
+  const y = pos === 'top' ? 3.5 : pos === 'middle' ? 7.5 : 11.5;
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <rect x="2.5" y="1.5" width="11" height="13" rx="1" stroke="currentColor" strokeWidth="1.3" />
+      <line
+        x1="5"
+        y1={y}
+        x2="11"
+        y2={y}
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+const V_ALIGNS: { value: VAlign; label: string }[] = [
+  { value: 'top', label: 'Align top' },
+  { value: 'middle', label: 'Align middle' },
+  { value: 'bottom', label: 'Align bottom' },
+];
+
+export function SceneBlockToolbar({
+  tools = [],
+  activeToolId,
+  onSelectTool,
+  actions = [],
+  alignment,
+  properties,
+  toolPopover,
+  leading,
+}: SceneBlockToolbarProps) {
+  // A single mode (e.g. layout's Select) isn't worth a button — there's
+  // nothing to switch to. Still render the bar for its actions/leading.
+  const showTools = tools.length > 1;
+  if (!showTools && actions.length === 0 && !leading && !alignment && !properties) return null;
+
+  return (
+    <div className="squisq-scene-block-toolbar" role="toolbar" aria-label="Canvas tools">
+      {leading}
+      {alignment && (
+        <div className="squisq-scene-block-tools" aria-label="Text alignment">
+          {H_ALIGNS.map((a) => (
+            <button
+              key={a.value}
+              type="button"
+              className={`squisq-scene-tool${alignment.textAlign === a.value ? ' squisq-scene-tool--active' : ''}`}
+              onClick={() => alignment.onTextAlign(a.value)}
+              title={a.label}
+              aria-label={a.label}
+              aria-pressed={alignment.textAlign === a.value}
+            >
+              <Icon icon={a.icon} />
+            </button>
+          ))}
+          {V_ALIGNS.map((a) => (
+            <button
+              key={a.value}
+              type="button"
+              className={`squisq-scene-tool${alignment.verticalAlign === a.value ? ' squisq-scene-tool--active' : ''}`}
+              onClick={() => alignment.onVerticalAlign(a.value)}
+              title={a.label}
+              aria-label={a.label}
+              aria-pressed={alignment.verticalAlign === a.value}
+            >
+              <VAlignIcon pos={a.value} />
+            </button>
+          ))}
+        </div>
+      )}
+      {showTools && (
+        <div className="squisq-scene-block-tools">
+          {tools.map((t) => {
+            const button = (
+              <button
+                key={t.id}
+                type="button"
+                className={`squisq-scene-tool${activeToolId === t.id ? ' squisq-scene-tool--active' : ''}`}
+                onClick={() => onSelectTool?.(t.id)}
+                title={t.shortcut ? `${t.label} (${t.shortcut.toUpperCase()})` : t.label}
+                aria-pressed={activeToolId === t.id}
+              >
+                {t.icon ?? <span className="squisq-scene-tool-label">{t.label}</span>}
+              </button>
+            );
+            // Anchor a dropdown (e.g. the shape palette) below this button.
+            if (toolPopover && toolPopover.toolId === t.id) {
+              return (
+                <span key={t.id} className="squisq-scene-tool-popover-anchor">
+                  {button}
+                  {toolPopover.content}
+                </span>
+              );
+            }
+            return button;
+          })}
+        </div>
+      )}
+      {properties}
+      {actions.length > 0 && (
+        <div className="squisq-scene-block-actions">
+          {actions.map((a) => (
+            <button
+              key={a.id}
+              type="button"
+              className={`squisq-scene-action${a.danger ? ' squisq-scene-action--danger' : ''}`}
+              onClick={a.onClick}
+              disabled={a.disabled}
+              title={a.title ?? a.label}
+              aria-label={a.title ?? a.label}
+            >
+              {a.icon && <span className="squisq-scene-action-icon">{a.icon}</span>}
+              <span className="squisq-scene-action-label">{a.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SceneBlockToolbar;