refactor: milkdown code editor node view

Signed-off-by: Innei <i@innei.in>

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

@@ -93,6 +93,7 @@ const EditorModal: FC<{
     <div className="relative flex w-full flex-grow flex-col lg:w-[600px]">
       <div className="relative max-h-[450px] w-full overflow-auto">
         <CodeEditor
+          minHeight="350px"
           content={value}
           language="json"
           onChange={(value) => {

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

@@ -1,35 +1,56 @@
-import { useEffect, useState } from 'react'
-import type { FC } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
+
+import { clsxm } from '~/lib/helper'
 
 import { BaseCodeHighlighter } from '../code-highlighter'
 
-export const CodeEditor: FC<{
-  content: string
-  language: string
+export const CodeEditor = forwardRef<
+  HTMLTextAreaElement,
+  {
+    content: string
+    language: string
 
-  onChange?: (value: string) => void
-}> = ({ content, language, onChange }) => {
+    onChange?: (value: string) => void
+    minHeight?: string
+    className?: string
+  }
+>(({ content, language, onChange, minHeight, className }, ref) => {
   const [highlighterValue, setHighlighterValue] = useState(content)
 
   useEffect(() => {
     setHighlighterValue(content)
   }, [content])
 
+  const sharedStyles = {
+    minHeight,
+  }
   return (
-    <div className="relative">
+    <div
+      className={clsxm(
+        'relative [&_*]:!font-mono [&_*]:!text-base [&_*]:!leading-[1.5]',
+        className,
+      )}
+      contentEditable={false}
+    >
       <textarea
-        className="absolute h-full w-full resize-none overflow-hidden bg-transparent p-0 !font-mono text-transparent caret-accent *:leading-4"
+        contentEditable={false}
+        ref={ref}
+        className="absolute h-full w-full resize-none overflow-hidden bg-transparent p-0 text-transparent caret-accent"
+        style={sharedStyles}
         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"
+        className="code-wrap pointer-events-none relative z-[1] !m-0 !p-0"
+        style={sharedStyles}
         lang={language}
         content={highlighterValue}
       />
     </div>
   )
-}
+})
+
+CodeEditor.displayName = 'CodeEditor'

src/components/ui/code-highlighter/CodeHighlighter.tsx

@@ -57,19 +57,23 @@ export const HighLighter: FC<Props> = (props) => {
   )
 }
 
-export const BaseCodeHighlighter: Component<Props> = ({
-  content,
-  lang,
-  className,
-}) => {
+export const BaseCodeHighlighter: Component<
+  Props & {
+    style: React.CSSProperties
+  }
+> = ({ content, lang, className, style }) => {
   const ref = useRef<HTMLElement>(null)
   useLoadHighlighter(ref)
 
   useEffect(() => {
     window.Prism?.highlightElement(ref.current)
-  }, [content])
+  }, [content, lang])
   return (
-    <pre className={clsxm('!bg-transparent', className)} data-start="1">
+    <pre
+      className={clsxm('!bg-transparent', className)}
+      style={style}
+      data-start="1"
+    >
       <code
         className={`language-${lang ?? 'markup'} !bg-transparent`}
         ref={ref}

src/components/ui/editor/Milkdown/MilkdownEditor.tsx

@@ -31,6 +31,7 @@ import { gfm } from '@milkdown/preset-gfm'
 import { replaceAll } from '@milkdown/utils'
 
 import { useIsUnMounted } from '~/hooks/common/use-is-unmounted'
+import { isDev } from '~/lib/env'
 
 import { setEditorCtx } from './ctx'
 import styles from './index.module.css'
@@ -106,6 +107,7 @@ const MilkdownEditorImpl = forwardRef<MilkdownRef, MilkdownProps>(
             .markdownUpdated((ctx, markdown) => {
               if (isUnMounted.current) return
 
+              if (isDev) console.log('markdownUpdated', markdown)
               props.onMarkdownChange?.(markdown)
               props.onChange?.({ target: { value: markdown } })
             })

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

@@ -14,7 +14,6 @@ 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 } from '~/components/ui/input'
 import { useCurrentModal, useModalStack } from '~/components/ui/modal'
 
@@ -44,74 +43,46 @@ const NormalCodeBlock: FC<{
   language: string
 }> = ({ content, language }) => {
   const nodeCtx = useNodeViewContext()
+  const ctx = useEditorCtx()
 
-  const modalStack = useModalStack()
+  return (
+    <div className="group relative">
+      <CodeEditor
+        ref={(el) => {
+          if (!content && el)
+            requestAnimationFrame(() => requestAnimationFrame(() => el.focus()))
+        }}
+        content={content}
+        minHeight="20px"
+        className="rounded-md border bg-gray-100 p-2 dark:bg-zinc-900"
+        language={language}
+        onChange={(code) => {
+          const view = nodeCtx.view
 
-  const handleEdit = () => {
-    const Content: FC<ModalContentPropsInternal> = () => {
-      const valueRef = useRef<string | undefined>(content)
-      const nextLangRef = useRef(language)
+          const node = nodeCtx.node
 
-      return (
-        <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-4">
-              <Input
-                ref={(el) => {
-                  if (!el) {
-                    nodeCtx.setAttrs({
-                      language: nextLangRef.current,
-                    })
-                  }
-                }}
-                defaultValue={language}
-                onBlur={(e) => {
-                  const v = e.target.value
-                  nodeCtx.setAttrs({
-                    language: v,
-                  })
-                  nextLangRef.current = v
-                }}
-              />
-            </div>
-            <SharedModalAction
-              nodeCtx={nodeCtx}
-              getValue={() => valueRef.current}
-            />
-          </div>
-        </div>
-      )
-    }
-    modalStack.present({
-      title: 'Edit Code Block',
-      content: Content,
-    })
-  }
+          const pos = nodeCtx.getPos()
+          if (!pos) return
 
-  if (!content) {
-    return (
-      <div
-        className="my-4 flex h-12 w-full max-w-full cursor-pointer rounded bg-slate-100 text-sm center dark:bg-neutral-800"
-        onClick={handleEdit}
-        contentEditable={false}
-      >
-        Empty Code Block, Click to edit
+          const tr = view.state.tr
+
+          const nextNode = ctx!.get(schemaCtx).text(code)
+
+          tr.replaceWith(pos + 1, pos + node.nodeSize, nextNode)
+          view.dispatch(tr)
+        }}
+      />
+      <div className="absolute bottom-1 right-1 opacity-0 duration-200 group-hover:opacity-100">
+        <Input
+          defaultValue={language}
+          onBlur={(e) => {
+            const v = e.target.value
+            nodeCtx.setAttrs({
+              language: v,
+            })
+          }}
+        />
       </div>
-    )
-  }
-  return (
-    <div contentEditable={false} onClick={handleEdit}>
-      <HighLighter content={content} lang={language} key={content} />
     </div>
   )
 }
@@ -205,7 +176,6 @@ const SharedModalAction: FC<{
   const { getPos, view, node } = nodeCtx
   const { dismiss } = useCurrentModal()
   const ctx = useEditorCtx()
-  console.log(node)
 
   const deleteNode = () => {
     const pos = getPos()