feat(extension-link): ✨ add validate option to link extension

#2779

demos/src/Examples/AutolinkValidation/React/index.jsx

@@ -0,0 +1,32 @@
+import './styles.scss'
+
+import React from 'react'
+
+import Link from '@tiptap/extension-link'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({
+        validate: link => /^https?:\/\//.test(link),
+      }),
+    ],
+    content: `
+      <p>Hey! Try to type in url with and without a http/s protocol. - Links without a protocol should not get auto linked</p>
+    `,
+    editorProps: {
+      attributes: {
+        spellcheck: 'false',
+      },
+    },
+  })
+
+  return (
+    <div>
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

demos/src/Examples/AutolinkValidation/React/index.spec.js

@@ -0,0 +1,42 @@
+context('/src/Examples/AutolinkValidation/React/', () => {
+  before(() => {
+    cy.visit('/src/Examples/AutolinkValidation/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').type('{selectall}{backspace}')
+  })
+
+  const validLinks = [
+    'https://tiptap.dev',
+    'http://tiptap.dev',
+    'https://www.tiptap.dev/',
+    'http://www.tiptap.dev/',
+  ]
+
+  const invalidLinks = [
+    'tiptap.dev',
+    'www.tiptap.dev',
+  ]
+
+  validLinks.forEach(link => {
+    it(`${link} should get autolinked`, () => {
+      cy.get('.ProseMirror').type(link)
+      cy.get('.ProseMirror').should('have.text', link)
+      cy.get('.ProseMirror')
+        .find('a')
+        .should('have.length', 1)
+        .should('have.attr', 'href', link)
+    })
+  })
+
+  invalidLinks.forEach(link => {
+    it(`${link} should NOT get autolinked`, () => {
+      cy.get('.ProseMirror').type(link)
+      cy.get('.ProseMirror').should('have.text', link)
+      cy.get('.ProseMirror')
+        .find('a')
+        .should('have.length', 0)
+    })
+  })
+})

demos/src/Examples/AutolinkValidation/React/styles.scss

@@ -0,0 +1,54 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}

demos/src/Examples/AutolinkValidation/Vue/index.spec.js

@@ -0,0 +1,7 @@
+context('/src/Examples/AutolinkValidation/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Examples/AutolinkValidation/Vue/')
+  })
+
+  // TODO: Write tests
+})

demos/src/Examples/AutolinkValidation/Vue/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        Link.configure({
+          validate: link => /^https?:\/\//.test(link),
+        }),
+      ],
+      content: `
+        <p>Hey! Try to type in url with and without a http/s protocol. - Links without a protocol should not get auto linked</p>
+      `,
+      editorProps: {
+        attributes: {
+          spellcheck: 'false',
+        },
+      },
+    })
+  },
+
+  beforeUnmount() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
+</style>