@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/plugin/notes/nodeActions.ts

@@ -0,0 +1,100 @@
+import { v4 as uuidv4 } from 'uuid';
+import type { Node } from 'reactflow';
+import type { CommandContext } from '@/store/commands';
+import type { GraphSession } from '@/system/graphSession';
+
+/** Node type registered for notes created by this plugin. */
+export const NOTE_NODE_TYPE = 'noteNode';
+
+/**
+ * Type string notes used while they lived in the core editor as "comment"
+ * nodes. Registered as an alias so graphs saved before the move still render.
+ */
+export const LEGACY_COMMENT_NODE_TYPE = 'commentNode';
+
+export const isNoteNode = (node: Node | undefined): node is Node =>
+  node?.type === NOTE_NODE_TYPE || node?.type === LEGACY_COMMENT_NODE_TYPE;
+
+export const noteAt = (ctx: CommandContext): Node | undefined => {
+  const node = ctx.session.nodeStore
+    .getState()
+    .nodes.find((n) => n.id === ctx.nodeId);
+  return isNoteNode(node) ? node : undefined;
+};
+
+export const duplicateNote = (session: GraphSession, note: Node): void => {
+  const copy: Node = {
+    ...note,
+    id: uuidv4(),
+    selected: false,
+    position: { x: note.position.x + 24, y: note.position.y + 24 },
+    data: { ...note.data }
+  };
+  session.undoManager.execute({
+    name: 'Duplicate note',
+    execute: () => {
+      session.nodeStore.getState().addNode(copy);
+    },
+    undo: () => {
+      session.nodeStore
+        .getState()
+        .setNodes((existing) => existing.filter((n) => n.id !== copy.id));
+    }
+  });
+};
+
+export const deleteNote = (session: GraphSession, note: Node): void => {
+  const index = session.nodeStore
+    .getState()
+    .nodes.findIndex((n) => n.id === note.id);
+  session.undoManager.execute({
+    name: 'Delete note',
+    execute: () => {
+      session.nodeStore
+        .getState()
+        .setNodes((existing) => existing.filter((n) => n.id !== note.id));
+    },
+    undo: () => {
+      session.nodeStore.getState().setNodes((existing) => {
+        const next = [...existing];
+        next.splice(Math.min(index, next.length), 0, note);
+        return next;
+      });
+    }
+  });
+};
+
+/**
+ * Move a note within the nodes array: React Flow paints later nodes on top, so
+ * array order is z-order.
+ */
+export const reorderNote = (
+  session: GraphSession,
+  note: Node,
+  to: 'front' | 'back'
+): void => {
+  const from = session.nodeStore
+    .getState()
+    .nodes.findIndex((n) => n.id === note.id);
+  if (from < 0) return;
+
+  const move = (position: 'front' | 'back' | number) => {
+    session.nodeStore.getState().setNodes((existing) => {
+      const index = existing.findIndex((n) => n.id === note.id);
+      if (index < 0) return existing;
+      const next = [...existing];
+      const [moved] = next.splice(index, 1);
+      if (moved === undefined) return existing;
+      if (position === 'front') next.push(moved);
+      else if (position === 'back') next.unshift(moved);
+      else next.splice(Math.min(position, next.length), 0, moved);
+      return next;
+    });
+  };
+
+  session.undoManager.execute({
+    name: to === 'front' ? 'Bring note to front' : 'Send note to back',
+    execute: () => move(to),
+    undo: () => move(from)
+  });
+};

package/src/plugin/notes/note.tsx

@@ -0,0 +1,20 @@
+import { lazy, memo, Suspense } from 'react';
+import type { NodeProps } from 'reactflow';
+import type { INoteNode } from '@/types/nodes';
+
+/**
+ * Note nodes embed a tiptap/prosemirror rich-text editor (~320 KB). Most
+ * graphs have no note nodes, so load the implementation lazily — the editor
+ * weight only enters the bundle when a note node is actually rendered.
+ */
+const LazyNoteNode = lazy(() =>
+  import('./noteImpl').then((m) => ({ default: m.NoteNodeImpl }))
+);
+
+const NoteNodeRaw = (props: NodeProps<INoteNode['data']>) => (
+  <Suspense fallback={null}>
+    <LazyNoteNode {...props} />
+  </Suspense>
+);
+
+export const NoteNode = memo(NoteNodeRaw);

package/src/plugin/notes/noteImpl.tsx

@@ -0,0 +1,89 @@
+import { NodeResizer } from 'reactflow';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Youtube from '@tiptap/extension-youtube';
+import { useChangeNodeData } from '@/hooks/useChangeNodeData';
+import { Markdown } from 'tiptap-markdown';
+import type { INoteNode } from '@/types/nodes';
+import { FormatToolbar } from './FormatToolbar';
+import type { NodeProps } from 'reactflow';
+
+const NOTE_MIN_WIDTH = 160;
+const NOTE_MIN_HEIGHT = 80;
+
+/**
+ * The actual note node, pulling in tiptap/prosemirror (~320 KB). It is loaded
+ * lazily by `note.tsx` so that weight only lands in the bundle when a note
+ * node is actually rendered.
+ *
+ * The note draws its own frame directly against the React Flow node bounds.
+ * It must NOT use BaseNodeWrapper: that adds behave-node chrome (a second
+ * bordered box) and breaks the height chain, so the frame sizes to content
+ * instead of the node and drifts out of the NodeResizer bounds.
+ *
+ * Layout: the root div only positions the NodeResizer and floating toolbar (it
+ * must not clip, or the toolbar disappears); the frame inside it clips. Only
+ * the header drags the node (`dragHandle` set by `addNote`) — the body is
+ * `nodrag nopan` so selecting text neither moves the node nor pans the canvas.
+ * The editor is always editable: a single click gives a caret; the format
+ * toolbar shows while the node is selected.
+ *
+ * Font size cascades from a React `style` on the root — never write to
+ * `editor.view.dom` in an effect; tiptap v3 throws if the view has not mounted.
+ */
+export const NoteNodeImpl = ({
+  data,
+  selected,
+  id
+}: NodeProps<INoteNode['data']>) => {
+  const handleNodeChange = useChangeNodeData(id);
+
+  const editor = useEditor({
+    extensions: [StarterKit, Markdown, Youtube.configure({ nocookie: true })],
+    content: data.text || 'New note',
+    editorProps: {
+      attributes: {
+        class: 'nodrag nopan'
+      }
+    },
+    onUpdate: ({ editor }) => {
+      const markdown = (
+        editor.storage as { markdown?: { getMarkdown(): string } }
+      ).markdown;
+      if (markdown) {
+        handleNodeChange('text', markdown.getMarkdown());
+      }
+    }
+  });
+
+  return (
+    <ErrorBoundary fallback={<div>Error rendering note</div>}>
+      <div
+        className="notes-node-root"
+        style={{ fontSize: data.fontSize || 'medium' }}
+      >
+        <NodeResizer
+          minWidth={NOTE_MIN_WIDTH}
+          minHeight={NOTE_MIN_HEIGHT}
+          color="#ff0071"
+          isVisible={selected || false}
+        />
+        {editor && selected && <FormatToolbar editor={editor} />}
+
+        <div className="notes-node">
+          <div className="notes-node__header">
+            <span className="notes-node__grip" aria-hidden>
+              ⠿
+            </span>
+            <span>Note</span>
+          </div>
+          <EditorContent
+            editor={editor}
+            className="notes-node__editor nodrag nopan"
+          />
+        </div>
+      </div>
+    </ErrorBoundary>
+  );
+};