feat(Config): allow re-ordering code editors

hatemhosny · hatemhosny · commit 5d730648da50 · 2025-03-06T22:28:09.000+02:00
diff --git a/docs/docs/configuration/configuration-object.mdx b/docs/docs/configuration/configuration-object.mdx
@@ -164,6 +164,11 @@ An object that configures the language and content of the markup editor. This ca
   If `true`, the title of the code editor is hidden, however its code is still evaluated.
   This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
 
+- `order`:
+  Type: [`number | undefined`](../api/interfaces/Config.md#order)
+  Default: `0`
+  The order of the editor in the UI.
+
 - `selector`:
   Type: [`string | undefined`](../api/interfaces/Config.md#selector)
   Default: `undefined`
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
@@ -50,7 +50,9 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
       is(x.content, 'string') ||
       is(x.contentUrl, 'string') ||
       is(x.hiddenContent, 'string') ||
-      is(x.hiddenContentUrl, 'string'));
+      is(x.hiddenContentUrl, 'string') ||
+      is(x.order, 'number') ||
+      is(x.selector, 'string'));
 
   const fixSfcLanguage = (lang: Language, editorId: EditorId) =>
     editorId !== 'markup'
@@ -74,6 +76,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.hideTitle, 'boolean') ? { hideTitle: x.hideTitle } : {}),
     ...(is(x.hiddenContent, 'string') ? { hiddenContent: x.hiddenContent } : {}),
     ...(is(x.hiddenContentUrl, 'string') ? { hiddenContentUrl: x.hiddenContentUrl } : {}),
+    ...(is(x.order, 'number') ? { order: x.order } : {}),
     ...(is(x.selector, 'string') ? { selector: x.selector } : {}),
     ...(is(x.position, 'object') ? { position: x.position } : {}),
   });
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -410,6 +410,7 @@ const setEditorTitle = (editorId: EditorId, title: string) => {
     return;
   }
   editorTitleContainer.style.display = '';
+  editorTitleContainer.style.order = String(config[editorId].order ?? 0);
   highlightSelectedLanguage(editorId, language);
   const shortcut = ` (Ctrl/⌘ + Alt + ${editorIds.indexOf(editorId) + 1})`;
   const customTitle = config[editorId].title;
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
@@ -1118,6 +1118,12 @@ export interface Editor {
    */
   hideTitle?: boolean;
 
+  /**
+   * The order of the editor in the UI.
+   * @default 0
+   */
+  order?: number;
+
   /**
    * A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
    */

Original file line number	Diff line number	Diff line change
`@@ -410,6 +410,7 @@ const setEditorTitle = (editorId: EditorId, title: string) => {`
`410`	`410`	`return;`
`411`	`411`	`}`
`412`	`412`	`editorTitleContainer.style.display = '';`
	`413`	`+ editorTitleContainer.style.order = String(config[editorId].order ?? 0);`
`413`	`414`	`highlightSelectedLanguage(editorId, language);`
`414`	`415`	const shortcut = ` (Ctrl/⌘ + Alt + ${editorIds.indexOf(editorId) + 1})`;
`415`	`416`	`const customTitle = config[editorId].title;`