@kerebron/editor 0.4.28 → 0.4.30

package/src/commands/createChainableState.ts

@@ -0,0 +1,36 @@
+import { EditorState, Transaction } from 'prosemirror-state';
+
+export function createChainableState(
+  transaction: Transaction,
+  state: EditorState,
+): EditorState {
+  let { selection } = transaction;
+  let { doc } = transaction;
+  let { storedMarks } = transaction;
+
+  return {
+    ...state,
+    apply: state.apply.bind(state),
+    applyTransaction: state.applyTransaction.bind(state),
+    plugins: state.plugins,
+    schema: state.schema,
+    reconfigure: state.reconfigure.bind(state),
+    toJSON: state.toJSON.bind(state),
+    get storedMarks() {
+      return storedMarks;
+    },
+    get selection() {
+      return selection;
+    },
+    get doc() {
+      return doc;
+    },
+    get tr() {
+      selection = transaction.selection;
+      doc = transaction.doc;
+      storedMarks = transaction.storedMarks;
+
+      return transaction;
+    },
+  };
+}

package/src/commands/keyCommandFactories.ts

@@ -0,0 +1,26 @@
+import { CommandFactory, firstCommand } from './mod.js';
+import { baseCommandFactories } from './baseCommandFactories.js';
+
+const backspace = firstCommand(
+  baseCommandFactories.undoInputRule(),
+  baseCommandFactories.deleteSelection(),
+  baseCommandFactories.joinBackward(),
+  baseCommandFactories.selectNodeBackward(),
+);
+const del = firstCommand(
+  baseCommandFactories.deleteSelection(),
+  baseCommandFactories.joinForward(),
+  baseCommandFactories.selectNodeForward(),
+);
+const enter = firstCommand(
+  baseCommandFactories.newlineInCode(),
+  baseCommandFactories.createParagraphNear(),
+  baseCommandFactories.liftEmptyBlock(),
+  baseCommandFactories.splitBlock(),
+);
+
+export const keyCommandFactories: Record<string, CommandFactory> = {
+  backspace: () => backspace,
+  del: () => del,
+  enter: () => enter,
+};

package/src/commands/mod.ts

@@ -0,0 +1,104 @@
+import type { Transaction } from 'prosemirror-state';
+import type { Node } from 'prosemirror-model';
+import type { Command } from './types.js';
+import { canJoin } from 'prosemirror-transform';
+
+export * from './types.js';
+
+/// Combine a number of command functions into a single function (which
+/// calls them one by one until one returns true).
+export function firstCommand(...commands: readonly Command[]): Command {
+  const cmd: Command = function (state, dispatch, view) {
+    for (let i = 0; i < commands.length; i++) {
+      if (commands[i](state, dispatch, view)) {
+        const cmd: Command = commands[i];
+        if (cmd.displayName !== 'first') {
+          console.debug(
+            'firstCommand: ',
+            commands[i].displayName || commands[i],
+          );
+        }
+        return true;
+      }
+    }
+    return false;
+  };
+  cmd.displayName = 'first';
+
+  return cmd;
+}
+
+export function alternativeCommands(...commands: readonly Command[]): Command {
+  return function (state, dispatch, view) {
+    for (let i = 0; i < commands.length; i++) {
+      if (commands[i](state, dispatch, view)) return true;
+    }
+    return false;
+  };
+}
+
+function wrapDispatchForJoin(
+  dispatch: (tr: Transaction) => void,
+  isJoinable: (a: Node, b: Node) => boolean,
+) {
+  return (tr: Transaction) => {
+    if (!tr.isGeneric) return dispatch(tr);
+
+    let ranges: number[] = [];
+    for (let i = 0; i < tr.mapping.maps.length; i++) {
+      let map = tr.mapping.maps[i];
+      for (let j = 0; j < ranges.length; j++) {
+        ranges[j] = map.map(ranges[j]);
+      }
+      map.forEach((_s, _e, from, to) => ranges.push(from, to));
+    }
+
+    // Figure out which joinable points exist inside those ranges,
+    // by checking all node boundaries in their parent nodes.
+    let joinable = [];
+    for (let i = 0; i < ranges.length; i += 2) {
+      let from = ranges[i], to = ranges[i + 1];
+      let $from = tr.doc.resolve(from),
+        depth = $from.sharedDepth(to),
+        parent = $from.node(depth);
+      for (
+        let index = $from.indexAfter(depth), pos = $from.after(depth + 1);
+        pos <= to;
+        ++index
+      ) {
+        let after = parent.maybeChild(index);
+        if (!after) break;
+        if (index && joinable.indexOf(pos) == -1) {
+          let before = parent.child(index - 1);
+          if (before.type == after.type && isJoinable(before, after)) {
+            joinable.push(pos);
+          }
+        }
+        pos += after.nodeSize;
+      }
+    }
+    // Join the joinable points
+    joinable.sort((a, b) => a - b);
+    for (let i = joinable.length - 1; i >= 0; i--) {
+      if (canJoin(tr.doc, joinable[i])) tr.join(joinable[i]);
+    }
+    dispatch(tr);
+  };
+}
+
+/// Wrap a command so that, when it produces a transform that causes
+/// two joinable nodes to end up next to each other, those are joined.
+/// Nodes are considered joinable when they are of the same type and
+/// when the `isJoinable` predicate returns true for them or, if an
+/// array of strings was passed, if their node type name is in that
+/// array.
+export function autoJoin(
+  command: Command,
+  isJoinable: ((before: Node, after: Node) => boolean) | readonly string[],
+): Command {
+  let canJoin = Array.isArray(isJoinable)
+    ? (node: Node) => isJoinable.indexOf(node.type.name) > -1
+    : isJoinable as (a: Node, b: Node) => boolean;
+  return (state, dispatch, view) =>
+    command(state, dispatch && wrapDispatchForJoin(dispatch, canJoin), view);
+}

package/src/commands/replaceCommandFactories.ts

@@ -0,0 +1,129 @@
+import { Fragment, Node, Slice } from 'prosemirror-model';
+
+import type { Command, CommandFactory } from './mod.js';
+import type { TextRange } from '../mod.js';
+import { EditorState } from 'prosemirror-state';
+
+const replaceRangeText = (range: TextRange, text: string): Command => {
+  return (state, dispatch) => {
+    const tr = state.tr;
+
+    const from = tr.mapping.map(range.from);
+    const to = tr.mapping.map(range.to);
+
+    const frag = Fragment.from(state.schema.text(text));
+    const insert = new Slice(frag, 0, 0);
+
+    tr.replace(from, to, insert);
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+};
+
+const replaceRangeSlice = (range: TextRange, insert: Slice): Command => {
+  return (state, dispatch) => {
+    const tr = state.tr;
+
+    const from = tr.mapping.map(range.from);
+    const to = tr.mapping.map(range.to);
+
+    tr.replace(from, to, insert);
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+};
+
+function getTopMostBlockStartForOffset(state: EditorState, offset: number) {
+  const { doc } = state;
+  const $pos = doc.resolve(offset);
+
+  const blockPos = $pos.before($pos.depth);
+
+  if ($pos.depth === 1) return blockPos;
+  return $pos.start(1);
+}
+
+function getTopMostBlockEndForOffset(state: EditorState, offset: number) {
+  const { doc } = state;
+
+  const $pos = doc.resolve(offset);
+  return $pos.end(1);
+}
+
+function getAdjacentTopBlock(state: EditorState, offset: number) {
+  const { doc } = state;
+
+  if (offset < 0 || offset > doc.content.size) {
+    throw new RangeError('Offset is outside the document');
+  }
+
+  const $pos = doc.resolve(offset);
+  const atBlockStart = $pos.pos === $pos.start($pos.depth);
+
+  if (atBlockStart) {
+    return getTopMostBlockStartForOffset(state, offset);
+  } else {
+    return getTopMostBlockEndForOffset(state, offset);
+  }
+}
+
+const insertBlockBefore = (pos: number, insert: Node): Command => {
+  return (state, dispatch) => {
+    const tr = state.tr;
+
+    const blockPos = getTopMostBlockStartForOffset(state, tr.mapping.map(pos));
+    tr.insert(blockPos, insert);
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+};
+
+const insertBlockAfter = (pos: number, insert: Node): Command => {
+  return (state, dispatch) => {
+    const tr = state.tr;
+
+    const blockPos = getTopMostBlockEndForOffset(state, tr.mapping.map(pos));
+    tr.insert(blockPos, insert);
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+};
+
+const insertBlockSmart = (pos: number, insert: Node): Command => {
+  return (state, dispatch) => {
+    const tr = state.tr;
+
+    const blockPos = getAdjacentTopBlock(state, tr.mapping.map(pos));
+    tr.insert(blockPos, insert);
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+};
+
+export const replaceCommandFactories: Record<string, CommandFactory> = {
+  replaceRangeText,
+  replaceRangeSlice,
+  insertBlockBefore,
+  insertBlockAfter,
+  insertBlockSmart,
+};

package/src/commands/types.ts

@@ -0,0 +1,30 @@
+import type { Command as PmCommand } from 'prosemirror-state';
+
+interface Command extends PmCommand {
+  displayName?: string;
+  description?: string;
+}
+
+export type { Command };
+
+export type CommandFactory = (...args: any[]) => Command;
+
+export interface Commands {
+  [name: string]: Command;
+}
+
+export interface CommandFactories {
+  [name: string]: CommandFactory;
+}
+
+export type CommandShortcuts = {
+  [name: string]: string;
+};
+
+export type ChainedCommands =
+  & {
+    [Item in keyof Commands]: (...args: unknown[]) => ChainedCommands;
+  }
+  & {
+    run: () => boolean;
+  };

package/src/mod.ts

@@ -0,0 +1,8 @@
+export * from './CoreEditor.js';
+export * from './Extension.js';
+export * from './Mark.js';
+export * from './Node.js';
+export * from './nodeToTreeString.js';
+export * from './types.js';
+export * from './utilities/SmartOutput.js';
+export * from './ui.js';

package/src/nodeToTreeString.ts

@@ -0,0 +1,100 @@
+import type { Node } from 'prosemirror-model';
+import { SmartOutput } from './utilities/SmartOutput.js';
+
+function trimText(str: string, maxLen = 20): string {
+  str = str.replaceAll('\n', '\\n');
+
+  if (str.length <= maxLen) {
+    return str;
+  }
+
+  return str.slice(0, maxLen) + '...';
+}
+
+export interface NodeAndPos {
+  node: Node;
+  pos: number;
+}
+
+export function nodeToTreeStringOutput(
+  output: SmartOutput<NodeAndPos>,
+  node: Node | Node[] | readonly Node[],
+  level = 0,
+  currentPos = 0,
+) {
+  let delim = '';
+  for (let i = 0; i < level; i++) {
+    delim += '  ';
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      output.log(delim, { node: child, pos: currentPos });
+      nodeToTreeStringOutput(output, child, level + 1, currentPos);
+      // .replace(/\s+$/gm, '') +
+      // '\n'
+    }
+    return;
+  }
+
+  // https://prosemirror.net/docs/guide/#doc.indexing
+
+  let line = '';
+  // if (node.type) {
+  if ('type' in node) {
+    line += ` - [${node.type.name}] `;
+    // } else {
+    //   line += ` - `;
+    // }
+    line += `pos: ${currentPos}, `;
+    line += `nodeSize: ${node.nodeSize}, `; // isLeaf ? 1 : 2 + this.content.size
+    line += `epos: ${currentPos + node.nodeSize}, `; // isLeaf ? 1 : 2 + this.content.size
+    if (node.content) {
+      line += `fragment.size: ${node.content.size}, `;
+    }
+
+    output.log((delim + line) + '\n', { node, pos: currentPos });
+
+    let marksLine = '';
+    if (node.marks) {
+      for (const mark of node.marks) {
+        marksLine += `(${mark.type.name}), `;
+      }
+    }
+
+    if (marksLine) {
+      output.log((delim + '    ' + marksLine) + '\n', {
+        node,
+        pos: currentPos,
+      });
+    }
+
+    if (node.text) {
+      output.log((delim + '    "' + trimText(node.text) + '"') + '\n', {
+        node,
+        pos: currentPos,
+      });
+    }
+  }
+
+  node.forEach((child, offset) => {
+    // output +=
+    nodeToTreeStringOutput(output, child, level + 1, currentPos + offset + 1);
+    //   .replace(
+    //   /\s+$/gm,
+    //   '',
+    // ) + '\n'; // + (node.isLeaf ? 1 : 2)
+  });
+
+  return output;
+}
+
+export function nodeToTreeString(node: Node | Node[] | readonly Node[]) {
+  const output = new SmartOutput<NodeAndPos>();
+  nodeToTreeStringOutput(output, node);
+  return output.toString();
+}
+
+export function debugNode(node: Node | Node[]) {
+  console.debug(nodeToTreeString(node));
+}

package/src/plugins/TrackSelecionPlugin.ts

@@ -0,0 +1,27 @@
+import { Plugin } from 'prosemirror-state';
+import type { CoreEditor } from '../mod.js';
+
+export class TrackSelecionPlugin extends Plugin {
+  constructor(editor: CoreEditor) {
+    super({
+      view(editorView) {
+        return {
+          update(view, prevState) {
+            const state = view.state;
+            const prevSelection = prevState.selection;
+            const selection = state.selection;
+
+            if (!prevSelection.eq(selection)) {
+              const event = new CustomEvent('selection', {
+                detail: {
+                  selection,
+                },
+              });
+              editor.dispatchEvent(event);
+            }
+          },
+        };
+      },
+    });
+  }
+}

package/src/plugins/input-rules/InputRulesPlugin.ts

@@ -0,0 +1,242 @@
+import { Fragment, Node as ProseMirrorNode } from 'prosemirror-model';
+import {
+  EditorState,
+  Plugin,
+  TextSelection,
+  Transaction,
+} from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+import type { Command, CommandFactory } from '../../commands/types.js';
+
+const MAX_MATCH = 500;
+
+type PluginState = {
+  transform: Transaction;
+  from: number;
+  to: number;
+  text: string;
+} | null;
+
+/// Input rules are regular expressions describing a piece of text
+/// that, when typed, causes something to happen. This might be
+/// changing two dashes into an emdash, wrapping a paragraph starting
+/// with `"> "` into a blockquote, or something entirely different.
+export class InputRule {
+  /// @internal
+  handler: (
+    state: EditorState,
+    match: RegExpMatchArray,
+    start: number,
+    end: number,
+  ) => Transaction | null;
+
+  /// @internal
+  undoable: boolean;
+  inCode: boolean | 'only';
+
+  // :: (RegExp, union<string, (state: EditorState, match: [string], start: number, end: number) → ?Transaction>)
+  /// Create an input rule. The rule applies when the user typed
+  /// something and the text directly in front of the cursor matches
+  /// `match`, which should end with `$`.
+  ///
+  /// The `handler` can be a string, in which case the matched text, or
+  /// the first matched group in the regexp, is replaced by that
+  /// string.
+  ///
+  /// Or a it can be a function, which will be called with the match
+  /// array produced by
+  /// [`RegExp.exec`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec),
+  /// as well as the start and end of the matched range, and which can
+  /// return a [transaction](#state.Transaction) that describes the
+  /// rule's effect, or null to indicate the input was not handled.
+  constructor(
+    /// @internal
+    readonly match: RegExp,
+    handler:
+      | string
+      | ((
+        state: EditorState,
+        match: RegExpMatchArray,
+        start: number,
+        end: number,
+      ) => Transaction | null),
+    options: {
+      /// When set to false,
+      /// [`undoInputRule`](#inputrules.undoInputRule) doesn't work on
+      /// this rule.
+      undoable?: boolean;
+      /// By default, input rules will not apply inside nodes marked
+      /// as [code](#model.NodeSpec.code). Set this to true to change
+      /// that, or to `"only"` to _only_ match in such nodes.
+      inCode?: boolean | 'only';
+    } = {},
+  ) {
+    this.match = match;
+    this.handler = typeof handler == 'string'
+      ? stringHandler(handler)
+      : handler;
+    this.undoable = options.undoable !== false;
+    this.inCode = options.inCode || false;
+  }
+}
+
+function stringHandler(string: string) {
+  return function (
+    state: EditorState,
+    match: RegExpMatchArray,
+    start: number,
+    end: number,
+  ) {
+    let insert = string;
+    if (match[1]) {
+      const offset = match[0].lastIndexOf(match[1]);
+      insert += match[0].slice(offset + match[1].length);
+      start += offset;
+      const cutOff = start - end;
+      if (cutOff > 0) {
+        insert = match[0].slice(offset - cutOff, offset) + insert;
+        start = end;
+      }
+    }
+    return state.tr.insertText(insert, start, end);
+  };
+}
+
+/// Create an input rules plugin. When enabled, it will cause text
+/// input that matches any of the given rules to trigger the rule's
+/// action.
+export class InputRulesPlugin extends Plugin<PluginState> {
+  constructor(rules: readonly InputRule[]) {
+    super({
+      state: {
+        init() {
+          return null;
+        },
+        apply(this: InputRulesPlugin, tr, prev) {
+          const stored = tr.getMeta(this);
+          if (stored) {
+            return stored;
+          }
+          return tr.selectionSet || tr.docChanged ? null : prev;
+        },
+      },
+
+      props: {
+        handleTextInput(view, from, to, text) {
+          const cmd = runInputRules(from, to, text, rules);
+          const dispatch = (tr: Transaction) => {
+            view.dispatch(tr);
+          };
+          return cmd(view.state, dispatch, view);
+          // return run(view, from, to, text, rules, this);
+        },
+        handleDOMEvents: {
+          compositionend: (view) => {
+            setTimeout(() => {
+              const { $cursor } = view.state.selection as TextSelection;
+              if ($cursor) {
+                const cmd = runInputRules($cursor.pos, $cursor.pos, '', rules);
+                const dispatch = (tr: Transaction) => {
+                  view.dispatch(tr);
+                };
+                return cmd(view.state, dispatch, view);
+                // run(view, $cursor.pos, $cursor.pos, '', rules, this);
+              }
+            });
+          },
+        },
+      },
+
+      isInputRules: true,
+    });
+  }
+}
+
+export const runInputRules: CommandFactory = (
+  from: number,
+  to: number,
+  text: string,
+  rules: readonly InputRule[],
+) => {
+  const cmd: Command = (
+    state: EditorState,
+    dispatch?: (tr: Transaction) => void,
+    view?: EditorView,
+  ) => {
+    const plugins = state.plugins;
+    const plugin: InputRulesPlugin | undefined = plugins.find((plugin) =>
+      (plugin.spec as any).isInputRules
+    );
+    if (!plugin) {
+      return false;
+    }
+
+    if (view?.composing) return false;
+    const $from = state.doc.resolve(from);
+    const textBefore = $from.parent.textBetween(
+      Math.max(0, $from.parentOffset - MAX_MATCH),
+      $from.parentOffset,
+      null,
+      '\ufffc',
+    ) + text;
+    for (let i = 0; i < rules.length; i++) {
+      const rule = rules[i];
+      if ($from.parent.type.spec.code) {
+        if (!rule.inCode) continue;
+      } else if (rule.inCode === 'only') {
+        continue;
+      }
+      const match = rule.match.exec(textBefore);
+      const tr = match &&
+        rule.handler(state, match, from - (match[0].length - text.length), to);
+      if (!tr) continue;
+      if (rule.undoable) {
+        tr.setMeta(plugin, { transform: tr, from, to, text });
+      }
+      view?.dispatch(tr);
+      return true;
+    }
+    return false;
+  };
+  cmd.displayName = 'runInputRules';
+
+  return cmd;
+};
+
+/// This is a command that will undo an input rule, if applying such a
+/// rule was the last thing that the user did.
+export const undoInputRuleCommand: Command = (state, dispatch) => {
+  const plugins = state.plugins;
+  const plugin: InputRulesPlugin | undefined = plugins.find((plugin) =>
+    (plugin.spec as any).isInputRules
+  );
+  if (!plugin) {
+    return false;
+  }
+
+  const undoable: PluginState | undefined = plugin.getState(state);
+  if (!undoable) {
+    return false;
+  }
+
+  if (dispatch) {
+    const tr = state.tr;
+    const toUndo = undoable.transform;
+    for (let j = toUndo.steps.length - 1; j >= 0; j--) {
+      tr.step(toUndo.steps[j].invert(toUndo.docs[j]));
+    }
+    if (undoable.text) {
+      const marks = tr.doc.resolve(undoable.from).marks();
+      tr.replaceWith(
+        undoable.from,
+        undoable.to,
+        state.schema.text(undoable.text, marks),
+      );
+    } else {
+      tr.delete(undoable.from, undoable.to);
+    }
+    dispatch(tr);
+  }
+  return true;
+};