BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/buttons/controls.ts

   1 import {EditorButton, EditorButtonDefinition} from "../../framework/buttons";
   2 import undoIcon from "@icons/editor/undo.svg";
   3 import {EditorUiContext} from "../../framework/core";
   4 import {
   5     BaseSelection,
   6     CAN_REDO_COMMAND,
   7     CAN_UNDO_COMMAND,
   8     COMMAND_PRIORITY_LOW,
   9     REDO_COMMAND,
  10     UNDO_COMMAND
  11 } from "lexical";
  12 import redoIcon from "@icons/editor/redo.svg";
  13 import sourceIcon from "@icons/editor/source-view.svg";
  14 import {getEditorContentAsHtml} from "../../../utils/actions";
  15 import fullscreenIcon from "@icons/editor/fullscreen.svg";
  16
  17 export const undo: EditorButtonDefinition = {
  18     label: 'Undo',
  19     icon: undoIcon,
  20     action(context: EditorUiContext) {
  21         context.editor.dispatchCommand(UNDO_COMMAND, undefined);
  22         context.manager.triggerFutureStateRefresh();
  23     },
  24     isActive(selection: BaseSelection|null): boolean {
  25         return false;
  26     },
  27     setup(context: EditorUiContext, button: EditorButton) {
  28         button.toggleDisabled(true);
  29
  30         context.editor.registerCommand(CAN_UNDO_COMMAND, (payload: boolean): boolean => {
  31             button.toggleDisabled(!payload)
  32             return false;
  33         }, COMMAND_PRIORITY_LOW);
  34     }
  35 }
  36
  37 export const redo: EditorButtonDefinition = {
  38     label: 'Redo',
  39     icon: redoIcon,
  40     action(context: EditorUiContext) {
  41         context.editor.dispatchCommand(REDO_COMMAND, undefined);
  42         context.manager.triggerFutureStateRefresh();
  43     },
  44     isActive(selection: BaseSelection|null): boolean {
  45         return false;
  46     },
  47     setup(context: EditorUiContext, button: EditorButton) {
  48         button.toggleDisabled(true);
  49
  50         context.editor.registerCommand(CAN_REDO_COMMAND, (payload: boolean): boolean => {
  51             button.toggleDisabled(!payload)
  52             return false;
  53         }, COMMAND_PRIORITY_LOW);
  54     }
  55 }
  56
  57
  58 export const source: EditorButtonDefinition = {
  59     label: 'Source',
  60     icon: sourceIcon,
  61     async action(context: EditorUiContext) {
  62         const modal = context.manager.createModal('source');
  63         const source = await getEditorContentAsHtml(context.editor);
  64         modal.show({source});
  65     },
  66     isActive() {
  67         return false;
  68     }
  69 };
  70
  71 export const fullscreen: EditorButtonDefinition = {
  72     label: 'Fullscreen',
  73     icon: fullscreenIcon,
  74     async action(context: EditorUiContext, button: EditorButton) {
  75         const isFullScreen = context.containerDOM.classList.contains('fullscreen');
  76         context.containerDOM.classList.toggle('fullscreen', !isFullScreen);
  77         (context.containerDOM.closest('body') as HTMLElement).classList.toggle('editor-is-fullscreen', !isFullScreen);
  78         button.setActiveState(!isFullScreen);
  79     },
  80     isActive(selection, context: EditorUiContext) {
  81         return context.containerDOM.classList.contains('fullscreen');
  82     }
  83 };