@kerebron/extension-codemirror 0.4.27 → 0.4.29

package/src/remote-selections.ts

@@ -0,0 +1,263 @@
+import * as cmView from '@codemirror/view';
+
+import * as cmState from '@codemirror/state';
+import * as dom from 'lib0/dom';
+import * as pair from 'lib0/pair';
+import * as math from 'lib0/math';
+
+import { RemoteSyncConfig, remoteSyncFacet } from './remote-sync.js';
+import type { CoreEditor } from '@kerebron/editor';
+
+import type { ExtensionRemoteSelection } from '@kerebron/extension-basic-editor/ExtensionRemoteSelection';
+
+export const yRemoteSelectionsTheme = cmView.EditorView.baseTheme({
+  '.cm-rSelection': {},
+  '.cm-rLineSelection': {
+    padding: 0,
+    margin: '0px 2px 0px 4px',
+  },
+  '.cm-rSelectionCaret': {
+    position: 'relative',
+    borderLeft: '1px solid black',
+    borderRight: '1px solid black',
+    marginLeft: '-1px',
+    marginRight: '-1px',
+    boxSizing: 'border-box',
+    display: 'inline',
+  },
+  '.cm-rSelectionCaretDot': {
+    borderRadius: '50%',
+    position: 'absolute',
+    width: '.4em',
+    height: '.4em',
+    top: '-.2em',
+    left: '-.2em',
+    backgroundColor: 'inherit',
+    transition: 'transform .3s ease-in-out',
+    boxSizing: 'border-box',
+  },
+  '.cm-rSelectionCaret:hover > .cm-rSelectionCaretDot': {
+    transformOrigin: 'bottom center',
+    transform: 'scale(0)',
+  },
+  '.cm-rSelectionInfo': {
+    position: 'absolute',
+    top: '-1.05em',
+    left: '-1px',
+    fontSize: '.75em',
+    fontFamily: 'serif',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    lineHeight: 'normal',
+    userSelect: 'none',
+    color: 'white',
+    paddingLeft: '2px',
+    paddingRight: '2px',
+    zIndex: 101,
+    transition: 'opacity .3s ease-in-out',
+    backgroundColor: 'inherit',
+    // these should be separate
+    opacity: 0,
+    transitionDelay: '0s',
+    whiteSpace: 'nowrap',
+  },
+  '.cm-rSelectionCaret:hover > .cm-rSelectionInfo': {
+    opacity: 1,
+    transitionDelay: '0s',
+  },
+});
+
+const yRemoteSelectionsAnnotation: cmState.AnnotationType<Array<number>> =
+  cmState.Annotation.define();
+
+class YRemoteCaretWidget extends cmView.WidgetType {
+  constructor(public color: string, public name: string) {
+    super();
+  }
+
+  toDOM(): HTMLElement {
+    return <HTMLElement> (dom.element('span', [
+      pair.create('class', 'kb-yjs__cursor kb-widget'),
+      pair.create('style', `border-color: ${this.color};`),
+    ], [
+      dom.text('\u2060'),
+      dom.element('div', [
+        pair.create('style', `background-color: ${this.color}`),
+      ], [
+        dom.text(this.name),
+      ]),
+      dom.text('\u2060'),
+    ]));
+  }
+
+  override eq(widget: YRemoteCaretWidget) {
+    return widget.color === this.color;
+  }
+
+  compare(widget: YRemoteCaretWidget) {
+    return widget.color === this.color;
+  }
+
+  override updateDOM() {
+    return false;
+  }
+
+  override get estimatedHeight() {
+    return -1;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+}
+
+export class YRemoteSelectionsPluginValue {
+  conf: RemoteSyncConfig;
+  private editor: CoreEditor;
+  decorations: cmView.DecorationSet;
+  private _remoteSelectionChange: () => void;
+
+  constructor(view: cmView.EditorView) {
+    this.conf = view.state.facet(remoteSyncFacet);
+    this.editor = this.conf.editor;
+    this.decorations = cmState.RangeSet.of([]);
+
+    this._remoteSelectionChange = () => {
+      view.dispatch({ annotations: [yRemoteSelectionsAnnotation.of([])] });
+    };
+    this.editor.addEventListener(
+      'remoteSelectionChange',
+      this._remoteSelectionChange,
+    );
+  }
+
+  destroy() {
+    this.editor.removeEventListener(
+      'remoteSelectionChange',
+      this._remoteSelectionChange,
+    );
+  }
+
+  update(update: cmView.ViewUpdate) {
+    const decorations: cmState.Range<cmView.Decoration>[] = [];
+
+    const extension: ExtensionRemoteSelection = this.editor.getExtension(
+      'remote-selection',
+    )!;
+
+    const remoteStates = extension.getRemoteStates();
+    for (const state of remoteStates) {
+      const clientId = state.clientId;
+
+      const cursor = state.cursor;
+      if (cursor?.anchor == null || cursor?.head == null) {
+        return;
+      }
+
+      const nodeAnchor = this.conf.getPmPos();
+      if ('undefined' !== typeof nodeAnchor) {
+        const nodeHead = nodeAnchor + this.conf.getNode().nodeSize;
+
+        if (
+          cursor.anchor >= nodeAnchor && cursor.anchor < nodeHead &&
+          cursor.head >= nodeAnchor && cursor.head < nodeHead
+        ) {
+          const anchor = { index: cursor.anchor - nodeAnchor };
+          const head = { index: cursor.head - nodeAnchor };
+
+          try {
+            const { color = '#ffa500', name = `User: ${clientId}` } =
+              state.user || {};
+            const colorLight = (state.user && state.user.colorLight) ||
+              color + '33';
+            const start = math.min(anchor.index, head.index);
+            const end = math.max(anchor.index, head.index);
+            const startLine = update.view.state.doc.lineAt(start);
+            const endLine = update.view.state.doc.lineAt(end);
+            if (startLine.number === endLine.number) {
+              // selected content in a single line.
+              decorations.push({
+                from: start,
+                to: end,
+                value: cmView.Decoration.mark({
+                  attributes: { style: `background-color: ${colorLight}` },
+                  class: 'cm-rSelection',
+                }),
+              });
+            } else {
+              // selected content in multiple lines
+              // first, render text-selection in the first line
+              decorations.push({
+                from: start,
+                to: startLine.from + startLine.length,
+                value: cmView.Decoration.mark({
+                  attributes: { style: `background-color: ${colorLight}` },
+                  class: 'cm-rSelection',
+                }),
+              });
+              // render text-selection in the last line
+              decorations.push({
+                from: endLine.from,
+                to: end,
+                value: cmView.Decoration.mark({
+                  attributes: { style: `background-color: ${colorLight}` },
+                  class: 'cm-rSelection',
+                }),
+              });
+              for (let i = startLine.number + 1; i < endLine.number; i++) {
+                const linePos = update.view.state.doc.line(i).from;
+                decorations.push({
+                  from: linePos,
+                  to: linePos,
+                  value: cmView.Decoration.line({
+                    attributes: {
+                      style: `background-color: ${colorLight}`,
+                      class: 'cm-rLineSelection',
+                    },
+                  }),
+                });
+              }
+            }
+            decorations.push({
+              from: head.index,
+              to: head.index,
+              value: cmView.Decoration.widget({
+                side: head.index - anchor.index > 0 ? -1 : 1, // the local cursor should be rendered outside the remote selection
+                block: false,
+                widget: new YRemoteCaretWidget(color, name),
+              }),
+            });
+          } catch (err) {
+            console.warn(err, `User: ${clientId}`);
+          }
+        }
+      }
+    }
+
+    this.decorations = cmView.Decoration.set(decorations, true);
+
+    const hasFocus = update.view.hasFocus &&
+      update.view.dom.ownerDocument.hasFocus();
+    const sel = hasFocus ? update.state.selection.main : null;
+    const nodePos = this.conf.getPmPos();
+    if (sel != null && 'undefined' !== typeof nodePos) {
+      const anchor = nodePos + sel.anchor;
+      const head = nodePos + sel.head;
+
+      const event = new CustomEvent('localPositionChanged', {
+        detail: {
+          anchor,
+          head,
+        },
+      });
+      this.editor.dispatchEvent(event);
+    }
+  }
+}
+
+export const yRemoteSelections = cmView.ViewPlugin.fromClass(
+  YRemoteSelectionsPluginValue,
+  {
+    decorations: (v) => v.decorations,
+  },
+);

package/src/remote-sync.ts

@@ -0,0 +1,23 @@
+import * as cmState from '@codemirror/state';
+
+import { Node } from 'prosemirror-model';
+import type { CoreEditor } from '@kerebron/editor';
+
+export class RemoteSyncConfig {
+  constructor(
+    public getNode: () => Node,
+    public getPmPos: () => number | undefined,
+    public editor: CoreEditor,
+  ) {
+  }
+}
+
+export const remoteSyncFacet: cmState.Facet<
+  RemoteSyncConfig,
+  RemoteSyncConfig
+> = cmState.Facet
+  .define({
+    combine(inputs) {
+      return inputs[inputs.length - 1];
+    },
+  });

package/src/types.ts

@@ -0,0 +1,55 @@
+import { EditorState, Transaction } from 'prosemirror-state';
+import { EditorView as CodemirrorView } from '@codemirror/view';
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { LanguageSupport } from '@codemirror/language';
+import { Extension as CmExtension } from '@codemirror/state';
+import { type Transport } from '@kerebron/extension-lsp';
+
+export type LanguageLoaders = Record<string, () => Promise<LanguageSupport>>;
+
+export type ThemeItem = { extension: CmExtension; name: string };
+
+export type CodeBlockSettings = {
+  createSelect: (
+    settings: CodeBlockSettings,
+    dom: HTMLElement,
+    node: Node,
+    view: EditorView,
+    getPos: () => number | undefined,
+  ) => () => void;
+  updateSelect: (
+    settings: CodeBlockSettings,
+    dom: HTMLElement,
+    node: Node,
+    view: EditorView,
+    getPos: () => number | undefined,
+    oldNode: Node,
+  ) => void;
+  createCopyButton: (
+    settings: CodeBlockSettings,
+    dom: HTMLElement,
+    node: Node,
+    view: EditorView,
+    codeMirrorView: CodemirrorView,
+    getPos: () => number | undefined,
+  ) => () => void;
+  stopEvent: (
+    e: Event,
+    node: Node,
+    getPos: () => number | undefined,
+    view: EditorView,
+    dom: HTMLElement,
+  ) => boolean;
+  languageLoaders?: LanguageLoaders;
+  languageNameMap?: Record<string, string>;
+  languageWhitelist?: string[];
+  undo?: (state: EditorState, dispatch: (tr: Transaction) => void) => void;
+  redo?: (state: EditorState, dispatch: (tr: Transaction) => void) => void;
+  theme?: CmExtension[];
+  themes: ThemeItem[];
+  readOnly?: boolean;
+  getCurrentTheme?: () => string;
+  codeBlockName?: string;
+  lspTransport?: Transport;
+};

package/src/utils.ts

@@ -0,0 +1,336 @@
+// From prosemirror guide
+import {
+  Command,
+  EditorState,
+  Selection,
+  TextSelection,
+  Transaction,
+} from 'prosemirror-state';
+import { EditorView as PMEditorView } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
+
+import { EditorView } from '@codemirror/view';
+import { Compartment } from '@codemirror/state';
+
+import type { CodeBlockSettings, ThemeItem } from './types.js';
+import type { CoreEditor } from '@kerebron/editor';
+import { LSPPlugin } from './lsp/plugin.js';
+
+export const CodeBlockNodeName = 'code_block';
+
+function nonEmpty<TValue>(value: TValue | null | undefined): value is TValue {
+  return value !== null && value !== undefined;
+}
+
+export function computeChange(oldVal: string, newVal: string) {
+  if (oldVal === newVal) return null;
+  let start = 0;
+  let oldEnd = oldVal.length;
+  let newEnd = newVal.length;
+  while (
+    start < oldEnd &&
+    oldVal.charCodeAt(start) === newVal.charCodeAt(start)
+  ) {
+    start += 1;
+  }
+  while (
+    oldEnd > start &&
+    newEnd > start &&
+    oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)
+  ) {
+    oldEnd -= 1;
+    newEnd -= 1;
+  }
+  return { from: start, to: oldEnd, text: newVal.slice(start, newEnd) };
+}
+
+export const asProseMirrorSelection = (
+  pmDoc: Node,
+  cmView: EditorView,
+  getPos: () => number | undefined,
+) => {
+  const offset = (typeof getPos === 'function' ? getPos() || 0 : 0) + 1;
+  const anchor = cmView.state.selection.main.from + offset;
+  const head = cmView.state.selection.main.to + offset;
+  return TextSelection.create(pmDoc, anchor, head);
+};
+
+export const forwardSelection = (
+  cmView: EditorView,
+  pmView: PMEditorView,
+  getPos: () => number | undefined,
+) => {
+  if (!cmView.hasFocus) return;
+  const selection = asProseMirrorSelection(pmView.state.doc, cmView, getPos);
+  if (!selection.eq(pmView.state.selection)) {
+    pmView.dispatch(pmView.state.tr.setSelection(selection));
+  }
+};
+
+export const valueChanged = (
+  textUpdate: string,
+  node: Node,
+  getPos: () => number | undefined,
+  view: PMEditorView,
+) => {
+  const change = computeChange(node.textContent, textUpdate);
+
+  if (change) {
+    const pos = getPos();
+    if ('undefined' !== typeof pos) {
+      const start = pos + 1;
+
+      let pmTr = view.state.tr;
+      pmTr = pmTr.replaceWith(
+        start + change.from,
+        start + change.to,
+        change.text ? view.state.schema.text(change.text) : [],
+      );
+      view.dispatch(pmTr);
+    }
+  }
+};
+
+export const maybeEscape = (
+  unit: 'char' | 'line',
+  dir: -1 | 1,
+  cm: EditorView,
+  view: PMEditorView,
+  getPos: () => number | undefined,
+) => {
+  const sel = cm.state.selection.main;
+  const line = cm.state.doc.lineAt(sel.from);
+  const lastLine = cm.state.doc.lines;
+  if (
+    sel.to !== sel.from ||
+    line.number !== (dir < 0 ? 1 : lastLine) ||
+    (unit === 'char' && sel.from !== (dir < 0 ? 0 : line.to)) ||
+    typeof getPos !== 'function'
+  ) {
+    return false;
+  }
+  view.focus();
+  const pos = getPos();
+  if (!pos) {
+    return false;
+  }
+  const node = view.state.doc.nodeAt(pos);
+  if (!node) return false;
+  const targetPos = pos + (dir < 0 ? 0 : node.nodeSize);
+  const selection = Selection.near(view.state.doc.resolve(targetPos), dir);
+  view.dispatch(view.state.tr.setSelection(selection).scrollIntoView());
+  view.focus();
+  return true;
+};
+
+export const backspaceHandler = (
+  pmView: PMEditorView,
+  view: EditorView,
+  editor: CoreEditor,
+) => {
+  const { selection } = view.state;
+  if (selection.main.empty && selection.main.from === 0) {
+    editor.commandFactories.setBlockType(pmView.state.schema.nodes.paragraph)(
+      pmView.state,
+      pmView.dispatch,
+    );
+    setTimeout(() => pmView.focus(), 20);
+    return true;
+  }
+  return false;
+};
+
+export const setMode = async (
+  lang: string,
+  cmView: EditorView,
+  settings: CodeBlockSettings,
+  languageConf: Compartment,
+) => {
+  const support = await settings.languageLoaders?.[lang]?.();
+  if (support) {
+    cmView.dispatch({
+      effects: languageConf.reconfigure(support),
+    });
+  }
+
+  const lspPlugin = LSPPlugin.get(cmView);
+  if (lspPlugin) {
+    lspPlugin.setLang(lang);
+  }
+};
+
+const isTheme = (theme: Array<ThemeItem | undefined>): theme is ThemeItem[] => {
+  if (!Array.isArray(theme)) {
+    return false;
+  }
+  return theme.every(
+    (item) =>
+      item !== undefined &&
+      typeof item.extension === 'object' && // or whatever type Extension is
+      typeof item.name === 'string',
+  );
+};
+
+export const setTheme = async (
+  cmView: EditorView,
+  themeConfig: Compartment,
+  theme: Array<ThemeItem | undefined>,
+) => {
+  if (isTheme(theme)) {
+    cmView.dispatch({
+      effects: themeConfig.reconfigure(theme),
+    });
+  }
+};
+
+const arrowHandler: (dir: 'left' | 'right' | 'up' | 'down') => Command =
+  (dir) =>
+  (
+    state: EditorState,
+    dispatch: ((tr: Transaction) => void) | undefined,
+    view?: PMEditorView,
+  ): boolean => {
+    if (state.selection.empty && view?.endOfTextblock(dir)) {
+      const side = dir === 'left' || dir === 'up' ? -1 : 1;
+      const { $head } = state.selection;
+      const nextPos = Selection.near(
+        state.doc.resolve(side > 0 ? $head.after() : $head.before()),
+        side,
+      );
+      if (
+        nextPos.$head &&
+        nextPos.$head.parent.type.name === CodeBlockNodeName
+      ) {
+        dispatch?.(state.tr.setSelection(nextPos));
+        return true;
+      }
+    }
+    return false;
+  };
+
+export const createCodeBlock = (
+  state: EditorState,
+  dispatch: ((tr: Transaction) => void) | undefined,
+  attributes: object,
+) => {
+  const { $from, $to } = state.selection;
+  //if we are in a CodeBlock node we do nothing
+  const parentNode = $from.node($from.depth);
+  if (parentNode && parentNode.type.name === CodeBlockNodeName) {
+    return false;
+  }
+  //if from and to in the same paragraph
+  if (
+    $from.parentOffset === $to.parentOffset &&
+    $from.parent.type.name === 'paragraph'
+  ) {
+    const text = $from.parent.textContent;
+    const tr = state.tr;
+    const newNode = state.schema.nodes[CodeBlockNodeName].createAndFill(
+      attributes,
+      text ? [state.schema.text($from.parent.textContent)] : [],
+    );
+    if (newNode && dispatch) {
+      const pos = $from.before($from.depth);
+      tr.delete(pos, pos + $from.parent.nodeSize - 1);
+      tr.insert(pos, newNode);
+      tr.setSelection(TextSelection.create(tr.doc, $from.pos));
+      dispatch(tr);
+    }
+    return true;
+  }
+
+  if (dispatch) {
+    const tr = state.tr;
+
+    const slice = state.doc.slice(
+      $from.before($from.depth),
+      $to.after($to.depth),
+      true,
+    );
+    const content = slice.content.textBetween(0, slice.content.size, '\n');
+    const newNode = state.schema.nodes[CodeBlockNodeName].createAndFill(
+      attributes,
+      state.schema.text(content),
+    );
+
+    if (newNode) {
+      tr.delete(
+        $from.before(slice.openStart + 1),
+        $to.after(slice.openEnd + 1),
+      );
+      tr.insert($from.before(slice.openStart + 1), newNode);
+      tr.setSelection(
+        TextSelection.create(
+          tr.doc,
+          $from.pos,
+          $from.pos + newNode.nodeSize - 2,
+        ),
+      );
+      dispatch(tr);
+    }
+  }
+  return true;
+};
+
+export const removeCodeBlock = (
+  state: EditorState,
+  dispatch: ((tr: Transaction) => void) | undefined,
+) => {
+  const { $from } = state.selection;
+  const parentNode = $from.node($from.depth);
+  if (parentNode && parentNode.type.name === CodeBlockNodeName) {
+    const children: Node[] = [];
+    parentNode.forEach((child) => {
+      children.push(child);
+    });
+    const childrenNodes = children
+      .map((child) => {
+        return state.schema.nodes.paragraph.createAndFill({}, [child]);
+      })
+      .filter(nonEmpty);
+    const tr = state.tr;
+    const pos = $from.before($from.depth);
+    tr.delete(pos, pos + parentNode.nodeSize - 1);
+    tr.insert(pos, childrenNodes);
+    tr.setSelection(TextSelection.create(tr.doc, $from.pos - 1));
+    if (dispatch) {
+      dispatch(tr.scrollIntoView());
+    }
+  }
+  return false;
+};
+
+export const toggleCodeBlock = (
+  state: EditorState,
+  dispatch: ((tr: Transaction) => void) | undefined,
+  attributes: object,
+) => {
+  const { $from } = state.selection;
+  if ($from.pos === 0) {
+    return false;
+  }
+  const parentNode = $from.node($from.depth);
+
+  if (parentNode && parentNode.type.name === CodeBlockNodeName) {
+    return removeCodeBlock(state, dispatch);
+  } else {
+    return createCodeBlock(state, dispatch, attributes);
+  }
+};
+
+export const codeBlockArrowHandlers = {
+  ArrowLeft: arrowHandler('left'),
+  ArrowRight: arrowHandler('right'),
+  ArrowUp: arrowHandler('up'),
+  ArrowDown: arrowHandler('down'),
+};
+
+export const codeBlockToggleShortcut = {
+  'Mod-Alt-c': toggleCodeBlock as Command,
+};
+
+export const codeBlockKeymap = {
+  ...codeBlockToggleShortcut,
+  ...codeBlockArrowHandlers,
+};