feat(core): align built-in extensions and delete pipeline

Author: DavidMorgan

packages/core/src/Editor.ts

@@ -19,6 +19,10 @@ import { getCoreExtensions } from "./extensions";
 import { EventEmitter } from "./EventEmitter";
 import { ExtensionManager } from "./ExtensionManager";
 import { createDocumentFromContent } from "./helpers/content";
+import {
+  getTextBetween,
+  getTextSerializersFromSchema,
+} from "./helpers";
 import type {
   CanCommands,
   ChainedCommands,
@@ -109,6 +113,8 @@ export class Editor extends EventEmitter<EditorEventMap> {
       parseOptions: undefined,
       enableInputRules: true,
       enablePasteRules: true,
+      coreExtensionOptions: {},
+      enableCoreExtensions: true,
       enableExtensionDispatchTransaction: true,
       editorProps: {},
       onBeforeCreate: () => undefined,
@@ -121,13 +127,14 @@ export class Editor extends EventEmitter<EditorEventMap> {
       onBlur: () => undefined,
       onPaste: () => undefined,
       onDrop: () => undefined,
+      onDelete: () => undefined,
       onDestroy: () => undefined,
       ...options,
     };
 
     this.extensionManager = new ExtensionManager(
       [
-        ...getCoreExtensions(),
+        ...getCoreExtensions(this.options),
         ...this.options.extensions,
       ],
       this,
@@ -322,14 +329,28 @@ export class Editor extends EventEmitter<EditorEventMap> {
   }
 
   getText(options: EditorGetTextOptions = {}) {
-    return this.state.doc.textBetween(
-      0,
-      this.state.doc.content.size,
-      options.blockSeparator ?? "\n\n",
-      (leafNode) =>
-        options.textSerializers?.[leafNode.type.name]?.(leafNode)
-          ?? (leafNode.type.name === "hardBreak" ? "\n" : ""),
+    const textSerializers = Object.fromEntries(
+      Object.entries(options.textSerializers ?? {}).map(([name, serializer]) => [
+        name,
+        (props: Parameters<NonNullable<typeof serializer>>[0] extends never ? never : any) => (
+          serializer.length <= 1
+            ? (serializer as (node: ProseMirrorNode) => string)(props.node)
+            : serializer(props)
+        ),
+      ]),
     );
+
+    return getTextBetween(this.state.doc, {
+      from: 0,
+      to: this.state.doc.content.size,
+    }, {
+      blockSeparator: options.blockSeparator,
+      textSerializers: {
+        ...getTextSerializersFromSchema(this.schema),
+        ...textSerializers,
+        hardBreak: () => "\n",
+      },
+    });
   }
 
   getHTML() {

packages/core/src/extensions/clipboardTextSerializer.ts

@@ -0,0 +1,44 @@
+import {
+  Plugin,
+  PluginKey,
+} from "@mxm-editor/pm";
+import { Extension } from "../Extension";
+import {
+  getTextBetween,
+  getTextSerializersFromSchema,
+} from "../helpers";
+
+export const ClipboardTextSerializer = Extension.create({
+  name: "clipboardTextSerializer",
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("clipboardTextSerializer"),
+        props: {
+          clipboardTextSerializer: () => {
+            const { editor } = this;
+            const { state, schema } = editor;
+            const { doc, selection } = state;
+            const { ranges } = selection;
+            const from = Math.min(...ranges.map((range) => range.$from.pos));
+            const to = Math.max(...ranges.map((range) => range.$to.pos));
+            const textSerializers = getTextSerializersFromSchema(schema);
+
+            return getTextBetween(doc, { from, to }, {
+              ...(this.editor.options.coreExtensionOptions?.clipboardTextSerializer?.blockSeparator
+                !== undefined
+                ? {
+                  blockSeparator: this.editor.options.coreExtensionOptions
+                    .clipboardTextSerializer
+                    ?.blockSeparator,
+                }
+                : {}),
+              textSerializers,
+            });
+          },
+        },
+      }),
+    ];
+  },
+});

packages/core/src/extensions/delete.ts

@@ -0,0 +1,105 @@
+import { RemoveMarkStep } from "@mxm-editor/pm";
+import { Extension } from "../Extension";
+import {
+  combineTransactionSteps,
+  getChangedRanges,
+} from "../helpers";
+
+export const Delete = Extension.create({
+  name: "delete",
+
+  onUpdate({ transaction, appendedTransactions }) {
+    const callback = () => {
+      if (
+        this.editor.options.coreExtensionOptions?.delete?.filterTransaction?.(transaction)
+        ?? transaction.getMeta("y-sync$")
+      ) {
+        return;
+      }
+
+      const combinedTransform = combineTransactionSteps(
+        transaction.before,
+        [transaction, ...appendedTransactions],
+      );
+      const changes = getChangedRanges(combinedTransform);
+
+      changes.forEach((change) => {
+        if (
+          combinedTransform.mapping.mapResult(change.oldRange.from).deletedAfter
+          && combinedTransform.mapping.mapResult(change.oldRange.to).deletedBefore
+        ) {
+          combinedTransform.before.nodesBetween(change.oldRange.from, change.oldRange.to, (node, from) => {
+            const to = from + node.nodeSize - 2;
+            const isFullyWithinRange =
+              change.oldRange.from <= from
+              && to <= change.oldRange.to;
+            const payload = {
+              type: "node" as const,
+              node,
+              from,
+              to,
+              newFrom: combinedTransform.mapping.map(from),
+              newTo: combinedTransform.mapping.map(to),
+              deletedRange: change.oldRange,
+              newRange: change.newRange,
+              partial: !isFullyWithinRange,
+              editor: this.editor,
+              transaction,
+              combinedTransform,
+            };
+
+            this.editor.emit("delete", payload);
+            this.editor.options.onDelete(payload);
+          });
+        }
+      });
+
+      const { mapping } = combinedTransform;
+
+      combinedTransform.steps.forEach((step, index) => {
+        if (!(step instanceof RemoveMarkStep)) {
+          return;
+        }
+
+        const newStart = mapping.slice(index).map(step.from, -1);
+        const newEnd = mapping.slice(index).map(step.to);
+        const oldStart = mapping.invert().map(newStart, -1);
+        const oldEnd = mapping.invert().map(newEnd);
+        const foundBeforeMark = combinedTransform.doc
+          .nodeAt(newStart - 1)
+          ?.marks.some((mark) => mark.eq(step.mark));
+        const foundAfterMark = combinedTransform.doc
+          .nodeAt(newEnd)
+          ?.marks.some((mark) => mark.eq(step.mark));
+        const payload = {
+          type: "mark" as const,
+          mark: step.mark,
+          from: step.from,
+          to: step.to,
+          deletedRange: {
+            from: oldStart,
+            to: oldEnd,
+          },
+          newRange: {
+            from: newStart,
+            to: newEnd,
+          },
+          partial: Boolean(foundAfterMark || foundBeforeMark),
+          editor: this.editor,
+          transaction,
+          combinedTransform,
+        };
+
+        this.editor.emit("delete", payload);
+        this.editor.options.onDelete(payload);
+      });
+    };
+
+    if (this.editor.options.coreExtensionOptions?.delete?.async ?? true) {
+      setTimeout(callback, 0);
+      return;
+    }
+
+    callback();
+  },
+});

packages/core/src/extensions/index.ts

@@ -1,28 +1,68 @@
-import type { AnyExtension } from "../types";
+import type {
+  AnyExtension,
+  CoreExtensionName,
+} from "../types";
+import { ClipboardTextSerializer } from "./clipboardTextSerializer";
 import { Commands } from "./commands";
+import { Delete } from "./delete";
 import { Drop } from "./drop";
 import { Editable } from "./editable";
 import { FocusEvents } from "./focusEvents";
 import { Keymap } from "./keymap";
 import { Paste } from "./paste";
 import { Tabindex } from "./tabindex";
+import { TextDirection } from "./textDirection";
 
-export function getCoreExtensions(): AnyExtension[] {
-  return [
-    Commands,
-    Editable,
-    Tabindex,
-    FocusEvents,
-    Drop,
-    Keymap,
-    Paste,
+type GetCoreExtensionsOptions = {
+  enableCoreExtensions?: boolean | Partial<Record<CoreExtensionName, false>>;
+  coreExtensionOptions?: {
+    textDirection?: {
+      direction?: "ltr" | "rtl" | "auto";
+    };
+  };
+};
+
+function isEnabled(
+  name: CoreExtensionName,
+  setting: GetCoreExtensionsOptions["enableCoreExtensions"],
+) {
+  if (setting === false) {
+    return false;
+  }
+
+  if (setting && typeof setting === "object") {
+    return setting[name] !== false;
+  }
+
+  return true;
+}
+
+export function getCoreExtensions(options: GetCoreExtensionsOptions = {}): AnyExtension[] {
+  const extensions: Array<[CoreExtensionName, AnyExtension]> = [
+    ["editable", Editable],
+    ["clipboardTextSerializer", ClipboardTextSerializer],
+    ["commands", Commands],
+    ["focusEvents", FocusEvents],
+    ["keymap", Keymap],
+    ["tabindex", Tabindex],
+    ["drop", Drop],
+    ["paste", Paste],
+    ["delete", Delete],
+    ["textDirection", TextDirection],
   ];
+
+  return extensions
+    .filter(([name]) => isEnabled(name, options.enableCoreExtensions))
+    .map(([, extension]) => extension);
 }
 
+export * from "./clipboardTextSerializer";
 export * from "./commands";
+export * from "./delete";
 export * from "./drop";
 export * from "./editable";
 export * from "./focusEvents";
 export * from "./keymap";
 export * from "./paste";
 export * from "./tabindex";
+export * from "./textDirection";

packages/core/src/extensions/textDirection.ts

@@ -0,0 +1,69 @@
+import {
+  Plugin,
+  PluginKey,
+} from "@mxm-editor/pm";
+import { Extension } from "../Extension";
+
+export const TextDirection = Extension.create({
+  name: "textDirection",
+
+  addGlobalAttributes() {
+    const direction = this.editor.options.coreExtensionOptions?.textDirection?.direction;
+
+    if (!direction) {
+      return [];
+    }
+
+    const nodeExtensions = (this.extensions ?? []).filter(
+      (extension) => extension.type === "node",
+    );
+
+    return [
+      {
+        types: nodeExtensions
+          .filter((extension) => extension.name !== "text")
+          .map((extension) => extension.name),
+        attributes: {
+          dir: {
+            default: direction,
+            parseHTML: (element) => {
+              const dir = element.getAttribute("dir");
+
+              if (dir === "ltr" || dir === "rtl" || dir === "auto") {
+                return dir;
+              }
+
+              return direction;
+            },
+            renderHTML: (attributes): Record<string, string> => (
+              attributes.dir
+                ? { dir: String(attributes.dir) }
+                : {}
+            ),
+          },
+        },
+      },
+    ];
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("textDirection"),
+        props: {
+          attributes: (): Record<string, string> => {
+            const direction = this.editor.options.coreExtensionOptions?.textDirection?.direction;
+
+            if (!direction) {
+              return {};
+            }
+
+            return {
+              dir: direction,
+            };
+          },
+        },
+      }),
+    ];
+  },
+});

packages/core/src/helpers/combineTransactionSteps.ts

@@ -0,0 +1,21 @@
+import type {
+  Node as ProseMirrorNode,
+  Transaction,
+  Transform,
+} from "@mxm-editor/pm";
+import { Transform as ProseMirrorTransform } from "@mxm-editor/pm";
+
+export function combineTransactionSteps(
+  oldDoc: ProseMirrorNode,
+  transactions: Transaction[],
+): Transform {
+  const transform = new ProseMirrorTransform(oldDoc);
+
+  transactions.forEach((transaction) => {
+    transaction.steps.forEach((step) => {
+      transform.step(step);
+    });
+  });
+
+  return transform;
+}