@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/scene/SceneBlockExtension.ts

@@ -1,205 +0,0 @@
-/**
- * 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';
-import type { SceneTextChannel } from './text/sceneTextChannel';
-
-/**
- * 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, position?: number): 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 position == null ? attrs.id : `${attrs.id}@${position}`;
-  }
-  let text = '';
-  node.content.forEach((child) => {
-    if (child.isText) text += child.text ?? '';
-  });
-  const slug =
-    text
-      .toLowerCase()
-      .replace(/[^\w\s-]/g, '')
-      .replace(/[\s_]+/g, '-')
-      .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '') || 'block';
-  return position == null ? slug : `${slug}@${position}`;
-}
-
-/**
- * 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, pos) === 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,
-  textChannel?: SceneTextChannel,
-): 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, pos);
-    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,
-              textChannel,
-            }),
-          );
-
-          (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;
-  textChannel?: SceneTextChannel;
-}
-
-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, this.options.textChannel),
-          apply: (tr, oldDecos, _oldState, newState) => {
-            if (!tr.docChanged) return oldDecos;
-            return buildDecorations(newState, editor, this.options.textChannel);
-          },
-        },
-        props: {
-          decorations(state) {
-            return this.getState(state);
-          },
-        },
-      }),
-    ];
-  },
-});
-
-export default SceneBlockExtension;

package/src/scene/SceneBlockToolbar.tsx

@@ -1,216 +0,0 @@
-/**
- * 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;
-  /** Apply the selected-mode treatment (for actions such as Connect). */
-  active?: boolean;
-  /** Render with the destructive (red) treatment — used for Delete. */
-  danger?: boolean;
-  /** Optional dropdown anchored to this action button. */
-  popover?: ReactNode;
-}
-
-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) => {
-            const button = (
-              <button
-                key={a.id}
-                type="button"
-                className={`squisq-scene-action${a.active ? ' squisq-scene-action--active' : ''}${a.danger ? ' squisq-scene-action--danger' : ''}`}
-                onClick={a.onClick}
-                disabled={a.disabled}
-                title={a.title ?? a.label}
-                aria-label={a.title ?? a.label}
-                aria-pressed={a.active || undefined}
-              >
-                {a.icon && <span className="squisq-scene-action-icon">{a.icon}</span>}
-                <span className="squisq-scene-action-label">{a.label}</span>
-              </button>
-            );
-            return a.popover ? (
-              <span key={a.id} className="squisq-scene-action-popover-anchor">
-                {button}
-                {a.popover}
-              </span>
-            ) : (
-              button
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default SceneBlockToolbar;