Link options

Author: medienbaecker

README.md

@@ -14,7 +14,7 @@ A powerful, user-friendly [Tiptap](https://tiptap.dev) field for [Kirby](https:/
 - 🧠 **One method to rule them all** with `tiptapText()` handling [UUID resolution](https://getkirby.com/docs/reference/templates/field-methods/permalinks-to-urls), [smartypants](https://getkirby.com/docs/reference/system/options/smartypants), automatic [inline mode](https://getkirby.com/docs/reference/templates/helpers/kirbytextinline) and more
 - ✨ **Intuitive drag & drop support** for pages and files with intelligent spacing
 - 👀 **Custom field preview** showing formatted text in structure fields
-- 🔗 **Improved link handling** with a dialog that automatically picks the right KirbyTag (`(link: )`, `(email: )`, `(file: )`or `(tel: )`) and a paste handler that adds link tags to the selected text
+- 🔗 **Improved link handling** with a dialog that allows custom link types and custom fields, automatically picks the right KirbyTag (`(link: )`, `(email: )`, `(file: )`or `(tel: )`) and pre-fills the link and link text fields according to the selected text
 - 🌈 **Custom highlights** via a regular expression config option, making it possible to e.g. highlight long words
 - 📋 **Abstracted JSON structure** for easy content manipulation with features like `offsetHeadings`
 
@@ -56,6 +56,20 @@ tiptap:
   size: small # small, medium, large, huge or the default auto
   spellcheck: false # disable spellcheck
   pretty: true # pretty-print JSON in content file
+  links:
+    # Set link types in the link dialog
+    options:
+      - page
+      - url
+    # Add fields to the link dialog
+    fields:
+      class:
+        label: Classes
+        type: checkboxes
+        options:
+          border: Border
+          shadow: Shadow
+          rounded: Rounded
   required: true
   placeholder: My placeholder
   default: My default content

composer.json

@@ -3,7 +3,7 @@
   "description": "Kirby Tiptap",
   "license": "MIT",
   "type": "kirby-plugin",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "authors": [
     {
       "name": "Thomas Günther",

index.js

@@ -43,7 +43,10 @@
         },
         'kirbytags' => function () {
           return array_keys($this->kirby()->extensions('tags'));
-        }
+        },
+        'links' => function ($links = []) {
+          return $links;
+        },
       ],
       'validations' => [
         'minlength' => function ($value) {

index.php

@@ -2,7 +2,7 @@
   <nav class="k-toolbar tiptap-toolbar" v-if="editor">
     <template v-for="button in normalizedButtons">
       <component v-if="!isSeperator(button)" :is="buttonComponents[getComponentName(button)]" :key="getKey(button)"
-        :editor="editor" :levels="getLevels(button)" :endpoints="endpoints" />
+        :editor="editor" :levels="getLevels(button)" :links="links" :endpoints="endpoints" />
       <hr v-else />
     </template>
   </nav>

src/components/Toolbar.vue

@@ -15,5 +15,6 @@ export const props = {
   inline: Boolean,
   highlights: Array,
   kirbytags: Array,
+  links: Object,
   endpoints: Object,
 }

src/components/props.js

@@ -5,6 +5,20 @@
 <script>
 import ToolbarButton from './ToolbarButton.vue';
 
+/**
+ * Normalizes options objects to arrays for the link dialog
+ */
+function normalizeOptions(options) {
+  if (Array.isArray(options)) return options;
+  if (typeof options === "object" && options !== null) {
+    return Object.entries(options).map(([value, text]) => ({
+      value,
+      text
+    }));
+  }
+  return [];
+}
+
 export default {
   components: {
     ToolbarButton
@@ -14,6 +28,10 @@ export default {
     editor: {
       type: Object,
       required: true
+    },
+    links: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -51,21 +69,23 @@ export default {
           text: ''
         };
       }
-
       if (this.isValidUrl(selectedText)) {
         return {
           href: selectedText,
           text: ''
         };
       }
-
       return {
         href: '',
         text: selectedText
       };
     },
 
+    /**
+     * Opens the link dialog and inserts a KirbyTag on submit
+     */
     handleLink(editor) {
+
       // Get text from current selection, or empty string if nothing selected
       const selectedText = !editor.state.selection.empty
         ? editor.state.doc.textBetween(
@@ -79,17 +99,7 @@ export default {
       this.$panel.dialog.open({
         component: 'k-link-dialog',
         props: {
-          fields: {
-            href: {
-              label: window.panel.$t("link"),
-              type: "link",
-              placeholder: window.panel.$t("url.placeholder")
-            },
-            text: {
-              label: window.panel.$t("link.text"),
-              type: "text",
-            }
-          },
+          fields: this.linkFields,
           value: initialValues,
           submitButton: window.panel.$t("insert")
         },
@@ -99,47 +109,107 @@ export default {
             editor.chain().focus().run();
           },
           submit: (values) => {
-            this.$panel.dialog.close();
-
-            if (!values.href?.length) {
-              editor.chain().focus().unsetLink().run();
+            if (!values.href) {
+              this.$panel.notification.error(window.panel.$t('error.validation.required'));
               return;
             }
 
+            this.$panel.dialog.close();
+
             // Convert permalinks to UUIDs
-            const href = values.href
+            values.href = values.href
               .replace("/@/file/", "file://")
-              .replace("/@/page/", "page://")
+              .replace("/@/page/", "page://");
 
-            let kirbyTag = this.getKirbyTag(href, values.text);
+            let kirbyTag = this.getKirbyTag(values);
             editor.commands.insertContent(kirbyTag);
           }
         }
       });
     },
 
     /**
-     * Converts links to Kirbytags based on link type
+     * Converts dialog values to a KirbyTag string.
      */
-    getKirbyTag(href, text) {
+    getKirbyTag(values) {
+      const { href, text, ...rest } = values;
+      let tag = '';
       if (href.startsWith('mailto:')) {
         const email = href.replace('mailto:', '');
-        return text
+        tag = text
           ? `(email: ${email} text: ${text})`
           : `(email: ${email})`;
-      }
-
-      if (href.startsWith('tel:')) {
+      } else if (href.startsWith('tel:')) {
         const phone = href.replace('tel:', '');
-        return text
+        tag = text
           ? `(tel: ${phone} text: ${text})`
           : `(tel: ${phone})`;
+      } else {
+        tag = text
+          ? `(link: ${href} text: ${text})`
+          : `(link: ${href})`;
+      }
+
+      // Add all non-empty custom fields (arrays joined with space)
+      const extraParams = Object.entries(rest)
+        .filter(([key, value]) =>
+          value !== '' && value !== false && value !== undefined && value !== null
+        )
+        .map(([key, value]) =>
+          Array.isArray(value)
+            ? `${key}: ${value.join(' ')}`
+            : `${key}: ${value}`
+        )
+        .join(' ');
+
+      if (extraParams) {
+        tag = tag.replace(/\)$/, ` ${extraParams})`);
+      }
+
+      return tag;
+    },
+  },
+
+  computed: {
+    /**
+     * Merges default and custom fields, normalizing options for custom fields.
+     */
+    linkFields() {
+
+      // Set up href field with optional options (hah)
+      const hrefField = {
+        label: window.panel.$t("link"),
+        required: true,
+        type: "link"
+      };
+      if (this.links?.options && this.links.options.length > 0) {
+        hrefField.options = this.links.options;
       }
 
-      return text
-        ? `(link: ${href} text: ${text})`
-        : `(link: ${href})`;
+      const defaults = {
+        href: hrefField,
+        text: {
+          label: window.panel.$t("link.text"),
+          type: "text"
+        }
+      };
+
+      // Normalize options for all custom fields
+      const customFields = Object.fromEntries(
+        Object.entries(this.links?.fields || {}).map(([name, field]) => {
+          let normalized = { ...field };
+          if (field.options) {
+            normalized.options = normalizeOptions(field.options);
+          }
+          return [name, normalized];
+        })
+      );
+
+      return {
+        ...defaults,
+        ...customFields
+      };
     }
   }
-}
+};
 </script>