@kerebron/extension-basic-editor 0.4.28 → 0.4.29

package/src/NodeListItem.ts

@@ -0,0 +1,320 @@
+import {
+  type Attrs,
+  Fragment,
+  NodeRange,
+  NodeSpec,
+  type NodeType,
+  Slice,
+} from 'prosemirror-model';
+import type {
+  EditorState,
+  NodeSelection,
+  Transaction,
+} from 'prosemirror-state';
+import { Selection } from 'prosemirror-state';
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  type Command,
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+import {
+  canJoin,
+  canSplit,
+  liftTarget,
+  ReplaceAroundStep,
+} from 'prosemirror-transform';
+
+/// Build a command that splits a non-empty textblock at the top level
+/// of a list item by also splitting that list item.
+export function splitListItem(itemType: NodeType, itemAttrs?: Attrs): Command {
+  const cmd: Command = function (
+    state: EditorState,
+    dispatch?: (tr: Transaction) => void,
+  ) {
+    const { $from, $to, node } = state.selection as NodeSelection;
+    if ((node && node.isBlock) || $from.depth < 2 || !$from.sameParent($to)) {
+      return false;
+    }
+    const grandParent = $from.node(-1);
+    if (grandParent.type != itemType) return false;
+    if (
+      $from.parent.content.size == 0 &&
+      $from.node(-1).childCount == $from.indexAfter(-1)
+    ) {
+      // In an empty block. If this is a nested list, the wrapping
+      // list item should be split. Otherwise, bail out and let next
+      // command handle lifting.
+      if (
+        $from.depth == 3 || $from.node(-3).type != itemType ||
+        $from.index(-2) != $from.node(-2).childCount - 1
+      ) return false;
+      if (dispatch) {
+        let wrap = Fragment.empty;
+        const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
+        // Build a fragment containing empty versions of the structure
+        // from the outer list item to the parent node of the cursor
+        for (let d = $from.depth - depthBefore; d >= $from.depth - 3; d--) {
+          wrap = Fragment.from($from.node(d).copy(wrap));
+        }
+        let depthAfter = $from.indexAfter(-1) < $from.node(-2).childCount
+          ? 1
+          : $from.indexAfter(-2) < $from.node(-3).childCount
+          ? 2
+          : 3;
+        // Add a second list item with an empty default start node
+        wrap = wrap.append(Fragment.from(itemType.createAndFill()));
+        let start = $from.before($from.depth - (depthBefore - 1));
+        let tr = state.tr.replace(
+          start,
+          $from.after(-depthAfter),
+          new Slice(wrap, 4 - depthBefore, 0),
+        );
+        let sel = -1;
+        tr.doc.nodesBetween(start, tr.doc.content.size, (node, pos) => {
+          if (sel > -1) return false;
+          if (node.isTextblock && node.content.size == 0) sel = pos + 1;
+        });
+        if (sel > -1) tr.setSelection(Selection.near(tr.doc.resolve(sel)));
+        dispatch(tr.scrollIntoView());
+      }
+      return true;
+    }
+    let nextType = $to.pos == $from.end()
+      ? grandParent.contentMatchAt(0).defaultType
+      : null;
+    let tr = state.tr.delete($from.pos, $to.pos);
+    let types = nextType
+      ? [itemAttrs ? { type: itemType, attrs: itemAttrs } : null, {
+        type: nextType,
+      }]
+      : undefined;
+    if (!canSplit(tr.doc, $from.pos, 2, types)) return false;
+    if (dispatch) dispatch(tr.split($from.pos, 2, types).scrollIntoView());
+    return true;
+  };
+
+  cmd.displayName = `splitListItem(${itemType.name})`;
+
+  return cmd;
+}
+
+/// Acts like [`splitListItem`](#schema-list.splitListItem), but
+/// without resetting the set of active marks at the cursor.
+function splitListItemKeepMarks(
+  itemType: NodeType,
+  itemAttrs?: Attrs,
+): Command {
+  let split = splitListItem(itemType, itemAttrs);
+  return (state, dispatch) => {
+    return split(
+      state,
+      dispatch && ((tr) => {
+        let marks = state.storedMarks ||
+          (state.selection.$to.parentOffset && state.selection.$from.marks());
+        if (marks) tr.ensureMarks(marks);
+        dispatch(tr);
+      }),
+    );
+  };
+}
+
+/// Create a command to lift the list item around the selection up into
+/// a wrapping list.
+export function liftListItem(itemType: NodeType): Command {
+  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
+    let { $from, $to } = state.selection;
+    let range = $from.blockRange(
+      $to,
+      (node) => node.childCount > 0 && node.firstChild!.type == itemType,
+    );
+    if (!range) return false;
+    if (!dispatch) return true;
+    if ($from.node(range.depth - 1).type == itemType) { // Inside a parent list
+      return liftToOuterList(state, dispatch, itemType, range);
+    } // Outer list node
+    else {
+      return liftOutOfList(state, dispatch, range);
+    }
+  };
+}
+
+function liftToOuterList(
+  state: EditorState,
+  dispatch: (tr: Transaction) => void,
+  itemType: NodeType,
+  range: NodeRange,
+) {
+  let tr = state.tr, end = range.end, endOfList = range.$to.end(range.depth);
+  if (end < endOfList) {
+    // There are siblings after the lifted items, which must become
+    // children of the last item
+    tr.step(
+      new ReplaceAroundStep(
+        end - 1,
+        endOfList,
+        end,
+        endOfList,
+        new Slice(
+          Fragment.from(itemType.create(null, range.parent.copy())),
+          1,
+          0,
+        ),
+        1,
+        true,
+      ),
+    );
+    range = new NodeRange(
+      tr.doc.resolve(range.$from.pos),
+      tr.doc.resolve(endOfList),
+      range.depth,
+    );
+  }
+  const target = liftTarget(range);
+  if (target == null) return false;
+  tr.lift(range, target);
+  let $after = tr.doc.resolve(tr.mapping.map(end, -1) - 1);
+  if (
+    canJoin(tr.doc, $after.pos) &&
+    $after.nodeBefore!.type == $after.nodeAfter!.type
+  ) tr.join($after.pos);
+  dispatch(tr.scrollIntoView());
+  return true;
+}
+
+function liftOutOfList(
+  state: EditorState,
+  dispatch: (tr: Transaction) => void,
+  range: NodeRange,
+) {
+  let tr = state.tr, list = range.parent;
+  // Merge the list items into a single big item
+  for (
+    let pos = range.end, i = range.endIndex - 1, e = range.startIndex;
+    i > e;
+    i--
+  ) {
+    pos -= list.child(i).nodeSize;
+    tr.delete(pos - 1, pos + 1);
+  }
+  let $start = tr.doc.resolve(range.start), item = $start.nodeAfter!;
+  if (tr.mapping.map(range.end) != range.start + $start.nodeAfter!.nodeSize) {
+    return false;
+  }
+  let atStart = range.startIndex == 0,
+    atEnd = range.endIndex == list.childCount;
+  let parent = $start.node(-1), indexBefore = $start.index(-1);
+  if (
+    !parent.canReplace(
+      indexBefore + (atStart ? 0 : 1),
+      indexBefore + 1,
+      item.content.append(atEnd ? Fragment.empty : Fragment.from(list)),
+    )
+  ) {
+    return false;
+  }
+  let start = $start.pos, end = start + item.nodeSize;
+  // Strip off the surrounding list. At the sides where we're not at
+  // the end of the list, the existing list is closed. At sides where
+  // this is the end, it is overwritten to its end.
+  tr.step(
+    new ReplaceAroundStep(
+      start - (atStart ? 1 : 0),
+      end + (atEnd ? 1 : 0),
+      start + 1,
+      end - 1,
+      new Slice(
+        (atStart ? Fragment.empty : Fragment.from(list.copy(Fragment.empty)))
+          .append(
+            atEnd ? Fragment.empty : Fragment.from(list.copy(Fragment.empty)),
+          ),
+        atStart ? 0 : 1,
+        atEnd ? 0 : 1,
+      ),
+      atStart ? 0 : 1,
+    ),
+  );
+  dispatch(tr.scrollIntoView());
+  return true;
+}
+
+/// Create a command to sink the list item around the selection down
+/// into an inner list.
+export function sinkListItem(itemType: NodeType): Command {
+  return function (state, dispatch) {
+    const { $from, $to } = state.selection;
+    const range = $from.blockRange(
+      $to,
+      (node) => node.childCount > 0 && node.firstChild!.type == itemType,
+    );
+    if (!range) return false;
+    const startIndex = range.startIndex;
+    if (startIndex == 0) return false;
+    const parent = range.parent, nodeBefore = parent.child(startIndex - 1);
+    if (nodeBefore.type != itemType) return false;
+
+    if (dispatch) {
+      const nestedBefore = nodeBefore.lastChild &&
+        nodeBefore.lastChild.type == parent.type;
+      const inner = Fragment.from(nestedBefore ? itemType.create() : null);
+      const slice = new Slice(
+        Fragment.from(
+          itemType.create(null, Fragment.from(parent.type.create(null, inner))),
+        ),
+        nestedBefore ? 3 : 1,
+        0,
+      );
+      const before = range.start, after = range.end;
+      dispatch(
+        state.tr.step(
+          new ReplaceAroundStep(
+            before - (nestedBefore ? 3 : 1),
+            after,
+            before,
+            after,
+            slice,
+            1,
+            true,
+          ),
+        )
+          .scrollIntoView(),
+      );
+    }
+    return true;
+  };
+}
+
+export class NodeListItem extends Node {
+  override name = 'list_item';
+  requires = ['doc'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      content: 'paragraph block*',
+      parseDOM: [{ tag: 'li' }],
+      defining: true,
+      toDOM() {
+        return ['li', 0];
+      },
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {
+      'splitListItem': () => splitListItem(type),
+      'liftListItem': () => liftListItem(type),
+      'sinkListItem': () => sinkListItem(type),
+    };
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    return {
+      'Enter': 'splitListItem',
+      'Tab': 'sinkListItem',
+      'Shift-Tab': 'liftListItem',
+    };
+  }
+}

package/src/NodeMath.ts

@@ -0,0 +1,109 @@
+import { type NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+
+// import { MathMLToLaTeX } from 'mathml-to-latex';
+// const latex = MathMLToLaTeX.convert(mathMl);
+// https://mathlive.io/mathfield/
+
+export class NodeMath extends Node {
+  override name = 'math';
+  requires = ['doc'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      inline: true,
+      attrs: {
+        lang: { default: 'mathml' },
+        content: {},
+      },
+      group: 'inline',
+      draggable: true,
+      // parseDOM: [
+      //   {
+      //     tag: 'math',
+      //     getAttrs(dom: HTMLElement) {
+      //       return {
+      //         content: dom.outerHTML,
+      //       };
+      //     },
+      //   },
+      // ],
+      parseDOM: [{
+        tag: 'math',
+        getAttrs: (dom) => ({
+          lang: 'mathml',
+          content: new XMLSerializer().serializeToString(dom),
+        }),
+      }],
+      toDOM(node) {
+        const parser = new DOMParser();
+        const parsed = parser.parseFromString(
+          node.attrs.content,
+          'application/xml',
+        );
+
+        // Check for parsing errors (e.g., invalid XML)
+        const errorNode = parsed.getElementsByTagName('parsererror');
+        if (errorNode.length > 0) {
+          return ['span', { class: 'mathml-error' }, 'Invalid MathML'];
+        }
+
+        // Import and return the parsed MathML element
+        return document.importNode(parsed.documentElement, true);
+        // const { xml } = node.attrs;
+        // return ['math', {}, []];
+      },
+    };
+  }
+}
+
+/*
+MathML vs. LaTeX: Which is Better for Web Math Equations?
+Neither is universally "better"—it depends on your goals (authoring, rendering, accessibility, or storage). MathML and LaTeX serve different primary purposes but can complement each other on the web (e.g., via converters like MathJax). Here's a comparison focused on web use:
+Key Differences
+
+Purpose:
+
+LaTeX: A human-readable markup language for typesetting math (e.g., $E=mc^2$). It's concise and widely used for authoring documents, papers, and web input. Not native to HTML; requires a processor (e.g., MathJax, KaTeX) to render as HTML/CSS/SVG.
+MathML: An XML-based standard (part of HTML5) for describing math structure and presentation (Presentation MathML for visuals; Content MathML for semantics). Designed for direct embedding in web pages (e.g., <math><mi>E</mi>=<mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></math>). Browsers like Firefox and Safari support it natively; others need polyfills.
+
+
+Ease of Authoring:
+
+LaTeX: Wins for humans—shorter, intuitive syntax familiar to mathematicians. Easier to write/edit manually or in editors like Overleaf. Verbose MathML is painful for hand-coding complex equations.
+MathML: Better for programmatic generation (e.g., from tools or APIs) due to its structured XML. Use WYSIWYG editors (like those above) to avoid writing tags.
+
+
+Rendering on Web:
+
+LaTeX: Requires a JS library (MathJax ~300KB, KaTeX lighter ~100KB) for cross-browser display. Renders beautifully everywhere but adds load time and JS dependency. No native browser support.
+MathML: Native in Firefox/Safari (fast, no JS). Improving in Chrome/Edge (as of 2023+), but still needs MathJax fallback for full support. Outputs scalable HTML/CSS without images.
+
+
+Accessibility:
+
+MathML: Superior—semantic structure allows screen readers (e.g., NVDA with MathCAT, JAWS) to read equations meaningfully (e.g., "E equals m times c squared"). Essential for WCAG/ADA compliance.
+LaTeX: Poor native accessibility; screen readers treat it as plain text. MathJax can convert to MathML internally for better support, but raw LaTeX fails.
+
+
+Performance & Compatibility:
+
+LaTeX: Faster authoring, but rendering depends on the library. Universal via JS, but increases page weight.
+MathML: Lightweight native rendering where supported; more robust for search engines/parsing (e.g., Google indexes MathML). Less portable outside web (LaTeX dominates PDFs/print).
+
+
+Storage/Interoperability:
+
+LaTeX: Compact for databases/files. Easy to convert to MathML (via tools like texmath or Pandoc).
+MathML: Better for web standards (XML parsable), but bulkier. Ideal for exchange between math tools.
+
+
+
+Recommendation
+
+Use LaTeX if your focus is easy input/authoring (e.g., users typing equations) and you're okay with a renderer like MathJax. It's more practical for most web projects today due to familiarity and tools. Store as LaTeX, render via JS, and convert to MathML for accessibility if needed.
+Use MathML if prioritizing native web standards, accessibility, or programmatic output (e.g., from editors). It's "better" for semantic web math and future-proofing (browser support is growing), but pair with LaTeX input for usability.
+Hybrid Approach: Best for web—author in LaTeX, convert/output MathML for display/storage. Libraries like MathJax handle both seamlessly (input LaTeX, output rendered MathML). This gives LaTeX's simplicity with MathML's benefits.
+
+If accessibility is key, always generate MathML (even from LaTeX source). Test in browsers: LaTeX+MathJax works everywhere; pure MathML shines in Firefox but needs fallbacks elsewhere.
+*/

package/src/NodeOrderedList.ts

@@ -0,0 +1,79 @@
+import { NodeSpec, NodeType } from 'prosemirror-model';
+
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  getHtmlAttributes,
+  setHtmlAttributes,
+} from '@kerebron/editor/utilities';
+
+import {
+  type InputRule,
+  wrappingInputRule,
+} from '@kerebron/editor/plugins/input-rules';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+
+export class NodeOrderedList extends Node {
+  override name = 'ordered_list';
+  requires = ['doc'];
+
+  override attributes = {
+    type: {
+      default: '1',
+      fromDom(element: HTMLElement) {
+        return element.hasAttribute('type')
+          ? element.getAttribute('type')
+          : '1';
+      },
+    },
+    start: {
+      default: 1,
+      fromDom(element: HTMLElement) {
+        return element.hasAttribute('start')
+          ? +element.getAttribute('start')!
+          : 1;
+      },
+    },
+  };
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      group: 'block',
+      content: 'list_item+',
+      parseDOM: [
+        { tag: 'ol', getAttrs: (element) => setHtmlAttributes(this, element) },
+      ],
+      toDOM: (node) => ['ol', getHtmlAttributes(this, node), 0],
+    };
+  }
+
+  override getInputRules(type: NodeType): InputRule[] {
+    return [
+      /// Given a list node type, returns an input rule that turns a number
+      /// followed by a dot at the start of a textblock into an ordered list.
+      wrappingInputRule(
+        /^(\d+)\.\s$/,
+        type,
+        (match) => ({ order: +match[1] }),
+        (match, node) => node.childCount + node.attrs.order == +match[1],
+      ),
+    ];
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {
+      'toggleOrderedList': () => editor.commandFactories.wrapInList(type),
+    };
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    return {
+      'Shift-Ctrl-7': 'toggleOrderedList',
+    };
+  }
+}

package/src/NodeParagraph.ts

@@ -0,0 +1,60 @@
+import { type NodeSpec, type NodeType } from 'prosemirror-model';
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+
+type TextAlign = 'left' | 'center' | 'right' | 'justify';
+
+export class NodeParagraph extends Node {
+  override name = 'paragraph';
+  requires = ['doc'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      content: 'inline*',
+      group: 'block',
+      attrs: {
+        textAlign: { default: null },
+      },
+      parseDOM: [
+        {
+          tag: 'p',
+          getAttrs(dom) {
+            const element = dom as HTMLElement;
+            const style = element.style.textAlign;
+            if (
+              style === 'center' || style === 'right' || style === 'justify'
+            ) {
+              return { textAlign: style };
+            }
+            return { textAlign: null };
+          },
+        },
+      ],
+      toDOM(node) {
+        const align = node.attrs.textAlign as TextAlign | null;
+        if (align && align !== 'left') {
+          return ['p', { style: `text-align: ${align}` }, 0];
+        }
+        return ['p', 0];
+      },
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {
+      'setParagraph': () => editor.commandFactories.setBlockType(type),
+    };
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    return {
+      'Shift-Ctrl-0': 'setParagraph',
+    };
+  }
+}