a tool for shared writing and social publishing
leaflet.pub
1import { Schema, Node, MarkSpec } from "prosemirror-model";
2import { marks } from "prosemirror-schema-basic";
3import { theme } from "tailwind.config";
4
5let baseSchema = {
6 marks: {
7 strong: marks.strong,
8 em: marks.em,
9 code: {
10 parseDOM: [
11 {
12 tag: "code",
13 },
14 ],
15
16 toDOM() {
17 return ["code", { class: "inline-code" }, 0];
18 },
19 } as MarkSpec,
20 underline: {
21 parseDOM: [
22 { tag: "u" },
23 {
24 style: "text-decoration=underline",
25 },
26 {
27 style: "text-decoration=none",
28 clearMark: (m) => m.type.name == "underline",
29 },
30 ],
31 toDOM() {
32 return ["u", { class: "underline" }, 0];
33 },
34 } as MarkSpec,
35 strikethrough: {
36 parseDOM: [
37 { tag: "s" },
38 { tag: "del" },
39 {
40 style: `text-decoration=line-through`,
41 },
42 {
43 style: "text-decoration=none",
44 clearMark: (m) => m.type.name == "strikethrough",
45 },
46 ],
47 toDOM() {
48 return [
49 "s",
50 {
51 style: `text-decoration-color: ${theme.colors.tertiary};`,
52 },
53 0,
54 ];
55 },
56 } as MarkSpec,
57 highlight: {
58 attrs: {
59 color: {
60 default: "1",
61 },
62 },
63 parseDOM: [
64 {
65 tag: "span.highlight",
66 getAttrs(dom: HTMLElement) {
67 return {
68 color: dom.getAttribute("data-color"),
69 };
70 },
71 },
72 ],
73 toDOM(node) {
74 let { color } = node.attrs;
75 return [
76 "span",
77 {
78 class: "highlight",
79 "data-color": color,
80 style: `background-color: ${color === "1" ? theme.colors["highlight-1"] : color === "2" ? theme.colors["highlight-2"] : theme.colors["highlight-3"]}`,
81 },
82 0,
83 ];
84 },
85 } as MarkSpec,
86 test: {
87 parseDom: [{ tag: "span" }],
88 toDOM() {
89 return ["span", { class: "bg-test" }, 0];
90 },
91 } as MarkSpec,
92 link: {
93 attrs: {
94 href: {},
95 },
96 inclusive: false,
97 parseDOM: [
98 {
99 tag: "a[href]",
100 getAttrs(dom: HTMLElement) {
101 return {
102 href: dom.getAttribute("href"),
103 };
104 },
105 },
106 ],
107 toDOM(node) {
108 let { href } = node.attrs;
109 return ["a", { href, target: "_blank" }, 0];
110 },
111 } as MarkSpec,
112 },
113 nodes: {
114 doc: { content: "block" },
115 paragraph: {
116 content: "inline*",
117 group: "block",
118 parseDOM: [{ tag: "p" }],
119 toDOM: () => ["p", 0] as const,
120 },
121 text: {
122 group: "inline",
123 },
124 },
125};
126export const schema = new Schema(baseSchema);
127
128export const multiBlockSchema = new Schema({
129 marks: baseSchema.marks,
130 nodes: { ...baseSchema.nodes, doc: { content: "block+" } },
131});