@kerebron/editor 0.4.27 → 0.4.29

package/src/Extension.ts

@@ -0,0 +1,63 @@
+import type { Plugin } from 'prosemirror-state';
+import type { Node, Schema, SchemaSpec } from 'prosemirror-model';
+
+import { type CoreEditor } from './CoreEditor.js';
+import type { InputRule } from './plugins/input-rules/InputRulesPlugin.js';
+import { CommandFactories, CommandShortcuts } from './commands/mod.js';
+
+export interface ExtensionConfig {
+  // @ts-ignore - this is a dynamic key
+  [key: string]: any;
+
+  requires: Array<Extension | string>;
+}
+
+export interface Converter {
+  fromDoc(document: Node): Promise<Uint8Array>;
+  toDoc(content: Uint8Array): Promise<Node>;
+}
+
+export abstract class Extension {
+  readonly type = 'extension';
+  abstract name: string;
+  protected editor!: CoreEditor;
+
+  readonly conflicts?: Array<string>;
+
+  public constructor(protected config: Partial<ExtensionConfig> = {}) {
+  }
+
+  setEditor(editor: CoreEditor) {
+    this.editor = editor;
+  }
+
+  getEditor() {
+    return this.editor;
+  }
+
+  created() {
+  }
+
+  getInputRules(): InputRule[] {
+    return [];
+  }
+
+  getProseMirrorPlugins(): Plugin[] {
+    return [];
+  }
+
+  getCommandFactories(editor: CoreEditor): Partial<CommandFactories> {
+    return {};
+  }
+
+  getKeyboardShortcuts(editor: CoreEditor): Partial<CommandShortcuts> {
+    return {};
+  }
+
+  getConverters(editor: CoreEditor, schema: Schema): Record<string, Converter> {
+    return {};
+  }
+
+  setupSpec(spec: SchemaSpec) {
+  }
+}

package/src/ExtensionManager.ts

@@ -0,0 +1,328 @@
+import { MarkSpec, NodeSpec, Schema } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { NodeViewConstructor } from 'prosemirror-view';
+
+import { Converter, Extension } from './Extension.js';
+import { AnyExtension, AnyExtensionOrReq } from './types.js';
+import { CoreEditor } from './CoreEditor.js';
+import { Mark } from './Mark.js';
+import { Node } from './Node.js';
+import {
+  InputRule,
+  InputRulesPlugin,
+} from './plugins/input-rules/InputRulesPlugin.js';
+import { KeymapPlugin } from './plugins/keymap/keymap.js';
+import { CommandShortcuts, firstCommand } from './commands/mod.js';
+import { type Command } from 'prosemirror-state';
+import { addAttributesToSchema } from './utilities/getHtmlAttributes.js';
+import { type CommandManager } from './commands/CommandManager.js';
+import { TrackSelecionPlugin } from './plugins/TrackSelecionPlugin.js';
+
+export function findDuplicates(items: any[]): any[] {
+  const filtered = items.filter((el, index) => items.indexOf(el) !== index);
+
+  return Array.from(new Set(filtered));
+}
+
+export function splitExtensions(extensions: Iterable<AnyExtension>) {
+  const baseExtensions = Array.from(extensions).filter((extension) =>
+    extension.type === 'extension'
+  ) as Extension[];
+  const nodeExtensions = Array.from(extensions).filter((extension) =>
+    extension.type === 'node'
+  ) as Node[];
+  const markExtensions = Array.from(extensions).filter((extension) =>
+    extension.type === 'mark'
+  ) as Mark[];
+
+  return {
+    baseExtensions,
+    nodeExtensions,
+    markExtensions,
+  };
+}
+
+export class ExtensionManager {
+  public readonly schema: Schema;
+
+  public readonly extensions: Set<AnyExtension> = new Set();
+  readonly plugins: Plugin[] = [];
+  readonly nodeViews: Record<string, NodeViewConstructor> = {};
+
+  public converters: Record<string, Converter> = {};
+
+  private debug = true;
+
+  constructor(
+    extensions: AnyExtensionOrReq[],
+    private editor: CoreEditor,
+    private commandManager: CommandManager,
+  ) {
+    this.setupExtensions(new Set(extensions));
+    this.schema = this.getSchemaByResolvedExtensions(editor);
+
+    const event = new CustomEvent('schema:ready', {
+      detail: {
+        editor,
+        schema: this.schema,
+      },
+    });
+    editor.dispatchEvent(event);
+  }
+
+  getExtension<T extends Extension>(name: string): T | undefined {
+    const { nodeExtensions, markExtensions, baseExtensions } = splitExtensions(
+      this.extensions,
+    );
+
+    for (const extension of baseExtensions) {
+      if (extension.name === name) {
+        return <T> extension;
+      }
+    }
+  }
+
+  private initPlugins() {
+    const inputRules: InputRule[] = [];
+    const keyBindings: Map<string, Command> = new Map();
+
+    const mergeShortcuts = (
+      toInsert: Partial<CommandShortcuts>,
+      extName: string,
+    ) => {
+      for (const key in toInsert) {
+        if (!toInsert[key]) {
+          continue;
+        }
+
+        const commandFactory =
+          this.commandManager.commandFactories[toInsert[key]];
+        if (!commandFactory) {
+          console.warn(`No command constructor: ${toInsert[key]}`);
+          continue;
+        }
+        const command = commandFactory();
+
+        const keyBinding = keyBindings.get(key);
+        if (keyBinding) {
+          keyBindings.set(key, firstCommand(command, keyBinding));
+        } else {
+          keyBindings.set(key, command);
+        }
+      }
+    };
+
+    let converters = {};
+
+    for (const extension of this.extensions) {
+      extension.setEditor(this.editor);
+
+      if (extension.type === 'node') {
+        const nodeType = this.schema.nodes[extension.name];
+        inputRules.push(...extension.getInputRules(nodeType));
+        this.plugins.push(
+          ...extension.getProseMirrorPlugins(),
+        );
+        this.commandManager.mergeCommandFactories(
+          extension.getCommandFactories(this.editor, nodeType),
+          extension.name,
+        );
+        mergeShortcuts(
+          extension.getKeyboardShortcuts(this.editor),
+          extension.name,
+        );
+        converters = {
+          ...converters,
+          ...extension.getConverters(this.editor, this.schema),
+        };
+        const nodeView = extension.getNodeView(this.editor);
+        if (nodeView) {
+          this.nodeViews[extension.name] = nodeView;
+        }
+      }
+      if (extension.type === 'mark') {
+        const markType = this.schema.marks[extension.name];
+        inputRules.push(...extension.getInputRules(markType));
+        this.commandManager.mergeCommandFactories(
+          extension.getCommandFactories(this.editor, markType),
+          extension.name,
+        );
+        mergeShortcuts(
+          extension.getKeyboardShortcuts(this.editor),
+          extension.name,
+        );
+      }
+      if (extension.type === 'extension') {
+        this.plugins.push(
+          ...extension.getProseMirrorPlugins(),
+        );
+        this.commandManager.mergeCommandFactories(
+          extension.getCommandFactories(this.editor),
+          extension.name,
+        );
+        mergeShortcuts(
+          extension.getKeyboardShortcuts(this.editor),
+          extension.name,
+        );
+        converters = {
+          ...converters,
+          ...extension.getConverters(this.editor, this.schema),
+        };
+      }
+    }
+
+    if (this.debug) {
+      for (const key in keyBindings) {
+        const keyBinding = keyBindings.get(key);
+        if (!keyBinding) {
+          continue;
+        }
+
+        const wrapperCommand: Command = (state, dispatch, view) => {
+          console.debug(`Key: ${key}`);
+          return true;
+        };
+        keyBindings.set(
+          key,
+          firstCommand(wrapperCommand, keyBinding),
+        );
+      }
+    }
+
+    this.converters = converters;
+
+    this.plugins.push(new InputRulesPlugin(inputRules));
+    this.plugins.push(new KeymapPlugin(Object.fromEntries(keyBindings)));
+    this.plugins.push(new TrackSelecionPlugin(this.editor));
+  }
+
+  private setupExtensions(extensions: Set<AnyExtensionOrReq>) {
+    const allExtensions = new Map<string, AnyExtensionOrReq>();
+
+    const createMap = (extensions: Set<AnyExtensionOrReq>) => {
+      for (const extension of extensions) {
+        if ('name' in extension) {
+          allExtensions.set(extension.name, extension);
+        }
+        if ('requires' in extension) {
+          const childExtensions = Array.from(extension.requires).filter((e) =>
+            typeof e !== 'string'
+          );
+          createMap(new Set(childExtensions));
+        }
+      }
+    };
+
+    createMap(extensions);
+
+    const initialized: Set<string> = new Set();
+
+    const initializeExtension = (extension: AnyExtension) => {
+      console.info(`Initialize ${extension.type} ${extension.name}`);
+      this.extensions.add(extension);
+    };
+
+    function recursiveInitializeExtension(extension: AnyExtensionOrReq) {
+      if ('name' in extension && initialized.has(extension.name)) {
+        return;
+      }
+
+      if ('requires' in extension) {
+        const requires = extension.requires || [];
+        const requireNames = requires.map((
+          e: string | AnyExtensionOrReq,
+        ): string => typeof e === 'string' ? e : ('name' in e ? e.name : ''));
+
+        for (const require of requireNames) {
+          if (!initialized.has(require)) {
+            const requiredExtension = allExtensions.get(require);
+            if (!requiredExtension) {
+              throw new Error(
+                `Required extension for (${
+                  'name' in extension ? extension.name : extension
+                }) not found: ${require}`,
+              );
+            }
+            recursiveInitializeExtension(requiredExtension);
+          }
+        }
+      }
+
+      if ('name' in extension) {
+        initializeExtension(extension);
+
+        initialized.add(extension.name);
+        allExtensions.delete(extension.name);
+      }
+    }
+
+    for (const extension of allExtensions.values()) {
+      recursiveInitializeExtension(extension);
+    }
+
+    if (allExtensions.size > 0) {
+      throw new Error(
+        'Not all extensions initialized: ' +
+          Array.from(allExtensions.keys()).join(', '),
+      );
+    }
+  }
+
+  getSchemaByResolvedExtensions(editor: CoreEditor): Schema {
+    const { nodeExtensions, markExtensions, baseExtensions } = splitExtensions(
+      this.extensions,
+    );
+
+    for (const extension of baseExtensions) {
+      if (Array.isArray(extension.conflicts)) {
+        for (const name of extension.conflicts) {
+          if (this.getExtension(name)) {
+            throw new Error(`Extension conflict: ${extension.name} vs ${name}`);
+          }
+        }
+      }
+    }
+
+    const nodes: { [name: string]: NodeSpec } = {};
+    for (const extension of nodeExtensions) {
+      nodes[extension.name] = extension.getNodeSpec();
+      addAttributesToSchema(nodes[extension.name], extension);
+    }
+
+    const marks: { [name: string]: MarkSpec } = {};
+    for (const extension of markExtensions) {
+      marks[extension.name] = extension.getMarkSpec();
+      addAttributesToSchema(marks[extension.name], extension);
+    }
+
+    const spec = {
+      topNode: this.editor.config.topNode || 'doc',
+      nodes,
+      marks,
+    };
+
+    for (const extension of baseExtensions) {
+      if ('setupSpec' in baseExtensions) {
+        extension.setupSpec(spec);
+      }
+    }
+
+    const event = new CustomEvent('schema:spec', {
+      detail: {
+        editor,
+        spec,
+      },
+    });
+    editor.dispatchEvent(event);
+
+    return new Schema(spec);
+  }
+
+  created() {
+    this.initPlugins();
+
+    for (const extension of this.extensions) {
+      extension.created();
+    }
+  }
+}

package/src/Mark.ts

@@ -0,0 +1,47 @@
+import type { MarkSpec, MarkType } from 'prosemirror-model';
+
+import type { InputRule } from './plugins/input-rules/InputRulesPlugin.js';
+import type { CoreEditor } from './CoreEditor.js';
+import type { CommandFactories, CommandShortcuts } from './commands/mod.js';
+import { Attribute } from './types.js';
+
+export interface MarkConfig {
+  // @ts-ignore - this is a dynamic key
+  [key: string]: any;
+}
+
+export abstract class Mark {
+  readonly type = 'mark';
+  name: string = 'node';
+  protected editor!: CoreEditor;
+
+  public readonly attributes: Record<string, Attribute<any>> = {};
+
+  public constructor(protected config: Partial<MarkConfig> = {}) {}
+
+  setEditor(editor: CoreEditor) {
+    this.editor = editor;
+  }
+
+  created() {
+  }
+
+  getMarkSpec(): MarkSpec {
+    throw new Error('MarkSpec not defined: ' + this.name);
+  }
+
+  getInputRules(type: MarkType): InputRule[] {
+    return [];
+  }
+
+  getCommandFactories(
+    editor: CoreEditor,
+    type: MarkType,
+  ): Partial<CommandFactories> {
+    return {};
+  }
+
+  getKeyboardShortcuts(editor: CoreEditor): Partial<CommandShortcuts> {
+    return {};
+  }
+}

package/src/Node.ts

@@ -0,0 +1,66 @@
+import type { NodeSpec, NodeType, Schema } from 'prosemirror-model';
+import type { NodeViewConstructor } from 'prosemirror-view';
+import type { Plugin } from 'prosemirror-state';
+
+import type { InputRule } from './plugins/input-rules/InputRulesPlugin.js';
+import type { CoreEditor } from './CoreEditor.js';
+import type { Command, CommandShortcuts } from './commands/mod.js';
+import type { Converter } from './Extension.js';
+import { Attribute } from './types.js';
+
+export interface NodeConfig {
+  // @ts-ignore - this is a dynamic key
+  [key: string]: any;
+}
+
+export interface CommandFactories {
+  [key: string]: () => Command;
+}
+
+export abstract class Node {
+  readonly type = 'node';
+  name: string = 'node';
+  protected editor!: CoreEditor;
+
+  public readonly attributes: Record<string, Attribute<any>> = {};
+
+  public constructor(protected config: Partial<NodeConfig> = {}) {}
+
+  setEditor(editor: CoreEditor) {
+    this.editor = editor;
+  }
+
+  created() {
+  }
+
+  getNodeSpec(): NodeSpec {
+    throw new Error('NodeSpec not defined: ' + this.name);
+  }
+
+  getInputRules(type: NodeType): InputRule[] {
+    return [];
+  }
+
+  getProseMirrorPlugins(): Plugin[] {
+    return [];
+  }
+
+  getCommandFactories(
+    editor: CoreEditor,
+    type: NodeType,
+  ): Partial<CommandFactories> {
+    return {};
+  }
+
+  getKeyboardShortcuts(editor: CoreEditor): Partial<CommandShortcuts> {
+    return {};
+  }
+
+  getNodeView(editor: CoreEditor): NodeViewConstructor | undefined {
+    return undefined;
+  }
+
+  getConverters(editor: CoreEditor, schema: Schema): Record<string, Converter> {
+    return {};
+  }
+}

package/src/commands/CommandManager.ts

@@ -0,0 +1,145 @@
+import { EditorView } from 'prosemirror-view';
+import type { EditorState, Transaction } from 'prosemirror-state';
+
+import type { CoreEditor } from '../CoreEditor.js';
+import { createChainableState } from './createChainableState.js';
+import type {
+  ChainedCommands,
+  Command,
+  CommandFactories,
+  CommandFactory,
+} from './types.js';
+
+import { baseCommandFactories } from './baseCommandFactories.js';
+import { keyCommandFactories } from './keyCommandFactories.js';
+import { replaceCommandFactories } from './replaceCommandFactories.js';
+
+type CommandRunner = (...args: any[]) => boolean;
+
+export class CommandManager {
+  public readonly commandFactories: { [key: string]: CommandFactory } = {};
+  public readonly run: { [key: string]: CommandRunner } = {};
+
+  private debug = true;
+
+  constructor(
+    private editor: CoreEditor,
+  ) {
+    this.mergeCommandFactories(baseCommandFactories, 'baseCommand');
+    this.mergeCommandFactories(keyCommandFactories, 'key');
+    this.mergeCommandFactories(replaceCommandFactories, 'replace');
+  }
+
+  public mergeCommandFactories(
+    toInsert: Partial<CommandFactories>,
+    extName: string,
+  ) {
+    for (const key in toInsert) {
+      const commandFactory = toInsert[key];
+      if (!commandFactory) {
+        continue;
+      }
+      this.overwriteCommandFactory(extName, key, commandFactory);
+    }
+  }
+
+  private overwriteCommandFactory(
+    extName: string,
+    name: string,
+    commandFactory: CommandFactory,
+  ) {
+    if (this.debug) {
+      const wrappedFactory = (...args: unknown[]) => {
+        const realCommand = commandFactory(...args);
+
+        const command: Command = (state, dispatch, view) => {
+          if (dispatch) {
+            console.debug(`Command: ${extName}.${name}`);
+          }
+          return realCommand(state, dispatch, view);
+        };
+
+        return command;
+      };
+
+      this.commandFactories[name] = wrappedFactory;
+    } else {
+      this.commandFactories[name] = commandFactory;
+    }
+
+    this.run[name] = (...args) => {
+      const factory = this.commandFactories[name];
+      const command: Command = factory(...args);
+      const state = this.editor.state;
+      const view = this.editor.view;
+      if (view instanceof EditorView) {
+        return command(state, view.dispatch, view);
+      } else {
+        return command(state, view.dispatch);
+      }
+    };
+  }
+
+  get state(): EditorState {
+    return this.editor.state;
+  }
+
+  get chain(): () => ChainedCommands {
+    return () => this.createChain();
+  }
+
+  get can(): () => ChainedCommands {
+    return () => this.createCan();
+  }
+
+  public createChain(
+    startTr?: Transaction,
+    shouldDispatch = true,
+  ): ChainedCommands {
+    const { commandFactories, editor, state } = this;
+    const { view } = editor;
+    const callbacks: boolean[] = [];
+    const hasStartTransaction = !!startTr;
+    const tr = startTr || state.tr;
+
+    const chainedState = createChainableState(tr, state);
+    const fakeDispatch = () => undefined;
+
+    const chain = {
+      ...Object.fromEntries(
+        Object.entries(commandFactories).map(([name, commandFactory]) => {
+          const chainedCommand = (...args: never[]) => {
+            const command = commandFactory(...args);
+            const callback = command(
+              chainedState,
+              shouldDispatch ? fakeDispatch : undefined,
+            );
+            callbacks.push(callback);
+            return chain;
+          };
+          return [name, chainedCommand];
+        }),
+      ),
+      run: () => {
+        if (
+          !hasStartTransaction &&
+          shouldDispatch &&
+          !tr.getMeta('preventDispatch')
+        ) {
+          view.dispatch(tr);
+        }
+
+        return callbacks.every((callback) => callback === true);
+      },
+      chain: () => {
+        return this.createChain(tr, shouldDispatch);
+      },
+    } as unknown as ChainedCommands;
+
+    return chain;
+  }
+
+  public createCan(startTr?: Transaction): ChainedCommands {
+    return this.createChain(startTr, false);
+  }
+}