refactor(editor): move floating toolbar config into this repo

This commit is contained in:
Elian Doran 2025-02-11 20:17:02 +02:00
parent 2ac5e860b1
commit aad38fdd21
No known key found for this signature in database
4 changed files with 124 additions and 68 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,61 +1,124 @@
export function buildToolbarConfig() {
return buildClassicToolbar();
}
import options from "../../../services/options.js";
import utils from "../../../services/utils.js";
function buildClassicToolbar() {
// For nested toolbars, refer to https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/toolbar.html#grouping-toolbar-items-in-dropdowns-nested-toolbars.
return {
items: [
'heading',
'fontSize',
'|',
'bold',
'italic',
{
label: "Text formatting",
icon: "text",
items: [
'underline',
'strikethrough',
'superscript',
'subscript',
'code',
],
},
'|',
'fontColor',
'fontBackgroundColor',
'removeFormat',
'|',
'bulletedList', 'numberedList', 'todoList',
'|',
'blockQuote',
'insertTable',
'codeBlock',
'footnote',
{
label: "Insert",
icon: "plus",
items: [
'imageUpload',
'|',
'link',
'internallink',
'includeNote',
'|',
'specialCharacters',
'math',
'mermaid',
'horizontalLine',
'pageBreak'
]
},
'|',
'outdent', 'indent',
'|',
'markdownImport',
'cuttonote',
'findAndReplace'
]
export function buildToolbarConfig(isClassicToolbar: boolean) {
if (isClassicToolbar) {
const multilineToolbar = utils.isDesktop() && options.get("textNoteEditorMultilineToolbar") === "true"
return buildClassicToolbar(multilineToolbar);
} else {
return buildFloatingToolbar();
}
}
function buildClassicToolbar(multilineToolbar: boolean) {
// For nested toolbars, refer to https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/toolbar.html#grouping-toolbar-items-in-dropdowns-nested-toolbars.
return {
toolbar: {
items: [
'heading',
'fontSize',
'|',
'bold',
'italic',
{
label: "Text formatting",
icon: "text",
items: [
'underline',
'strikethrough',
'superscript',
'subscript',
'code',
],
},
'|',
'fontColor',
'fontBackgroundColor',
'removeFormat',
'|',
'bulletedList', 'numberedList', 'todoList',
'|',
'blockQuote',
'insertTable',
'codeBlock',
'footnote',
{
label: "Insert",
icon: "plus",
items: [
'imageUpload',
'|',
'link',
'internallink',
'includeNote',
'|',
'specialCharacters',
'math',
'mermaid',
'horizontalLine',
'pageBreak'
]
},
'|',
'outdent', 'indent',
'|',
'markdownImport',
'cuttonote',
'findAndReplace'
],
shouldNotGroupWhenFull: multilineToolbar
}
}
}
function buildFloatingToolbar() {
return {
toolbar: {
items: [
'fontSize',
'bold',
'italic',
'underline',
'strikethrough',
'superscript',
'subscript',
'fontColor',
'fontBackgroundColor',
'code',
'link',
'removeFormat',
'internallink',
'cuttonote'
]
},
blockToolbar: [
'heading',
'|',
'bulletedList', 'numberedList', 'todoList',
'|',
'blockQuote', 'codeBlock', 'insertTable',
'footnote',
{
label: "Insert",
icon: "plus",
items: [
'internallink',
'includeNote',
'|',
'math',
'mermaid',
'horizontalLine',
'pageBreak'
]
},
'|',
'outdent', 'indent',
'|',
'imageUpload',
'markdownImport',
'specialCharacters',
'findAndReplace'
]
};
}

View File

@ -184,17 +184,10 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
this.watchdog.setCreator(async (elementOrData, editorConfig) => {
logInfo("Creating new CKEditor");
const extraOpts = {};
if (isClassicEditor) {
extraOpts.toolbar = {
...buildToolbarConfig(),
shouldNotGroupWhenFull: utils.isDesktop() && options.get("textNoteEditorMultilineToolbar") === "true"
};
}
const editor = await editorClass.create(elementOrData, {
...editorConfig,
...extraOpts,
...buildToolbarConfig(),
htmlSupport: {
allow: JSON.parse(options.get("allowedHtmlTags")),
styles: true,