Working Cypress test in 21-metadata-slate-format-link.js

cypress/integration/21-metadata-slate-format-link.js

@@ -1,4 +1,4 @@
-import { slateBeforeEach, slateAfterEach } from '../support';
+import { slateBeforeEach, slateAfterEach, selectSlateRange } from '../support';
 
 describe('RichText Tests: Add links', () => {
   beforeEach(() => slateBeforeEach('News Item'));
@@ -49,8 +49,13 @@ describe('RichText Tests: Add links', () => {
       'Colorless green ideas{enter}{enter}sleep furiously.',
     );
 
-    // Link
-    cy.setSlateSelection('green', 'furiously');
+    cy.wait(1000);
+
+    selectSlateRange({
+      anchor: { path: [0], offset: 10 },
+      focus: { path: [2], offset: 5 },
+    });
+
     cy.clickSlateButton('Link');
 
     cy.get('.sidebar-container a.item:nth-child(3)').click();
@@ -66,8 +71,17 @@ describe('RichText Tests: Add links', () => {
     cy.setSlateSelection('sleep');
     cy.clickSlateButton('Remove link');
 
+    cy.wait(1000);
+
     // Re-add link
-    cy.setSlateSelection('Colorless', 'furiously');
+    selectSlateRange({
+      anchor: { path: [0], offset: 0 },
+      focus: { path: [2], offset: 15 },
+    });
+
+
+    cy.wait(1000);
+
     cy.clickSlateButton('Link');
 
     cy.get('.sidebar-container a.item:nth-child(3)').click();
@@ -83,11 +97,14 @@ describe('RichText Tests: Add links', () => {
     cy.get('#view p:first-of-type a')
       .should('have.attr', 'href')
       .and('include', 'https://google.com');
+
     cy.get('#view p:first-of-type a').contains('Colorless green ideas');
+
     cy.get('#view p:last-of-type a')
       .should('have.attr', 'href')
-      .and('include', 'https://google.com');
-    cy.get('#view p:last-of-type a').contains('sleep furiously.');
+      .and('include', '/');
+
+    cy.get('#view p:last-of-type a').contains('sleep furiously');
   });
 
   // it('As editor I can select multiple paragraphs and add links', function () {

cypress/support/index.js

@@ -125,3 +125,12 @@ export const selectSlateNodeOfWord = (el) => {
     win.document.dispatchEvent(event);
   });
 };
+
+export const selectSlateRange = (range) => {
+  return cy.window().then((win) => {
+    var event = new CustomEvent('Test_SelectRange', {
+      detail: range,
+    });
+    win.document.dispatchEvent(event);
+  });
+};

src/components/ElementEditor/utils.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms } from 'slate'; // Range,
+import { Editor, Transforms, Node } from 'slate'; // Range,
 
 /**
  * @description Creates or updates an existing $elementType. It also takes care
@@ -39,7 +39,13 @@ export const _insertElement = (elementType) => (editor, data) => {
       Transforms.wrapNodes(
         editor,
         { type: elementType, data },
-        { split: true, at: selection }, //,
+        {
+          split: true,
+          at: selection,
+          match: (node) => {
+            return Node.string(node).length !== 0;
+          },
+        }, //,
       );
     }
 

src/editor/extensions/withTestingFeatures.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ReactEditor } from 'slate-react';
 
 const withTestingFeatures = (WrappedComponent) => {
   return (props) => {
@@ -31,14 +32,29 @@ const withTestingFeatures = (WrappedComponent) => {
       // Slate monitors DOM selection changes automatically
     };
 
+    const onTestSelectRange = (val) => {
+      const newDomRange =
+        val && ReactEditor.toDOMRange(window.focusedSlateEditor, val.detail);
+
+      let selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(newDomRange);
+    };
+
     React.useEffect(() => {
       document.addEventListener('Test_SelectWord', onTestSelectWord);
+      document.addEventListener('Test_SelectRange', onTestSelectRange);
 
       return () => {
         document.removeEventListener('Test_SelectWord', onTestSelectWord);
+        document.removeEventListener('Test_SelectRange', onTestSelectRange);
       };
     });
 
+    const handleFocus = React.useCallback(() => {
+      window.focusedSlateEditor = ref?.current;
+    }, []);
+
     return (
       <WrappedComponent
         debug-values={{
@@ -50,6 +66,7 @@ const withTestingFeatures = (WrappedComponent) => {
           ),
         }}
         testingEditorRef={ref}
+        onFocus={handleFocus}
         {...props}
       />
     );