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

package/dist/builder-v2/client.mjs

@@ -0,0 +1,628 @@
+'use client';
+"use client";
+import {
+  MAX_DIRECT_UPLOAD_BYTES,
+  optimizeImageForUpload
+} from "../chunk-ROTPP5CU.mjs";
+
+// src/builder-v2/editor/GrapesPageEditor.tsx
+import { useEffect, useRef, useState } from "react";
+
+// 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/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;
+};
+
+// src/builder-v2/sanitize.ts
+import sanitizeHtml from "sanitize-html";
+var allowedTags = sanitizeHtml.defaults.allowedTags.concat([
+  "article",
+  "aside",
+  "button",
+  "figure",
+  "figcaption",
+  "footer",
+  "header",
+  "main",
+  "nav",
+  "section",
+  "source",
+  "video"
+]);
+var allowedAttributes = {
+  ...sanitizeHtml.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 sanitizeHtml(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/editor/defaultBlocks.ts
+var registerOrionBuilderV2Blocks = (editor) => {
+  const blocks = editor.Blocks;
+  blocks.add("orion-section", {
+    category: "Layout",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container">
+          <h2>Section Heading</h2>
+          <p>Add supporting content here.</p>
+        </div>
+      </section>
+    `,
+    label: "Section"
+  });
+  blocks.add("orion-hero", {
+    category: "Sections",
+    content: `
+      <section class="orion-builder-v2-hero">
+        <div class="orion-builder-v2-container">
+          <p class="orion-builder-v2-kicker">Optional kicker</p>
+          <h1>Build a stronger website</h1>
+          <p>Use this area for a clear value proposition and call to action.</p>
+          <a class="orion-builder-v2-button" href="/contact">Get started</a>
+        </div>
+      </section>
+    `,
+    label: "Hero"
+  });
+  blocks.add("orion-columns", {
+    category: "Layout",
+    content: `
+      <section class="orion-builder-v2-section">
+        <div class="orion-builder-v2-container orion-builder-v2-grid is-3">
+          <article class="orion-builder-v2-card"><h3>Column One</h3><p>Add content.</p></article>
+          <article class="orion-builder-v2-card"><h3>Column Two</h3><p>Add content.</p></article>
+          <article class="orion-builder-v2-card"><h3>Column Three</h3><p>Add content.</p></article>
+        </div>
+      </section>
+    `,
+    label: "Columns"
+  });
+  blocks.add("orion-button", {
+    category: "Basic",
+    content: '<a class="orion-builder-v2-button" href="/contact">Button</a>',
+    label: "Button"
+  });
+  blocks.add("orion-image", {
+    category: "Basic",
+    content: '<img alt="Image" class="orion-builder-v2-image" src="https://placehold.co/1200x700" />',
+    label: "Image"
+  });
+  blocks.add("orion-form-embed", {
+    category: "Dynamic",
+    content: `
+      <div
+        class="orion-builder-v2-dynamic-placeholder"
+        data-orion-component="formEmbed"
+        data-orion-form-slug="contact"
+      >
+        <strong>Form Embed</strong>
+        <span>contact</span>
+      </div>
+    `,
+    label: "Form"
+  });
+};
+
+// src/builder-v2/editor/projectComponents.ts
+var normalizeDefinition = (type, value) => {
+  if (!value || typeof value === "function") {
+    return null;
+  }
+  return {
+    ...value,
+    type: value.type || type
+  };
+};
+var registerProjectDynamicComponents = (editor, adapter) => {
+  const components = adapter?.components || {};
+  Object.keys(components).forEach((type) => {
+    const definition = normalizeDefinition(type, components[type]);
+    if (!definition) {
+      return;
+    }
+    editor.DomComponents.addType(`orion-${type}`, {
+      model: {
+        defaults: {
+          attributes: {
+            "data-orion-component": type,
+            "data-orion-id": `${type}-${Date.now()}`
+          },
+          components: definition.editorPreview?.({}) || `<div class="orion-builder-v2-dynamic-placeholder"><strong>${definition.label}</strong></div>`,
+          droppable: false,
+          tagName: "div",
+          traits: [
+            {
+              label: "Component",
+              name: "data-orion-component",
+              type: "text"
+            },
+            ...(definition.traits || []).map((trait) => ({
+              label: trait.label,
+              name: `data-orion-${trait.name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}`,
+              options: trait.options,
+              placeholder: trait.placeholder,
+              type: trait.type
+            }))
+          ]
+        }
+      }
+    });
+    editor.Blocks.add(`orion-dynamic-${type}`, {
+      category: "Project",
+      content: {
+        type: `orion-${type}`
+      },
+      label: definition.label
+    });
+  });
+};
+
+// src/builder-v2/editor/GrapesPageEditor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var postToParent = (payload) => {
+  window.parent?.postMessage(
+    {
+      source: "payload-visual-builder-child",
+      ...payload
+    },
+    "*"
+  );
+};
+var buildSavePayload = (editor, status, projectData) => ({
+  builderMode: "grapes-v2",
+  compiledCss: sanitizeBuilderCss(editor.getCss()),
+  compiledHtml: sanitizeBuilderHtml(editor.getHtml()),
+  projectData,
+  status
+});
+var parsePayloadErrorMessage = async (response, fallback) => {
+  try {
+    const json = await response.json();
+    return json.errors?.[0]?.message || json.message || fallback;
+  } catch {
+    const raw = await response.text();
+    return raw.trim() || fallback;
+  }
+};
+var getRelationID = (value) => {
+  if (typeof value === "number" || typeof value === "string") {
+    return value;
+  }
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const id = value.id;
+  return typeof id === "number" || typeof id === "string" ? id : null;
+};
+var mediaDocToAsset = (doc) => {
+  const id = getRelationID(doc);
+  const filename = typeof doc.filename === "string" ? doc.filename : "";
+  const src = typeof doc.url === "string" && doc.url.length > 0 ? doc.url : filename ? `/api/media/file/${encodeURIComponent(filename)}` : "";
+  if (id === null || !src) {
+    return null;
+  }
+  return {
+    alt: typeof doc.alt === "string" ? doc.alt : "",
+    id,
+    name: filename || String(id),
+    src,
+    type: "image"
+  };
+};
+var extractUploadedMedia = (value) => {
+  const candidate = value && typeof value === "object" && "doc" in value ? value.doc : value;
+  if (!candidate || typeof candidate !== "object") {
+    return null;
+  }
+  const id = getRelationID(candidate);
+  if (id === null) {
+    return null;
+  }
+  const typed = candidate;
+  return {
+    alt: typeof typed.alt === "string" ? typed.alt : "",
+    filename: typeof typed.filename === "string" ? typed.filename : "",
+    id,
+    url: typeof typed.url === "string" ? typed.url : ""
+  };
+};
+var loadPayloadMediaAssets = async (editor) => {
+  const response = await fetch(`/api/media?depth=1&limit=100&sort=-updatedAt&_=${Date.now()}`, {
+    cache: "no-store",
+    credentials: "include"
+  });
+  if (!response.ok) {
+    return;
+  }
+  const json = await response.json();
+  const assets = (Array.isArray(json.docs) ? json.docs : []).map((doc) => mediaDocToAsset(doc)).filter((asset) => asset !== null);
+  editor.AssetManager.add(assets);
+};
+var uploadPayloadMediaAssets = async (editor, files) => {
+  const fileArray = Array.from(files);
+  const uploadedAssets = [];
+  for (const file of fileArray) {
+    const optimizedFile = await optimizeImageForUpload(file);
+    if (optimizedFile.size > MAX_DIRECT_UPLOAD_BYTES) {
+      throw new Error("Image is too large. Use an image under 4MB or lower-resolution export.");
+    }
+    const fallbackAlt = file.name.replace(/\.[^/.]+$/, "").trim();
+    const formData = new FormData();
+    formData.set("_payload", JSON.stringify({ alt: fallbackAlt || "Uploaded image" }));
+    formData.set("alt", fallbackAlt || "Uploaded image");
+    formData.set("file", optimizedFile);
+    const response = await fetch("/api/media", {
+      body: formData,
+      credentials: "include",
+      method: "POST"
+    });
+    if (!response.ok) {
+      throw new Error(await parsePayloadErrorMessage(response, "Could not upload image."));
+    }
+    const uploaded = extractUploadedMedia(await response.json());
+    const asset = uploaded ? mediaDocToAsset(uploaded) : null;
+    if (asset) {
+      uploadedAssets.push(asset);
+    }
+  }
+  if (uploadedAssets.length > 0) {
+    editor.AssetManager.add(uploadedAssets);
+  }
+};
+function GrapesPageEditor({ adapter, initialData, pageID }) {
+  const containerRef = useRef(null);
+  const editorRef = useRef(null);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(null);
+  useEffect(() => {
+    let active = true;
+    const init = async () => {
+      if (!containerRef.current || editorRef.current) {
+        return;
+      }
+      try {
+        const grapesjs = (await import("grapesjs")).default;
+        if (!active || !containerRef.current) {
+          return;
+        }
+        const projectData = normalizeBuilderV2ProjectData(initialData?.projectData, initialData?.title);
+        const editor = grapesjs.init({
+          assetManager: {
+            uploadFile: async (event) => {
+              const target = event.target;
+              const dataTransfer = "dataTransfer" in event ? event.dataTransfer : null;
+              const files = dataTransfer?.files || target?.files;
+              if (!files || files.length === 0) {
+                return void 0;
+              }
+              await uploadPayloadMediaAssets(editorRef.current || editor, files).catch((uploadError) => {
+                setError(uploadError instanceof Error ? uploadError.message : "Could not upload image.");
+              });
+            }
+          },
+          blockManager: {
+            appendTo: "#orion-builder-v2-blocks"
+          },
+          container: containerRef.current,
+          deviceManager: {
+            devices: [
+              { id: "desktop", name: "Desktop", width: "" },
+              { id: "tablet", name: "Tablet", width: "768px" },
+              { id: "mobile", name: "Mobile", width: "390px" }
+            ]
+          },
+          fromElement: false,
+          height: "100%",
+          panels: {
+            defaults: []
+          },
+          projectData,
+          selectorManager: {
+            componentFirst: true
+          },
+          storageManager: false,
+          styleManager: {
+            sectors: [
+              {
+                name: "Layout",
+                open: true,
+                properties: ["display", "position", "top", "right", "bottom", "left", "width", "height", "min-height", "margin", "padding"]
+              },
+              {
+                name: "Typography",
+                open: true,
+                properties: ["font-family", "font-size", "font-weight", "line-height", "letter-spacing", "color", "text-align"]
+              },
+              {
+                name: "Decoration",
+                open: true,
+                properties: ["background-color", "background", "border", "border-radius", "box-shadow", "opacity"]
+              },
+              {
+                name: "Flex",
+                open: false,
+                properties: ["flex-direction", "justify-content", "align-items", "gap", "flex-wrap"]
+              }
+            ]
+          },
+          traitManager: {
+            appendTo: "#orion-builder-v2-traits"
+          },
+          width: "auto"
+        });
+        editorRef.current = editor;
+        registerOrionBuilderV2Blocks(editor);
+        registerProjectDynamicComponents(editor, adapter);
+        editor.loadProjectData(projectData);
+        void loadPayloadMediaAssets(editor);
+        editor.on("update", () => {
+          postToParent({ dirty: editor.getDirtyCount() > 0, type: "dirty-state" });
+          postToParent({
+            canRedo: editor.UndoManager.hasRedo(),
+            canUndo: editor.UndoManager.hasUndo(),
+            type: "history-state"
+          });
+        });
+        setLoading(false);
+      } catch (initError) {
+        setError(initError instanceof Error ? initError.message : "Could not load the website builder.");
+        setLoading(false);
+      }
+    };
+    void init();
+    return () => {
+      active = false;
+      editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+  }, [adapter, initialData?.projectData, initialData?.title]);
+  const save = async (status) => {
+    const editor = editorRef.current;
+    if (!editor || saving) {
+      return;
+    }
+    setSaving(status);
+    try {
+      const projectData = editor.getProjectData();
+      const payload = buildSavePayload(editor, status, projectData);
+      const dynamicComponents = parseBuilderV2DynamicComponents(String(payload.compiledHtml || ""));
+      const endpoint = status === "draft" ? `/api/pages/${pageID}?draft=true` : `/api/pages/${pageID}`;
+      const response = await fetch(endpoint, {
+        body: JSON.stringify(
+          status === "published" ? {
+            _status: "published",
+            builderDynamicComponents: dynamicComponents,
+            builderMode: "grapes-v2",
+            builderProjectData: projectData,
+            builderPublishedProjectData: projectData,
+            builderValidationIssues: [],
+            compiledCss: payload.compiledCss,
+            compiledHtml: payload.compiledHtml
+          } : {
+            _status: "draft",
+            builderDynamicComponents: dynamicComponents,
+            builderMode: "grapes-v2",
+            builderProjectData: projectData,
+            builderValidationIssues: [],
+            compiledCss: payload.compiledCss,
+            compiledHtml: payload.compiledHtml
+          }
+        ),
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "PATCH"
+      });
+      if (!response.ok) {
+        if (response.status === 401 || response.status === 403) {
+          postToParent({ type: "session-expired" });
+        }
+        throw new Error(await parsePayloadErrorMessage(response, "Could not save this page."));
+      }
+      editor.clearDirtyCount();
+      postToParent({
+        dirty: false,
+        type: "dirty-state"
+      });
+      postToParent({
+        message: status === "published" ? "Published." : "Draft saved.",
+        ok: true,
+        status,
+        type: "save-result"
+      });
+    } catch (saveError) {
+      postToParent({
+        message: saveError instanceof Error ? saveError.message : "Could not save.",
+        ok: false,
+        status,
+        type: "save-result"
+      });
+    } finally {
+      setSaving(null);
+    }
+  };
+  useEffect(() => {
+    const onMessage = (event) => {
+      const data = event.data;
+      const editor = editorRef.current;
+      if (!data || data.source !== "payload-visual-builder-parent" || !editor) {
+        return;
+      }
+      if (data.type === "dirty-check-request") {
+        postToParent({ dirty: editor.getDirtyCount() > 0, type: "dirty-state" });
+        postToParent({
+          canRedo: editor.UndoManager.hasRedo(),
+          canUndo: editor.UndoManager.hasUndo(),
+          type: "history-state"
+        });
+        return;
+      }
+      if (data.type === "history-check-request") {
+        postToParent({
+          canRedo: editor.UndoManager.hasRedo(),
+          canUndo: editor.UndoManager.hasUndo(),
+          type: "history-state"
+        });
+        return;
+      }
+      if (data.type === "undo") {
+        editor.UndoManager.undo();
+        return;
+      }
+      if (data.type === "redo") {
+        editor.UndoManager.redo();
+        return;
+      }
+      if (data.type === "save" && (data.status === "draft" || data.status === "published")) {
+        void save(data.status);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [saving]);
+  return /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-editor", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "orion-builder-v2-sidebar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Blocks" }),
+        /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-blocks" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "orion-builder-v2-panel", children: [
+        /* @__PURE__ */ jsx("h2", { children: "Settings" }),
+        /* @__PURE__ */ jsx("div", { id: "orion-builder-v2-traits" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "orion-builder-v2-main", children: [
+      loading ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-status", children: "Loading builder..." }) : null,
+      error ? /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-error", children: error }) : null,
+      /* @__PURE__ */ jsx("div", { className: "orion-builder-v2-canvas", ref: containerRef })
+    ] })
+  ] });
+}
+export {
+  GrapesPageEditor
+};