app/components/editor/source-views.ts

Functions

Imports

It imports app/lib/editor/schema.mjs. Imported by app/components/editor/rich-editor.tsx.

Source

1// The formatted editor's views of Markdown it does not format (rich-editor.tsx): a source block edited
2// as Markdown in a labelled textarea, and inline source shown as written.
3
4import { SourceBlock, SourceInline } from "~/lib/editor/schema.mjs";
5
6/** A source block in the formatted view: its kind, then its Markdown in a labelled textarea. */
7export function sourceBlockView(readOnly: () => boolean) {
8  return SourceBlock.extend({
9    addNodeView() {
10      return ({ node, getPos, editor }) => {
11        let current = node;
12        const dom = document.createElement("div");
13        dom.className = "app-src-block";
14        dom.contentEditable = "false";
15        const label = document.createElement("span");
16        label.className = "app-src-kind";
17        label.setAttribute("aria-hidden", "true");
18        const area = document.createElement("textarea");
19        area.className = "app-src-text";
20        area.spellcheck = false;
21        const show = () => {
22          label.textContent = `${current.attrs.kind}, Markdown`;
23          area.setAttribute("aria-label", `${current.attrs.kind}, Markdown`);
24          if (area.value !== current.attrs.text) area.value = current.attrs.text;
25          area.rows = Math.max(1, area.value.split("\n").length);
26          area.readOnly = readOnly();
27        };
28        show();
29        area.addEventListener("input", () => {
30          const pos = typeof getPos === "function" ? getPos() : undefined;
31          if (pos === undefined) return;
32          area.rows = Math.max(1, area.value.split("\n").length);
33          editor.view.dispatch(editor.state.tr.setNodeMarkup(pos, undefined, { ...current.attrs, text: area.value }));
34        });
35        dom.appendChild(label);
36        dom.appendChild(area);
37        return {
38          dom,
39          update: (next) => {
40            if (next.type !== current.type) return false;
41            current = next;
42            show();
43            return true;
44          },
45          // Keys and clicks in the textarea are the textarea's own, not the editor's.
46          stopEvent: (event) => event.target === area,
47          ignoreMutation: () => true,
48        };
49      };
50    },
51  });
52}
53
54/** Markdown kept as written inside a paragraph: a directive, math, an image, a bare link. */
55export const SourceInlineView = SourceInline.extend({
56  addNodeView() {
57    return ({ node }) => {
58      const dom = document.createElement("code");
59      dom.className = "app-src-inline";
60      dom.contentEditable = "false";
61      dom.textContent = node.attrs.text;
62      return { dom, ignoreMutation: () => true };
63    };
64  },
65});