X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/6545afacd69bbb1d13e4e4c97da84004789a99e8..refs/pull/4467/head:/resources/js/wysiwyg/config.js diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 85c1919d4..37b810718 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -1,32 +1,35 @@ -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 {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 getDetailsPlugin} from "./plugins-details"; -import {getPlugin as getTasklistPlugin} from "./plugins-tasklist"; +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'}, + ], }, ]; @@ -37,10 +40,10 @@ const formats = { 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'}}, }; -const color_map = [ +const colorMap = [ '#BFEDD2', '', '#FBEEB8', '', '#F8CAC6', '', @@ -66,14 +69,13 @@ const color_map = [ '#34495E', '', '#000000', '', - '#ffffff', '' + '#ffffff', '', ]; -function file_picker_callback(callback, value, meta) { - +function filePickerCallback(callback, value, meta) { // field_name, url, type, win if (meta.filetype === 'file') { - /** @type {EntitySelectorPopup} **/ + /** @type {EntitySelectorPopup} * */ const selector = window.$components.first('entity-selector-popup'); selector.show(entity => { callback(entity.link, { @@ -85,13 +87,12 @@ function file_picker_callback(callback, value, meta) { if (meta.filetype === 'image') { // Show image manager - /** @type {ImageManager} **/ + /** @type {ImageManager} * */ const imageManager = window.$components.first('image-manager'); - imageManager.show(function (image) { + imageManager.show(image => { callback(image.url, {alt: image.name}); }, 'gallery'); } - } /** @@ -100,30 +101,30 @@ function file_picker_callback(callback, value, meta) { */ function gatherPlugins(options) { const plugins = [ - "image", - "table", - "link", - "autolink", - "fullscreen", - "code", - "customhr", - "autosave", - "lists", - "codeeditor", - "media", - "imagemanager", - "about", - "details", - "tasklist", + '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('details', getDetailsPlugin(options)); - window.tinymce.PluginManager.add('tasklist', getTasklistPlugin(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)); @@ -137,11 +138,11 @@ function gatherPlugins(options) { * 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'); } @@ -152,10 +153,10 @@ function fetchCustomHeadContent() { * @param {Editor} editor */ function setupBrFilter(editor) { - editor.serializer.addNodeFilter('br', function(nodes) { + editor.serializer.addNodeFilter('br', nodes => { for (const node of nodes) { if (node.parent && node.parent.name === 'code') { - const newline = tinymce.html.Node.create('#text'); + const newline = window.tinymce.html.Node.create('#text'); newline.value = '\n'; node.replace(newline); } @@ -168,7 +169,14 @@ function setupBrFilter(editor) { * @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); listenForDragAndPaste(editor, options); @@ -184,13 +192,6 @@ function getSetupCallback(options) { setupBrFilter(editor); }); - function editorChange() { - if (options.darkMode) { - editor.contentDocument.documentElement.classList.add('dark-mode'); - } - window.$events.emit('editor-html-change', ''); - } - // Custom handler hook window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor}); @@ -200,9 +201,9 @@ function getSetupCallback(options) { icon: 'sourcecode', onAction() { editor.execCommand('mceToggleFormat', false, 'code'); - } - }) - } + }, + }); + }; } /** @@ -229,7 +230,6 @@ body { * @return {Object} */ export function build(options) { - // Set language window.tinymce.addI18n(options.language, options.translationMap); @@ -241,7 +241,7 @@ export function build(options) { width: '100%', height: '100%', selector: '#html-editor', - cache_suffix: '?version=' + version, + cache_suffix: `?version=${version}`, content_css: [ window.baseUrl('/dist/styles.css'), ], @@ -263,18 +263,18 @@ export function build(options) { automatic_uploads: false, 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]" + '-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), contextmenu: false, toolbar: getPrimaryToolbar(options), content_style: getContentStyle(options), - style_formats, + style_formats: styleFormats, style_formats_merge: false, media_alt_source: false, media_poster: false, @@ -282,10 +282,10 @@ export function build(options) { table_style_by_css: true, table_use_colgroups: true, file_picker_types: 'file image', - color_map, - file_picker_callback, + color_map: colorMap, + file_picker_callback: filePickerCallback, paste_preprocess(plugin, args) { - const content = args.content; + const {content} = args; if (content.indexOf('