Lexical: Added tracked container, added fullscreen action

[bookstack] / resources / js / wysiwyg / ui / defaults / button-definitions.ts

diff --git a/resources/js/wysiwyg/ui/defaults/button-definitions.ts b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
index cebf2580721a589f7ef195ecfc9691600c271907..4a45ef75d0a75656a29929df45046b3b5fc51dc2 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/button-definitions.ts
+++ b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
@@ -51,6 +51,7 @@ import imageIcon from "@icons/editor/image.svg"
 import horizontalRuleIcon from "@icons/editor/horizontal-rule.svg"
 import detailsIcon from "@icons/editor/details.svg"
 import sourceIcon from "@icons/editor/source-view.svg"
+import fullscreenIcon from "@icons/editor/fullscreen.svg"
 import {$createHorizontalRuleNode, $isHorizontalRuleNode} from "../../nodes/horizontal-rule";
 
 export const undo: EditorButtonDefinition = {
@@ -206,7 +207,7 @@ function buildListButton(label: string, type: ListType, icon: string): EditorBut
         action(context: EditorUiContext) {
             context.editor.getEditorState().read(() => {
                 const selection = $getSelection();
-                if (this.isActive(selection)) {
+                if (this.isActive(selection, context)) {
                     removeList(context.editor);
                 } else {
                     insertList(context.editor, type);
@@ -374,4 +375,18 @@ export const source: EditorButtonDefinition = {
     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');
+    }
 };
\ No newline at end of file