fix(core): in move_node, replace path with pathRef #WIK-6050

.changeset/pretty-doors-fail.md

@@ -0,0 +1,5 @@
+---
+"slate-angular": patch
+---
+
+in move_node, replace path with pathRef

packages/src/plugins/with-angular.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, fakeAsync, flush, TestBed, tick } from "@angular/core/testing";
-import { createEditor, Editor, Path, Transforms, Node } from "slate";
+import { createEditor, Transforms, Node, Element, Editor } from "slate";
 import { withAngular } from "./with-angular";
 import { EDITOR_TO_ON_CHANGE, NODE_TO_KEY } from "../utils/weak-maps";
 import { AngularEditor } from "./angular-editor";
@@ -9,10 +9,8 @@ import { configureBasicEditableTestingModule } from "../testing/module";
 
 describe("with-angular", () => {
   let angularEditor: AngularEditor;
-  let moveNodeEditor: AngularEditor;
   function configEditor() {
     angularEditor = withAngular(createEditor());
-    moveNodeEditor = withAngular(createEditor());
     angularEditor.children = [
       {
         type: "paragraph",
@@ -27,34 +25,6 @@ describe("with-angular", () => {
         ],
       },
     ];
-    moveNodeEditor.children = [
-      {
-        type: "table",
-        children: [
-          {
-            type: "table-row",
-            children: [
-            ],
-          },
-        ],
-      },
-      {
-        type: "paragraph",
-        children: [
-          {
-            text: "text1",
-          },
-        ],
-      },
-      {
-        type: "paragraph",
-        children: [
-          {
-            text: "text2",
-          },
-        ],
-      },
-    ];
   }
   beforeEach(() => {
     configEditor();
@@ -321,9 +291,29 @@ describe("with-angular", () => {
       expect(tableCellNode2).not.toEqual(newTableCellNode2);
       validKey(tableCellNode2, newTableCellNode2);
     }));
-  });
+
+    it('can correctly insert the list in the last row', fakeAsync(() => {
+      Transforms.select(component.editor, Editor.end(component.editor, [3]));
+      component.editor.insertBreak();
+      Transforms.wrapNodes(
+        component.editor,
+        { type: 'list-item', children: [] },
+        {
+            at: [4],
+            split: true
+        }
+      );
+      Transforms.wrapNodes(component.editor, { type: 'numbered-list', children: [] } as any, {
+        at: [4, 0, 0],
+        match: node => Element.isElement(node) && node.type === 'list-item'
+      });
+
+      expect(component.editor.children.length).toBe(5);
+      expect((component.editor.children[4] as any).type).toBe('numbered-list');
+    }));
+  })
 });
 
 const validKey = (oldNode, newNode) => {
   expect(NODE_TO_KEY.get(oldNode)).toEqual(NODE_TO_KEY.get(newNode));
-};
+}

packages/src/plugins/with-angular.ts

@@ -1,5 +1,20 @@
-import { Editor, Node, Transforms, Range, Path, Operation } from 'slate';
-import { EDITOR_TO_ON_CHANGE, NODE_TO_KEY, isDOMText, getPlainText, Key, getSlateFragmentAttribute } from '../utils';
+import {
+  Editor,
+  Node,
+  Transforms,
+  Range,
+  Path,
+  Operation,
+  PathRef
+} from 'slate';
+import {
+  EDITOR_TO_ON_CHANGE,
+  NODE_TO_KEY,
+  isDOMText,
+  getPlainText,
+  Key,
+  getSlateFragmentAttribute
+} from '../utils';
 import { AngularEditor } from './angular-editor';
 import { SlateError } from '../types/error';
 import { findCurrentLineRange } from '../utils/lines';
@@ -37,7 +52,7 @@ export const withAngular = <T extends Editor>(editor: T, clipboardFormatKey = 'x
   };
 
   e.apply = (op: Operation) => {
-    const matches: [Path, Key][] = [];
+    const matches: [Path | PathRef, Key][] = [];
 
     switch (op.type) {
       case 'insert_text':
@@ -68,23 +83,23 @@ export const withAngular = <T extends Editor>(editor: T, clipboardFormatKey = 'x
       case 'move_node': {
         const commonPath = Path.common(Path.parent(op.path), Path.parent(op.newPath));
         for (const [node, path] of Editor.levels(e, { at: Path.parent(op.path) })) {
-            const key = AngularEditor.findKey(e, node);
-            matches.push([path, key]);
+          const key = AngularEditor.findKey(e, node);
+          matches.push([Editor.pathRef(editor, path), key]);
         }
         for (const [node, path] of Editor.levels(e, { at: Path.parent(op.newPath) })) {
-            if(path.length > commonPath.length){
-                const key = AngularEditor.findKey(e, node);
-                matches.push([path, key]);
-            }
+          if(path.length > commonPath.length){
+            const key = AngularEditor.findKey(e, node);
+            matches.push([Editor.pathRef(editor, path), key]);
+          }
         }
         break;
       }
     }
 
     apply(op);
 
-    for (const [path, key] of matches) {
-      const [node] = Editor.node(e, path);
+    for (const [source, key] of matches) {
+      let [node] = Editor.node(e, Path.isPath(source) ? source: source.current);
       NODE_TO_KEY.set(node, key);
     }
   };
@@ -212,36 +227,36 @@ export const withAngular = <T extends Editor>(editor: T, clipboardFormatKey = 'x
      */
     const fragment =
       data.getData(`application/${clipboardFormatKey}`) ||
-      getSlateFragmentAttribute(data)
+      getSlateFragmentAttribute(data);
 
     if (fragment) {
-      const decoded = decodeURIComponent(window.atob(fragment))
-      const parsed = JSON.parse(decoded) as Node[]
-      e.insertFragment(parsed)
-      return true
+      const decoded = decodeURIComponent(window.atob(fragment));
+      const parsed = JSON.parse(decoded) as Node[];
+      e.insertFragment(parsed);
+      return true;
     }
-    return false
-  }
+    return false;
+  };
 
   e.insertTextData = (data: DataTransfer): boolean => {
-    const text = data.getData('text/plain')
+    const text = data.getData('text/plain');
 
     if (text) {
-      const lines = text.split(/\r\n|\r|\n/)
-      let split = false
+      const lines = text.split(/\r\n|\r|\n/);
+      let split = false;
 
       for (const line of lines) {
         if (split) {
-          Transforms.splitNodes(e, { always: true })
+          Transforms.splitNodes(e, { always: true });
         }
 
-        e.insertText(line)
-        split = true
+        e.insertText(line);
+        split = true;
       }
-      return true
+      return true;
     }
-    return false
-  }
+    return false;
+  };
 
   e.onKeydown = () => { };