refactor: add styled-components to secretnote (#25)

* refactor: add styled-components to secretnote

* refactor: add styled-components to secretnote

Author: myzxlin

packages/secretnote/package.json

@@ -68,6 +68,7 @@
     "monaco-editor-webpack-plugin": "^7.1.0",
     "smoothie": "^1.36.1",
     "sql-formatter": "^15.0.2",
+    "styled-components": "^6.1.0",
     "syntax-parser": "^1.0.18",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.2",

packages/secretnote/src/components/sh-viewer/index.tsx

@@ -1,8 +1,18 @@
 import hljs from 'highlight.js';
 import { useEffect } from 'react';
-
+import styled from 'styled-components';
 import 'highlight.js/styles/a11y-dark.css';
 
+const CodeWrapper = styled.pre`
+  background: #2b2b2b;
+  padding: 12px 0;
+  border-radius: 8px;
+
+  code {
+    padding: 0 1em !important;
+  }
+`;
+
 interface IProps {
   code: string;
   className?: string;
@@ -15,11 +25,9 @@ const ShViewer = ({ code }: IProps) => {
   }, []);
 
   return (
-    <pre style={{ background: '#2b2b2b', padding: '12px 0', borderRadius: 8 }}>
-      <code className="language-bash" style={{ padding: '0 1em' }}>
-        {code}
-      </code>
-    </pre>
+    <CodeWrapper>
+      <code className="language-bash">{code}</code>
+    </CodeWrapper>
   );
 };
 

packages/secretnote/src/modules/file/jsonl-preview-contrib.tsx

@@ -1,10 +1,30 @@
 import { singleton } from '@difizen/mana-app';
 import hljs from 'highlight.js';
 import { useEffect } from 'react';
+import styled from 'styled-components';
 
 import { FilePreviewContribution } from './protocol';
 import 'highlight.js/styles/xcode.css'; // 选择主题 https://highlightjs.org/demo
 
+const CodeWrapper = styled.pre`
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  margin: 0;
+
+  .line-number {
+    float: left;
+    text-align: right;
+    margin-right: 12px;
+    color: #bfbfbf;
+    user-select: none;
+  }
+
+  code {
+    padding: 0 1em !important;
+  }
+`;
+
 const JsonlView = (props: { data: string }) => {
   useEffect(() => {
     hljs.highlightAll();
@@ -18,22 +38,10 @@ const JsonlView = (props: { data: string }) => {
     .join('');
 
   return (
-    <pre style={{ width: '100%', height: '100%', overflow: 'scroll', margin: 0 }}>
-      <span
-        style={{
-          float: 'left',
-          textAlign: 'right',
-          marginRight: 12,
-          color: '#bfbfbf',
-          userSelect: 'none',
-        }}
-      >
-        {lineNumber}
-      </span>
-      <code className="language-json" style={{ padding: '0 1em' }}>
-        {props.data}
-      </code>
-    </pre>
+    <CodeWrapper>
+      <span className="line-number">{lineNumber}</span>
+      <code className="language-json">{props.data}</code>
+    </CodeWrapper>
   );
 };