windcraft-editor 0.0.0-stage → 0.1.0

package/embed.js

@@ -0,0 +1,60 @@
+// embedEditor(container, options): the editor inside a container of your page, isolated in an iframe (its own keys, zoom and styles), with
+// the same object mountEditor() gives back. Several can be on one page. The page that embeds it keeps the host (saving) and, if it likes,
+// the code and the details form.
+//
+//   const ed = await embedEditor(el, { host, data: { htmlCode }, ui: { panels: false, nav: false }, onDetails: (fields) => showMyForm(fields) });
+//   ed.onChange(({ html, dirty, status, source }) => ...);   ed.setHtml(html);   ed.save();   await ed.saveDetails(fields);   ed.destroy();
+//
+// options.src   where the editor's embed.html is served (default: next to this file); it needs the same import map as any editor page
+//               (see embed.html). options.tailwind false when the iframe page already has Tailwind.
+const here = (path) => new URL(path, import.meta.url).href;
+
+/**
+ * @param {HTMLElement} container
+ * @param {{ host: import("./design/host.js").Host, data?: object, ui?: object, src?: string, tailwind?: boolean, onDetails?: (fields: object) => void }} options
+ */
+export function embedEditor(container, { host, data = {}, ui = {}, src = here("./embed.html"), tailwind = true, onDetails }) {
+    const iframe = Object.assign(document.createElement("iframe"), { src, title: "Design editor" });
+    iframe.style.cssText = "width:100%;height:100%;border:0;display:block";
+    container.append(iframe);
+    const listeners = new Set();
+    const pending = new Map();
+    let seq = 0, html = String(data.htmlCode || ""), dirty = false, status = "", details = null;
+    const tell = (msg) => iframe.contentWindow && iframe.contentWindow.postMessage({ wc: "host", ...msg }, "*");
+
+    let mountedOk;
+    const mounted = new Promise((resolve) => { mountedOk = resolve; });
+    const onMessage = async (e) => {
+        const m = e.data;
+        if (e.source !== iframe.contentWindow || !m || m.wc !== "editor") return;
+        if (m.t === "ready") tell({ t: "init", data, ui, tailwind, hostMethods: Object.keys(host).filter((k) => typeof host[k] === "function") });
+        else if (m.t === "mounted") { html = m.html; details = m.details; }
+        else if (m.t === "painted") mountedOk();
+        else if (m.t === "change") { ({ html, dirty, status } = m.state); listeners.forEach((fn) => fn(m.state)); }
+        else if (m.t === "details") onDetails && onDetails(m.fields);
+        else if (m.t === "rpc") {
+            try { tell({ t: "rpcResult", id: m.id, ok: true, value: await host[m.method](...m.args) }); }
+            catch (err) { tell({ t: "rpcResult", id: m.id, ok: false, error: (err && err.message) || String(err) }); }
+        } else if (m.t === "detailsResult") {
+            const p = pending.get(m.id);
+            pending.delete(m.id);
+            if (p) m.ok ? p.resolve() : p.reject(new Error(m.error));
+        }
+    };
+    addEventListener("message", onMessage);
+
+    return {
+        /** Resolves when the editor has opened the design and painted it (show your own loading message until then). */
+        ready: mounted,
+        getHtml: () => html,
+        setHtml: (value) => { html = String(value); tell({ t: "setHtml", html }); },
+        onChange(fn) { listeners.add(fn); return () => listeners.delete(fn); },
+        isDirty: () => dirty,
+        status: () => status,
+        details: () => details,
+        save: () => tell({ t: "save" }),
+        release: () => tell({ t: "release" }),
+        saveDetails: (fields) => new Promise((resolve, reject) => { const id = ++seq; pending.set(id, { resolve, reject }); tell({ t: "saveDetails", id, fields }); }),
+        destroy() { removeEventListener("message", onMessage); iframe.remove(); listeners.clear(); },
+    };
+}

package/index.js

@@ -0,0 +1,62 @@
+// @windcraft/editor: the visual editor as a package.
+//
+//   import { mountEditor } from "@windcraft/editor";
+//   await mountEditor(document.getElementById("root"), { host, data });
+//
+// `host` is what the editor needs from the app around it (design/host.js lists it): saving, projects, the AI and the page address.
+// `data` is the design to open (below). The page must map "@windcraft/core/" and "@windcraft/editor/" to where those packages are
+// served (an import map, or a bundler does it). One editor per page: it takes over the page's size and keyboard.
+import { setHost } from "./design/host.js";
+import { config } from "./design/config.js";
+import { editorHtml } from "./template.js";
+
+const here = (path) => new URL(path, import.meta.url).href;
+const TAILWIND = "https://cdn.tailwindcss.com";
+let mounted = false;
+
+/** The page itself never zooms or scales: only the canvas does. A pinch, Ctrl/Cmd + scroll and Ctrl/Cmd + = / - / 0 stay out of the browser's zoom. */
+function keepPageUnzoomed() {
+    addEventListener("wheel", (e) => { if (e.ctrlKey || e.metaKey) e.preventDefault(); }, { passive: false });
+    ["gesturestart", "gesturechange", "gestureend"].forEach((t) => addEventListener(t, (e) => e.preventDefault(), { passive: false }));
+    addEventListener("keydown", (e) => { if ((e.ctrlKey || e.metaKey) && ["=", "+", "-", "_", "0"].includes(e.key)) e.preventDefault(); }, true);
+}
+
+const load = (el) => new Promise((resolve, reject) => { el.onload = resolve; el.onerror = () => reject(new Error(`Could not load ${el.src || el.href}`)); document.head.append(el); });
+
+/**
+ * Opens the editor in `root`.
+ * @param {HTMLElement} root
+ * @param {object} options
+ * @param {import("./design/host.js").Host} options.host
+ * @param {object} [options.data]   the design to open: { id, title, htmlCode, version, category, description, tags, isPublished, useAsReference, group,
+ *     project: {id,name}, projects: [{id,name}], categories: [{ group, items: [{ slug, name }] }], plane: [the project's other designs], board }
+ * @param {{ href: string, title?: string, label?: string } | null} [options.back]   the Back link's target; none hides it
+ * @param {{ panels?: boolean, nav?: boolean, tools?: string[] | null, onDetails?: (fields: object) => void }} [options.ui]   what of the editor shows:
+ *     panels: false hides Layers, Properties and Code; nav: false hides Back, the page list and the project; tools: the ids to keep
+ *     ("move","hand","interact","frame","shape","text","add"; null keeps all); onDetails: the app shows its own details form when a first save needs a name
+ * @param {boolean} [options.tailwind]   false when the page already loads Tailwind's play CDN (v3); true (default) loads it
+ */
+export async function mountEditor(root, { host, data = {}, back = null, tailwind = true, ui = {} }) {
+    if (mounted) throw new Error("The editor is already mounted on this page");
+    mounted = true;
+    setHost(host);
+    config.data = { id: null, title: "", version: 0, htmlCode: "", category: "", description: "", tags: [], isPublished: false, useAsReference: true, project: null, projects: [], categories: [], ...data };
+    config.ui = { panels: true, nav: true, tools: null, ...ui };
+    if (ui.onDetails) config.hooks.details = ui.onDetails;
+    keepPageUnzoomed();
+    const link = Object.assign(document.createElement("link"), { rel: "stylesheet", href: here("./styles.css") });
+    const jobs = [load(link)];
+    if (tailwind && !window.tailwind) jobs.push(load(Object.assign(document.createElement("script"), { src: TAILWIND })));
+    await Promise.all(jobs);
+    if (!root.style.height && root.parentElement === document.body) root.style.height = "100vh"; // an editor that is the page; one in a container takes the container's height
+    root.innerHTML = editorHtml;
+    const a = root.querySelector("#backLink"), label = root.querySelector("#backLabel");
+    if (back && a) { a.href = back.href; a.title = back.title || "Back"; if (label) label.textContent = back.label || "Back"; }
+    else if (a) { a.remove(); if (label) label.remove(); }
+    root.classList.toggle("wc-no-panels", config.ui.panels === false);
+    root.classList.toggle("wc-no-nav", config.ui.nav === false);
+    root.classList.toggle("wc-no-add", Boolean(config.ui.tools) && !config.ui.tools.includes("add"));
+    await import("./design/editor.js");
+    return (await import("./design/editor/api.js")).api;
+}
+export { embedEditor } from "./embed.js";

package/package.json

@@ -1,6 +1,51 @@
 {
-  "name": "windcraft-editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "windcraft-editor",
+    "version": "0.1.0",
+    "description": "Windcraft's visual HTML + Tailwind editor. Mount it in a page and give it a host that loads and saves designs. Includes @windcraft/core.",
+    "keywords": [
+        "tailwind",
+        "tailwindcss",
+        "visual-editor",
+        "design-tool",
+        "html",
+        "wysiwyg",
+        "windcraft"
+    ],
+    "type": "module",
+    "license": "MIT",
+    "author": "Swapnil Jadhav",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Tolaj/windcraft.git",
+        "directory": "packages/editor"
+    },
+    "homepage": "https://github.com/Tolaj/windcraft#readme",
+    "bugs": {
+        "url": "https://github.com/Tolaj/windcraft/issues"
+    },
+    "main": "index.js",
+    "exports": {
+        ".": "./index.js",
+        "./*": "./*"
+    },
+    "files": [
+        "index.js",
+        "embed.js",
+        "embed.html",
+        "embed-frame.js",
+        "template.js",
+        "styles.css",
+        "design",
+        "playground",
+        "vendor",
+        "core",
+        "README.md"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "prepack": "node scripts/bundle-core.mjs",
+        "postpack": "node scripts/bundle-core.mjs clean"
+    }
+}

package/playground/component-source.js

@@ -0,0 +1,124 @@
+import { themeHead } from "@windcraft/core/theme.js";
+const TAILWIND_RE = /tailwindcss|@tailwindcss\/browser/i;
+
+const isTailwindScript = (s) => s.src && TAILWIND_RE.test(s.src);
+
+/**
+ * Splits whatever the user pasted (fragment, full document, with <style>,
+ * <link>, <script>, body attributes) into separately usable parts.
+ */
+export function parseComponentSource(code) {
+    const dom = new DOMParser().parseFromString(code || "", "text/html");
+    const hasBodyTag = /<body[\s>]/i.test(code || "");
+
+    const styles = [];
+    const links = [];
+    const scripts = [];
+
+    dom.querySelectorAll("style").forEach((el) => {
+        styles.push({ type: el.getAttribute("type") || "", text: el.textContent });
+        el.remove();
+    });
+
+    dom.querySelectorAll("link").forEach((el) => {
+        const rel = (el.getAttribute("rel") || "").toLowerCase();
+        if (rel === "stylesheet" || rel === "preconnect" || rel === "preload") {
+            links.push(el.outerHTML);
+        }
+        el.remove();
+    });
+
+    dom.querySelectorAll("script").forEach((el) => {
+        scripts.push({
+            src: el.getAttribute("src") || "",
+            type: el.getAttribute("type") || "",
+            defer: el.hasAttribute("defer"),
+            text: el.textContent,
+        });
+        el.remove();
+    });
+
+    const bodyAttrs = {};
+    if (hasBodyTag) {
+        Array.from(dom.body.attributes).forEach((a) => (bodyAttrs[a.name] = a.value));
+    }
+
+    return {
+        markup: dom.body.innerHTML.trim(),
+        styles,
+        links,
+        scripts,
+        bodyAttrs,
+        hasTailwindScript: scripts.some(isTailwindScript),
+        hasCss: styles.length > 0 || links.length > 0,
+        hasJs: scripts.some((s) => !isTailwindScript(s)),
+    };
+}
+
+const escapeAttr = (v) => String(v).replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+const escapeScript = (t) => t.replace(/<\/script/gi, "<\\/script");
+
+const HEIGHT_REPORTER = `
+(function () {
+    var last = 0;
+    function report() {
+        var h = Math.ceil(document.documentElement.getBoundingClientRect().height);
+        if (h && h !== last) { last = h; parent.postMessage({ type: "preview-height", height: h }, "*"); }
+    }
+    new ResizeObserver(report).observe(document.documentElement);
+    window.addEventListener("load", report);
+    // Esc in the live page goes back to editing (the editor's Interact tool listens for it)
+    document.addEventListener("keydown", function (e) { if (e.key === "Escape") parent.postMessage({ type: "key", key: "escape" }, "*"); });
+})();`;
+
+// The project's theme for every document built here (set by the page that shows designs; see core/theme.js).
+// The theme's Tailwind config is added only where this adds Tailwind itself: a design that brings its own script keeps its own config.
+let previewTheme = null;
+export const setPreviewTheme = (theme) => { previewTheme = theme || null; };
+/** The head markup for the theme (the font and the config), or nothing without one. */
+export const themeMarkup = () => (previewTheme ? themeHead(previewTheme) : "");
+
+/** Builds a complete, standalone document for an iframe's srcdoc. */
+export function buildPreviewDocument(parsed, { width } = {}) {
+    const head = [
+        '<meta charset="utf-8">',
+        `<meta name="viewport" content="width=${width || "device-width"}, initial-scale=1">`,
+    ];
+
+    if (!parsed.hasTailwindScript) {
+        head.push('<script src="https://cdn.tailwindcss.com"><\/script>');
+        if (previewTheme) head.push(themeMarkup());
+    }
+    head.push(...parsed.links);
+    parsed.styles.forEach((s) => {
+        const type = s.type ? ` type="${escapeAttr(s.type)}"` : "";
+        head.push(`<style${type}>${s.text.replace(/<\/style/gi, "<\\/style")}</style>`);
+    });
+
+    const bodyAttrs = Object.entries(parsed.bodyAttrs)
+        .map(([k, v]) => ` ${k}="${escapeAttr(v)}"`)
+        .join("");
+
+    const scripts = parsed.scripts
+        .map((s) => {
+            const attrs =
+                (s.src ? ` src="${escapeAttr(s.src)}"` : "") +
+                (s.type ? ` type="${escapeAttr(s.type)}"` : "") +
+                (s.defer ? " defer" : "");
+            return `<script${attrs}>${s.src ? "" : escapeScript(s.text)}<\/script>`;
+        })
+        .join("\n");
+
+    return `<!DOCTYPE html>
+<html>
+<head>
+${head.join("\n")}
+<style>html,body{margin:0}</style>
+</head>
+<body${bodyAttrs}>
+${parsed.markup}
+${scripts}
+<script>${HEIGHT_REPORTER}<\/script>
+</body>
+</html>`;
+}