dtoro
a0566ce64c
apps/web — Next.js 16 + TypeScript + React 19 (no Tailwind) M1 Visual port - Manuscript theme + base styles ported verbatim from design-source - 100dvh layout with internal scroll regions (rail / narrative / dock thread) - TopBar, LeftRail (collapsible sections + collapsed strip), CanvasHeader, StatusBar, EditorShell composing the dual-canvas - SocratesDock (subtle/default/prominent) with bubbles + numbered options - Sigil (Σ + laurel) used across editor and seed screens - SeedScreen with emerging-seed rail, mini-graph, confidence bar, thread, typing indicator, input row - Routes: / (homepage), /editor/[projectId], /seed - Aristotle fixture in lib/fixtures (ported from data.js) M2 Real text editor - TipTap (StarterKit + custom Chip atom inline node + ReactNodeViewRenderer) - Slash-menu insertion via @tiptap/suggestion with arrow / number-key shortcuts - ChipFocusContext bridges narrative ↔ diagram hover/selection across the TipTap render boundary - fixtureToDoc converts the fixture narrative → ProseMirror JSON M3 Real diagram - React Flow (@xyflow/react) custom node (block / actor / constraint / system) matching prototype's softened look - Custom edge with bezier path + label renderer (association / composition / constraint variants) - Drag-create from a left-side palette via HTML5 DnD + screenToFlowPosition - NodeInspector panel: edit kind / label / properties (or expression for constraints); delete cascades to incident edges - Bidirectional focus highlighting between chips (narrative) and blocks (diagram) - Removed redundant legend (stereotype labels on nodes serve same purpose) State for M3 lives in component memory; persistence + bidirectional sync land in M4–M5.
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
// TipTap node definition for inline model-element chips.
|
|
//
|
|
// M2: chips are inline, atomic, selectable. They carry { kind, refId, label }.
|
|
// In MVP M5 the label will be derived from a live model lookup keyed by refId;
|
|
// for M2 we store it directly on the node so renaming + persistence Just Work.
|
|
|
|
import { Node, mergeAttributes } from "@tiptap/core";
|
|
import { ReactNodeViewRenderer } from "@tiptap/react";
|
|
import type { ChipKind } from "../../lib/fixtures/aristotle";
|
|
import { ChipView } from "./ChipView";
|
|
|
|
export interface ChipAttrs {
|
|
kind: ChipKind;
|
|
refId: string | null;
|
|
label: string;
|
|
}
|
|
|
|
declare module "@tiptap/core" {
|
|
interface Commands<ReturnType> {
|
|
chip: {
|
|
insertChip: (attrs: ChipAttrs) => ReturnType;
|
|
};
|
|
}
|
|
}
|
|
|
|
export const ChipNode = Node.create({
|
|
name: "chip",
|
|
group: "inline",
|
|
inline: true,
|
|
atom: true,
|
|
selectable: true,
|
|
draggable: false,
|
|
|
|
addAttributes() {
|
|
return {
|
|
kind: {
|
|
default: "block",
|
|
parseHTML: el => el.getAttribute("data-kind") ?? "block",
|
|
renderHTML: attrs => ({ "data-kind": attrs.kind }),
|
|
},
|
|
refId: {
|
|
default: null,
|
|
parseHTML: el => el.getAttribute("data-ref-id"),
|
|
renderHTML: attrs => (attrs.refId ? { "data-ref-id": attrs.refId } : {}),
|
|
},
|
|
label: {
|
|
default: "untitled",
|
|
parseHTML: el => el.getAttribute("data-label") ?? el.textContent ?? "untitled",
|
|
renderHTML: attrs => ({ "data-label": attrs.label }),
|
|
},
|
|
};
|
|
},
|
|
|
|
parseHTML() {
|
|
return [{ tag: "span[data-chip]" }];
|
|
},
|
|
|
|
renderHTML({ HTMLAttributes, node }) {
|
|
return [
|
|
"span",
|
|
mergeAttributes({ "data-chip": "" }, HTMLAttributes),
|
|
`${node.attrs.label}`,
|
|
];
|
|
},
|
|
|
|
addNodeView() {
|
|
return ReactNodeViewRenderer(ChipView);
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
insertChip:
|
|
(attrs: ChipAttrs) =>
|
|
({ chain }) =>
|
|
chain()
|
|
.insertContent({ type: this.name, attrs })
|
|
// Insert a trailing space so the caret leaves the chip cleanly
|
|
.insertContent(" ")
|
|
.run(),
|
|
};
|
|
},
|
|
});
|