feat(app,api): add line number start option (#624)

* feat(app,api): add line number start option
* chore: cleanup
* Create slimy-dolphins-add.md
* test(api): add integration test
* lint: fix lint
* lint: fix lint

Author: riccardoperra

.changeset/slimy-dolphins-add.md

@@ -0,0 +1,6 @@
+---
+"@codeimage/api": minor
+"@codeimage/app": minor
+---
+
+feat(app,api): add line number start option

apps/api/prisma/migrations/20240107110836_add_line_number_start/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "SnippetEditorTab" ADD COLUMN     "lineNumberStart" INTEGER NOT NULL DEFAULT 1;

apps/api/prisma/schema.prisma

@@ -82,6 +82,8 @@ model SnippetEditorTab {
   languageId String
   tabName    String  @default("")
 
+  lineNumberStart Int @default(1)
+
   @@unique([id, projectId])
 }
 

apps/api/src/modules/project/domain/projectUpdateRequest.ts

@@ -13,13 +13,15 @@ interface EditorUpdateRequest {
   code: NonNullable<SnippetEditorTab['code']>;
   languageId: NonNullable<SnippetEditorTab['languageId']>;
   tabName: NonNullable<SnippetEditorTab['tabName']>;
+  lineNumberStart: NonNullable<SnippetEditorTab['lineNumberStart']>;
 }
 
 interface EditorTabResponse {
   id: NonNullable<SnippetEditorTab['id']>;
   code: NonNullable<SnippetEditorTab['code']>;
   languageId: NonNullable<SnippetEditorTab['languageId']>;
   tabName: NonNullable<SnippetEditorTab['tabName']>;
+  lineNumberStart: NonNullable<SnippetEditorTab['lineNumberStart']>;
 }
 
 export interface ProjectUpdateRequest {

apps/api/src/modules/project/infra/prisma/prisma-project.repository.ts

@@ -138,20 +138,22 @@ export function makePrismaProjectRepository(
             },
           },
           upsert: data.editors.map(editor => {
-            const {languageId, code, tabName} = editor;
+            const {languageId, code, tabName, lineNumberStart, id} = editor;
             return {
               where: {
-                id: editor.id,
+                id,
               },
               create: {
                 code,
                 tabName,
                 languageId,
+                lineNumberStart,
               },
               update: {
                 code,
                 tabName,
                 languageId,
+                lineNumberStart,
               },
             };
           }),

apps/api/src/modules/project/mapper/create-project-mapper.ts

@@ -62,6 +62,7 @@ export function createProjectRequestMapper(
       languageId: editor.languageId,
       code: editor.code,
       tabName: editor.tabName,
+      lineNumberStart: editor.lineNumberStart,
     })),
   };
 }

apps/api/src/modules/project/mapper/get-project-by-id-mapper.ts

@@ -45,6 +45,7 @@ export function createCompleteProjectGetByIdResponseMapper(
       languageId: editor.languageId,
       code: editor.code,
       tabName: editor.tabName,
+      lineNumberStart: editor.lineNumberStart,
     })),
     isOwner: false,
   };

apps/api/src/modules/project/schema/project-create.schema.ts

@@ -26,6 +26,7 @@ export const SnippetEditorTabsCreateRequestSchema = Type.Array(
       code: Type.String(),
       languageId: Type.String(),
       tabName: Type.String(),
+      lineNumberStart: Type.Integer({minimum: 1, maximum: 999_999}),
     },
     {title: 'SnippetEditorTabCreateRequest'},
   ),

apps/api/src/modules/project/schema/project-update.schema.ts

@@ -21,6 +21,7 @@ export const SnippetEditorTabsUpdateRequestSchema = Type.Array(
       code: Type.String(),
       languageId: Type.String(),
       tabName: Type.String(),
+      lineNumberStart: Type.Integer({minimum: 1, maximum: 999_999}),
     },
     {title: 'SnippetEditorTabUpdateRequest'},
   ),

apps/api/src/modules/project/schema/project.schema.ts

@@ -21,6 +21,7 @@ export const BaseSnippetEditorTabsSchema = Type.Array(
     code: Type.String(),
     languageId: Type.String(),
     tabName: Type.String(),
+    lineNumberStart: Type.Integer({minimum: 1, maximum: 999_999}),
   }),
 );
 

apps/api/test/routes/v1/project/create.integration.test.ts

@@ -35,7 +35,12 @@ test<TestContext>('POST /v1/project/ [Create Project] -> 200', async context =>
       padding: 0,
     },
     editors: [
-      {code: 'function(){}', languageId: 'javascript', tabName: 'index.jsx'},
+      {
+        code: 'function(){}',
+        languageId: 'javascript',
+        tabName: 'index.jsx',
+        lineNumberStart: 300,
+      },
     ],
     editorOptions: {
       fontWeight: 400,

apps/api/test/routes/v1/project/update.integration.test.ts

@@ -44,12 +44,14 @@ test<TestContext>('POST /v1/project/:id [Update Project] -> 200', async context
         code: '## title',
         languageId: 'markdown',
         tabName: 'README.md',
+        lineNumberStart: 1,
       },
       {
         id: 'temp',
         code: '2',
         languageId: 'typescript',
         tabName: 'index.tsx',
+        lineNumberStart: 300,
       },
     ],
     editorOptions: {
@@ -134,12 +136,14 @@ test<TestContext>('POST /v1/project/:id [Update Project] -> 200', async context
         code: '## title',
         languageId: 'markdown',
         tabName: 'README.md',
+        lineNumberStart: 1,
       },
       {
         id: body.editorTabs[1].id,
         code: '2',
         languageId: 'typescript',
         tabName: 'index.tsx',
+        lineNumberStart: 300,
       },
     ] as ProjectUpdateResponse['editorTabs'],
     'return updated editor tabs',

apps/api/tsconfig.json

@@ -3,16 +3,13 @@
   "compilerOptions": {
     "outDir": "dist",
     "resolveJsonModule": false,
+    "declarationMap": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "moduleResolution": "NodeNext",
     "module": "NodeNext",
     "target": "ES2022",
-    "typeRoots": [
-      "./src/common/domainFunctions/functions.d.ts"
-    ]
+    "typeRoots": ["./src/common/domainFunctions/functions.d.ts"]
   },
-  "include": [
-    "./src/**/*.ts"
-  ]
-}
+  "include": ["./src/**/*.ts"]
+}

apps/codeimage/package.json

@@ -67,7 +67,7 @@
     "@codemirror/search": "^6.4.0",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.11.0",
-    "@codeui/kit": "^0.0.36",
+    "@codeui/kit": "^0.0.37",
     "@floating-ui/core": "^1.2.2",
     "@floating-ui/dom": "^1.2.3",
     "@formatjs/intl-relativetimeformat": "11.1.4",

apps/codeimage/src/components/CustomEditor/CustomEditor.tsx

@@ -172,9 +172,15 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
   createExtension(() => customFontExtension());
   createExtension(currentLanguage);
   createExtension(currentExtraLanguage);
-  createExtension(() =>
-    editorState.options.showLineNumbers ? lineNumbers() : [],
-  );
+
+  const lineNumberStart = createMemo(() => editor()?.lineNumberStart);
+  createExtension(() => {
+    const lnStart = lineNumberStart() ?? 1;
+    const newLn = (ln: number) => ln + (lnStart - 1);
+    return editorState.options.showLineNumbers
+      ? lineNumbers({formatNumber: lineNo => String(newLn(lineNo))})
+      : [];
+  });
   createExtension(() => themeConfiguration()?.editorTheme || []);
   createExtension(baseTheme);
 

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

@@ -6,7 +6,7 @@ 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 {createSelectOptions, Select} from '@codeui/kit';
+import {createSelectOptions, Select, NumberField} from '@codeui/kit';
 import {getUmami} from '@core/constants/umami';
 import {DynamicSizedContainer} from '@ui/DynamicSizedContainer/DynamicSizedContainer';
 import {SegmentedField} from '@ui/SegmentedField/SegmentedField';
@@ -18,6 +18,7 @@ import {PanelDivider} from './PanelDivider';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
 import {SuspenseEditorItem} from './SuspenseEditorItem';
+import {appEnvironment} from '@core/configuration';
 
 const languages: readonly LanguageDefinition[] = [...SUPPORTED_LANGUAGES].sort(
   (a, b) => {
@@ -35,9 +36,15 @@ const languages: readonly LanguageDefinition[] = [...SUPPORTED_LANGUAGES].sort(
 
 export const EditorStyleForm: ParentComponent = () => {
   const {themeArray} = getThemeStore();
+  const {lineNumbers: lineNumbersConfig} = appEnvironment;
   const [t] = useI18n<AppLocaleEntries>();
-  const {editor, setLanguageId, formatter, setFormatterName} =
-    getActiveEditorStore();
+  const {
+    editor,
+    setLanguageId,
+    formatter,
+    setFormatterName,
+    setLineNumberStart,
+  } = getActiveEditorStore();
   const {
     state,
     actions: {setShowLineNumbers, setFontWeight, setFontId, setEnableLigatures},
@@ -207,6 +214,28 @@ export const EditorStyleForm: ParentComponent = () => {
                 </SuspenseEditorItem>
               </TwoColumnPanelRow>
             </PanelRow>
+
+            <Show when={state.options.showLineNumbers}>
+              <PanelRow
+                for={'frameLineNumberStartField'}
+                label={t('frame.lineNumberStart')}
+              >
+                <TwoColumnPanelRow>
+                  <SuspenseEditorItem
+                    fallback={<SkeletonLine width={'100%'} height={'26px'} />}
+                  >
+                    <NumberField
+                      size={'xs'}
+                      min={lineNumbersConfig.min}
+                      max={lineNumbersConfig.max}
+                      id={'frameLineNumberStartField'}
+                      value={editor().lineNumberStart}
+                      onChange={setLineNumberStart}
+                    />
+                  </SuspenseEditorItem>
+                </TwoColumnPanelRow>
+              </PanelRow>
+            </Show>
           </DynamicSizedContainer>
 
           <PanelDivider />

apps/codeimage/src/core/configuration.ts

@@ -7,12 +7,16 @@ export const [appEnvironment] = createConfiguration({
   locales: SUPPORTED_LOCALES,
   themes: [],
   languages: [],
+  lineNumbers: {
+    min: 1,
+    max: 999_999,
+  },
   editorPadding: [
-    {label: '0', value: "0"},
-    {label: '16', value: "16"},
-    {label: '32', value: "32"},
-    {label: '64', value: "64"},
-    {label: '128', value: "128"},
+    {label: '0', value: '0'},
+    {label: '16', value: '16'},
+    {label: '32', value: '32'},
+    {label: '64', value: '64'},
+    {label: '128', value: '128'},
   ],
   editorRadius: [
     {label: '0', value: 0},

apps/codeimage/src/i18n/sidebar.ts

@@ -17,6 +17,7 @@ export default {
       editor: 'Editor',
       language: 'Language',
       lineNumbers: 'Line number',
+      lineNumberStart: 'Line start',
       font: 'Font',
       theme: 'Theme',
       fontWeight: 'Font weight',
@@ -43,6 +44,7 @@ export default {
       editor: 'Editor',
       language: 'Linguaggio',
       lineNumbers: 'Numeri di riga',
+      lineNumberStart: 'Line start',
       font: 'Carattere',
       fontWeight: 'Peso carattere',
       reflection: 'Riflesso',
@@ -70,6 +72,7 @@ export default {
       editor: 'Editor',
       language: 'Sprache',
       lineNumbers: 'Zeilennummer',
+      lineNumberStart: 'Line start',
       font: 'Schriftart',
       fontWeight: 'Schriftstärke',
       reflection: 'Reflektion',
@@ -97,6 +100,7 @@ export default {
       editor: 'Editor',
       language: 'Idioma',
       lineNumbers: 'Número de línea',
+      lineNumberStart: 'Line start',
       font: 'Fuente',
       fontWeight: 'Peso de fuente',
       reflection: 'Reflexión',

apps/codeimage/src/pages/Dashboard/dashboard.state.ts

@@ -74,6 +74,7 @@ function makeDashboardState(authState = getAuth0State()) {
             code: appEnvironment.defaultState.editor.code,
             languageId: appEnvironment.defaultState.editor.languageId,
             tabName: 'index.tsx',
+            lineNumberStart: 1,
           },
         ],
       },

apps/codeimage/src/state/editor/activeEditor.ts

@@ -3,7 +3,8 @@ import {useI18n} from '@codeimage/locale';
 import {getRootEditorStore} from '@codeimage/store/editor';
 import {getUiStore} from '@codeimage/store/ui';
 import {toast} from '@codeimage/ui';
-import {isNonNullable} from '@solid-primitives/utils';
+import {appEnvironment} from '@core/configuration';
+import {clamp, isNonNullable} from '@solid-primitives/utils';
 import {createEffect, createMemo, createRoot, on} from 'solid-js';
 import {createPrettierFormatter} from '../../hooks/createPrettierFormatter';
 import {AppLocaleEntries} from '../../i18n';
@@ -46,6 +47,20 @@ const $activeEditorState = () => {
     const setCode = (code: string) =>
       setEditors(currentEditorIndex(), 'code', code);
 
+    const setLineNumberStart = (lineNumberStart: number | null | undefined) => {
+      if (lineNumberStart === null) return;
+      return setEditors(
+        currentEditorIndex(),
+        'lineNumberStart',
+        // TODO Already done by @codeui/kit but I don't feel safe about this component I made
+        clamp(
+          lineNumberStart ?? 1,
+          appEnvironment.lineNumbers.min,
+          appEnvironment.lineNumbers.max,
+        ),
+      );
+    };
+
     const setFormatterName = (formatter: string | null) =>
       setEditors(currentEditorIndex(), 'formatter', formatter);
 
@@ -83,6 +98,7 @@ const $activeEditorState = () => {
       editor: currentEditor,
       setLanguageId,
       setCode,
+      setLineNumberStart,
       formatter,
       setFormatterName,
       canFormat: formatter.canFormat,

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

@@ -22,6 +22,7 @@ export function getInitialEditorState(): EditorState {
     code: appEnvironment.defaultState.editor.code,
     languageId: appEnvironment.defaultState.editor.languageId,
     formatter: null,
+    lineNumberStart: 1,
     tab: {
       tabName: 'index.tsx',
       tabIcon: undefined,
@@ -104,6 +105,7 @@ export function createEditorsStore() {
           languageId: editor.languageId,
           id: editor.id,
           code: editor.code,
+          lineNumberStart: editor.lineNumberStart,
         }));
       return {
         options: {...state.options, ...persistedState.options},
@@ -114,6 +116,7 @@ export function createEditorsStore() {
             languageId: editor.languageId,
             tab: {tabName: editor.tabName},
             id: editor.id,
+            lineNumberStart: editor.lineNumberStart,
           };
         }),
       };
@@ -136,6 +139,7 @@ export function createEditorsStore() {
           code: editor.code,
           tabName: editor.tab.tabName ?? '',
           id: editor.id,
+          lineNumberStart: editor.lineNumberStart ?? 1,
         };
       }),
       options: {
@@ -245,6 +249,7 @@ export function createEditorsStore() {
             languageId: editor.languageId,
             id: editor.id,
             code: editor.code,
+            lineNumberStart: editor.lineNumberStart ?? 1,
           } as EditorState),
       ),
     );