fix: code editor

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/modules/dashboard/writing/MetaKeyValueEditSection.tsx

@@ -1,12 +1,10 @@
 import { Label } from '@radix-ui/react-label'
-import { useMemo, useRef, useState } from 'react'
+import { useMemo, useRef } from 'react'
 import type { FC } from 'react'
 
 import { StyledButton } from '~/components/ui/button'
-import {
-  BaseCodeHighlighter,
-  HighLighter,
-} from '~/components/ui/code-highlighter'
+import { CodeEditor } from '~/components/ui/code-editor'
+import { HighLighter } from '~/components/ui/code-highlighter'
 import { useModalStack } from '~/components/ui/modal'
 import { useEventCallback } from '~/hooks/common/use-event-callback'
 import { toast } from '~/lib/toast'
@@ -80,7 +78,6 @@ const EditorModal: FC<{
   onChange: (value: object) => void
 }> = ({ value, onChange, dismiss }) => {
   const currentEditValueRef = useRef(value)
-  const [highlighterValue, setHighlighterValue] = useState(value)
 
   const handleSave = () => {
     if (!isValidJSONString(currentEditValueRef.current)) {
@@ -93,27 +90,19 @@ const EditorModal: FC<{
   }
 
   return (
-    <>
-      <div className="relative flex w-full flex-grow flex-col lg:w-[600px]">
-        <div className="relative w-full overflow-auto pb-[60px]">
-          <textarea
-            className="absolute h-full w-full resize-none bg-transparent p-0 !font-mono text-transparent caret-accent *:leading-4"
-            defaultValue={value}
-            onChange={(e) => {
-              currentEditValueRef.current = e.target.value
-              setHighlighterValue(e.target.value)
-            }}
-          />
-          <BaseCodeHighlighter
-            className="code-wrap pointer-events-none relative z-[1] !m-0 overflow-auto !p-0 *:!font-mono *:!leading-4"
-            lang="json"
-            content={highlighterValue}
-          />
-        </div>
+    <div className="relative flex w-full flex-grow flex-col lg:w-[600px]">
+      <div className="relative max-h-[450px] w-full overflow-auto">
+        <CodeEditor
+          content={value}
+          language="json"
+          onChange={(value) => {
+            currentEditValueRef.current = value
+          }}
+        />
       </div>
-      <div className="absolute bottom-4 right-6 flex flex-shrink-0 justify-end">
+      <div className="flex flex-shrink-0 justify-end p-2">
         <StyledButton onClick={handleSave}>保存</StyledButton>
       </div>
-    </>
+    </div>
   )
 }

src/components/ui/code-editor/CodeEditor.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import type { FC } from 'react'
+
+import { BaseCodeHighlighter } from '../code-highlighter'
+
+export const CodeEditor: FC<{
+  content: string
+  language: string
+
+  onChange?: (value: string) => void
+}> = ({ content, language, onChange }) => {
+  const [highlighterValue, setHighlighterValue] = useState(content)
+
+  useEffect(() => {
+    setHighlighterValue(content)
+  }, [content])
+
+  return (
+    <div className="relative">
+      <textarea
+        className="absolute h-full w-full resize-none overflow-hidden bg-transparent p-0 !font-mono text-transparent caret-accent *:leading-4"
+        value={highlighterValue}
+        onChange={(e) => {
+          setHighlighterValue(e.target.value)
+          onChange?.(e.target.value)
+        }}
+      />
+      <BaseCodeHighlighter
+        className="code-wrap pointer-events-none relative z-[1] !m-0 !p-0 *:!font-mono *:!leading-4"
+        lang={language}
+        content={highlighterValue}
+      />
+    </div>
+  )
+}

src/components/ui/code-editor/index.demo.tsx

@@ -0,0 +1,21 @@
+import type { DocumentComponent } from 'storybook/typings'
+
+import { CodeEditor } from './CodeEditor'
+
+export const CodeEditorDemo: DocumentComponent = () => {
+  return (
+    <div className="h-[300px] overflow-auto border p-4">
+      <CodeEditor
+        content={Array(100)
+          .fill(null)
+          .map(() => `const a = ${Math.random()};\n`)
+          .join('')}
+        language="javascript"
+      />
+    </div>
+  )
+}
+
+CodeEditorDemo.meta = {
+  title: 'CodeEditor',
+}

src/components/ui/code-editor/index.ts

@@ -0,0 +1 @@
+export * from './CodeEditor'

src/components/ui/editor/Milkdown/plugins/CodeBlock.tsx

@@ -13,10 +13,10 @@ import { $view } from '@milkdown/utils'
 
 import { BlockLoading } from '~/components/modules/shared/BlockLoading'
 import { StyledButton } from '~/components/ui/button'
+import { CodeEditor } from '~/components/ui/code-editor'
 import { HighLighter } from '~/components/ui/code-highlighter'
-import { Input, TextArea } from '~/components/ui/input'
+import { Input } from '~/components/ui/input'
 import { useCurrentModal, useModalStack } from '~/components/ui/modal'
-import { useUncontrolledInput } from '~/hooks/common/use-uncontrolled-input'
 
 import { useEditorCtx } from '../ctx'
 
@@ -49,14 +49,20 @@ const NormalCodeBlock: FC<{
 
   const handleEdit = () => {
     const Content: FC<ModalContentPropsInternal> = () => {
-      const [, getValue, ref] =
-        useUncontrolledInput<HTMLTextAreaElement>(content)
-
+      const valueRef = useRef<string | undefined>(content)
       const nextLangRef = useRef(language)
 
       return (
-        <div className="flex h-[450px] max-h-[80vh] w-[60ch] max-w-full flex-col">
-          <TextArea defaultValue={content} className="flex-grow" ref={ref} />
+        <div className="flex w-[60ch] max-w-full flex-col overflow-auto">
+          <div className="max-h-[400px] overflow-auto">
+            <CodeEditor
+              content={content}
+              language={language}
+              onChange={(code) => {
+                valueRef.current = code
+              }}
+            />
+          </div>
 
           <div className="relative">
             <div className="absolute left-0 top-0">
@@ -78,7 +84,10 @@ const NormalCodeBlock: FC<{
                 }}
               />
             </div>
-            <SharedModalAction nodeCtx={nodeCtx} getValue={getValue} />
+            <SharedModalAction
+              nodeCtx={nodeCtx}
+              getValue={() => valueRef.current}
+            />
           </div>
         </div>
       )
@@ -204,7 +213,7 @@ const SharedModalAction: FC<{
     dismiss()
   }
   return (
-    <div className="mt-4 flex justify-end space-x-2">
+    <div className="mt-4 flex justify-end space-x-2 p-2">
       <StyledButton variant="secondary" onClick={deleteNode}>
         删除
       </StyledButton>