fix(widget-markdown): properly check for selection when inserting links (#4075)

cypress/integration/markdown_widget_link_spec.js

@@ -0,0 +1,72 @@
+import '../utils/dismiss-local-backup';
+
+describe('Markdown widget link', () => {
+  before(() => {
+    Cypress.config('defaultCommandTimeout', 4000);
+    cy.task('setupBackend', { backend: 'test' });
+  });
+
+  beforeEach(() => {
+    cy.clearLocalStorage();
+    cy.reload();
+    cy.loginAndNewPost();
+    cy.clearMarkdownEditorContent();
+  });
+
+  after(() => {
+    cy.task('teardownBackend', { backend: 'test' });
+  });
+
+  describe('pressing backspace', () => {
+    it('can add a new valid link', () => {
+      const link = 'https://www.netlifycms.org/';
+      cy.window().then(win => {
+        cy.stub(win, 'prompt').returns(link);
+      });
+      cy.focused().clickLinkButton();
+
+      cy.confirmMarkdownEditorContent(`<p><a>${link}</a></p>`);
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(300);
+      cy.clickModeToggle();
+
+      cy.confirmRawEditorContent(`<${link}>`);
+    });
+
+    it('can add a new invalid link', () => {
+      const link = 'www.netlifycms.org';
+      cy.window().then(win => {
+        cy.stub(win, 'prompt').returns(link);
+      });
+      cy.focused().clickLinkButton();
+
+      cy.confirmMarkdownEditorContent(`<p><a>${link}</a></p>`);
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(300);
+      cy.clickModeToggle();
+
+      cy.confirmRawEditorContent(`[${link}](${link})`);
+    });
+
+    it('can select existing text as link', () => {
+      const link = 'https://www.netlifycms.org';
+      cy.window().then(win => {
+        cy.stub(win, 'prompt').returns(link);
+      });
+
+      const text = 'Netlify CMS';
+      cy.focused()
+        .getMarkdownEditor()
+        .type(text)
+        .setSelection(text)
+        .clickLinkButton();
+
+      cy.confirmMarkdownEditorContent(`<p><a>${text}</a></p>`);
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(300);
+      cy.clickModeToggle();
+
+      cy.confirmRawEditorContent(`[${text}](${link})`);
+    });
+  });
+});

cypress/support/commands.js

@@ -268,6 +268,7 @@ Cypress.Commands.add('insertEditorComponent', title => {
   ['clickCodeButton', 'Code'],
   ['clickItalicButton', 'Italic'],
   ['clickQuoteButton', 'Quote'],
+  ['clickLinkButton', 'Link'],
 ].forEach(([commandName, toolbarButtonName]) => {
   Cypress.Commands.add(commandName, opts => {
     return cy.clickToolbarButton(toolbarButtonName, opts);
@@ -316,6 +317,12 @@ Cypress.Commands.add('clearMarkdownEditorContent', () => {
     .backspace({ times: 2 });
 });
 
+Cypress.Commands.add('confirmRawEditorContent', expectedDomString => {
+  cy.get('.cms-editor-raw').within(() => {
+    cy.contains('span', expectedDomString);
+  });
+});
+
 function toPlainTree(domString) {
   return rehype()
     .use(removeSlateArtifacts)

packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/Link.js

@@ -7,12 +7,18 @@ const Link = ({ type }) => ({
         const url = getUrl();
         if (!url) return;
 
-        // If no text is selected, use the entered URL as text.
+        const selection = editor.value.selection;
-        if (editor.value.isCollapsed) {
+        const isCollapsed = selection && selection.isCollapsed;
-          editor.insertText(url).moveFocusBackward(0 - url.length);
+        if (isCollapsed) {
+          // If no text is selected, use the entered URL as text.
+          return editor.insertInline({
+            type,
+            data: { url },
+            nodes: [{ object: 'text', text: url }],
+          });
+        } else {
+          return editor.wrapInline({ type, data: { url } }).moveToEnd();
         }
-
-        return editor.wrapInline({ type, data: { url } }).moveToEnd();
       }
     },
   },