feat: relative numbers

apps/web/scripts/build.sh

@@ -3,4 +3,4 @@ rm -rf ./.parcel-cache
 
 sh scripts/monaco.sh
 
-npx parcel build src/web/index.html --public-url "."
+npx parcel build src/index.html --public-url "."

apps/web/src/editor/input/create.ts

@@ -1,6 +1,7 @@
 import * as monaco from "monaco-editor";
 import { RefObject, useEffect } from "react";
 import { SAMPLE_TAILWIND } from "../../samples/tailwind";
+import { Settings } from "../../settings/type";
 import { EditorState } from "../type";
 
 const envDone = { current: false };
@@ -67,10 +68,11 @@ const OPTIONS: monaco.editor.IStandaloneEditorConstructionOptions = {
 interface Params {
   setEditor: EditorState["setEditor"];
   containerRef: RefObject<HTMLDivElement>;
+  settings: Settings;
 }
 
 export const useEditorCreate = (params: Params): void => {
-  const { setEditor, containerRef } = params;
+  const { setEditor, containerRef, settings } = params;
 
   useEffect(() => {
     const container = containerRef.current;
@@ -79,6 +81,7 @@ export const useEditorCreate = (params: Params): void => {
     createEnv();
     const editor = monaco.editor.create(container, {
       ...OPTIONS,
+      lineNumbers: settings.lines,
       value: SAMPLE_TAILWIND,
       // value: "",
     });

apps/web/src/editor/input/input.tsx

@@ -16,7 +16,7 @@ export const EditorInput = (props: Props): JSX.Element => {
 
   const containerRef = useRef<HTMLDivElement>(null);
 
-  useEditorCreate({ containerRef, setEditor });
+  useEditorCreate({ containerRef, setEditor, settings });
   useEditorLayout({ containerRef, editor, settings });
   useEditorTypography({ editor, settings });
 

apps/web/src/settings/lines/lines.tsx

@@ -0,0 +1,28 @@
+import { Editor } from "../../editor/type";
+import { SettingsRadioGroup } from "../radio/group";
+import { Settings, SettingsState } from "../type";
+
+interface Props extends SettingsState {
+  editor: Editor;
+}
+
+export const SettingsLines = (props: Props): JSX.Element => {
+  const { settings, setSettings, editor } = props;
+  return (
+    <SettingsRadioGroup
+      label="Lines"
+      options={[
+        { label: "Disabled", value: "off", icon: <></> },
+        { label: "Normal", value: "on", icon: <></> },
+        { label: "Relative", value: "relative", icon: <></> },
+      ]}
+      value={settings.lines}
+      onValueChange={(value) => {
+        const lines = value as Settings["lines"];
+        setSettings((prev) => ({ ...prev, lines }));
+
+        editor.updateOptions({ lineNumbers: lines });
+      }}
+    />
+  );
+};

apps/web/src/settings/panel.tsx

@@ -6,6 +6,7 @@ import { SettingsTheme } from "./theme/theme";
 import { SettingsState } from "./type";
 import { SettingsWrapColumn } from "./wrap-column";
 import * as s from "./panel.module.css";
+import { SettingsLines } from "./lines/lines";
 
 interface Props extends SettingsState, LayoutState {}
 
@@ -16,6 +17,7 @@ export const SettingsPanel = (props: Props): JSX.Element => {
         <SettingsTheme {...props} />,
         <SettingsPreview {...props} />,
         <SettingsVim {...props} />,
+        <SettingsLines {...props} />,
         <SettingsWrapColumn {...props} />,
         <SettingsFontSize {...props} />,
       ].map((element, index) => (

apps/web/src/settings/radio/option.tsx

@@ -16,7 +16,9 @@ export const SettingsRadioOption = (props: Props): JSX.Element => {
       value={value}
       className={[s.container, outline.onFocus].join(" ")}
     >
-      <span className={s.icon}>{icon}</span>
+      {!!Object.keys(icon.props).length && (
+        <span className={s.icon}>{icon}</span>
+      )}
       <span className={s.label}>{label}</span>
     </RadioGroup.Item>
   );

apps/web/src/settings/state.ts

@@ -8,6 +8,7 @@ const fallback: Settings = {
   fontSize: 20,
   wrapColumn: 80,
   template: "tailwind",
+  lines: "off",
 };
 
 export const useSettingsState = (): SettingsState => {

apps/web/src/settings/type.ts

@@ -8,6 +8,7 @@ export interface Settings {
   fontSize: number;
   wrapColumn: number;
   template: string;
+  lines: "on" | "off" | "relative";
 }
 
 export interface SettingsState {