@gogitcms/editor 0.23.0

package/app/vendor/markdown-editor/src/MarkdownEditor.tsx

@@ -0,0 +1,248 @@
+"use dom";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { EditorState, type Transaction } from "prosemirror-state";
+import {
+  ProseMirror,
+  ProseMirrorDoc,
+  reactKeys,
+} from "@handlewithcare/react-prosemirror";
+import * as Y from "yjs";
+import { prosemirrorToYXmlFragment } from "y-prosemirror";
+import type { Awareness } from "y-protocols/awareness";
+import { resolveFlavor } from "./flavors/registry";
+import type { EditorCollabBinding } from "./flavors/shared/plugins";
+import { placeholderPlugin } from "./flavors/shared/placeholder";
+import { ensureEditorStyles } from "./theme";
+import { Toolbar } from "./Toolbar";
+import type { MarkdownEditorProps } from "./types";
+
+// A markdown editor authored as web React and marked as an Expo DOM component.
+// Under a web bundler (Vite) the `"use dom"` directive is inert and this renders
+// inline; under Expo's Metro it runs inside a WebView on native. Every prop is
+// serializable and `onChange` is treated as an async native action.
+export default function MarkdownEditor({
+  value,
+  onChange,
+  flavor: flavorId,
+  readOnly = false,
+  placeholder = "",
+  theme = "light",
+  debounceMs = 200,
+  expandable = true,
+  toolbar = true,
+  collab,
+}: MarkdownEditorProps) {
+  const flavor = useMemo(() => resolveFlavor(flavorId), [flavorId]);
+  const [expanded, setExpanded] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // Focus mode covers the whole viewport. It used to measure the nearest
+  // host-designated container and cover only that, which left the editor
+  // stretched full-height beside the field list — the very layout focus mode
+  // exists to get out of.
+  const toggleExpanded = useCallback(() => setExpanded((current) => !current), []);
+
+  // Resolve the collaborative binding once per doc/flavor: the shared fragment
+  // and awareness.
+  const collabBinding = useMemo<EditorCollabBinding | undefined>(() => {
+    if (!collab) return undefined;
+    return {
+      fragment: (collab.ydoc as Y.Doc).getXmlFragment(collab.fragmentName),
+      awareness: collab.awareness as Awareness,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [collab, flavor]);
+
+  // Seed the shared fragment from the current markdown when the room turns out
+  // to be empty (server-side seeding of the body supersedes this in a later
+  // phase). ySyncPlugin observes the fragment, so seeded content flows into the
+  // mounted editor.
+  //
+  // The decision waits for the provider's initial sync when the host exposes it
+  // (collab.synced/subscribeSynced): before sync the local doc is ALWAYS empty
+  // and awareness holds only ourselves, so an eager check both seeds over a
+  // room that already has content (duplicating the body after the merge) and
+  // reads its "single client" guard from a list that cannot contain anyone
+  // else yet. After sync the fragment and peer set are real: an empty fragment
+  // means the room is genuinely fresh, and if several clients arrive at one
+  // together, the lowest client id seeds — deterministic, exactly one writer,
+  // and re-evaluated on awareness/fragment changes so a lingering awareness
+  // entry from a crashed tab only defers seeding until it times out instead of
+  // leaving the body empty for good.
+  const seededRef = useRef(false);
+  useEffect(() => {
+    if (!collabBinding || seededRef.current) return;
+    const { fragment, awareness } = collabBinding;
+    const trySeed = () => {
+      if (seededRef.current) return;
+      if (collab?.synced && !collab.synced()) return;
+      if (fragment.length > 0 || !value) {
+        // Non-empty room, or nothing to seed: either way the decision is made.
+        seededRef.current = true;
+        return;
+      }
+      const states = awareness.getStates();
+      if (states.size > 1 && awareness.clientID !== Math.min(...states.keys())) return;
+      prosemirrorToYXmlFragment(flavor.parse(value), fragment);
+      seededRef.current = true;
+    };
+    trySeed();
+    if (seededRef.current) return;
+    const unsubSync = collab?.subscribeSynced?.(trySeed);
+    const onFragment = () => trySeed();
+    fragment.observe(onFragment);
+    const onAwareness = () => trySeed();
+    awareness.on("change", onAwareness);
+    return () => {
+      unsubSync?.();
+      fragment.unobserve(onFragment);
+      awareness.off("change", onAwareness);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [collabBinding]);
+
+  const makeState = useCallback(
+    (markdown: string) =>
+      EditorState.create(
+        collabBinding
+          ? {
+              // The shared fragment is the source of truth; ySyncPlugin fills
+              // the (initially empty) doc from it.
+              schema: flavor.schema,
+              plugins: [...flavor.plugins(collabBinding), placeholderPlugin(placeholder), reactKeys()],
+            }
+          : {
+              doc: flavor.parse(markdown),
+              plugins: [...flavor.plugins(), placeholderPlugin(placeholder), reactKeys()],
+            },
+      ),
+    [flavor, placeholder, collabBinding],
+  );
+
+  const [state, setState] = useState<EditorState>(() => makeState(value));
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  // Inject the stylesheet once the component is mounted in a real document.
+  useEffect(() => {
+    ensureEditorStyles(typeof document !== "undefined" ? document : undefined);
+  }, []);
+
+  // Rebuild the document when the flavor changes.
+  useEffect(() => {
+    setState(makeState(value));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flavor]);
+
+  // Adopt external value changes without clobbering in-progress edits: only
+  // reparse when the incoming markdown differs from what the current doc holds.
+  // In collab mode the shared fragment is the source of truth, so `value` is
+  // ignored (the CRDT drives the content).
+  useEffect(() => {
+    if (collabBinding) return;
+    if (value !== flavor.serialize(stateRef.current.doc)) {
+      setState(makeState(value));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  // Debounced serialize -> onChange.
+  //
+  // Suppressed when the serialized doc is merely the canonical form of the
+  // value this editor was given: serialize(parse(value)) normalizes formatting
+  // the author never touched (a leading blank line, bullet or emphasis
+  // markers), and reporting that as a change marks an untouched document
+  // unsaved. The collab fill is the case that matters — ySyncPlugin's initial
+  // sync is a doc-changing transaction, so without this guard every document
+  // whose markdown is not already in canonical form opens dirty. A fill that
+  // really does differ from `value` (a peer edited before we joined) still
+  // emits, which is what keeps the host's map — and the next save — current.
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const canonicalCache = useRef<{ flavor: typeof flavor; raw: string; canonical: string } | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const emit = useCallback(
+    (doc: EditorState["doc"]) => {
+      if (!onChange) return;
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        const markdown = flavor.serialize(doc);
+        const raw = valueRef.current;
+        if (markdown === raw) return;
+        if (canonicalCache.current?.flavor !== flavor || canonicalCache.current.raw !== raw) {
+          let canonical = raw;
+          try {
+            canonical = flavor.serialize(flavor.parse(raw));
+          } catch {
+            /* unparseable value: the raw comparison above already ran */
+          }
+          canonicalCache.current = { flavor, raw, canonical };
+        }
+        if (markdown === canonicalCache.current.canonical) return;
+        void onChange(markdown);
+      }, debounceMs);
+    },
+    [onChange, flavor, debounceMs],
+  );
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+
+  const dispatchTransaction = useCallback(
+    (tr: Transaction) => {
+      setState((prev) => {
+        const next = prev.apply(tr);
+        if (tr.docChanged) emit(next.doc);
+        return next;
+      });
+    },
+    [emit],
+  );
+
+  const editable = useCallback(() => !readOnly, [readOnly]);
+
+  // Focus mode: close on Escape and lock background scroll while expanded.
+  useEffect(() => {
+    if (!expanded || typeof document === "undefined") return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setExpanded(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [expanded]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={expanded ? "cms-editor cms-editor--expanded" : "cms-editor"}
+      data-theme={theme}
+      // Publish presence (which field this user is editing) as the contenteditable
+      // gains/loses focus. Capture-phase so it fires for the inner editor node.
+      onFocusCapture={collab?.onFocusChange ? () => collab.onFocusChange!(true) : undefined}
+      onBlurCapture={collab?.onFocusChange ? () => collab.onFocusChange!(false) : undefined}
+    >
+      <ProseMirror
+        state={state}
+        dispatchTransaction={dispatchTransaction}
+        editable={editable}
+      >
+        {toolbar || expandable ? (
+          <Toolbar
+            schema={flavor.schema}
+            readOnly={readOnly || !toolbar}
+            expandable={expandable}
+            expanded={expanded}
+            onToggleExpand={toggleExpanded}
+          />
+        ) : null}
+        <ProseMirrorDoc />
+      </ProseMirror>
+    </div>
+  );
+}

package/app/vendor/markdown-editor/src/Toolbar.tsx

@@ -0,0 +1,157 @@
+import React, { useMemo } from "react";
+import { setBlockType, toggleMark, wrapIn } from "prosemirror-commands";
+import { wrapInList } from "prosemirror-schema-list";
+import {
+  useEditorEventCallback,
+  useEditorState,
+} from "@handlewithcare/react-prosemirror";
+import type { MarkType, NodeType, Schema } from "prosemirror-model";
+import type { Command, EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import {
+  BoldIcon,
+  BulletListIcon,
+  CodeIcon,
+  ExpandIcon,
+  H1Icon,
+  H2Icon,
+  ItalicIcon,
+  OrderedListIcon,
+  QuoteIcon,
+  StrikethroughIcon,
+} from "./icons";
+
+function markActive(state: EditorState, type: MarkType): boolean {
+  const { from, $from, to, empty } = state.selection;
+  if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
+  return state.doc.rangeHasMark(from, to, type);
+}
+
+function blockActive(state: EditorState, type: NodeType, attrs: Record<string, unknown> = {}): boolean {
+  const { $from, to } = state.selection;
+  return to <= $from.end() && $from.parent.hasMarkup(type, attrs);
+}
+
+// True when any ancestor of the selection is a node of the given type (for
+// list/blockquote wrappers, which aren't the direct textblock parent).
+function ancestorActive(state: EditorState, type: NodeType): boolean {
+  const { $from } = state.selection;
+  for (let d = $from.depth; d > 0; d--) {
+    if ($from.node(d).type === type) return true;
+  }
+  return false;
+}
+
+type ToolItem = {
+  key: string;
+  title: string;
+  Icon: React.ComponentType<{ size?: number }>;
+  command: Command;
+  isActive?: (state: EditorState) => boolean;
+};
+
+function buildGroups(schema: Schema): ToolItem[][] {
+  const groups: ToolItem[][] = [];
+
+  const marks: ToolItem[] = [];
+  const { strong, em, strikethrough, code } = schema.marks;
+  if (strong) marks.push({ key: "bold", title: "Bold (⌘B)", Icon: BoldIcon, command: toggleMark(strong), isActive: (s) => markActive(s, strong) });
+  if (em) marks.push({ key: "italic", title: "Italic (⌘I)", Icon: ItalicIcon, command: toggleMark(em), isActive: (s) => markActive(s, em) });
+  if (strikethrough) marks.push({ key: "strike", title: "Strikethrough (⌘⇧X)", Icon: StrikethroughIcon, command: toggleMark(strikethrough), isActive: (s) => markActive(s, strikethrough) });
+  if (code) marks.push({ key: "code", title: "Inline code", Icon: CodeIcon, command: toggleMark(code), isActive: (s) => markActive(s, code) });
+  if (marks.length) groups.push(marks);
+
+  const blocks: ToolItem[] = [];
+  const heading = schema.nodes.heading;
+  const paragraph = schema.nodes.paragraph;
+  const toggleHeading = (level: number): Command => (state, dispatch, view) => {
+    const cmd = blockActive(state, heading, { level })
+      ? setBlockType(paragraph)
+      : setBlockType(heading, { level });
+    return cmd(state, dispatch, view);
+  };
+  if (heading) {
+    blocks.push({ key: "h1", title: "Heading 1", Icon: H1Icon, command: toggleHeading(1), isActive: (s) => blockActive(s, heading, { level: 1 }) });
+    blocks.push({ key: "h2", title: "Heading 2", Icon: H2Icon, command: toggleHeading(2), isActive: (s) => blockActive(s, heading, { level: 2 }) });
+  }
+  if (schema.nodes.bullet_list) {
+    const t = schema.nodes.bullet_list;
+    blocks.push({ key: "ul", title: "Bullet list", Icon: BulletListIcon, command: wrapInList(t), isActive: (s) => ancestorActive(s, t) });
+  }
+  if (schema.nodes.ordered_list) {
+    const t = schema.nodes.ordered_list;
+    blocks.push({ key: "ol", title: "Numbered list", Icon: OrderedListIcon, command: wrapInList(t), isActive: (s) => ancestorActive(s, t) });
+  }
+  if (schema.nodes.blockquote) {
+    const t = schema.nodes.blockquote;
+    blocks.push({ key: "quote", title: "Blockquote", Icon: QuoteIcon, command: wrapIn(t), isActive: (s) => ancestorActive(s, t) });
+  }
+  if (blocks.length) groups.push(blocks);
+
+  return groups;
+}
+
+function ToolButton({ item }: { item: ToolItem }) {
+  const state = useEditorState();
+  const run = useEditorEventCallback((view: EditorView, command: Command) => {
+    command(view.state, view.dispatch, view);
+    view.focus();
+  });
+  const active = item.isActive?.(state) ?? false;
+  const enabled = item.command(state); // dry run: whether the command applies
+  return (
+    <button
+      type="button"
+      className="cms-editor__tool"
+      aria-pressed={active}
+      aria-label={item.title}
+      title={item.title}
+      disabled={!enabled}
+      // Keep the editor selection while clicking the toolbar.
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => run(item.command)}
+    >
+      <item.Icon />
+    </button>
+  );
+}
+
+export function Toolbar({
+  schema,
+  readOnly,
+  expandable,
+  expanded,
+  onToggleExpand,
+}: {
+  schema: Schema;
+  readOnly: boolean;
+  expandable: boolean;
+  expanded: boolean;
+  onToggleExpand: () => void;
+}) {
+  const groups = useMemo(() => buildGroups(schema), [schema]);
+  return (
+    <div className="cms-editor__toolbar" role="toolbar" aria-label="Formatting">
+      {!readOnly &&
+        groups.map((group, gi) => (
+          <React.Fragment key={gi}>
+            {gi > 0 ? <span className="cms-editor__toolbar-sep" /> : null}
+            {group.map((item) => (
+              <ToolButton key={item.key} item={item} />
+            ))}
+          </React.Fragment>
+        ))}
+      {expandable ? (
+        <button
+          type="button"
+          className="cms-editor__tool cms-editor__tool--expand"
+          onClick={onToggleExpand}
+          aria-label={expanded ? "Exit focus mode" : "Expand to focus mode"}
+          title={expanded ? "Exit focus mode (Esc)" : "Focus mode"}
+        >
+          <ExpandIcon expanded={expanded} />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/app/vendor/markdown-editor/src/field.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import MarkdownEditor from "./MarkdownEditor";
+import type { EditorTheme, MarkdownFlavor } from "./types";
+
+// Minimal shape of a field-slot argument — intentionally structural so this
+// package stays decoupled from @gogitcms/design-system. It is assignable from the
+// design-system's richer FieldSlotArgs.
+export type MarkdownFieldArgs = {
+  field: { component?: string; format?: string; flavor?: string };
+  value: unknown;
+  onChange: (value: string) => void;
+  // When true, render the editor non-editable (host is in read-only mode).
+  readOnly?: boolean;
+  // Live collaboration handle (Yjs Doc/Awareness are opaque here) + the field's
+  // dotted path. When present, the body binds to the shared CRDT fragment
+  // "body:<path>" and publishes presence via setFocus.
+  collab?: {
+    ydoc: unknown;
+    awareness: unknown;
+    setFocus(path: string | null): void;
+    synced?(): boolean;
+    subscribeSynced?(cb: () => void): () => void;
+  };
+  path?: string;
+};
+
+export type MarkdownFieldOptions = {
+  theme?: EditorTheme;
+  defaultFlavor?: MarkdownFlavor;
+};
+
+// Builds a `renderField`-compatible function that renders the markdown editor
+// for `component: "body"` (markdown) fields and defers everything else back to
+// the host's default control. Wire it into <ContentBrowser renderField={…}> in
+// the web and native apps.
+export function createMarkdownRenderField(options: MarkdownFieldOptions = {}) {
+  const { theme = "light", defaultFlavor = "gfm" } = options;
+  return ({ field, value, onChange, readOnly, collab, path }: MarkdownFieldArgs): React.ReactNode => {
+    if (field.component !== "body") return undefined;
+    if (field.format && field.format !== "markdown") return undefined;
+    const flavor = (field.flavor as MarkdownFlavor) || defaultFlavor;
+    // In a live session the body binds to a shared Y.XmlFragment keyed by the
+    // field path and reports focus for presence.
+    const collabProp =
+      collab && path
+        ? {
+            ydoc: collab.ydoc,
+            awareness: collab.awareness,
+            fragmentName: `body:${path}`,
+            onFocusChange: (focused: boolean) => collab.setFocus(focused ? path : null),
+            synced: collab.synced?.bind(collab),
+            subscribeSynced: collab.subscribeSynced?.bind(collab),
+          }
+        : undefined;
+    return (
+      <MarkdownEditor
+        value={value == null ? "" : String(value)}
+        onChange={onChange}
+        flavor={flavor}
+        theme={theme}
+        readOnly={readOnly}
+        dom={{ matchContents: true }}
+        collab={collabProp}
+      />
+    );
+  };
+}

package/app/vendor/markdown-editor/src/flavors/commonmark/index.ts

@@ -0,0 +1,27 @@
+import {
+  defaultMarkdownParser,
+  defaultMarkdownSerializer,
+  schema as markdownSchema,
+} from "prosemirror-markdown";
+import type { Node as PMNode } from "prosemirror-model";
+import type { Plugin } from "prosemirror-state";
+import type { Flavor } from "../types";
+import { basePlugins, type EditorCollabBinding } from "../shared/plugins";
+
+// CommonMark: the stock prosemirror-markdown schema, parser, and serializer.
+export const commonmark: Flavor = {
+  id: "commonmark",
+  label: "CommonMark",
+  schema: markdownSchema,
+  parse(markdown: string): PMNode {
+    // The parser returns null for input it cannot handle; fall back to an empty
+    // document so the editor always has a valid doc to render.
+    return defaultMarkdownParser.parse(markdown) ?? markdownSchema.topNodeType.createAndFill()!;
+  },
+  serialize(doc: PMNode): string {
+    return defaultMarkdownSerializer.serialize(doc);
+  },
+  plugins(collab?: EditorCollabBinding): Plugin[] {
+    return basePlugins(markdownSchema, [], collab);
+  },
+};

package/app/vendor/markdown-editor/src/flavors/gfm/index.ts

@@ -0,0 +1,30 @@
+import { columnResizing, tableEditing } from "prosemirror-tables";
+import type { Node as PMNode } from "prosemirror-model";
+import type { Plugin } from "prosemirror-state";
+import type { Flavor } from "../types";
+import { basePlugins, type EditorCollabBinding } from "../shared/plugins";
+import { gfmSchema } from "./schema";
+import { parseGfm } from "./parser";
+import { serializeGfm } from "./serializer";
+import { taskListPlugin } from "./taskList";
+
+// GitHub Flavored Markdown: CommonMark plus strikethrough, tables, autolinks,
+// and task lists.
+export const gfm: Flavor = {
+  id: "gfm",
+  label: "GitHub Flavored Markdown",
+  schema: gfmSchema,
+  parse(markdown: string): PMNode {
+    return parseGfm(markdown);
+  },
+  serialize(doc: PMNode): string {
+    return serializeGfm(doc);
+  },
+  plugins(collab?: EditorCollabBinding): Plugin[] {
+    return basePlugins(gfmSchema, [
+      columnResizing(),
+      tableEditing(),
+      taskListPlugin(),
+    ], collab);
+  },
+};

package/app/vendor/markdown-editor/src/flavors/gfm/parser.ts

@@ -0,0 +1,73 @@
+import MarkdownIt from "markdown-it";
+import type Token from "markdown-it/lib/token.mjs";
+import { MarkdownParser, defaultMarkdownParser } from "prosemirror-markdown";
+import type { Node as PMNode } from "prosemirror-model";
+import { gfmSchema } from "./schema";
+
+// A markdown-it configured for GFM: tables and strikethrough are on by default;
+// linkify turns bare URLs into autolinks. HTML is disabled (rendered as text).
+const md = MarkdownIt({ html: false, linkify: true });
+
+// Detect GFM task-list items (`- [ ] …` / `- [x] …`). markdown-it has no native
+// support, so a small core rule stamps `checked` onto the list_item_open token
+// and strips the `[ ] ` marker from the item's first inline run.
+md.core.ruler.after("inline", "gfm-task-lists", (state) => {
+  const tokens = state.tokens;
+  for (let i = 0; i < tokens.length; i++) {
+    if (tokens[i].type !== "list_item_open") continue;
+    for (let j = i + 1; j < tokens.length; j++) {
+      const t = tokens[j];
+      if (t.type === "list_item_close") break;
+      if (t.type === "paragraph_open" || t.type === "paragraph_close") continue;
+      if (t.type !== "inline") break;
+      const m = /^\[([ xX])\]\s+/.exec(t.content);
+      if (m) {
+        tokens[i].meta = { ...(tokens[i].meta || {}), task: true, checked: m[1] !== " " };
+        t.content = t.content.slice(m[0].length);
+        const child = t.children && t.children[0];
+        if (child && child.type === "text") {
+          child.content = child.content.replace(/^\[([ xX])\]\s+/, "");
+        }
+      }
+      break;
+    }
+  }
+  return false;
+});
+
+// prosemirror-tables models `table > table_row > cell`, with no thead/tbody
+// wrappers. Drop those structural tokens so the rows become direct children.
+const tokenizer = {
+  parse(src: string, env: unknown): Token[] {
+    return md
+      .parse(src, env)
+      .filter(
+        (t) =>
+          t.type !== "thead_open" &&
+          t.type !== "thead_close" &&
+          t.type !== "tbody_open" &&
+          t.type !== "tbody_close",
+      );
+  },
+};
+
+const tokens = {
+  ...defaultMarkdownParser.tokens,
+  s: { mark: "strikethrough" },
+  table: { block: "table" },
+  tr: { block: "table_row" },
+  th: { block: "table_header" },
+  td: { block: "table_cell" },
+  list_item: {
+    block: "list_item",
+    getAttrs: (tok: Token) => ({
+      checked: tok.meta && tok.meta.task ? Boolean(tok.meta.checked) : null,
+    }),
+  },
+};
+
+const parser = new MarkdownParser(gfmSchema, tokenizer as unknown as MarkdownIt, tokens);
+
+export function parseGfm(markdown: string): PMNode {
+  return parser.parse(markdown) ?? gfmSchema.topNodeType.createAndFill()!;
+}

package/app/vendor/markdown-editor/src/flavors/gfm/schema.ts

@@ -0,0 +1,70 @@
+import { schema as base } from "prosemirror-markdown";
+import { Schema, type DOMOutputSpec, type Node as PMNode } from "prosemirror-model";
+import { tableNodes } from "prosemirror-tables";
+
+// GFM schema = the CommonMark (prosemirror-markdown) schema extended with:
+//  - a `strikethrough` mark (`~~text~~`)
+//  - GitHub pipe tables (via prosemirror-tables)
+//  - task-list items: `list_item` gains a `checked` attr (null = plain item,
+//    true/false = a `[x]`/`[ ]` task) rendered with a real checkbox.
+
+const tNodes = tableNodes({
+  tableGroup: "block",
+  // GFM table cells only hold inline content, so cells are simple textblocks.
+  cellContent: "inline*",
+  cellAttributes: {},
+});
+
+// Extend list_item with the task `checked` attribute + checkbox rendering.
+const baseListItem = base.spec.nodes.get("list_item")!;
+const listItem = {
+  ...baseListItem,
+  attrs: { checked: { default: null as boolean | null } },
+  parseDOM: [
+    {
+      tag: "li",
+      getAttrs: (dom: HTMLElement) => {
+        const raw = dom.getAttribute("data-checked");
+        return { checked: raw == null ? null : raw === "true" };
+      },
+    },
+  ],
+  toDOM(node: PMNode): DOMOutputSpec {
+    const checked = node.attrs.checked as boolean | null;
+    if (checked === null) return ["li", 0];
+    // A span (not a real <input>) styled as a checkbox: react-prosemirror
+    // renders toDOM output through React, and a controlled <input checked> with
+    // no onChange trips React's form-field warning. The taskListPlugin toggles
+    // the node's `checked` attr on click.
+    return [
+      "li",
+      { class: "task-list-item", "data-checked": String(checked) },
+      [
+        "span",
+        {
+          class: "task-list-item-checkbox",
+          contenteditable: "false",
+          role: "checkbox",
+          "aria-checked": String(checked),
+        },
+      ],
+      ["div", { class: "task-list-item-content" }, 0],
+    ];
+  },
+};
+
+const nodes = base.spec.nodes.update("list_item", listItem).append(tNodes);
+
+const marks = base.spec.marks.addToEnd("strikethrough", {
+  parseDOM: [
+    { tag: "s" },
+    { tag: "del" },
+    { tag: "strike" },
+    { style: "text-decoration=line-through" },
+  ],
+  toDOM(): DOMOutputSpec {
+    return ["s", 0];
+  },
+});
+
+export const gfmSchema = new Schema({ nodes, marks });