feat(Config): add the value "auto" to config.editor options

hatemhosny · hatemhosny · commit 0f62de8891ca · 2025-04-09T00:17:31.000+02:00
diff --git a/docs/docs/configuration/configuration-object.mdx b/docs/docs/configuration/configuration-object.mdx
@@ -600,13 +600,18 @@ Enables [showing element spacing](../features/result.mdx#show-spacings) in the r
 
 ### `editor`
 
-Type: [`"monaco" | "codemirror" | "codejar" | undefined`](../api/interfaces/Config.md#editor)
+Type: [`"monaco" | "codemirror" | "codejar" | "auto" | undefined`](../api/interfaces/Config.md#editor)
 
 Default: `undefined`
 
 Selects the [code editor](../features/editor-settings.mdx#code-editor) to use.
 
-If `undefined` (the default), Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in [codeblocks](../features/display-modes.mdx#codeblock), in [lite mode](../features/lite.mdx) and in [readonly](#readonly) playgrounds.
+If `undefined` (the default):<br />
+Monaco editor is used on desktop,<br />
+CodeMirror is used on mobile and in `simple` mode,<br />
+while CodeJar is used in [`codeblock` mode](../features/display-modes.mdx#codeblock), in [`lite` mode](../features/lite.mdx) and in [`readonly`](#readonly) playgrounds.
+
+If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.
 
 ### `fontFamily`
 
diff --git a/src/livecodes/UI/editor-settings.ts b/src/livecodes/UI/editor-settings.ts
@@ -291,6 +291,7 @@ export const createEditorSettingsUI = async ({
     editorId: 'editorSettings',
     getLanguageExtension: () => 'jsx',
     isEmbed: false,
+    isLite: false,
     isHeadless: false,
     language: 'jsx',
     mapLanguage: () => 'javascript',
@@ -538,7 +539,7 @@ export const createEditorSettingsUI = async ({
 
     const prefix = 'editor-settings-editorTheme-';
     const editorThemes: Record<
-      `${Exclude<Config['editor'], undefined>}-${Config['theme']}`,
+      `${Exclude<Config['editor'], 'auto' | undefined>}-${Config['theme']}`,
       HTMLElement | null
     > = {
       'monaco-dark': form.querySelector(`[name="${prefix}monaco-dark"]`),
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
@@ -39,7 +39,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
   const editorModes: Array<Config['editorMode']> = ['vim', 'emacs'];
   const tools: Array<Tool['name']> = ['console', 'compiled', 'tests'];
   const toolsPaneStatus: ToolsPaneStatus[] = ['', 'full', 'closed', 'open', 'none'];
-  const editors: Array<Config['editor']> = ['monaco', 'codemirror', 'codejar'];
+  const editors: Array<Config['editor']> = ['monaco', 'codemirror', 'codejar', 'auto'];
   const editorIds: EditorId[] = ['markup', 'style', 'script'];
   const zoomLevels: Array<Config['zoom']> = [1, 0.5, 0.25];
 
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -478,12 +478,14 @@ const createEditors = async (config: Config) => {
     ...getEditorConfig(config),
     activeEditor: findActiveEditor(),
     isEmbed,
+    isLite,
     isHeadless,
     mapLanguage,
     getLanguageExtension,
     getFormatterConfig: () => getFormatterConfig(getConfig()),
     getFontFamily,
   };
+
   const markupOptions: EditorOptions = {
     ...baseOptions,
     container: UI.getMarkupElement(),
@@ -4087,6 +4089,7 @@ const handleEmbed = () => {
       editorId: 'embed',
       getLanguageExtension,
       isEmbed,
+      isLite,
       isHeadless,
       language: 'html',
       mapLanguage,
@@ -4202,6 +4205,7 @@ const handleCodeToImage = () => {
         readonly: false,
         editorId: 'codeToImage',
         isEmbed: false,
+        isLite,
         isHeadless: false,
         getLanguageExtension,
         mapLanguage,
@@ -4314,6 +4318,7 @@ const handleSnippets = () => {
       editorId: 'snippet',
       getLanguageExtension,
       isEmbed,
+      isLite,
       isHeadless,
       language: 'html',
       value: '',
@@ -4421,6 +4426,7 @@ const handleCustomSettings = () => {
       language: 'json' as Language,
       value: stringify({ imports: {}, ...config.customSettings }, true),
       isEmbed,
+      isLite,
       isHeadless,
       mapLanguage,
       getLanguageExtension,
@@ -4597,6 +4603,7 @@ const handleTestEditor = () => {
       language: editorLanguage,
       value: config.tests?.content || '',
       isEmbed,
+      isLite,
       isHeadless,
       mapLanguage,
       getLanguageExtension,
@@ -5122,7 +5129,6 @@ const configureEmbed = (eventsManager: EventsManager) => {
 const configureLite = () => {
   setConfig({
     ...getConfig(),
-    editor: 'codejar',
     emmet: false,
     tools: {
       enabled: [],
diff --git a/src/livecodes/editor/create-editor.ts b/src/livecodes/editor/create-editor.ts
@@ -27,7 +27,8 @@ const loadEditor = async (editorName: Exclude<Config['editor'], ''>, options: Ed
 };
 
 const selectEditor = (options: EditorOptions & { activeEditor?: Config['activeEditor'] }) => {
-  const { editor, mode, editorId, activeEditor, isHeadless } = options;
+  const { editor, mode, editorId, activeEditor, isLite, isHeadless } = options;
+  const auto = isMobile() ? 'codemirror' : 'monaco';
   return (
     (isHeadless
       ? 'fake'
@@ -37,13 +38,13 @@ const selectEditor = (options: EditorOptions & { activeEditor?: Config['activeEd
           ? 'fake'
           : ['codemirror', 'monaco', 'codejar'].includes(editor || '')
             ? editor
-            : mode === 'simple' && editorId === activeEditor
-              ? 'codemirror'
-              : mode === 'codeblock'
-                ? 'codejar'
-                : isMobile()
-                  ? 'codemirror'
-                  : 'monaco') || 'monaco'
+            : editor === 'auto'
+              ? auto
+              : mode === 'simple' && editorId === activeEditor
+                ? 'codemirror'
+                : mode === 'codeblock' || isLite
+                  ? 'codejar'
+                  : auto) || 'monaco'
   );
 };
 
diff --git a/src/livecodes/toolspane/compiled-code-viewer.ts b/src/livecodes/toolspane/compiled-code-viewer.ts
@@ -57,6 +57,7 @@ export const createCompiledCodeViewer = (
       mode: config.mode,
       editorId: 'compiled',
       isEmbed,
+      isLite: false,
       isHeadless: false,
       mapLanguage,
       getLanguageExtension,
diff --git a/src/livecodes/toolspane/console.ts b/src/livecodes/toolspane/console.ts
@@ -133,6 +133,7 @@ export const createConsole = (
       mode: config.mode,
       editorId: 'console',
       isEmbed,
+      isLite: false,
       isHeadless: false,
       mapLanguage,
       getLanguageExtension,
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
@@ -711,11 +711,15 @@ export interface EditorConfig {
   /**
    * Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use.
    *
-   * If `undefined` (the default), Monaco editor is used on desktop, CodeMirror is used on mobile
-   * and CodeJar is used in codeblocks, in lite mode and in readonly playgrounds.
+   * If `undefined` (the default), Monaco editor is used on desktop,
+   * CodeMirror is used on mobile and in `simple` mode,
+   * while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds.
+   *
+   * If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.
+   *
    * @default undefined
    */
-  editor: 'monaco' | 'codemirror' | 'codejar' | undefined;
+  editor: 'monaco' | 'codemirror' | 'codejar' | 'auto' | undefined;
 
   /**
    * Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode.
@@ -1554,6 +1558,7 @@ export interface EditorOptions extends EditorConfig {
     | 'add-snippet';
   theme: Theme;
   isEmbed: boolean;
+  isLite: boolean;
   isHeadless: boolean;
   getLanguageExtension: (alias: string) => Language | undefined;
   mapLanguage: (language: Language) => Language;
