fix: code block events handler in milkdown

Signed-off-by: Innei <i@innei.in>
Innei · Feb 2, 2024 · 9092b9c · 9092b9c
1 parent 9a2535d
commit 9092b9c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/ui/code-editor/CodeEditor.tsx b/src/components/ui/code-editor/CodeEditor.tsx
@@ -14,8 +14,9 @@ export const CodeEditor = forwardRef<
     onChange?: (value: string) => void
     minHeight?: string
     className?: string
+    padding?: number
   }
->(({ content, language, onChange, minHeight, className }, ref) => {
+>(({ content, language, onChange, minHeight, className, padding = 0 }, ref) => {
   const [highlighterValue, setHighlighterValue] = useState(content)
 
   useEffect(() => {
@@ -31,14 +32,21 @@ export const CodeEditor = forwardRef<
         'relative [&_*]:!font-mono [&_*]:!text-base [&_*]:!leading-[1.5]',
         className,
       )}
+      style={
+        {
+          padding: `${padding}px`,
+          '--padding': `${padding * 2}px`,
+        } as any
+      }
       contentEditable={false}
     >
       <textarea
         onKeyDown={stopPropagation}
         onKeyUp={stopPropagation}
+        onPaste={stopPropagation}
         contentEditable={false}
         ref={ref}
-        className="absolute h-full w-full resize-none overflow-hidden bg-transparent p-0 text-transparent caret-accent"
+        className="absolute size-[calc(100%-var(--padding))] resize-none overflow-hidden bg-transparent p-0 text-transparent caret-accent"
         style={sharedStyles}
         value={highlighterValue}
         onChange={(e) => {

diff --git a/src/components/ui/editor/Milkdown/plugins/CodeBlock.tsx b/src/components/ui/editor/Milkdown/plugins/CodeBlock.tsx
@@ -58,7 +58,8 @@ const NormalCodeBlock: FC<{
         }}
         content={content}
         minHeight="20px"
-        className="rounded-md border bg-gray-100 p-2 dark:bg-zinc-900"
+        className="rounded-md border bg-gray-100 dark:bg-zinc-900"
+        padding={8}
         language={language}
         onChange={(code) => {
           const view = nodeCtx.view