makersclaw 0.1.0 → 0.3.0

package/registry/blocks/page-builder/page-view.jsx

@@ -0,0 +1,33 @@
+// PageView — shows a page the builder made, inside an app, in the theme.
+// Server-safe (no hooks): a landing page can render on the server.
+//
+// The page's CSS names theme tokens (var(--color-…)); inside the app they
+// resolve to the workspace theme, so the page repaints with it. KEEP_TOKENS
+// on the wrapper makes sure Tailwind emits every token the CSS may name.
+// The HTML is cleaned (no scripts, handlers or javascript: links) and the
+// CSS loses any body / html / * rule before either reaches the page.
+import { cx } from "../../ui";
+import { cleanCss, cleanHtml, pageDocument } from "./page";
+import { KEEP_TOKENS, fontFaceCss, fontLinks, tokenCss } from "./tokens";
+
+export function PageView({ page, label, className }) {
+  const html = cleanHtml(page?.html);
+  const css = cleanCss(page?.css);
+  return (
+    <div
+      role={label ? "region" : undefined}
+      aria-label={label || undefined}
+      className={cx("bg-background font-sans text-[16px] leading-[1.55] text-foreground [&_img]:max-w-full", KEEP_TOKENS, className)}
+    >
+      {css ? <style>{css}</style> : null}
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+}
+
+/** Browser only: the page as a standalone HTML document with the theme
+ *  resolved where `root` sits (colours, faces, radius) — for a download or
+ *  a static host that does not load the app's stylesheet. */
+export function standaloneDocument(page, { root, title = "Page", lang = "en" } = {}) {
+  return pageDocument(page, { title, lang, tokens: tokenCss(root), fonts: fontLinks(), fontFaces: fontFaceCss() });
+}

package/registry/blocks/page-builder/page.js

@@ -0,0 +1,118 @@
+// Page helpers — plain functions of plain data, server-safe.
+//
+// A page, as the builder hands it out (onSave, onChange, the handle):
+//   { html, css, project }
+//   html     the body's content, cleaned (no <script>, no on* handlers, no
+//            javascript: links)
+//   css      the rules the page uses, token-based (var(--color-…)); no body
+//            or * rules, so it can sit inside an app page
+//   project  GrapesJS project JSON — what to store to edit the page again
+// Pass `project` back as `page` to reopen it; `html`/`css` alone also open
+// (as a fresh project), which is how a template or an import starts.
+
+/** The base the page's content sits on: the theme's canvas, text and face.
+ *  PageView gives the same with Tailwind classes; pageDocument() writes it. */
+export const PAGE_BASE_CSS =
+  "body{margin:0;background-color:var(--color-background);color:var(--color-foreground);" +
+  "font-family:var(--theme-font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}" +
+  "*,*::before,*::after{box-sizing:border-box}img{max-width:100%}";
+
+/** A page with nothing in it. */
+export function emptyPage() {
+  return { html: "", css: "", project: null };
+}
+
+/** True when the page has no content: no project components, no html. */
+export function isPageEmpty(page) {
+  if (!page) return true;
+  const frames = page.project?.pages?.[0]?.frames;
+  if (frames?.length) {
+    const root = frames[0]?.component;
+    const kids = root?.components;
+    if (Array.isArray(kids) && kids.length) return false;
+    if (typeof kids === "string" && kids.trim()) return false;
+    return !textOf(page.html);
+  }
+  return !textOf(page.html) && !/<(img|hr|video|iframe)\b/i.test(page.html ?? "");
+}
+
+function textOf(html) {
+  return String(html ?? "")
+    .replace(/<style[\s\S]*?<\/style>/gi, "")
+    .replace(/<[^>]*>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .trim();
+}
+
+/** Remove what a page must never carry into an app: scripts, inline event
+ *  handlers, javascript: URLs. The editor already emits none; this is for
+ *  HTML that came from elsewhere (an import, an agent). */
+export function cleanHtml(html) {
+  return String(html ?? "")
+    .replace(/<script\b[\s\S]*?<\/script\s*>/gi, "")
+    .replace(/<script\b[^>]*\/?>/gi, "")
+    .replace(/\s+on[a-z]+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+    .replace(/(href|src)\s*=\s*(["'])\s*javascript:[^"']*\2/gi, '$1="#"')
+    .replace(/^\s*<body[^>]*>/i, "")
+    .replace(/<\/body>\s*$/i, "")
+    .trim();
+}
+
+/** Drop the rules that would restyle a host page (body, html, *), keep the
+ *  rest. */
+export function cleanCss(css) {
+  return String(css ?? "")
+    .replace(/(?:^|(?<=[{}]))\s*(?:html|body|\*)(?:\s*,\s*(?:html|body|\*))*\s*\{[^{}]*\}/g, "")
+    .trim();
+}
+
+/** A block as the builder uses it: every field filled. */
+export function normalizeBlock(block, i = 0) {
+  const id = String(block?.id ?? `block-${i + 1}`);
+  return {
+    id,
+    label: block?.label ?? id,
+    category: block?.category ?? "Sections",
+    description: block?.description ?? "",
+    thumb: block?.thumb ?? "blank",
+    html: block?.html ?? "",
+    content: block?.content ?? null,
+    css: block?.css ?? "",
+  };
+}
+
+/** A template as the builder loads it: { html, css } or { project }. */
+export function templatePage(template) {
+  if (!template) return null;
+  if (template.project) return { project: template.project };
+  return { html: template.html ?? "", css: template.css ?? "" };
+}
+
+const escapeText = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+
+/** A standalone HTML document for the page — for a download, an email
+ *  preview, a static host. `tokens` is the `:root{…}` rule tokenCss()
+ *  returns in the browser (the theme, resolved); without it the page reads
+ *  the variables from whatever stylesheet the host adds. */
+export function pageDocument(page, { title = "Page", lang = "en", tokens = "", fonts = [], fontFaces = "" } = {}) {
+  const links = fonts.map((href) => `<link rel="stylesheet" href="${escapeText(href)}">`).join("");
+  return (
+    `<!doctype html><html lang="${escapeText(lang)}"><head><meta charset="utf-8">` +
+    `<meta name="viewport" content="width=device-width, initial-scale=1">` +
+    `<title>${escapeText(title)}</title>${links}` +
+    `<style>${fontFaces}\n${tokens}\n${PAGE_BASE_CSS}\n${cleanCss(page?.css)}</style>` +
+    `</head><body>${cleanHtml(page?.html)}</body></html>`
+  );
+}
+
+/** Walk a project's components (depth first) — for a consumer that wants
+ *  to read what a page holds without the editor (e.g. list its sections). */
+export function projectSections(project) {
+  const root = project?.pages?.[0]?.frames?.[0]?.component;
+  const kids = Array.isArray(root?.components) ? root.components : [];
+  return kids.map((c, i) => ({
+    index: i,
+    name: c.name ?? c.attributes?.["data-gjs-name"] ?? c.tagName ?? c.type ?? "Section",
+    classes: (c.classes ?? []).map((k) => (typeof k === "string" ? k : k.name)).filter(Boolean),
+  }));
+}