From f7a592e7612bcb61641f4c7d112b5842bd91aacf Mon Sep 17 00:00:00 2001
From: Steve Larson <9larsons@gmail.com>
Date: Tue, 30 Jul 2024 09:18:51 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20dark=20mode=20for=20stan?=
 =?UTF-8?q?dalone=20html=20editors=20in=20Admin=20X=20(#20689)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref https://linear.app/tryghost/issue/DES-591
- finished wiring up the darkMode prop through the context providers

The main impact here was that the formatting toolbar was not respecting
the dark mode settings.
---
 apps/admin-x-design-system/src/DesignSystemApp.tsx     |  2 +-
 .../src/global/form/HtmlEditor.tsx                     | 10 ++++++----
 .../src/providers/DesignSystemProvider.tsx             |  9 ++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/admin-x-design-system/src/DesignSystemApp.tsx b/apps/admin-x-design-system/src/DesignSystemApp.tsx
index 6606867af1..9ea7f4a730 100644
--- a/apps/admin-x-design-system/src/DesignSystemApp.tsx
+++ b/apps/admin-x-design-system/src/DesignSystemApp.tsx
@@ -17,7 +17,7 @@ const DesignSystemApp: React.FC<DesignSystemAppProps> = ({darkMode, fetchKoenigL
 
     return (
         <div className={appClassName} {...props}>
-            <DesignSystemProvider fetchKoenigLexical={fetchKoenigLexical}>
+            <DesignSystemProvider darkMode={darkMode} fetchKoenigLexical={fetchKoenigLexical}>
                 {children}
             </DesignSystemProvider>
         </div>
diff --git a/apps/admin-x-design-system/src/global/form/HtmlEditor.tsx b/apps/admin-x-design-system/src/global/form/HtmlEditor.tsx
index 68d9f13b22..632cdd0990 100644
--- a/apps/admin-x-design-system/src/global/form/HtmlEditor.tsx
+++ b/apps/admin-x-design-system/src/global/form/HtmlEditor.tsx
@@ -13,6 +13,7 @@ export interface HtmlEditorProps {
     placeholder?: string
     nodes?: 'DEFAULT_NODES' | 'BASIC_NODES' | 'MINIMAL_NODES'
     emojiPicker?: boolean;
+    darkMode?: boolean;
 }
 
 declare global {
@@ -61,7 +62,8 @@ const KoenigWrapper: React.FC<HtmlEditorProps & { editor: EditorResource }> = ({
     onBlur,
     placeholder,
     nodes,
-    emojiPicker = true
+    emojiPicker = true,
+    darkMode = false
 }) => {
     const onError = useCallback((error: unknown) => {
         try {
@@ -128,12 +130,12 @@ const KoenigWrapper: React.FC<HtmlEditorProps & { editor: EditorResource }> = ({
 
     return (
         <koenig.KoenigComposer
+            darkMode={darkMode}
             nodes={koenig[nodes || 'DEFAULT_NODES']}
             onError={onError}
         >
             <koenig.KoenigComposableEditor
                 className='koenig-lexical koenig-lexical-editor-input'
-                darkMode={false}
                 isSnippetsEnabled={false}
                 markdownTransformers={transformers[nodes || 'DEFAULT_NODES']}
                 placeholderClassName='koenig-lexical-editor-input-placeholder line-clamp-1'
@@ -155,14 +157,14 @@ const HtmlEditor: React.FC<HtmlEditorProps & {
     className,
     ...props
 }) => {
-    const {fetchKoenigLexical} = useDesignSystem();
+    const {fetchKoenigLexical, darkMode} = useDesignSystem();
     const editorResource = useMemo(() => loadKoenig(fetchKoenigLexical), [fetchKoenigLexical]);
 
     return <div className={className || 'w-full'}>
         <div className="koenig-react-editor w-full [&_*]:!font-inherit [&_*]:!text-inherit">
             <ErrorBoundary name='editor'>
                 <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
-                    <KoenigWrapper {...props} editor={editorResource} />
+                    <KoenigWrapper {...props} darkMode={darkMode} editor={editorResource} />
                 </Suspense>
             </ErrorBoundary>
         </div>
diff --git a/apps/admin-x-design-system/src/providers/DesignSystemProvider.tsx b/apps/admin-x-design-system/src/providers/DesignSystemProvider.tsx
index c655165d9c..a79413283c 100644
--- a/apps/admin-x-design-system/src/providers/DesignSystemProvider.tsx
+++ b/apps/admin-x-design-system/src/providers/DesignSystemProvider.tsx
@@ -9,12 +9,14 @@ interface DesignSystemContextType {
     isAnyTextFieldFocused: boolean;
     setFocusState: (value: boolean) => void;
     fetchKoenigLexical: FetchKoenigLexical;
+    darkMode: boolean;
 }
 
 const DesignSystemContext = createContext<DesignSystemContextType>({
     isAnyTextFieldFocused: false,
     setFocusState: () => {},
-    fetchKoenigLexical: async () => {}
+    fetchKoenigLexical: async () => {},
+    darkMode: false
 });
 
 export const useDesignSystem = () => useContext(DesignSystemContext);
@@ -29,10 +31,11 @@ export const useFocusContext = () => {
 
 interface DesignSystemProviderProps {
     fetchKoenigLexical: FetchKoenigLexical;
+    darkMode: boolean;
     children: React.ReactNode;
 }
 
-const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({fetchKoenigLexical, children}) => {
+const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({fetchKoenigLexical, darkMode, children}) => {
     const [isAnyTextFieldFocused, setIsAnyTextFieldFocused] = useState(false);
 
     const setFocusState = (value: boolean) => {
@@ -40,7 +43,7 @@ const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({fetchKoenigL
     };
 
     return (
-        <DesignSystemContext.Provider value={{isAnyTextFieldFocused, setFocusState, fetchKoenigLexical}}>
+        <DesignSystemContext.Provider value={{isAnyTextFieldFocused, setFocusState, fetchKoenigLexical, darkMode}}>
             <GlobalDirtyStateProvider>
                 <Toaster />
                 <NiceModal.Provider>