Merge pull request #669 from riccardoperra/668-allow-to-create-multiple-files-without-displaying-it-in-exported-image

feat: allow to create multiple files without displaying it in exported image

Author: riccardoperra

.changeset/breezy-balloons-taste.md

@@ -0,0 +1,5 @@
+---
+'@codeimage/app': minor
+---
+
+allow to display only active tab while exporting image

apps/codeimage/src/components/Frame/Frame.css.ts

@@ -1,4 +1,5 @@
 import {backgroundColorVar, themeVars, withThemeMode} from '@codeimage/ui';
+import {themeTokens} from '@codeui/kit';
 import {createTheme, style} from '@vanilla-extract/css';
 
 export const [frame, frameVars] = createTheme({
@@ -63,6 +64,25 @@ export const previewPortal = style({
   height: 'auto',
   opacity: 0,
   transformOrigin: 'left top',
+  selectors: {
+    '&[data-dev-mode]': {
+      opacity: 1,
+      zIndex: 999,
+      zoom: '50%',
+    },
+  },
+  ':after': {
+    content: 'Debug preview',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    zIndex: 999,
+    borderRadius: themeTokens.radii.md,
+    padding: themeTokens.spacing['2'],
+    backgroundColor: '#333',
+    color: 'white',
+    margin: themeTokens.spacing['1'],
+  },
 });
 
 export const container = style([

apps/codeimage/src/components/Frame/PreviewFrame.tsx

@@ -1,7 +1,9 @@
 import {getAssetsStore, isAssetUrl} from '@codeimage/store/assets/assets';
 import {AssetsImage} from '@codeimage/store/assets/AssetsImage';
+import {getExportCanvasStore} from '@codeimage/store/canvas';
 import {getRootEditorStore} from '@codeimage/store/editor';
 import {getActiveEditorStore} from '@codeimage/store/editor/activeEditor';
+import {EditorConfigStore} from '@codeimage/store/editor/config.store';
 import {getFrameState} from '@codeimage/store/editor/frame';
 import {getTerminalState} from '@codeimage/store/editor/terminal';
 import {dispatchCopyToClipboard} from '@codeimage/store/effects/onCopyToClipboard';
@@ -17,6 +19,7 @@ import {
   VoidProps,
 } from 'solid-js';
 import {Portal} from 'solid-js/web';
+import {provideState} from 'statebuilder';
 import {setPreviewEditorView} from '../../hooks/export-snippet';
 import {useHotkey} from '../../hooks/use-hotkey';
 import {DynamicTerminal} from '../Terminal/DynamicTerminal/DynamicTerminal';
@@ -32,9 +35,13 @@ const PreviewExportEditor = lazy(
 );
 
 function PreviewPortal(props: ParentProps) {
+  const config = provideState(EditorConfigStore);
   return (
     <Portal>
-      <div class={styles.previewPortal}>
+      <div
+        data-dev-mode={config.get.devMode ? '' : undefined}
+        class={styles.previewPortal}
+      >
         <Suspense fallback={<FrameSkeleton />}>{props.children}</Suspense>
       </div>
     </Portal>
@@ -47,6 +54,7 @@ export function PreviewFrame(props: VoidProps<PreviewFrameProps>) {
   const terminal = getTerminalState().state;
   const editor = getRootEditorStore();
   const assetsStore = getAssetsStore();
+  const exportCanvasStore = getExportCanvasStore();
 
   const filterHotKey = () =>
     editor.state.options.focused ||
@@ -112,6 +120,7 @@ export function PreviewFrame(props: VoidProps<PreviewFrameProps>) {
             type={terminal.type}
             readonlyTab={true}
             showTab={true}
+            showOnlyActiveTab={exportCanvasStore.get.showOnlyActiveTab}
             shadow={terminal.shadow}
             background={terminal.background}
             accentVisible={terminal.accentVisible}

apps/codeimage/src/components/Terminal/MacOsTerminal/MacOsTerminal.tsx

@@ -52,6 +52,7 @@ export const MacOsTerminal: ParentComponent<MacOsTerminalProps> = props => {
           <Show when={props.showTab && (!props.lite || props.preview)}>
             <TerminalWindowTabList
               lite={props.lite}
+              showOnlyActiveTab={props.showOnlyActiveTab}
               preview={props.preview ?? false}
               readOnly={props.readonlyTab}
               accent={props.accentVisible && !props.alternativeTheme}

apps/codeimage/src/components/Terminal/Tabs/TerminalWindowTabList.tsx

@@ -27,6 +27,7 @@ export interface TerminalWindowTabListProps {
   lite?: boolean;
   preview?: boolean;
   small?: boolean;
+  showOnlyActiveTab?: boolean;
 }
 
 export function TerminalWindowTabList(
@@ -61,7 +62,14 @@ export function TerminalWindowTabListContent(
     isActive,
   } = getRootEditorStore();
 
-  const sortableIds = createMemo(() => state.editors.map(editor => editor.id));
+  const editors = () => {
+    if (props.showOnlyActiveTab) {
+      return state.editors.filter(editor => isActive(editor.id));
+    }
+    return state.editors;
+  };
+
+  const sortableIds = createMemo(() => editors().map(editor => editor.id));
 
   function handleDragEnd(handler: DragEventParam) {
     if (handler.draggable && handler.droppable) {
@@ -102,7 +110,7 @@ export function TerminalWindowTabListContent(
               <DragDropSensors />
               <ConstrainDragAxis />
               <SortableProvider ids={sortableIds()}>
-                <For each={state.editors}>
+                <For each={editors()}>
                   {(editor, index) => {
                     const icon = createTabIcon(
                       () => editor.tab.tabName ?? null,
@@ -138,7 +146,7 @@ export function TerminalWindowTabListContent(
                           handleTabNameChange(editor.id, tabName)
                         }
                         onClose={
-                          state.editors.length > 1
+                          !props.readOnly && state.editors.length > 1
                             ? () => removeEditor(editor.id)
                             : null
                         }

apps/codeimage/src/components/Terminal/TerminalHost.tsx

@@ -19,6 +19,7 @@ export interface BaseTerminalProps
   tabIcon?: LanguageIconDefinition['content'];
   onTabChange?: (tab: string) => void;
   lite?: boolean;
+  showOnlyActiveTab?: boolean;
   themeId: string;
 }
 

apps/codeimage/src/components/Toolbar/ExportButton.tsx

@@ -1,4 +1,5 @@
 import {useI18n} from '@codeimage/locale';
+import {getExportCanvasStore} from '@codeimage/store/canvas';
 import {
   Box,
   FieldLabel,
@@ -14,6 +15,7 @@ import {
 
 import {
   Button,
+  Checkbox,
   Dialog,
   DialogPanelContent,
   DialogPanelFooter,
@@ -130,6 +132,7 @@ export type ExportDialogProps = {
 export function ExportDialog(props: ExportDialogProps & DialogProps) {
   const [t] = useI18n<AppLocaleEntries>();
   const [supportWebShare] = useWebshare();
+  const exportCanvasStore = getExportCanvasStore();
   const [mode, setMode] = createSignal<ExportMode>(ExportMode.export);
   const [extension, setExtension] = createSignal<ExportExtension>(
     ExportExtension.png,
@@ -285,6 +288,13 @@ export function ExportDialog(props: ExportDialogProps & DialogProps) {
                 step={1}
               />
             </FlexField>
+
+            <Checkbox
+              checked={exportCanvasStore.get.showOnlyActiveTab}
+              onChange={exportCanvasStore.setShowOnlyActiveTab}
+              size={'md'}
+              label={'(Export only) Show only active tab'}
+            />
           </VStack>
         </DynamicSizedContainer>
       </DialogPanelContent>

apps/codeimage/src/components/Toolbar/ExportContent.tsx

@@ -11,7 +11,7 @@ import {
   Text,
   VStack,
 } from '@codeimage/ui';
-import {PopoverContent} from '@codeui/kit';
+import {Checkbox, PopoverContent} from '@codeui/kit';
 import {DynamicSizedContainer} from '@ui/DynamicSizedContainer/DynamicSizedContainer';
 import {SegmentedField} from '@ui/SegmentedField/SegmentedField';
 import {createSignal, Show} from 'solid-js';
@@ -116,6 +116,13 @@ export function ExportPopoverContent() {
                 </Box>
               </HStack>
             </FlexField>
+
+            <Checkbox
+              checked={exportCanvasStore.get.showOnlyActiveTab}
+              onChange={exportCanvasStore.setShowOnlyActiveTab}
+              size={'md'}
+              label={'(Export only) Show only active tab'}
+            />
           </VStack>
         </div>
       </DynamicSizedContainer>

apps/codeimage/src/state/canvas.ts

@@ -9,6 +9,7 @@ export interface PersistedExportCanvasSettings {
   devicePixelRatio: number;
   jpegQuality: number;
   extension: ExportExtension;
+  showOnlyActiveTab: boolean;
 }
 
 export const ExportCanvasStore = defineStore(() => ({
@@ -19,12 +20,14 @@ export const ExportCanvasStore = defineStore(() => ({
   devicePixelRatio: 3,
   jpegQuality: 100,
   extension: ExportExtension.png,
+  showOnlyActiveTab: false,
 }))
   .extend(
     withIndexedDbPlugin<PersistedExportCanvasSettings>('exportSettings', {
       devicePixelRatio: 3,
       jpegQuality: 100,
       extension: ExportExtension.png,
+      showOnlyActiveTab: false,
     }),
   )
   .extend((store, context) => {
@@ -34,6 +37,7 @@ export const ExportCanvasStore = defineStore(() => ({
           devicePixelRatio: value.devicePixelRatio,
           jpegQuality: value.jpegQuality,
           extension: value.extension,
+          showOnlyActiveTab: value.showOnlyActiveTab,
         });
       }),
     );
@@ -56,6 +60,9 @@ export const ExportCanvasStore = defineStore(() => ({
     setCanvasSize(width: number, height: number) {
       store.set('canvasSize', {width, height});
     },
+    setShowOnlyActiveTab(value: boolean) {
+      store.set('showOnlyActiveTab', value);
+    },
     initCanvas(el: Accessor<HTMLElement | undefined>) {
       createResizeObserver(el, ref => {
         setTimeout(() => {

apps/codeimage/src/state/editor/config.store.ts

@@ -21,13 +21,21 @@ export interface ConfigState {
   ready: boolean;
   fonts: (CustomFontConfiguration & {type: 'web'})[];
   systemFonts: (CustomFontConfiguration & {type: 'system'})[];
+  devMode: boolean;
+}
+
+declare global {
+  interface Window {
+    toggleDevMode: () => void;
+  }
 }
 
 function getDefaultConfig(): ConfigState {
   return {
     ready: false,
     fonts: [...SUPPORTED_FONTS],
     systemFonts: [],
+    devMode: false,
   };
 }
 
@@ -58,6 +66,11 @@ export const EditorConfigStore = defineStore(() => getDefaultConfig())
   .extend(_ => {
     const fonts = createMemo(() => _.localFontsApi.state().fonts);
 
+    const toggleDevMode = () => _.set('devMode', debug => !debug);
+    onMount(() => {
+      window.toggleDevMode = toggleDevMode;
+    });
+
     const buildSystemFontConfiguration = (font: LoadedFont) =>
       ({
         type: 'system',
@@ -77,4 +90,8 @@ export const EditorConfigStore = defineStore(() => getDefaultConfig())
         _.set('systemFonts', fontsConfiguration);
       }),
     );
+
+    return {
+      toggleDevMode,
+    };
   });