@kerebron/extension-basic-editor 0.4.28 → 0.4.29

package/src/ExtensionGapcursor.ts

@@ -0,0 +1,278 @@
+import {
+  EditorState,
+  NodeSelection,
+  Plugin,
+  Selection,
+  TextSelection,
+} from 'prosemirror-state';
+import { Fragment, Node, ResolvedPos, Slice } from 'prosemirror-model';
+import { Mappable } from 'prosemirror-transform';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
+
+import type { Command } from '@kerebron/editor/commands';
+import { Extension } from '@kerebron/editor';
+import { keydownHandler } from '@kerebron/editor/plugins/keymap';
+
+/// Gap cursor selections are represented using this class. Its
+/// `$anchor` and `$head` properties both point at the cursor position.
+export class GapCursor extends Selection {
+  /// Create a gap cursor.
+  constructor($pos: ResolvedPos) {
+    super($pos, $pos);
+    this.visible = false;
+  }
+
+  map(doc: Node, mapping: Mappable): Selection {
+    let $pos = doc.resolve(mapping.map(this.head));
+    return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
+  }
+
+  override content() {
+    return Slice.empty;
+  }
+
+  eq(other: Selection): boolean {
+    return other instanceof GapCursor && other.head == this.head;
+  }
+
+  toJSON(): any {
+    return { type: 'gapcursor', pos: this.head };
+  }
+
+  /// @internal
+  static fromJSONToGapCursor(doc: Node, json: any): GapCursor {
+    if (typeof json.pos != 'number') {
+      throw new RangeError('Invalid input for GapCursor.fromJSON');
+    }
+    return new GapCursor(doc.resolve(json.pos));
+  }
+
+  /// @internal
+  override getBookmark(): GapBookmark {
+    return new GapBookmark(this.anchor);
+  }
+
+  /// @internal
+  static valid($pos: ResolvedPos) {
+    let parent = $pos.parent;
+    if (parent.isTextblock || !closedBefore($pos) || !closedAfter($pos)) {
+      return false;
+    }
+    let override = parent.type.spec.allowGapCursor;
+    if (override != null) return override;
+    let deflt = parent.contentMatchAt($pos.index()).defaultType;
+    return deflt && deflt.isTextblock;
+  }
+
+  /// @internal
+  static findGapCursorFrom($pos: ResolvedPos, dir: number, mustMove = false) {
+    search: for (;;) {
+      if (!mustMove && GapCursor.valid($pos)) return $pos;
+      let pos = $pos.pos, next = null;
+      // Scan up from this position
+      for (let d = $pos.depth;; d--) {
+        let parent = $pos.node(d);
+        if (
+          dir > 0 ? $pos.indexAfter(d) < parent.childCount : $pos.index(d) > 0
+        ) {
+          next = parent.child(dir > 0 ? $pos.indexAfter(d) : $pos.index(d) - 1);
+          break;
+        } else if (d == 0) {
+          return null;
+        }
+        pos += dir;
+        let $cur = $pos.doc.resolve(pos);
+        if (GapCursor.valid($cur)) return $cur;
+      }
+
+      // And then down into the next node
+      for (;;) {
+        let inside: Node | null = dir > 0 ? next.firstChild : next.lastChild;
+        if (!inside) {
+          if (
+            next.isAtom && !next.isText && !NodeSelection.isSelectable(next)
+          ) {
+            $pos = $pos.doc.resolve(pos + next.nodeSize * dir);
+            mustMove = false;
+            continue search;
+          }
+          break;
+        }
+        next = inside;
+        pos += dir;
+        let $cur = $pos.doc.resolve(pos);
+        if (GapCursor.valid($cur)) return $cur;
+      }
+
+      return null;
+    }
+  }
+}
+
+Selection.jsonID('gapcursor', GapCursor);
+
+class GapBookmark {
+  constructor(readonly pos: number) {}
+
+  map(mapping: Mappable) {
+    return new GapBookmark(mapping.map(this.pos));
+  }
+  resolve(doc: Node): Selection {
+    let $pos = doc.resolve(this.pos);
+    return GapCursor.valid($pos) ? new GapCursor($pos) : Selection.near($pos);
+  }
+}
+
+function closedBefore($pos: ResolvedPos) {
+  for (let d = $pos.depth; d >= 0; d--) {
+    let index = $pos.index(d), parent = $pos.node(d);
+    // At the start of this parent, look at next one
+    if (index == 0) {
+      if (parent.type.spec.isolating) return true;
+      continue;
+    }
+    // See if the node before (or its first ancestor) is closed
+    for (let before = parent.child(index - 1);; before = before.lastChild!) {
+      if (
+        (before.childCount == 0 && !before.inlineContent) || before.isAtom ||
+        before.type.spec.isolating
+      ) return true;
+      if (before.inlineContent) return false;
+    }
+  }
+  // Hit start of document
+  return true;
+}
+
+function closedAfter($pos: ResolvedPos) {
+  for (let d = $pos.depth; d >= 0; d--) {
+    let index = $pos.indexAfter(d), parent = $pos.node(d);
+    if (index == parent.childCount) {
+      if (parent.type.spec.isolating) return true;
+      continue;
+    }
+    for (let after = parent.child(index);; after = after.firstChild!) {
+      if (
+        (after.childCount == 0 && !after.inlineContent) || after.isAtom ||
+        after.type.spec.isolating
+      ) return true;
+      if (after.inlineContent) return false;
+    }
+  }
+  return true;
+}
+
+/// Create a gap cursor plugin. When enabled, this will capture clicks
+/// near and arrow-key-motion past places that don't have a normally
+/// selectable position nearby, and create a gap cursor selection for
+/// them. The cursor is drawn as an element with class
+/// `kb-gapcursor`. You can either include
+/// `style/gapcursor.css` from the package's directory or add your own
+/// styles to make it visible.
+function gapCursor(): Plugin {
+  return new Plugin({
+    props: {
+      decorations: drawGapCursor,
+
+      createSelectionBetween(_view, $anchor, $head) {
+        return $anchor.pos == $head.pos && GapCursor.valid($head)
+          ? new GapCursor($head)
+          : null;
+      },
+
+      handleClick,
+      handleKeyDown,
+      handleDOMEvents: { beforeinput: beforeinput as any },
+    },
+  });
+}
+
+const handleKeyDown = keydownHandler({
+  'ArrowLeft': arrow('horiz', -1),
+  'ArrowRight': arrow('horiz', 1),
+  'ArrowUp': arrow('vert', -1),
+  'ArrowDown': arrow('vert', 1),
+});
+
+function arrow(axis: 'vert' | 'horiz', dir: number): Command {
+  const dirStr = axis == 'vert'
+    ? (dir > 0 ? 'down' : 'up')
+    : (dir > 0 ? 'right' : 'left');
+  return function (state, dispatch, view) {
+    let sel = state.selection;
+    let $start = dir > 0 ? sel.$to : sel.$from, mustMove = sel.empty;
+    if (sel instanceof TextSelection) {
+      if (!view!.endOfTextblock(dirStr) || $start.depth == 0) return false;
+      mustMove = false;
+      $start = state.doc.resolve(dir > 0 ? $start.after() : $start.before());
+    }
+    let $found = GapCursor.findGapCursorFrom($start, dir, mustMove);
+    if (!$found) return false;
+    if (dispatch) dispatch(state.tr.setSelection(new GapCursor($found)));
+    return true;
+  };
+}
+
+function handleClick(view: EditorView, pos: number, event: MouseEvent) {
+  if (!view || !view.editable) return false;
+  let $pos = view.state.doc.resolve(pos);
+  if (!GapCursor.valid($pos)) return false;
+  let clickPos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+  if (
+    clickPos && clickPos.inside > -1 &&
+    NodeSelection.isSelectable(view.state.doc.nodeAt(clickPos.inside)!)
+  ) return false;
+  view.dispatch(view.state.tr.setSelection(new GapCursor($pos)));
+  return true;
+}
+
+// This is a hack that, when a composition starts while a gap cursor
+// is active, quickly creates an inline context for the composition to
+// happen in, to avoid it being aborted by the DOM selection being
+// moved into a valid position.
+function beforeinput(view: EditorView, event: InputEvent) {
+  if (
+    event.inputType != 'insertCompositionText' ||
+    !(view.state.selection instanceof GapCursor)
+  ) return false;
+
+  let { $from } = view.state.selection;
+  let insert = $from.parent.contentMatchAt($from.index()).findWrapping(
+    view.state.schema.nodes.text,
+  );
+  if (!insert) return false;
+
+  let frag = Fragment.empty;
+  for (let i = insert.length - 1; i >= 0; i--) {
+    frag = Fragment.from(insert[i].createAndFill(null, frag));
+  }
+  let tr = view.state.tr.replace($from.pos, $from.pos, new Slice(frag, 0, 0));
+  tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
+  view.dispatch(tr);
+  return false;
+}
+
+function drawGapCursor(state: EditorState) {
+  if (!(state.selection instanceof GapCursor)) return null;
+  let node = document.createElement('div');
+  node.className = 'kb-gapcursor';
+  return DecorationSet.create(state.doc, [
+    Decoration.widget(state.selection.head, node, { key: 'gapcursor' }),
+  ]);
+}
+
+export class ExtensionGapcursor extends Extension {
+  name = 'gapcursor';
+
+  options = {
+    color: 'currentColor',
+    width: 1,
+    class: undefined,
+  };
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      gapCursor(),
+    ];
+  }
+}

package/src/ExtensionHistory.ts

@@ -0,0 +1,48 @@
+import { history, redo, undo } from 'prosemirror-history';
+import { Plugin } from 'prosemirror-state';
+
+import { type CoreEditor, Extension } from '@kerebron/editor';
+import {
+  type Command,
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+
+export class ExtensionHistory extends Extension {
+  name = 'history';
+
+  options = {
+    depth: 100,
+    newGroupDelay: 500,
+  };
+
+  override getCommandFactories(editor: CoreEditor): Partial<CommandFactories> {
+    return {
+      'undo': () => undo,
+      'redo': () => redo,
+    };
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    // https://stackoverflow.com/a/73619128
+    const mac = typeof navigator != 'undefined'
+      ? /Mac|iP(hone|[oa]d)/.test(navigator?.platform)
+      : false;
+
+    const shortcuts = {
+      'Mod-z': 'undo',
+      'Mod-y': 'redo',
+    };
+    if (!mac) {
+      shortcuts['Mod-y'] = 'redo';
+    }
+
+    return shortcuts;
+  }
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      history(this.options),
+    ];
+  }
+}

package/src/ExtensionHtml.ts

@@ -0,0 +1,158 @@
+import {
+  DOMParser,
+  DOMSerializer,
+  Fragment,
+  Node,
+  type ParseOptions,
+  Schema,
+} from 'prosemirror-model';
+
+import { type Converter, type CoreEditor, Extension } from '@kerebron/editor';
+
+export type CreateNodeFromContentOptions = {
+  parseOptions?: ParseOptions;
+  errorOnInvalidContent?: boolean;
+};
+
+export function getHTMLFromFragment(
+  fragment: Fragment,
+  schema: Schema,
+): string {
+  const document = globalThis.document;
+  const documentFragment = DOMSerializer.fromSchema(schema).serializeFragment(
+    fragment,
+    { document },
+  );
+
+  const temporaryDocument = document.implementation.createHTMLDocument();
+  const container = temporaryDocument.createElement('div');
+
+  container.appendChild(documentFragment);
+
+  return container.innerHTML;
+}
+
+const removeWhitespaces = (node: HTMLElement) => {
+  const children = node.childNodes;
+
+  for (let i = children.length - 1; i >= 0; i -= 1) {
+    const child = children[i];
+
+    if (
+      child.nodeType === 3 && child.nodeValue &&
+      /^(\n\s\s|\n)$/.test(child.nodeValue)
+    ) {
+      node.removeChild(child);
+    } else if (child.nodeType === 1) {
+      removeWhitespaces(child as HTMLElement);
+    }
+  }
+
+  return node;
+};
+
+export function elementFromString(value: string): HTMLElement {
+  // add a wrapper to preserve leading and trailing whitespace
+  const wrappedValue = `<html lang="en"><body>${value}</body></html>`;
+
+  const body =
+    new globalThis.DOMParser().parseFromString(wrappedValue, 'text/html').body;
+
+  return removeWhitespaces(body);
+}
+
+function prepareContentCheckSchema(schema: Schema): Schema {
+  const contentCheckSchema = new Schema({
+    topNode: schema.spec.topNode,
+    marks: schema.spec.marks,
+    // Prosemirror's schemas are executed such that: the last to execute, matches last
+    // This means that we can add a catch-all node at the end of the schema to catch any content that we don't know how to handle
+    nodes: schema.spec.nodes.append({
+      __unknown__catch__all__node: {
+        content: 'inline*',
+        group: 'block',
+        parseDOM: [
+          {
+            tag: '*',
+            getAttrs: (e) => {
+              // Try to stringify the element for a more helpful error message
+              const invalidContent = typeof e === 'string' ? e : e.outerHTML;
+              throw new Error('Invalid HTML content', {
+                cause: new Error(`Invalid element found: ${invalidContent}`),
+              });
+            },
+          },
+        ],
+      },
+    }),
+  });
+
+  return contentCheckSchema;
+}
+
+export function createNodeFromHTML(
+  content: string,
+  schema: Schema,
+  options?: CreateNodeFromContentOptions,
+): Node {
+  options = {
+    parseOptions: {},
+    ...options,
+  };
+
+  if (options.errorOnInvalidContent) {
+    const contentCheckSchema = prepareContentCheckSchema(schema);
+    DOMParser.fromSchema(contentCheckSchema).parse(
+      elementFromString(content),
+      options.parseOptions,
+    );
+  }
+
+  const parser = DOMParser.fromSchema(schema);
+  return parser.parse(elementFromString(content), options.parseOptions);
+}
+
+export function createFragmentFromHTML(
+  content: string,
+  schema: Schema,
+  options?: CreateNodeFromContentOptions,
+): Fragment {
+  options = {
+    parseOptions: {},
+    ...options,
+  };
+
+  if (options.errorOnInvalidContent) {
+    const contentCheckSchema = prepareContentCheckSchema(schema);
+    DOMParser.fromSchema(contentCheckSchema).parseSlice(
+      elementFromString(content),
+      options.parseOptions,
+    );
+  }
+
+  const parser = DOMParser.fromSchema(schema);
+  return parser.parseSlice(elementFromString(content), options.parseOptions)
+    .content;
+}
+
+export class ExtensionHtml extends Extension {
+  name = 'html';
+
+  override getConverters(
+    editor: CoreEditor,
+    schema: Schema,
+  ): Record<string, Converter> {
+    return {
+      'text/html': {
+        fromDoc: async (document: Node): Promise<Uint8Array> => {
+          const html = getHTMLFromFragment(document.content, editor.schema);
+          return new TextEncoder().encode(html);
+        },
+        toDoc: async (buffer: Uint8Array): Promise<Node> => {
+          const html = new TextDecoder().decode(buffer);
+          return createNodeFromHTML(html, editor.schema);
+        },
+      },
+    };
+  }
+}