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 "../../../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     },
  23     isActive(selection: BaseSelection|null): boolean {
  24         return false;
  25     },
  26     setup(context: EditorUiContext, button: EditorButton) {
  27         button.toggleDisabled(true);
  28
  29         context.editor.registerCommand(CAN_UNDO_COMMAND, (payload: boolean): boolean => {
  30             button.toggleDisabled(!payload)
  31             return false;
  32         }, COMMAND_PRIORITY_LOW);
  33     }
  34 }
  35
  36 export const redo: EditorButtonDefinition = {
  37     label: 'Redo',
  38     icon: redoIcon,
  39     action(context: EditorUiContext) {
  40         context.editor.dispatchCommand(REDO_COMMAND, undefined);
  41     },
  42     isActive(selection: BaseSelection|null): boolean {
  43         return false;
  44     },
  45     setup(context: EditorUiContext, button: EditorButton) {
  46         button.toggleDisabled(true);
  47
  48         context.editor.registerCommand(CAN_REDO_COMMAND, (payload: boolean): boolean => {
  49             button.toggleDisabled(!payload)
  50             return false;
  51         }, COMMAND_PRIORITY_LOW);
  52     }
  53 }
  54
  55
  56 export const source: EditorButtonDefinition = {
  57     label: 'Source code',
  58     icon: sourceIcon,
  59     async action(context: EditorUiContext) {
  60         const modal = context.manager.createModal('source');
  61         const source = await getEditorContentAsHtml(context.editor);
  62         modal.show({source});
  63     },
  64     isActive() {
  65         return false;
  66     }
  67 };
  68
  69 export const fullscreen: EditorButtonDefinition = {
  70     label: 'Fullscreen',
  71     icon: fullscreenIcon,
  72     async action(context: EditorUiContext, button: EditorButton) {
  73         const isFullScreen = context.containerDOM.classList.contains('fullscreen');
  74         context.containerDOM.classList.toggle('fullscreen', !isFullScreen);
  75         (context.containerDOM.closest('body') as HTMLElement).classList.toggle('editor-is-fullscreen', !isFullScreen);
  76         button.setActiveState(!isFullScreen);
  77     },
  78     isActive(selection, context: EditorUiContext) {
  79         return context.containerDOM.classList.contains('fullscreen');
  80     }
  81 };