@aquera/nile-elements 1.9.6 → 1.9.7

package/src/nile-wysiwyg-editor/engine/schema.ts

@@ -0,0 +1,859 @@
+import { Schema, NodeSpec, MarkSpec } from 'prosemirror-model';
+import { addListNodes } from 'prosemirror-schema-list';
+import { tableNodes } from 'prosemirror-tables';
+import OrderedMap from 'orderedmap';
+
+export type Alignment = 'left' | 'center' | 'right' | 'justify';
+
+const ALIGN_VALUES: Alignment[] = ['left', 'center', 'right', 'justify'];
+
+function getAlignFromDom(dom: HTMLElement): Alignment | null {
+  const value = dom.style.textAlign || dom.getAttribute('align') || '';
+  return (ALIGN_VALUES as string[]).includes(value) ? (value as Alignment) : null;
+}
+
+function alignStyle(align: Alignment | null): string | null {
+  return align ? `text-align: ${align}` : null;
+}
+
+/** Indent depth in 40px steps, like CKEditor/Google Docs. */
+export const INDENT_STEP_PX = 40;
+export const MAX_INDENT = 8;
+
+function getIndentFromDom(dom: HTMLElement): number {
+  const raw = dom.style.marginInlineStart || dom.style.marginLeft || '';
+  const px = parseFloat(raw);
+  if (!Number.isFinite(px) || px <= 0) return 0;
+  return Math.min(MAX_INDENT, Math.round(px / INDENT_STEP_PX));
+}
+
+/**
+ * Line height as a unitless multiplier string ('1.5'). Percentages are
+ * converted; px values pass through as-is so pasted content keeps its look.
+ */
+function getLineHeightFromDom(dom: HTMLElement): string | null {
+  const raw = dom.style.lineHeight.trim();
+  if (!raw || raw === 'normal') return null;
+  const num = parseFloat(raw);
+  if (!Number.isFinite(num) || num <= 0) return null;
+  if (raw.endsWith('%')) return String(num / 100);
+  return raw;
+}
+
+/** Combined style string for align + indent + line-height textblock attrs. */
+function blockStyle(attrs: {
+  align?: Alignment | null;
+  indent?: number;
+  lineHeight?: string | null;
+}): string | null {
+  const parts: string[] = [];
+  const align = alignStyle(attrs.align ?? null);
+  if (align) parts.push(align);
+  if (attrs.indent) parts.push(`margin-inline-start: ${attrs.indent * INDENT_STEP_PX}px`);
+  if (attrs.lineHeight) parts.push(`line-height: ${attrs.lineHeight}`);
+  return parts.length ? parts.join('; ') : null;
+}
+
+/**
+ * Block nodes. `align` is modeled as an attribute on textblocks rather than a
+ * wrapper node so alignment survives block-type changes (heading <-> paragraph).
+ */
+const nodes: Record<string, NodeSpec> = {
+  doc: {
+    content: 'block+',
+  },
+
+  paragraph: {
+    content: 'inline*',
+    group: 'block',
+    attrs: {
+      align: { default: null },
+      indent: { default: 0 },
+      lineHeight: { default: null },
+    },
+    parseDOM: [
+      {
+        tag: 'p',
+        getAttrs: (dom: HTMLElement) => ({
+          align: getAlignFromDom(dom),
+          indent: getIndentFromDom(dom),
+          lineHeight: getLineHeightFromDom(dom),
+        }),
+      },
+    ],
+    toDOM(node) {
+      const style = blockStyle(node.attrs);
+      return style ? ['p', { style }, 0] : ['p', 0];
+    },
+  },
+
+  heading: {
+    content: 'inline*',
+    group: 'block',
+    defining: true,
+    attrs: {
+      level: { default: 1 },
+      align: { default: null },
+      indent: { default: 0 },
+      lineHeight: { default: null },
+    },
+    parseDOM: [1, 2, 3, 4, 5, 6].map(level => ({
+      tag: `h${level}`,
+      getAttrs: (dom: HTMLElement) => ({
+        level,
+        align: getAlignFromDom(dom),
+        indent: getIndentFromDom(dom),
+        lineHeight: getLineHeightFromDom(dom),
+      }),
+    })),
+    toDOM(node) {
+      const style = blockStyle(node.attrs);
+      return style ? [`h${node.attrs.level}`, { style }, 0] : [`h${node.attrs.level}`, 0];
+    },
+  },
+
+  blockquote: {
+    content: 'block+',
+    group: 'block',
+    defining: true,
+    parseDOM: [{ tag: 'blockquote' }],
+    toDOM() {
+      return ['blockquote', 0];
+    },
+  },
+
+  horizontal_rule: {
+    group: 'block',
+    parseDOM: [{ tag: 'hr' }],
+    toDOM() {
+      return ['hr'];
+    },
+  },
+
+  text: {
+    group: 'inline',
+  },
+
+  hard_break: {
+    inline: true,
+    group: 'inline',
+    selectable: false,
+    parseDOM: [{ tag: 'br' }],
+    toDOM() {
+      return ['br'];
+    },
+  },
+
+  code_block: {
+    content: 'text*',
+    group: 'block',
+    marks: '',
+    code: true,
+    defining: true,
+    attrs: { language: { default: null } },
+    parseDOM: [
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+        getAttrs: (dom: HTMLElement) => ({
+          language: dom.getAttribute('data-language'),
+        }),
+      },
+    ],
+    toDOM(node) {
+      const attrs: Record<string, string> = { class: 'nile-wysiwyg__code-block' };
+      if (node.attrs.language) attrs['data-language'] = node.attrs.language;
+      return ['pre', attrs, ['code', 0]];
+    },
+  },
+
+  /**
+   * ProseMirror's canonical inline image, extended with a `width` attr (px)
+   * written by the drag-resize handles.
+   */
+  image: {
+    inline: true,
+    group: 'inline',
+    draggable: true,
+    attrs: {
+      src: {},
+      alt: { default: null },
+      title: { default: null },
+      width: { default: null },
+    },
+    parseDOM: [
+      {
+        tag: 'img[src]',
+        getAttrs: (dom: HTMLElement) => {
+          const styleWidth = parseFloat(dom.style.width);
+          const attrWidth = parseFloat(dom.getAttribute('width') ?? '');
+          const width = Number.isFinite(styleWidth)
+            ? Math.round(styleWidth)
+            : Number.isFinite(attrWidth)
+              ? Math.round(attrWidth)
+              : null;
+          return {
+            src: dom.getAttribute('src'),
+            alt: dom.getAttribute('alt'),
+            title: dom.getAttribute('title'),
+            width: width && width > 0 ? width : null,
+          };
+        },
+      },
+    ],
+    toDOM(node) {
+      const { src, alt, title, width } = node.attrs;
+      const attrs: Record<string, string> = { src };
+      if (alt) attrs.alt = alt;
+      if (title) attrs.title = title;
+      if (width) attrs.style = `width: ${width}px`;
+      return ['img', attrs];
+    },
+  },
+
+  /**
+   * Captioned image: a block figure whose inline content is the caption. The
+   * image itself lives in the attrs (TipTap-style), so the node stays valid
+   * ProseMirror content — a node can't mix an inline img child with a block
+   * figcaption child.
+   */
+  figure: {
+    group: 'block',
+    content: 'inline*',
+    defining: true,
+    isolating: true,
+    attrs: {
+      src: {},
+      alt: { default: null },
+      title: { default: null },
+      width: { default: null },
+      align: { default: null },
+    },
+    parseDOM: [
+      {
+        tag: 'figure',
+        contentElement: 'figcaption',
+        getAttrs: (dom: HTMLElement) => {
+          const img = dom.querySelector('img[src]') as HTMLElement | null;
+          if (!img) return false;
+          const styleWidth = parseFloat(img.style.width || dom.style.width);
+          const align = dom.getAttribute('data-align');
+          return {
+            src: img.getAttribute('src'),
+            alt: img.getAttribute('alt'),
+            title: img.getAttribute('title'),
+            width:
+              Number.isFinite(styleWidth) && styleWidth > 0
+                ? Math.round(styleWidth)
+                : null,
+            align: align === 'left' || align === 'center' || align === 'right' ? align : null,
+          };
+        },
+      },
+    ],
+    toDOM(node) {
+      const { src, alt, title, width, align } = node.attrs;
+      const figureAttrs: Record<string, string> = { class: 'nile-wysiwyg__figure' };
+      if (align) figureAttrs['data-align'] = align;
+      const styles: string[] = [];
+      if (width) styles.push(`width: ${width}px`);
+      if (align === 'center') styles.push('margin-left: auto; margin-right: auto');
+      else if (align === 'right') styles.push('margin-left: auto; margin-right: 0');
+      if (styles.length) figureAttrs.style = styles.join('; ');
+      const imgAttrs: Record<string, string> = { src, style: 'width: 100%' };
+      if (alt) imgAttrs.alt = alt;
+      if (title) imgAttrs.title = title;
+      return [
+        'figure',
+        figureAttrs,
+        ['img', imgAttrs],
+        ['figcaption', { class: 'nile-wysiwyg__figcaption' }, 0],
+      ];
+    },
+  },
+
+  /**
+   * Checklists. Serialized as <ul data-task-list><li data-task-item
+   * data-checked> so they survive HTML round-trips; the live checkbox is an
+   * editor-only NodeView. parseDOM priority 51 beats the generic li rule.
+   */
+  task_list: {
+    content: 'task_item+',
+    group: 'block',
+    parseDOM: [{ tag: 'ul[data-task-list]', priority: 51 }],
+    toDOM() {
+      return ['ul', { 'data-task-list': 'true', class: 'nile-wysiwyg__task-list' }, 0];
+    },
+  },
+
+  task_item: {
+    content: 'paragraph block*',
+    defining: true,
+    attrs: { checked: { default: false } },
+    parseDOM: [
+      {
+        tag: 'li[data-task-item]',
+        priority: 51,
+        getAttrs: (dom: HTMLElement) => ({
+          checked: dom.getAttribute('data-checked') === 'true',
+        }),
+      },
+    ],
+    toDOM(node) {
+      return [
+        'li',
+        {
+          'data-task-item': 'true',
+          'data-checked': String(node.attrs.checked),
+          class: 'nile-wysiwyg__task-item',
+        },
+        0,
+      ];
+    },
+  },
+
+  /**
+   * Provider embeds (YouTube/Vimeo/Loom) as block atoms. The iframe sits in
+   * a wrapper div for aspect-ratio styling and a click-to-select overlay.
+   */
+  embed: {
+    group: 'block',
+    atom: true,
+    selectable: true,
+    draggable: true,
+    attrs: {
+      src: {},
+      provider: { default: null },
+      title: { default: null },
+      /** Rendered width in px (drag-resize); null = default size. */
+      width: { default: null },
+      /** Block alignment: 'left' | 'center' | 'right' | null. */
+      align: { default: null },
+    },
+    parseDOM: [
+      {
+        tag: 'div[data-embed-provider]',
+        getAttrs: (dom: HTMLElement) => {
+          const iframe = dom.querySelector('iframe[src]');
+          if (!iframe) return false;
+          const widthAttr =
+            dom.getAttribute('data-width') ?? /^(\d+)px$/.exec(dom.style.width)?.[1];
+          const width = widthAttr ? parseInt(widthAttr, 10) : NaN;
+          const align = dom.getAttribute('data-align');
+          return {
+            src: iframe.getAttribute('src'),
+            provider: dom.getAttribute('data-embed-provider'),
+            title: iframe.getAttribute('title'),
+            width: Number.isFinite(width) && width > 0 ? width : null,
+            align: align === 'left' || align === 'center' || align === 'right' ? align : null,
+          };
+        },
+      },
+      {
+        tag: 'iframe[src]',
+        getAttrs: (dom: HTMLElement) => {
+          const width = parseInt(dom.getAttribute('width') ?? '', 10);
+          return {
+            src: dom.getAttribute('src'),
+            title: dom.getAttribute('title'),
+            width: Number.isFinite(width) && width > 0 ? width : null,
+          };
+        },
+      },
+    ],
+    toDOM(node) {
+      const { src, provider, title, width, align } = node.attrs;
+      const iframeAttrs: Record<string, string> = {
+        src,
+        frameborder: '0',
+        allowfullscreen: 'true',
+        allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+      };
+      if (title) iframeAttrs.title = title;
+      const wrapperAttrs: Record<string, string> = {
+        class: 'nile-wysiwyg__embed',
+        'data-embed-provider': provider ?? 'generic',
+      };
+      const styles: string[] = [];
+      if (width) {
+        wrapperAttrs['data-width'] = String(width);
+        styles.push(`width: ${width}px`, 'max-width: 100%');
+      }
+      if (align) {
+        wrapperAttrs['data-align'] = align;
+        if (align === 'center') styles.push('margin-left: auto', 'margin-right: auto');
+        else if (align === 'right') styles.push('margin-left: auto', 'margin-right: 0');
+      }
+      if (styles.length) wrapperAttrs.style = styles.join('; ');
+      return ['div', wrapperAttrs, ['iframe', iframeAttrs]];
+    },
+  },
+
+  /**
+   * Bookmark: a named in-text anchor (`<a id="…">`) for intra-document
+   * navigation. Invisible in serialized output; the editor draws a flag
+   * marker via CSS so it can be selected and deleted.
+   */
+  bookmark: {
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: true,
+    attrs: { id: {} },
+    parseDOM: [
+      {
+        tag: 'a[data-bookmark]',
+        priority: 60,
+        getAttrs: (dom: HTMLElement) => {
+          const id = dom.getAttribute('id') || dom.getAttribute('name');
+          return id ? { id } : false;
+        },
+      },
+      // Anchors without an href are bookmarks (`<a id>` / legacy `<a name>`).
+      {
+        tag: 'a[id]',
+        getAttrs: (dom: HTMLElement) =>
+          dom.hasAttribute('href') ? false : { id: dom.getAttribute('id') },
+      },
+      {
+        tag: 'a[name]',
+        getAttrs: (dom: HTMLElement) =>
+          dom.hasAttribute('href') ? false : { id: dom.getAttribute('name') },
+      },
+    ],
+    toDOM(node) {
+      return ['a', { id: node.attrs.id, 'data-bookmark': 'true' }];
+    },
+  },
+
+  /** Inline atom for @-style mentions. The label renders as `${trigger}${label}`. */
+  mention: {
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: true,
+    attrs: {
+      trigger: { default: '@' },
+      key: {},
+      label: {},
+    },
+    parseDOM: [
+      {
+        tag: 'span[data-mention-key]',
+        getAttrs: (dom: HTMLElement) => ({
+          trigger: dom.getAttribute('data-mention-trigger') || '@',
+          key: dom.getAttribute('data-mention-key'),
+          label:
+            dom.getAttribute('data-mention-label') || dom.textContent?.slice(1) || '',
+        }),
+      },
+    ],
+    toDOM(node) {
+      const { trigger, key, label } = node.attrs;
+      return [
+        'span',
+        {
+          class: 'nile-wysiwyg__mention',
+          'data-mention-trigger': trigger,
+          'data-mention-key': key,
+          'data-mention-label': label,
+        },
+        `${trigger}${label}`,
+      ];
+    },
+  },
+
+  /**
+   * Merge field: an inline atom placeholder for mail-merge / personalization
+   * (e.g. `{{first_name}}`). Stores a stable `id` and a human `label`; renders
+   * the label (falling back to `{{id}}`) as a non-editable chip.
+   */
+  merge_field: {
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: true,
+    attrs: { id: {}, label: { default: null } },
+    parseDOM: [
+      {
+        tag: 'span[data-merge-field]',
+        getAttrs: (dom: HTMLElement) => {
+          const id = dom.getAttribute('data-merge-field');
+          if (!id) return false;
+          return {
+            id,
+            label: dom.getAttribute('data-merge-label') || dom.textContent || null,
+          };
+        },
+      },
+    ],
+    toDOM(node) {
+      const { id, label } = node.attrs;
+      return [
+        'span',
+        {
+          class: 'nile-wysiwyg__merge-field',
+          'data-merge-field': id,
+          'data-merge-label': label ?? '',
+        },
+        label || `{{${id}}}`,
+      ];
+    },
+  },
+
+  /**
+   * Math: an inline atom holding a LaTeX source string. Rendering is pluggable
+   * via the editor's `mathRenderer` (KaTeX/MathJax, or MathML). Without a
+   * renderer the raw LaTeX is shown in a math-styled chip. `display` chooses
+   * inline vs. block presentation.
+   */
+  math: {
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: true,
+    attrs: { latex: {}, display: { default: 'inline' } },
+    parseDOM: [
+      {
+        tag: 'span[data-math]',
+        getAttrs: (dom: HTMLElement) => ({
+          latex: dom.getAttribute('data-math') || dom.textContent || '',
+          display: dom.getAttribute('data-math-display') === 'block' ? 'block' : 'inline',
+        }),
+      },
+    ],
+    toDOM(node) {
+      const { latex, display } = node.attrs;
+      return [
+        'span',
+        {
+          class: 'nile-wysiwyg__math',
+          'data-math': latex,
+          'data-math-display': display,
+        },
+        latex,
+      ];
+    },
+  },
+};
+
+/** Table nodes from prosemirror-tables, with cell background support. */
+const tableNodeSpecs = tableNodes({
+  tableGroup: 'block',
+  cellContent: 'block+',
+  cellAttributes: {
+    background: {
+      default: null,
+      getFromDOM(dom) {
+        return (dom as HTMLElement).style.backgroundColor || null;
+      },
+      setDOMAttr(value, attrs) {
+        if (value) {
+          attrs.style = `${(attrs.style as string) || ''}background-color: ${value};`;
+        }
+      },
+    },
+  },
+});
+
+/**
+ * The table spec extended with a `layout` attr: layout tables (structured
+ * layouts, e.g. for email HTML) serialize as `role="presentation"` and render
+ * borderless, with dashed guides visible only while editing.
+ */
+const baseTableSpec = tableNodeSpecs.table;
+const tableSpec: NodeSpec = {
+  ...baseTableSpec,
+  attrs: { ...(baseTableSpec.attrs ?? {}), layout: { default: false } },
+  parseDOM: [
+    {
+      tag: 'table',
+      getAttrs: (dom: HTMLElement) => ({
+        layout:
+          dom.getAttribute('role') === 'presentation' || dom.hasAttribute('data-layout'),
+      }),
+    },
+  ],
+  toDOM(node) {
+    return node.attrs.layout
+      ? ['table', { role: 'presentation', 'data-layout': 'true' }, ['tbody', 0]]
+      : ['table', ['tbody', 0]];
+  },
+};
+
+/**
+ * Marks. Order matters: marks later in the map render closer to the text.
+ * Each styling mark parses from both semantic tags AND inline `style=`
+ * declarations so pasted Word/Google Docs content keeps its formatting.
+ */
+const marks: Record<string, MarkSpec> = {
+  link: {
+    attrs: {
+      href: {},
+      title: { default: null },
+      target: { default: null },
+    },
+    inclusive: false,
+    parseDOM: [
+      {
+        tag: 'a[href]',
+        getAttrs: (dom: HTMLElement) => ({
+          href: dom.getAttribute('href'),
+          title: dom.getAttribute('title'),
+          target: dom.getAttribute('target'),
+        }),
+      },
+    ],
+    toDOM(mark) {
+      const { href, title, target } = mark.attrs;
+      const attrs: Record<string, string> = { href };
+      if (title) attrs.title = title;
+      if (target) {
+        attrs.target = target;
+        if (target === '_blank') attrs.rel = 'noopener noreferrer';
+      }
+      return ['a', attrs, 0];
+    },
+  },
+
+  bold: {
+    parseDOM: [
+      { tag: 'strong' },
+      // Google Docs wraps everything in <b style="font-weight: normal">
+      {
+        tag: 'b',
+        getAttrs: (dom: HTMLElement) => dom.style.fontWeight !== 'normal' && null,
+      },
+      {
+        style: 'font-weight',
+        getAttrs: (value: string) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
+      },
+    ],
+    toDOM() {
+      return ['strong', 0];
+    },
+  },
+
+  italic: {
+    parseDOM: [
+      { tag: 'i' },
+      { tag: 'em' },
+      { style: 'font-style=italic' },
+    ],
+    toDOM() {
+      return ['em', 0];
+    },
+  },
+
+  underline: {
+    parseDOM: [
+      { tag: 'u' },
+      {
+        style: 'text-decoration',
+        getAttrs: (value: string) => value.includes('underline') && null,
+      },
+      {
+        style: 'text-decoration-line',
+        getAttrs: (value: string) => value.includes('underline') && null,
+      },
+    ],
+    toDOM() {
+      return ['u', 0];
+    },
+  },
+
+  strike: {
+    parseDOM: [
+      { tag: 's' },
+      { tag: 'strike' },
+      { tag: 'del' },
+      {
+        style: 'text-decoration',
+        getAttrs: (value: string) => value.includes('line-through') && null,
+      },
+      {
+        style: 'text-decoration-line',
+        getAttrs: (value: string) => value.includes('line-through') && null,
+      },
+    ],
+    toDOM() {
+      return ['s', 0];
+    },
+  },
+
+  /** Mutually exclusive vertical-shift marks (formulas, footnote refs). */
+  subscript: {
+    excludes: 'subscript superscript',
+    parseDOM: [{ tag: 'sub' }, { style: 'vertical-align=sub' }],
+    toDOM() {
+      return ['sub', 0];
+    },
+  },
+
+  superscript: {
+    excludes: 'subscript superscript',
+    parseDOM: [{ tag: 'sup' }, { style: 'vertical-align=super' }],
+    toDOM() {
+      return ['sup', 0];
+    },
+  },
+
+  code: {
+    parseDOM: [{ tag: 'code' }],
+    toDOM() {
+      return ['code', { class: 'nile-wysiwyg__inline-code' }, 0];
+    },
+  },
+
+  text_color: {
+    attrs: { color: {} },
+    parseDOM: [
+      {
+        style: 'color',
+        getAttrs: (value: string) => (value ? { color: value } : false),
+      },
+    ],
+    toDOM(mark) {
+      return ['span', { style: `color: ${mark.attrs.color}` }, 0];
+    },
+  },
+
+  bg_color: {
+    attrs: { color: {} },
+    parseDOM: [
+      {
+        style: 'background-color',
+        getAttrs: (value: string) =>
+          value && value !== 'transparent' ? { color: value } : false,
+      },
+    ],
+    toDOM(mark) {
+      return ['span', { style: `background-color: ${mark.attrs.color}` }, 0];
+    },
+  },
+
+  font_family: {
+    attrs: { family: {} },
+    parseDOM: [
+      {
+        style: 'font-family',
+        getAttrs: (value: string) => (value ? { family: value } : false),
+      },
+    ],
+    toDOM(mark) {
+      return ['span', { style: `font-family: ${mark.attrs.family}` }, 0];
+    },
+  },
+
+  font_size: {
+    attrs: { size: {} },
+    parseDOM: [
+      {
+        style: 'font-size',
+        getAttrs: (value: string) => (value ? { size: value } : false),
+      },
+    ],
+    toDOM(mark) {
+      return ['span', { style: `font-size: ${mark.attrs.size}` }, 0];
+    },
+  },
+};
+
+/** Bullet markers CSS understands; anything else falls back to default. */
+export const BULLET_STYLES = ['disc', 'circle', 'square'] as const;
+
+/** Numbering styles, keyed by the HTML `type` attribute letter. */
+export const ORDERED_STYLES: Record<string, string> = {
+  '1': 'decimal',
+  a: 'lower-alpha',
+  A: 'upper-alpha',
+  i: 'lower-roman',
+  I: 'upper-roman',
+};
+
+const STYLE_TO_TYPE: Record<string, string> = Object.fromEntries(
+  Object.entries(ORDERED_STYLES).map(([type, style]) => [style, type])
+);
+
+/**
+ * Legal-style continuous numbering (1, 1.1, 1.1.1). Not a CSS
+ * list-style-type: it serializes as `data-list-style="multilevel"` and is
+ * rendered with CSS counters (see the editor stylesheet). Consumers rendering
+ * the output need the same counter rules.
+ */
+export const MULTILEVEL_STYLE = 'multilevel';
+
+/** List specs from prosemirror-schema-list, extended with style attrs. */
+const bulletListSpec: NodeSpec = {
+  content: 'list_item+',
+  group: 'block',
+  attrs: { style: { default: null } },
+  parseDOM: [
+    {
+      tag: 'ul',
+      getAttrs: (dom: HTMLElement) => {
+        const style = dom.style.listStyleType;
+        return {
+          style: (BULLET_STYLES as readonly string[]).includes(style) ? style : null,
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    return node.attrs.style
+      ? ['ul', { style: `list-style-type: ${node.attrs.style}` }, 0]
+      : ['ul', 0];
+  },
+};
+
+const orderedListSpec: NodeSpec = {
+  content: 'list_item+',
+  group: 'block',
+  attrs: { order: { default: 1 }, style: { default: null } },
+  parseDOM: [
+    {
+      tag: 'ol',
+      getAttrs: (dom: HTMLElement) => {
+        const type = dom.getAttribute('type') ?? '';
+        const cssStyle = dom.style.listStyleType;
+        const style =
+          dom.getAttribute('data-list-style') === MULTILEVEL_STYLE
+            ? MULTILEVEL_STYLE
+            : ORDERED_STYLES[type] ??
+              (Object.values(ORDERED_STYLES).includes(cssStyle) ? cssStyle : null);
+        const start = Number(dom.getAttribute('start'));
+        return {
+          order: Number.isFinite(start) && start > 0 ? start : 1,
+          style,
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    const attrs: Record<string, string> = {};
+    if (node.attrs.order !== 1) attrs.start = String(node.attrs.order);
+    if (node.attrs.style === MULTILEVEL_STYLE) {
+      attrs['data-list-style'] = MULTILEVEL_STYLE;
+    } else if (node.attrs.style && STYLE_TO_TYPE[node.attrs.style]) {
+      attrs.type = STYLE_TO_TYPE[node.attrs.style];
+    }
+    return ['ol', attrs, 0];
+  },
+};
+
+/** Builds the editor schema. List nodes are added via prosemirror-schema-list. */
+export function createSchema(): Schema {
+  const nodeMap = addListNodes(
+    OrderedMap.from(nodes),
+    'paragraph block*',
+    'block'
+  )
+    .update('bullet_list', bulletListSpec)
+    .update('ordered_list', orderedListSpec)
+    .append(tableNodeSpecs)
+    .update('table', tableSpec);
+  return new Schema({ nodes: nodeMap, marks: OrderedMap.from(marks) });
+}
+
+/** A shared default schema instance. */
+export const defaultSchema = createSchema();