Merge pull request #486 from riccardoperra/483-option-to-disable-liga…

…tures-in-fonts

feat(app): option to disable ligatures in fonts #483

.changeset/four-mangos-burn.md

@@ -0,0 +1,6 @@
+---
+"@codeimage/api": minor
+"@codeimage/app": minor
+---
+
+feat(app/api): allow to disable ligatures in fonts #483

apps/api/prisma/migrations/20230302182841_project_unique_owner_constraint_336_feature/migration.sql

@@ -0,0 +1,5 @@
+-- AddForeignKey
+ALTER TABLE "Project" ADD CONSTRAINT "Project_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- RenameIndex
+ALTER INDEX "Project_id_ownerId_idx" RENAME TO "Project_id_ownerId_key";

apps/api/prisma/migrations/20230302183231_editor_add_ligatures_option/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "SnippetEditorOptions" ADD COLUMN     "enableLigatures" BOOLEAN NOT NULL DEFAULT true;

apps/api/prisma/schema.prisma

@@ -70,6 +70,7 @@ model SnippetEditorOptions {
   fontWeight      Int      @default(400)
   showLineNumbers Boolean  @default(false)
   themeId         String
+  enableLigatures Boolean  @default(true)
 }
 
 model SnippetEditorTab {

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

@@ -162,6 +162,7 @@ export function makePrismaProjectRepository(
             fontWeight: data.editorOptions.fontWeight,
             showLineNumbers: data.editorOptions.showLineNumbers,
             themeId: data.editorOptions.themeId,
+            enableLigatures: data.editorOptions.enableLigatures,
           },
         },
         frame: {

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

@@ -56,6 +56,7 @@ export function createProjectRequestMapper(
         data.editorOptions.showLineNumbers ??
         EditorOptionsCreateRequestSchema.properties.showLineNumbers.default,
       themeId: data.editorOptions.themeId,
+      enableLigatures: data.editorOptions.enableLigatures,
     },
     editors: data.editors.map(editor => ({
       languageId: editor.languageId,

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

@@ -37,6 +37,7 @@ export function createCompleteProjectGetByIdResponseMapper(
       fontId: data.editorOptions.fontId,
       showLineNumbers: data.editorOptions.showLineNumbers,
       themeId: data.editorOptions.themeId,
+      enableLigatures: data.editorOptions.enableLigatures,
     },
     editorTabs: data.editorTabs.map(editor => ({
       projectId: data.id,

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

@@ -54,6 +54,7 @@ export const EditorOptionsCreateRequestSchema = Type.Object(
     fontWeight: Type.Number({default: 400}),
     themeId: Type.String(),
     showLineNumbers: Nullable(Type.Boolean(), {default: false}),
+    enableLigatures: Type.Boolean(),
   },
   {
     title: 'EditorOptionsCreateRequest',

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

@@ -49,6 +49,7 @@ const EditorOptionsUpdateRequestSchema = Type.Object(
     fontWeight: Type.Number(),
     themeId: Type.String(),
     showLineNumbers: Type.Boolean(),
+    enableLigatures: Type.Boolean(),
   },
   {
     title: 'EditorOptionsUpdateRequest',

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

@@ -53,4 +53,5 @@ export const BaseSnippetEditorOptionsSchema = Type.Object({
   fontWeight: Type.Number(),
   showLineNumbers: Type.Boolean(),
   themeId: Type.String(),
+  enableLigatures: Type.Boolean(),
 });

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

@@ -32,6 +32,7 @@ t.test(
         showLineNumbers: null,
         themeId: 'themeId',
         fontWeight: 400,
+        enableLigatures: true,
       },
     });
 
@@ -62,6 +63,7 @@ t.test(
         showLineNumbers: false,
         themeId: 'themeId',
         fontWeight: 400,
+        enableLigatures: true,
       },
     } as DomainModel.ProjectCreateRequest);
   },

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

@@ -44,6 +44,7 @@ t.test(
         showLineNumbers: true,
         themeId: 'themeId',
         fontWeight: 400,
+        enableLigatures: true,
       },
       editorTabs: [],
     });
@@ -83,6 +84,7 @@ t.test(
         showLineNumbers: true,
         themeId: 'themeId',
         fontWeight: 400,
+        enableLigatures: true,
       },
     } as SchemaModel.ProjectCompleteResponse);
   },

apps/api/test/modules/project/service/project.service.test.ts

@@ -85,6 +85,7 @@ const baseResponse = {
     fontWeight: 300,
     showLineNumbers: true,
     themeId: 'themeId',
+    enableLigatures: true,
   },
   frame: {
     background: '#fff',
@@ -124,6 +125,7 @@ t.test('create project', async t => {
       fontWeight: 300,
       showLineNumbers: true,
       themeId: 'themeId',
+      enableLigatures: true,
     },
     editors: [],
     frame: {
@@ -265,11 +267,13 @@ t.test('clone -> should return cloned project', async t => {
     createdAt: new Date(),
   };
 
-  let createNewProjectStub = sinon.stub(service, 'createNewProject').resolves({
-    ...baseResponse,
-    id: baseResponse.id,
-    name: 'Existing',
-  });
+  const createNewProjectStub = sinon
+    .stub(service, 'createNewProject')
+    .resolves({
+      ...baseResponse,
+      id: baseResponse.id,
+      name: 'Existing',
+    });
 
   const result1 = await service.clone(user, 'projectId1', null);
 

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

@@ -34,6 +34,7 @@ t.test('POST /v1/project/ [Create Project] -> 200', async t => {
       showLineNumbers: true,
       fontId: '1',
       themeId: 'default',
+      enableLigatures: true,
     },
     terminal: {
       opacity: 1,

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

@@ -48,6 +48,7 @@ t.test('POST /v1/project/:id [Update Project] -> 200', async t => {
       showLineNumbers: false,
       fontId: '3',
       themeId: 'vscode',
+      enableLigatures: true,
     },
     terminal: {
       opacity: 0,
@@ -95,6 +96,7 @@ t.test('POST /v1/project/:id [Update Project] -> 200', async t => {
       showLineNumbers: false,
       fontId: '3',
       themeId: 'vscode',
+      enableLigatures: true,
     } as ProjectUpdateResponse['editorOptions'],
     'return updated editor options',
   );

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

@@ -45,11 +45,6 @@ import {
 } from 'solid-js';
 import {createTabIcon} from '../../hooks/use-tab-icon';
 
-interface CustomFontExtensionOptions {
-  fontName: string;
-  fontWeight: number;
-}
-
 const EDITOR_BASE_SETUP: Extension = [
   highlightSpecialChars(),
   drawSelection(),
@@ -152,31 +147,29 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
     },
   });
 
-  const createCustomFontExtension = (
-    options: CustomFontExtensionOptions,
-  ): Extension => {
+  const customFontExtension = (): Extension => {
+    const fontName =
+        fonts.find(({id}) => editorState.options.fontId === id)?.name ||
+        fonts[0].name,
+      fontWeight = editorState.options.fontWeight,
+      enableLigatures = editorState.options.enableLigatures;
+
+    const fontVariantLigatures = !!enableLigatures ? 'normal' : 'none';
+
     return EditorView.theme({
       '.cm-content *': {
-        fontFamily: `${options.fontName}, monospace`,
-        fontWeight: options.fontWeight,
-        fontVariantLigatures: 'normal',
+        fontFamily: `${fontName}, monospace`,
+        fontWeight: fontWeight,
+        fontVariantLigatures,
       },
       '.cm-gutters': {
-        fontFamily: `${options.fontName}, monospace`,
+        fontFamily: `${fontName}, monospace`,
         fontWeight: 400,
-        fontVariantLigatures: 'normal',
+        fontVariantLigatures,
       },
     });
   };
 
-  const customFontExtension = () =>
-    createCustomFontExtension({
-      fontName:
-        fonts.find(({id}) => editorState.options.fontId === id)?.name ||
-        fonts[0].name,
-      fontWeight: editorState.options.fontWeight,
-    });
-
   onMount(() => {
     setRef(() => editorEl);
     import('./fix-cm-aria-roles-lighthouse').then(m => {
@@ -193,7 +186,7 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
   createEditorControlledValue(editorView, () => editor()?.code ?? '');
   createEditorReadonly(editorView, () => props.readOnly);
   createExtension(EditorView.lineWrapping);
-  createExtension(customFontExtension);
+  createExtension(() => customFontExtension());
   createExtension(currentLanguage);
   createExtension(currentExtraLanguage);
   createExtension(() =>

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

@@ -12,6 +12,7 @@ import {useModality} from '@core/hooks/isMobile';
 import {SkeletonLine} from '@ui/Skeleton/Skeleton';
 import {createMemo, ParentComponent, Show} from 'solid-js';
 import {AppLocaleEntries} from '../../i18n';
+import {PanelDivider} from './PanelDivider';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
 import {SuspenseEditorItem} from './SuspenseEditorItem';
@@ -35,7 +36,7 @@ export const EditorStyleForm: ParentComponent = () => {
   const {editor, setLanguageId} = getActiveEditorStore();
   const {
     state,
-    actions: {setShowLineNumbers, setFontWeight, setFontId},
+    actions: {setShowLineNumbers, setFontWeight, setFontId, setEnableLigatures},
     computed: {font},
   } = getRootEditorStore();
 
@@ -127,6 +128,10 @@ export const EditorStyleForm: ParentComponent = () => {
             </TwoColumnPanelRow>
           </PanelRow>
 
+          <PanelDivider />
+
+          <PanelHeader label={t('frame.font')} />
+
           <PanelRow for={'frameFontField'} label={t('frame.font')}>
             <TwoColumnPanelRow>
               <SuspenseEditorItem
@@ -171,6 +176,25 @@ export const EditorStyleForm: ParentComponent = () => {
               </SuspenseEditorItem>
             </TwoColumnPanelRow>
           </PanelRow>
+
+          <PanelRow for={'frameFontWeightField'} label={t('frame.ligatures')}>
+            <TwoColumnPanelRow>
+              <SuspenseEditorItem
+                fallback={<SkeletonLine width={'85%'} height={'26px'} />}
+              >
+                <SegmentedField
+                  size={'xs'}
+                  id={'frameLigaturesField'}
+                  value={state.options.enableLigatures}
+                  onChange={setEnableLigatures}
+                  items={[
+                    {label: t('common.yes'), value: true},
+                    {label: t('common.no'), value: false},
+                  ]}
+                />
+              </SuspenseEditorItem>
+            </TwoColumnPanelRow>
+          </PanelRow>
         </>
       )}
     </Show>

apps/codeimage/src/i18n/sidebar.ts

@@ -20,6 +20,7 @@ export default {
       fontWeight: 'Font weight',
       reflection: 'Reflection',
       backgroundType: 'Background',
+      ligatures: 'Ligatures',
     },
   },
   it: {
@@ -43,6 +44,7 @@ export default {
       watermark: 'Watermark',
       backgroundType: 'Tipo background',
       theme: 'Tema',
+      ligatures: 'Ligatures',
     },
   },
   de: {
@@ -66,6 +68,7 @@ export default {
       watermark: 'Wasserzeichen',
       backgroundType: 'Hintergrundtyp',
       theme: 'Theme',
+      ligatures: 'Ligatures',
     },
   },
   es: {
@@ -89,6 +92,7 @@ export default {
       watermark: 'filigrana',
       backgroundType: 'Tipo de fondo',
       theme: 'Theme',
+      ligatures: 'Ligatures',
     },
   },
 } as const;

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

@@ -33,6 +33,7 @@ export function getInitialEditorUiOptions(): EditorUIOptions {
     fontId: appEnvironment.defaultState.editor.font.id,
     fontWeight: appEnvironment.defaultState.editor.font.types[0].weight,
     focused: false,
+    enableLigatures: true,
   };
 }
 
@@ -52,6 +53,7 @@ export function createEditorsStore() {
       setFontWeight: number;
       setShowLineNumbers: boolean;
       setFromPersistedState: PersistedEditorState;
+      setEnableLigatures: boolean;
     }>(),
   );
 
@@ -81,6 +83,9 @@ export function createEditorsStore() {
     .hold(store.commands.setShowLineNumbers, (showLineNumbers, {set}) =>
       set('options', 'showLineNumbers', showLineNumbers),
     )
+    .hold(store.commands.setEnableLigatures, (enable, {set}) =>
+      set('options', 'enableLigatures', enable),
+    )
     .hold(store.commands.setFromPersistedState, (persistedState, {state}) => {
       const editors = (persistedState.editors ?? [])
         .slice(0, MAX_TABS)
@@ -128,6 +133,7 @@ export function createEditorsStore() {
         showLineNumbers: state.options.showLineNumbers,
         fontId: state.options.fontId,
         fontWeight: state.options.fontWeight,
+        enableLigatures: state.options.enableLigatures ?? true,
       },
     };
   };
@@ -138,6 +144,7 @@ export function createEditorsStore() {
       store.commands.setThemeId,
       store.commands.setFontWeight,
       store.commands.setShowLineNumbers,
+      store.commands.setEnableLigatures,
       editorUpdateCommand,
     ])
     .pipe(

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

@@ -26,6 +26,7 @@ export interface EditorUIOptions {
   showLineNumbers: boolean;
   focused: boolean;
   themeId: string;
+  enableLigatures: boolean;
 }
 
 export interface PersistedEditorState {