@dogsbay/editor 0.0.0-stage → 0.2.0-beta.174

package/dist/schema.js

@@ -0,0 +1,395 @@
+/**
+ * TipTap schema for the TreeNode vocabulary: StarterKit (paragraph,
+ * heading, lists, blockquote, codeBlock, horizontalRule, hardBreak,
+ * bold/italic/strike/code/link marks) plus the custom pieces:
+ *   - callout      — a block container
+ *   - variable     — an inline atom (the directive-chip mechanism)
+ *   - dogsbayBlock — a block atom carrying verbatim TreeNode JSON (lossless
+ *                    passthrough for tables and anything unmodeled)
+ *   - dogsbayInline — the inline equivalent
+ *   - DogsbayProps — a hidden global attribute on every modeled block that
+ *                    carries the original TreeNode props/meta verbatim, so
+ *                    fields the editor doesn't model (code title/highlights,
+ *                    heading {#id .class}, ordered-list start, …) survive
+ *                    the round trip. ProseMirror drops undeclared attrs, so
+ *                    this MUST be a declared attribute.
+ *
+ * Underline is disabled: InlineText has no underline flag (markdown cannot
+ * express it), so anything underlined in the editor would be silently
+ * stripped on serialize — better not to offer it.
+ */
+import { Extension, Node, mergeAttributes, callOrReturn, getExtensionField } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { tableEditing, goToNextCell, isInTable, addRowAfter } from "@tiptap/pm/tables";
+export const DogsbayProps = Extension.create({
+    name: "dogsbayProps",
+    addGlobalAttributes() {
+        return [
+            {
+                types: [
+                    "paragraph",
+                    "heading",
+                    "blockquote",
+                    "bulletList",
+                    "orderedList",
+                    "listItem",
+                    "codeBlock",
+                    "horizontalRule",
+                    "callout",
+                    "conditional",
+                    "include",
+                    "varDef",
+                    "directiveRaw",
+                    "table",
+                    "tableRow",
+                    "tableHeader",
+                    "tableCell",
+                ],
+                attributes: {
+                    dogsbayProps: { default: null, rendered: false, keepOnSplit: false },
+                },
+            },
+        ];
+    },
+});
+/**
+ * Tables are NATIVE nodes on prosemirror-tables (via `@tiptap/pm/tables` —
+ * no extra dependency), not the `dogsbayBlock` passthrough: a writer edits
+ * cells in place, and row/column commands come from prosemirror-tables.
+ *
+ * Cells hold `block+` because a Dogsbay table cell may hold blocks (the
+ * serializer emits an HTML table for those); the common case is one
+ * paragraph, which the bridge maps back to the cell's `inline`.
+ *
+ * `align` is a first-class cell attribute — it is GFM column alignment
+ * (`:--`), which the toolbar edits and the serializer re-emits. Everything
+ * else the table carries (`caption`, `#id`, `.class`) rides `dogsbayProps`.
+ *
+ * The nodes deliberately do NOT render `colwidth`/resize handles: Dogsbay
+ * MD has no column-width concept, so a width set here could not survive a
+ * save.
+ */
+const cellAttributes = () => ({
+    colspan: { default: 1 },
+    rowspan: { default: 1 },
+    align: { default: null },
+});
+export const Table = Node.create({
+    name: "table",
+    group: "block",
+    content: "tableRow+",
+    tableRole: "table",
+    isolating: true,
+    parseHTML() {
+        return [{ tag: "table" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["table", mergeAttributes(HTMLAttributes), ["tbody", 0]];
+    },
+});
+export const TableRow = Node.create({
+    name: "tableRow",
+    content: "(tableCell | tableHeader)*",
+    tableRole: "row",
+    parseHTML() {
+        return [{ tag: "tr" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["tr", mergeAttributes(HTMLAttributes), 0];
+    },
+});
+export const TableHeader = Node.create({
+    name: "tableHeader",
+    content: "block+",
+    tableRole: "header_cell",
+    isolating: true,
+    addAttributes: cellAttributes,
+    parseHTML() {
+        return [{ tag: "th" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return ["th", mergeAttributes(HTMLAttributes, alignAttrs(node.attrs.align)), 0];
+    },
+});
+export const TableCell = Node.create({
+    name: "tableCell",
+    content: "block+",
+    tableRole: "cell",
+    isolating: true,
+    addAttributes: cellAttributes,
+    parseHTML() {
+        return [{ tag: "td" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return ["td", mergeAttributes(HTMLAttributes, alignAttrs(node.attrs.align)), 0];
+    },
+});
+const alignAttrs = (align) => (align ? { style: `text-align: ${align}` } : {});
+/** prosemirror-tables' editing plugin + cell navigation (Tab / Shift-Tab). */
+export const TableEditing = Extension.create({
+    name: "tableEditing",
+    extendNodeSchema(extension) {
+        const context = { name: extension.name, options: extension.options, storage: extension.storage };
+        return { tableRole: callOrReturn(getExtensionField(extension, "tableRole", context)) };
+    },
+    addProseMirrorPlugins() {
+        return [tableEditing({ allowTableNodeSelection: false })];
+    },
+    addKeyboardShortcuts() {
+        return {
+            // a list inside a cell is the INNER context: Tab indents it, as it does anywhere else
+            Tab: () => (sinkList(this.editor) ? true : goToCell(this.editor, 1)),
+            "Shift-Tab": () => (liftList(this.editor) ? true : goToCell(this.editor, -1)),
+        };
+    },
+});
+/**
+ * Tab moves to the next cell, and only inside a table (outside one it falls
+ * through, so Tab still means what it means everywhere else). Tab in the
+ * last cell appends a row — the standard way to grow a table by typing.
+ */
+function goToCell(editor, dir) {
+    const { state, view } = editor;
+    if (!isInTable(state))
+        return false;
+    if (goToNextCell(dir)(state, view.dispatch))
+        return true;
+    if (dir === -1)
+        return false;
+    if (!addRowAfter(state, view.dispatch))
+        return false;
+    // the row was added in a new state: re-read it before moving
+    return goToNextCell(1)(view.state, view.dispatch);
+}
+const sinkList = (editor) => editor.can().sinkListItem("listItem") && editor.commands.sinkListItem("listItem");
+const liftList = (editor) => editor.can().liftListItem("listItem") && editor.commands.liftListItem("listItem");
+export const Callout = Node.create({
+    name: "callout",
+    group: "block",
+    content: "block+",
+    defining: true,
+    addAttributes() {
+        return { tone: { default: "note" } };
+    },
+    parseHTML() {
+        return [{ tag: "aside[data-callout]" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["aside", mergeAttributes(HTMLAttributes, { "data-callout": "" }), 0];
+    },
+});
+export const Variable = Node.create({
+    name: "variable",
+    group: "inline",
+    inline: true,
+    atom: true,
+    selectable: true,
+    // Atoms default to NO marks; directive chips inherit their containing
+    // span's formatting (InlineVariable.bold/italic/strikethrough), which
+    // the bridge maps to marks — so marks must be allowed here.
+    marks: "bold italic strike",
+    addAttributes() {
+        return { expr: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-variable]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, { "data-variable": "", class: "variable" }),
+            `{{ ${node.attrs.expr} }}`,
+        ];
+    },
+});
+/* ── Directive nodes (directive-model Phase 5a) ─────────────────────────
+ * First-class editor nodes for the preserve-mode TreeNode vocabulary:
+ * conditional / include / var-def / directive-raw (block) and
+ * conditional-span / directive-raw-inline (inline). Chip UX (node views,
+ * attribute editing, minja preview) is Phase 5b; renderHTML below is the
+ * minimal semantic rendering the WYSIWYG shows meanwhile.
+ */
+export const Conditional = Node.create({
+    name: "conditional",
+    group: "block",
+    // block* not block+: an empty `{% if %}{% endif %}` region is valid source
+    content: "block*",
+    defining: true,
+    addAttributes() {
+        return { test: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "section[data-conditional]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            "section",
+            mergeAttributes(HTMLAttributes, {
+                "data-conditional": "",
+                "data-test": String(node.attrs.test ?? ""),
+                class: "directive-conditional",
+            }),
+            0,
+        ];
+    },
+});
+export const Include = Node.create({
+    name: "include",
+    group: "block",
+    atom: true,
+    addAttributes() {
+        return { src: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "div[data-include]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, { "data-include": "", class: "directive-include" }),
+            `include: ${node.attrs.src}`,
+        ];
+    },
+});
+export const VarDef = Node.create({
+    name: "varDef",
+    group: "block",
+    atom: true,
+    addAttributes() {
+        return { name: { default: "" }, value: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "div[data-var-def]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, { "data-var-def": "", class: "directive-var-def" }),
+            `set ${node.attrs.name} = ${node.attrs.value}`,
+        ];
+    },
+});
+export const DirectiveRaw = Node.create({
+    name: "directiveRaw",
+    group: "block",
+    atom: true,
+    addAttributes() {
+        return { source: { default: "" }, kind: { default: null } };
+    },
+    parseHTML() {
+        return [{ tag: "div[data-directive-raw]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, { "data-directive-raw": "", class: "directive-raw" }),
+            String(node.attrs.source ?? ""),
+        ];
+    },
+});
+export const ConditionalSpan = Node.create({
+    name: "conditionalSpan",
+    group: "inline",
+    inline: true,
+    content: "inline*",
+    marks: "bold italic strike",
+    addAttributes() {
+        return { test: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-conditional-span]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-conditional-span": "",
+                "data-test": String(node.attrs.test ?? ""),
+                class: "directive-conditional-span",
+            }),
+            0,
+        ];
+    },
+});
+export const DirectiveRawInline = Node.create({
+    name: "directiveRawInline",
+    group: "inline",
+    inline: true,
+    atom: true,
+    marks: "bold italic strike",
+    addAttributes() {
+        return { source: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-directive-raw-inline]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-directive-raw-inline": "",
+                class: "directive-raw-inline",
+            }),
+            String(node.attrs.source ?? ""),
+        ];
+    },
+});
+export const DogsbayBlock = Node.create({
+    name: "dogsbayBlock",
+    group: "block",
+    atom: true,
+    addAttributes() {
+        return { json: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "div[data-dogsbay-block]" }];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        let label = "block";
+        try {
+            label = JSON.parse(String(node.attrs.json ?? "{}")).type ?? "block";
+        }
+        catch {
+            /* keep default */
+        }
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, { "data-dogsbay-block": "", class: "dogsbay-block" }),
+            `⟨${label}⟩`,
+        ];
+    },
+});
+export const DogsbayInline = Node.create({
+    name: "dogsbayInline",
+    group: "inline",
+    inline: true,
+    atom: true,
+    addAttributes() {
+        return { json: { default: "" } };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-dogsbay-inline]" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["span", mergeAttributes(HTMLAttributes, { "data-dogsbay-inline": "" }), "⟨inline⟩"];
+    },
+});
+export const extensions = [
+    StarterKit.configure({ underline: false }),
+    DogsbayProps,
+    Table,
+    TableRow,
+    TableHeader,
+    TableCell,
+    TableEditing,
+    Callout,
+    Variable,
+    Conditional,
+    Include,
+    VarDef,
+    DirectiveRaw,
+    ConditionalSpan,
+    DirectiveRawInline,
+    DogsbayBlock,
+    DogsbayInline,
+];

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@dogsbay/editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0-beta.174",
+  "license": "MIT",
+  "type": "module",
+  "description": "TipTap/ProseMirror editor for Dogsbay Markdown: schema, a lossless TreeNode ⇄ ProseMirror bridge, and the editor on one block of a page (./block)",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./block": {
+      "types": "./dist/block.d.ts",
+      "import": "./dist/block.js"
+    },
+    "./block-view": {
+      "types": "./dist/block-view.d.ts",
+      "import": "./dist/block-view.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@dogsbay/format-dogsbay-md": "0.2.0-beta.174",
+    "@dogsbay/minja": "0.2.0-beta.174",
+    "@dogsbay/tree-diff": "0.2.0-beta.174",
+    "@dogsbay/types": "0.2.0-beta.174"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^3.27.3",
+    "@tiptap/pm": "^3.27.3",
+    "@tiptap/starter-kit": "^3.27.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.1",
+    "@tiptap/core": "^3.27.3",
+    "@tiptap/pm": "^3.27.3",
+    "@tiptap/react": "^3.27.3",
+    "@tiptap/starter-kit": "^3.27.3",
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "esbuild": "0.28.1",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^5.9.3",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dogsbay/dogsbay.git",
+    "directory": "packages/editor"
+  },
+  "homepage": "https://github.com/dogsbay/dogsbay/tree/main/packages/editor",
+  "bugs": {
+    "url": "https://github.com/dogsbay/dogsbay/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:e2e": "playwright test"
+  }
 }