feat(Modes): add simple mode

.vscode/settings.json

@@ -16,6 +16,7 @@
     "Modules",
     "Deploy",
     "Import",
-    "ToolsPane"
+    "ToolsPane",
+    "Modes"
   ]
 }

src/livecodes/config/validate-config.ts

@@ -24,7 +24,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
 
   const includes = (arr: any[], x: any) => x != null && arr.includes(x);
 
-  const modes: Array<Config['mode']> = ['full', 'editor', 'codeblock', 'result'];
+  const modes: Array<Config['mode']> = ['full', 'simple', 'editor', 'codeblock', 'result'];
   const themes: Array<Config['theme']> = ['light', 'dark'];
   const layout: Array<Config['layout']> = ['horizontal', 'vertical'];
   const editorModes: Array<Config['editorMode']> = ['vim', 'emacs'];

src/livecodes/core.ts

@@ -392,11 +392,23 @@ const createEditors = async (config: Config) => {
     resetEditorModeStatus();
   }
 
+  const findActiveEditor = () =>
+    config.activeEditor ||
+    (config.languages?.length && getLanguageEditorId(config.languages[0])) ||
+    (config.markup.content
+      ? 'markup'
+      : config.style.content
+      ? 'style'
+      : config.script.content
+      ? 'script'
+      : 'markup');
+
   const baseOptions = {
     baseUrl,
     mode: config.mode,
     readonly: config.readonly,
     ...getEditorConfig(config),
+    activeEditor: findActiveEditor(),
     isEmbed,
     isHeadless,
     mapLanguage,
@@ -503,8 +515,10 @@ const showMode = (mode?: Config['mode']) => {
     split = null;
   }
 
+  // toolbar-editor-result
   const modes = {
     full: '111',
+    simple: '111',
     editor: '110',
     codeblock: '010',
     result: '001',
@@ -565,7 +579,8 @@ const showMode = (mode?: Config['mode']) => {
       toolsPane?.hide();
     }
   }
-  if (mode === 'full' && !split) {
+  document.body.classList.toggle('simple-mode', mode === 'simple');
+  if ((mode === 'full' || mode === 'simple') && !split) {
     split = createSplitPanes();
   }
   window.dispatchEvent(new Event(customEvents.resizeEditor));
@@ -1134,7 +1149,9 @@ const share = async (
   permanentUrl = false,
 ): Promise<ShareData> => {
   const config = getConfig();
-  const content = contentOnly ? { ...getContentConfig(config), ...getAppConfig(config) } : config;
+  const content = contentOnly
+    ? { ...getContentConfig(config), ...getAppConfig(config), mode: 'full' as Config['mode'] }
+    : config;
   const contentParam = shortUrl
     ? '?x=id/' +
       (await shareService.shareProject({
@@ -1681,6 +1698,7 @@ const setLayout = (layout: Config['layout']) => {
       layoutSwitch.dataset.hint = layout === 'vertical' ? 'Vertical layout' : 'Horizontal layout';
     }
   }
+  handleIframeResize();
 };
 
 const loadSettings = (config: Config) => {
@@ -3733,6 +3751,7 @@ const handleResultLoading = () => {
 
 const handleResultPopup = () => {
   const popupBtn = document.createElement('div');
+  popupBtn.id = 'result-popup-btn';
   popupBtn.classList.add('tool-buttons', 'hint--top');
   popupBtn.dataset.hint = 'Show result in new window';
   popupBtn.style.pointerEvents = 'all'; //  override setting to 'none' on toolspane bar
@@ -3989,7 +4008,10 @@ const configureEmbed = (config: Config, eventsManager: ReturnType<typeof createE
 
   eventsManager.addEventListener(logoLink, 'click', async (event: Event) => {
     event.preventDefault();
-    window.open((await share(false, true, false)).url, '_blank');
+    window.open(
+      (await share(/* shortUrl= */ false, /* contentOnly= */ true, /* urlUpdate= */ false)).url,
+      '_blank',
+    );
   });
 };
 
@@ -4007,6 +4029,17 @@ const configureLite = () => {
   UI.getFormatButton().style.display = 'none';
 };
 
+const configureSimpleMode = (config: Config) => {
+  setConfig({
+    ...config,
+    tools: {
+      enabled: ['console'],
+      active: 'console',
+      status: config.tools?.status || 'closed',
+    },
+  });
+};
+
 const configureModes = ({
   config,
   isEmbed,
@@ -4025,6 +4058,9 @@ const configureModes = ({
   if (isEmbed || config.mode === 'result') {
     configureEmbed(config, eventsManager);
   }
+  if (config.mode === 'simple') {
+    configureSimpleMode(config);
+  }
 };
 
 const importExternalContent = async (options: {
@@ -4260,7 +4296,12 @@ const initializePlayground = async (
   baseUrl = options?.baseUrl ?? '/livecodes/';
   isHeadless = options?.isHeadless ?? false;
   isLite = options?.isLite ?? params.lite ?? false;
-  isEmbed = isHeadless || isLite || (options?.isEmbed ?? false);
+  isEmbed =
+    isHeadless ||
+    isLite ||
+    (options?.isEmbed ?? false) ||
+    appConfig.mode === 'simple' ||
+    params.mode === 'simple';
 
   window.history.replaceState(null, '', './'); // fix URL from "/app" to "/"
   await initializeStores(stores, isEmbed);

src/livecodes/editor/create-editor.ts

@@ -26,17 +26,19 @@ const loadEditor = async (editorName: Exclude<Config['editor'], ''>, options: Ed
   return codeEditor;
 };
 
-const selectEditor = (
-  options: Partial<Pick<EditorOptions, 'editor' | 'mode' | 'editorId' | 'isHeadless'>>,
-) => {
-  const { editor, mode, editorId, isHeadless } = options;
+const selectEditor = (options: EditorOptions & { activeEditor?: Config['activeEditor'] }) => {
+  const { editor, mode, editorId, activeEditor, isHeadless } = options;
   return (
     (isHeadless
       ? 'fake'
       : mode === 'result' && editorId !== 'console' && editorId !== 'compiled'
       ? 'fake'
+      : mode === 'simple' && editorId !== activeEditor
+      ? 'fake'
       : ['codemirror', 'monaco', 'codejar'].includes(editor || '')
       ? editor
+      : mode === 'simple' && editorId === activeEditor
+      ? 'codemirror'
       : mode === 'codeblock'
       ? 'codejar'
       : isMobile()
@@ -82,7 +84,9 @@ const loadFont = (fontName: string) => {
   loadStylesheet(font.url, 'font-' + font.id);
 };
 
-export const createEditor = async (options: EditorOptions) => {
+export const createEditor = async (
+  options: EditorOptions & { activeEditor?: Config['activeEditor'] },
+) => {
   if (!options) throw new Error();
 
   const editorOptions = getEditorOptions(options);

src/livecodes/styles/app.scss

@@ -416,6 +416,56 @@ a {
   }
 }
 
+.simple-mode {
+  .editor-title:not(.active),
+  #toolbar #result-button,
+  #toolbar #fullscreen-button,
+  #editors #editor-tools,
+  #console-input,
+  #result-popup-btn,
+  #broadcast-status-btn {
+    display: none !important;
+  }
+
+  #toolbar {
+    margin-bottom: -8px;
+    transform: scale(0.8);
+    transform-origin: left top;
+    width: 125%;
+
+    #select-editor {
+      width: calc(80% - 70px);
+
+      .editor-title.active {
+        background-color: unset;
+        border: 0;
+      }
+    }
+
+    #run-button {
+      display: flex !important;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  #editor-container {
+    height: calc(100% - 30px) !important;
+  }
+
+  #editors #code-run-button {
+    display: none !important;
+  }
+
+  #tools-pane-bar {
+    font-size: 0.7em;
+  }
+
+  .tools-pane-title.has-mark .mark {
+    display: none !important;
+  }
+}
+
 .result {
   #toolbar {
     background-color: rgb(0, 0, 0, 0.05);
@@ -454,6 +504,11 @@ a {
 .layout-vertical {
   #editor-container {
     flex-direction: column;
+
+    .gutter #size-label {
+      left: 5px !important;
+      top: 15px !important;
+    }
   }
 
   .gutter.gutter-vertical {

src/livecodes/toolspane/tools.ts

@@ -178,10 +178,16 @@ export const createToolsPane = (
 
     toolsSplit = Split(['#result', '#tools-pane'], {
       sizes: sizes.closed,
+      minSize: [0, 0],
       gutterSize,
       direction: 'vertical',
       elementStyle: (_dimension, size, gutterSize) => ({
-        height: `calc(${size}% - ${gutterSize}px)`,
+        height:
+          size < 15
+            ? '0'
+            : size > 85
+            ? `calc(100% - ${gutterSize * 2}px)`
+            : `calc(${size}% - ${gutterSize}px)`,
       }),
       gutterStyle: (_dimension, gutterSize) => ({
         height: `${gutterSize}px`,

src/sdk/models.ts

@@ -93,7 +93,7 @@ export interface ContentConfig {
 export interface AppConfig {
   readonly: boolean;
   allowLangChange: boolean;
-  mode: 'full' | 'editor' | 'codeblock' | 'result';
+  mode: 'full' | 'simple' | 'editor' | 'codeblock' | 'result';
   tools: {
     enabled: Array<Tool['name']> | 'all';
     active: Tool['name'] | '';