feat: add letter spacing to Text elements

apps/dashboard/src/components/EditorToolbar.tsx

@@ -39,6 +39,7 @@ export function EditorToolbar() {
         fontFamily: 'Inter',
         fontWeight: 400,
         lineHeight: 1,
+        letterSpacing: 0,
         fontSize: 50,
         align: 'left',
       }}>
@@ -99,6 +100,7 @@ export function EditorToolbar() {
         fontFamily: 'Inter',
         fontWeight: 400,
         lineHeight: 1,
+        letterSpacing: 0,
         fontSize: 50,
         align: 'left',
       }}>

apps/dashboard/src/components/RightPanel/FontSection.tsx

@@ -70,7 +70,12 @@ export function FontSection({ selectedElement }: FontSectionProps) {
         }} type="number" value={selectedElement.lineHeight}>
           <LineHeightIcon />
         </Input>
-        <Input max={5} min={0} onChange={() => { updateElement(selectedElement); }} type="number" value={0}>
+        <Input max={10} min={-10} onChange={value => {
+          updateElement({
+            ...selectedElement,
+            letterSpacing: value,
+          });
+        }} type="number" value={selectedElement.letterSpacing}>
           <LetterSpacingIcon />
         </Input>
         <Select onChange={value => {

apps/dashboard/src/lib/elements.ts

@@ -84,6 +84,7 @@ export function createElementStyle(element: OGElement): CSSProperties {
       fontWeight: element.fontWeight,
       fontSize: `${element.fontSize}px`,
       lineHeight: element.lineHeight,
+      letterSpacing: `${element.letterSpacing}px`,
       textAlign: element.align,
       // By default, Satori sets a margin top and bottom on some elements:
       // https://github.com/vercel/satori/blob/29fe2e4a9676a1ba41c361ec1a547d6de329b039/src/handler/presets.ts#L15

apps/dashboard/src/lib/templates.ts

@@ -49,6 +49,7 @@ export const TEMPLATES = [
         "fontFamily": "Montserrat",
         "fontWeight": 600,
         "lineHeight": 1,
+        "letterSpacing": 0,
         "fontSize": 120,
         "align": "left"
       },
@@ -68,6 +69,7 @@ export const TEMPLATES = [
         "fontFamily": "Montserrat",
         "fontWeight": 600,
         "lineHeight": 1,
+        "letterSpacing": 0,
         "fontSize": 80,
         "align": "left"
       },

apps/dashboard/src/lib/types.ts

@@ -33,6 +33,7 @@ export interface OGPElement {
   fontWeight: number
   fontSize: number
   lineHeight: number
+  letterSpacing: number
   align: 'left' | 'center' | 'right'
 }