@haklex/rich-renderer-image 0.0.33 → 0.0.35

package/README.md

@@ -1,6 +1,6 @@
 # @haklex/rich-renderer-image
 
-图片渲染器，支持 Thumbhash 模糊占位和灯箱。
+图片渲染器，支持 Thumbhash 模糊占位、灯箱预览和编辑器内图片管理。
 
 ## 安装
 
@@ -17,10 +17,25 @@ export { ImageEditRenderer } from './ImageEditRenderer'
 
 ## 功能
 
-- Thumbhash 模糊占位
+- Thumbhash 模糊占位 + 渐显加载动画
 - 图片灯箱（react-photo-view）
-- 图片说明
-- 加载状态
+- 图片说明（caption）
+- 加载 / 错误状态
+- 编辑模式：替换、元信息编辑、复制、删除、下载
+
+## 架构
+
+```
+ImageRenderer          — 静态渲染（灯箱 + thumbhash）
+ImageEditRenderer      — 编辑模式入口，mode !== 'editor' 时回退到 ImageRenderer
+├── ImageEditContext    — Jotai Provider，管理编辑状态 atoms
+├── ImageEditToolbar   — 悬浮工具栏（元信息 / 替换 / 打开 / 复制 / 下载 / 删除）
+├── EditMetaPopover    — 编辑 src / alt / caption
+├── ReplacePopover     — 替换图片（上传 / URL）
+├── ReplacePanel       — Upload / URL 切换面板
+├── useImageActions    — 所有编辑操作 hooks
+└── atoms              — Jotai atoms（src, loadState, hovering, replace 状态等）
+```
 
 ## 使用
 
@@ -28,21 +43,36 @@ export { ImageEditRenderer } from './ImageEditRenderer'
 import { ImageRenderer } from '@haklex/rich-renderer-image'
 import type { RendererConfig } from '@haklex/rich-editor'
 
+// 静态渲染
 const config: RendererConfig = {
   Image: ImageRenderer,
 }
-```
 
-## 依赖
+// 编辑模式
+import { ImageEditRenderer } from '@haklex/rich-renderer-image'
 
-```json
-{
-  "@haklex/rich-editor": "workspace:*",
-  "react-photo-view": "^1.2.0",
-  "thumbhash": "^0.1.0"
+const editConfig: RendererConfig = {
+  Image: ImageEditRenderer,
 }
 ```
 
+## 样式
+
+Vanilla Extract CSS-in-TS。所有样式类通过 `semanticClassNames` 导出语义化 class 名，便于外部覆盖。
+
+加载动画：img 初始 `opacity: 0`，加载完成后通过 `imageVisible` class 施加 `opacity: 1` + mask 渐显动画。
+
+## 依赖
+
+| 包 | 用途 |
+|---|------|
+| `@haklex/rich-editor` | 核心类型、节点操作、上传上下文 |
+| `@haklex/rich-editor-ui` | Popover、SegmentedControl |
+| `jotai` | 编辑状态管理 |
+| `lucide-react` | 工具栏图标 |
+| `react-photo-view` | 灯箱 |
+| `thumbhash` | 模糊占位图解码 |
+
 ## License
 
 MIT

package/dist/EditMetaPopover.d.ts

@@ -0,0 +1,2 @@
+export declare function EditMetaPopover(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditMetaPopover.d.ts.map

package/dist/EditMetaPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditMetaPopover.d.ts","sourceRoot":"","sources":["../src/EditMetaPopover.tsx"],"names":[],"mappings":"AAYA,wBAAgB,eAAe,4CA6E9B"}

package/dist/ImageEditContext.d.ts

@@ -0,0 +1,7 @@
+import { ImageRendererProps } from '@haklex/rich-editor';
+import { ReactNode } from 'react';
+export declare function ImageEditProvider({ props, children, }: {
+    props: ImageRendererProps;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageEditContext.d.ts.map

package/dist/ImageEditContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditContext.d.ts","sourceRoot":"","sources":["../src/ImageEditContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAoBtC,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,kBAAkB,CAAA;IACzB,QAAQ,EAAE,SAAS,CAAA;CACpB,2CAsDA"}

package/dist/ImageEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,qBAAqB,CAAA;AA4B5B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}
+{"version":3,"file":"ImageEditRenderer.d.ts","sourceRoot":"","sources":["../src/ImageEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAmB,MAAM,qBAAqB,CAAA;AA2B9E,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}

package/dist/ImageEditToolbar.d.ts

@@ -0,0 +1,2 @@
+export declare function ImageEditToolbar(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageEditToolbar.d.ts.map

package/dist/ImageEditToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditToolbar.d.ts","sourceRoot":"","sources":["../src/ImageEditToolbar.tsx"],"names":[],"mappings":"AAiBA,wBAAgB,gBAAgB,4CA0G/B"}

package/dist/ImageRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../src/ImageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAA;AAuBzD,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CAwF3D,CAAA"}
+{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../src/ImageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAA;AAuBzD,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA2F3D,CAAA"}

package/dist/ReplacePanel.d.ts

@@ -0,0 +1,2 @@
+export declare function ReplacePanel(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReplacePanel.d.ts.map

package/dist/ReplacePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplacePanel.d.ts","sourceRoot":"","sources":["../src/ReplacePanel.tsx"],"names":[],"mappings":"AAqBA,wBAAgB,YAAY,4CAmH3B"}

package/dist/ReplacePopover.d.ts

@@ -0,0 +1,2 @@
+export declare function ReplacePopover(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReplacePopover.d.ts.map

package/dist/ReplacePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplacePopover.d.ts","sourceRoot":"","sources":["../src/ReplacePopover.tsx"],"names":[],"mappings":"AASA,wBAAgB,cAAc,4CAiB7B"}

package/dist/atoms.d.ts

@@ -0,0 +1,80 @@
+import { CSSProperties, RefObject } from 'react';
+export type ImageLoadState = 'loading' | 'loaded' | 'error';
+export type ReplaceMode = 'upload' | 'url';
+export declare const srcAtom: import('jotai').PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const altTextAtom: import('jotai').PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const widthAtom: import('jotai').PrimitiveAtom<number | undefined> & {
+    init: number | undefined;
+};
+export declare const heightAtom: import('jotai').PrimitiveAtom<number | undefined> & {
+    init: number | undefined;
+};
+export declare const captionAtom: import('jotai').PrimitiveAtom<string | undefined> & {
+    init: string | undefined;
+};
+export declare const thumbhashAtom: import('jotai').PrimitiveAtom<string | undefined> & {
+    init: string | undefined;
+};
+export declare const accentAtom: import('jotai').PrimitiveAtom<string | undefined> & {
+    init: string | undefined;
+};
+export declare const loadStateAtom: import('jotai').PrimitiveAtom<ImageLoadState> & {
+    init: ImageLoadState;
+};
+export declare const hoveringAtom: import('jotai').PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const metaOpenAtom: import('jotai').PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const replaceOpenAtom: import('jotai').PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const toolbarVisibleAtom: import('jotai').Atom<boolean>;
+export declare const editSrcAtom: import('jotai').PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const editAltTextAtom: import('jotai').PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const editCaptionAtom: import('jotai').PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const replaceModeAtom: import('jotai').PrimitiveAtom<ReplaceMode> & {
+    init: ReplaceMode;
+};
+export declare const replaceUrlAtom: import('jotai').PrimitiveAtom<string> & {
+    init: string;
+};
+export declare const replacePreviewAtom: import('jotai').PrimitiveAtom<string | null> & {
+    init: string | null;
+};
+export declare const replaceMetaAtom: import('jotai').PrimitiveAtom<{
+    width: number;
+    height: number;
+} | null> & {
+    init: {
+        width: number;
+        height: number;
+    } | null;
+};
+export declare const replaceLoadingAtom: import('jotai').PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const replaceErrorAtom: import('jotai').PrimitiveAtom<string | null> & {
+    init: string | null;
+};
+export declare const wrapperRefAtom: import('jotai').PrimitiveAtom<RefObject<HTMLDivElement | null>> & {
+    init: RefObject<HTMLDivElement | null>;
+};
+export declare const fileInputRefAtom: import('jotai').PrimitiveAtom<RefObject<HTMLInputElement | null>> & {
+    init: RefObject<HTMLInputElement | null>;
+};
+export declare const placeholderUrlAtom: import('jotai').Atom<string | undefined>;
+export declare const captionTextAtom: import('jotai').Atom<string | undefined>;
+export declare const frameStyleAtom: import('jotai').Atom<CSSProperties>;
+//# sourceMappingURL=atoms.d.ts.map

package/dist/atoms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.d.ts","sourceRoot":"","sources":["../src/atoms.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC3D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAA;AAY1C,eAAO,MAAM,OAAO;;CAAW,CAAA;AAC/B,eAAO,MAAM,WAAW;;CAAW,CAAA;AACnC,eAAO,MAAM,SAAS;;CAA6B,CAAA;AACnD,eAAO,MAAM,UAAU;;CAA6B,CAAA;AACpD,eAAO,MAAM,WAAW;;CAA6B,CAAA;AACrD,eAAO,MAAM,aAAa;;CAA6B,CAAA;AACvD,eAAO,MAAM,UAAU;;CAA6B,CAAA;AAGpD,eAAO,MAAM,aAAa;;CAAkC,CAAA;AAC5D,eAAO,MAAM,YAAY;;CAAc,CAAA;AACvC,eAAO,MAAM,YAAY;;CAAc,CAAA;AACvC,eAAO,MAAM,eAAe;;CAAc,CAAA;AAC1C,eAAO,MAAM,kBAAkB,+BAE9B,CAAA;AAGD,eAAO,MAAM,WAAW;;CAAW,CAAA;AACnC,eAAO,MAAM,eAAe;;CAAW,CAAA;AACvC,eAAO,MAAM,eAAe;;CAAW,CAAA;AAGvC,eAAO,MAAM,eAAe;;CAA8B,CAAA;AAC1D,eAAO,MAAM,cAAc;;CAAW,CAAA;AACtC,eAAO,MAAM,kBAAkB;;CAA4B,CAAA;AAC3D,eAAO,MAAM,eAAe;WACnB,MAAM;YACL,MAAM;;;eADP,MAAM;gBACL,MAAM;;CACD,CAAA;AACf,eAAO,MAAM,kBAAkB;;CAAc,CAAA;AAC7C,eAAO,MAAM,gBAAgB;;CAA4B,CAAA;AAGzD,eAAO,MAAM,cAAc;;CAEzB,CAAA;AACF,eAAO,MAAM,gBAAgB;;CAE3B,CAAA;AAGF,eAAO,MAAM,kBAAkB,0CAG7B,CAAA;AAEF,eAAO,MAAM,eAAe,0CAE3B,CAAA;AAED,eAAO,MAAM,cAAc,qCAiBzB,CAAA"}

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { ImageEditRenderer } from './ImageEditRenderer';
 export { ImageRenderer } from './ImageRenderer';
-export { ImageRenderer as default } from './ImageRenderer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}