@typecms/sdk 0.1.0

package/dist/preview/index.mjs

@@ -0,0 +1,736 @@
+// src/preview/client.ts
+var DEFAULT_ALLOWED_ORIGINS = [
+  "https://app.typecms.com",
+  "https://staging.typecms.com",
+  "http://localhost:3000",
+  "http://localhost:3001"
+];
+function createPreviewClient(config = {}) {
+  const {
+    allowedOrigins = DEFAULT_ALLOWED_ORIGINS,
+    onInit,
+    onUpdate,
+    onNavigate,
+    onFocus,
+    debug = false
+  } = config;
+  let state = {
+    enabled: false,
+    entryId: null,
+    projectId: null,
+    locale: null,
+    typeId: null,
+    values: {},
+    focusedPath: null
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  let isConnected = false;
+  let parentOrigin = null;
+  function log(...args) {
+    if (debug) {
+      console.log("[TypeCMS Preview]", ...args);
+    }
+  }
+  function setState(updates) {
+    state = { ...state, ...updates };
+    listeners.forEach((listener) => listener(state));
+  }
+  function isAllowedOrigin(origin) {
+    return allowedOrigins.some((allowed) => {
+      if (allowed === "*") return true;
+      const expected = allowed.endsWith("/*") ? allowed.slice(0, -2) : allowed;
+      return origin === expected;
+    });
+  }
+  function sendMessage(message) {
+    if (!parentOrigin) {
+      log("Cannot send message: no parent origin");
+      return;
+    }
+    if (typeof window === "undefined" || !window.parent) {
+      log("Cannot send message: not in iframe");
+      return;
+    }
+    log("Sending message:", message.type);
+    window.parent.postMessage(message, parentOrigin);
+  }
+  function handleMessage(event) {
+    if (!isAllowedOrigin(event.origin)) {
+      log("Ignored message from untrusted origin:", event.origin);
+      return;
+    }
+    const message = event.data;
+    if (!message?.type?.startsWith("typecms:preview:")) {
+      return;
+    }
+    log("Received message:", message.type, message);
+    parentOrigin = event.origin;
+    switch (message.type) {
+      case "typecms:preview:init": {
+        const initMsg = message;
+        setState({
+          enabled: true,
+          entryId: initMsg.payload.entryId,
+          projectId: initMsg.payload.projectId,
+          locale: initMsg.payload.locale,
+          typeId: initMsg.payload.typeId,
+          values: {},
+          focusedPath: null
+        });
+        onInit?.(initMsg.payload);
+        const readyMessage = {
+          type: "typecms:preview:ready",
+          timestamp: Date.now(),
+          payload: {
+            pathname: typeof window !== "undefined" ? window.location.pathname : "/"
+          }
+        };
+        sendMessage(readyMessage);
+        break;
+      }
+      case "typecms:preview:update": {
+        const updateMsg = message;
+        if (updateMsg.payload.values) {
+          setState({ values: updateMsg.payload.values });
+        } else {
+          const newValues = { ...state.values };
+          setNestedValue(newValues, updateMsg.payload.path, updateMsg.payload.value);
+          setState({ values: newValues });
+        }
+        onUpdate?.(updateMsg.payload);
+        break;
+      }
+      case "typecms:preview:navigate": {
+        onNavigate?.(message.payload.url);
+        break;
+      }
+      case "typecms:preview:focus": {
+        setState({ focusedPath: message.payload.path });
+        onFocus?.(message.payload.path);
+        break;
+      }
+    }
+  }
+  return {
+    /**
+     * Start listening for preview messages.
+     * Call this on mount.
+     */
+    connect() {
+      if (typeof window === "undefined") {
+        log("Cannot connect: not in browser");
+        return;
+      }
+      if (isConnected) {
+        log("Already connected");
+        return;
+      }
+      log("Connecting...");
+      window.addEventListener("message", handleMessage);
+      isConnected = true;
+      if (window.parent && window.parent !== window) {
+        const hello = {
+          type: "typecms:preview:ready",
+          timestamp: Date.now(),
+          payload: { pathname: window.location?.pathname ?? "/" }
+        };
+        for (const allowed of allowedOrigins) {
+          const target = allowed === "*" ? "*" : allowed.endsWith("/*") ? allowed.slice(0, -2) : allowed;
+          try {
+            window.parent.postMessage(hello, target);
+          } catch {
+          }
+        }
+      }
+    },
+    /**
+     * Stop listening for preview messages.
+     * Call this on unmount.
+     */
+    disconnect() {
+      if (typeof window === "undefined") return;
+      log("Disconnecting...");
+      window.removeEventListener("message", handleMessage);
+      isConnected = false;
+      parentOrigin = null;
+      setState({
+        enabled: false,
+        entryId: null,
+        projectId: null,
+        locale: null,
+        typeId: null,
+        values: {},
+        focusedPath: null
+      });
+    },
+    /**
+     * Get current preview state.
+     */
+    getState() {
+      return state;
+    },
+    /**
+     * Check if preview mode is active.
+     */
+    isEnabled() {
+      return state.enabled;
+    },
+    /**
+     * Get a preview value by path.
+     * Returns undefined if no preview value exists.
+     */
+    getValue(path) {
+      return getNestedValue(state.values, path);
+    },
+    /**
+     * Subscribe to state changes.
+     */
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    /**
+     * Notify the editor that the preview has navigated.
+     */
+    notifyNavigation(pathname) {
+      const message = {
+        type: "typecms:preview:ready",
+        timestamp: Date.now(),
+        payload: { pathname }
+      };
+      sendMessage(message);
+    },
+    /**
+     * Notify the editor that a field was clicked in the preview.
+     * The editor will scroll to the corresponding field.
+     *
+     * @example
+     * ```typescript
+     * // On click of an element with data-preview-field attribute:
+     * const path = el.closest('[data-preview-field]')?.dataset.previewField
+     * if (path) preview.notifyFieldFocus(path)
+     * ```
+     */
+    notifyFieldFocus(path) {
+      const message = {
+        type: "typecms:preview:focus",
+        timestamp: Date.now(),
+        payload: { path }
+      };
+      sendMessage(message);
+    }
+  };
+}
+var UNSAFE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function setNestedValue(obj, path, value) {
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    const arrayMatch2 = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch2) {
+      const [, name, indexStr] = arrayMatch2;
+      const index = parseInt(indexStr, 10);
+      if (UNSAFE_KEYS.has(name)) continue;
+      if (!current[name]) {
+        current[name] = [];
+      }
+      const arr = current[name];
+      if (!arr[index]) {
+        arr[index] = {};
+      }
+      current = arr[index];
+    } else {
+      if (UNSAFE_KEYS.has(part)) continue;
+      if (!current[part] || typeof current[part] !== "object") {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+  }
+  const lastPart = parts[parts.length - 1];
+  const arrayMatch = lastPart.match(/^(\w+)\[(\d+)\]$/);
+  if (arrayMatch) {
+    const [, name, indexStr] = arrayMatch;
+    const index = parseInt(indexStr, 10);
+    if (UNSAFE_KEYS.has(name)) return;
+    if (!current[name]) {
+      current[name] = [];
+    }
+    current[name][index] = value;
+  } else {
+    if (UNSAFE_KEYS.has(lastPart)) return;
+    current[lastPart] = value;
+  }
+}
+function getNestedValue(obj, path) {
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) {
+      return void 0;
+    }
+    const arrayMatch = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch) {
+      const [, name, indexStr] = arrayMatch;
+      const index = parseInt(indexStr, 10);
+      const arr = current[name];
+      if (!arr) return void 0;
+      current = arr[index];
+    } else {
+      current = current[part];
+    }
+  }
+  return current;
+}
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = result[key];
+    if (sourceValue && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      result[key] = deepMerge(
+        targetValue,
+        sourceValue
+      );
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+
+// src/preview/overlay.ts
+var DEFAULT_OPTIONS = {
+  color: "#3b82f6",
+  zIndex: 9999,
+  scrollIntoView: true,
+  attribute: "data-preview-field"
+};
+function attachPreviewOverlay(client, options = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const { color, zIndex, scrollIntoView, attribute } = { ...DEFAULT_OPTIONS, ...options };
+  const box = document.createElement("div");
+  box.setAttribute("data-typecms-preview-overlay", "");
+  Object.assign(box.style, {
+    position: "fixed",
+    display: "none",
+    pointerEvents: "none",
+    boxSizing: "border-box",
+    border: `2px solid ${color}`,
+    borderRadius: "4px",
+    zIndex: String(zIndex),
+    transition: "top 120ms ease, left 120ms ease, width 120ms ease, height 120ms ease"
+  });
+  document.body.appendChild(box);
+  let target = null;
+  let lastPath = null;
+  function position() {
+    if (!target || !target.isConnected) {
+      box.style.display = "none";
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    Object.assign(box.style, {
+      display: "block",
+      top: `${rect.top - 2}px`,
+      left: `${rect.left - 2}px`,
+      width: `${rect.width + 4}px`,
+      height: `${rect.height + 4}px`
+    });
+  }
+  function update(state) {
+    const path = state.enabled ? state.focusedPath : null;
+    if (path === lastPath) return;
+    lastPath = path;
+    target = path ? document.querySelector(`[${attribute}="${CSS.escape(path)}"]`) : null;
+    if (target && scrollIntoView) {
+      target.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    position();
+  }
+  window.addEventListener("scroll", position, true);
+  window.addEventListener("resize", position);
+  const unsubscribe = client.subscribe(update);
+  update(client.getState());
+  return () => {
+    unsubscribe();
+    window.removeEventListener("scroll", position, true);
+    window.removeEventListener("resize", position);
+    box.remove();
+    target = null;
+  };
+}
+
+// src/preview/sourcemap.ts
+var DEFAULT_ATTRIBUTE = "data-preview-field";
+var DEFAULT_MIN_LENGTH = 3;
+var ELEMENT_NODE = 1;
+var TEXT_NODE = 3;
+function collectStringLeaves(value, prefix, out) {
+  if (typeof value === "string") {
+    const text = value.trim();
+    if (!text) return;
+    const paths = out.get(text);
+    if (paths) {
+      paths.push(prefix);
+    } else {
+      out.set(text, [prefix]);
+    }
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      collectStringLeaves(value[i], `${prefix}[${i}]`, out);
+    }
+    return;
+  }
+  if (value && typeof value === "object") {
+    for (const key of Object.keys(value)) {
+      const childPrefix = prefix ? `${prefix}.${key}` : key;
+      collectStringLeaves(value[key], childPrefix, out);
+    }
+  }
+}
+function ownText(el) {
+  const kids = el.childNodes;
+  if (!kids) return "";
+  let text = "";
+  for (let i = 0; i < kids.length; i++) {
+    const child = kids[i];
+    if (child.nodeType === TEXT_NODE) {
+      text += child.textContent ?? "";
+    }
+  }
+  return text.trim();
+}
+function walk(node, visit) {
+  if (node.nodeType === ELEMENT_NODE && typeof node.getAttribute === "function") {
+    if (!visit(node)) return false;
+  }
+  const kids = node.childNodes;
+  if (!kids) return true;
+  for (let i = 0; i < kids.length; i++) {
+    if (!walk(kids[i], visit)) return false;
+  }
+  return true;
+}
+function autoTagPreviewFields(client, options = {}) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const attribute = options.attribute ?? DEFAULT_ATTRIBUTE;
+  const minLength = options.minLength ?? DEFAULT_MIN_LENGTH;
+  const observe = options.observe ?? true;
+  const rootNode = options.root ?? document.body;
+  const taggedByPath = /* @__PURE__ */ new Map();
+  function isStillTagged(path) {
+    const el = taggedByPath.get(path);
+    if (!el) return false;
+    if (el.isConnected === false || el.getAttribute?.(attribute) !== path) {
+      taggedByPath.delete(path);
+      return false;
+    }
+    return true;
+  }
+  let lastState = client.getState();
+  function runPass(state) {
+    if (!state.enabled) return;
+    const values = state.values;
+    if (!values || Object.keys(values).length === 0) return;
+    const pathsByValue = /* @__PURE__ */ new Map();
+    collectStringLeaves(values, "", pathsByValue);
+    const candidates = /* @__PURE__ */ new Map();
+    pathsByValue.forEach((paths, text) => {
+      if (text.length < minLength) return;
+      if (paths.length !== 1) return;
+      if (isStillTagged(paths[0])) return;
+      candidates.set(text, paths[0]);
+    });
+    if (candidates.size === 0) return;
+    walk(rootNode, (el) => {
+      if (typeof el.getAttribute !== "function" || typeof el.setAttribute !== "function") {
+        return true;
+      }
+      if (el.getAttribute(attribute) !== null) return true;
+      const text = ownText(el);
+      if (!text) return true;
+      const path = candidates.get(text);
+      if (path === void 0) return true;
+      el.setAttribute(attribute, path);
+      taggedByPath.set(path, el);
+      candidates.delete(text);
+      return candidates.size > 0;
+    });
+  }
+  const unsubscribe = client.subscribe((state) => {
+    lastState = state;
+    runPass(state);
+  });
+  runPass(lastState);
+  let observer = null;
+  if (observe && typeof MutationObserver !== "undefined") {
+    observer = new MutationObserver((mutations) => {
+      const hasNodeChanges = mutations.some(
+        (m) => m.addedNodes && m.addedNodes.length > 0 || m.removedNodes && m.removedNodes.length > 0
+      );
+      if (hasNodeChanges) runPass(lastState);
+    });
+    observer.observe(rootNode, { childList: true, subtree: true });
+  }
+  return () => {
+    unsubscribe();
+    observer?.disconnect();
+    observer = null;
+    taggedByPath.forEach((el) => {
+      el.removeAttribute?.(attribute);
+    });
+    taggedByPath.clear();
+  };
+}
+
+// src/preview/richtext.ts
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isTipTapDoc(value) {
+  return isPlainObject(value) && value.type === "doc" && Array.isArray(value.content);
+}
+function isSlateDoc(value) {
+  return Array.isArray(value) && value.every((node) => isPlainObject(node) && ("children" in node || "text" in node));
+}
+function shareStructure(prev, next) {
+  if (prev === next || prev === void 0) {
+    return next;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    return shareArray(prev, next);
+  }
+  if (isPlainObject(prev) && isPlainObject(next)) {
+    return shareObject(prev, next);
+  }
+  return next;
+}
+function shareArray(prev, next) {
+  const prevLength = prev.length;
+  const nextLength = next.length;
+  const result = new Array(nextLength);
+  let tail = 0;
+  const maxTail = Math.min(prevLength, nextLength);
+  while (tail < maxTail) {
+    const prevItem = prev[prevLength - 1 - tail];
+    const shared = shareStructure(prevItem, next[nextLength - 1 - tail]);
+    if (shared !== prevItem) break;
+    result[nextLength - 1 - tail] = shared;
+    tail++;
+  }
+  const prevHeadLength = prevLength - tail;
+  for (let i = 0; i < nextLength - tail; i++) {
+    result[i] = i < prevHeadLength ? shareStructure(prev[i], next[i]) : next[i];
+  }
+  if (prevLength === nextLength) {
+    let allShared = true;
+    for (let i = 0; i < nextLength; i++) {
+      if (result[i] !== prev[i]) {
+        allShared = false;
+        break;
+      }
+    }
+    if (allShared) return prev;
+  }
+  return result;
+}
+function shareObject(prev, next) {
+  const nextKeys = Object.keys(next);
+  const result = {};
+  let allShared = nextKeys.length === Object.keys(prev).length;
+  for (const key of nextKeys) {
+    const hasPrev = Object.prototype.hasOwnProperty.call(prev, key);
+    const shared = hasPrev ? shareStructure(prev[key], next[key]) : next[key];
+    result[key] = shared;
+    if (!hasPrev || shared !== prev[key]) {
+      allShared = false;
+    }
+  }
+  return allShared ? prev : result;
+}
+function createRichTextPreview(options = {}) {
+  let lastDoc = options.initial;
+  return {
+    apply(nextDoc) {
+      const shared = shareStructure(lastDoc, nextDoc);
+      lastDoc = shared;
+      return shared;
+    },
+    reset() {
+      lastDoc = void 0;
+    }
+  };
+}
+
+// src/preview/react.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var PreviewContext = createContext(null);
+function PreviewProvider({ children, overlay, ...config }) {
+  const [state, setState] = useState({
+    enabled: false,
+    entryId: null,
+    projectId: null,
+    locale: null,
+    typeId: null,
+    values: {},
+    focusedPath: null
+  });
+  const client = useMemo(() => createPreviewClient(config), []);
+  useEffect(() => {
+    const unsubscribe = client.subscribe(setState);
+    client.connect();
+    return () => {
+      unsubscribe();
+      client.disconnect();
+    };
+  }, [client]);
+  const overlayRef = useRef(overlay);
+  overlayRef.current = overlay;
+  const overlayEnabled = !!overlay;
+  useEffect(() => {
+    if (!overlayEnabled) return;
+    const current = overlayRef.current;
+    return attachPreviewOverlay(client, current === true || !current ? {} : current);
+  }, [client, overlayEnabled]);
+  const getValue = useCallback(
+    (path) => {
+      return client.getValue(path);
+    },
+    [client]
+  );
+  const mergeContent = useCallback(
+    (content) => {
+      if (!state.enabled || Object.keys(state.values).length === 0) {
+        return content;
+      }
+      return deepMerge(content, state.values);
+    },
+    [state.enabled, state.values]
+  );
+  const notifyNavigation = useCallback(
+    (pathname) => {
+      client.notifyNavigation(pathname);
+    },
+    [client]
+  );
+  const notifyFieldFocus = useCallback(
+    (path) => {
+      client.notifyFieldFocus(path);
+    },
+    [client]
+  );
+  const value = useMemo(
+    () => ({
+      state,
+      isPreview: state.enabled,
+      getValue,
+      mergeContent,
+      notifyNavigation,
+      notifyFieldFocus
+    }),
+    [state, getValue, mergeContent, notifyNavigation, notifyFieldFocus]
+  );
+  return /* @__PURE__ */ jsx(PreviewContext.Provider, { value, children });
+}
+function usePreviewContext() {
+  const context = useContext(PreviewContext);
+  if (!context) {
+    throw new Error("usePreviewContext must be used within a PreviewProvider");
+  }
+  return context;
+}
+function useIsPreview() {
+  const context = useContext(PreviewContext);
+  return context?.state.enabled ?? false;
+}
+function usePreviewState() {
+  const context = useContext(PreviewContext);
+  return context?.state ?? null;
+}
+function usePreviewValue(path, fallback) {
+  const context = useContext(PreviewContext);
+  if (!context || !context.state.enabled) {
+    return fallback;
+  }
+  const previewValue = context.getValue(path);
+  return previewValue !== void 0 ? previewValue : fallback;
+}
+function usePreviewContent(content) {
+  const context = useContext(PreviewContext);
+  if (!context || !context.state.enabled) {
+    return content;
+  }
+  return context.mergeContent(content);
+}
+function useFocusedField() {
+  const context = useContext(PreviewContext);
+  return context?.state.focusedPath ?? null;
+}
+function usePreviewNavigation() {
+  const context = useContext(PreviewContext);
+  return context?.notifyNavigation ?? (() => {
+  });
+}
+function usePreviewFieldFocus() {
+  const context = useContext(PreviewContext);
+  return context?.notifyFieldFocus ?? (() => {
+  });
+}
+function usePreviewRichText(path, fallback) {
+  const context = useContext(PreviewContext);
+  const previewRef = useRef(null);
+  const pathRef = useRef(path);
+  if (previewRef.current === null) {
+    previewRef.current = createRichTextPreview();
+  }
+  if (pathRef.current !== path) {
+    pathRef.current = path;
+    previewRef.current.reset();
+  }
+  if (!context || !context.state.enabled) {
+    return fallback;
+  }
+  const previewValue = context.getValue(path);
+  return previewRef.current.apply(previewValue !== void 0 ? previewValue : fallback);
+}
+export {
+  PreviewProvider,
+  attachPreviewOverlay,
+  autoTagPreviewFields,
+  createPreviewClient,
+  createRichTextPreview,
+  deepMerge,
+  getNestedValue,
+  isSlateDoc,
+  isTipTapDoc,
+  shareStructure,
+  useFocusedField,
+  useIsPreview,
+  usePreviewContent,
+  usePreviewContext,
+  usePreviewFieldFocus,
+  usePreviewNavigation,
+  usePreviewRichText,
+  usePreviewState,
+  usePreviewValue
+};
+//# sourceMappingURL=index.mjs.map