feat(app): change syntax highlight with locked bg (#477)

* feat(app): change syntax highlight with locked bg
* feat(app): improve code and fix theme effect
* feat(app): refactor dispatchUpdateTHeme with rxjs
* Create .changeset/early-lamps-cover.md
* feat(app): refactor dispatchUpdateTheme with promise
* feat(app): change syntax highlight with locked bg
* feat(app): improve code and fix theme effect
* feat(app): refactor dispatchUpdateTHeme with rxjs
* Create .changeset/early-lamps-cover.md
* feat(app): refactor dispatchUpdateTheme with promise

Author: riccardoperra

.changeset/early-lamps-cover.md

@@ -0,0 +1,5 @@
+---
+"@codeimage/app": minor
+---
+
+feat(app): change syntax highlight with locked bg

apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx

@@ -1,7 +1,10 @@
 import {SUPPORTED_LANGUAGES} from '@codeimage/config';
+import {CustomTheme} from '@codeimage/highlight';
 import {useI18n} from '@codeimage/locale';
 import {getRootEditorStore} from '@codeimage/store/editor';
 import {getActiveEditorStore} from '@codeimage/store/editor/activeEditor';
+import {dispatchUpdateTheme} from '@codeimage/store/effects/onThemeChange';
+import {getThemeStore} from '@codeimage/store/theme/theme.store';
 import {SegmentedField, Select, Text} from '@codeimage/ui';
 import {SUPPORTED_FONTS} from '@core/configuration/font';
 import {getUmami} from '@core/constants/umami';
@@ -14,7 +17,18 @@ import {PanelRow, TwoColumnPanelRow} from './PanelRow';
 import {SuspenseEditorItem} from './SuspenseEditorItem';
 
 export const EditorStyleForm: ParentComponent = () => {
+  const {themeArray} = getThemeStore();
   const languages = SUPPORTED_LANGUAGES;
+
+  const themeItems = () =>
+    themeArray()
+      .map(theme => theme())
+      .filter((theme): theme is CustomTheme => !!theme)
+      .map(theme => ({
+        label: theme.properties.label,
+        value: theme.id,
+      }));
+
   const fonts = SUPPORTED_FONTS;
   const modality = useModality();
   const [t] = useI18n<AppLocaleEntries>();
@@ -69,6 +83,28 @@ export const EditorStyleForm: ParentComponent = () => {
             </TwoColumnPanelRow>
           </PanelRow>
 
+          <PanelRow for={'frameLanguageField'} label={t('frame.theme')}>
+            <TwoColumnPanelRow>
+              <SuspenseEditorItem
+                fallback={<SkeletonLine width={'100%'} height={'26px'} />}
+              >
+                <Select
+                  id={'frameSyntaxHighlightField'}
+                  multiple={false}
+                  native={modality === 'mobile'}
+                  items={themeItems()}
+                  value={state.options.themeId}
+                  onSelectChange={theme => {
+                    dispatchUpdateTheme({
+                      updateBackground: false,
+                      theme,
+                    });
+                  }}
+                />
+              </SuspenseEditorItem>
+            </TwoColumnPanelRow>
+          </PanelRow>
+
           <PanelRow
             for={'frameLineNumbersField'}
             label={t('frame.lineNumbers')}

apps/codeimage/src/i18n/sidebar.ts

@@ -16,6 +16,7 @@ export default {
       language: 'Language',
       lineNumbers: 'Line number',
       font: 'Font',
+      theme: 'Theme',
       fontWeight: 'Font weight',
       reflection: 'Reflection',
       backgroundType: 'Background',
@@ -41,6 +42,7 @@ export default {
       reflection: 'Riflesso',
       watermark: 'Watermark',
       backgroundType: 'Tipo background',
+      theme: 'Tema',
     },
   },
   de: {
@@ -63,6 +65,7 @@ export default {
       reflection: 'Reflektion',
       watermark: 'Wasserzeichen',
       backgroundType: 'Hintergrundtyp',
+      theme: 'Theme',
     },
   },
   es: {
@@ -85,6 +88,7 @@ export default {
       reflection: 'Reflexión',
       watermark: 'filigrana',
       backgroundType: 'Tipo de fondo',
+      theme: 'Theme',
     },
   },
 } as const;

apps/codeimage/src/state/effects/onThemeChange.tsx

@@ -1,3 +1,4 @@
+import {effect} from '@codeimage/atomic-state';
 import {AVAILABLE_COLORS, AVAILABLE_GRADIENTS} from '@codeimage/config';
 import {CustomTheme} from '@codeimage/highlight';
 import {getRootEditorStore} from '@codeimage/store/editor';
@@ -6,21 +7,42 @@ import {getTerminalState} from '@codeimage/store/editor/terminal';
 import {getThemeStore} from '@codeimage/store/theme/theme.store';
 import {TERMINAL_SHADOWS} from '@core/configuration/shadow';
 import {AVAILABLE_TERMINAL_THEMES} from '@core/configuration/terminal-themes';
+import {getUmami} from '@core/constants/umami';
 import {pipe, tap} from 'rxjs';
 import {batch} from 'solid-js';
-import {effect} from '@codeimage/atomic-state';
 
-export type DispatchUpdateThemeParams = {theme: CustomTheme};
+export type DispatchUpdateThemeParams = {
+  theme: CustomTheme | string;
+  updateBackground?: boolean;
+};
 
-export function dispatchUpdateTheme({theme}: DispatchUpdateThemeParams): void {
+export function dispatchUpdateTheme(params: DispatchUpdateThemeParams): void {
+  const {theme, updateBackground} = params;
   const frame = getFrameState();
   const terminal = getTerminalState();
   const editor = getRootEditorStore();
-  batch(() => {
-    frame.setBackground(theme.properties.previewBackground);
-    terminal.setState('background', theme.properties.terminal.main);
-    terminal.setState('textColor', theme.properties.terminal.text);
-    editor.actions.setThemeId(theme.id);
+  const {getThemeDef} = getThemeStore();
+
+  const resolvedTheme = new Promise<CustomTheme | undefined>(r => {
+    if (typeof theme === 'string') {
+      return getThemeDef(theme)?.load().then(r);
+    } else {
+      return r(theme);
+    }
+  });
+
+  resolvedTheme.then(theme => {
+    if (theme) {
+      batch(() => {
+        if (updateBackground) {
+          frame.setBackground(theme.properties.previewBackground);
+        }
+        terminal.setState('background', theme.properties.terminal.main);
+        terminal.setState('textColor', theme.properties.terminal.text);
+        editor.actions.setThemeId(theme.id);
+      });
+      getUmami().trackEvent(theme.id, `theme-change`);
+    }
   });
 }
 

apps/codeimage/src/state/theme/theme.store.ts

@@ -1,10 +1,12 @@
+import {CustomTheme} from '@codeimage/highlight';
 import {THEME_REGISTRY} from '@codeimage/store/theme/themeRegistry';
 import {
   createMemo,
   createResource,
   createRoot,
   createSignal,
   mapArray,
+  ResourceReturn,
 } from 'solid-js';
 
 function $getThemeStore() {
@@ -25,7 +27,8 @@ function $getThemeStore() {
     themeArray().some(theme => theme.loading),
   );
 
-  const getThemeResource = (themeId: string) => themes[themeId];
+  const getThemeResource = (themeId: string): ResourceReturn<CustomTheme> =>
+    themes[themeId];
 
   const getThemeDef = (id: string) =>
     THEME_REGISTRY.find(theme => theme.id === id);