app/lib/editor/schema.mjs

Functions

Imports

It imports app/lib/editor/markdown.mjs. Imported by app/components/editor/rich-editor.tsx, app/components/editor/source-views.ts.

Source

1// The formatted editor's schema: Tiptap's MIT StarterKit for prose, with what
2// Markdown underneath needs. Every top-level block carries `md`, its origin (the bytes it was read
3// from and the bytes before it), never rendered and never copied onto the half of a split block. A
4// source block and a source atom hold Markdown the editor does not format, exactly as written.
5// No DOM here: the browser adds the node views (components/editor/rich-editor.tsx), and the round-trip
6// check builds the same schema in Node.
7
8import { Extension, getSchema, Node } from "@tiptap/core";
9import { ListItem } from "@tiptap/extension-list";
10import StarterKit from "@tiptap/starter-kit";
11
12import { BLOCK_TYPES } from "./markdown.mjs";
13
14const MdOrigin = Extension.create({
15  name: "mdOrigin",
16  addGlobalAttributes() {
17    return [{ types: BLOCK_TYPES, attributes: { md: { default: null, rendered: false, keepOnSplit: false } } }];
18  },
19});
20
21export const SourceBlock = Node.create({
22  name: "sourceBlock",
23  group: "block",
24  atom: true,
25  selectable: true,
26  draggable: false,
27  addAttributes() {
28    return { text: { default: "", rendered: false }, kind: { default: "Markdown", rendered: false } };
29  },
30  parseHTML() {
31    return [{ tag: "pre[data-source-block]", getAttrs: (el) => ({ text: el.textContent ?? "" }) }];
32  },
33  renderHTML({ node }) {
34    return ["pre", { "data-source-block": "" }, node.attrs.text];
35  },
36});
37
38export const SourceInline = Node.create({
39  name: "sourceInline",
40  group: "inline",
41  inline: true,
42  atom: true,
43  selectable: true,
44  addAttributes() {
45    return { text: { default: "", rendered: false } };
46  },
47  parseHTML() {
48    return [{ tag: "code[data-source-inline]", getAttrs: (el) => ({ text: el.textContent ?? "" }) }];
49  },
50  renderHTML({ node }) {
51    return ["code", { "data-source-inline": "" }, node.attrs.text];
52  },
53});
54
55/** Tab leaves the editor (WCAG 2.1.2), as it does today: the list item keeps Enter only. */
56const ListItemNoTab = ListItem.extend({
57  addKeyboardShortcuts() {
58    return { Enter: () => this.editor.commands.splitListItem(this.name) };
59  },
60});
61
62/** The extensions every editor and the round-trip check share. */
63export function baseExtensions() {
64  return [
65    StarterKit.configure({
66      codeBlock: false,
67      underline: false,
68      trailingNode: false,
69      listItem: false,
70      listKeymap: false,
71      link: { openOnClick: false, autolink: false, linkOnPaste: false, HTMLAttributes: { target: null, rel: null } },
72    }),
73    ListItemNoTab,
74    MdOrigin,
75    SourceBlock,
76    SourceInline,
77  ];
78}
79
80/** The schema alone, for checking and normalising JSON without an editor. */
81export function editorSchema() {
82  return getSchema(baseExtensions());
83}