Add support to editor.letterSpacing

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.18.3
+
+Feat: Add support to letterSpacing
+
 ## 1.18.0
 
 Feat: Languages support (need to be translated)

package.json

@@ -2,7 +2,7 @@
   "name": "easy-codesnap",
   "displayName": "Easy CodeSnap",
   "description": "Take beautiful screenshots of your code 📷",
-  "version": "1.18.2",
+  "version": "1.18.3",
   "l10n": "./l10n",
   "repository": {
     "type": "git",

src/commands/snap/getConfig.ts

@@ -3,7 +3,11 @@ import { extensionSettingsNames } from "../../constants";
 import { getSettings } from "../../util";
 
 export function getConfig() {
-    const editorSettings = getSettings("editor", ["fontLigatures", "tabSize"]);
+    const editorSettings = getSettings("editor", [
+        "fontLigatures",
+        "tabSize",
+        "letterSpacing",
+    ]);
 
     const editor = vscode.window.activeTextEditor;
     if (editor) {

src/reduceSVG.ts

@@ -1,6 +1,12 @@
-import { type PluginConfig, optimize } from "svgo";
+import { type Config, optimize } from "svgo";
 
-const svgoConfig: { plugins: PluginConfig[] } = {
+export function reduceSVG(svgContent: string) {
+    return optimize(svgContent, svgoConfig).data;
+}
+
+const svgoConfig: Config = {
+    floatPrecision: 8,
+    multipass: true,
     plugins: [
         {
             name: "preset-default",
@@ -25,11 +31,3 @@ const svgoConfig: { plugins: PluginConfig[] } = {
         },
     ],
 };
-
-export function reduceSVG(svgContent: string) {
-    return optimize(svgContent, {
-        floatPrecision: 8,
-        plugins: svgoConfig.plugins,
-        multipass: true,
-    }).data;
-}

src/types.d.ts

@@ -30,6 +30,7 @@ export interface ExtensionConfig {
 export interface ConfigSentToWebview extends ExtensionConfig {
     startLine: number;
     tabSize: number;
+    letterSpacing: number;
     fontLigatures: boolean;
     editorID: string;
     templates: {

src/webview/ui/updaters/VarUpdater.ts

@@ -14,6 +14,7 @@ export class VarUpdater extends Updater {
             "enableResizing",
             "roundingLevel",
             "showLineNumbers",
+            "letterSpacing",
         ]);
     }
 
@@ -28,13 +29,17 @@ export class VarUpdater extends Updater {
             enableResizing,
             roundingLevel,
             showLineNumbers,
+            letterSpacing,
         } = SessionConfig.get();
 
         setVar("ligatures", fontLigatures ? "normal" : "none");
         if (typeof fontLigatures === "string") {
             setVar("font-features", fontLigatures);
         }
 
+        console.log("Letter Spacing", letterSpacing);
+
+        setVar("letter-spacing", `${letterSpacing}px`);
         setVar("tab-size", tabSize.toString());
         setVar("container-background-color", backgroundColor);
         setVar("box-shadow", boxShadow);

webview/styles/original-style.css

@@ -7,6 +7,7 @@ html {
     --container-padding: 3em;
     --window-border-radius: 4px;
     --enable-resizing: horizontal;
+    --letter-spacing: 0px;
     --zoom: 100%;
 
     box-sizing: border-box;
@@ -62,6 +63,7 @@ body {
     font-family: var(--vscode-editor-font-family);
     font-size: calc(var(--vscode-editor-font-size) * 1px);
     font-weight: var(--vscode-editor-font-weight);
+    letter-spacing: var(--letter-spacing);
 }
 
 .line {
@@ -100,6 +102,7 @@ body {
 .size-test {
     font-family: var(--vscode-editor-font-family) !important;
     font-size: calc(var(--vscode-editor-font-size) * 1px) !important;
+    letter-spacing: var(--letter-spacing) !important;
     display: inline-block;
 }