🐛 Fixed dark mode for standalone html editors in Admin X (#20689)

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.
TryGhost · Jul 30, 2024 · f7a592e · f7a592e
1 parent 178c98c
commit f7a592e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,18 +31,19 @@ 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) => {
         setIsAnyTextFieldFocused(value);
     };
 
     return (
-        <DesignSystemContext.Provider value={{isAnyTextFieldFocused, setFocusState, fetchKoenigLexical}}>
+        <DesignSystemContext.Provider value={{isAnyTextFieldFocused, setFocusState, fetchKoenigLexical, darkMode}}>
             <GlobalDirtyStateProvider>
                 <Toaster />
                 <NiceModal.Provider>