Added a custom link context toolbar

- Allows for easy unlinking, link preview or link editing.
- Created custom one to limit actions available.
- Performed refactoring of non-plugin toolbar editor code to extact into
  its own file.

Related to #3276

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 1b3b6e7b572053989cc4babebee20b6d4a4778d8..2da1e2c989d704bb8961bc330494b66c360c47a7 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -2,6 +2,7 @@ import {register as registerShortcuts} from "./shortcuts";
 import {listen as listenForCommonEvents} from "./common-events";
 import {scrollToQueryString} from "./scrolling";
 import {listenForDragAndPaste} from "./drop-paste-handling";
+import {getPrimaryToolbar, registerAdditionalToolbars} from "./toolbars";
 
 import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor";
 import {getPlugin as getDrawioPlugin} from "./plugin-drawio";
@@ -58,48 +59,6 @@ function file_picker_callback(callback, value, meta) {
 
 }
 
-/**
- * @param {WysiwygConfigOptions} options
- * @return {{toolbar: string, groupButtons: Object<string, Object>}}
- */
-function buildToolbar(options) {
-    const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
-
-    const groupButtons = {
-        formatoverflow: {
-            icon: 'more-drawer',
-            tooltip: 'More',
-            items: 'strikethrough superscript subscript inlinecode removeformat'
-        },
-        listoverflow: {
-            icon: 'more-drawer',
-            tooltip: 'More',
-            items: 'outdent indent'
-        },
-        insertoverflow: {
-            icon: 'more-drawer',
-            tooltip: 'More',
-            items: 'hr codeeditor drawio media details'
-        }
-    };
-
-    const toolbar = [
-        'undo redo',
-        'styleselect',
-        'bold italic underline forecolor backcolor formatoverflow',
-        'alignleft aligncenter alignright alignjustify',
-        'bullist numlist listoverflow',
-        textDirPlugins,
-        'link table imagemanager-insert insertoverflow',
-        'code about fullscreen'
-    ];
-
-    return {
-        toolbar: toolbar.filter(row => Boolean(row)).join(' | '),
-        groupButtons,
-    };
-}
-
 /**
  * @param {WysiwygConfigOptions} options
  * @return {string}
@@ -218,8 +177,6 @@ export function build(options) {
 
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
-    // Build toolbar content
-    const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
 
     // Return config object
     return {
@@ -256,7 +213,7 @@ export function build(options) {
         plugins: gatherPlugins(options),
         imagetools_toolbar: 'imageoptions',
         contextmenu: false,
-        toolbar: toolbar,
+        toolbar: getPrimaryToolbar(options),
         content_style: getContentStyle(options),
         style_formats,
         style_formats_merge: false,
@@ -276,9 +233,7 @@ export function build(options) {
             head.innerHTML += fetchCustomHeadContent();
         },
         setup(editor) {
-            for (const [key, config] of Object.entries(toolBarGroupButtons)) {
-                editor.ui.registry.addGroupToolbarButton(key, config);
-            }
+            registerAdditionalToolbars(editor, options);
             getSetupCallback(options)(editor);
         },
     };

diff --git a/resources/js/wysiwyg/toolbars.js b/resources/js/wysiwyg/toolbars.js
new file mode 100644 (file)
index 0000000..40cf09d
--- /dev/null
+++ b/resources/js/wysiwyg/toolbars.js
@@ -0,0 +1,64 @@
+/**
+ * @param {WysiwygConfigOptions} options
+ * @return {String}
+ */
+export function getPrimaryToolbar(options) {
+    const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
+
+    const toolbar = [
+        'undo redo',
+        'styleselect',
+        'bold italic underline forecolor backcolor formatoverflow',
+        'alignleft aligncenter alignright alignjustify',
+        'bullist numlist listoverflow',
+        textDirPlugins,
+        'link table imagemanager-insert insertoverflow',
+        'code about fullscreen'
+    ];
+
+    return toolbar.filter(row => Boolean(row)).join(' | ');
+}
+
+/**
+ * @param {Editor} editor
+ */
+function registerPrimaryToolbarGroups(editor) {
+    editor.ui.registry.addGroupToolbarButton('formatoverflow', {
+        icon: 'more-drawer',
+        tooltip: 'More',
+        items: 'strikethrough superscript subscript inlinecode removeformat'
+    });
+    editor.ui.registry.addGroupToolbarButton('listoverflow', {
+        icon: 'more-drawer',
+        tooltip: 'More',
+        items: 'outdent indent'
+    });
+    editor.ui.registry.addGroupToolbarButton('insertoverflow', {
+        icon: 'more-drawer',
+        tooltip: 'More',
+        items: 'hr codeeditor drawio media details'
+    });
+}
+
+/**
+ * @param {Editor} editor
+ */
+function registerLinkContextToolbar(editor) {
+    editor.ui.registry.addContextToolbar('linkcontexttoolbar', {
+        predicate(node) {
+            return node.closest('a') !== null;
+        },
+        position: 'node',
+        scope: 'node',
+        items: 'link unlink openlink'
+    });
+}
+
+/**
+ * @param {Editor} editor
+ * @param {WysiwygConfigOptions} options
+ */
+export function registerAdditionalToolbars(editor, options) {
+    registerPrimaryToolbarGroups(editor);
+    registerLinkContextToolbar(editor);
+}
\ No newline at end of file