@bendyline/squisq-editor-react 1.5.3 → 1.6.0

package/src/scene/commands/drawingCommands.ts

@@ -0,0 +1,318 @@
+/**
+ * Tiptap commands for drawing editing.
+ *
+ * The drawing counterpart to `diagramCommands.ts`. Each command finds a
+ * shape's child heading inside a `{[drawing]}` section and mutates its
+ * `{[shape …]}` annotation (the `dataTemplate` + `dataTemplateParams` node
+ * attrs) or its text. Geometry/style live in the annotation params; the
+ * shape's id lives in `dataBlockAttrs` (`#id`). All edits round-trip back to
+ * markdown via `tiptapBridge` — no parallel data store.
+ *
+ * The section walk + a node rename are identical to diagrams, so those
+ * generic helpers are reused from `diagramCommands.ts`.
+ */
+
+import type { Editor } from '@tiptap/react';
+import type { Node as PMNode } from '@tiptap/pm/model';
+import {
+  parsePandocAttrTokens,
+  serializePandocAttributes,
+  quoteAttrValue,
+} from '@bendyline/squisq/markdown';
+import {
+  listDiagramChildren,
+  getDiagramSectionEnd,
+  renameNode,
+} from '../../diagram/diagramCommands';
+
+/** Renaming a shape = replacing its heading text (same op as a diagram node). */
+export { renameNode as renameShape };
+
+export interface DrawingChild {
+  /** Heading node start position (absolute). */
+  pos: number;
+  node: PMNode;
+  /** Computed id (explicit `#id`, else slugified text). */
+  id: string;
+  /** Shape/connector kind from the `{[…]}` annotation (`dataTemplate`). */
+  kind: string | null;
+  /** Parsed `{[…]}` params (`dataTemplateParams`). */
+  params: Record<string, string>;
+  /** Heading text (the shape label). */
+  text: string;
+}
+
+/** List the drawing's child shapes/connectors with their annotation parsed. */
+export function listDrawingChildren(editor: Editor, parentPos: number): DrawingChild[] {
+  return listDiagramChildren(editor, parentPos).map((c) => {
+    const a = c.node.attrs as { dataTemplate?: string | null; dataTemplateParams?: string | null };
+    return {
+      pos: c.pos,
+      node: c.node,
+      id: c.id,
+      kind: a.dataTemplate ?? null,
+      params: a.dataTemplateParams
+        ? (parsePandocAttrTokens(a.dataTemplateParams).params ?? {})
+        : {},
+      text: headingText(c.node),
+    };
+  });
+}
+
+/**
+ * Insert a new shape as a child heading at the end of the drawing section.
+ * The heading carries `dataTemplate=<kind>`, `dataTemplateParams=<geometry>`,
+ * and `dataBlockAttrs="#<id>"`, so it round-trips to `### label {#id} {[kind …]}`.
+ */
+export function addShape(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  kind: string,
+  params: Record<string, string>,
+  label = '',
+): boolean {
+  const parent = editor.state.doc.nodeAt(parentPos);
+  if (!parent || parent.type.name !== 'heading') return false;
+  const childDepth = childDepthFor(editor, parentPos, parent);
+  const insertPos = getDiagramSectionEnd(editor, parentPos);
+  const tParams = serializeParams(params);
+  const blockAttrs = idToBlockAttrs(id);
+
+  return editor
+    .chain()
+    .command(({ tr, state }) => {
+      const headingType = state.schema.nodes.heading;
+      if (!headingType) return false;
+      const content = label.length > 0 ? state.schema.text(label) : null;
+      const heading = headingType.create(
+        {
+          level: childDepth,
+          dataTemplate: kind,
+          dataTemplateParams: tParams.length > 0 ? tParams : null,
+          dataBlockAttrs: blockAttrs,
+        },
+        content,
+      );
+      tr.insert(insertPos, heading);
+      return true;
+    })
+    .run();
+}
+
+/** Update a shape's `x`/`y` from a drag. */
+export function moveShape(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  x: number,
+  y: number,
+): boolean {
+  return updateChildParams(editor, parentPos, id, (p) => {
+    p.x = String(Math.round(x));
+    p.y = String(Math.round(y));
+  });
+}
+
+/** Update a shape's `width`/`height` from a resize-handle drag. */
+export function resizeShape(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  width: number,
+  height: number,
+): boolean {
+  return updateChildParams(editor, parentPos, id, (p) => {
+    p.width = String(Math.round(width));
+    p.height = String(Math.round(height));
+  });
+}
+
+/** Set (or, when value is empty, clear) a single style/param on a shape. */
+export function setShapeParam(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  key: string,
+  value: string,
+): boolean {
+  return updateChildParams(editor, parentPos, id, (p) => {
+    if (value.length === 0) delete p[key];
+    else p[key] = value;
+  });
+}
+
+/** Set a connector's end-styles / line-style / routing params (empty value clears). */
+export function setConnectorStyle(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  style: { startStyle?: string; endStyle?: string; lineStyle?: string; routing?: string },
+): boolean {
+  return updateChildParams(editor, parentPos, id, (p) => {
+    for (const [key, value] of Object.entries(style)) {
+      if (value == null || value.length === 0) delete p[key];
+      else p[key] = value;
+    }
+  });
+}
+
+/**
+ * Insert a connector (`{[arrow from=.. to=..]}`, or `line`) as a child
+ * heading joining two shapes by id.
+ */
+export function addConnector(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  from: string,
+  to: string,
+  kind: 'arrow' | 'line' = 'arrow',
+  label = '',
+): boolean {
+  return addShape(editor, parentPos, id, kind, { from, to }, label);
+}
+
+/** Re-point a connector's `from` or `to` endpoint at a different shape. */
+export function retargetConnector(
+  editor: Editor,
+  parentPos: number,
+  connectorId: string,
+  end: 'from' | 'to',
+  newTarget: string,
+): boolean {
+  return updateChildParams(editor, parentPos, connectorId, (p) => {
+    p[end] = newTarget;
+  });
+}
+
+/** Delete the connector heading joining `from`→`to`, if present. */
+export function removeConnector(
+  editor: Editor,
+  parentPos: number,
+  from: string,
+  to: string,
+): boolean {
+  const target = listDrawingChildren(editor, parentPos).find(
+    (c) => isConnector(c) && c.params.from === from && c.params.to === to,
+  );
+  if (!target) return false;
+  const [start, end] = headingRange(editor, target.pos);
+  return editor
+    .chain()
+    .command(({ tr }) => {
+      tr.delete(start, end);
+      return true;
+    })
+    .run();
+}
+
+/**
+ * Delete a shape's heading (and body) plus any connector that referenced
+ * it. Ranges are computed against the original doc and deleted high→low so
+ * earlier deletions don't shift later positions.
+ */
+export function removeShape(editor: Editor, parentPos: number, id: string): boolean {
+  const children = listDrawingChildren(editor, parentPos);
+  const target = children.find((c) => c.id === id);
+  if (!target) return false;
+
+  const ranges: Array<[number, number]> = [headingRange(editor, target.pos)];
+  for (const c of children) {
+    if (c.id === id) continue;
+    if (isConnector(c) && (c.params.from === id || c.params.to === id)) {
+      ranges.push(headingRange(editor, c.pos));
+    }
+  }
+  ranges.sort((a, b) => b[0] - a[0]);
+
+  return editor
+    .chain()
+    .command(({ tr }) => {
+      for (const [start, end] of ranges) tr.delete(start, end);
+      return true;
+    })
+    .run();
+}
+
+// ============================================
+// Internal helpers
+// ============================================
+
+/** A `line`/`arrow` child carrying `from`/`to` is a connector (not a plain line). */
+function isConnector(c: DrawingChild): boolean {
+  if (c.kind !== 'line' && c.kind !== 'arrow') return false;
+  return c.params.from != null || c.params.to != null;
+}
+
+/** Read params, mutate, and write the heading's `dataTemplateParams` back. */
+function updateChildParams(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  mutate: (params: Record<string, string>) => void,
+): boolean {
+  const target = listDrawingChildren(editor, parentPos).find((c) => c.id === id);
+  if (!target) return false;
+  const params = { ...target.params };
+  mutate(params);
+  const tParams = serializeParams(params);
+  return editor
+    .chain()
+    .command(({ tr }) => {
+      if (!tr.doc.nodeAt(target.pos)) return false;
+      tr.setNodeAttribute(target.pos, 'dataTemplateParams', tParams.length > 0 ? tParams : null);
+      return true;
+    })
+    .run();
+}
+
+/** Heading section range `[start, end)` — the heading plus its body content. */
+function headingRange(editor: Editor, pos: number): [number, number] {
+  const { state } = editor;
+  const node = state.doc.nodeAt(pos);
+  if (!node) return [pos, pos];
+  let cursor = pos + node.nodeSize;
+  const docSize = state.doc.content.size;
+  while (cursor < docSize) {
+    const n = state.doc.nodeAt(cursor);
+    if (!n) break;
+    if (n.type.name === 'heading') break;
+    cursor += n.nodeSize;
+  }
+  return [pos, cursor];
+}
+
+/** Child heading depth: inherit existing children's level, else parent+1. */
+function childDepthFor(editor: Editor, parentPos: number, parent: PMNode): number {
+  const parentDepth = (parent.attrs as { level: number }).level;
+  const existing = listDrawingChildren(editor, parentPos);
+  const inherited = existing[0]?.node.attrs.level as number | undefined;
+  return Math.min(6, inherited ?? parentDepth + 1);
+}
+
+/** Serialize a param map to a `{[…]}` body string (`k=v k=v`), quoted canonically. */
+function serializeParams(params: Record<string, string>): string {
+  return Object.entries(params)
+    .map(([k, v]) => `${k}=${quoteAttrValue(v)}`)
+    .join(' ');
+}
+
+/** The `#id` inner string for `dataBlockAttrs` (no outer braces). */
+function idToBlockAttrs(id: string): string | null {
+  return stripBraces(serializePandocAttributes({ id }));
+}
+
+function stripBraces(s: string | null): string | null {
+  if (s == null || s === '{}') return null;
+  if (s.startsWith('{') && s.endsWith('}')) return s.slice(1, -1);
+  return s;
+}
+
+function headingText(node: PMNode): string {
+  let text = '';
+  node.content.forEach((child) => {
+    if (child.isText) text += child.text ?? '';
+  });
+  return text;
+}

package/src/scene/commands/layoutCommands.ts

@@ -0,0 +1,301 @@
+/**
+ * Tiptap commands for layout editing.
+ *
+ * The layout counterpart to `drawingCommands.ts`: each layer is a child
+ * heading inside a `{[layout]}` section, and its `{[type …]}` annotation
+ * (`dataTemplate` + `dataTemplateParams`) carries geometry/style while its
+ * `{#id}` lives in `dataBlockAttrs`. The one difference from drawing is
+ * that a **text** layer's content lives in the child heading's *body*
+ * (paragraphs/lists/marks) rather than the heading text — so it round-trips
+ * to readable markdown. All edits flow through the main editor's
+ * transactions, so the doc's normal save path serializes them; there is no
+ * parallel data store.
+ *
+ * The section walk is identical to diagrams/drawings, so those generic
+ * helpers are reused from `diagramCommands.ts`.
+ */
+
+import type { Editor } from '@tiptap/react';
+import type { Node as PMNode, Schema } from '@tiptap/pm/model';
+import { DOMSerializer, DOMParser as PMDOMParser, Fragment } from '@tiptap/pm/model';
+import {
+  parsePandocAttrTokens,
+  serializePandocAttributes,
+  quoteAttrValue,
+} from '@bendyline/squisq/markdown';
+import { listDiagramChildren } from '../../diagram/diagramCommands';
+
+export interface LayoutChild {
+  /** Heading node start position (absolute). */
+  pos: number;
+  node: PMNode;
+  /** Computed id (explicit `#id`, else slugified text). */
+  id: string;
+  /** Layer kind from the `{[…]}` annotation (`text`/`rectangle`/`image`/…). */
+  kind: string | null;
+  /** Parsed `{[…]}` params (`dataTemplateParams`). */
+  params: Record<string, string>;
+  /** The child's body serialized to HTML (a text layer's rich content). */
+  bodyHtml: string;
+  /** Plain text of the body (newline-joined across block nodes). */
+  bodyText: string;
+}
+
+/** List the layout's child layers with their annotation + body parsed. */
+export function listLayoutChildren(editor: Editor, parentPos: number): LayoutChild[] {
+  return listDiagramChildren(editor, parentPos).map((c) => {
+    const a = c.node.attrs as { dataTemplate?: string | null; dataTemplateParams?: string | null };
+    return {
+      pos: c.pos,
+      node: c.node,
+      id: c.id,
+      kind: a.dataTemplate ?? null,
+      params: a.dataTemplateParams
+        ? (parsePandocAttrTokens(a.dataTemplateParams).params ?? {})
+        : {},
+      bodyHtml: bodyToHtml(editor, c.pos, c.node),
+      bodyText: bodyToText(editor, c.pos, c.node),
+    };
+  });
+}
+
+/**
+ * Insert a new layer as a child heading at the end of the layout section.
+ * The heading carries `dataTemplate=<kind>`, `dataTemplateParams=<geometry>`,
+ * and `dataBlockAttrs="#<id>"`; a non-empty `bodyHtml` is parsed into the
+ * child's body so it round-trips to `### {#id} {[kind …]}` + markdown body.
+ */
+export function addLayoutLayer(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  kind: string,
+  params: Record<string, string>,
+  bodyHtml = '',
+): boolean {
+  const parent = editor.state.doc.nodeAt(parentPos);
+  if (!parent || parent.type.name !== 'heading') return false;
+  const childDepth = childDepthFor(editor, parentPos, parent);
+  const insertPos = layoutInsertPos(editor, parentPos);
+  const tParams = serializeParams(params);
+  const blockAttrs = idToBlockAttrs(id);
+
+  return editor
+    .chain()
+    .command(({ tr, state }) => {
+      const headingType = state.schema.nodes.heading;
+      if (!headingType) return false;
+      const heading = headingType.create({
+        level: childDepth,
+        dataTemplate: kind,
+        dataTemplateParams: tParams.length > 0 ? tParams : null,
+        dataBlockAttrs: blockAttrs,
+      });
+      let content = Fragment.from(heading);
+      if (bodyHtml.trim()) content = content.append(htmlToBody(state.schema, bodyHtml));
+      tr.insert(insertPos, content);
+      return true;
+    })
+    .run();
+}
+
+/** Update a layer's `x`/`y` from a drag. */
+export function moveLayoutLayer(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  x: number,
+  y: number,
+): boolean {
+  return updateChildParams(editor, parentPos, id, (p) => {
+    p.x = String(Math.round(x));
+    p.y = String(Math.round(y));
+  });
+}
+
+/** Update a layer's `width`/`height` from a resize-handle drag. */
+export function resizeLayoutLayer(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  width: number,
+  height: number,
+): boolean {
+  return updateChildParams(editor, parentPos, id, (p) => {
+    p.width = String(Math.round(width));
+    p.height = String(Math.round(height));
+  });
+}
+
+/** Set (or, when value is empty, clear) a single style/param on a layer. */
+export function setLayoutParam(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  key: string,
+  value: string,
+): boolean {
+  return updateChildParams(editor, parentPos, id, (p) => {
+    if (value.length === 0) delete p[key];
+    else p[key] = value;
+  });
+}
+
+/**
+ * Replace a text layer's body with the content parsed from `bodyHtml`
+ * (an empty value clears it). The heading + its `{[text …]}` annotation are
+ * preserved; only the body changes.
+ */
+export function setLayoutText(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  bodyHtml: string,
+): boolean {
+  const target = listLayoutChildren(editor, parentPos).find((c) => c.id === id);
+  if (!target) return false;
+  const bodyStart = target.pos + target.node.nodeSize;
+  const [, bodyEnd] = headingRange(editor, target.pos);
+  return editor
+    .chain()
+    .command(({ tr, state }) => {
+      if (!tr.doc.nodeAt(target.pos)) return false;
+      const body = bodyHtml.trim() ? htmlToBody(state.schema, bodyHtml) : Fragment.empty;
+      tr.replaceWith(bodyStart, bodyEnd, body);
+      return true;
+    })
+    .run();
+}
+
+/** Delete a layer's heading and its body. */
+export function removeLayoutLayer(editor: Editor, parentPos: number, id: string): boolean {
+  const target = listLayoutChildren(editor, parentPos).find((c) => c.id === id);
+  if (!target) return false;
+  const [start, end] = headingRange(editor, target.pos);
+  return editor
+    .chain()
+    .command(({ tr }) => {
+      tr.delete(start, end);
+      return true;
+    })
+    .run();
+}
+
+// ============================================
+// Internal helpers
+// ============================================
+
+/** Read params, mutate, and write the heading's `dataTemplateParams` back. */
+function updateChildParams(
+  editor: Editor,
+  parentPos: number,
+  id: string,
+  mutate: (params: Record<string, string>) => void,
+): boolean {
+  const target = listLayoutChildren(editor, parentPos).find((c) => c.id === id);
+  if (!target) return false;
+  const params = { ...target.params };
+  mutate(params);
+  const tParams = serializeParams(params);
+  return editor
+    .chain()
+    .command(({ tr }) => {
+      if (!tr.doc.nodeAt(target.pos)) return false;
+      tr.setNodeAttribute(target.pos, 'dataTemplateParams', tParams.length > 0 ? tParams : null);
+      return true;
+    })
+    .run();
+}
+
+/**
+ * Body range `[start, end)` for a layout child — the heading plus its body,
+ * stopping at the next heading OR a horizontal rule. A layout textbox can't
+ * contain an `hr` (the `block` editor level forbids it), so a `---` always
+ * marks the end of the layout's content; bounding on it keeps a trailing
+ * child's body from swallowing loose document content that follows the
+ * layout block (e.g. a closing paragraph after a `---`).
+ */
+function headingRange(editor: Editor, pos: number): [number, number] {
+  const { state } = editor;
+  const node = state.doc.nodeAt(pos);
+  if (!node) return [pos, pos];
+  let cursor = pos + node.nodeSize;
+  const docSize = state.doc.content.size;
+  while (cursor < docSize) {
+    const n = state.doc.nodeAt(cursor);
+    if (!n) break;
+    if (n.type.name === 'heading' || n.type.name === 'horizontalRule') break;
+    cursor += n.nodeSize;
+  }
+  return [pos, cursor];
+}
+
+/** Serialize a child's body fragment to HTML (a text layer's rich content). */
+function bodyToHtml(editor: Editor, headingPos: number, headingNode: PMNode): string {
+  const { state } = editor;
+  const bodyStart = headingPos + headingNode.nodeSize;
+  const [, bodyEnd] = headingRange(editor, headingPos);
+  if (bodyEnd <= bodyStart) return '';
+  const fragment = state.doc.slice(bodyStart, bodyEnd).content;
+  if (fragment.size === 0) return '';
+  const dom = DOMSerializer.fromSchema(state.schema).serializeFragment(fragment);
+  const div = document.createElement('div');
+  div.appendChild(dom);
+  return div.innerHTML;
+}
+
+/** Plain text of a child's body (newline-joined across block nodes). */
+function bodyToText(editor: Editor, headingPos: number, headingNode: PMNode): string {
+  const { state } = editor;
+  const bodyStart = headingPos + headingNode.nodeSize;
+  const [, bodyEnd] = headingRange(editor, headingPos);
+  if (bodyEnd <= bodyStart) return '';
+  return state.doc.textBetween(bodyStart, bodyEnd, '\n').trim();
+}
+
+/** Parse Tiptap HTML into a Fragment of block nodes for the doc body. */
+function htmlToBody(schema: Schema, html: string): Fragment {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  return PMDOMParser.fromSchema(schema).parse(div).content;
+}
+
+/**
+ * Where to append a new layer heading: after the last child's bounded body
+ * (or, with no children, after the parent heading's bounded body). Unlike
+ * `getDiagramSectionEnd` (which runs to the next ≤parent heading and so spans
+ * any trailing loose document content), this stops at the layout's `---`/next
+ * heading boundary — so new children don't leapfrog content that follows the
+ * layout block.
+ */
+function layoutInsertPos(editor: Editor, parentPos: number): number {
+  const children = listLayoutChildren(editor, parentPos);
+  const anchor = children.length > 0 ? children[children.length - 1].pos : parentPos;
+  return headingRange(editor, anchor)[1];
+}
+
+/** Child heading depth: inherit existing children's level, else parent+1. */
+function childDepthFor(editor: Editor, parentPos: number, parent: PMNode): number {
+  const parentDepth = (parent.attrs as { level: number }).level;
+  const existing = listLayoutChildren(editor, parentPos);
+  const inherited = existing[0]?.node.attrs.level as number | undefined;
+  return Math.min(6, inherited ?? parentDepth + 1);
+}
+
+/** Serialize a param map to a `{[…]}` body string (`k=v k=v`), quoted canonically. */
+function serializeParams(params: Record<string, string>): string {
+  return Object.entries(params)
+    .map(([k, v]) => `${k}=${quoteAttrValue(v)}`)
+    .join(' ');
+}
+
+/** The `#id` inner string for `dataBlockAttrs` (no outer braces). */
+function idToBlockAttrs(id: string): string | null {
+  return stripBraces(serializePandocAttributes({ id }));
+}
+
+function stripBraces(s: string | null): string | null {
+  if (s == null || s === '{}') return null;
+  if (s.startsWith('{') && s.endsWith('}')) return s.slice(1, -1);
+  return s;
+}