@orion-studios/payload-studio 0.6.0-beta.43 → 0.6.0-beta.45

package/dist/builder-v2/index.js

@@ -0,0 +1,449 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/builder-v2/index.ts
+var builder_v2_exports = {};
+__export(builder_v2_exports, {
+  BuilderPageRuntime: () => BuilderPageRuntime,
+  appendBuilderV2PageFields: () => appendBuilderV2PageFields,
+  compileBuilderV2Output: () => compileBuilderV2Output,
+  createBuilderV2PageFields: () => createBuilderV2PageFields,
+  createBuilderV2PageService: () => createBuilderV2PageService,
+  createEmptyBuilderV2ProjectData: () => createEmptyBuilderV2ProjectData,
+  normalizeBuilderV2ProjectData: () => normalizeBuilderV2ProjectData,
+  parseBuilderV2DynamicComponents: () => parseBuilderV2DynamicComponents,
+  sanitizeBuilderCss: () => sanitizeBuilderCss,
+  sanitizeBuilderHtml: () => sanitizeBuilderHtml,
+  splitBuilderV2HtmlIntoChunks: () => splitBuilderV2HtmlIntoChunks,
+  toBuilderV2EditorInitialData: () => toBuilderV2EditorInitialData
+});
+module.exports = __toCommonJS(builder_v2_exports);
+
+// src/builder-v2/payload/builderFields.ts
+var withHiddenAdmin = (field, hidden) => ({
+  ...field,
+  admin: {
+    ...field.admin || {},
+    hidden
+  }
+});
+var createBuilderV2PageFields = (options = {}) => {
+  const hidden = options.hidden ?? true;
+  return [
+    withHiddenAdmin(
+      {
+        name: "builderMode",
+        type: "select",
+        defaultValue: "studio-v1",
+        options: [
+          { label: "Classic Studio Builder", value: "studio-v1" },
+          { label: "Website Builder V2", value: "grapes-v2" }
+        ]
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderProjectData",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderPublishedProjectData",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "compiledHtml",
+        type: "textarea"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "compiledCss",
+        type: "textarea"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderDynamicComponents",
+        type: "json"
+      },
+      hidden
+    ),
+    withHiddenAdmin(
+      {
+        name: "builderValidationIssues",
+        type: "json"
+      },
+      hidden
+    )
+  ];
+};
+var appendBuilderV2PageFields = (fields, options) => [
+  ...fields,
+  ...createBuilderV2PageFields(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 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) => {
+  const props = {};
+  let match;
+  while ((match = attrPattern.exec(value)) !== null) {
+    const name = match[1];
+    const rawValue = match[2] ?? match[3] ?? "";
+    if (!name.startsWith("data-")) {
+      continue;
+    }
+    if (name === "data-orion-component" || name === "data-orion-id") {
+      continue;
+    }
+    const propName = name.replace(/^data-orion-/, "").replace(/^data-/, "").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    props[propName] = decodeHtmlAttribute(rawValue);
+  }
+  return props;
+};
+var extractAttribute = (attrs, name) => {
+  const pattern = new RegExp(`${name}=["']([^"']+)["']`, "i");
+  const match = attrs.match(pattern);
+  return match ? decodeHtmlAttribute(match[1]) : null;
+};
+var parseBuilderV2DynamicComponents = (html) => {
+  const instances = [];
+  let match;
+  while ((match = placeholderPattern.exec(html)) !== null) {
+    const attrs = `${match.groups?.attrs ?? ""} ${match.groups?.rest ?? ""}`;
+    const component = match.groups?.component ?? "";
+    if (!component) {
+      continue;
+    }
+    instances.push({
+      component,
+      id: extractAttribute(attrs, "data-orion-id") || `component-${instances.length + 1}`,
+      props: parseAttributes(attrs)
+    });
+  }
+  return instances;
+};
+var splitBuilderV2HtmlIntoChunks = (html) => {
+  const chunks = [];
+  let lastIndex = 0;
+  let componentIndex = 0;
+  let match;
+  while ((match = placeholderPattern.exec(html)) !== null) {
+    const before = html.slice(lastIndex, match.index);
+    if (before.length > 0) {
+      chunks.push({ html: before, kind: "html" });
+    }
+    const attrs = `${match.groups?.attrs ?? ""} ${match.groups?.rest ?? ""}`;
+    const component = match.groups?.component ?? "";
+    chunks.push({
+      instance: {
+        component,
+        id: extractAttribute(attrs, "data-orion-id") || `component-${componentIndex + 1}`,
+        props: parseAttributes(attrs)
+      },
+      kind: "component"
+    });
+    componentIndex += 1;
+    lastIndex = match.index + match[0].length;
+  }
+  const after = html.slice(lastIndex);
+  if (after.length > 0) {
+    chunks.push({ html: after, kind: "html" });
+  }
+  return chunks;
+};
+
+// src/builder-v2/sanitize.ts
+var import_sanitize_html = __toESM(require("sanitize-html"));
+var allowedTags = import_sanitize_html.default.defaults.allowedTags.concat([
+  "article",
+  "aside",
+  "button",
+  "figure",
+  "figcaption",
+  "footer",
+  "header",
+  "main",
+  "nav",
+  "section",
+  "source",
+  "video"
+]);
+var allowedAttributes = {
+  ...import_sanitize_html.default.defaults.allowedAttributes,
+  "*": [
+    "aria-*",
+    "class",
+    "data-*",
+    "id",
+    "role",
+    "style",
+    "title"
+  ],
+  a: ["aria-*", "class", "data-*", "href", "id", "name", "rel", "style", "target", "title"],
+  button: ["aria-*", "class", "data-*", "disabled", "id", "style", "title", "type"],
+  iframe: ["allow", "allowfullscreen", "class", "data-*", "height", "loading", "src", "style", "title", "width"],
+  img: ["alt", "class", "data-*", "height", "id", "loading", "sizes", "src", "srcset", "style", "title", "width"],
+  source: ["media", "src", "srcset", "type"],
+  video: ["autoplay", "class", "controls", "height", "loop", "muted", "playsinline", "poster", "preload", "src", "style", "width"]
+};
+var allowedIframeHosts = [
+  "calendar.google.com",
+  "calendly.com",
+  "player.vimeo.com",
+  "www.youtube.com",
+  "youtube.com"
+];
+var sanitizeBuilderHtml = (value) => {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    return "";
+  }
+  return (0, import_sanitize_html.default)(value, {
+    allowedAttributes,
+    allowedIframeHostnames: allowedIframeHosts,
+    allowedSchemes: ["http", "https", "mailto", "tel"],
+    allowedSchemesByTag: {
+      img: ["http", "https", "data"]
+    },
+    allowedTags,
+    allowProtocolRelative: false,
+    parseStyleAttributes: false
+  });
+};
+var sanitizeBuilderCss = (value) => {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    return "";
+  }
+  return value.replace(/@import\s+[^;]+;/gi, "").replace(/expression\s*\(/gi, "").replace(/javascript\s*:/gi, "");
+};
+
+// src/builder-v2/payload/compile.ts
+var compileBuilderV2Output = (input) => {
+  const html = sanitizeBuilderHtml(input.html);
+  const css = sanitizeBuilderCss(input.css);
+  return {
+    css,
+    dynamicComponents: parseBuilderV2DynamicComponents(html),
+    html
+  };
+};
+
+// src/builder-v2/projectData.ts
+var isRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+var createEmptyBuilderV2ProjectData = (title = "Untitled Page") => ({
+  assets: [],
+  pages: [
+    {
+      component: {
+        components: [
+          {
+            attributes: {
+              class: "orion-builder-v2-section"
+            },
+            components: [
+              {
+                content: title,
+                tagName: "h1",
+                type: "text"
+              },
+              {
+                content: "Start building this page by dragging blocks from the panel.",
+                tagName: "p",
+                type: "text"
+              }
+            ],
+            tagName: "section"
+          }
+        ],
+        type: "wrapper"
+      },
+      id: "page",
+      name: title
+    }
+  ],
+  styles: []
+});
+var normalizeBuilderV2ProjectData = (value, fallbackTitle = "Untitled Page") => {
+  if (!isRecord(value)) {
+    return createEmptyBuilderV2ProjectData(fallbackTitle);
+  }
+  return value;
+};
+
+// src/builder-v2/payload/pageService.ts
+var pageTitle = (page) => typeof page.title === "string" && page.title.trim().length > 0 ? page.title : "Untitled Page";
+var toBuilderV2EditorInitialData = (page) => ({
+  projectData: normalizeBuilderV2ProjectData(
+    page.builderProjectData || page.builderPublishedProjectData,
+    pageTitle(page)
+  ),
+  title: pageTitle(page)
+});
+var createBuilderV2PageService = ({
+  collectionSlug = "pages",
+  payload,
+  user
+}) => ({
+  getPageForBuilder: async (pageID) => {
+    const page = await payload.findByID({
+      collection: collectionSlug,
+      depth: 2,
+      draft: true,
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    return {
+      id: String(page.id),
+      initialData: toBuilderV2EditorInitialData(page),
+      page
+    };
+  },
+  saveDraft: async (pageID, input) => {
+    const compiled = compileBuilderV2Output(input.compiled);
+    await payload.update({
+      collection: collectionSlug,
+      data: {
+        _status: "draft",
+        builderDynamicComponents: compiled.dynamicComponents,
+        builderMode: "grapes-v2",
+        builderProjectData: input.projectData,
+        builderValidationIssues: input.validationIssues || [],
+        compiledCss: compiled.css,
+        compiledHtml: compiled.html,
+        ...input.title ? { title: input.title } : {}
+      },
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    return {
+      compiled,
+      id: pageID,
+      status: "draft"
+    };
+  },
+  publish: async (pageID, input) => {
+    const compiled = compileBuilderV2Output(input.compiled);
+    await payload.update({
+      collection: collectionSlug,
+      data: {
+        _status: "published",
+        builderDynamicComponents: compiled.dynamicComponents,
+        builderMode: "grapes-v2",
+        builderProjectData: input.projectData,
+        builderPublishedProjectData: input.projectData,
+        builderValidationIssues: input.validationIssues || [],
+        compiledCss: compiled.css,
+        compiledHtml: compiled.html,
+        ...input.title ? { title: input.title } : {}
+      },
+      id: pageID,
+      overrideAccess: false,
+      user
+    });
+    return {
+      compiled,
+      id: pageID,
+      status: "published"
+    };
+  }
+});
+
+// src/builder-v2/runtime/BuilderPageRuntime.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var resolveRuntimeComponent = (adapter, type) => {
+  const definition = adapter?.components?.[type];
+  if (!definition) {
+    return null;
+  }
+  if (typeof definition === "function") {
+    return definition;
+  }
+  return definition.render;
+};
+function BuilderPageRuntime({ adapter, className, page }) {
+  const html = sanitizeBuilderHtml(page.compiledHtml);
+  const css = sanitizeBuilderCss(page.compiledCss);
+  const chunks = splitBuilderV2HtmlIntoChunks(html);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["orion-builder-v2-runtime", className].filter(Boolean).join(" "), children: [
+    css ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: css } }) : null,
+    chunks.map((chunk, index) => {
+      if (chunk.kind === "html") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "orion-builder-v2-html-chunk",
+            dangerouslySetInnerHTML: { __html: chunk.html }
+          },
+          `html-${index}`
+        );
+      }
+      const Component = resolveRuntimeComponent(adapter, chunk.instance.component);
+      if (!Component) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "orion-builder-v2-missing-component",
+            "data-orion-missing-component": chunk.instance.component
+          },
+          `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 }));
+    })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BuilderPageRuntime,
+  appendBuilderV2PageFields,
+  compileBuilderV2Output,
+  createBuilderV2PageFields,
+  createBuilderV2PageService,
+  createEmptyBuilderV2ProjectData,
+  normalizeBuilderV2ProjectData,
+  parseBuilderV2DynamicComponents,
+  sanitizeBuilderCss,
+  sanitizeBuilderHtml,
+  splitBuilderV2HtmlIntoChunks,
+  toBuilderV2EditorInitialData
+});