import { Schema, NodeSpec, MarkSpec, Attrs, DOMOutputSpec, ParseRule } from 'prosemirror-model';
import { addListNodes } from 'prosemirror-schema-list';
import { tableNodes } from 'prosemirror-tables';
import OrderedMap from 'orderedmap';
import { EMBED_SANDBOX, EMBED_REFERRER_POLICY } from './plugins/embeds';

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;
}

/* -------------------------------------------------------------------------
 * Author class / id passthrough
 *
 * Content elements keep the `class` and `id` an author gave them, so class/id
 * CSS (e.g. a scoped author <style> block) can target the document. Values that
 * collide with the editor's own internal names are dropped so content can never
 * impersonate or restyle the chrome; the editor's own classes (emitted in
 * toDOM) are always preserved and merged with the author's.
 * ------------------------------------------------------------------------- */

const RESERVED_NAME = /^(?:nile-wysiwyg|ProseMirror)/;

export function cleanClass(value: string | null): string | null {
  if (!value) return null;
  const kept = value.split(/\s+/).filter(token => token && !RESERVED_NAME.test(token));
  return kept.length ? kept.join(' ') : null;
}

export function cleanId(value: string | null): string | null {
  return value && !RESERVED_NAME.test(value) ? value : null;
}

const HTML_ATTR_SPEC = { htmlClass: { default: null }, htmlId: { default: null } };

function readHtmlAttrs(dom: HTMLElement): { htmlClass: string | null; htmlId: string | null } {
  return {
    htmlClass: cleanClass(dom.getAttribute('class')),
    htmlId: cleanId(dom.getAttribute('id')),
  };
}

/** Wraps a tag-based parse rule so it also captures author class/id. Rules
 * keyed by `style` (whose getAttrs receives a value string, not an element)
 * pass through untouched. */
function augmentParseRule(rule: ParseRule): ParseRule {
  if (!('tag' in rule) || 'style' in rule) return rule;
  const inner = rule.getAttrs;
  return {
    ...rule,
    getAttrs(dom: HTMLElement) {
      const base = inner ? inner(dom) : null;
      if (base === false) return false;
      return { ...(base ?? {}), ...readHtmlAttrs(dom) };
    },
  } as ParseRule;
}

/** Wraps a toDOM so stored class/id are written back onto the element, merged
 * with any class the spec emits itself. Handles the `[tag]`, `[tag, attrs]`,
 * `[tag, 0]`, and `[tag, attrs, …children]` output shapes. */
function augmentToDOM(
  toDOM?: (node: { attrs: Attrs }, ...rest: unknown[]) => DOMOutputSpec
): ((node: { attrs: Attrs }, ...rest: unknown[]) => DOMOutputSpec) | undefined {
  if (!toDOM) return toDOM;
  return (node, ...rest) => {
    const out = toDOM(node, ...rest);
    const cls = node.attrs.htmlClass as string | null;
    const id = node.attrs.htmlId as string | null;
    if (!Array.isArray(out) || (!cls && !id)) return out;
    const [tag, ...tail] = out as unknown[];
    let attrs: Record<string, unknown> = {};
    let children = tail;
    if (tail.length && tail[0] && typeof tail[0] === 'object' && !Array.isArray(tail[0])) {
      attrs = { ...(tail[0] as Record<string, unknown>) };
      children = tail.slice(1);
    }
    if (cls) attrs.class = attrs.class ? `${attrs.class as string} ${cls}` : cls;
    if (id) attrs.id = id;
    return [tag, attrs, ...children] as DOMOutputSpec;
  };
}

/** Adds `htmlClass`/`htmlId` attrs plus parse/serialize support to a spec. */
function withHtmlAttrs<S extends NodeSpec | MarkSpec>(spec: S): S {
  return {
    ...spec,
    attrs: { ...(spec.attrs ?? {}), ...HTML_ATTR_SPEC },
    parseDOM: spec.parseDOM?.map(augmentParseRule),
    toDOM: augmentToDOM(spec.toDOM as never) as never,
  };
}

/** Content nodes/marks that carry author class/id. Excludes structural leaves
 * (doc, text), atoms with bespoke DOM (image, embeds, mentions, math, …) and
 * style-only marks (their spans are covered by `html_span`). */
const HTML_ATTR_NODES = [
  'paragraph', 'heading', 'blockquote', 'code_block',
  'bullet_list', 'ordered_list', 'list_item',
  'table', 'table_row', 'table_cell', 'table_header',
];
const HTML_ATTR_MARKS = [
  'link', 'bold', 'italic', 'underline', 'strike', 'code', 'subscript', 'superscript',
];

/**
 * 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',
        sandbox: EMBED_SANDBOX,
        referrerpolicy: EMBED_REFERRER_POLICY,
      };
      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]];
    },
  },

  /**
   * Author-supplied `<style>` block, entered via the HTML source view. The CSS
   * is sanitized on the way in (see sanitizeCss) — `@import`, `expression()`
   * and external `url()` are neutralized — then stored verbatim and serialized
   * straight back to a `<style>` element. A node view renders it live in the
   * editor with a small chip so the otherwise-invisible block stays selectable.
   */
  styleBlock: {
    group: 'block',
    atom: true,
    selectable: true,
    attrs: { css: { default: '' } },
    parseDOM: [
      {
        tag: 'style',
        getAttrs: (dom: HTMLElement) => ({ css: dom.textContent ?? '' }),
      },
    ],
    toDOM(node) {
      return ['style', node.attrs.css];
    },
  },

  /**
   * 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];
    },
  },

  /** Carries an author `class`/`id` on an inline `<span>` that has no other
   * meaning, so class/id CSS can target runs of text. Low priority so styled
   * spans (color/font marks) and atom spans (mention/merge/math) win. */
  html_span: {
    attrs: { htmlClass: { default: null }, htmlId: { default: null } },
    parseDOM: [
      {
        tag: 'span',
        priority: 5,
        getAttrs: (dom: HTMLElement) => {
          const htmlClass = cleanClass(dom.getAttribute('class'));
          const htmlId = cleanId(dom.getAttribute('id'));
          return htmlClass || htmlId ? { htmlClass, htmlId } : false;
        },
      },
    ],
    toDOM(mark) {
      const attrs: Record<string, string> = {};
      if (mark.attrs.htmlClass) attrs.class = mark.attrs.htmlClass;
      if (mark.attrs.htmlId) attrs.id = mark.attrs.htmlId;
      return ['span', attrs, 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 {
  let nodeMap = addListNodes(OrderedMap.from(nodes), 'paragraph block*', 'block')
    .update('bullet_list', bulletListSpec)
    .update('ordered_list', orderedListSpec)
    .append(tableNodeSpecs)
    .update('table', tableSpec);
  // Thread author class/id through the content nodes and marks (applied last so
  // it also wraps the list/table specs pulled in from external packages).
  for (const name of HTML_ATTR_NODES) {
    const spec = nodeMap.get(name);
    if (spec) nodeMap = nodeMap.update(name, withHtmlAttrs(spec));
  }
  let markMap = OrderedMap.from<MarkSpec>(marks);
  for (const name of HTML_ATTR_MARKS) {
    const spec = markMap.get(name);
    if (spec) markMap = markMap.update(name, withHtmlAttrs(spec));
  }
  return new Schema({ nodes: nodeMap, marks: markMap });
}

/** A shared default schema instance. */
export const defaultSchema = createSchema();