fix: use reducer

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/Fullscreen.tsx

@@ -1,17 +1,12 @@
 import { createElement, ReactElement, useCallback } from "react";
-import { useFullscreen } from "../../utils/editorContext";
 import { ToolbarButton } from "./ToolbarWrapper";
+import { CustomToolbarProps } from "./customToolbars";
 
-export function FullscreenButton(): ReactElement {
-    const { isFullscreen, enterFullscreen, exitFullscreen } = useFullscreen();
-
+export function FullscreenButton({ quill }: CustomToolbarProps): ReactElement {
     const handleClick = useCallback(() => {
-        if (isFullscreen) {
-            exitFullscreen();
-        } else {
-            enterFullscreen();
-        }
-    }, [isFullscreen, enterFullscreen, exitFullscreen]);
+        console.log("FullscreenButton handleClick", quill);
+        quill?.emitter.emit("ACTION-DISPATCH", "SET_FULLSCREEN");
+    }, [quill]);
 
     return <ToolbarButton className={"icons icon-Expand"} title={"fullscreen"} onClick={handleClick} />;
 }

packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/toolbarHandlers.ts

@@ -4,7 +4,6 @@ import { MutableRefObject } from "react";
 import { Range } from "quill/core/selection";
 import Keyboard, { Context } from "quill/modules/keyboard";
 import { Scope } from "parchment";
-import { dispatchEditorAction } from "../../utils/editorContext";
 /**
  * give custom indent handler to use our custom "indent-left" and "indent-right" formats (formats/indent.ts)
  */
@@ -92,7 +91,6 @@ export function gotoStatusBarKeyboardHandler(this: Keyboard, _range: Range, cont
  * Keyboard handler for exiting fullscreen mode when the Escape key is pressed
  */
 export function exitFullscreenKeyboardHandler(this: Keyboard, _range: Range, _context: Context): boolean | void {
-    // Directly dispatch the EXIT_FULLSCREEN action to our EditorContext
-    dispatchEditorAction({ type: "EXIT_FULLSCREEN" });
+    this.quill.emitter.emit("ACTION-DISPATCH", "SET_FULLSCREEN", false);
     return true;
 }

packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx

@@ -6,6 +6,7 @@ import {
     forwardRef,
     Fragment,
     MutableRefObject,
+    useContext,
     useEffect,
     useLayoutEffect,
     useRef
@@ -21,6 +22,7 @@ import {
 } from "./CustomToolbars/toolbarHandlers";
 import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
 import Dialog from "./ModalDialog/Dialog";
+import { EditorDispatchContext } from "../store/EditorProvider";
 
 export interface EditorProps {
     defaultValue?: string;
@@ -40,6 +42,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
     const modalRef = useRef<HTMLDivElement>(null);
     const onTextChangeRef = useRef(onTextChange);
     const onSelectionChangeRef = useRef(onSelectionChange);
+    const contextDispatch = useContext(EditorDispatchContext);
 
     const {
         showDialog,
@@ -131,6 +134,11 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 quill.on("EDIT-TOOLTIP", (...arg: any[]) => {
                     customLinkHandler(arg[0]);
                 });
+                quill.on("ACTION-DISPATCH", (type: string, ...arg: any[]) => {
+                    if (contextDispatch) {
+                        contextDispatch({ type, value: arg[0] });
+                    }
+                });
             }
 
             return () => {

packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx

@@ -5,9 +5,19 @@ import classNames from "classnames";
 import Quill, { Range } from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
-import { createElement, CSSProperties, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+    createElement,
+    CSSProperties,
+    ReactElement,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState
+} from "react";
 import { RichTextContainerProps } from "typings/RichTextProps";
-import { EditorProvider, useFullscreen } from "../utils/editorContext";
+import { EditorContext, EditorProvider } from "../store/EditorProvider";
 import { updateLegacyQuillFormats } from "../utils/helpers";
 import MendixTheme from "../utils/themes/mxTheme";
 import { createPreset } from "./CustomToolbars/presets";
@@ -42,14 +52,16 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
         tabIndex
     } = props;
 
+    const globalState = useContext(EditorContext);
+
     const isFirstLoad = useRef<boolean>(false);
     const quillRef = useRef<Quill>(null);
     const [isFocus, setIsFocus] = useState(false);
     const editorValueRef = useRef<string>("");
     const toolbarRef = useRef<HTMLDivElement>(null);
     const [wordCount, setWordCount] = useState(0);
 
-    const { isFullscreen } = useFullscreen();
+    const { isFullscreen } = globalState;
 
     const [setAttributeValueDebounce] = useMemo(
         () =>

packages/pluggableWidgets/rich-text-web/src/store/EditorProvider.tsx

@@ -0,0 +1,15 @@
+import { createElement, createContext, ReactNode, useReducer } from "react";
+import { EditorAction, editorReducer, EditorState, initialState } from "./store";
+
+export const EditorContext = createContext<EditorState>(initialState);
+export const EditorDispatchContext = createContext<React.Dispatch<EditorAction> | null>(null);
+
+export function EditorProvider({ children }: { children: ReactNode }): JSX.Element {
+    const [state, dispatch] = useReducer(editorReducer, initialState);
+
+    return (
+        <EditorContext.Provider value={state}>
+            <EditorDispatchContext.Provider value={dispatch}>{children}</EditorDispatchContext.Provider>
+        </EditorContext.Provider>
+    );
+}

packages/pluggableWidgets/rich-text-web/src/store/store.ts

@@ -0,0 +1,23 @@
+export type EditorAction = { type: string; value: boolean };
+
+export interface EditorState {
+    isFullscreen: boolean;
+}
+
+export const initialState: EditorState = {
+    isFullscreen: false
+};
+
+export function editorReducer(state: EditorState, action: EditorAction): EditorState {
+    switch (action.type) {
+        case "SET_FULLSCREEN":
+            if (action.value === undefined || action.value === null) {
+                return { ...state, isFullscreen: !state.isFullscreen };
+            } else {
+                return { ...state, isFullscreen: action.value };
+            }
+
+        default:
+            return state;
+    }
+}