BookStack/resources/js/wysiwyg/ui/defaults/buttons/controls.ts

81 lines
2.6 KiB
TypeScript
Raw Normal View History

import {EditorButton, EditorButtonDefinition} from "../../framework/buttons";
import undoIcon from "@icons/editor/undo.svg";
import {EditorUiContext} from "../../framework/core";
import {
BaseSelection,
CAN_REDO_COMMAND,
CAN_UNDO_COMMAND,
COMMAND_PRIORITY_LOW,
REDO_COMMAND,
UNDO_COMMAND
} from "lexical";
import redoIcon from "@icons/editor/redo.svg";
import sourceIcon from "@icons/editor/source-view.svg";
import {getEditorContentAsHtml} from "../../../actions";
import fullscreenIcon from "@icons/editor/fullscreen.svg";
export const undo: EditorButtonDefinition = {
label: 'Undo',
icon: undoIcon,
action(context: EditorUiContext) {
context.editor.dispatchCommand(UNDO_COMMAND, undefined);
},
isActive(selection: BaseSelection|null): boolean {
return false;
},
setup(context: EditorUiContext, button: EditorButton) {
button.toggleDisabled(true);
context.editor.registerCommand(CAN_UNDO_COMMAND, (payload: boolean): boolean => {
button.toggleDisabled(!payload)
return false;
}, COMMAND_PRIORITY_LOW);
}
}
export const redo: EditorButtonDefinition = {
label: 'Redo',
icon: redoIcon,
action(context: EditorUiContext) {
context.editor.dispatchCommand(REDO_COMMAND, undefined);
},
isActive(selection: BaseSelection|null): boolean {
return false;
},
setup(context: EditorUiContext, button: EditorButton) {
button.toggleDisabled(true);
context.editor.registerCommand(CAN_REDO_COMMAND, (payload: boolean): boolean => {
button.toggleDisabled(!payload)
return false;
}, COMMAND_PRIORITY_LOW);
}
}
export const source: EditorButtonDefinition = {
label: 'Source code',
icon: sourceIcon,
async action(context: EditorUiContext) {
const modal = context.manager.createModal('source');
const source = await getEditorContentAsHtml(context.editor);
modal.show({source});
},
isActive() {
return false;
}
};
export const fullscreen: EditorButtonDefinition = {
label: 'Fullscreen',
icon: fullscreenIcon,
async action(context: EditorUiContext, button: EditorButton) {
const isFullScreen = context.containerDOM.classList.contains('fullscreen');
context.containerDOM.classList.toggle('fullscreen', !isFullScreen);
(context.containerDOM.closest('body') as HTMLElement).classList.toggle('editor-is-fullscreen', !isFullScreen);
button.setActiveState(!isFullScreen);
},
isActive(selection, context: EditorUiContext) {
return context.containerDOM.classList.contains('fullscreen');
}
};