@orion-studios/payload-studio 0.6.0-beta.70 → 0.6.0-beta.72

package/dist/builder-v2/client.js

@@ -175,7 +175,7 @@ var normalizeBuilderV2ProjectData = (value, fallbackTitle = "Untitled Page") =>
 };
 
 // src/builder-v2/runtime/placeholders.ts
-var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>(?<content>.*?)<\/\k<tag>>/gis;
+var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>/gis;
 var attrPattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)=(?:"([^"]*)"|'([^']*)')/g;
 var decodeHtmlAttribute = (value) => value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
 var parseAttributes = (value) => {
@@ -208,9 +208,19 @@ var parseAttributes = (value) => {
   return props;
 };
 var extractAttribute = (attrs, name) => {
-  const pattern = new RegExp(`${name}=["']([^"']+)["']`, "i");
-  const match = attrs.match(pattern);
-  return match ? decodeHtmlAttribute(match[1]) : null;
+  attrPattern.lastIndex = 0;
+  let match;
+  while ((match = attrPattern.exec(attrs)) !== null) {
+    if (match[1] === name) {
+      return decodeHtmlAttribute(match[2] ?? match[3] ?? "");
+    }
+  }
+  return null;
+};
+var extractWrapperAttributes = (attrs) => {
+  const id = extractAttribute(attrs, "id") || void 0;
+  const className = extractAttribute(attrs, "class") || void 0;
+  return id || className ? { className, id } : void 0;
 };
 var parseBuilderV2DynamicComponents = (html) => {
   const instances = [];
@@ -224,7 +234,8 @@ var parseBuilderV2DynamicComponents = (html) => {
     instances.push({
       component,
       id: extractAttribute(attrs, "data-orion-id") || `component-${instances.length + 1}`,
-      props: parseAttributes(attrs)
+      props: parseAttributes(attrs),
+      wrapperAttributes: extractWrapperAttributes(attrs)
     });
   }
   return instances;

package/dist/builder-v2/client.mjs

@@ -51,7 +51,7 @@ var normalizeBuilderV2ProjectData = (value, fallbackTitle = "Untitled Page") =>
 };
 
 // src/builder-v2/runtime/placeholders.ts
-var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>(?<content>.*?)<\/\k<tag>>/gis;
+var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>/gis;
 var attrPattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)=(?:"([^"]*)"|'([^']*)')/g;
 var decodeHtmlAttribute = (value) => value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
 var parseAttributes = (value) => {
@@ -84,9 +84,19 @@ var parseAttributes = (value) => {
   return props;
 };
 var extractAttribute = (attrs, name) => {
-  const pattern = new RegExp(`${name}=["']([^"']+)["']`, "i");
-  const match = attrs.match(pattern);
-  return match ? decodeHtmlAttribute(match[1]) : null;
+  attrPattern.lastIndex = 0;
+  let match;
+  while ((match = attrPattern.exec(attrs)) !== null) {
+    if (match[1] === name) {
+      return decodeHtmlAttribute(match[2] ?? match[3] ?? "");
+    }
+  }
+  return null;
+};
+var extractWrapperAttributes = (attrs) => {
+  const id = extractAttribute(attrs, "id") || void 0;
+  const className = extractAttribute(attrs, "class") || void 0;
+  return id || className ? { className, id } : void 0;
 };
 var parseBuilderV2DynamicComponents = (html) => {
   const instances = [];
@@ -100,7 +110,8 @@ var parseBuilderV2DynamicComponents = (html) => {
     instances.push({
       component,
       id: extractAttribute(attrs, "data-orion-id") || `component-${instances.length + 1}`,
-      props: parseAttributes(attrs)
+      props: parseAttributes(attrs),
+      wrapperAttributes: extractWrapperAttributes(attrs)
     });
   }
   return instances;

package/dist/builder-v2/index.d.mts

@@ -103,6 +103,10 @@ type BuilderV2DynamicComponentInstance = {
     component: string;
     id: string;
     props: Record<string, unknown>;
+    wrapperAttributes?: {
+        className?: string;
+        id?: string;
+    };
 };
 type BuilderV2RuntimeComponentProps = {
     instance: BuilderV2DynamicComponentInstance;

package/dist/builder-v2/index.d.ts

@@ -103,6 +103,10 @@ type BuilderV2DynamicComponentInstance = {
     component: string;
     id: string;
     props: Record<string, unknown>;
+    wrapperAttributes?: {
+        className?: string;
+        id?: string;
+    };
 };
 type BuilderV2RuntimeComponentProps = {
     instance: BuilderV2DynamicComponentInstance;

package/dist/builder-v2/index.js

@@ -185,7 +185,7 @@ var appendBuilderV2PageFields = (fields, options) => [
 ];
 
 // src/builder-v2/runtime/placeholders.ts
-var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>(?<content>.*?)<\/\k<tag>>/gis;
+var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>/gis;
 var attrPattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)=(?:"([^"]*)"|'([^']*)')/g;
 var decodeHtmlAttribute = (value) => value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
 var parseAttributes = (value) => {
@@ -218,9 +218,39 @@ var parseAttributes = (value) => {
   return props;
 };
 var extractAttribute = (attrs, name) => {
-  const pattern = new RegExp(`${name}=["']([^"']+)["']`, "i");
-  const match = attrs.match(pattern);
-  return match ? decodeHtmlAttribute(match[1]) : null;
+  attrPattern.lastIndex = 0;
+  let match;
+  while ((match = attrPattern.exec(attrs)) !== null) {
+    if (match[1] === name) {
+      return decodeHtmlAttribute(match[2] ?? match[3] ?? "");
+    }
+  }
+  return null;
+};
+var extractWrapperAttributes = (attrs) => {
+  const id = extractAttribute(attrs, "id") || void 0;
+  const className = extractAttribute(attrs, "class") || void 0;
+  return id || className ? { className, id } : void 0;
+};
+var findPlaceholderEnd = (html, tag, startIndex) => {
+  const tagPattern = new RegExp(`<\\/?${tag}\\b[^>]*>`, "gi");
+  tagPattern.lastIndex = startIndex;
+  let depth = 1;
+  let match;
+  while ((match = tagPattern.exec(html)) !== null) {
+    const token = match[0];
+    const isClosing = token.startsWith("</");
+    const isSelfClosing = /\/\s*>$/.test(token);
+    if (isClosing) {
+      depth -= 1;
+    } else if (!isSelfClosing) {
+      depth += 1;
+    }
+    if (depth === 0) {
+      return tagPattern.lastIndex;
+    }
+  }
+  return startIndex;
 };
 var parseBuilderV2DynamicComponents = (html) => {
   const instances = [];
@@ -234,7 +264,8 @@ var parseBuilderV2DynamicComponents = (html) => {
     instances.push({
       component,
       id: extractAttribute(attrs, "data-orion-id") || `component-${instances.length + 1}`,
-      props: parseAttributes(attrs)
+      props: parseAttributes(attrs),
+      wrapperAttributes: extractWrapperAttributes(attrs)
     });
   }
   return instances;
@@ -251,16 +282,20 @@ var splitBuilderV2HtmlIntoChunks = (html) => {
     }
     const attrs = `${match.groups?.attrs ?? ""} ${match.groups?.rest ?? ""}`;
     const component = match.groups?.component ?? "";
+    const tag = match.groups?.tag ?? "";
+    const placeholderEnd = tag ? findPlaceholderEnd(html, tag, placeholderPattern.lastIndex) : placeholderPattern.lastIndex;
     chunks.push({
       instance: {
         component,
         id: extractAttribute(attrs, "data-orion-id") || `component-${componentIndex + 1}`,
-        props: parseAttributes(attrs)
+        props: parseAttributes(attrs),
+        wrapperAttributes: extractWrapperAttributes(attrs)
       },
       kind: "component"
     });
     componentIndex += 1;
-    lastIndex = match.index + match[0].length;
+    lastIndex = placeholderEnd;
+    placeholderPattern.lastIndex = placeholderEnd;
   }
   const after = html.slice(lastIndex);
   if (after.length > 0) {
@@ -710,7 +745,20 @@ function BuilderPageRuntime({ adapter, className, page }) {
           `component-${chunk.instance.id}-${index}`
         );
       }
-      return (0, import_react.createElement)(import_react.Fragment, { key: `component-${chunk.instance.id}-${index}` }, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { instance: chunk.instance, page }));
+      const renderedComponent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { instance: chunk.instance, page });
+      const wrapperAttributes = chunk.instance.wrapperAttributes;
+      if (wrapperAttributes?.id || wrapperAttributes?.className) {
+        return (0, import_react.createElement)(
+          "div",
+          {
+            className: wrapperAttributes.className,
+            id: wrapperAttributes.id,
+            key: `component-${chunk.instance.id}-${index}`
+          },
+          renderedComponent
+        );
+      }
+      return (0, import_react.createElement)(import_react.Fragment, { key: `component-${chunk.instance.id}-${index}` }, renderedComponent);
     })
   ] });
 }

package/dist/builder-v2/index.mjs

@@ -136,7 +136,7 @@ var appendBuilderV2PageFields = (fields, options) => [
 ];
 
 // src/builder-v2/runtime/placeholders.ts
-var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>(?<content>.*?)<\/\k<tag>>/gis;
+var placeholderPattern = /<(?<tag>[a-zA-Z][a-zA-Z0-9-]*)\b(?<attrs>[^>]*)data-orion-component=["'](?<component>[^"']+)["'](?<rest>[^>]*)>/gis;
 var attrPattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)=(?:"([^"]*)"|'([^']*)')/g;
 var decodeHtmlAttribute = (value) => value.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
 var parseAttributes = (value) => {
@@ -169,9 +169,39 @@ var parseAttributes = (value) => {
   return props;
 };
 var extractAttribute = (attrs, name) => {
-  const pattern = new RegExp(`${name}=["']([^"']+)["']`, "i");
-  const match = attrs.match(pattern);
-  return match ? decodeHtmlAttribute(match[1]) : null;
+  attrPattern.lastIndex = 0;
+  let match;
+  while ((match = attrPattern.exec(attrs)) !== null) {
+    if (match[1] === name) {
+      return decodeHtmlAttribute(match[2] ?? match[3] ?? "");
+    }
+  }
+  return null;
+};
+var extractWrapperAttributes = (attrs) => {
+  const id = extractAttribute(attrs, "id") || void 0;
+  const className = extractAttribute(attrs, "class") || void 0;
+  return id || className ? { className, id } : void 0;
+};
+var findPlaceholderEnd = (html, tag, startIndex) => {
+  const tagPattern = new RegExp(`<\\/?${tag}\\b[^>]*>`, "gi");
+  tagPattern.lastIndex = startIndex;
+  let depth = 1;
+  let match;
+  while ((match = tagPattern.exec(html)) !== null) {
+    const token = match[0];
+    const isClosing = token.startsWith("</");
+    const isSelfClosing = /\/\s*>$/.test(token);
+    if (isClosing) {
+      depth -= 1;
+    } else if (!isSelfClosing) {
+      depth += 1;
+    }
+    if (depth === 0) {
+      return tagPattern.lastIndex;
+    }
+  }
+  return startIndex;
 };
 var parseBuilderV2DynamicComponents = (html) => {
   const instances = [];
@@ -185,7 +215,8 @@ var parseBuilderV2DynamicComponents = (html) => {
     instances.push({
       component,
       id: extractAttribute(attrs, "data-orion-id") || `component-${instances.length + 1}`,
-      props: parseAttributes(attrs)
+      props: parseAttributes(attrs),
+      wrapperAttributes: extractWrapperAttributes(attrs)
     });
   }
   return instances;
@@ -202,16 +233,20 @@ var splitBuilderV2HtmlIntoChunks = (html) => {
     }
     const attrs = `${match.groups?.attrs ?? ""} ${match.groups?.rest ?? ""}`;
     const component = match.groups?.component ?? "";
+    const tag = match.groups?.tag ?? "";
+    const placeholderEnd = tag ? findPlaceholderEnd(html, tag, placeholderPattern.lastIndex) : placeholderPattern.lastIndex;
     chunks.push({
       instance: {
         component,
         id: extractAttribute(attrs, "data-orion-id") || `component-${componentIndex + 1}`,
-        props: parseAttributes(attrs)
+        props: parseAttributes(attrs),
+        wrapperAttributes: extractWrapperAttributes(attrs)
       },
       kind: "component"
     });
     componentIndex += 1;
-    lastIndex = match.index + match[0].length;
+    lastIndex = placeholderEnd;
+    placeholderPattern.lastIndex = placeholderEnd;
   }
   const after = html.slice(lastIndex);
   if (after.length > 0) {
@@ -661,7 +696,20 @@ function BuilderPageRuntime({ adapter, className, page }) {
           `component-${chunk.instance.id}-${index}`
         );
       }
-      return createElement(Fragment, { key: `component-${chunk.instance.id}-${index}` }, /* @__PURE__ */ jsx(Component, { instance: chunk.instance, page }));
+      const renderedComponent = /* @__PURE__ */ jsx(Component, { instance: chunk.instance, page });
+      const wrapperAttributes = chunk.instance.wrapperAttributes;
+      if (wrapperAttributes?.id || wrapperAttributes?.className) {
+        return createElement(
+          "div",
+          {
+            className: wrapperAttributes.className,
+            id: wrapperAttributes.id,
+            key: `component-${chunk.instance.id}-${index}`
+          },
+          renderedComponent
+        );
+      }
+      return createElement(Fragment, { key: `component-${chunk.instance.id}-${index}` }, renderedComponent);
     })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.70",
+  "version": "0.6.0-beta.72",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",