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 fullscreenIcon from "@icons/editor/fullscreen.svg";
  15 import aboutIcon from "@icons/editor/about.svg";
  16 import {getEditorContentAsHtml} from "../../../utils/actions";
  17
  18 export const undo: EditorButtonDefinition = {
  19     label: 'Undo',
  20     icon: undoIcon,
  21     action(context: EditorUiContext) {
  22         context.editor.dispatchCommand(UNDO_COMMAND, undefined);
  23         context.manager.triggerFutureStateRefresh();
  24     },
  25     isActive(selection: BaseSelection|null): boolean {
  26         return false;
  27     },
  28     setup(context: EditorUiContext, button: EditorButton) {
  29         button.toggleDisabled(true);
  30
  31         context.editor.registerCommand(CAN_UNDO_COMMAND, (payload: boolean): boolean => {
  32             button.toggleDisabled(!payload)
  33             return false;
  34         }, COMMAND_PRIORITY_LOW);
  35     }
  36 }
  37
  38 export const redo: EditorButtonDefinition = {
  39     label: 'Redo',
  40     icon: redoIcon,
  41     action(context: EditorUiContext) {
  42         context.editor.dispatchCommand(REDO_COMMAND, undefined);
  43         context.manager.triggerFutureStateRefresh();
  44     },
  45     isActive(selection: BaseSelection|null): boolean {
  46         return false;
  47     },
  48     setup(context: EditorUiContext, button: EditorButton) {
  49         button.toggleDisabled(true);
  50
  51         context.editor.registerCommand(CAN_REDO_COMMAND, (payload: boolean): boolean => {
  52             button.toggleDisabled(!payload)
  53             return false;
  54         }, COMMAND_PRIORITY_LOW);
  55     }
  56 }
  57
  58
  59 export const source: EditorButtonDefinition = {
  60     label: 'Source code',
  61     icon: sourceIcon,
  62     async action(context: EditorUiContext) {
  63         const modal = context.manager.createModal('source');
  64         const source = await getEditorContentAsHtml(context.editor);
  65         modal.show({source});
  66     },
  67     isActive() {
  68         return false;
  69     }
  70 };
  71
  72 export const fullscreen: EditorButtonDefinition = {
  73     label: 'Fullscreen',
  74     icon: fullscreenIcon,
  75     async action(context: EditorUiContext, button: EditorButton) {
  76         const isFullScreen = context.containerDOM.classList.contains('fullscreen');
  77         context.containerDOM.classList.toggle('fullscreen', !isFullScreen);
  78         (context.containerDOM.closest('body') as HTMLElement).classList.toggle('editor-is-fullscreen', !isFullScreen);
  79         button.setActiveState(!isFullScreen);
  80     },
  81     isActive(selection, context: EditorUiContext) {
  82         return context.containerDOM.classList.contains('fullscreen');
  83     }
  84 };
  85
  86 export const about: EditorButtonDefinition = {
  87     label: 'About the editor',
  88     icon: aboutIcon,
  89     async action(context: EditorUiContext, button: EditorButton) {
  90         const modal = context.manager.createModal('about');
  91         modal.show({});
  92     },
  93     isActive(selection, context: EditorUiContext) {
  94         return false;
  95     }
  96 };