🚀 - Allow line height to be configured

[kedar-joshi]

Which @codeimage/* package(s) are relevant/releated to the feature request?

codeimage

Description

CodeImage is my preferred way of generating code screenshots and it's an amazing tool (so thank you so much 👍🏻).

However, sometimes I miss the ability to use custom line height for better readability. It would great if there is a was way to choose the line height for the code.

[riccardoperra]

Hi @kedar-joshi, we'll work on this issue in the next days.

Me and @hackpirodev are open to suggestions, my idea is to add a new field "Line height" in the editor options as a number input. The default value will be 1.4 (the current used value)

---

@hackpirodev

We need to add a new db column lineHeight to the SnippetEditorOptions table in order to persist this value for registered users.

Presets table use a json field to save the options then we don't have to update its structure...but we might have to update the mappers (I’m not sure about that, maybe a version upgrade is even not needed since this is not a breaking change)

[kedar-joshi]

my idea is to add a new field "Line height" in the editor options as a number input. The default value will be 1.4 (the current used value)

That's perfect. 👍🏻

[riccardoperra]

@hackpirodev

Here some info for the development for the FE side:

• The number input is not available yet on @codeui/kit, but there is a pending PR which I will complete next days.
  In order to use it you have to declare it and pass the required inputs to allows to update the line height correctly

import {NumberField} from '@codeui/kit';

<NumberField min={1} max={3} step={0.1}/>

I think you can try the current number field by moving to the pr branch from the codeimage repo (packages/kit)

• We have to add the new lineHeight property into the editor.ts state, declaring the default value as 1.4
  

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

  Lines 20 to 31 in f99bb04

  	export function getInitialEditorState(): EditorState {
  	return {
  	id: defaultId,
  	code: appEnvironment.defaultState.editor.code,
  	languageId: appEnvironment.defaultState.editor.languageId,
  	tab: {
  	tabName: 'index.tsx',
  	tabIcon: undefined,
  	},
  	};
  	}

  
  Then we have to add also the setter listener for statebuilder like the others one in order to be able to update this value
  

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

  Lines 90 to 92 in f99bb04

  	.hold(store.commands.setEnableLigatures, (enable, {set}) =>
  	set('options', 'enableLigatures', enable),
  	)

  
  We also have to listen this command in order to execute the http call to update the project remotely
  

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

  Lines 149 to 160 in f99bb04

  	const stateToPersist$ = from(
  	store.watchCommand([
  	store.commands.setFontId,
  	store.commands.setThemeId,
  	store.commands.setFontWeight,
  	store.commands.setShowLineNumbers,
  	store.commands.setEnableLigatures,
  	editorUpdateCommand,
  	]),
  	).pipe(
  	map(() => store()),
  	map(mapToStateToPersistState),

  
  We must update the EditorPersistedState

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

  Line 127 in f99bb04

  const mapToStateToPersistState = (

  to update the mapper.
  I think we'll have also to update the setFromPersistedState in order to extract the value from the http call response

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

  Line 97 in f99bb04

  .hold(store.commands.setFromPersistedState, (persistedState, {state}) => {

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.