@kerebron/extension-basic-editor 0.4.27 → 0.4.29

package/src/ExtensionBasicCodeEditor.ts

@@ -0,0 +1,82 @@
+import { Node } from 'prosemirror-model';
+
+import {
+  AnyExtensionOrReq,
+  Extension,
+  RawTextMapEntry,
+  RawTextResult,
+} from '@kerebron/editor';
+import { NodeDocumentCode } from './NodeDocumentCode.js';
+
+import { ExtensionSelection } from './ExtensionSelection.js';
+import { ExtensionBaseKeymap } from './ExtensionBaseKeymap.js';
+import { ExtensionDropcursor } from './ExtensionDropcursor.js';
+import { ExtensionGapcursor } from './ExtensionGapcursor.js';
+import { ExtensionHtml } from './ExtensionHtml.js';
+import { NodeText } from './NodeText.js';
+import { ExtensionRemoteSelection } from './remote-selection/ExtensionRemoteSelection.js';
+
+export class ExtensionBasicCodeEditor extends Extension {
+  name = 'basic-code-editor';
+  requires: AnyExtensionOrReq[];
+
+  constructor({ lang }: { lang: string }) {
+    super();
+
+    this.requires = [
+      new ExtensionBaseKeymap(),
+      new ExtensionDropcursor(),
+      new ExtensionGapcursor(),
+      new ExtensionHtml(),
+      new ExtensionRemoteSelection(),
+      new ExtensionSelection(),
+      new NodeDocumentCode({ lang }),
+      new NodeText(),
+    ];
+  }
+
+  toRawText(doc: Node): RawTextResult {
+    const topNodeType = this.editor.schema.topNodeType;
+    const spec = topNodeType.spec;
+    const singleNodeDoc = spec.content?.indexOf('*') === -1;
+
+    if (!singleNodeDoc) {
+      throw new Error('Not a single node doc');
+    }
+
+    if (doc.children.length !== 1) {
+      throw new Error('Not a single node doc');
+    }
+
+    const codeBlock = doc.children[0];
+
+    const content = codeBlock.content.content
+      .map((node) => node.text)
+      .join('');
+
+    const lines = content.split('\n');
+
+    const rawTextMap: Array<RawTextMapEntry> = [];
+
+    let nodeIdx = 1;
+    let targetPos = 0;
+    let targetRow = 0;
+    for (const line of lines) {
+      rawTextMap.push({
+        nodeIdx: nodeIdx,
+        targetRow,
+        targetCol: 0,
+        targetPos,
+      });
+
+      targetRow++;
+      targetPos += line.length + 1;
+      nodeIdx += line.length + 1;
+    }
+
+    return {
+      content,
+      rawTextMap,
+    };
+  }
+}

package/src/ExtensionBasicEditor.ts

@@ -0,0 +1,97 @@
+import { Extension } from '@kerebron/editor';
+import { ExtensionSelection } from './ExtensionSelection.js';
+import { ExtensionBaseKeymap } from './ExtensionBaseKeymap.js';
+import { ExtensionDropcursor } from './ExtensionDropcursor.js';
+import { ExtensionGapcursor } from './ExtensionGapcursor.js';
+import { ExtensionHtml } from './ExtensionHtml.js';
+import { ExtensionMediaUpload } from './ExtensionMediaUpload.js';
+import { ExtensionRemoteSelection } from './remote-selection/ExtensionRemoteSelection.js';
+import { ExtensionTextAlign } from './ExtensionTextAlign.js';
+
+import { MarkLink } from './MarkLink.js';
+import { MarkStrong } from './MarkStrong.js';
+import { MarkItalic } from './MarkItalic.js';
+import { MarkUnderline } from './MarkUnderline.js';
+import { MarkStrike } from './MarkStrike.js';
+import { MarkCode } from './MarkCode.js';
+import { MarkChange } from './MarkChange.js';
+import { MarkBookmark } from './MarkBookmark.js';
+import { MarkTextColor } from './MarkTextColor.js';
+import { MarkHighlight } from './MarkHighlight.js';
+import { MarkSuperscript } from './MarkSuperscript.js';
+import { MarkSubscript } from './MarkSubscript.js';
+
+import { NodeDocument } from './NodeDocument.js';
+import { NodeText } from './NodeText.js';
+import { NodeCodeBlock } from './NodeCodeBlock.js';
+import { NodeBookmark } from './NodeBookmark.js';
+import { NodeParagraph } from './NodeParagraph.js';
+import { NodeHardBreak } from './NodeHardBreak.js';
+import { NodeHorizontalRule } from './NodeHorizontalRule.js';
+import { NodeOrderedList } from './NodeOrderedList.js';
+import { NodeBulletList } from './NodeBulletList.js';
+import { NodeListItem } from './NodeListItem.js';
+import { NodeImage } from './NodeImage.js';
+import { NodeVideo } from './NodeVideo.js';
+import { NodeBlockquote } from './NodeBlockquote.js';
+import { NodeAside } from './NodeAside.js';
+import { NodeHeading } from './NodeHeading.js';
+import { NodeMath } from './NodeMath.js';
+import { NodeDefinitionList } from './NodeDefinitionList.js';
+import { NodeDefinitionTerm } from './NodeDefinitionTerm.js';
+import { NodeDefinitionDesc } from './NodeDefinitionDesc.js';
+import { NodeFrontmatter } from './NodeFrontmatter.js';
+import { NodeTaskList } from './NodeTaskList.js';
+import { NodeTaskItem } from './NodeTaskItem.js';
+import { NodeInlineShortCode } from './NodeInlineShortCode.js';
+
+export class ExtensionBasicEditor extends Extension {
+  name = 'basic-editor';
+  requires = [
+    new ExtensionBaseKeymap(),
+    new ExtensionDropcursor(),
+    new ExtensionGapcursor(),
+    new ExtensionHtml(),
+    new ExtensionMediaUpload(),
+    new ExtensionRemoteSelection(),
+    new ExtensionSelection(),
+    new ExtensionTextAlign(),
+    new NodeDocument(),
+    new NodeText(),
+    new NodeParagraph(),
+    new NodeHardBreak(),
+    new NodeCodeBlock(),
+    new NodeBookmark(),
+    new NodeHorizontalRule(),
+    new NodeOrderedList(),
+    new NodeBulletList(),
+    new NodeListItem(),
+    new NodeTaskList(),
+    new NodeTaskItem(),
+    new NodeDefinitionList(),
+    new NodeDefinitionTerm(),
+    new NodeDefinitionDesc(),
+    new NodeTaskList(),
+    new NodeTaskItem(),
+    new NodeFrontmatter(),
+    new NodeImage(),
+    new NodeVideo(),
+    new NodeBlockquote(),
+    new NodeAside(),
+    new NodeHeading(),
+    new NodeMath(),
+    new NodeInlineShortCode(),
+    new MarkLink(),
+    new MarkItalic(),
+    new MarkStrong(),
+    new MarkUnderline(),
+    new MarkStrike(),
+    new MarkCode(),
+    new MarkChange(),
+    new MarkBookmark(),
+    new MarkTextColor(),
+    new MarkHighlight(),
+    new MarkSuperscript(),
+    new MarkSubscript(),
+  ];
+}

package/src/ExtensionDropcursor.ts

@@ -0,0 +1,221 @@
+import { EditorState, Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { dropPoint } from 'prosemirror-transform';
+
+import { Extension } from '@kerebron/editor';
+
+interface DropCursorOptions {
+  /// The color of the cursor. Defaults to `black`. Use `false` to apply no color and rely only on class.
+  color?: string | false;
+
+  /// The precise width of the cursor in pixels. Defaults to 1.
+  width?: number;
+
+  /// A CSS class name to add to the cursor element.
+  class?: string;
+}
+
+/// Create a plugin that, when added to a ProseMirror instance,
+/// causes a decoration to show up at the drop position when something
+/// is dragged over the editor.
+///
+/// Nodes may add a `disableDropCursor` property to their spec to
+/// control the showing of a drop cursor inside them. This may be a
+/// boolean or a function, which will be called with a view and a
+/// position, and should return a boolean.
+export function dropCursor(options: DropCursorOptions = {}): Plugin {
+  return new Plugin({
+    view(editorView) {
+      return new DropCursorView(editorView, options);
+    },
+  });
+}
+
+class DropCursorView {
+  width: number;
+  color: string | undefined;
+  class: string | undefined;
+  cursorPos: number | null = null;
+  element: HTMLElement | null = null;
+  timeout: number = -1;
+  handlers: { name: string; handler: (event: Event) => void }[];
+
+  constructor(readonly editorView: EditorView, options: DropCursorOptions) {
+    this.width = options.width ?? 1;
+    this.color = options.color === false
+      ? undefined
+      : (options.color || 'black');
+    this.class = options.class;
+
+    this.handlers = ['dragover', 'dragend', 'drop', 'dragleave'].map((name) => {
+      let handler = (e: Event) => {
+        (this as any)[name](e);
+      };
+      editorView.dom.addEventListener(name, handler);
+      return { name, handler };
+    });
+  }
+
+  destroy() {
+    this.handlers.forEach(({ name, handler }) =>
+      this.editorView.dom.removeEventListener(name, handler)
+    );
+  }
+
+  update(editorView: EditorView, prevState: EditorState) {
+    if (this.cursorPos != null && prevState.doc != editorView.state.doc) {
+      if (this.cursorPos > editorView.state.doc.content.size) {
+        this.setCursor(null);
+      } else this.updateOverlay();
+    }
+  }
+
+  setCursor(pos: number | null) {
+    if (pos == this.cursorPos) return;
+    this.cursorPos = pos;
+    if (pos == null) {
+      this.element!.parentNode!.removeChild(this.element!);
+      this.element = null;
+    } else {
+      this.updateOverlay();
+    }
+  }
+
+  updateOverlay() {
+    let $pos = this.editorView.state.doc.resolve(this.cursorPos!);
+    let isBlock = !$pos.parent.inlineContent, rect;
+    let editorDOM = this.editorView.dom,
+      editorRect = editorDOM.getBoundingClientRect();
+    let scaleX = editorRect.width / editorDOM.offsetWidth,
+      scaleY = editorRect.height / editorDOM.offsetHeight;
+    if (isBlock) {
+      let before = $pos.nodeBefore, after = $pos.nodeAfter;
+      if (before || after) {
+        let node = this.editorView.nodeDOM(
+          this.cursorPos! - (before ? before.nodeSize : 0),
+        );
+        if (node) {
+          let nodeRect = (node as HTMLElement).getBoundingClientRect();
+          let top = before ? nodeRect.bottom : nodeRect.top;
+          if (before && after) {
+            top = (top +
+              (this.editorView.nodeDOM(this.cursorPos!) as HTMLElement)
+                .getBoundingClientRect().top) / 2;
+          }
+          let halfWidth = (this.width / 2) * scaleY;
+          rect = {
+            left: nodeRect.left,
+            right: nodeRect.right,
+            top: top - halfWidth,
+            bottom: top + halfWidth,
+          };
+        }
+      }
+    }
+    if (!rect) {
+      let coords = this.editorView.coordsAtPos(this.cursorPos!);
+      let halfWidth = (this.width / 2) * scaleX;
+      rect = {
+        left: coords.left - halfWidth,
+        right: coords.left + halfWidth,
+        top: coords.top,
+        bottom: coords.bottom,
+      };
+    }
+
+    let parent = this.editorView.dom.offsetParent as HTMLElement;
+    if (!this.element) {
+      this.element = parent.appendChild(document.createElement('div'));
+      if (this.class) this.element.className = this.class;
+      this.element.style.cssText =
+        'position: absolute; z-index: 50; pointer-events: none;';
+      if (this.color) {
+        this.element.style.backgroundColor = this.color;
+      }
+    }
+    this.element.classList.toggle('prosemirror-dropcursor-block', isBlock);
+    this.element.classList.toggle('prosemirror-dropcursor-inline', !isBlock);
+    let parentLeft, parentTop;
+    if (
+      !parent ||
+      parent == document.body && getComputedStyle(parent).position == 'static'
+    ) {
+      parentLeft = -pageXOffset;
+      parentTop = -pageYOffset;
+    } else {
+      let rect = parent.getBoundingClientRect();
+      let parentScaleX = rect.width / parent.offsetWidth,
+        parentScaleY = rect.height / parent.offsetHeight;
+      parentLeft = rect.left - parent.scrollLeft * parentScaleX;
+      parentTop = rect.top - parent.scrollTop * parentScaleY;
+    }
+    this.element.style.left = (rect.left - parentLeft) / scaleX + 'px';
+    this.element.style.top = (rect.top - parentTop) / scaleY + 'px';
+    this.element.style.width = (rect.right - rect.left) / scaleX + 'px';
+    this.element.style.height = (rect.bottom - rect.top) / scaleY + 'px';
+  }
+
+  scheduleRemoval(timeout: number) {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => this.setCursor(null), timeout);
+  }
+
+  dragover(event: DragEvent) {
+    if (!this.editorView.editable) return;
+    let pos = this.editorView.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    });
+
+    let node = pos && pos.inside >= 0 &&
+      this.editorView.state.doc.nodeAt(pos.inside);
+    let disableDropCursor = node && node.type.spec.disableDropCursor;
+    let disabled = typeof disableDropCursor == 'function'
+      ? disableDropCursor(this.editorView, pos!, event)
+      : disableDropCursor;
+
+    if (pos && !disabled) {
+      let target = pos.pos;
+      if (this.editorView.dragging && this.editorView.dragging.slice) {
+        let point = dropPoint(
+          this.editorView.state.doc,
+          target,
+          this.editorView.dragging.slice,
+        );
+        if (point != null) target = point;
+      }
+      this.setCursor(target);
+      this.scheduleRemoval(5000);
+    }
+  }
+
+  dragend() {
+    this.scheduleRemoval(20);
+  }
+
+  drop() {
+    this.scheduleRemoval(20);
+  }
+
+  dragleave(event: DragEvent) {
+    if (!this.editorView.dom.contains((event as any).relatedTarget)) {
+      this.setCursor(null);
+    }
+  }
+}
+
+export class ExtensionDropcursor extends Extension {
+  name = 'dropcursor';
+
+  options = {
+    color: 'currentColor',
+    width: 1,
+    class: undefined,
+  };
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      dropCursor(this.options),
+    ];
+  }
+}

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(),
+    ];
+  }
+}