X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/130dc05517c071950523a9979046ca1885ff3e24..refs/pull/3616/head:/resources/js/wysiwyg/config.js diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 1a38c1f59..52c52592c 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -2,12 +2,15 @@ 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"; import {getPlugin as getCustomhrPlugin} from "./plugins-customhr"; import {getPlugin as getImagemanagerPlugin} from "./plugins-imagemanager"; import {getPlugin as getAboutPlugin} from "./plugins-about"; +import {getPlugin as getDetailsPlugin} from "./plugins-details"; +import {getPlugin as getTasklistPlugin} from "./plugins-tasklist"; const style_formats = [ {title: "Large Header", format: "h2", preview: 'color: blue;'}, @@ -27,7 +30,6 @@ const style_formats = [ ]; const formats = { - codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'}, alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'}, aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'}, alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'}, @@ -37,6 +39,35 @@ const formats = { calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}} }; +const color_map = [ + '#BFEDD2', '', + '#FBEEB8', '', + '#F8CAC6', '', + '#ECCAFA', '', + '#C2E0F4', '', + + '#2DC26B', '', + '#F1C40F', '', + '#E03E2D', '', + '#B96AD9', '', + '#3598DB', '', + + '#169179', '', + '#E67E23', '', + '#BA372A', '', + '#843FA1', '', + '#236FA1', '', + + '#ECF0F1', '', + '#CED4D9', '', + '#95A5A6', '', + '#7E8C8D', '', + '#34495E', '', + + '#000000', '', + '#ffffff', '' +]; + function file_picker_callback(callback, value, meta) { // field_name, url, type, win @@ -60,56 +91,12 @@ 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' - } - }; - - 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} + * @return {string[]} */ function gatherPlugins(options) { const plugins = [ "image", - "imagetools", "table", - "paste", "link", "autolink", "fullscreen", @@ -121,6 +108,8 @@ function gatherPlugins(options) { "media", "imagemanager", "about", + "details", + "tasklist", options.textDirection === 'rtl' ? 'directionality' : '', ]; @@ -128,13 +117,15 @@ function gatherPlugins(options) { window.tinymce.PluginManager.add('customhr', getCustomhrPlugin(options)); window.tinymce.PluginManager.add('imagemanager', getImagemanagerPlugin(options)); window.tinymce.PluginManager.add('about', getAboutPlugin(options)); + window.tinymce.PluginManager.add('details', getDetailsPlugin(options)); + window.tinymce.PluginManager.add('tasklist', getTasklistPlugin(options)); if (options.drawioUrl) { window.tinymce.PluginManager.add('drawio', getDrawioPlugin(options)); plugins.push('drawio'); } - return plugins.filter(plugin => Boolean(plugin)).join(' '); + return plugins.filter(plugin => Boolean(plugin)); } /** @@ -150,6 +141,23 @@ function fetchCustomHeadContent() { return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n'); } +/** + * Setup a serializer filter for
tags to ensure they're not rendered + * within code blocks and that we use newlines there instead. + * @param {Editor} editor + */ +function setupBrFilter(editor) { + editor.serializer.addNodeFilter('br', function(nodes) { + for (const node of nodes) { + if (node.parent && node.parent.name === 'code') { + const newline = tinymce.html.Node.create('#text'); + newline.value = '\n'; + node.replace(newline); + } + } + }); +} + /** * @param {WysiwygConfigOptions} options * @return {function(Editor)} @@ -158,13 +166,17 @@ function getSetupCallback(options) { return function(editor) { editor.on('ExecCommand change input NodeChange ObjectResized', editorChange); listenForCommonEvents(editor); - registerShortcuts(editor); listenForDragAndPaste(editor, options); editor.on('init', () => { editorChange(); scrollToQueryString(editor); window.editor = editor; + registerShortcuts(editor); + }); + + editor.on('PreInit', () => { + setupBrFilter(editor); }); function editorChange() { @@ -189,6 +201,25 @@ function getSetupCallback(options) { } } +/** + * @param {WysiwygConfigOptions} options + */ +function getContentStyle(options) { + return ` +html, body, html.dark-mode { + background: ${options.darkMode ? '#222' : '#fff'}; +} +body { + padding-left: 15px !important; + padding-right: 15px !important; + height: initial !important; + margin:0!important; + margin-left: auto! important; + margin-right: auto !important; + overflow-y: hidden !important; +}`.trim().replace('\n', ''); +} + /** * @param {WysiwygConfigOptions} options * @return {Object} @@ -198,18 +229,20 @@ export function build(options) { // Set language window.tinymce.addI18n(options.language, options.translationMap); - const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options); + // BookStack Version + const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1]; // Return config object return { width: '100%', height: '100%', selector: '#html-editor', + cache_suffix: '?version=' + version, content_css: [ window.baseUrl('/dist/styles.css'), ], branding: false, - skin: options.darkMode ? 'oxide-dark' : 'oxide', + skin: options.darkMode ? 'tinymce-5-dark' : 'tinymce-5', body_class: 'page-content', browser_spellcheck: true, relative_urls: false, @@ -218,23 +251,34 @@ export function build(options) { remove_script_host: false, document_base_url: window.baseUrl('/'), end_container_on_empty_block: true, + remove_trailing_brs: false, statusbar: false, menubar: false, paste_data_images: false, - extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram]', + extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],div[*],li[class|checked]', automatic_uploads: false, - valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]", + custom_elements: 'doc-root,code-block', + valid_children: [ + "-div[p|h1|h2|h3|h4|h5|h6|blockquote|code-block]", + "+div[pre|img]", + "-doc-root[doc-root|#text]", + "-li[details]", + "+code-block[pre]", + "+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]" + ].join(','), plugins: gatherPlugins(options), - imagetools_toolbar: 'imageoptions', contextmenu: false, - 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;}`, + toolbar: getPrimaryToolbar(options), + content_style: getContentStyle(options), style_formats, style_formats_merge: false, media_alt_source: false, media_poster: false, formats, + table_style_by_css: true, + table_use_colgroups: true, file_picker_types: 'file image', + color_map, file_picker_callback, paste_preprocess(plugin, args) { const content = args.content; @@ -247,9 +291,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); }, };