@mce/psd 0.24.4

package/dist/convert.d.ts

@@ -0,0 +1,30 @@
+/**
+ * PSD → mce 元素的纯转换逻辑（不依赖编辑器 / DOM，便于单测）。
+ *
+ * 把 PSD 的图层树展平为图片元素（坐标为 PSD 绝对坐标），整体包进一个 Frame 画板。
+ * 图层位图如何变成可用 URL 由 `resolveImage` 注入（插件层用 editor.upload，
+ * 测试用桩函数）。隐藏图层跳过；组只递归不产出自身节点。
+ */
+export interface PsdLayerLike {
+    name?: string;
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    opacity?: number;
+    hidden?: boolean;
+    canvas?: {
+        width: number;
+        height: number;
+    };
+    children?: PsdLayerLike[];
+}
+export interface PsdLike {
+    name?: string;
+    width: number;
+    height: number;
+    children?: PsdLayerLike[];
+}
+/** 把一个图层位图解析为 mce 可用的 foreground 来源（URL / blob 等）。 */
+export type ResolveLayerImage = (canvas: NonNullable<PsdLayerLike['canvas']>, layer: PsdLayerLike) => Promise<any>;
+export declare function psdToFrame(psd: PsdLike, resolveImage: ResolveLayerImage, name?: string): Promise<any>;

package/dist/convert.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { plugin } from './plugin';
+export * from './convert';
+export * from './plugin';
+export default plugin;

package/dist/index.js

@@ -0,0 +1,86 @@
+import { definePlugin } from "mce";
+//#region src/convert.ts
+async function psdToFrame(psd, resolveImage, name) {
+	const children = [];
+	async function walk(layers) {
+		for (const layer of layers ?? []) {
+			if (layer.hidden) continue;
+			if (layer.children?.length) {
+				await walk(layer.children);
+				continue;
+			}
+			const canvas = layer.canvas;
+			const width = canvas?.width ?? (layer.right ?? 0) - (layer.left ?? 0);
+			const height = canvas?.height ?? (layer.bottom ?? 0) - (layer.top ?? 0);
+			if (!canvas || width <= 0 || height <= 0) continue;
+			const foreground = await resolveImage(canvas, layer);
+			children.push({
+				name: layer.name || "Layer",
+				foreground,
+				style: {
+					left: layer.left ?? 0,
+					top: layer.top ?? 0,
+					width,
+					height,
+					opacity: layer.opacity ?? 1
+				},
+				meta: { inCanvasIs: "Element2D" }
+			});
+		}
+	}
+	await walk(psd.children);
+	return {
+		name: name ?? psd.name ?? "PSD",
+		style: {
+			left: 0,
+			top: 0,
+			width: psd.width,
+			height: psd.height
+		},
+		meta: {
+			inCanvasIs: "Element2D",
+			inEditorIs: "Frame"
+		},
+		children
+	};
+}
+//#endregion
+//#region src/plugin.ts
+var PSD_RE = /\.psd$/i;
+function canvasToBlob(canvas) {
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("PSD layer canvas.toBlob failed")), "image/png");
+	});
+}
+function plugin() {
+	return definePlugin((editor) => {
+		const { upload, log } = editor;
+		return {
+			name: "mce:psd",
+			messages: {
+				en: { "load:psd": "Import PSD" },
+				zhHans: { "load:psd": "导入 PSD" }
+			},
+			loaders: [{
+				name: "psd",
+				accept: ".psd",
+				test: (source) => {
+					if (source instanceof File) return PSD_RE.test(source.name);
+					if (source instanceof Blob) return source.type === "image/vnd.adobe.photoshop" || source.type === "application/x-photoshop";
+					return false;
+				},
+				load: async (source) => {
+					const { readPsd } = await import("ag-psd");
+					const frame = await psdToFrame(readPsd(await source.arrayBuffer(), { useImageData: false }), async (canvas, layer) => upload(new File([await canvasToBlob(canvas)], `${layer.name || "layer"}.png`, { type: "image/png" })), source.name);
+					log?.("load psd", `${frame.children?.length ?? 0} layers`);
+					return frame;
+				}
+			}]
+		};
+	});
+}
+//#endregion
+//#region src/index.ts
+var src_default = plugin;
+//#endregion
+export { src_default as default, plugin, psdToFrame };

package/dist/plugin.d.ts

@@ -0,0 +1 @@
+export declare function plugin(): import("mce").Plugin;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@mce/psd",
+  "type": "module",
+  "version": "0.24.4",
+  "description": "PSD (Photoshop) import plugin for mce",
+  "author": "wxm",
+  "license": "MIT",
+  "homepage": "https://github.com/qq15725/mce",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qq15725/mce.git"
+  },
+  "bugs": {
+    "url": "https://github.com/qq15725/mce/issues"
+  },
+  "keywords": [
+    "mce",
+    "psd",
+    "photoshop",
+    "plugin"
+  ],
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./*.mjs": "./*.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "browser": "./dist/index.js",
+  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "*",
+        "dist/*",
+        "dist/*.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "ag-psd": "^30.2.0"
+  },
+  "devDependencies": {
+    "mce": "0.24.4"
+  },
+  "peerDependencies": {
+    "mce": "^0"
+  },
+  "scripts": {
+    "build:code": "vite build",
+    "build:tsc": "NODE_ENV=production tsc --emitDeclarationOnly --project tsconfig.json",
+    "build": "pnpm build:code && pnpm build:tsc",
+    "test": "vitest run",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit --project tsconfig.json"
+  }
+}