@kerebron/extension-basic-editor 0.4.28 → 0.4.29

package/src/NodeTaskItem.ts

@@ -0,0 +1,190 @@
+import { Node as PmNode, NodeSpec, type NodeType } from 'prosemirror-model';
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+import { wrappingInputRule } from '@kerebron/editor/plugins/input-rules';
+import {
+  liftListItem,
+  sinkListItem,
+  splitListItem,
+} from './NodeListItem.js';
+import { NodeViewConstructor } from '@kerebron/editor/DummyEditorView';
+import { EditorView } from 'prosemirror-view';
+import { Transaction } from 'prosemirror-state';
+
+/**
+ * Matches a task item to a - [ ] on input.
+ */
+export const inputRegex = /^\s*(\[([( |x])?\])\s$/;
+
+export interface TaskItemOptions {
+  onReadOnlyChecked?: (node: PmNode, checked: boolean) => boolean;
+  nested: boolean;
+}
+
+export class NodeTaskItem extends Node {
+  override name = 'task_item';
+  requires = ['doc'];
+
+  public constructor(protected override config: Partial<TaskItemOptions> = {}) {
+    super(config);
+  }
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      attrs: {
+        checked: {
+          default: false,
+        },
+      },
+      content: this.config.nested ? 'paragraph block*' : 'paragraph+',
+      parseDOM: [{
+        tag: 'li[data-checked]',
+        getAttrs(node) {
+          return {
+            checked: node.getAttribute('data-checked') === 'true',
+          };
+        },
+      }],
+      defining: true,
+      toDOM(node) {
+        return [
+          'li',
+          {
+            'data-type': this.name,
+            'data-checked': node.attrs.checked,
+          },
+          [
+            'label',
+            [
+              'input',
+              {
+                type: 'checkbox',
+                checked: node.attrs.checked ? 'checked' : null,
+              },
+            ],
+            ['span'],
+          ],
+          ['div', 0],
+        ];
+      },
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {
+      'splitListItem': () => splitListItem(type),
+      'liftListItem': () => liftListItem(type),
+      'sinkListItem': () => sinkListItem(type),
+    };
+  }
+
+  override getNodeView(editor: CoreEditor): NodeViewConstructor {
+    return (node: PmNode, view: EditorView, getPos) => {
+      const listItem = document.createElement('li');
+      const checkboxWrapper = document.createElement('label');
+      const checkboxStyler = document.createElement('span');
+      const checkbox = document.createElement('input');
+      const content = document.createElement('div');
+
+      // Style for inline checkbox and text
+      listItem.style.display = 'flex';
+      listItem.style.alignItems = 'flex-start';
+      listItem.style.gap = '0.5em';
+      checkboxWrapper.style.flexShrink = '0';
+      checkboxWrapper.style.marginTop = '0.25em';
+      content.style.flex = '1';
+
+      checkboxWrapper.contentEditable = 'false';
+      checkbox.type = 'checkbox';
+      checkbox.addEventListener('mousedown', (event) => event.preventDefault());
+      checkbox.addEventListener('change', (event) => {
+        const isEditable = true; // TODO editor.isEditable
+
+        // if the editor isn’t editable and we don't have a handler for
+        // readonly checks we have to undo the latest change
+        if (!isEditable && !this.config.onReadOnlyChecked) {
+          checkbox.checked = !checkbox.checked;
+
+          return;
+        }
+
+        const { checked } = event.target as any;
+
+        if (isEditable && typeof getPos === 'function') {
+          editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .command(({ tr }: { tr: Transaction }) => {
+              const position = getPos();
+
+              if (typeof position !== 'number') {
+                return false;
+              }
+              const currentNode = tr.doc.nodeAt(position);
+
+              tr.setNodeMarkup(position, undefined, {
+                ...currentNode?.attrs,
+                checked,
+              });
+
+              return true;
+            })
+            .run();
+        }
+        if (!isEditable && this.config.onReadOnlyChecked) {
+          // Reset state if onReadOnlyChecked returns false
+          if (!this.config.onReadOnlyChecked(node, checked)) {
+            checkbox.checked = !checkbox.checked;
+          }
+        }
+      });
+
+      listItem.dataset.checked = node.attrs.checked;
+      checkbox.checked = node.attrs.checked;
+
+      checkboxWrapper.append(checkbox, checkboxStyler);
+      listItem.append(checkboxWrapper, content);
+
+      return {
+        dom: listItem,
+        contentDOM: content,
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== this.type) {
+            return false;
+          }
+
+          listItem.dataset.checked = updatedNode.attrs.checked;
+          checkbox.checked = updatedNode.attrs.checked;
+
+          return true;
+        },
+      };
+    };
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    return {
+      'Enter': 'splitListItem',
+      'Tab': 'sinkListItem',
+      'Shift-Tab': 'liftListItem',
+    };
+  }
+
+  override getInputRules(type: NodeType) {
+    return [
+      wrappingInputRule(
+        inputRegex,
+        type,
+        (match) => ({
+          checked: match[match.length - 1] === 'x',
+        }),
+      ),
+    ];
+  }
+}

package/src/NodeTaskList.ts

@@ -0,0 +1,38 @@
+import type { NodeSpec, NodeType } from 'prosemirror-model';
+
+import { type CoreEditor, Node } from '@kerebron/editor';
+import {
+  type CommandFactories,
+  type CommandShortcuts,
+} from '@kerebron/editor/commands';
+
+export class NodeTaskList extends Node {
+  override name = 'task_list';
+  requires = ['doc'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      content: 'task_item+',
+      group: 'block',
+      parseDOM: [{ tag: `ul[data-type="${this.name}"]` }],
+      toDOM() {
+        return ['ul', { 'data-type': this.name }, 0];
+      },
+    };
+  }
+
+  override getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {
+      'toggleTaskList': () => editor.commandFactories.wrapInList(type),
+    };
+  }
+
+  override getKeyboardShortcuts(): Partial<CommandShortcuts> {
+    return {
+      'Shift-Ctrl-9': 'toggleTaskList',
+    };
+  }
+}

package/src/NodeText.ts

@@ -0,0 +1,12 @@
+import { NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+
+export class NodeText extends Node {
+  override name = 'text';
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      group: 'inline',
+    };
+  }
+}

package/src/NodeVideo.ts

@@ -0,0 +1,44 @@
+import { type NodeSpec } from 'prosemirror-model';
+import { Node } from '@kerebron/editor';
+
+export class NodeVideo extends Node {
+  override name = 'video';
+  requires = ['doc'];
+
+  override getNodeSpec(): NodeSpec {
+    return {
+      attrs: {
+        src: {},
+        title: { default: null },
+        controls: { default: true },
+        width: { default: null },
+        height: { default: null },
+      },
+      group: 'block',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'video[src]',
+          getAttrs(dom: HTMLElement) {
+            return {
+              src: dom.getAttribute('src'),
+              title: dom.getAttribute('title'),
+              controls: dom.hasAttribute('controls'),
+              width: dom.getAttribute('width'),
+              height: dom.getAttribute('height'),
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        const { src, title, controls, width, height } = node.attrs;
+        const attrs: any = { src };
+        if (title) attrs.title = title;
+        if (controls) attrs.controls = ''; // Boolean attribute - just needs to be present
+        if (width) attrs.width = width;
+        if (height) attrs.height = height;
+        return ['video', attrs];
+      },
+    };
+  }
+}

package/src/remote-selection/ExtensionRemoteSelection.ts

@@ -0,0 +1,45 @@
+import { Plugin } from 'prosemirror-state';
+import { type CoreEditor, Extension } from '@kerebron/editor';
+
+import { remoteSelectionPlugin } from './remoteSelectionPlugin.js';
+
+type Color = string;
+
+export interface SelectionState {
+  clientId: number;
+  user: {
+    name: string;
+    color: Color;
+    colorLight: Color;
+  };
+  cursor?: {
+    anchor: number;
+    head: number;
+  };
+}
+
+export { remoteSelectionPluginKey } from './remoteSelectionPlugin.js';
+
+export class ExtensionRemoteSelection extends Extension {
+  override name = 'remote-selection';
+
+  private remoteStates: SelectionState[] = [];
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      remoteSelectionPlugin(this, this.editor),
+    ];
+  }
+
+  getRemoteStates(): SelectionState[] {
+    return this.remoteStates;
+  }
+
+  setRemoteStates(states: SelectionState[]) {
+    this.remoteStates = states;
+    const event = new CustomEvent('remoteSelectionChange', {
+      detail: {},
+    });
+    this.editor.dispatchEvent(event);
+  }
+}

package/src/remote-selection/remoteSelectionPlugin.ts

@@ -0,0 +1,157 @@
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { type DecorationAttrs } from 'prosemirror-view';
+
+import type { CoreEditor } from '@kerebron/editor';
+
+import type { ExtensionRemoteSelection } from './ExtensionRemoteSelection.js';
+
+export const remoteSelectionPluginKey = new PluginKey('remote-selection');
+
+/**
+ * Default generator for a cursor element
+ */
+export const defaultCursorBuilder = (user: any): HTMLElement => {
+  const cursor = document.createElement('span');
+  cursor.classList.add('kb-yjs__cursor');
+  cursor.setAttribute('style', `border-color: ${user.color};`);
+  const userDiv = document.createElement('div');
+  userDiv.setAttribute('style', `background-color: ${user.color}`);
+  userDiv.insertBefore(document.createTextNode(user.name), null);
+  const nonbreakingSpace1 = document.createTextNode('\u2060');
+  const nonbreakingSpace2 = document.createTextNode('\u2060');
+  cursor.insertBefore(nonbreakingSpace1, null);
+  cursor.insertBefore(userDiv, null);
+  cursor.insertBefore(nonbreakingSpace2, null);
+  return cursor;
+};
+
+/**
+ * Default generator for the selection attributes
+ */
+export const defaultSelectionBuilder = (user: any): DecorationAttrs => {
+  return {
+    style: `background-color: ${user.color}70`,
+    class: 'kb-yjs__selection',
+  };
+};
+
+const rxValidColor = /^#[0-9a-fA-F]{6}$/;
+
+export const createDecorations = (
+  state: any,
+  extension: ExtensionRemoteSelection,
+  createCursor: (
+    user: { name: string; color: string },
+    clientId: number,
+  ) => Element,
+  createSelection: (
+    user: { name: string; color: string },
+    clientId: number,
+  ) => DecorationAttrs,
+): any => {
+  const decorations: Decoration[] = [];
+
+  const remoteStates = extension.getRemoteStates();
+  if (remoteStates.length === 0) {
+    return DecorationSet.create(state.doc, []);
+  }
+
+  for (const remoteState of remoteStates) {
+    if (remoteState.cursor != null) {
+      const user = remoteState.user || {};
+      if (user.color == null) {
+        user.color = '#ffa500';
+      } else if (!rxValidColor.test(user.color)) {
+        // We only support 6-digit RGB colors in y-prosemirror
+        console.warn('A user uses an unsupported color format', user);
+      }
+      if (user.name == null) {
+        user.name = `User: ${remoteState.clientId}`;
+      }
+
+      const cursor = remoteState.cursor;
+      let anchor = cursor.anchor || null;
+      let head = cursor.head || null;
+
+      if (anchor !== null && head !== null) {
+        const maxsize = Math.max(state.doc.content.size - 1, 0);
+        anchor = Math.min(anchor, maxsize);
+        head = Math.min(head, maxsize);
+        decorations.push(
+          Decoration.widget(
+            head,
+            () => createCursor(user, remoteState.clientId),
+            {
+              key: remoteState.clientId + '',
+              side: 10,
+            },
+          ),
+        );
+        const from = Math.min(anchor, head);
+        const to = Math.max(anchor, head);
+        decorations.push(
+          Decoration.inline(
+            from,
+            to,
+            createSelection(user, remoteState.clientId),
+            {
+              inclusiveEnd: true,
+              inclusiveStart: false,
+            },
+          ),
+        );
+      }
+    }
+  }
+  return DecorationSet.create(state.doc, decorations);
+};
+
+export const remoteSelectionPlugin = (
+  extension: ExtensionRemoteSelection,
+  editor: CoreEditor,
+  {
+    cursorBuilder = defaultCursorBuilder,
+    selectionBuilder = defaultSelectionBuilder,
+  }: {
+    cursorBuilder?: (user: any, clientId: number) => HTMLElement;
+    selectionBuilder?: (user: any, clientId: number) => DecorationAttrs;
+  } = {},
+) => {
+  return new Plugin({
+    key: remoteSelectionPluginKey,
+    state: {
+      init(_, state) {
+        return createDecorations(
+          state,
+          extension,
+          cursorBuilder,
+          selectionBuilder,
+        );
+      },
+      apply(tr, prevState, _oldState, newState) {
+        const remoteCursorState = tr.getMeta(remoteSelectionPluginKey);
+        // TODO validate: isChangeOrigin
+        // const state = remoteSelectionPluginKey.getState(newState);
+
+        if (
+          (remoteCursorState?.isChangeOrigin) ||
+          (remoteCursorState?.remotePositionUpdated)
+        ) {
+          return createDecorations(
+            newState,
+            extension,
+            cursorBuilder,
+            selectionBuilder,
+          );
+        }
+        return prevState.map(tr.mapping, tr.doc);
+      },
+    },
+    props: {
+      decorations: (state) => {
+        return remoteSelectionPluginKey.getState(state);
+      },
+    },
+  });
+};