Merge pull request #3298 from BookStackApp/wysiwyg_links

WYSIWYG editor link updates

Author: ssddanbrown

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);
 
  // BookStack Version
  const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];
@@ -261,7 +218,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,
@@ -281,9 +238,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);
  },
  };

resources/js/wysiwyg/shortcuts.js

@@ -39,4 +39,19 @@ export function register(editor) {
 
  editor.formatter.apply('callout' + newFormat);
  });
+
+ // Link selector shortcut
+ editor.shortcuts.add('meta+shift+K', '', function() {
+ window.EntitySelectorPopup.show(function(entity) {
+
+ if (editor.selection.isCollapsed()) {
+ editor.insertContent(editor.dom.createHTML('a', {href: entity.link}, editor.dom.encode(entity.name)));
+ } else {
+ editor.formatter.apply('link', {href: entity.link});
+ }
+
+ editor.selection.collapse(false);
+ editor.focus();
+ })
+ });
 }

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);
+}

resources/lang/en/editor.php

@@ -145,6 +145,7 @@
  'editor_tiny_license_link' => 'The copyright and license details of TinyMCE can be found here.',
  'save_continue' => 'Save Page & Continue',
  'callouts_cycle' => '(Keep pressing to toggle through types)',
+ 'link_selector' => 'Link to content',
  'shortcuts' => 'Shortcuts',
  'shortcut' => 'Shortcut',
  'shortcuts_intro' => 'The following shortcuts are available in the editor:',

resources/views/help/wysiwyg.blade.php

@@ -115,6 +115,15 @@
  {{ trans('editor.callouts_cycle') }}
  </td>
  </tr>
+ <tr>
+ <td>
+ <code>Ctrl</code>+<code>Shift</code>+<code>K</code>
+ </td>
+ <td>
+ <code>Cmd</code>+<code>Shift</code>+<code>K</code>
+ </td>
+ <td>{{ trans('editor.link_selector') }}</td>
+ </tr>
  </tbody>
  </table>