diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 11090ce4b..519e85a5f 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -16,7 +16,6 @@ const style_formats = [ {title: "Tiny Header", format: "h5"}, {title: "Paragraph", format: "p", exact: true, classes: ''}, {title: "Blockquote", format: "blockquote"}, - {title: "Inline Code", inline: "code"}, { title: "Callouts", items: [ {title: "Information", format: 'calloutinfo'}, @@ -61,24 +60,45 @@ function file_picker_callback(callback, value, meta) { /** * @param {WysiwygConfigOptions} options - * @return {string} + * @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' + } + }; + const toolbar = [ 'undo redo', 'styleselect', - 'bold italic underline strikethrough superscript subscript', + 'bold italic underline formatoverflow', 'forecolor backcolor', 'alignleft aligncenter alignright alignjustify', - 'bullist numlist outdent indent', + 'bullist numlist listoverflow', textDirPlugins, - 'table imagemanager-insert link hr codeeditor drawio media', - 'removeformat code about fullscreen' + 'link table imagemanager-insert insertoverflow', + 'code about fullscreen' ]; - return toolbar.filter(row => Boolean(row)).join(' | '); + return { + toolbar: toolbar.filter(row => Boolean(row)).join(' | '), + groupButtons, + }; } /** @@ -168,6 +188,15 @@ function getSetupCallback(options) { // Custom handler hook window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor}); + + // Inline code format button + editor.ui.registry.addButton('inlinecode', { + tooltip: 'Inline code', + icon: 'sourcecode', + onAction() { + editor.execCommand('mceToggleFormat', false, 'code'); + } + }) } } @@ -180,6 +209,8 @@ export function build(options) { // Set language window.tinymce.addI18n(options.language, options.translationMap); + const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options); + // Return config object return { width: '100%', @@ -207,7 +238,7 @@ export function build(options) { plugins: gatherPlugins(options), imagetools_toolbar: 'imageoptions', contextmenu: false, - toolbar: buildToolbar(options), + toolbar: toolbar, content_style: `html, body, html.dark-mode {background: ${options.darkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`, style_formats, style_formats_merge: false, @@ -225,7 +256,12 @@ export function build(options) { init_instance_callback(editor) { loadCustomHeadContent(editor); }, - setup: getSetupCallback(options), + setup(editor) { + for (const [key, config] of Object.entries(toolBarGroupButtons)) { + editor.ui.registry.addGroupToolbarButton(key, config); + } + getSetupCallback(options)(editor); + }, }; } diff --git a/resources/lang/en/editor.php b/resources/lang/en/editor.php index ed40133e4..4a21f17f6 100644 --- a/resources/lang/en/editor.php +++ b/resources/lang/en/editor.php @@ -23,6 +23,7 @@ return [ 'bottom' => 'Bottom', 'width' => 'Width', 'height' => 'Height', + 'More' => 'More', // Toolbar 'formats' => 'Formats', @@ -32,7 +33,7 @@ return [ 'header_tiny' => 'Tiny Header', 'paragraph' => 'Paragraph', 'blockquote' => 'Blockquote', - 'inline_code' => 'Inline Code', + 'inline_code' => 'Inline code', 'callouts' => 'Callouts', 'callout_information' => 'Information', 'callout_success' => 'Success', @@ -132,6 +133,7 @@ return [ 'open_link_new' => 'New window', // About view + 'about_title' => 'About the WYSIWYG Editor', 'editor_license' => 'Editor License & Copyright', 'editor_tiny_license' => 'This editor is built using :tinyLink which is provided under an LGPLv2.1 license.', 'editor_tiny_license_link' => 'The copyright and license details of TinyMCE can be found here.', diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss index 4f9791477..d64e0e63d 100644 --- a/resources/sass/_tinymce.scss +++ b/resources/sass/_tinymce.scss @@ -30,6 +30,9 @@ /** * Format Menu Hacks */ +.tox .tox-tbtn--bespoke .tox-tbtn__select-label { + width: 6em !important; +} .tox-menu .tox-collection__item blockquote::before { content: none; }