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)