X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/130dc05517c071950523a9979046ca1885ff3e24..refs/pull/4467/head:/resources/js/wysiwyg/config.js diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 1a38c1f59..37b810718 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -1,47 +1,83 @@ -import {register as registerShortcuts} from "./shortcuts"; -import {listen as listenForCommonEvents} from "./common-events"; -import {scrollToQueryString} from "./scrolling"; -import {listenForDragAndPaste} from "./drop-paste-handling"; +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 {registerCustomIcons} from './icons'; -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 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;'}, - {title: "Medium Header", format: "h3"}, - {title: "Small Header", format: "h4"}, - {title: "Tiny Header", format: "h5"}, - {title: "Paragraph", format: "p", exact: true, classes: ''}, - {title: "Blockquote", format: "blockquote"}, +const styleFormats = [ + {title: 'Large Header', format: 'h2', preview: 'color: blue;'}, + {title: 'Medium Header', format: 'h3'}, + {title: 'Small Header', format: 'h4'}, + {title: 'Tiny Header', format: 'h5'}, { - title: "Callouts", items: [ - {title: "Information", format: 'calloutinfo'}, - {title: "Success", format: 'calloutsuccess'}, - {title: "Warning", format: 'calloutwarning'}, - {title: "Danger", format: 'calloutdanger'} - ] + title: 'Paragraph', format: 'p', exact: true, classes: '', + }, + {title: 'Blockquote', format: 'blockquote'}, + { + title: 'Callouts', + items: [ + {title: 'Information', format: 'calloutinfo'}, + {title: 'Success', format: 'calloutsuccess'}, + {title: 'Warning', format: 'calloutwarning'}, + {title: 'Danger', format: 'calloutdanger'}, + ], }, ]; 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'}, calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}}, calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}}, calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}}, - calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}} + calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}, }; -function file_picker_callback(callback, value, meta) { +const colorMap = [ + '#BFEDD2', '', + '#FBEEB8', '', + '#F8CAC6', '', + '#ECCAFA', '', + '#C2E0F4', '', + + '#2DC26B', '', + '#F1C40F', '', + '#E03E2D', '', + '#B96AD9', '', + '#3598DB', '', + + '#169179', '', + '#E67E23', '', + '#BA372A', '', + '#843FA1', '', + '#236FA1', '', + + '#ECF0F1', '', + '#CED4D9', '', + '#95A5A6', '', + '#7E8C8D', '', + '#34495E', '', + + '#000000', '', + '#ffffff', '', +]; +function filePickerCallback(callback, value, meta) { // field_name, url, type, win if (meta.filetype === 'file') { - window.EntitySelectorPopup.show(entity => { + /** @type {EntitySelectorPopup} * */ + const selector = window.$components.first('entity-selector-popup'); + selector.show(entity => { callback(entity.link, { text: entity.name, title: entity.name, @@ -51,129 +87,110 @@ function file_picker_callback(callback, value, meta) { if (meta.filetype === 'image') { // Show image manager - window.ImageManager.show(function (image) { + /** @type {ImageManager} * */ + const imageManager = window.$components.first('image-manager'); + imageManager.show(image => { callback(image.url, {alt: image.name}); }, 'gallery'); } - } /** * @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", - "code", - "customhr", - "autosave", - "lists", - "codeeditor", - "media", - "imagemanager", - "about", + 'image', + 'table', + 'link', + 'autolink', + 'fullscreen', + 'code', + 'customhr', + 'autosave', + 'lists', + 'codeeditor', + 'media', + 'imagemanager', + 'about', + 'details', + 'tasklist', options.textDirection === 'rtl' ? 'directionality' : '', ]; - window.tinymce.PluginManager.add('codeeditor', getCodeeditorPlugin(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('codeeditor', getCodeeditorPlugin()); + window.tinymce.PluginManager.add('customhr', getCustomhrPlugin()); + window.tinymce.PluginManager.add('imagemanager', getImagemanagerPlugin()); + window.tinymce.PluginManager.add('about', getAboutPlugin()); + window.tinymce.PluginManager.add('details', getDetailsPlugin()); + window.tinymce.PluginManager.add('tasklist', getTasklistPlugin()); 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)); } /** * Fetch custom HTML head content from the parent page head into the editor. */ function fetchCustomHeadContent() { - const headContentLines = document.head.innerHTML.split("\n"); + const headContentLines = document.head.innerHTML.split('\n'); const startLineIndex = headContentLines.findIndex(line => line.trim() === ''); const endLineIndex = headContentLines.findIndex(line => line.trim() === ''); if (startLineIndex === -1 || endLineIndex === -1) { - return '' + return ''; } 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', nodes => { + for (const node of nodes) { + if (node.parent && node.parent.name === 'code') { + const newline = window.tinymce.html.Node.create('#text'); + newline.value = '\n'; + node.replace(newline); + } + } + }); +} + /** * @param {WysiwygConfigOptions} options * @return {function(Editor)} */ function getSetupCallback(options) { - return function(editor) { + return function setupCallback(editor) { + function editorChange() { + if (options.darkMode) { + editor.contentDocument.documentElement.classList.add('dark-mode'); + } + window.$events.emit('editor-html-change', ''); + } + 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); }); - function editorChange() { - const content = editor.getContent(); - if (options.darkMode) { - editor.contentDocument.documentElement.classList.add('dark-mode'); - } - window.$events.emit('editor-html-change', content); - } + editor.on('PreInit', () => { + setupBrFilter(editor); + }); // Custom handler hook window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor}); @@ -184,9 +201,28 @@ function getSetupCallback(options) { icon: 'sourcecode', onAction() { editor.execCommand('mceToggleFormat', false, 'code'); - } - }) - } + }, + }); + }; +} + +/** + * @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', ''); } /** @@ -194,22 +230,23 @@ function getSetupCallback(options) { * @return {Object} */ 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,26 +255,37 @@ 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|style]', 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|hr]', + ].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;}`, - style_formats, + toolbar: getPrimaryToolbar(options), + content_style: getContentStyle(options), + style_formats: styleFormats, 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', - file_picker_callback, + color_map: colorMap, + file_picker_callback: filePickerCallback, paste_preprocess(plugin, args) { - const content = args.content; + const {content} = args; if (content.indexOf('