BookStack/resources/js/wysiwyg/ui/toolbars.ts
2024-07-09 20:49:47 +01:00

114 lines
4.3 KiB
TypeScript

import {EditorButton} from "./framework/buttons";
import {
blockquote, bold, bulletList, clearFormating, code, codeBlock,
dangerCallout, details, fullscreen,
h2, h3, h4, h5, highlightColor, horizontalRule, image,
infoCallout, italic, link, numberList, paragraph,
redo, source, strikethrough, subscript,
successCallout, superscript, table, taskList, textColor, underline,
undo, unlink,
warningCallout
} from "./defaults/button-definitions";
import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiContext, EditorUiElement} from "./framework/core";
import {el} from "../helpers";
import {EditorFormatMenu} from "./framework/blocks/format-menu";
import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
import {EditorColorPicker} from "./framework/blocks/color-picker";
import {EditorTableCreator} from "./framework/blocks/table-creator";
import {EditorColorButton} from "./framework/blocks/color-button";
import {EditorOverflowContainer} from "./framework/blocks/overflow-container";
export function getMainEditorFullToolbar(): EditorContainerUiElement {
return new EditorSimpleClassContainer('editor-toolbar-main', [
// History state
new EditorOverflowContainer(2, [
new EditorButton(undo),
new EditorButton(redo),
]),
// Block formats
new EditorFormatMenu([
new FormatPreviewButton(el('h2'), h2),
new FormatPreviewButton(el('h3'), h3),
new FormatPreviewButton(el('h4'), h4),
new FormatPreviewButton(el('h5'), h5),
new FormatPreviewButton(el('blockquote'), blockquote),
new FormatPreviewButton(el('p'), paragraph),
new EditorDropdownButton({label: 'Callouts'}, true, [
new FormatPreviewButton(el('p', {class: 'callout info'}), infoCallout),
new FormatPreviewButton(el('p', {class: 'callout success'}), successCallout),
new FormatPreviewButton(el('p', {class: 'callout warning'}), warningCallout),
new FormatPreviewButton(el('p', {class: 'callout danger'}), dangerCallout),
]),
]),
// Inline formats
new EditorOverflowContainer(6, [
new EditorButton(bold),
new EditorButton(italic),
new EditorButton(underline),
new EditorDropdownButton(new EditorColorButton(textColor, 'color'), false, [
new EditorColorPicker('color'),
]),
new EditorDropdownButton(new EditorColorButton(highlightColor, 'background-color'), false, [
new EditorColorPicker('background-color'),
]),
new EditorButton(strikethrough),
new EditorButton(superscript),
new EditorButton(subscript),
new EditorButton(code),
new EditorButton(clearFormating),
]),
// Lists
new EditorOverflowContainer(3, [
new EditorButton(bulletList),
new EditorButton(numberList),
new EditorButton(taskList),
]),
// Insert types
new EditorOverflowContainer(6, [
new EditorButton(link),
new EditorDropdownButton(table, false, [
new EditorTableCreator(),
]),
new EditorButton(image),
new EditorButton(horizontalRule),
new EditorButton(codeBlock),
new EditorButton(details),
]),
// Meta elements
new EditorOverflowContainer(3, [
new EditorButton(source),
new EditorButton(fullscreen),
// Test
// new EditorButton({
// label: 'Test button',
// action(context: EditorUiContext) {
// context.editor.update(() => {
// // Do stuff
// });
// },
// isActive() {
// return false;
// }
// })
]),
]);
}
export function getImageToolbarContent(): EditorUiElement[] {
return [new EditorButton(image)];
}
export function getLinkToolbarContent(): EditorUiElement[] {
return [
new EditorButton(link),
new EditorButton(unlink),
];
}