Improved linking inside the editor, now automatically adding schemas

components/Editor/Editor.vue

@@ -135,6 +135,7 @@
 </template>
 
 <script>
+import linkify from 'linkify-it'
 import stringHash from 'string-hash'
 import {
   Editor,
@@ -254,9 +255,14 @@ export default {
       this.hideLinkMenu()
     },
     setLinkUrl(command, url) {
-      command({ href: url })
-      this.hideLinkMenu()
-      this.editor.focus()
+      const links = linkify().match(url)
+      if (links) {
+        command({
+          href: links.pop().url
+        })
+        this.hideLinkMenu()
+        this.editor.focus()
+      }
     }
   }
 }
@@ -344,86 +350,13 @@ li > p {
       border: none;
       border-radius: 2px;
     }
-  }
 
-  // p:not(.is-empty) {
-  // br:first-of-type,
-  // br:last-of-type {
-  //   display: none;
-  // }
-  // br + br + br {
-  //   display: none;
-  // }
-  // }
-}
-
-/*.ProseMirror .is-empty:first-child::before {
-  content: 'Füge hier deinen Text ein…';
-  position: absolute;
-  color: #aaa;
-  pointer-events: none;
-  height: auto;
-  width: auto;
-  padding-bottom: $space-small;
-  font-style: italic;
-}
-
-.editor {
-  position: relative;
-  border: 1px solid #ddd;
-  border-radius: $border-radius;
-  line-height: 1.75;
-}
-
-.editor:focus-within {
-  border: 1px solid rgba($color-primary, 0.5);
-}
-
-.menubar {
-  margin: $border-radius 0;
-}
-
-.editor :matches(p, h1, h2, h3):not(:last-child) {
-  padding-bottom: space-xx-small;
-}*/
-
-/*
-.mark-voice,
-.mark-sound,
-.mark-quote {
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  margin-left: -0.25em;
-  margin-right: -0.25em;
-  border-radius: 1rem;
-
-  &::before {
-    display: inline-block;
-    content: '[' attr(data-label) '] ';
-    opacity: 0.5;
-    font-size: 0.5em;
-    color: $color-text;
+    .ds-input {
+      height: auto;
+    }
+    input {
+      padding: $space-xx-small $space-x-small;
+    }
   }
 }
-
-.mark-voice {
-  background-color: $color-marker-voice;
-  font-style: italic;
-  color: rgba($color-text, 0.7);
-  text-decoration: underline double;
-  text-underline-position: under;
-}
-
-.mark-sound {
-  background-color: $color-marker-sound;
-  text-decoration: underline dashed;
-  text-underline-position: under;
-}
-
-.mark-quote {
-  background-color: $color-marker-quote;
-  text-decoration: underline dotted;
-  text-underline-position: under;
-}
-*/
 </style>

package.json

@@ -49,6 +49,7 @@
     "graphql": "^14.1.1",
     "graphql-tag": "^2.10.1",
     "jsonwebtoken": "^8.3.0",
+    "linkify-it": "^2.1.0",
     "nuxt": "^2.0.0",
     "nuxt-env": "^0.0.4",
     "nuxt-sass-resources-loader": "^2.0.5",

yarn.lock

@@ -7378,6 +7378,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+linkify-it@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.1.0.tgz#c4caf38a6cd7ac2212ef3c7d2bde30a91561f9db"
+  integrity sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==
+  dependencies:
+    uc.micro "^1.0.1"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -11454,6 +11461,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+uc.micro@^1.0.1:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 uglify-js@3.4.x, uglify-js@^3.1.4:
   version "3.4.9"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"