Merge pull request #310 from lblod/feature/better-dom-event-flow

Transactional Edits

Author: abeforgit

addon/commands/add-mark-to-range-command.ts

@@ -1,30 +1,35 @@
-import Command from '@lblod/ember-rdfa-editor/commands/command';
-import ModelRange from '@lblod/ember-rdfa-editor/model/model-range';
-import Model from '@lblod/ember-rdfa-editor/model/model';
+import Command, {
+  CommandContext,
+} from '@lblod/ember-rdfa-editor/commands/command';
+import ModelRange from '@lblod/ember-rdfa-editor/core/model/model-range';
 import { ModelError } from '@lblod/ember-rdfa-editor/utils/errors';
-import { Serializable } from '../model/util/render-spec';
+import { Serializable } from '../utils/render-spec';
 
-export default class AddMarkToRangeCommand extends Command<
-  [ModelRange, string],
-  void
-> {
-  name = 'add-mark-to-range';
+declare module '@lblod/ember-rdfa-editor' {
+  export interface Commands {
+    addMarkToRange: AddMarkToRangeCommand;
+  }
+}
+export interface AddMarkToRangeCommandArgs {
+  range: ModelRange;
+  markName: string;
+  markAttributes?: Record<string, Serializable>;
+}
 
-  constructor(model: Model) {
-    super(model);
+export default class AddMarkToRangeCommand
+  implements Command<AddMarkToRangeCommandArgs, void>
+{
+  canExecute(): boolean {
+    return true;
   }
 
   execute(
-    range: ModelRange,
-    markName: string,
-    markAttributes: Record<string, Serializable> = {}
+    { transaction }: CommandContext,
+    { range, markName, markAttributes = {} }: AddMarkToRangeCommandArgs
   ): void {
-    const spec = this.model.marksRegistry.lookupMark(markName);
+    const spec = transaction.workingCopy.marksRegistry.lookupMark(markName);
     if (spec) {
-      this.model.change((mutator) => {
-        const resultRange = mutator.addMark(range, spec, markAttributes);
-        this.model.selectRange(resultRange);
-      });
+      transaction.addMark(range, spec, markAttributes);
     } else {
       throw new ModelError(`Unrecognized mark: ${markName}`);
     }

addon/commands/add-mark-to-selection-command.ts

@@ -1,47 +1,66 @@
-import Command from '@lblod/ember-rdfa-editor/commands/command';
-import Model from '@lblod/ember-rdfa-editor/model/model';
-import { Mark } from '@lblod/ember-rdfa-editor/model/mark';
+import Command, {
+  CommandContext,
+} from '@lblod/ember-rdfa-editor/commands/command';
+import { Mark } from '@lblod/ember-rdfa-editor/core/model/marks/mark';
+import ModelSelection from '@lblod/ember-rdfa-editor/core/model/model-selection';
 import {
   MisbehavedSelectionError,
   ModelError,
 } from '@lblod/ember-rdfa-editor/utils/errors';
-import ModelSelection from '@lblod/ember-rdfa-editor/model/model-selection';
-import { AttributeSpec, Serializable } from '../model/util/render-spec';
+import { AttributeSpec, Serializable } from '../utils/render-spec';
+import { CORE_OWNER } from '../utils/constants';
+import { SelectionChangedEvent } from '../utils/editor-event';
 
-export default class AddMarkToSelectionCommand extends Command<
-  [string, Record<string, Serializable>],
-  void
-> {
-  name = 'add-mark-to-selection';
+declare module '@lblod/ember-rdfa-editor' {
+  export interface Commands {
+    addMarkToSelection: AddMarkToSelectionCommand;
+  }
+}
 
-  constructor(model: Model) {
-    super(model);
+export interface AddMarkToSelectionCommandArgs {
+  markName: string;
+  markAttributes?: Record<string, Serializable>;
+}
+
+export default class AddMarkToSelectionCommand
+  implements Command<AddMarkToSelectionCommandArgs, void>
+{
+  canExecute(): boolean {
+    return true;
   }
 
   execute(
-    markName: string,
-    markAttributes: Record<string, Serializable> = {}
+    { transaction }: CommandContext,
+    { markName, markAttributes = {} }: AddMarkToSelectionCommandArgs
   ): void {
-    const selection = this.model.selection;
-    const spec = this.model.marksRegistry.lookupMark(markName);
+    const selection = transaction.workingCopy.selection;
+    const spec = transaction.workingCopy.marksRegistry.lookupMark(markName);
     if (spec) {
       if (selection.isCollapsed) {
-        selection.addMark(new Mark<AttributeSpec>(spec, markAttributes));
-        this.model.rootNode.focus();
-        this.model.emitSelectionChanged();
+        transaction.addMarkToSelection(
+          new Mark<AttributeSpec>(spec, markAttributes)
+        );
+
+        // TODO
+        // this.model.rootNode.focus();
+        // this.model.emitSelectionChanged();
       } else {
         if (!ModelSelection.isWellBehaved(selection)) {
           throw new MisbehavedSelectionError();
         }
-        this.model.change((mutator) => {
-          const resultRange = mutator.addMark(
-            selection.lastRange,
-            spec,
-            markAttributes
-          );
-          this.model.selectRange(resultRange);
-        });
+        const resultRange = transaction.addMark(
+          selection.lastRange,
+          spec,
+          markAttributes
+        );
+        transaction.selectRange(resultRange);
       }
+      transaction.workingCopy.eventBus.emit(
+        new SelectionChangedEvent({
+          owner: CORE_OWNER,
+          payload: transaction.workingCopy.selection,
+        })
+      );
     } else {
       throw new ModelError(`Unrecognized mark: ${markName}`);
     }

addon/commands/command-manager.ts

@@ -0,0 +1,45 @@
+import {
+  CanExecuteArgs,
+  CommandName,
+  Commands,
+  ExecuteArgs,
+  ExecuteReturn,
+} from '@lblod/ember-rdfa-editor';
+import Transaction from '../core/state/transaction';
+export type WrappedCommand<N extends CommandName> = {
+  (args: ExecuteArgs<N>): ExecuteReturn<N>;
+  canExecute: (args: CanExecuteArgs<N>) => boolean;
+};
+export type CommandExecutor = {
+  [key in keyof Commands]: WrappedCommand<key>;
+};
+export default class CommandManager {}
+export function wrapCommand<N extends CommandName>(
+  name: N,
+  command: Commands[N],
+  transaction: Transaction
+) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const wrapped = function (args: any) {
+    return command.execute({ transaction }, args);
+  } as WrappedCommand<N>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  wrapped.canExecute = function (args: any) {
+    return command.canExecute(transaction.workingCopy, args);
+  };
+  return [name, wrapped];
+}
+
+export function commandMapToCommandExecutor(
+  commands: Partial<Commands>,
+  transaction: Transaction
+): CommandExecutor {
+  const entries = Object.entries(commands) as [
+    CommandName,
+    Commands[CommandName]
+  ][];
+  const mapped = entries.map(([commandName, command]) =>
+    wrapCommand(commandName, command, transaction)
+  );
+  return Object.fromEntries(mapped) as CommandExecutor;
+}

addon/commands/command.ts

@@ -1,33 +1,26 @@
-import Model from '@lblod/ember-rdfa-editor/model/model';
-import {
-  createLogger,
-  Logger,
-} from '@lblod/ember-rdfa-editor/utils/logging-utils';
+import State from '../core/state';
+import Transaction from '../core/state/transaction';
 
-/**
- * Commands are the only things that are allowed to modify the model.
- * TODO: Currently this restriction is not enforced yet.
- * They need to be registered with {@link RawEditor.registerCommand()} before they
- * can be executed with {@link RawEditor.executeCommand()}.
- */
-export default abstract class Command<
-  A extends unknown[] = unknown[],
-  R = void
-> {
-  abstract name: string;
-  protected model: Model;
-  protected logger: Logger;
-  createSnapshot: boolean;
-
-  protected constructor(model: Model, createSnapshot = true) {
-    this.model = model;
-    this.createSnapshot = createSnapshot;
-    this.logger = createLogger(`command:${this.constructor.name}`);
-  }
+export interface CommandContext {
+  transaction: Transaction;
+}
 
-  canExecute(..._args: A): boolean {
-    return true;
-  }
+/**
+ * Represents an editing action at the highest level, and are built on top of the @link{Transaction} primitive.
+ * You can think of it this way:
+ * if a series of edits made with transactions would be a private script,
+ * turning them into a command would be to turn that script into a real, published package
+ *
+ * Emacs users might also consider them "interactive" functions as opposed to non-interactive ones.
+ *
+ * Essentially commands are the answer to the question "Hey editor, what can you do?"
+ * Whereas transactions are the answer to the followup question "Ah but what if I wanted to do _this other thing_?"
+ *
+ * You may encounter commands that do not follow this logic, that's because commands predate
+ * this insight.
+ * */
+export default interface Command<A, R> {
+  canExecute(state: State, args: A): boolean;
 
-  abstract execute(...args: A): R;
+  execute(context: CommandContext, args: A): R;
 }

addon/commands/delete-selection-command.ts

@@ -1,10 +1,12 @@
 import SelectionCommand from '@lblod/ember-rdfa-editor/commands/selection-command';
-import Model from '@lblod/ember-rdfa-editor/model/model';
 
+declare module '@lblod/ember-rdfa-editor' {
+  export interface Commands {
+    deleteSelection: DeleteSelectionCommand;
+  }
+}
 export default class DeleteSelectionCommand extends SelectionCommand {
-  name = 'delete-selection';
-
-  constructor(model: Model) {
-    super(model, true);
+  constructor() {
+    super(true);
   }
 }