diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 692c5bce6..965b14d08 100644 --- 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}} - */ -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); }, }; diff --git a/resources/js/wysiwyg/shortcuts.js b/resources/js/wysiwyg/shortcuts.js index 7b7af41ec..8b51437f1 100644 --- a/resources/js/wysiwyg/shortcuts.js +++ b/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(); + }) + }); } \ No newline at end of file diff --git a/resources/js/wysiwyg/toolbars.js b/resources/js/wysiwyg/toolbars.js new file mode 100644 index 000000000..40cf09dc3 --- /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 diff --git a/resources/lang/en/editor.php b/resources/lang/en/editor.php index 76a9f7fca..4fb1b8f2e 100644 --- a/resources/lang/en/editor.php +++ b/resources/lang/en/editor.php @@ -145,6 +145,7 @@ return [ '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:', diff --git a/resources/views/help/wysiwyg.blade.php b/resources/views/help/wysiwyg.blade.php index 932e37d2e..30fdc18de 100644 --- a/resources/views/help/wysiwyg.blade.php +++ b/resources/views/help/wysiwyg.blade.php @@ -115,6 +115,15 @@ {{ trans('editor.callouts_cycle') }} + + + Ctrl+Shift+K + + + Cmd+Shift+K + + {{ trans('editor.link_selector') }} +