feat: syntax hilighting preferenses (#193)

Author: ueokande

package.json

@@ -29,6 +29,7 @@
     "@abraham/reflection": "^0.12.0",
     "esbuild": "^0.17.18",
     "inversify": "^6.0.1",
+    "prismjs": "^1.29.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "styled-components": "^5.3.9",
@@ -43,6 +44,7 @@
     "@types/chrome": "^0.0.233",
     "@types/jest": "^27.4.0",
     "@types/node": "^20.6.0",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "^17.0.0",

pnpm-lock.yaml

@@ -7,6 +7,8 @@ import ErrorMessage from "./components/ErrorMessage";
 const Container = styled.form`
   padding: 2px;
   font-family: system-ui;
+  min-width: 480px;
+  max-width: 90wv;
 `;
 
 const App: React.FC = () => {
@@ -51,7 +53,6 @@ const App: React.FC = () => {
       <div>
         <TextArea
           name="text"
-          spellCheck={false}
           onChange={onChange}
           onBlur={onBlur}
           value={jsonText}

src/options/App.tsx

@@ -1,12 +1,117 @@
+import React from "react";
 import styled from "styled-components";
+import Prism from "prismjs";
+import "prismjs/components/prism-json";
+import "prismjs/themes/prism-coy.css";
 
-const TextArea = styled.textarea`
-  font-family: monospace;
-  font-family: monospace;
+const Container = styled.div`
   width: 100%;
-  min-height: 64ex;
-  min-width: 128ex;
-  resize: vertical;
+  height: 100%;
+  resize: both;
+  overflow: auto;
+  border: ButtonBorder 1px solid;
+  border-radius: 4px;
+  &:focus-within {
+    box-shadow: inset 0 0 3px AccentColor;
+  }
 `;
 
+const Content = styled.div`
+  margin: 8px;
+  position: relative;
+  overflow: hidden;
+`;
+
+const StyledPre = styled.pre`
+  position: absolute;
+  font-size: 14px;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  margin: 0;
+  padding: 0;
+`;
+
+const StyledTextarea = styled.textarea`
+  position: absolute;
+  font-size: 14px;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  border: none;
+  resize: none;
+  background-color: transparent;
+  color: transparent;
+  caret-color: CanvasText;
+`;
+
+type Props = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const TextArea: React.FC<Props> = (props) => {
+  const highlightContainer = React.useRef<HTMLDivElement>(null);
+  const container = React.useRef<HTMLDivElement>(null);
+  const content = React.useRef<HTMLDivElement>(null);
+  const textarea = React.useRef<HTMLTextAreaElement>(null);
+  const [json, setJson] = React.useState(props.value as string);
+
+  React.useEffect(() => {
+    highlight(json);
+  }, []);
+
+  const onChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setJson(e.target.value);
+      highlight(e.target.value);
+      autoResize();
+      props.onChange?.(e);
+    },
+    []
+  );
+
+  const highlight = React.useCallback((source: string) => {
+    if (!highlightContainer.current) {
+      return;
+    }
+
+    const highlighted = Prism.highlight(source, Prism.languages.json, "json");
+    highlightContainer.current.innerHTML = highlighted;
+    autoResize();
+  }, []);
+
+  const autoResize = React.useCallback(() => {
+    if (!textarea.current || !content.current) {
+      return;
+    }
+
+    // shrink scroll area to get the correct scroll area
+    content.current.style.width = "0";
+    content.current.style.height = "0";
+
+    const { scrollHeight, scrollWidth } = textarea.current;
+    console.log(scrollHeight, scrollWidth);
+    content.current.style.width = `${scrollWidth}px`;
+    content.current.style.height = `${scrollHeight}px`;
+  }, []);
+
+  return (
+    <Container ref={container}>
+      <Content ref={content}>
+        <StyledPre>
+          <code ref={highlightContainer} />
+        </StyledPre>
+        <StyledTextarea
+          {...props}
+          wrap="off"
+          ref={textarea}
+          onChange={onChange}
+          spellCheck={false}
+          value={json}
+        />
+      </Content>
+    </Container>
+  );
+};
+
 export default TextArea;

src/options/components/TextArea.tsx

@@ -0,0 +1,11 @@
+html {
+  color-scheme: light dark;
+
+  color: CanvasText;
+  background-color: Canvas;
+}
+
+/* prism.js override */
+.token {
+  background: none !important;
+}

src/options/global.css

@@ -6,5 +6,6 @@
   <body>
     <div id='vimmatic-settings'></div>
     <script src='options.js'></script>
+    <link rel='stylesheet' href='options.css'>
   </body>
 </html>

src/options/index.html

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
+import "./global.css";
 
 document.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("vimmatic-settings");