@thomasfosterau/prosekit-flowchart 0.0.0-stage → 0.1.0

package/dist/FlowchartEditDialog.svelte

@@ -0,0 +1,188 @@
+<!-- @component The modal that hosts the editable `Flowchart` canvas, loaded on open; Save hands the diagram to `onSave`. -->
+
+<!--
+  FlowchartEditDialog — the modal that hosts the full WYSIWYG canvas.
+
+  Opens either from the bindable `open` prop or from the imperative
+  `open(data)` instance method the node view uses. On Save it pulls the current
+  diagram out of `Flowchart` with `getSnapshot()` and hands it to `onSave`,
+  which may be async; Cancel discards.
+
+  ## bits-ui, not a native `<dialog>`
+
+  The app this is ported from used a native `<dialog class="modal">`. bits-ui's
+  `Dialog` is used instead because it owns the whole modal contract — the focus
+  trap, the initial focus move, `aria-modal`, the `aria-labelledby` /
+  `aria-describedby` wiring to `Dialog.Title` and `Dialog.Description`, the
+  scroll lock and the focus return — and because a native `<dialog>`'s built-in
+  Escape handling cannot be gated: it closes the dialog out from under an
+  in-flight save. Here Escape goes through `onOpenChange`, which refuses to
+  close while `pending`, so a save in flight is never abandoned halfway.
+
+  ## The canvas is loaded on open, not on import
+
+  `Flowchart.svelte` is reached through a dynamic `import()` in the effect
+  below, and the type-only import is what keeps that true. It is the package's
+  heaviest module — `@xyflow/svelte` plus its stylesheet — and the node view
+  that mounts this dialog renders every flowchart in a document. A static
+  import here would put the whole canvas engine in the chunk of any page with
+  an editor on it, which is precisely what the SVG preview exists to avoid.
+
+  Affordances inside the canvas: the "Add node" button appends a node; drag
+  from a node's bottom handle to another's top to connect; double-click a node
+  to edit its label; select a node or edge and press Delete to remove it.
+-->
+<script lang="ts">import { Dialog } from "bits-ui";
+import { EMPTY_FLOWCHART } from "./node/data.js";
+// The `open` PROP is bound to `isOpen` because this component also exports an
+// `open(data)` METHOD (the node view's entry point) and the two cannot share
+// a name in one scope.
+let { open: isOpen = $bindable(false), initialData = EMPTY_FLOWCHART, onSave, titleLabel = "Edit flowchart", addNodeLabel = "Add node", helpText = "Drag from a node's bottom to another's top to connect. Double-click a node to edit its label. Select and press Delete to remove.", saveLabel = "Save", savingLabel = "Saving…", cancelLabel = "Cancel", closeLabel = "Close", failureMessage = "Failed to save diagram.", newNodeLabel = "New", nodeLabelLabel = "Node label", untitledLabel = "Untitled", class: className, id, ...rest } = $props();
+// A `bind:this` target, so the declared type must literally be `T |
+// undefined`: Svelte assigns the component instance itself into it, and
+// `undefined` before mount and after unmount.
+let flowchart = $state();
+/** The canvas component itself, once the dialog has been opened at least once. */
+let FlowchartCanvas = $state();
+let pending = $state(false);
+let errorMessage = $state("");
+/**
+* The payload queued by `open(data)` for the canvas that does not exist yet.
+* Deliberately NOT `$state`: it is read and cleared inside the effect below,
+* and making it reactive would make that effect invalidate itself.
+*/
+let queued;
+/**
+* Open the dialog on the given payload (default: `initialData`).
+*
+* The imperative entry point, kept for the ProseKit node view, which has an
+* instance to reach through `bind:this` but no place to thread a bound prop.
+*/
+export function open(data) {
+	errorMessage = "";
+	queued = data ?? initialData;
+	isOpen = true;
+}
+// Pull the canvas in the first time the dialog opens. Everything it drags
+// behind it — `@xyflow/svelte` and its stylesheet — stays out of the chunk
+// that merely renders the node view's SVG preview.
+async function loadCanvas() {
+	FlowchartCanvas = (await import("./Flowchart.svelte")).default;
+}
+$effect(() => {
+	if (!isOpen || FlowchartCanvas !== undefined) return;
+	void loadCanvas();
+});
+// Seed the canvas only once the dialog's content has mounted: `fitView` needs
+// a real layout box, and bits-ui does not render `Dialog.Content` until the
+// dialog is open. The effect re-runs when `bind:this` fills `flowchart` in;
+// `queueMicrotask` then defers past the mount effect that measures it.
+$effect(() => {
+	if (!isOpen) return;
+	const canvas = flowchart;
+	if (canvas === undefined) return;
+	const payload = queued ?? initialData;
+	queued = undefined;
+	queueMicrotask(() => {
+		canvas.resetTo(payload);
+	});
+});
+/**
+* bits-ui's request to change the open state — Escape, an outside click, or
+* the close button. Refused while a save is in flight, so the dialog cannot
+* disappear while `onSave` is still running.
+*/
+function handleOpenChange(next) {
+	if (!next && pending) return;
+	if (!next) errorMessage = "";
+	isOpen = next;
+}
+function close() {
+	handleOpenChange(false);
+}
+async function save() {
+	const snapshot = flowchart?.getSnapshot();
+	if (snapshot === undefined) return;
+	pending = true;
+	errorMessage = "";
+	try {
+		await onSave(snapshot);
+		isOpen = false;
+	} catch (error) {
+		errorMessage = error instanceof Error ? error.message : failureMessage;
+	} finally {
+		pending = false;
+	}
+}
+function addNode() {
+	flowchart?.addNode(newNodeLabel);
+}
+</script>
+
+<Dialog.Root bind:open={() => isOpen, handleOpenChange}>
+  <Dialog.Portal>
+    <!-- daisyUI's `modal-backdrop` is a child of an open `.modal`; this is the
+         same scrim as an element bits-ui can dismiss from. -->
+    <Dialog.Overlay class="bg-base-300/60 fixed inset-0 z-40" />
+    <Dialog.Content
+      {...rest}
+      {...(id === undefined ? {} : { id })}
+      class={[
+        'modal-box fixed top-1/2 left-1/2 z-50 max-h-[calc(100svh-2rem)] w-[calc(100vw-2rem)] max-w-6xl -translate-x-1/2 -translate-y-1/2',
+        className,
+      ]}
+    >
+      <div class="flex items-center justify-between gap-3">
+        <Dialog.Title class="text-lg font-bold">{titleLabel}</Dialog.Title>
+        <div class="flex items-center gap-2">
+          <button type="button" class="btn btn-sm btn-primary" disabled={pending} onclick={addNode}>
+            {addNodeLabel}
+          </button>
+          <Dialog.Close>
+            {#snippet child({ props })}
+              <button
+                {...props}
+                type="button"
+                class="btn btn-sm btn-ghost btn-square"
+                disabled={pending}
+                aria-label={closeLabel}
+              >
+                <span aria-hidden="true">✕</span>
+              </button>
+            {/snippet}
+          </Dialog.Close>
+        </div>
+      </div>
+      <Dialog.Description class="text-base-content/70 mt-1 text-sm">
+        {helpText}
+      </Dialog.Description>
+      <div class="border-base-300 mt-4 rounded border" style="height: 32rem;">
+        {#if FlowchartCanvas}
+          <!-- `nodeLabelLabel` and `untitledLabel` are forwarded rather than
+               left to the canvas's own defaults: the nodes an author edits in
+               here are the dialog's surface, and an application that
+               translated the dialog would otherwise find English inside it. -->
+          <FlowchartCanvas
+            bind:this={flowchart}
+            data={initialData}
+            interactive
+            class="h-full"
+            {nodeLabelLabel}
+            {untitledLabel}
+          />
+        {/if}
+      </div>
+      {#if errorMessage !== ''}
+        <p class="text-error pt-3 text-sm" role="alert">{errorMessage}</p>
+      {/if}
+      <div class="modal-action">
+        <button type="button" class="btn btn-ghost" disabled={pending} onclick={close}>
+          {cancelLabel}
+        </button>
+        <button type="button" class="btn btn-primary" disabled={pending} onclick={save}>
+          {pending ? savingLabel : saveLabel}
+        </button>
+      </div>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>

package/dist/FlowchartEditDialog.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FlowchartData } from './node/schema.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'id'> {
+    /** The dialog element's `id`. */
+    id?: string | undefined;
+    /** Whether the dialog is shown. Bindable. */
+    open?: boolean | undefined;
+    /** The payload the canvas opens with, when `open(data)` is not given one. */
+    initialData?: FlowchartData | undefined;
+    /** Called with the snapshot on Save; may be async, and may reject. */
+    onSave: (data: FlowchartData) => void | Promise<void>;
+    /** Heading — the dialog's accessible name. */
+    titleLabel?: string | undefined;
+    /** The button that appends a node to the canvas. */
+    addNodeLabel?: string | undefined;
+    /** The supporting sentence under the heading — the accessible description. */
+    helpText?: string | undefined;
+    /** The confirm button, at rest. */
+    saveLabel?: string | undefined;
+    /** The confirm button, while `onSave` is in flight. */
+    savingLabel?: string | undefined;
+    /** The discard button. */
+    cancelLabel?: string | undefined;
+    /** Accessible name of the corner close button. */
+    closeLabel?: string | undefined;
+    /** Shown when `onSave` rejects with something that is not an `Error`. */
+    failureMessage?: string | undefined;
+    /** Label given to a node added by the "Add node" button. */
+    newNodeLabel?: string | undefined;
+    /** Accessible name of a node's label field, forwarded to the canvas. */
+    nodeLabelLabel?: string | undefined;
+    /** Shown, and committed, when a node's label is blank; forwarded to the canvas. */
+    untitledLabel?: string | undefined;
+    /** Extra classes on the `modal-box`; merged last, so they win. */
+    class?: string | undefined;
+}
+/** The modal that hosts the editable `Flowchart` canvas, loaded on open; Save hands the diagram to `onSave`. */
+declare const FlowchartEditDialog: import("svelte").Component<Props, {
+    open: (data?: FlowchartData) => void;
+}, "open">;
+type FlowchartEditDialog = ReturnType<typeof FlowchartEditDialog>;
+export default FlowchartEditDialog;

package/dist/FlowchartNodeView.svelte

@@ -0,0 +1,71 @@
+<!-- @component The ProseKit node view for a `flowchart` node: previews it with the server-rendered SVG and edits it in `FlowchartEditDialog`. -->
+
+<!--
+  FlowchartNodeView — the Svelte node view ProseKit mounts for a `flowchart`
+  node.
+
+  The preview is the SAME server-renderable SVG a reader page gets
+  (`generateFlowchartSvg`, from this package's `./node` entry), so the editor
+  and the published article cannot drift, and so the `@xyflow/svelte` bundle
+  only loads when the author actually opens the edit dialog.
+
+  ## The one place stores are allowed
+
+  This workspace's Svelte code is runes-only. ProseKit's node-view contract is
+  the documented exception: the adapter hands the view a `Writable<Node>` and a
+  `Writable<boolean>` plus a `setAttrs` callback, and they are consumed here
+  through Svelte's `$store` auto-subscription. Nothing else in this package
+  touches a store.
+-->
+<script lang="ts">import FlowchartEditDialog from "./FlowchartEditDialog.svelte";
+import { EMPTY_FLOWCHART } from "./node/data.js";
+import { generateFlowchartSvg } from "./node/svg.js";
+// `node` is read as `$node` (store auto-subscription), which fallow's
+// component-prop check does not follow.
+// fallow-ignore-next-line unused-component-prop
+let { node, selected, setAttrs, editLabel = "Edit" } = $props();
+// A `bind:this` target, so the declared type must literally be `T |
+// undefined`: Svelte assigns the component instance itself into it, and
+// `undefined` before mount and after unmount.
+let dialog = $state();
+const data = $derived($node.attrs.data ?? EMPTY_FLOWCHART);
+const svg = $derived(generateFlowchartSvg(data));
+function openEditor() {
+	dialog?.open(data);
+}
+function handleSave(next) {
+	setAttrs({ data: next });
+}
+</script>
+
+<div
+  class="flowchart-node-view group relative my-3 rounded border p-2"
+  class:border-primary={$selected}
+  class:border-base-300={!$selected}
+  contenteditable="false"
+  data-prosemirror-node-name="flowchart"
+>
+  <div class="flowchart-preview overflow-hidden">
+    <!-- The SVG comes from this package's own escape-aware serialiser
+         (`./node/svg.ts`), which XML-escapes every label; it is never
+         user-supplied HTML. -->
+    {@html svg}
+  </div>
+  <button
+    type="button"
+    class="btn btn-xs btn-primary absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+    class:opacity-100={$selected}
+    onclick={openEditor}
+  >
+    {editLabel}
+  </button>
+</div>
+
+<FlowchartEditDialog bind:this={dialog} initialData={data} onSave={handleSave} />
+
+<style>
+  .flowchart-preview :global(svg) {
+    max-height: 20rem;
+    display: block;
+  }
+</style>

package/dist/FlowchartNodeView.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Attrs, Node as ProseMirrorNode } from '@prosekit/pm/model';
+import type { Writable } from 'svelte/store';
+interface Props {
+    /** The ProseMirror node this view renders, as ProseKit's store. */
+    node: Writable<ProseMirrorNode>;
+    /** Whether ProseMirror currently has this node selected. */
+    selected: Writable<boolean>;
+    /** Writes attributes back onto the node — the save channel. */
+    setAttrs: (attrs: Attrs) => void;
+    /** The button that opens the edit dialog. */
+    editLabel?: string | undefined;
+}
+/** The ProseKit node view for a `flowchart` node: previews it with the server-rendered SVG and edits it in `FlowchartEditDialog`. */
+declare const FlowchartNodeView: import("svelte").Component<Props, {}, "">;
+type FlowchartNodeView = ReturnType<typeof FlowchartNodeView>;
+export default FlowchartNodeView;

package/dist/flowchart-node-view.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The ProseKit node-view extension for the `flowchart` block.
+ *
+ * Kept apart from `./node/flowchart-node.ts` — which registers the node spec
+ * and the `updateFlowchartData` command — because the view pulls in Svelte, the
+ * edit dialog and (through it) `@xyflow/svelte`, none of which may reach the
+ * `./node` entry. A consuming app composes the two at editor-instantiation
+ * time: `defineFlowchart()` for the schema, `defineFlowchartNodeView()` for the
+ * UI.
+ *
+ * `defineSvelteNodeView` is a no-op on the server, so this is safe to include
+ * in an extension that is also built server-side.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/flowchart-node-view
+ */
+/**
+ * Registers {@link FlowchartNodeView} as the `flowchart` node's view, hosted in
+ * a `div`.
+ *
+ * Both mutation guards return `true` on purpose: the rendered diagram rewrites
+ * its own DOM (the SVG preview, and xyflow's canvas while the dialog is open),
+ * and without them ProseMirror would read those rewrites as document edits and
+ * fight the view for control of the node.
+ */
+export declare function defineFlowchartNodeView(): import("@prosekit/core").Extension<import("@prosekit/core").ExtensionTyping<any, any, any>>;

package/dist/flowchart-node-view.js

@@ -0,0 +1,35 @@
+/**
+ * The ProseKit node-view extension for the `flowchart` block.
+ *
+ * Kept apart from `./node/flowchart-node.ts` — which registers the node spec
+ * and the `updateFlowchartData` command — because the view pulls in Svelte, the
+ * edit dialog and (through it) `@xyflow/svelte`, none of which may reach the
+ * `./node` entry. A consuming app composes the two at editor-instantiation
+ * time: `defineFlowchart()` for the schema, `defineFlowchartNodeView()` for the
+ * UI.
+ *
+ * `defineSvelteNodeView` is a no-op on the server, so this is safe to include
+ * in an extension that is also built server-side.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/flowchart-node-view
+ */
+import { defineSvelteNodeView } from 'prosekit/svelte';
+import FlowchartNodeView from './FlowchartNodeView.svelte';
+/**
+ * Registers {@link FlowchartNodeView} as the `flowchart` node's view, hosted in
+ * a `div`.
+ *
+ * Both mutation guards return `true` on purpose: the rendered diagram rewrites
+ * its own DOM (the SVG preview, and xyflow's canvas while the dialog is open),
+ * and without them ProseMirror would read those rewrites as document edits and
+ * fight the view for control of the node.
+ */
+export function defineFlowchartNodeView() {
+    return defineSvelteNodeView({
+        name: 'flowchart',
+        component: FlowchartNodeView,
+        as: 'div',
+        ignoreMutation: () => true,
+        stopEvent: () => true,
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `@thomasfosterau/prosekit-flowchart` — the flowchart canvas, edit dialog
+ * and ProseKit node view on `@xyflow/svelte`.
+ *
+ * `Flowchart.svelte` carries this package's only side-effecting import,
+ * `@xyflow/svelte/dist/style.css`. The ProseKit node spec, its Effect Schema
+ * payload and the server SVG renderer live under `./node`, which imports
+ * neither Svelte nor xyflow and is a separate entry point — nothing from it is
+ * re-exported here, so a server bundle never reaches this module.
+ *
+ * @module
+ */
+export { default as EditableNode } from './EditableNode.svelte';
+export { default as Flowchart } from './Flowchart.svelte';
+export { defineFlowchartNodeView } from './flowchart-node-view.ts';
+export { default as FlowchartEditDialog } from './FlowchartEditDialog.svelte';
+export { default as FlowchartNodeView } from './FlowchartNodeView.svelte';
+export { flowchartSlashCommand, flowchartToolbarItem } from './toolbar.ts';

package/dist/index.js

@@ -0,0 +1,18 @@
+/**
+ * `@thomasfosterau/prosekit-flowchart` — the flowchart canvas, edit dialog
+ * and ProseKit node view on `@xyflow/svelte`.
+ *
+ * `Flowchart.svelte` carries this package's only side-effecting import,
+ * `@xyflow/svelte/dist/style.css`. The ProseKit node spec, its Effect Schema
+ * payload and the server SVG renderer live under `./node`, which imports
+ * neither Svelte nor xyflow and is a separate entry point — nothing from it is
+ * re-exported here, so a server bundle never reaches this module.
+ *
+ * @module
+ */
+export { default as EditableNode } from './EditableNode.svelte';
+export { default as Flowchart } from './Flowchart.svelte';
+export { defineFlowchartNodeView } from "./flowchart-node-view.js";
+export { default as FlowchartEditDialog } from './FlowchartEditDialog.svelte';
+export { default as FlowchartNodeView } from './FlowchartNodeView.svelte';
+export { flowchartSlashCommand, flowchartToolbarItem } from "./toolbar.js";

package/dist/node/data.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The flowchart payload's parser and empty-state default.
+ *
+ * `FlowchartPosition` is the one convenience type `./schema.ts` deliberately
+ * doesn't export on its own (see that module's doc comment); `FlowchartNode`,
+ * `FlowchartEdge` and `FlowchartData` are re-exported from `./schema.ts`
+ * directly by the package barrel, since each already merges the Effect Schema
+ * value and its decoded type under one name.
+ *
+ * Ported verbatim (semantics unchanged) from Website's
+ * `src/editor/flowchart/types.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/data
+ */
+import { FlowchartData as FlowchartDataSchema, FlowchartNode as FlowchartNodeSchema } from './schema.ts';
+/** Position of a node on the flowchart canvas. */
+export type FlowchartPosition = FlowchartNodeSchema['position'];
+/** Empty flowchart payload — used as the default attr value and on parse failure. */
+export declare const EMPTY_FLOWCHART: FlowchartDataSchema;
+/**
+ * Parses a JSON string into a `FlowchartData` payload, returning
+ * {@link EMPTY_FLOWCHART} on any failure. Validates the shape just enough to
+ * make downstream rendering safe.
+ *
+ * Nodes and edges are validated individually against `FlowchartNode` /
+ * `FlowchartEdge` — a single malformed entry is dropped, not the whole array.
+ */
+export declare function parseFlowchartData(input: string): FlowchartDataSchema;

package/dist/node/data.js

@@ -0,0 +1,57 @@
+/**
+ * The flowchart payload's parser and empty-state default.
+ *
+ * `FlowchartPosition` is the one convenience type `./schema.ts` deliberately
+ * doesn't export on its own (see that module's doc comment); `FlowchartNode`,
+ * `FlowchartEdge` and `FlowchartData` are re-exported from `./schema.ts`
+ * directly by the package barrel, since each already merges the Effect Schema
+ * value and its decoded type under one name.
+ *
+ * Ported verbatim (semantics unchanged) from Website's
+ * `src/editor/flowchart/types.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/data
+ */
+import * as Arr from 'effect/Array';
+import * as Option from 'effect/Option';
+import * as Predicate from 'effect/Predicate';
+import * as Schema from 'effect/Schema';
+import { FlowchartData as FlowchartDataSchema, FlowchartEdge as FlowchartEdgeSchema, FlowchartNode as FlowchartNodeSchema, } from "./schema.js";
+/**
+ * Parses a JSON string to `unknown`, or `Option.none()` when it is not JSON.
+ *
+ * Built once at module scope, alongside the per-element decoders below:
+ * `parseFlowchartData` runs per flowchart block on every server render, so
+ * none of these decoders must be rebuilt per call.
+ */
+const decodeJson = /* @__PURE__ */ Schema.decodeUnknownOption(
+/* @__PURE__ */ Schema.fromJsonString(Schema.Unknown));
+/** Decodes a single node, dropping it (via `Option.none()`) if malformed. */
+const decodeFlowchartNode = /* @__PURE__ */ Schema.decodeUnknownOption(FlowchartNodeSchema);
+/** Decodes a single edge, dropping it (via `Option.none()`) if malformed. */
+const decodeFlowchartEdge = /* @__PURE__ */ Schema.decodeUnknownOption(FlowchartEdgeSchema);
+/** Empty flowchart payload — used as the default attr value and on parse failure. */
+export const EMPTY_FLOWCHART = { nodes: [], edges: [] };
+/**
+ * Parses a JSON string into a `FlowchartData` payload, returning
+ * {@link EMPTY_FLOWCHART} on any failure. Validates the shape just enough to
+ * make downstream rendering safe.
+ *
+ * Nodes and edges are validated individually against `FlowchartNode` /
+ * `FlowchartEdge` — a single malformed entry is dropped, not the whole array.
+ */
+export function parseFlowchartData(input) {
+    const decoded = decodeJson(input);
+    if (Option.isNone(decoded))
+        return { ...EMPTY_FLOWCHART };
+    const parsed = decoded.value;
+    if (!Predicate.isObjectOrArray(parsed))
+        return { ...EMPTY_FLOWCHART };
+    const nodes = Predicate.hasProperty(parsed, 'nodes') && Array.isArray(parsed.nodes)
+        ? Arr.getSomes(parsed.nodes.map((node) => decodeFlowchartNode(node)))
+        : [];
+    const edges = Predicate.hasProperty(parsed, 'edges') && Array.isArray(parsed.edges)
+        ? Arr.getSomes(parsed.edges.map((edge) => decodeFlowchartEdge(edge)))
+        : [];
+    return { nodes, edges };
+}

package/dist/node/flowchart-node.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Flowchart block node for the ProseKit editor.
+ *
+ * Stores the diagram payload as a single `data` attribute containing a
+ * {@link FlowchartData}. The DOM representation is
+ * `<div data-flowchart>{JSON}</div>` so SSR and paste both round-trip the
+ * data through textContent.
+ *
+ * Ported verbatim from Website's `src/editor/flowchart/flowchart-node.ts`.
+ * The Svelte-backed node view lives at the flowchart package's root; this
+ * module only registers the schema-side node spec and the editing command.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/flowchart-node
+ */
+/**
+ * Schema-side extension for the flowchart block: registers the node spec and
+ * the `updateFlowchartData` editing command. The Svelte-backed node view
+ * lives at this package's root and is composed in by the consuming app's
+ * editor component at instantiation time.
+ */
+export declare function defineFlowchart(): import("@prosekit/core").Union<readonly [import("@prosekit/core").Extension<{
+    Nodes: {
+        flowchart: {
+            data: {
+                readonly nodes: readonly {
+                    readonly id: string;
+                    readonly position: {
+                        readonly x: number;
+                        readonly y: number;
+                    };
+                    readonly data: {
+                        readonly label: string;
+                    };
+                }[];
+                readonly edges: readonly {
+                    readonly id: string;
+                    readonly source: string;
+                    readonly target: string;
+                }[];
+            };
+        };
+    };
+}>, import("@prosekit/core").Extension<{
+    Commands: {
+        updateFlowchartData: [pos: number, data: {
+            readonly nodes: readonly {
+                readonly id: string;
+                readonly position: {
+                    readonly x: number;
+                    readonly y: number;
+                };
+                readonly data: {
+                    readonly label: string;
+                };
+            }[];
+            readonly edges: readonly {
+                readonly id: string;
+                readonly source: string;
+                readonly target: string;
+            }[];
+        }];
+    };
+}>]>;

package/dist/node/flowchart-node.js

@@ -0,0 +1,100 @@
+/**
+ * Flowchart block node for the ProseKit editor.
+ *
+ * Stores the diagram payload as a single `data` attribute containing a
+ * {@link FlowchartData}. The DOM representation is
+ * `<div data-flowchart>{JSON}</div>` so SSR and paste both round-trip the
+ * data through textContent.
+ *
+ * Ported verbatim from Website's `src/editor/flowchart/flowchart-node.ts`.
+ * The Svelte-backed node view lives at the flowchart package's root; this
+ * module only registers the schema-side node spec and the editing command.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/flowchart-node
+ */
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
+import { defineCommands, defineNodeSpec, union } from 'prosekit/core';
+import { EMPTY_FLOWCHART, parseFlowchartData } from "./data.js";
+/**
+ * JSON encoder for the `data` attr payload. Built once at module scope —
+ * `toDOM` runs per flowchart node on every editor render.
+ */
+const encodeJson = /* @__PURE__ */ Schema.encodeSync(
+/* @__PURE__ */ Schema.fromJsonString(Schema.Unknown));
+/**
+ * JSON encoding with HTML-sensitive characters unicode-escaped so the result
+ * can be embedded in an HTML attribute value without breaking out, regardless
+ * of which quote the serializer chooses.
+ */
+function htmlSafeStringify(value) {
+    return encodeJson(value)
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')
+        .replace(/'/g, '\\u0027');
+}
+function defineFlowchartNodeSpec() {
+    return defineNodeSpec({
+        name: 'flowchart',
+        group: 'block',
+        atom: true,
+        draggable: true,
+        selectable: true,
+        isolating: true,
+        attrs: {
+            data: { default: EMPTY_FLOWCHART },
+        },
+        parseDOM: [
+            {
+                tag: 'div[data-flowchart]',
+                getAttrs: (el) => {
+                    // Prefer the `data-payload` attribute (current emit format). Fall
+                    // back to text content for older serialised documents where the
+                    // JSON lived inside the element.
+                    const payload = el.getAttribute('data-payload') ?? el.textContent ?? '';
+                    return { data: parseFlowchartData(payload) };
+                },
+            },
+        ],
+        toDOM: (node) => {
+            // ProseMirror `attrs` is a foreign plain object; convert at the
+            // boundary rather than pushing `Option` into the node spec.
+            // SAFETY: `data` is only ever written by this spec's default
+            // (`EMPTY_FLOWCHART`), by `parseDOM` (`parseFlowchartData`) and by
+            // `updateFlowchartData`, all of which produce a `FlowchartData`; a
+            // caller-supplied nullish `data` is still caught below.
+            const attrs = node.attrs;
+            const data = Option.getOrElse(Option.fromNullishOr(attrs.data), () => EMPTY_FLOWCHART);
+            // Persist the JSON in an attribute so the element's inner content is
+            // free for the post-rendered SVG (see `./html.ts`). The JSON is
+            // unicode-escaped so user-supplied labels containing `<`, `>`, `&`, `'`
+            // can never break out of the attribute context. The empty text child
+            // ensures happy-dom emits a proper closing tag.
+            return ['div', { 'data-flowchart': '', 'data-payload': htmlSafeStringify(data) }, ''];
+        },
+    });
+}
+function defineFlowchartCommands() {
+    return defineCommands({
+        updateFlowchartData: (pos, data) => (state, dispatch) => {
+            const node = state.doc.nodeAt(pos);
+            if (!node || node.type.name !== 'flowchart')
+                return false;
+            if (dispatch) {
+                const tr = state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, data });
+                dispatch(tr);
+            }
+            return true;
+        },
+    });
+}
+/**
+ * Schema-side extension for the flowchart block: registers the node spec and
+ * the `updateFlowchartData` editing command. The Svelte-backed node view
+ * lives at this package's root and is composed in by the consuming app's
+ * editor component at instantiation time.
+ */
+export function defineFlowchart() {
+    return union(defineFlowchartNodeSpec(), defineFlowchartCommands());
+}