@veltra/desktop 1.8.2 → 1.8.3

package/dist/components/rich-text-editor/image-node.js

@@ -7,33 +7,41 @@ function nextImageId() {
 /**
 * 图片节点：插入时 src 为本地 objectURL、__file 持有原始文件，提交前由宿主调用
 * uploadImages 换成服务器地址。__file 不参与序列化，仅会话内有效。
+* width / height 为显示尺寸（px），0 表示未设置、按图片自然尺寸（受 max-width 约束）。
 * 本仓库为手写 Vue 绑定（无 React 适配层），不走 decorate 渲染管道，
-* createDOM 直接返回 <img> 元素。
+* createDOM 返回 wrapper：`<span><img><span 手柄/></span>`，选中与拖拽缩放
+* 由组件层（use-image-resize）基于 data-rte-image-key 驱动。
 */
 var ImageNode = class ImageNode extends DecoratorNode {
 	__src;
 	__alt;
 	__id;
 	__file;
+	__width;
+	__height;
 	static getType() {
 		return "u-image";
 	}
 	static clone(node) {
-		return new ImageNode(node.__src, node.__alt, node.__id, node.__file, node.__key);
+		return new ImageNode(node.__src, node.__alt, node.__id, node.__file, node.__width, node.__height, node.__key);
 	}
 	static importJSON(serializedNode) {
 		return $createImageNode({
 			src: serializedNode.src,
 			alt: serializedNode.alt,
-			id: serializedNode.id
+			id: serializedNode.id,
+			width: serializedNode.width,
+			height: serializedNode.height
 		});
 	}
-	constructor(src, alt = "", id = nextImageId(), file = null, key) {
+	constructor(src, alt = "", id = nextImageId(), file = null, width = 0, height = 0, key) {
 		super(key);
 		this.__src = src;
 		this.__alt = alt;
 		this.__id = id;
 		this.__file = file;
+		this.__width = width;
+		this.__height = height;
 	}
 	static importDOM() {
 		return { img: () => ({
@@ -47,6 +55,8 @@ var ImageNode = class ImageNode extends DecoratorNode {
 		element.setAttribute("class", "u-rte-image");
 		element.setAttribute("alt", this.__alt);
 		element.setAttribute("data-rte-image-id", this.__id);
+		if (this.__width) element.setAttribute("width", String(this.__width));
+		if (this.__height) element.setAttribute("height", String(this.__height));
 		return { element };
 	}
 	exportJSON() {
@@ -55,21 +65,42 @@ var ImageNode = class ImageNode extends DecoratorNode {
 			version: 1,
 			src: this.__src,
 			alt: this.__alt,
-			id: this.__id
+			id: this.__id,
+			width: this.__width,
+			height: this.__height
 		};
 	}
 	createDOM() {
-		const element = document.createElement("img");
-		element.className = "u-rte-image";
-		element.src = this.__src;
-		element.alt = this.__alt;
-		element.draggable = false;
-		return element;
+		const wrapper = document.createElement("span");
+		wrapper.className = "u-rte-image-wrap";
+		wrapper.contentEditable = "false";
+		wrapper.setAttribute("data-rte-image-key", this.__key);
+		const img = document.createElement("img");
+		img.className = "u-rte-image";
+		img.src = this.__src;
+		img.alt = this.__alt;
+		img.draggable = false;
+		if (this.__width) img.style.width = `${this.__width}px`;
+		if (this.__height) img.style.height = `${this.__height}px`;
+		const handle = document.createElement("span");
+		handle.className = "u-rte-image-resizer";
+		handle.setAttribute("aria-hidden", "true");
+		wrapper.append(img, handle);
+		return wrapper;
 	}
 	updateDOM(prevNode, element) {
-		const img = element;
+		const img = element.querySelector("img");
+		if (!img) return false;
 		if (prevNode.__src !== this.__src) img.src = this.__src;
 		if (prevNode.__alt !== this.__alt) img.alt = this.__alt;
+		if (prevNode.__width !== this.__width) {
+			if (this.__width) img.style.width = `${this.__width}px`;
+			else img.style.removeProperty("width");
+		}
+		if (prevNode.__height !== this.__height) {
+			if (this.__height) img.style.height = `${this.__height}px`;
+			else img.style.removeProperty("height");
+		}
 		return false;
 	}
 	/** Vue 环境无 React 渲染管道，装饰内容即 createDOM 返回的元素本身 */
@@ -88,6 +119,12 @@ var ImageNode = class ImageNode extends DecoratorNode {
 		self.__src = src;
 		self.__file = null;
 	}
+	/** 写入显示尺寸（拖拽缩放结束时调用），px，0 表示恢复自然尺寸 */
+	setWidthAndHeight(width, height) {
+		const self = this.getWritable();
+		self.__width = width;
+		self.__height = height;
+	}
 };
 function convertImageElement(domNode) {
 	const src = domNode.getAttribute("src");
@@ -95,11 +132,13 @@ function convertImageElement(domNode) {
 	return { node: $createImageNode({
 		src,
 		alt: domNode.getAttribute("alt") ?? "",
-		id: domNode.getAttribute("data-rte-image-id") ?? void 0
+		id: domNode.getAttribute("data-rte-image-id") ?? void 0,
+		width: parseInt(domNode.getAttribute("width") ?? "") || 0,
+		height: parseInt(domNode.getAttribute("height") ?? "") || 0
 	}) };
 }
 function $createImageNode(options) {
-	return new ImageNode(options.src, options.alt ?? "", options.id ?? nextImageId(), options.file ?? null);
+	return new ImageNode(options.src, options.alt ?? "", options.id ?? nextImageId(), options.file ?? null, options.width ?? 0, options.height ?? 0);
 }
 function $isImageNode(node) {
 	return node instanceof ImageNode;

package/dist/components/rich-text-editor/image-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-node.js","names":[],"sources":["../../../src/components/rich-text-editor/image-node.ts"],"sourcesContent":["import {\n  $insertNodes,\n  DecoratorNode,\n  type DOMConversionMap,\n  type DOMConversionOutput,\n  type DOMExportOutput,\n  type LexicalEditor,\n  type LexicalNode,\n  type NodeKey,\n  type SerializedLexicalNode,\n  type Spread\n} from 'lexical'\n\nlet imageUid = 0\n\nfunction nextImageId(): string {\n  return `rte-img-${++imageUid}`\n}\n\nexport interface SerializedImageNode extends Spread<\n  { src: string; alt: string; id: string },\n  SerializedLexicalNode\n> {}\n\n/**\n * 图片节点：插入时 src 为本地 objectURL、__file 持有原始文件，提交前由宿主调用\n * uploadImages 换成服务器地址。__file 不参与序列化，仅会话内有效。\n * 本仓库为手写 Vue 绑定（无 React 适配层），不走 decorate 渲染管道，\n * createDOM 直接返回 <img> 元素。\n */\nexport class ImageNode extends DecoratorNode<void> {\n  __src: string\n  __alt: string\n  __id: string\n  __file: File | null\n\n  static override getType(): string {\n    return 'u-image'\n  }\n\n  static override clone(node: ImageNode): ImageNode {\n    return new ImageNode(node.__src, node.__alt, node.__id, node.__file, node.__key)\n  }\n\n  static override importJSON(serializedNode: SerializedImageNode): ImageNode {\n    return $createImageNode({\n      src: serializedNode.src,\n      alt: serializedNode.alt,\n      id: serializedNode.id\n    })\n  }\n\n  constructor(src: string, alt = '', id = nextImageId(), file: File | null = null, key?: NodeKey) {\n    super(key)\n    this.__src = src\n    this.__alt = alt\n    this.__id = id\n    this.__file = file\n  }\n\n  static override importDOM(): DOMConversionMap | null {\n    return { img: () => ({ conversion: convertImageElement, priority: 0 }) }\n  }\n\n  override exportDOM(): DOMExportOutput {\n    const element = document.createElement('img')\n    element.setAttribute('src', this.__src)\n    element.setAttribute('class', 'u-rte-image')\n    element.setAttribute('alt', this.__alt)\n    element.setAttribute('data-rte-image-id', this.__id)\n    return { element }\n  }\n\n  override exportJSON(): SerializedImageNode {\n    return { type: 'u-image', version: 1, src: this.__src, alt: this.__alt, id: this.__id }\n  }\n\n  override createDOM(): HTMLElement {\n    const element = document.createElement('img')\n    element.className = 'u-rte-image'\n    element.src = this.__src\n    element.alt = this.__alt\n    element.draggable = false\n    return element\n  }\n\n  override updateDOM(prevNode: ImageNode, element: HTMLElement): boolean {\n    const img = element as HTMLImageElement\n    if (prevNode.__src !== this.__src) img.src = this.__src\n    if (prevNode.__alt !== this.__alt) img.alt = this.__alt\n    return false\n  }\n\n  /** Vue 环境无 React 渲染管道，装饰内容即 createDOM 返回的元素本身 */\n  override decorate(): null {\n    return null\n  }\n\n  getSrc(): string {\n    return this.__src\n  }\n\n  getFile(): File | null {\n    return this.__file\n  }\n\n  /** 替换为服务器地址，同时清除待上传标记（已上传的节点不再重复上传） */\n  setSrc(src: string): void {\n    const self = this.getWritable()\n    self.__src = src\n    self.__file = null\n  }\n}\n\nfunction convertImageElement(domNode: HTMLElement): DOMConversionOutput {\n  const src = domNode.getAttribute('src')\n  if (!src) return { node: null }\n  return {\n    node: $createImageNode({\n      src,\n      alt: domNode.getAttribute('alt') ?? '',\n      id: domNode.getAttribute('data-rte-image-id') ?? undefined\n    })\n  }\n}\n\nexport function $createImageNode(options: {\n  src: string\n  alt?: string\n  id?: string\n  file?: File | null\n}): ImageNode {\n  return new ImageNode(\n    options.src,\n    options.alt ?? '',\n    options.id ?? nextImageId(),\n    options.file ?? null\n  )\n}\n\nexport function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode {\n  return node instanceof ImageNode\n}\n\n// 各编辑器实例创建的图片 objectURL，用于节点删除 / 组件卸载时回收\nconst objectUrls = new WeakMap<LexicalEditor, Set<string>>()\n\nfunction getImageObjectUrls(editor: LexicalEditor): Set<string> {\n  let urls = objectUrls.get(editor)\n  if (!urls) {\n    urls = new Set()\n    objectUrls.set(editor, urls)\n  }\n  return urls\n}\n\n/** 插入图片文件：objectURL 即时预览，File 挂在节点上等待提交时上传。返回插入的图片数量 */\nexport function insertImageFiles(editor: LexicalEditor, files: File[] | FileList): number {\n  const images = Array.from(files).filter((file) => file.type.startsWith('image/'))\n  if (!images.length) return 0\n\n  const urls = getImageObjectUrls(editor)\n\n  editor.update(() => {\n    const nodes = images.map((file) => {\n      const url = URL.createObjectURL(file)\n      urls.add(url)\n      return $createImageNode({ src: url, alt: file.name, file })\n    })\n    $insertNodes(nodes)\n  })\n\n  return images.length\n}\n\n/** 回收已从内容中移除的图片 objectURL，aliveUrls 为当前内容中仍存活的图片地址 */\nexport function gcImageObjectUrls(editor: LexicalEditor, aliveUrls: Set<string>): void {\n  const urls = objectUrls.get(editor)\n  if (!urls?.size) return\n  urls.forEach((url) => {\n    if (!aliveUrls.has(url)) {\n      URL.revokeObjectURL(url)\n      urls.delete(url)\n    }\n  })\n}\n\n/** 回收该编辑器创建的全部图片 objectURL（组件卸载时调用） */\nexport function revokeImageObjectUrls(editor: LexicalEditor): void {\n  const urls = objectUrls.get(editor)\n  urls?.forEach((url) => URL.revokeObjectURL(url))\n  objectUrls.delete(editor)\n}\n"],"mappings":"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"}
+{"version":3,"file":"image-node.js","names":[],"sources":["../../../src/components/rich-text-editor/image-node.ts"],"sourcesContent":["import {\n  $insertNodes,\n  DecoratorNode,\n  type DOMConversionMap,\n  type DOMConversionOutput,\n  type DOMExportOutput,\n  type LexicalEditor,\n  type LexicalNode,\n  type NodeKey,\n  type SerializedLexicalNode,\n  type Spread\n} from 'lexical'\n\nlet imageUid = 0\n\nfunction nextImageId(): string {\n  return `rte-img-${++imageUid}`\n}\n\nexport interface SerializedImageNode extends Spread<\n  { src: string; alt: string; id: string; width: number; height: number },\n  SerializedLexicalNode\n> {}\n\n/**\n * 图片节点：插入时 src 为本地 objectURL、__file 持有原始文件，提交前由宿主调用\n * uploadImages 换成服务器地址。__file 不参与序列化，仅会话内有效。\n * width / height 为显示尺寸（px），0 表示未设置、按图片自然尺寸（受 max-width 约束）。\n * 本仓库为手写 Vue 绑定（无 React 适配层），不走 decorate 渲染管道，\n * createDOM 返回 wrapper：`<span><img><span 手柄/></span>`，选中与拖拽缩放\n * 由组件层（use-image-resize）基于 data-rte-image-key 驱动。\n */\nexport class ImageNode extends DecoratorNode<void> {\n  __src: string\n  __alt: string\n  __id: string\n  __file: File | null\n  __width: number\n  __height: number\n\n  static override getType(): string {\n    return 'u-image'\n  }\n\n  static override clone(node: ImageNode): ImageNode {\n    return new ImageNode(\n      node.__src,\n      node.__alt,\n      node.__id,\n      node.__file,\n      node.__width,\n      node.__height,\n      node.__key\n    )\n  }\n\n  static override importJSON(serializedNode: SerializedImageNode): ImageNode {\n    return $createImageNode({\n      src: serializedNode.src,\n      alt: serializedNode.alt,\n      id: serializedNode.id,\n      width: serializedNode.width,\n      height: serializedNode.height\n    })\n  }\n\n  constructor(\n    src: string,\n    alt = '',\n    id = nextImageId(),\n    file: File | null = null,\n    width = 0,\n    height = 0,\n    key?: NodeKey\n  ) {\n    super(key)\n    this.__src = src\n    this.__alt = alt\n    this.__id = id\n    this.__file = file\n    this.__width = width\n    this.__height = height\n  }\n\n  static override importDOM(): DOMConversionMap | null {\n    return { img: () => ({ conversion: convertImageElement, priority: 0 }) }\n  }\n\n  override exportDOM(): DOMExportOutput {\n    const element = document.createElement('img')\n    element.setAttribute('src', this.__src)\n    element.setAttribute('class', 'u-rte-image')\n    element.setAttribute('alt', this.__alt)\n    element.setAttribute('data-rte-image-id', this.__id)\n    if (this.__width) element.setAttribute('width', String(this.__width))\n    if (this.__height) element.setAttribute('height', String(this.__height))\n    return { element }\n  }\n\n  override exportJSON(): SerializedImageNode {\n    return {\n      type: 'u-image',\n      version: 1,\n      src: this.__src,\n      alt: this.__alt,\n      id: this.__id,\n      width: this.__width,\n      height: this.__height\n    }\n  }\n\n  override createDOM(): HTMLElement {\n    const wrapper = document.createElement('span')\n    wrapper.className = 'u-rte-image-wrap'\n    wrapper.contentEditable = 'false'\n    wrapper.setAttribute('data-rte-image-key', this.__key)\n\n    const img = document.createElement('img')\n    img.className = 'u-rte-image'\n    img.src = this.__src\n    img.alt = this.__alt\n    img.draggable = false\n    if (this.__width) img.style.width = `${this.__width}px`\n    if (this.__height) img.style.height = `${this.__height}px`\n\n    const handle = document.createElement('span')\n    handle.className = 'u-rte-image-resizer'\n    handle.setAttribute('aria-hidden', 'true')\n\n    wrapper.append(img, handle)\n    return wrapper\n  }\n\n  override updateDOM(prevNode: ImageNode, element: HTMLElement): boolean {\n    const img = element.querySelector('img')\n    if (!img) return false\n    if (prevNode.__src !== this.__src) img.src = this.__src\n    if (prevNode.__alt !== this.__alt) img.alt = this.__alt\n    if (prevNode.__width !== this.__width) {\n      if (this.__width) img.style.width = `${this.__width}px`\n      else img.style.removeProperty('width')\n    }\n    if (prevNode.__height !== this.__height) {\n      if (this.__height) img.style.height = `${this.__height}px`\n      else img.style.removeProperty('height')\n    }\n    return false\n  }\n\n  /** Vue 环境无 React 渲染管道，装饰内容即 createDOM 返回的元素本身 */\n  override decorate(): null {\n    return null\n  }\n\n  getSrc(): string {\n    return this.__src\n  }\n\n  getFile(): File | null {\n    return this.__file\n  }\n\n  /** 替换为服务器地址，同时清除待上传标记（已上传的节点不再重复上传） */\n  setSrc(src: string): void {\n    const self = this.getWritable()\n    self.__src = src\n    self.__file = null\n  }\n\n  /** 写入显示尺寸（拖拽缩放结束时调用），px，0 表示恢复自然尺寸 */\n  setWidthAndHeight(width: number, height: number): void {\n    const self = this.getWritable()\n    self.__width = width\n    self.__height = height\n  }\n}\n\nfunction convertImageElement(domNode: HTMLElement): DOMConversionOutput {\n  const src = domNode.getAttribute('src')\n  if (!src) return { node: null }\n  return {\n    node: $createImageNode({\n      src,\n      alt: domNode.getAttribute('alt') ?? '',\n      id: domNode.getAttribute('data-rte-image-id') ?? undefined,\n      width: parseInt(domNode.getAttribute('width') ?? '') || 0,\n      height: parseInt(domNode.getAttribute('height') ?? '') || 0\n    })\n  }\n}\n\nexport function $createImageNode(options: {\n  src: string\n  alt?: string\n  id?: string\n  file?: File | null\n  width?: number\n  height?: number\n}): ImageNode {\n  return new ImageNode(\n    options.src,\n    options.alt ?? '',\n    options.id ?? nextImageId(),\n    options.file ?? null,\n    options.width ?? 0,\n    options.height ?? 0\n  )\n}\n\nexport function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode {\n  return node instanceof ImageNode\n}\n\n// 各编辑器实例创建的图片 objectURL，用于节点删除 / 组件卸载时回收\nconst objectUrls = new WeakMap<LexicalEditor, Set<string>>()\n\nfunction getImageObjectUrls(editor: LexicalEditor): Set<string> {\n  let urls = objectUrls.get(editor)\n  if (!urls) {\n    urls = new Set()\n    objectUrls.set(editor, urls)\n  }\n  return urls\n}\n\n/** 插入图片文件：objectURL 即时预览，File 挂在节点上等待提交时上传。返回插入的图片数量 */\nexport function insertImageFiles(editor: LexicalEditor, files: File[] | FileList): number {\n  const images = Array.from(files).filter((file) => file.type.startsWith('image/'))\n  if (!images.length) return 0\n\n  const urls = getImageObjectUrls(editor)\n\n  editor.update(() => {\n    const nodes = images.map((file) => {\n      const url = URL.createObjectURL(file)\n      urls.add(url)\n      return $createImageNode({ src: url, alt: file.name, file })\n    })\n    $insertNodes(nodes)\n  })\n\n  return images.length\n}\n\n/** 回收已从内容中移除的图片 objectURL，aliveUrls 为当前内容中仍存活的图片地址 */\nexport function gcImageObjectUrls(editor: LexicalEditor, aliveUrls: Set<string>): void {\n  const urls = objectUrls.get(editor)\n  if (!urls?.size) return\n  urls.forEach((url) => {\n    if (!aliveUrls.has(url)) {\n      URL.revokeObjectURL(url)\n      urls.delete(url)\n    }\n  })\n}\n\n/** 回收该编辑器创建的全部图片 objectURL（组件卸载时调用） */\nexport function revokeImageObjectUrls(editor: LexicalEditor): void {\n  const urls = objectUrls.get(editor)\n  urls?.forEach((url) => URL.revokeObjectURL(url))\n  objectUrls.delete(editor)\n}\n"],"mappings":"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"}

package/dist/components/rich-text-editor/rich-text-editor.js

@@ -1,5 +1,6 @@
 import { $isImageNode, ImageNode, gcImageObjectUrls, insertImageFiles, revokeImageObjectUrls } from "./image-node.js";
 import _sfc_main$1 from "./toolbar.js";
+import { useImageResize } from "./use-image-resize.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
 import { useFormFallbackProps } from "@veltra/compositions";
 import { bem, injectFormContext } from "@veltra/utils";
@@ -8,7 +9,7 @@ import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
 import { AutoLinkNode, LinkNode } from "@lexical/link";
 import { ListItemNode, ListNode, registerList } from "@lexical/list";
 import { HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text";
-import { $createParagraphNode, $createRangeSelection, $getNodeByKey, $getRoot, $nodesOfType, $setSelection, COMMAND_PRIORITY_HIGH, DROP_COMMAND, PASTE_COMMAND, createEditor } from "lexical";
+import { $createParagraphNode, $createRangeSelection, $getNodeByKey, $getRoot, $getSelection, $isNodeSelection, $nodesOfType, $setSelection, COMMAND_PRIORITY_HIGH, DROP_COMMAND, PASTE_COMMAND, createEditor } from "lexical";
 //#region src/components/rich-text-editor/rich-text-editor.vue
 const _hoisted_1 = ["contenteditable"];
 const LEXICAL_THEME = {
@@ -112,6 +113,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const showPlaceholder = ref(true);
 		let isComposing = false;
 		let cleanupFns = [];
+		const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value;
+		useImageResize(editor, acceptsImage);
 		function initEditor() {
 			if (!editorContainer.value) return;
 			const editorInstance = createEditor({
@@ -135,7 +138,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			cleanupFns.push(registerRichText(editorInstance));
 			cleanupFns.push(registerList(editorInstance));
 			cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300));
-			const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value;
 			cleanupFns.push(editorInstance.registerCommand(PASTE_COMMAND, (event) => {
 				if (!acceptsImage()) return false;
 				if (insertImageFiles(editorInstance, event.clipboardData?.files ?? []) > 0) {
@@ -252,7 +254,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}
 		});
 		watch([isDisabled, isReadonly], () => {
-			if (editor.value) editor.value.setEditable(!isDisabled.value && !isReadonly.value);
+			if (!editor.value) return;
+			editor.value.setEditable(!isDisabled.value && !isReadonly.value);
+			if (isDisabled.value || isReadonly.value) editor.value.update(() => {
+				if ($isNodeSelection($getSelection())) $setSelection(null);
+			});
 		});
 		onMounted(() => {
 			initEditor();

package/dist/components/rich-text-editor/rich-text-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n  <div :class=\"className\">\n    <toolbar\n      v-if=\"!isReadonly && toolbarItems.length > 0\"\n      :editor=\"editor\"\n      :toolbar=\"toolbarItems\"\n      :disabled=\"isDisabled\"\n    />\n    <div :class=\"cls.e('content')\">\n      <div\n        ref=\"editorContainer\"\n        :class=\"cls.e('editable')\"\n        :contenteditable=\"!isDisabled && !isReadonly\"\n      ></div>\n      <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n        {{ placeholder }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n  paragraph: 'u-rte-paragraph',\n  heading: {\n    h1: 'u-rte-h1',\n    h2: 'u-rte-h2',\n    h3: 'u-rte-h3',\n    h4: 'u-rte-h4',\n    h5: 'u-rte-h5',\n    h6: 'u-rte-h6'\n  },\n  text: {\n    bold: 'u-rte-bold',\n    italic: 'u-rte-italic',\n    underline: 'u-rte-underline',\n    strikethrough: 'u-rte-strikethrough'\n  },\n  list: {\n    ul: 'u-rte-ul',\n    ol: 'u-rte-ol',\n    listitem: 'u-rte-li',\n    nested: { listitem: 'u-rte-li--nested' }\n  },\n  quote: 'u-rte-blockquote',\n\n  link: 'u-rte-link',\n  image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n  'undo',\n  'redo',\n  '|',\n  'heading',\n  '|',\n  'bold',\n  'italic',\n  'underline',\n  'strikethrough',\n  '|',\n  'bullet-list',\n  'ordered-list',\n  '|',\n  'blockquote',\n  '|',\n  'link',\n  '|',\n  'image'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport {\n  $createRangeSelection,\n  $getNodeByKey,\n  $getRoot,\n  $createParagraphNode,\n  $nodesOfType,\n  $setSelection,\n  COMMAND_PRIORITY_HIGH,\n  DROP_COMMAND,\n  PASTE_COMMAND,\n  createEditor,\n  type LexicalEditor\n} from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type {\n  RichTextEditorProps,\n  RichTextImageUploader,\n  _RichTextEditorExposed\n} from '../../types'\nimport {\n  ImageNode,\n  $isImageNode,\n  gcImageObjectUrls,\n  insertImageFiles,\n  revokeImageObjectUrls\n} from './image-node'\nimport Toolbar from './toolbar.vue'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  disabled: undefined,\n  readonly: undefined,\n  format: 'html',\n  toolbar: () => DEFAULT_TOOLBAR,\n  placeholder: '',\n  image: true\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', isDisabled.value),\n    bem.is('readonly', isReadonly.value)\n  ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n  const items = props.toolbar ?? DEFAULT_TOOLBAR\n  return props.image ? items : items.filter((item) => item !== 'image')\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nfunction initEditor() {\n  if (!editorContainer.value) return\n\n  const editorInstance = createEditor({\n    namespace: 'URichTextEditor',\n    theme: LEXICAL_THEME,\n    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode, ImageNode],\n    editable: !isDisabled.value && !isReadonly.value,\n    onError: (error: Error) => {\n      console.error('Lexical error:', error)\n    }\n  })\n\n  editorInstance.setRootElement(editorContainer.value)\n\n  // Register plugins\n  cleanupFns.push(registerRichText(editorInstance))\n  cleanupFns.push(registerList(editorInstance))\n  cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n  // Image input: paste & drop\n  const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value\n\n  cleanupFns.push(\n    editorInstance.registerCommand(\n      PASTE_COMMAND,\n      (event) => {\n        if (!acceptsImage()) return false\n        if (insertImageFiles(editorInstance, event.clipboardData?.files ?? []) > 0) {\n          event.preventDefault()\n          return true\n        }\n        return false\n      },\n      COMMAND_PRIORITY_HIGH\n    ),\n    editorInstance.registerCommand(\n      DROP_COMMAND,\n      (event) => {\n        if (!acceptsImage()) return false\n        const files = event.dataTransfer?.files\n        if (!files?.length) return false\n        // 先把光标落到落点，再插入\n        const range = document.caretRangeFromPoint(event.clientX, event.clientY)\n        if (range) {\n          editorInstance.update(() => {\n            const selection = $createRangeSelection()\n            selection.applyDOMRange(range)\n            $setSelection(selection)\n          })\n        }\n        if (insertImageFiles(editorInstance, files) > 0) {\n          event.preventDefault()\n          return true\n        }\n        return false\n      },\n      COMMAND_PRIORITY_HIGH\n    )\n  )\n\n  // Set initial value\n  if (model.value) {\n    setEditorContent(editorInstance, model.value)\n  }\n\n  // Listen for content changes\n  cleanupFns.push(\n    editorInstance.registerUpdateListener(({ editorState }) => {\n      editorState.read(\n        () => {\n          const root = $getRoot()\n          const imageNodes = $nodesOfType(ImageNode)\n          showPlaceholder.value =\n            root.getTextContent().trim().length === 0 && imageNodes.length === 0\n\n          // 回收已从内容中移除的图片 objectURL\n          gcImageObjectUrls(editorInstance, new Set(imageNodes.map((node) => node.getSrc())))\n\n          if (isComposing) return\n\n          const value = serializeContent(editorInstance)\n\n          // Avoid circular updates: only emit if content really changed\n          if (value !== model.value) {\n            isComposing = true\n            model.value = value\n            // Use microtask to reset after Vue processes the update\n            queueMicrotask(() => {\n              isComposing = false\n            })\n          }\n        },\n        { editor: editorInstance }\n      )\n    })\n  )\n\n  // Composing event listeners for IME\n  const rootElement = editorInstance.getRootElement()\n  if (rootElement) {\n    const onCompositionStart = () => {\n      isComposing = true\n    }\n    const onCompositionEnd = () => {\n      isComposing = false\n    }\n    rootElement.addEventListener('compositionstart', onCompositionStart)\n    rootElement.addEventListener('compositionend', onCompositionEnd)\n    cleanupFns.push(() => {\n      rootElement.removeEventListener('compositionstart', onCompositionStart)\n      rootElement.removeEventListener('compositionend', onCompositionEnd)\n    })\n  }\n\n  editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n  editorInstance.update(() => {\n    const root = $getRoot()\n    root.clear()\n\n    if (props.format === 'json') {\n      try {\n        const parsedState = editorInstance.parseEditorState(value)\n        editorInstance.setEditorState(parsedState)\n      } catch {\n        // If JSON parse fails, treat as empty\n        root.append($createParagraphNode())\n      }\n    } else {\n      // HTML format\n      const parser = new DOMParser()\n      const dom = parser.parseFromString(value, 'text/html')\n      const nodes = $generateNodesFromDOM(editorInstance, dom)\n      root.append(...nodes)\n    }\n  })\n}\n\nfunction serializeContent(editorInstance: LexicalEditor): string {\n  return editorInstance.read(() =>\n    props.format === 'json'\n      ? JSON.stringify(editorInstance.getEditorState().toJSON())\n      : $generateHtmlFromNodes(editorInstance)\n  )\n}\n\nlet isUploadingImages = false\n\nasync function uploadImages(upload: RichTextImageUploader): Promise<string> {\n  const editorInstance = editor.value\n  if (!editorInstance) return model.value ?? ''\n  if (isUploadingImages) throw new Error('图片正在上传中')\n\n  const pending = editorInstance.getEditorState().read(() =>\n    $nodesOfType(ImageNode)\n      .filter((node) => node.getFile())\n      .map((node) => ({ key: node.getKey(), file: node.getFile() as File }))\n  )\n\n  if (pending.length) {\n    isUploadingImages = true\n    try {\n      const urls = await Promise.all(pending.map(({ file }) => upload(file)))\n      editorInstance.update(() => {\n        pending.forEach(({ key }, index) => {\n          const node = $getNodeByKey(key)\n          if ($isImageNode(node)) node.setSrc(urls[index])\n        })\n      })\n    } finally {\n      isUploadingImages = false\n    }\n  }\n\n  return serializeContent(editorInstance)\n}\n\ndefineExpose<_RichTextEditorExposed>({ uploadImages })\n\n// Watch external model changes\nwatch(model, (newVal) => {\n  if (!editor.value || isComposing) return\n\n  const editorInstance = editor.value\n\n  // Compare current content to avoid circular updates\n  const currentValue = serializeContent(editorInstance)\n\n  if (currentValue !== newVal) {\n    isComposing = true\n    setEditorContent(editorInstance, newVal ?? '')\n    queueMicrotask(() => {\n      isComposing = false\n    })\n  }\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n  if (editor.value) {\n    editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n  }\n})\n\nonMounted(() => {\n  initEditor()\n})\n\nonBeforeUnmount(() => {\n  cleanupFns.forEach((fn) => fn())\n  cleanupFns = []\n  if (editor.value) revokeImageObjectUrls(editor.value)\n  editor.value = null\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../src/components/rich-text-editor/rich-text-editor.vue"],"sourcesContent":["<template>\n  <div :class=\"className\">\n    <toolbar\n      v-if=\"!isReadonly && toolbarItems.length > 0\"\n      :editor=\"editor\"\n      :toolbar=\"toolbarItems\"\n      :disabled=\"isDisabled\"\n    />\n    <div :class=\"cls.e('content')\">\n      <div\n        ref=\"editorContainer\"\n        :class=\"cls.e('editable')\"\n        :contenteditable=\"!isDisabled && !isReadonly\"\n      ></div>\n      <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n        {{ placeholder }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { ToolbarItem } from '../../types'\n\nconst LEXICAL_THEME = {\n  paragraph: 'u-rte-paragraph',\n  heading: {\n    h1: 'u-rte-h1',\n    h2: 'u-rte-h2',\n    h3: 'u-rte-h3',\n    h4: 'u-rte-h4',\n    h5: 'u-rte-h5',\n    h6: 'u-rte-h6'\n  },\n  text: {\n    bold: 'u-rte-bold',\n    italic: 'u-rte-italic',\n    underline: 'u-rte-underline',\n    strikethrough: 'u-rte-strikethrough'\n  },\n  list: {\n    ul: 'u-rte-ul',\n    ol: 'u-rte-ol',\n    listitem: 'u-rte-li',\n    nested: { listitem: 'u-rte-li--nested' }\n  },\n  quote: 'u-rte-blockquote',\n\n  link: 'u-rte-link',\n  image: 'u-rte-image'\n}\n\nconst DEFAULT_TOOLBAR: ToolbarItem[] = [\n  'undo',\n  'redo',\n  '|',\n  'heading',\n  '|',\n  'bold',\n  'italic',\n  'underline',\n  'strikethrough',\n  '|',\n  'bullet-list',\n  'ordered-list',\n  '|',\n  'blockquote',\n  '|',\n  'link',\n  '|',\n  'image'\n]\n</script>\n\n<script lang=\"ts\" setup>\nimport { registerHistory, createEmptyHistoryState } from '@lexical/history'\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'\nimport { LinkNode, AutoLinkNode } from '@lexical/link'\nimport { ListNode, ListItemNode, registerList } from '@lexical/list'\nimport { registerRichText } from '@lexical/rich-text'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport {\n  $createRangeSelection,\n  $getNodeByKey,\n  $getRoot,\n  $createParagraphNode,\n  $nodesOfType,\n  $getSelection,\n  $isNodeSelection,\n  $setSelection,\n  COMMAND_PRIORITY_HIGH,\n  DROP_COMMAND,\n  PASTE_COMMAND,\n  createEditor,\n  type LexicalEditor\n} from 'lexical'\nimport { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type {\n  RichTextEditorProps,\n  RichTextImageUploader,\n  _RichTextEditorExposed\n} from '../../types'\nimport {\n  ImageNode,\n  $isImageNode,\n  gcImageObjectUrls,\n  insertImageFiles,\n  revokeImageObjectUrls\n} from './image-node'\nimport Toolbar from './toolbar.vue'\nimport { useImageResize } from './use-image-resize'\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  disabled: undefined,\n  readonly: undefined,\n  format: 'html',\n  toolbar: () => DEFAULT_TOOLBAR,\n  placeholder: '',\n  image: true\n})\n\nconst model = defineModel<string>()\n\nconst cls = bem('rich-text-editor')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst isDisabled = computed(() => !!disabled.value)\nconst isReadonly = computed(() => !!readonly.value)\n\nconst className = computed<string[]>(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', isDisabled.value),\n    bem.is('readonly', isReadonly.value)\n  ]\n})\n\nconst toolbarItems = computed<ToolbarItem[]>(() => {\n  const items = props.toolbar ?? DEFAULT_TOOLBAR\n  return props.image ? items : items.filter((item) => item !== 'image')\n})\n\nconst editorContainer = useTemplateRef('editorContainer')\nconst editor = shallowRef<LexicalEditor | null>(null)\nconst showPlaceholder = ref(true)\nlet isComposing = false\nlet cleanupFns: (() => void)[] = []\n\nconst acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value\n\n// 图片选中 / 拖拽缩放交互\nuseImageResize(editor, acceptsImage)\n\nfunction initEditor() {\n  if (!editorContainer.value) return\n\n  const editorInstance = createEditor({\n    namespace: 'URichTextEditor',\n    theme: LEXICAL_THEME,\n    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode, ImageNode],\n    editable: !isDisabled.value && !isReadonly.value,\n    onError: (error: Error) => {\n      console.error('Lexical error:', error)\n    }\n  })\n\n  editorInstance.setRootElement(editorContainer.value)\n\n  // Register plugins\n  cleanupFns.push(registerRichText(editorInstance))\n  cleanupFns.push(registerList(editorInstance))\n  cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))\n\n  // Image input: paste & drop\n  cleanupFns.push(\n    editorInstance.registerCommand(\n      PASTE_COMMAND,\n      (event) => {\n        if (!acceptsImage()) return false\n        if (insertImageFiles(editorInstance, event.clipboardData?.files ?? []) > 0) {\n          event.preventDefault()\n          return true\n        }\n        return false\n      },\n      COMMAND_PRIORITY_HIGH\n    ),\n    editorInstance.registerCommand(\n      DROP_COMMAND,\n      (event) => {\n        if (!acceptsImage()) return false\n        const files = event.dataTransfer?.files\n        if (!files?.length) return false\n        // 先把光标落到落点，再插入\n        const range = document.caretRangeFromPoint(event.clientX, event.clientY)\n        if (range) {\n          editorInstance.update(() => {\n            const selection = $createRangeSelection()\n            selection.applyDOMRange(range)\n            $setSelection(selection)\n          })\n        }\n        if (insertImageFiles(editorInstance, files) > 0) {\n          event.preventDefault()\n          return true\n        }\n        return false\n      },\n      COMMAND_PRIORITY_HIGH\n    )\n  )\n\n  // Set initial value\n  if (model.value) {\n    setEditorContent(editorInstance, model.value)\n  }\n\n  // Listen for content changes\n  cleanupFns.push(\n    editorInstance.registerUpdateListener(({ editorState }) => {\n      editorState.read(\n        () => {\n          const root = $getRoot()\n          const imageNodes = $nodesOfType(ImageNode)\n          showPlaceholder.value =\n            root.getTextContent().trim().length === 0 && imageNodes.length === 0\n\n          // 回收已从内容中移除的图片 objectURL\n          gcImageObjectUrls(editorInstance, new Set(imageNodes.map((node) => node.getSrc())))\n\n          if (isComposing) return\n\n          const value = serializeContent(editorInstance)\n\n          // Avoid circular updates: only emit if content really changed\n          if (value !== model.value) {\n            isComposing = true\n            model.value = value\n            // Use microtask to reset after Vue processes the update\n            queueMicrotask(() => {\n              isComposing = false\n            })\n          }\n        },\n        { editor: editorInstance }\n      )\n    })\n  )\n\n  // Composing event listeners for IME\n  const rootElement = editorInstance.getRootElement()\n  if (rootElement) {\n    const onCompositionStart = () => {\n      isComposing = true\n    }\n    const onCompositionEnd = () => {\n      isComposing = false\n    }\n    rootElement.addEventListener('compositionstart', onCompositionStart)\n    rootElement.addEventListener('compositionend', onCompositionEnd)\n    cleanupFns.push(() => {\n      rootElement.removeEventListener('compositionstart', onCompositionStart)\n      rootElement.removeEventListener('compositionend', onCompositionEnd)\n    })\n  }\n\n  editor.value = editorInstance\n}\n\nfunction setEditorContent(editorInstance: LexicalEditor, value: string) {\n  editorInstance.update(() => {\n    const root = $getRoot()\n    root.clear()\n\n    if (props.format === 'json') {\n      try {\n        const parsedState = editorInstance.parseEditorState(value)\n        editorInstance.setEditorState(parsedState)\n      } catch {\n        // If JSON parse fails, treat as empty\n        root.append($createParagraphNode())\n      }\n    } else {\n      // HTML format\n      const parser = new DOMParser()\n      const dom = parser.parseFromString(value, 'text/html')\n      const nodes = $generateNodesFromDOM(editorInstance, dom)\n      root.append(...nodes)\n    }\n  })\n}\n\nfunction serializeContent(editorInstance: LexicalEditor): string {\n  return editorInstance.read(() =>\n    props.format === 'json'\n      ? JSON.stringify(editorInstance.getEditorState().toJSON())\n      : $generateHtmlFromNodes(editorInstance)\n  )\n}\n\nlet isUploadingImages = false\n\nasync function uploadImages(upload: RichTextImageUploader): Promise<string> {\n  const editorInstance = editor.value\n  if (!editorInstance) return model.value ?? ''\n  if (isUploadingImages) throw new Error('图片正在上传中')\n\n  const pending = editorInstance.getEditorState().read(() =>\n    $nodesOfType(ImageNode)\n      .filter((node) => node.getFile())\n      .map((node) => ({ key: node.getKey(), file: node.getFile() as File }))\n  )\n\n  if (pending.length) {\n    isUploadingImages = true\n    try {\n      const urls = await Promise.all(pending.map(({ file }) => upload(file)))\n      editorInstance.update(() => {\n        pending.forEach(({ key }, index) => {\n          const node = $getNodeByKey(key)\n          if ($isImageNode(node)) node.setSrc(urls[index])\n        })\n      })\n    } finally {\n      isUploadingImages = false\n    }\n  }\n\n  return serializeContent(editorInstance)\n}\n\ndefineExpose<_RichTextEditorExposed>({ uploadImages })\n\n// Watch external model changes\nwatch(model, (newVal) => {\n  if (!editor.value || isComposing) return\n\n  const editorInstance = editor.value\n\n  // Compare current content to avoid circular updates\n  const currentValue = serializeContent(editorInstance)\n\n  if (currentValue !== newVal) {\n    isComposing = true\n    setEditorContent(editorInstance, newVal ?? '')\n    queueMicrotask(() => {\n      isComposing = false\n    })\n  }\n})\n\n// Watch disabled/readonly changes\nwatch([isDisabled, isReadonly], () => {\n  if (!editor.value) return\n  editor.value.setEditable(!isDisabled.value && !isReadonly.value)\n  if (isDisabled.value || isReadonly.value) {\n    // 切出可编辑态时取消可能残留的图片选中\n    editor.value.update(() => {\n      if ($isNodeSelection($getSelection())) $setSelection(null)\n    })\n  }\n})\n\nonMounted(() => {\n  initEditor()\n})\n\nonBeforeUnmount(() => {\n  cleanupFns.forEach((fn) => fn())\n  cleanupFns = []\n  if (editor.value) revokeImageObjectUrls(editor.value)\n  editor.value = null\n})\n</script>\n"],"mappings":"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"}

package/dist/components/rich-text-editor/style2.css

@@ -342,3 +342,34 @@
   height: auto;
   vertical-align: bottom;
 }
+
+.u-rte-image-wrap {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+  line-height: 0;
+}
+.u-rte-image-wrap .u-rte-image {
+  display: block;
+}
+.u-rte-image-wrap.is-selected .u-rte-image {
+  outline: 2px solid var(--u-color-primary);
+  border-radius: 2px;
+}
+
+.u-rte-image-resizer {
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  display: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--u-bg-color-top);
+  border: 2px solid var(--u-color-primary);
+  cursor: nwse-resize;
+}
+.u-rte-image-wrap.is-selected .u-rte-image-resizer {
+  display: block;
+}

package/dist/components/rich-text-editor/use-image-resize.js

@@ -0,0 +1,118 @@
+import { $isImageNode } from "./image-node.js";
+import { onBeforeUnmount, watch } from "vue";
+import { $createNodeSelection, $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND } from "lexical";
+//#region src/components/rich-text-editor/use-image-resize.ts
+const WRAP_SELECTOR = "[data-rte-image-key]";
+const HANDLE_SELECTOR = ".u-rte-image-resizer";
+const MIN_WIDTH = 24;
+const captureOptions = { capture: true };
+function swallowClick(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+/**
+* 图片选中与拖拽缩放（参考 Lexical playground ImagesPlugin / ImageResizer）：
+* - 点击图片设置 NodeSelection 并标记选中态（wrapper 加 is-selected）
+* - 拖拽右下角手柄等比缩放，实时改写 img 内联尺寸，松手时写入节点
+* - Esc 取消选中；Backspace / Delete 删除走 Lexical 原生 NodeSelection 通路
+* 选中态在每次 editor 更新后重放，避免撤销 / 内容重设后 class 失效。
+*/
+function useImageResize(editor, canEdit) {
+	let selectedKey = null;
+	let cleanupFns = [];
+	function syncSelectionClass(ed) {
+		const root = ed.getRootElement();
+		if (!root) return;
+		root.querySelectorAll(".u-rte-image-wrap.is-selected").forEach((element) => {
+			element.classList.remove("is-selected");
+		});
+		if (selectedKey) ed.getElementByKey(selectedKey)?.classList.add("is-selected");
+	}
+	function setup(ed) {
+		cleanupFns.push(ed.registerCommand(CLICK_COMMAND, (event) => {
+			if (!canEdit()) return false;
+			const key = event.target.closest?.(WRAP_SELECTOR)?.getAttribute("data-rte-image-key");
+			if (!key) return false;
+			event.preventDefault();
+			ed.update(() => {
+				if (!$isImageNode($getNodeByKey(key))) return;
+				const selection = $createNodeSelection();
+				selection.add(key);
+				$setSelection(selection);
+			});
+			return true;
+		}, COMMAND_PRIORITY_HIGH), ed.registerCommand(KEY_ESCAPE_COMMAND, () => {
+			if (!selectedKey) return false;
+			ed.update(() => {
+				if ($isNodeSelection($getSelection())) $setSelection(null);
+			});
+			return true;
+		}, COMMAND_PRIORITY_HIGH), ed.registerUpdateListener(({ editorState }) => {
+			editorState.read(() => {
+				const selection = $getSelection();
+				selectedKey = $isNodeSelection(selection) ? selection.getNodes().find($isImageNode)?.getKey() ?? null : null;
+			});
+			syncSelectionClass(ed);
+		}));
+		const root = ed.getRootElement();
+		if (!root) return;
+		const onPointerDown = (event) => {
+			if (!canEdit() || event.button !== 0) return;
+			const wrapper = (event.target.closest?.(HANDLE_SELECTOR))?.closest(WRAP_SELECTOR);
+			const img = wrapper?.querySelector("img");
+			if (!wrapper || !img) return;
+			event.preventDefault();
+			const key = wrapper.getAttribute("data-rte-image-key");
+			const style = getComputedStyle(root);
+			const maxWidth = root.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+			const ratio = img.clientHeight / img.clientWidth;
+			const startX = event.clientX;
+			const startWidth = img.clientWidth;
+			try {
+				root.setPointerCapture(event.pointerId);
+			} catch {}
+			const onPointerMove = (moveEvent) => {
+				const width = Math.min(maxWidth, Math.max(MIN_WIDTH, Math.round(startWidth + moveEvent.clientX - startX)));
+				img.style.width = `${width}px`;
+				img.style.height = `${Math.round(width * ratio)}px`;
+			};
+			const finish = (upEvent) => {
+				root.removeEventListener("pointermove", onPointerMove);
+				root.removeEventListener("pointerup", finish);
+				root.removeEventListener("pointercancel", finish);
+				if (root.hasPointerCapture(upEvent.pointerId)) root.releasePointerCapture(upEvent.pointerId);
+				root.addEventListener("click", swallowClick, {
+					capture: true,
+					once: true
+				});
+				setTimeout(() => root.removeEventListener("click", swallowClick, captureOptions), 0);
+				if (!key) return;
+				ed.update(() => {
+					const node = $getNodeByKey(key);
+					if (!$isImageNode(node)) return;
+					node.setWidthAndHeight(img.clientWidth, img.clientHeight);
+					const selection = $createNodeSelection();
+					selection.add(key);
+					$setSelection(selection);
+				});
+			};
+			root.addEventListener("pointermove", onPointerMove);
+			root.addEventListener("pointerup", finish);
+			root.addEventListener("pointercancel", finish);
+		};
+		root.addEventListener("pointerdown", onPointerDown);
+		cleanupFns.push(() => root.removeEventListener("pointerdown", onPointerDown));
+	}
+	watch(editor, (ed) => {
+		if (ed) setup(ed);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		cleanupFns.forEach((fn) => fn());
+		cleanupFns = [];
+		selectedKey = null;
+	});
+}
+//#endregion
+export { useImageResize };
+
+//# sourceMappingURL=use-image-resize.js.map

package/dist/components/rich-text-editor/use-image-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-resize.js","names":[],"sources":["../../../src/components/rich-text-editor/use-image-resize.ts"],"sourcesContent":["import {\n  $createNodeSelection,\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  $setSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_HIGH,\n  KEY_ESCAPE_COMMAND,\n  type LexicalEditor\n} from 'lexical'\nimport { onBeforeUnmount, type ShallowRef, watch } from 'vue'\n\nimport { $isImageNode } from './image-node'\n\nconst WRAP_SELECTOR = '[data-rte-image-key]'\nconst HANDLE_SELECTOR = '.u-rte-image-resizer'\nconst MIN_WIDTH = 24\n\nconst captureOptions = { capture: true } as AddEventListenerOptions\n\nfunction swallowClick(event: Event): void {\n  event.preventDefault()\n  event.stopPropagation()\n}\n\n/**\n * 图片选中与拖拽缩放（参考 Lexical playground ImagesPlugin / ImageResizer）：\n * - 点击图片设置 NodeSelection 并标记选中态（wrapper 加 is-selected）\n * - 拖拽右下角手柄等比缩放，实时改写 img 内联尺寸，松手时写入节点\n * - Esc 取消选中；Backspace / Delete 删除走 Lexical 原生 NodeSelection 通路\n * 选中态在每次 editor 更新后重放，避免撤销 / 内容重设后 class 失效。\n */\nexport function useImageResize(\n  editor: ShallowRef<LexicalEditor | null>,\n  canEdit: () => boolean\n): void {\n  let selectedKey: string | null = null\n  let cleanupFns: (() => void)[] = []\n\n  function syncSelectionClass(ed: LexicalEditor) {\n    const root = ed.getRootElement()\n    if (!root) return\n    root.querySelectorAll('.u-rte-image-wrap.is-selected').forEach((element) => {\n      element.classList.remove('is-selected')\n    })\n    if (selectedKey) ed.getElementByKey(selectedKey)?.classList.add('is-selected')\n  }\n\n  function setup(ed: LexicalEditor) {\n    cleanupFns.push(\n      ed.registerCommand(\n        CLICK_COMMAND,\n        (event) => {\n          if (!canEdit()) return false\n          const key = (event.target as HTMLElement)\n            .closest?.(WRAP_SELECTOR)\n            ?.getAttribute('data-rte-image-key')\n          if (!key) return false\n          event.preventDefault()\n          ed.update(() => {\n            if (!$isImageNode($getNodeByKey(key))) return\n            const selection = $createNodeSelection()\n            selection.add(key)\n            $setSelection(selection)\n          })\n          return true\n        },\n        COMMAND_PRIORITY_HIGH\n      ),\n      ed.registerCommand(\n        KEY_ESCAPE_COMMAND,\n        () => {\n          if (!selectedKey) return false\n          ed.update(() => {\n            if ($isNodeSelection($getSelection())) $setSelection(null)\n          })\n          return true\n        },\n        COMMAND_PRIORITY_HIGH\n      ),\n      ed.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          const selection = $getSelection()\n          selectedKey = $isNodeSelection(selection)\n            ? (selection.getNodes().find($isImageNode)?.getKey() ?? null)\n            : null\n        })\n        syncSelectionClass(ed)\n      })\n    )\n\n    const root = ed.getRootElement()\n    if (!root) return\n\n    const onPointerDown = (event: PointerEvent) => {\n      if (!canEdit() || event.button !== 0) return\n      const handle = (event.target as HTMLElement).closest?.(HANDLE_SELECTOR)\n      const wrapper = handle?.closest(WRAP_SELECTOR)\n      const img = wrapper?.querySelector('img')\n      if (!wrapper || !img) return\n      event.preventDefault()\n\n      const key = wrapper.getAttribute('data-rte-image-key')\n      const style = getComputedStyle(root)\n      const maxWidth =\n        root.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)\n      const ratio = img.clientHeight / img.clientWidth\n      const startX = event.clientX\n      const startWidth = img.clientWidth\n      // 真实输入下捕获指针保证拖出编辑区仍可跟踪；合成事件（自动化测试）无活跃\n      // 指针，setPointerCapture 会抛 NotFoundError，降级为仅监听 root 内移动\n      try {\n        root.setPointerCapture(event.pointerId)\n      } catch {\n        // ignore\n      }\n\n      const onPointerMove = (moveEvent: PointerEvent) => {\n        const width = Math.min(\n          maxWidth,\n          Math.max(MIN_WIDTH, Math.round(startWidth + moveEvent.clientX - startX))\n        )\n        img.style.width = `${width}px`\n        img.style.height = `${Math.round(width * ratio)}px`\n      }\n      const finish = (upEvent: PointerEvent) => {\n        root.removeEventListener('pointermove', onPointerMove)\n        root.removeEventListener('pointerup', finish)\n        root.removeEventListener('pointercancel', finish)\n        if (root.hasPointerCapture(upEvent.pointerId)) root.releasePointerCapture(upEvent.pointerId)\n        // pointer capture 使松手 target 落在编辑区内，浏览器随派发的 click 会把\n        // 图片选中换成文本光标；吞掉这次拖拽尾随的 click\n        root.addEventListener('click', swallowClick, { capture: true, once: true })\n        setTimeout(() => root.removeEventListener('click', swallowClick, captureOptions), 0)\n        if (!key) return\n        ed.update(() => {\n          const node = $getNodeByKey(key)\n          if (!$isImageNode(node)) return\n          node.setWidthAndHeight(img.clientWidth, img.clientHeight)\n          // 松手后保持图片选中，方便继续微调或删除\n          const selection = $createNodeSelection()\n          selection.add(key)\n          $setSelection(selection)\n        })\n      }\n      root.addEventListener('pointermove', onPointerMove)\n      root.addEventListener('pointerup', finish)\n      root.addEventListener('pointercancel', finish)\n    }\n    root.addEventListener('pointerdown', onPointerDown)\n    cleanupFns.push(() => root.removeEventListener('pointerdown', onPointerDown))\n  }\n\n  watch(\n    editor,\n    (ed) => {\n      if (ed) setup(ed)\n    },\n    { immediate: true }\n  )\n\n  onBeforeUnmount(() => {\n    cleanupFns.forEach((fn) => fn())\n    cleanupFns = []\n    selectedKey = null\n  })\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

package/src/components/rich-text-editor/__test__/image-node.test.ts

@@ -0,0 +1,140 @@
+import { createEditor, type LexicalEditor } from 'lexical'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+
+import { $createImageNode, $isImageNode, ImageNode } from '../image-node'
+
+let editor: LexicalEditor
+let container: HTMLDivElement
+
+beforeAll(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  editor = createEditor({
+    namespace: 'test',
+    nodes: [ImageNode],
+    onError: (error) => {
+      throw error
+    }
+  })
+  editor.setRootElement(container)
+})
+
+afterAll(() => {
+  editor.setRootElement(null)
+  container.remove()
+})
+
+function createImage(options: { src?: string; width?: number; height?: number } = {}) {
+  return $createImageNode({
+    src: options.src ?? 'https://cdn.example.com/a.png',
+    alt: '示例图',
+    width: options.width,
+    height: options.height
+  })
+}
+
+/** 节点构造与写方法要求可写上下文（Lexical 0.50 在 read 回调内禁止 new 节点） */
+function inUpdate<T>(fn: () => T): T {
+  let result!: T
+  editor.update(() => {
+    result = fn()
+  })
+  return result
+}
+
+describe('ImageNode', () => {
+  it('createDOM 返回 wrapper + img + 缩放手柄，未设置尺寸时无内联宽高', () => {
+    const { wrapper, key } = inUpdate(() => {
+      const node = createImage()
+      return { wrapper: node.createDOM(), key: node.getKey() }
+    })
+
+    expect(wrapper.className).toBe('u-rte-image-wrap')
+    expect(wrapper.getAttribute('data-rte-image-key')).toBe(key)
+
+    const img = wrapper.querySelector('img')
+    expect(img?.className).toBe('u-rte-image')
+    expect(img?.getAttribute('src')).toBe('https://cdn.example.com/a.png')
+    expect(img?.getAttribute('alt')).toBe('示例图')
+    expect(img?.style.width).toBe('')
+    expect(img?.style.height).toBe('')
+
+    expect(wrapper.querySelector('.u-rte-image-resizer')).not.toBeNull()
+  })
+
+  it('createDOM 应用节点上的显示尺寸', () => {
+    const img = inUpdate(() =>
+      createImage({ width: 320, height: 180 }).createDOM().querySelector('img')!
+    )
+
+    expect(img.style.width).toBe('320px')
+    expect(img.style.height).toBe('180px')
+  })
+
+  it('updateDOM 在尺寸变化时同步 img 内联样式', () => {
+    const { img } = inUpdate(() => {
+      const node = createImage({ width: 320, height: 180 })
+      const wrapper = node.createDOM()
+      const resized = createImage({ width: 480, height: 270 })
+      resized.updateDOM(node, wrapper)
+      return { img: wrapper.querySelector('img')! }
+    })
+
+    expect(img.style.width).toBe('480px')
+    expect(img.style.height).toBe('270px')
+  })
+
+  it('exportDOM 仅在设置尺寸时输出 width / height 属性', () => {
+    const { sizedEl, unsizedEl } = inUpdate(() => ({
+      sizedEl: createImage({ width: 480, height: 270 }).exportDOM().element as HTMLImageElement,
+      unsizedEl: createImage().exportDOM().element as HTMLImageElement
+    }))
+
+    expect(sizedEl.getAttribute('width')).toBe('480')
+    expect(sizedEl.getAttribute('height')).toBe('270')
+    expect(sizedEl.className).toBe('u-rte-image')
+
+    expect(unsizedEl.hasAttribute('width')).toBe(false)
+    expect(unsizedEl.hasAttribute('height')).toBe(false)
+  })
+
+  it('importDOM 读取 img 的 width / height 属性，缺失时为 0', () => {
+    const { sized, unsized } = inUpdate(() => {
+      const conversion = ImageNode.importDOM()!.img().conversion
+      const dom = document.createElement('img')
+      dom.setAttribute('src', 'https://cdn.example.com/a.png')
+      dom.setAttribute('width', '640')
+      dom.setAttribute('height', '360')
+
+      const noSizeDom = document.createElement('img')
+      noSizeDom.setAttribute('src', 'https://cdn.example.com/b.png')
+
+      return { sized: conversion(dom).node, unsized: conversion(noSizeDom).node }
+    })
+
+    expect($isImageNode(sized)).toBe(true)
+    expect(sized!.exportJSON()).toMatchObject({
+      src: 'https://cdn.example.com/a.png',
+      width: 640,
+      height: 360
+    })
+    expect(unsized!.exportJSON()).toMatchObject({ width: 0, height: 0 })
+  })
+
+  it('exportJSON / importJSON roundtrip 保留尺寸', () => {
+    const json = inUpdate(() => createImage({ width: 480, height: 270 }).exportJSON())
+
+    const restored = inUpdate(() => ImageNode.importJSON(json).exportJSON())
+    expect(restored).toEqual(json)
+  })
+
+  it('editor update 中 setWidthAndHeight 写入尺寸', () => {
+    const json = inUpdate(() => {
+      const node = createImage()
+      node.setWidthAndHeight(200, 100)
+      return node.exportJSON()
+    })
+
+    expect(json).toMatchObject({ width: 200, height: 100 })
+  })
+})

package/src/components/rich-text-editor/image-node.ts

@@ -18,44 +18,68 @@ function nextImageId(): string {
 }
 
 export interface SerializedImageNode extends Spread<
-  { src: string; alt: string; id: string },
+  { src: string; alt: string; id: string; width: number; height: number },
   SerializedLexicalNode
 > {}
 
 /**
  * 图片节点：插入时 src 为本地 objectURL、__file 持有原始文件，提交前由宿主调用
  * uploadImages 换成服务器地址。__file 不参与序列化，仅会话内有效。
+ * width / height 为显示尺寸（px），0 表示未设置、按图片自然尺寸（受 max-width 约束）。
  * 本仓库为手写 Vue 绑定（无 React 适配层），不走 decorate 渲染管道，
- * createDOM 直接返回 <img> 元素。
+ * createDOM 返回 wrapper：`<span><img><span 手柄/></span>`，选中与拖拽缩放
+ * 由组件层（use-image-resize）基于 data-rte-image-key 驱动。
  */
 export class ImageNode extends DecoratorNode<void> {
   __src: string
   __alt: string
   __id: string
   __file: File | null
+  __width: number
+  __height: number
 
   static override getType(): string {
     return 'u-image'
   }
 
   static override clone(node: ImageNode): ImageNode {
-    return new ImageNode(node.__src, node.__alt, node.__id, node.__file, node.__key)
+    return new ImageNode(
+      node.__src,
+      node.__alt,
+      node.__id,
+      node.__file,
+      node.__width,
+      node.__height,
+      node.__key
+    )
   }
 
   static override importJSON(serializedNode: SerializedImageNode): ImageNode {
     return $createImageNode({
       src: serializedNode.src,
       alt: serializedNode.alt,
-      id: serializedNode.id
+      id: serializedNode.id,
+      width: serializedNode.width,
+      height: serializedNode.height
     })
   }
 
-  constructor(src: string, alt = '', id = nextImageId(), file: File | null = null, key?: NodeKey) {
+  constructor(
+    src: string,
+    alt = '',
+    id = nextImageId(),
+    file: File | null = null,
+    width = 0,
+    height = 0,
+    key?: NodeKey
+  ) {
     super(key)
     this.__src = src
     this.__alt = alt
     this.__id = id
     this.__file = file
+    this.__width = width
+    this.__height = height
   }
 
   static override importDOM(): DOMConversionMap | null {
@@ -68,26 +92,58 @@ export class ImageNode extends DecoratorNode<void> {
     element.setAttribute('class', 'u-rte-image')
     element.setAttribute('alt', this.__alt)
     element.setAttribute('data-rte-image-id', this.__id)
+    if (this.__width) element.setAttribute('width', String(this.__width))
+    if (this.__height) element.setAttribute('height', String(this.__height))
     return { element }
   }
 
   override exportJSON(): SerializedImageNode {
-    return { type: 'u-image', version: 1, src: this.__src, alt: this.__alt, id: this.__id }
+    return {
+      type: 'u-image',
+      version: 1,
+      src: this.__src,
+      alt: this.__alt,
+      id: this.__id,
+      width: this.__width,
+      height: this.__height
+    }
   }
 
   override createDOM(): HTMLElement {
-    const element = document.createElement('img')
-    element.className = 'u-rte-image'
-    element.src = this.__src
-    element.alt = this.__alt
-    element.draggable = false
-    return element
+    const wrapper = document.createElement('span')
+    wrapper.className = 'u-rte-image-wrap'
+    wrapper.contentEditable = 'false'
+    wrapper.setAttribute('data-rte-image-key', this.__key)
+
+    const img = document.createElement('img')
+    img.className = 'u-rte-image'
+    img.src = this.__src
+    img.alt = this.__alt
+    img.draggable = false
+    if (this.__width) img.style.width = `${this.__width}px`
+    if (this.__height) img.style.height = `${this.__height}px`
+
+    const handle = document.createElement('span')
+    handle.className = 'u-rte-image-resizer'
+    handle.setAttribute('aria-hidden', 'true')
+
+    wrapper.append(img, handle)
+    return wrapper
   }
 
   override updateDOM(prevNode: ImageNode, element: HTMLElement): boolean {
-    const img = element as HTMLImageElement
+    const img = element.querySelector('img')
+    if (!img) return false
     if (prevNode.__src !== this.__src) img.src = this.__src
     if (prevNode.__alt !== this.__alt) img.alt = this.__alt
+    if (prevNode.__width !== this.__width) {
+      if (this.__width) img.style.width = `${this.__width}px`
+      else img.style.removeProperty('width')
+    }
+    if (prevNode.__height !== this.__height) {
+      if (this.__height) img.style.height = `${this.__height}px`
+      else img.style.removeProperty('height')
+    }
     return false
   }
 
@@ -110,6 +166,13 @@ export class ImageNode extends DecoratorNode<void> {
     self.__src = src
     self.__file = null
   }
+
+  /** 写入显示尺寸（拖拽缩放结束时调用），px，0 表示恢复自然尺寸 */
+  setWidthAndHeight(width: number, height: number): void {
+    const self = this.getWritable()
+    self.__width = width
+    self.__height = height
+  }
 }
 
 function convertImageElement(domNode: HTMLElement): DOMConversionOutput {
@@ -119,7 +182,9 @@ function convertImageElement(domNode: HTMLElement): DOMConversionOutput {
     node: $createImageNode({
       src,
       alt: domNode.getAttribute('alt') ?? '',
-      id: domNode.getAttribute('data-rte-image-id') ?? undefined
+      id: domNode.getAttribute('data-rte-image-id') ?? undefined,
+      width: parseInt(domNode.getAttribute('width') ?? '') || 0,
+      height: parseInt(domNode.getAttribute('height') ?? '') || 0
     })
   }
 }
@@ -129,12 +194,16 @@ export function $createImageNode(options: {
   alt?: string
   id?: string
   file?: File | null
+  width?: number
+  height?: number
 }): ImageNode {
   return new ImageNode(
     options.src,
     options.alt ?? '',
     options.id ?? nextImageId(),
-    options.file ?? null
+    options.file ?? null,
+    options.width ?? 0,
+    options.height ?? 0
   )
 }
 

package/src/components/rich-text-editor/rich-text-editor.vue

@@ -88,6 +88,8 @@ import {
   $getRoot,
   $createParagraphNode,
   $nodesOfType,
+  $getSelection,
+  $isNodeSelection,
   $setSelection,
   COMMAND_PRIORITY_HIGH,
   DROP_COMMAND,
@@ -110,6 +112,7 @@ import {
   revokeImageObjectUrls
 } from './image-node'
 import Toolbar from './toolbar.vue'
+import { useImageResize } from './use-image-resize'
 
 const props = withDefaults(defineProps<RichTextEditorProps>(), {
   disabled: undefined,
@@ -151,6 +154,11 @@ const showPlaceholder = ref(true)
 let isComposing = false
 let cleanupFns: (() => void)[] = []
 
+const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value
+
+// 图片选中 / 拖拽缩放交互
+useImageResize(editor, acceptsImage)
+
 function initEditor() {
   if (!editorContainer.value) return
 
@@ -172,8 +180,6 @@ function initEditor() {
   cleanupFns.push(registerHistory(editorInstance, createEmptyHistoryState(), 300))
 
   // Image input: paste & drop
-  const acceptsImage = () => props.image && !isDisabled.value && !isReadonly.value
-
   cleanupFns.push(
     editorInstance.registerCommand(
       PASTE_COMMAND,
@@ -353,8 +359,13 @@ watch(model, (newVal) => {
 
 // Watch disabled/readonly changes
 watch([isDisabled, isReadonly], () => {
-  if (editor.value) {
-    editor.value.setEditable(!isDisabled.value && !isReadonly.value)
+  if (!editor.value) return
+  editor.value.setEditable(!isDisabled.value && !isReadonly.value)
+  if (isDisabled.value || isReadonly.value) {
+    // 切出可编辑态时取消可能残留的图片选中
+    editor.value.update(() => {
+      if ($isNodeSelection($getSelection())) $setSelection(null)
+    })
   }
 })
 

package/src/components/rich-text-editor/style.scss

@@ -388,3 +388,38 @@ $root-name: rich-text-editor;
   height: auto;
   vertical-align: bottom;
 }
+
+// 编辑器内图片 wrapper：承载选中态描边与缩放手柄（宿主直接渲染导出 HTML 时无此结构）
+.u-rte-image-wrap {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+  line-height: 0;
+
+  .u-rte-image {
+    display: block;
+  }
+
+  &.is-selected .u-rte-image {
+    outline: 2px solid fn.use-var(color, primary);
+    border-radius: 2px;
+  }
+}
+
+.u-rte-image-resizer {
+  position: absolute;
+  right: -5px;
+  bottom: -5px;
+  display: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: fn.use-var(bg-color, top);
+  border: 2px solid fn.use-var(color, primary);
+  cursor: nwse-resize;
+
+  .u-rte-image-wrap.is-selected & {
+    display: block;
+  }
+}

package/src/components/rich-text-editor/use-image-resize.ts

@@ -0,0 +1,168 @@
+import {
+  $createNodeSelection,
+  $getNodeByKey,
+  $getSelection,
+  $isNodeSelection,
+  $setSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_HIGH,
+  KEY_ESCAPE_COMMAND,
+  type LexicalEditor
+} from 'lexical'
+import { onBeforeUnmount, type ShallowRef, watch } from 'vue'
+
+import { $isImageNode } from './image-node'
+
+const WRAP_SELECTOR = '[data-rte-image-key]'
+const HANDLE_SELECTOR = '.u-rte-image-resizer'
+const MIN_WIDTH = 24
+
+const captureOptions = { capture: true } as AddEventListenerOptions
+
+function swallowClick(event: Event): void {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+/**
+ * 图片选中与拖拽缩放（参考 Lexical playground ImagesPlugin / ImageResizer）：
+ * - 点击图片设置 NodeSelection 并标记选中态（wrapper 加 is-selected）
+ * - 拖拽右下角手柄等比缩放，实时改写 img 内联尺寸，松手时写入节点
+ * - Esc 取消选中；Backspace / Delete 删除走 Lexical 原生 NodeSelection 通路
+ * 选中态在每次 editor 更新后重放，避免撤销 / 内容重设后 class 失效。
+ */
+export function useImageResize(
+  editor: ShallowRef<LexicalEditor | null>,
+  canEdit: () => boolean
+): void {
+  let selectedKey: string | null = null
+  let cleanupFns: (() => void)[] = []
+
+  function syncSelectionClass(ed: LexicalEditor) {
+    const root = ed.getRootElement()
+    if (!root) return
+    root.querySelectorAll('.u-rte-image-wrap.is-selected').forEach((element) => {
+      element.classList.remove('is-selected')
+    })
+    if (selectedKey) ed.getElementByKey(selectedKey)?.classList.add('is-selected')
+  }
+
+  function setup(ed: LexicalEditor) {
+    cleanupFns.push(
+      ed.registerCommand(
+        CLICK_COMMAND,
+        (event) => {
+          if (!canEdit()) return false
+          const key = (event.target as HTMLElement)
+            .closest?.(WRAP_SELECTOR)
+            ?.getAttribute('data-rte-image-key')
+          if (!key) return false
+          event.preventDefault()
+          ed.update(() => {
+            if (!$isImageNode($getNodeByKey(key))) return
+            const selection = $createNodeSelection()
+            selection.add(key)
+            $setSelection(selection)
+          })
+          return true
+        },
+        COMMAND_PRIORITY_HIGH
+      ),
+      ed.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        () => {
+          if (!selectedKey) return false
+          ed.update(() => {
+            if ($isNodeSelection($getSelection())) $setSelection(null)
+          })
+          return true
+        },
+        COMMAND_PRIORITY_HIGH
+      ),
+      ed.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          const selection = $getSelection()
+          selectedKey = $isNodeSelection(selection)
+            ? (selection.getNodes().find($isImageNode)?.getKey() ?? null)
+            : null
+        })
+        syncSelectionClass(ed)
+      })
+    )
+
+    const root = ed.getRootElement()
+    if (!root) return
+
+    const onPointerDown = (event: PointerEvent) => {
+      if (!canEdit() || event.button !== 0) return
+      const handle = (event.target as HTMLElement).closest?.(HANDLE_SELECTOR)
+      const wrapper = handle?.closest(WRAP_SELECTOR)
+      const img = wrapper?.querySelector('img')
+      if (!wrapper || !img) return
+      event.preventDefault()
+
+      const key = wrapper.getAttribute('data-rte-image-key')
+      const style = getComputedStyle(root)
+      const maxWidth =
+        root.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)
+      const ratio = img.clientHeight / img.clientWidth
+      const startX = event.clientX
+      const startWidth = img.clientWidth
+      // 真实输入下捕获指针保证拖出编辑区仍可跟踪；合成事件（自动化测试）无活跃
+      // 指针，setPointerCapture 会抛 NotFoundError，降级为仅监听 root 内移动
+      try {
+        root.setPointerCapture(event.pointerId)
+      } catch {
+        // ignore
+      }
+
+      const onPointerMove = (moveEvent: PointerEvent) => {
+        const width = Math.min(
+          maxWidth,
+          Math.max(MIN_WIDTH, Math.round(startWidth + moveEvent.clientX - startX))
+        )
+        img.style.width = `${width}px`
+        img.style.height = `${Math.round(width * ratio)}px`
+      }
+      const finish = (upEvent: PointerEvent) => {
+        root.removeEventListener('pointermove', onPointerMove)
+        root.removeEventListener('pointerup', finish)
+        root.removeEventListener('pointercancel', finish)
+        if (root.hasPointerCapture(upEvent.pointerId)) root.releasePointerCapture(upEvent.pointerId)
+        // pointer capture 使松手 target 落在编辑区内，浏览器随派发的 click 会把
+        // 图片选中换成文本光标；吞掉这次拖拽尾随的 click
+        root.addEventListener('click', swallowClick, { capture: true, once: true })
+        setTimeout(() => root.removeEventListener('click', swallowClick, captureOptions), 0)
+        if (!key) return
+        ed.update(() => {
+          const node = $getNodeByKey(key)
+          if (!$isImageNode(node)) return
+          node.setWidthAndHeight(img.clientWidth, img.clientHeight)
+          // 松手后保持图片选中，方便继续微调或删除
+          const selection = $createNodeSelection()
+          selection.add(key)
+          $setSelection(selection)
+        })
+      }
+      root.addEventListener('pointermove', onPointerMove)
+      root.addEventListener('pointerup', finish)
+      root.addEventListener('pointercancel', finish)
+    }
+    root.addEventListener('pointerdown', onPointerDown)
+    cleanupFns.push(() => root.removeEventListener('pointerdown', onPointerDown))
+  }
+
+  watch(
+    editor,
+    (ed) => {
+      if (ed) setup(ed)
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    cleanupFns.forEach((fn) => fn())
+    cleanupFns = []
+    selectedKey = null
+  })
+}