feat(editor): integrate Lexical editor support in various components

- Added `lexicalEditor` prop to `TextBaseDrawer`, `WriteEditor`, and `RichWriteEditor` components.
- Introduced `LexicalImageDetailSection` for handling images in Lexical content.
- Updated `pnpm-lock.yaml` to use `@unocss/core` version 66.6.6.
- Enhanced image handling utilities in `image.ts` for better image metadata processing.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

pnpm-lock.yaml

@@ -0,0 +1,218 @@
+import { uniqBy } from 'es-toolkit/compat'
+import { $nodesOfType } from 'lexical'
+import { ImageIcon } from 'lucide-vue-next'
+import { NButton } from 'naive-ui'
+import { computed, defineComponent, ref } from 'vue'
+import { toast } from 'vue-sonner'
+import type { LexicalEditor } from 'lexical'
+import type { PropType } from 'vue'
+
+import { ImageNode } from '@haklex/rich-editor/nodes'
+
+import { encodeImageToThumbhash, getDominantColor } from '~/utils/image'
+
+type SerializedImageNode = {
+  type: string
+  src?: string
+  width?: number
+  height?: number
+  accent?: string
+  thumbhash?: string
+  children?: SerializedImageNode[]
+}
+
+type LexicalImageMeta = {
+  src: string
+  width?: number
+  height?: number
+  accent?: string
+  thumbhash?: string
+}
+
+const collectImageNodes = (nodes: SerializedImageNode[] = []) => {
+  const images: LexicalImageMeta[] = []
+
+  nodes.forEach((node) => {
+    if (node.type === 'image' && node.src) {
+      images.push({
+        src: node.src,
+        width: node.width,
+        height: node.height,
+        accent: node.accent,
+        thumbhash: node.thumbhash,
+      })
+    }
+
+    if (node.children?.length) {
+      images.push(...collectImageNodes(node.children))
+    }
+  })
+
+  return images
+}
+
+export const LexicalImageDetailSection = defineComponent({
+  name: 'LexicalImageDetailSection',
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+    editor: {
+      type: Object as PropType<LexicalEditor | null>,
+      required: false,
+      default: null,
+    },
+  },
+  setup(props) {
+    const loading = ref(false)
+
+    const images = computed(() => {
+      if (!props.content) {
+        return [] as LexicalImageMeta[]
+      }
+
+      try {
+        const parsed = JSON.parse(props.content) as {
+          root?: { children?: SerializedImageNode[] }
+        }
+        return uniqBy(collectImageNodes(parsed.root?.children), 'src')
+      } catch {
+        return [] as LexicalImageMeta[]
+      }
+    })
+
+    const handleCorrectImageDimensions = async () => {
+      if (!props.editor) {
+        toast.warning('Lexical 编辑器尚未就绪')
+        return
+      }
+
+      loading.value = true
+
+      const fetchImageTasks = await Promise.allSettled(
+        images.value.map((item) => {
+          return new Promise<LexicalImageMeta>((resolve, reject) => {
+            const image = new Image()
+            image.crossOrigin = 'Anonymous'
+            image.src = item.src
+
+            image.addEventListener('load', async () => {
+              try {
+                let accent = item.accent
+                let thumbhash = item.thumbhash
+
+                try {
+                  accent = getDominantColor(image)
+                } catch {
+                  // Cross-origin images may block canvas reads.
+                }
+
+                try {
+                  thumbhash = await encodeImageToThumbhash(image)
+                } catch {
+                  // Keep existing thumbhash when recomputing is not possible.
+                }
+
+                resolve({
+                  src: item.src,
+                  width: image.naturalWidth,
+                  height: image.naturalHeight,
+                  accent,
+                  thumbhash,
+                })
+              } catch (error) {
+                reject({
+                  err: error,
+                  src: item.src,
+                })
+              }
+            })
+
+            image.onerror = (err) => {
+              reject({
+                err,
+                src: item.src,
+              })
+            }
+          })
+        }),
+      )
+
+      const nextImageMetaMap = new Map<string, LexicalImageMeta>()
+
+      fetchImageTasks.forEach((task) => {
+        if (task.status === 'fulfilled') {
+          nextImageMetaMap.set(task.value.src, task.value)
+          return
+        }
+
+        toast.warning(`获取图片信息失败：${task.reason.src}`)
+      })
+
+      props.editor.update(() => {
+        const imageNodes = $nodesOfType(ImageNode)
+        imageNodes.forEach((node) => {
+          const nextMeta = nextImageMetaMap.get(node.getSrc())
+          if (!nextMeta) return
+
+          node.setDimensions(nextMeta.width, nextMeta.height)
+          node.setAccent(nextMeta.accent)
+          node.setThumbhash(nextMeta.thumbhash)
+        })
+      })
+
+      loading.value = false
+    }
+
+    return () => (
+      <div class="flex w-full flex-col">
+        <div class="flex items-center justify-between gap-3">
+          <span class="text-sm text-neutral-500">
+            调整 Lexical 中的图片信息
+          </span>
+          <NButton
+            loading={loading.value}
+            size="tiny"
+            onClick={handleCorrectImageDimensions}
+            type="primary"
+            tertiary
+            disabled={!props.editor || images.value.length === 0}
+          >
+            自动修正
+          </NButton>
+        </div>
+
+        {images.value.length > 0 ? (
+          <div class="mt-4 space-y-2">
+            {images.value.map((image) => {
+              const fileName = image.src.split('/').pop() || image.src
+              return (
+                <div
+                  key={image.src}
+                  class="rounded-lg border border-neutral-200 px-3 py-2.5 dark:border-neutral-700"
+                >
+                  <div class="flex items-center gap-2 text-sm text-neutral-700 dark:text-neutral-200">
+                    <ImageIcon class="h-4 w-4 flex-shrink-0 text-neutral-400" />
+                    <span class="min-w-0 flex-1 truncate">{fileName}</span>
+                  </div>
+                  <div class="mt-1 text-xs text-neutral-400">
+                    {image.width && image.height
+                      ? `${image.width}×${image.height}`
+                      : '未写入尺寸'}
+                    {image.accent ? ' · 已有 accent' : ''}
+                    {image.thumbhash ? ' · 已有 thumbhash' : ''}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div class="mt-4 rounded-lg border border-dashed border-neutral-200 px-3 py-4 text-sm text-neutral-400 dark:border-neutral-700">
+            当前 Lexical 内容中没有图片节点
+          </div>
+        )}
+      </div>
+    )
+  },
+})

src/components/drawer/components/lexical-image-detail-section.tsx

@@ -13,10 +13,12 @@ import isURL from 'validator/lib/isURL'
 import { defineComponent, h, ref } from 'vue'
 import type { Image } from '@mx-space/api-client'
 import type { MetaPresetScope } from '~/models/meta-preset'
+import type { LexicalEditor } from 'lexical'
 import type { SelectOption } from 'naive-ui'
 import type { PropType, VNode } from 'vue'
 
 import { ImageDetailSection } from './components/image-detail-section'
+import { LexicalImageDetailSection } from './components/lexical-image-detail-section'
 import { MetaPresetSection } from './components/meta-preset-section'
 import { FormField, SectionTitle, SwitchRow } from './components/ui'
 
@@ -64,6 +66,11 @@ export const TextBaseDrawer = defineComponent({
       type: String as PropType<MetaPresetScope>,
       default: 'both',
     },
+    lexicalEditor: {
+      type: Object as PropType<LexicalEditor | null>,
+      required: false,
+      default: null,
+    },
   },
   setup(props, { slots }) {
     const disabledItem = new Set(props.disabledItem || [])
@@ -144,7 +151,7 @@ export const TextBaseDrawer = defineComponent({
               />
             </FormField>
 
-            {props.data.contentFormat !== 'lexical' && (
+            {props.data.contentFormat !== 'lexical' ? (
               <ImageDetailSection
                 text={props.data.text}
                 images={props.data.images}
@@ -155,6 +162,11 @@ export const TextBaseDrawer = defineComponent({
                   props.data.images = images
                 }}
               />
+            ) : (
+              <LexicalImageDetailSection
+                content={props.data.content || ''}
+                editor={props.lexicalEditor}
+              />
             )}
 
             {/* 附加字段 */}

src/components/drawer/text-base-drawer.tsx

@@ -197,7 +197,6 @@ export const RichEditor = defineComponent({
         () => [
           props.theme,
           uiStore.isDark,
-          props.initialValue,
           props.placeholder,
           props.variant,
           props.autoFocus,

src/components/editor/rich/RichEditor.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, ref, watch } from 'vue'
 import type { ContentFormat } from '~/shared/types/base'
-import type { SerializedEditorState } from 'lexical'
+import type { LexicalEditor, SerializedEditorState } from 'lexical'
 import type { PropType, VNode } from 'vue'
 import type { WriteEditorVariant } from './types'
 
@@ -63,6 +63,9 @@ export const RichWriteEditor = defineComponent({
     onRichContentChange: {
       type: Function as PropType<(value: SerializedEditorState) => void>,
     },
+    onRichEditorReady: {
+      type: Function as PropType<(editor: LexicalEditor | null) => void>,
+    },
     onTextChange: {
       type: Function as PropType<(value: string) => void>,
     },
@@ -87,6 +90,7 @@ export const RichWriteEditor = defineComponent({
       (val) => {
         const json = val ? JSON.stringify(val) : ''
         if (json !== lastEmittedJson) {
+          lastEmittedJson = json
           editorKey.value++
         }
       },
@@ -118,6 +122,9 @@ export const RichWriteEditor = defineComponent({
             lastEmittedJson = JSON.stringify(value)
             props.onRichContentChange?.(value)
           }}
+          onEditorReady={(editor: LexicalEditor | null) => {
+            props.onRichEditorReady?.(editor)
+          }}
           onTextChange={(text: string) => {
             currentText.value = text
             props.onTextChange?.(text)

src/components/editor/write-editor/RichWriteEditor.tsx

@@ -4,7 +4,7 @@
  */
 import { defineComponent } from 'vue'
 import type { ContentFormat } from '~/shared/types/base'
-import type { SerializedEditorState } from 'lexical'
+import type { LexicalEditor, SerializedEditorState } from 'lexical'
 import type { PropType, VNode } from 'vue'
 import type { WriteEditorVariant } from './types'
 
@@ -57,6 +57,9 @@ export const WriteEditor = defineComponent({
     onRichContentChange: {
       type: Function as PropType<(value: SerializedEditorState) => void>,
     },
+    onRichEditorReady: {
+      type: Function as PropType<(editor: LexicalEditor | null) => void>,
+    },
     variant: {
       type: String as PropType<WriteEditorVariant>,
       default: 'post',
@@ -77,6 +80,7 @@ export const WriteEditor = defineComponent({
             onContentFormatChange={props.onContentFormatChange}
             richContent={props.richContent}
             onRichContentChange={props.onRichContentChange}
+            onRichEditorReady={props.onRichEditorReady}
             onTextChange={props.onChange}
             saveConfirmFn={props.saveConfirmFn}
             variant={props.variant}

src/components/editor/write-editor/index.tsx

@@ -2,6 +2,8 @@
 
 import { encode } from 'blurhash'
 
+import { computeImageMeta } from '@haklex/rich-editor/renderers'
+
 export function getDominantColor(imageObject: HTMLImageElement) {
   const canvas = document.createElement('canvas'),
     ctx = canvas.getContext('2d')!
@@ -113,3 +115,26 @@ export const encodeImageToBlurhashWebgl = (image: HTMLImageElement) => {
 
   return encode(resizedImageData.data, 32, 32, 4, 4)
 }
+
+export const encodeImageToThumbhash = async (image: HTMLImageElement) => {
+  const canvas = document.createElement('canvas')
+  canvas.width = image.naturalWidth
+  canvas.height = image.naturalHeight
+
+  const context = canvas.getContext('2d')!
+  context.drawImage(image, 0, 0)
+
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob((nextBlob) => {
+      if (nextBlob) {
+        resolve(nextBlob)
+        return
+      }
+      reject(new Error('Failed to encode image thumbhash'))
+    })
+  })
+
+  const file = new File([blob], 'image.png', { type: blob.type || 'image/png' })
+  const { thumbhash } = await computeImageMeta(file)
+  return thumbhash
+}