🚀 - 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';

``` 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 https://github.com/riccardoperra/codeimage/blob/f99bb0476792c0fb6f0cda6fb49870fc91424a39/apps/codeimage/src/state/editor/editor.ts#L20-L31 Then we have to add also the setter listener for statebuilder like the others one in order to be able to update this value https://github.com/riccardoperra/codeimage/blob/f99bb0476792c0fb6f0cda6fb49870fc91424a39/apps/codeimage/src/state/editor/editor.ts#L90-L92 We also have to listen this command in order to execute the http call to update the project remotely https://github.com/riccardoperra/codeimage/blob/f99bb0476792c0fb6f0cda6fb49870fc91424a39/apps/codeimage/src/state/editor/editor.ts#L149-L160 We must update the `EditorPersistedState` https://github.com/riccardoperra/codeimage/blob/f99bb0476792c0fb6f0cda6fb49870fc91424a39/apps/codeimage/src/state/editor/editor.ts#L127 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 https://github.com/riccardoperra/codeimage/blob/f99bb0476792c0fb6f0cda6fb49870fc91424a39/apps/codeimage/src/state/editor/editor.ts#L97

[stale[bot]]

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.

[stale[bot]]

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.

[stale[bot]]

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.