@ecomcx/ecomweb-theme-sdk 1.25.0 → 1.27.0

package/dist/content.js

@@ -19,7 +19,7 @@ export async function PostContent({ post, content, className }) {
     }
     if (!doc?.blocks?.length)
         return null;
-    const rendered = await renderContent(doc, await contentContext(site, post), (blocks) => applyFilters("post.blocks", blocks, { site, post }, site));
+    const rendered = await renderContent(doc, { ...(await contentContext(site, post)), source: post ? `post:${post.id}` : undefined }, (blocks) => applyFilters("post.blocks", blocks, { site, post }, site));
     return _jsx("div", { className: cx(className ?? "entry-content", "ecx-content"), children: rendered });
 }
 /**
@@ -31,7 +31,7 @@ export async function EditableRegion({ name, data, className, children }) {
     const doc = (await getTemplates().catch(() => null))?.parts[name];
     const site = await getSite();
     const own = doc?.blocks?.length
-        ? _jsx("div", { className: cx(`ecx-region ecx-region-${name}`, "ecx-content", className), children: await renderContent(doc, await contentContext(site, data?.post, data)) })
+        ? _jsx("div", { className: cx(`ecx-region ecx-region-${name}`, "ecx-content", className), children: await renderContent(doc, { ...(await contentContext(site, data?.post, data)), source: `part:${name}` }) })
         : _jsx(_Fragment, { children: children });
     return _jsx(_Fragment, { children: await regionOverride(name, own, site, data) });
 }
@@ -45,9 +45,11 @@ async function regionOverride(name, fallback, site, data) {
 /** Ngữ cảnh vẽ nội dung dùng chung cho bài viết và template khối. */
 export async function contentContext(site, post, data) {
     const t = await getT();
+    // Bản nháp (xem trực tiếp / Trình dựng) không vào cache công khai → được gắn vị trí khối cho khung soạn
+    const markBlocks = await import("next/headers").then(async ({ draftMode }) => (await draftMode()).isEnabled).catch(() => false);
     const blocks = (await getActiveExtensions(site)).flatMap((d) => d.blockTypes ?? []);
     return {
-        site, post, data, blocks,
+        site, post, data, blocks, markBlocks,
         resolve: { shortcode: (name) => findShortcode(name, site), block: (type) => findBlock(type, site) },
         labels: { download: t("file.download"), toc: t("toc.title") },
         boundary: (name, key, el) => _jsx(ExtensionBoundary, { name: name, children: el }, key),

package/dist/dynamic.js

@@ -112,14 +112,14 @@ export async function renderDynamic(node, key, ctx, children) {
             const doc = await ctx.pattern(a.ref);
             if (!doc)
                 return null;
-            return _jsx(Fragment, { children: await renderContent(doc, { ...ctx, partDepth: (ctx.partDepth ?? 0) + 1 }) }, key);
+            return _jsx(Fragment, { children: await renderContent(doc, { ...ctx, partDepth: (ctx.partDepth ?? 0) + 1, source: `pattern:${a.ref}` }) }, key);
         }
         case "templatePart": {
             if (!a.slug || !ctx.parts || (ctx.partDepth ?? 0) >= 4)
                 return null;
             const doc = await ctx.parts(String(a.slug));
             const Tag = (["header", "footer", "aside", "section"].includes(a.tagName) ? a.tagName : "div");
-            const part = doc ? _jsx(Tag, { className: cx("ecx-template-part", `ecx-template-part-${a.slug}`), children: await renderContent(doc, { ...ctx, partDepth: (ctx.partDepth ?? 0) + 1 }) }) : null;
+            const part = doc ? _jsx(Tag, { className: cx("ecx-template-part", `ecx-template-part-${a.slug}`), children: await renderContent(doc, { ...ctx, partDepth: (ctx.partDepth ?? 0) + 1, source: `part:${a.slug}` }) }) : null;
             const el = ctx.region ? await ctx.region(String(a.slug), part) : part;
             return el == null ? null : _jsx(Fragment, { children: el }, key);
         }

package/dist/rich.d.ts

@@ -48,6 +48,14 @@ export interface RenderContext {
         id: string;
         text: string;
     }>;
+    /**
+     * Đang xem bản nháp (Trình dựng / xem trực tiếp): gắn data-ecx-doc + data-ecx-path cho từng khối để khung soạn ở admin
+     * biết người dùng bấm vào khối nào. `source` = tài liệu đang vẽ ("template:single", "part:header", "post:12", "pattern:3").
+     */
+    markBlocks?: boolean;
+    source?: string;
+    /** Khoá của khối richtext đang vẽ — đường dẫn khối = phần khoá sau nó (do renderBlock đặt). */
+    pathRoot?: string;
 }
 type Node = Omit<RichNode, "attrs" | "content" | "marks"> & {
     attrs?: Record<string, any>;

package/dist/rich.js

@@ -152,7 +152,21 @@ function decorate(el, a, key, ctx) {
 async function renderNode(node, key, ctx) {
     const el = await renderNodeInner(node, key, ctx);
     const a = node.attrs;
-    return a && (a.style || a.blockStyle || a.className || a.anchor) ? decorate(el, a, key, ctx) : el;
+    const out = a && (a.style || a.blockStyle || a.className || a.anchor) ? decorate(el, a, key, ctx) : el;
+    return ctx.markBlocks && ctx.source && ctx.pathRoot != null && key.startsWith(ctx.pathRoot + "-") && !UNMARKED.has(node.type)
+        ? markBlock(out, ctx.source, key.slice(ctx.pathRoot.length + 1), key)
+        : out;
+}
+/** Nút không chọn riêng được trong khung soạn (hoặc bọc thêm thẻ sẽ sai cấu trúc HTML: li trong ul, ô trong bảng). */
+const UNMARKED = new Set(["text", "hardBreak", "listItem", "taskItem", "tableRow", "tableCell", "tableHeader"]);
+/** Gắn vị trí khối: thẻ HTML thì thêm thuộc tính, component thì bọc thẻ display:contents (không đổi bố cục). */
+function markBlock(el, source, path, key) {
+    if (el == null || el === false)
+        return el;
+    const attrs = { "data-ecx-doc": source, "data-ecx-path": path };
+    if (isValidElement(el) && typeof el.type === "string")
+        return cloneElement(el, attrs);
+    return _jsx("div", { style: { display: "contents" }, ...attrs, children: el }, key);
 }
 async function renderNodeInner(node, key, ctx) {
     const children = async () => Promise.all((node.content ?? []).map((c, i) => renderNode(c, `${key}-${i}`, ctx)));
@@ -359,7 +373,7 @@ async function renderHtml(html, key, ctx) {
 }
 async function renderBlock(block, key, ctx) {
     switch (block.type) {
-        case "richtext": return block.data ? await renderNode(block.data, key, ctx) : null;
+        case "richtext": return block.data ? await renderNode(block.data, key, ctx.markBlocks ? { ...ctx, pathRoot: key } : ctx) : null;
         case "html": return await renderHtml(String(block.data?.html ?? ""), key, ctx);
         default: {
             const Comp = await ctx.resolve.block(block.type);

package/dist/template-blocks.js

@@ -7,5 +7,5 @@ export default async function BlockTemplate({ data, site, template }) {
     const doc = (await getTemplates()).templates[template];
     if (!doc)
         return null;
-    return _jsx("div", { className: `ecx-template ecx-template-${template} ecx-content`, children: await renderContent(doc, await contentContext(site, data.post, data)) });
+    return _jsx("div", { className: `ecx-template ecx-template-${template} ecx-content`, children: await renderContent(doc, { ...(await contentContext(site, data.post, data)), source: `template:${template}` }) });
 }

package/dist/types.d.ts

@@ -277,6 +277,8 @@ export interface ThemeManifest {
         template?: string;
         locked?: boolean;
     }>;
+    /** Nguồn ngoài website theme cần nạp (CSP): { "style-src": ["https://fonts.googleapis.com"], "font-src": ["https://fonts.gstatic.com"] }. */
+    csp?: Partial<Record<"script-src" | "style-src" | "img-src" | "font-src" | "connect-src" | "frame-src" | "media-src" | "worker-src" | "form-action", string[]>>;
     [key: string]: unknown;
 }
 type Loader<T> = () => Promise<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecomcx/ecomweb-theme-sdk",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "description": "SDK để viết theme và phần frontend của plugin cho Ecomweb",
   "type": "module",
   "main": "./dist/index.js",