feat: font-family

huozhi · Feb 16, 2025 · be837ed · be837ed
1 parent c530527
commit be837ed
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 17 deletions.
diff --git a/site/app/styles.css b/site/app/styles.css
@@ -23,6 +23,10 @@ html {
   font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
   font-size: 16px;
   line-height: 1.4;
+  /* no scrollbar */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-font-smoothing: antialiased;
 }
 @media screen and (max-width: 480px) {
   body {
@@ -46,6 +50,9 @@ input[type=radio] {
 .description {
   margin: 2rem 0;
 }
+.description .code {
+  border-radius: 8px;
+}
 .code--default {
   background-color: #242424;
 }

diff --git a/src/editor/css.ts b/src/editor/css.ts
@@ -4,10 +4,12 @@ export const css = (id: string, {
   fontSize,
   lineNumbersWidth = '2.5rem',
   padding = '1rem',
+  fontFamily = 'Consolas, Monaco, monospace',
 }: {
   fontSize?: string | number
   lineNumbersWidth: string
   padding: string
+  fontFamily: string
 }) => {
   const R = `[data-codice-editor="${id}"]`
   return `\
@@ -18,6 +20,7 @@ ${R} {
   --codice-font-size: ${fontSizeCss(fontSize)};
   --codice-code-line-number-width: ${lineNumbersWidth};
   --codice-code-padding: ${padding};
+  --codice-font-family: ${fontFamily};
 
   position: relative;
   overflow-y: scroll;
@@ -28,7 +31,7 @@ ${R} {
 }
 ${R} code,
 ${R} textarea {
-  font-family: Consolas, Monaco, monospace;
+  font-family: var(--codice-font-family);
   line-break: anywhere;
   overflow-wrap: break-word;
   scrollbar-width: none;

diff --git a/src/editor/editor.test.tsx b/src/editor/editor.test.tsx
@@ -16,6 +16,7 @@ describe('Code', () => {
         --codice-font-size: inherit;
         --codice-code-line-number-width: 2.5rem;
         --codice-code-padding: 1rem;
+        --codice-font-family: Consolas, Monaco, monospace;
 
         position: relative;
         overflow-y: scroll;
@@ -26,7 +27,7 @@ describe('Code', () => {
       }
       [data-codice-editor="_RA:"] code,
       [data-codice-editor="_RA:"] textarea {
-        font-family: Consolas, Monaco, monospace;
+        font-family: var(--codice-font-family);
         line-break: anywhere;
         overflow-wrap: break-word;
         scrollbar-width: none;
@@ -192,6 +193,7 @@ describe('Code', () => {
         --codice-font-size: inherit;
         --codice-code-line-number-width: 2.5rem;
         --codice-code-padding: 1rem;
+        --codice-font-family: Consolas, Monaco, monospace;
 
         position: relative;
         overflow-y: scroll;
@@ -202,7 +204,7 @@ describe('Code', () => {
       }
       [data-codice-editor="_RA:"] code,
       [data-codice-editor="_RA:"] textarea {
-        font-family: Consolas, Monaco, monospace;
+        font-family: var(--codice-font-family);
         line-break: anywhere;
         overflow-wrap: break-word;
         scrollbar-width: none;
@@ -368,6 +370,7 @@ describe('Code', () => {
         --codice-font-size: inherit;
         --codice-code-line-number-width: 2.5rem;
         --codice-code-padding: 1rem;
+        --codice-font-family: Consolas, Monaco, monospace;
 
         position: relative;
         overflow-y: scroll;
@@ -378,7 +381,7 @@ describe('Code', () => {
       }
       [data-codice-editor="_RA:"] code,
       [data-codice-editor="_RA:"] textarea {
-        font-family: Consolas, Monaco, monospace;
+        font-family: var(--codice-font-family);
         line-break: anywhere;
         overflow-wrap: break-word;
         scrollbar-width: none;

diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx
@@ -28,6 +28,7 @@ const Editor = forwardRef(function EditorComponent(
     controls,
     lineNumbers,
     lineNumbersWidth,
+    extension,
     padding,
     onChange = () => {},
   }: {
@@ -38,6 +39,7 @@ const Editor = forwardRef(function EditorComponent(
     lineNumbers?: boolean
     lineNumbersWidth?: string
     padding?: string
+    extension?: string
     onChange?: (code: string) => void
   } & React.HTMLAttributes<HTMLDivElement>,
   ref: React.Ref<HTMLDivElement>
@@ -69,7 +71,7 @@ const Editor = forwardRef(function EditorComponent(
         {/* hide controls component inside Code to keep content matched with textarea */}
         <Code
           title={null}
-          extension={getExtension(title)}
+          extension={extension || getExtension(title)}
           controls={false}
           lineNumbers={lineNumbers}
           lineNumbersWidth={lineNumbersWidth}

diff --git a/src/editor/index.tsx b/src/editor/index.tsx
@@ -3,31 +3,42 @@ import { css } from './css'
 import { Style } from '../style'
 import { useId } from 'react'
 
-export type EditorProps = React.HTMLAttributes<HTMLDivElement> 
-  & Exclude<Parameters<typeof EditorClient>[0], 'id'>
-  & {
+export type EditorProps = React.HTMLAttributes<HTMLDivElement> &
+  Exclude<Parameters<typeof EditorClient>[0], 'id'> & {
     fontSize?: string | number
+    fontFamily?: string
   }
 
 export function Editor(props: EditorProps) {
-  const { 
-    title, 
-    value, 
-    onChange, 
-    controls = true, 
+  const {
+    title,
+    value,
+    onChange,
+    controls = true,
     lineNumbers = true,
     lineNumbersWidth,
     padding,
     fontSize,
+    fontFamily,
+    extension,
     ...restProps
   } = props
-  const editorProps = { title, value, onChange, controls, lineNumbers, lineNumbersWidth, padding }
+  const editorProps = { 
+    title,
+    value,
+    onChange,
+    controls,
+    lineNumbers,
+    lineNumbersWidth,
+    padding,
+    extension,
+  }
   const id = useId()
     .replace(':', '_')
     .replace(/[0-9]/g, (match) => String.fromCharCode(65 + Number(match)))
   return (
-    <div 
-      {...restProps} 
+    <div
+      {...restProps}
       data-codice="editor"
       data-codice-editor={id}
       // DOM attributes for selecting the stateful editor easily.
@@ -36,7 +47,7 @@ export function Editor(props: EditorProps) {
       data-codice-controls={!!controls}
       data-codice-line-numbers={!!lineNumbers}
     >
-      <Style css={css(id, { fontSize, padding, lineNumbersWidth })} />
+      <Style css={css(id, { fontSize, padding, lineNumbersWidth, fontFamily })} />
       <EditorClient {...editorProps} id={id} />
     </div>
   )