Add predefined class selection to TipTap link component (#2336)

* Add predefined class selection to TipTap link component

* Improve docs

* Improve link modal style

Fix spacing rules, to be refactored

* Update default compiled assets

---------

Co-authored-by: Quentin Renard <[email protected]>

docs/content/1_docs/4_form-fields/02_wysiwyg.md

@@ -148,11 +148,12 @@ With the Tiptap wysiwyg editor you can access some additional features. Below is
 When needed, you can let users browse internal content, this can be especially useful to maintain correct links inside
 wysiwyg editors.
 
-This can currently only be done using the Form builder by adding the browsermodules to the
+This can currently only be done using the Form builder by adding `browserModules` to the
 wysiwyg field:
 
 ```php
-Wysiwyg::make()->name('description')
+Wysiwyg::make()
+    ->name('description')
     ->label('Description')
     ->translatable()
     ->browserModules([Page::class])
@@ -173,6 +174,21 @@ For regular fields on models you will have to manually call `parseInternalLinks`
 {{ \A17\Twill\Facades\TwillUtil::parseInternalLinks($item->description) }}
 ```
 
+### Link style
+
+If needed, you can let users add specific classes to links, which can be especially useful to create CTA or similar button-like hyperlinks that are styled differently than regular links.
+
+This can currently only be done using the Form builder by adding `classList` to the
+wysiwyg field:
+
+```php
+Wysiwyg::make()
+    ->name('description')
+    ->label('Description')
+    ->translatable()
+    ->classList(['btn' => 'Show this link as button'])
+```
+
 ## Manually setting input direction
 
 Introduced in `v3.1.0`

frontend/js/components/WysiwygTiptap.vue

@@ -186,19 +186,28 @@
                        :initial-value="linkWindow.href"
                        v-model="linkWindow.href"
                        :label="$trans('wysiwyg.link_window.link', 'Link')"
-                       :placeholder="$trans('wysiwyg.link_window.link_placeholder', 'Link to URL address')"
+                       :placeholder="$trans('wysiwyg.link_window.link_placeholder', 'https://...')"
         />
         <div>
-          <a href="#" class="link-browser-link" v-if="browserEndpoints" @click="browserIsOpen = true">
+          <a17-button class="link-browser-link" variant="aslink-grey" v-if="browserEndpoints" @click="browserIsOpen = true">
             {{$trans('wysiwyg.link_window.internal_browser_link', 'Select internal content')}}
-          </a>
+          </a17-button>
         </div>
-        <a17-inputframe>
+        <a17-inputframe name="link-options">
           <a17-checkbox name="link_target"
                         :initial-value="linkWindow.target"
-                        @change="linkWindow.target = $event ? '_blank' : null"
+                        @change="linkWindow.target = $event ? '_blank' : ''"
                         value="_blank"
-                        :label="$trans('wysiwyg.link_window.open_in_new_window', 'Open in a new window')"/>
+                        :label="$trans('wysiwyg.link_window.open_in_new_window', 'Open in a new tab')"/>
+          <div class="classList" v-if="linkWindow && linkWindow.classList && linkWindow.classList.length">
+            <a17-checkbox v-for="(item, index) in linkWindow.classList"
+                          :key="`link_class_${index}`"
+                          :name="`link_class_${index}`"
+                          :initial-value="linkWindow.classList[index].selected"
+                          @change="linkWindow.classList[index].selected = $event"
+                          :value="linkWindow.classList[index].value"
+                          :label="linkWindow.classList[index].label"/>
+          </div>
         </a17-inputframe>
 
         <div class="modalValidation">
@@ -267,6 +276,10 @@
         required: false,
         default: null
       },
+      classList: {
+        required: false,
+        default: null
+      },
       limitHeight: {
         type: Boolean,
         default: false
@@ -447,7 +460,8 @@
           textOriginal: this.editor.state.tr.doc.textBetween(startPos, endPos),
           text: this.editor.state.tr.doc.textBetween(startPos, endPos),
           href: markAttributes.href,
-          target: markAttributes.target ?? ''
+          target: markAttributes.target ?? '',
+          classList: this.classList ? this.classList.map(item => {item.selected = (markAttributes.class ?? '').includes(item.value); return item}) : [],
         }
 
         this.$nextTick(() => {
@@ -477,9 +491,9 @@
         }
 
         if (this.linkWindow.newLink) {
-          this.editor.commands.setLink({href: this.linkWindow.href, target: this.linkWindow.target})
+          this.editor.commands.setLink({href: this.linkWindow.href, target: this.linkWindow.target, class: this.linkWindow.classList.filter(item => item.selected).map(item => item.value).join(' ')})
         } else {
-          this.editor.commands.updateAttributes("link", {href: this.linkWindow.href, target: this.linkWindow.target})
+          this.editor.commands.updateAttributes("link", {href: this.linkWindow.href, target: this.linkWindow.target, class: this.linkWindow.classList.filter(item => item.selected).map(item => item.value).join(' ')})
         }
 
         this.$refs['link-modal'].close()
@@ -619,11 +633,22 @@
     &--link {
       z-index: $zindex__modal__lower;
     }
+    
+    .input {
+      margin-top: 35px !important;
+    }
+
+    .input-wrapper-link-options {
+      margin-top: 15px !important;
+    }
 
     .link-browser-link {
-      color: $color__text--light;
-      margin-top: 10px;
-      display: block;
+      padding-left: 0;
+    }
+
+    .classList > .checkbox {
+      display:block;
+      margin-top: 15px;
     }
   }
 

src/Services/Forms/Fields/Wysiwyg.php

@@ -57,6 +57,8 @@ class Wysiwyg extends BaseFormField
 
     public ?array $browserModules;
 
+    public ?array $classList;
+
     public static function make(): static
     {
         return new self(
@@ -207,4 +209,15 @@ public function browserModules(?array $modules = null): static
 
         return $this;
     }
+
+    /**
+     * Assosiative array ['class' => 'Label'] of classes
+     * than will be available to editor in the form of checkboxes
+     * when creating new link in modal
+     */
+    public function classList(array $list): static
+    {
+        $this->classList = array_map(fn($value, $label) => ['value' => $value, 'label' => $label, 'selected' => false], array_keys($list), $list);
+        return $this;
+    }
 }

src/View/Components/Fields/Wysiwyg.php

@@ -33,6 +33,7 @@ public function __construct(
         public ?array $customOptions = null,
         public ?array $browserModules = null,
         public ?array $endpoints = null,
+        public ?array $classList = null,
     ) {
         parent::__construct(
             name: $name,