mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Added a custom link context toolbar
- Allows for easy unlinking, link preview or link editing. - Created custom one to limit actions available. - Performed refactoring of non-plugin toolbar editor code to extact into its own file. Related to #3276
This commit is contained in:
parent
20ecaa5c5a
commit
6252b46395
@ -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<string, 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);
|
||||
|
||||
// Return config object
|
||||
return {
|
||||
@ -256,7 +213,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,
|
||||
@ -276,9 +233,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);
|
||||
},
|
||||
};
|
||||
|
64
resources/js/wysiwyg/toolbars.js
Normal file
64
resources/js/wysiwyg/toolbars.js
Normal file
@ -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);
|
||||
}
|
Loading…
Reference in New Issue
Block a user