@foir/sdk 0.7.0 → 0.9.0

package/dist/content.js

@@ -1,19 +1,5 @@
 // src/content/content-renderer.tsx
-import { Fragment } from "react";
-import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
-function createContentRenderer(registry) {
-  return function ContentRenderer({ blocks, ctx }) {
-    if (!blocks?.length) return null;
-    let priorityAssigned = false;
-    return /* @__PURE__ */ jsx(Fragment2, { children: blocks.map((block, i) => {
-      const Component = registry[block.__typename];
-      if (!Component) return null;
-      const priority = !priorityAssigned;
-      priorityAssigned = true;
-      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Component, { block, ctx, priority }) }, block._id ?? i);
-    }) });
-  };
-}
+import { Fragment as Fragment2 } from "react";
 
 // src/content/richtext.tsx
 import {
@@ -21,7 +7,7 @@ import {
   createElement,
   useContext
 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function safeHref(url) {
   if (!url) return "#";
   const trimmed = url.trim();
@@ -39,28 +25,49 @@ function RichTextTypographyProvider({
   tokens,
   children
 }) {
-  return /* @__PURE__ */ jsx2(TypographyContext.Provider, { value: tokens, children });
+  return /* @__PURE__ */ jsx(TypographyContext.Provider, { value: tokens, children });
 }
 function useRichTextTypography() {
   return useContext(TypographyContext);
 }
-var TEXT_FORMAT_BOLD = 1;
-var TEXT_FORMAT_ITALIC = 2;
-var TEXT_FORMAT_STRIKETHROUGH = 4;
-var TEXT_FORMAT_UNDERLINE = 8;
-var TEXT_FORMAT_CODE = 16;
+var DECORATION_TAGS = {
+  bold: "strong",
+  italic: "em",
+  underline: "u",
+  strikethrough: "s",
+  code: "code",
+  subscript: "sub",
+  superscript: "sup",
+  highlight: "mark"
+};
+function isPassageEntry(entry) {
+  if (!entry || typeof entry !== "object") return false;
+  const e = entry;
+  return e.__typename === "Passage" || e._type === "passage";
+}
+function passagesOf(value) {
+  if (!value) return [];
+  if (Array.isArray(value.entries)) {
+    return value.entries.filter(isPassageEntry);
+  }
+  const flow = value.json;
+  if (flow && typeof flow === "object") {
+    const entries = flow.entries;
+    if (Array.isArray(entries)) return entries.filter(isPassageEntry);
+  }
+  return [];
+}
 function RichTextRenderer({
   value,
   className,
   tokens,
   fallbackTag = "p"
 }) {
-  const contextTokens = useRichTextTypography();
-  const typography = tokens ?? contextTokens ?? [];
   if (!value) return null;
-  if (!value.json) {
+  const passages = passagesOf(value);
+  if (passages.length === 0) {
     if (value.html) {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         "div",
         {
           className,
@@ -70,72 +77,164 @@ function RichTextRenderer({
     }
     return null;
   }
-  const root = value.json && typeof value.json === "object" ? value.json.root ?? null : null;
-  if (!root || !Array.isArray(root.children) || root.children.length === 0) {
-    return null;
-  }
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(PassageList, { passages, tokens, fallbackTag }) });
+}
+function PassageList({
+  passages,
+  tokens,
+  fallbackTag = "p"
+}) {
+  const contextTokens = useRichTextTypography();
+  const typography = tokens ?? contextTokens ?? [];
   const tokenMap = /* @__PURE__ */ new Map();
   for (const t of typography) {
     tokenMap.set(t.name, t);
   }
-  return /* @__PURE__ */ jsx2("div", { className, children: root.children.map(
-    (node, i) => renderBlockNode(node, i, tokenMap, fallbackTag)
-  ) });
-}
-function renderBlockNode(node, key, tokens, fallbackTag) {
-  const type = node.type;
-  if (type === "paragraph" || type === "heading" || type === "quote") {
-    const styleKey = typeof node.style === "string" && node.style.length > 0 ? node.style : null;
-    const token = styleKey ? tokens.get(styleKey) ?? null : null;
-    const tag = pickTag(node, token, fallbackTag);
-    const styleProps = tokenToCss(token, node.format);
-    const children = (node.children ?? []).map(
-      (child, i) => renderInlineNode(child, i)
-    );
-    return createElement(tag, { key, style: styleProps }, ...children);
+  const out = [];
+  let i = 0;
+  while (i < passages.length) {
+    const passage = passages[i];
+    if (passage.list) {
+      const run = [];
+      while (i < passages.length && passages[i].list) {
+        run.push(passages[i]);
+        i++;
+      }
+      out.push(
+        /* @__PURE__ */ jsx(
+          ListRun,
+          {
+            run,
+            level: minLevel(run),
+            tokens: tokenMap
+          },
+          run[0]._key ?? `list-${out.length}`
+        )
+      );
+      continue;
+    }
+    out.push(renderPassage(passage, passage._key ?? i, tokenMap, fallbackTag));
+    i++;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: out });
+}
+function minLevel(run) {
+  let min = Infinity;
+  for (const p of run) min = Math.min(min, p.level ?? 1);
+  return Number.isFinite(min) ? min : 1;
+}
+function ListRun({
+  run,
+  level,
+  tokens
+}) {
+  const items = [];
+  let i = 0;
+  while (i < run.length) {
+    const passage = run[i];
+    if ((passage.level ?? 1) > level) {
+      const deep = [];
+      while (i < run.length && (run[i].level ?? 1) > level) {
+        deep.push(run[i]);
+        i++;
+      }
+      const nested = /* @__PURE__ */ jsx(ListRun, { run: deep, level: level + 1, tokens });
+      const prev = items[items.length - 1];
+      if (prev && !prev.nested) {
+        prev.nested = nested;
+      } else {
+        items.push({
+          key: deep[0]._key ?? `d${items.length}`,
+          content: null,
+          nested,
+          type: deep[0].list ?? "bullet"
+        });
+      }
+      continue;
+    }
+    const token = passage.token ? tokens.get(passage.token) ?? null : null;
+    items.push({
+      key: passage._key ?? `li${items.length}`,
+      content: /* @__PURE__ */ jsx("span", { style: tokenToCss(token, passage.align), children: renderSpans(passage) }),
+      nested: null,
+      type: passage.list ?? "bullet"
+    });
+    i++;
   }
-  if (type === "list") {
-    const ordered = node.listType === "number";
-    const ListTag = ordered ? "ol" : "ul";
-    return /* @__PURE__ */ jsx2(ListTag, { children: (node.children ?? []).map((child, i) => /* @__PURE__ */ jsx2("li", { children: (child.children ?? []).map((c, j) => renderInlineNode(c, j)) }, i)) }, key);
+  const lists = [];
+  let group = [];
+  const flush = () => {
+    if (group.length === 0) return;
+    const ListTag = group[0].type === "number" ? "ol" : "ul";
+    lists.push(
+      /* @__PURE__ */ jsx(ListTag, { children: group.map((item) => /* @__PURE__ */ jsxs("li", { children: [
+        item.content,
+        item.nested
+      ] }, item.key)) }, group[0].key)
+    );
+    group = [];
+  };
+  for (const item of items) {
+    if (group.length > 0 && group[0].type !== item.type) flush();
+    group.push(item);
   }
-  if (Array.isArray(node.children)) {
-    return /* @__PURE__ */ jsx2("div", { children: node.children.map((child, i) => renderInlineNode(child, i)) }, key);
+  flush();
+  return /* @__PURE__ */ jsx(Fragment, { children: lists });
+}
+function renderPassage(passage, key, tokens, fallbackTag) {
+  const token = passage.token ? tokens.get(passage.token) ?? null : null;
+  const style = tokenToCss(token, passage.align);
+  if (passage.kind === "code") {
+    return /* @__PURE__ */ jsx("pre", { style, children: /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: passage.language ? `language-${passage.language}` : void 0,
+        children: (passage.spans ?? []).map((s) => s?.text ?? "").join("")
+      }
+    ) }, key);
   }
-  return null;
-}
-function renderInlineNode(node, key) {
-  if (node.type === "text") {
-    const formatBits = typeof node.format === "number" ? node.format : 0;
-    let el = node.text ?? "";
-    if (formatBits & TEXT_FORMAT_CODE) el = /* @__PURE__ */ jsx2("code", { children: el });
-    if (formatBits & TEXT_FORMAT_BOLD) el = /* @__PURE__ */ jsx2("strong", { children: el });
-    if (formatBits & TEXT_FORMAT_ITALIC) el = /* @__PURE__ */ jsx2("em", { children: el });
-    if (formatBits & TEXT_FORMAT_UNDERLINE) el = /* @__PURE__ */ jsx2("u", { children: el });
-    if (formatBits & TEXT_FORMAT_STRIKETHROUGH) el = /* @__PURE__ */ jsx2("s", { children: el });
-    return /* @__PURE__ */ jsx2("span", { children: el }, key);
+  const tag = pickTag(passage, token, fallbackTag);
+  return createElement(tag, { key, style }, ...[renderSpans(passage)]);
+}
+function renderSpans(passage) {
+  const markDefs = Array.isArray(passage.markDefs) ? passage.markDefs : [];
+  return (passage.spans ?? []).flatMap((span, i) => {
+    if (!span) return [];
+    return [renderSpan(span, i, markDefs)];
+  });
+}
+function renderSpan(span, key, markDefs) {
+  const parts = (span.text ?? "").split("\n");
+  let el = parts.length === 1 ? parts[0] : parts.flatMap(
+    (part, i) => i === 0 ? [part] : [/* @__PURE__ */ jsx("br", {}, `br${i}`), part]
+  );
+  let link = null;
+  for (const mark of span.marks ?? []) {
+    if (!mark) continue;
+    const decorationTag = DECORATION_TAGS[mark];
+    if (decorationTag) {
+      el = createElement(decorationTag, null, el);
+      continue;
+    }
+    const def = markDefs.find((d) => d._key === mark);
+    if (def?.type === "link" && def.href) link = def;
   }
-  if (node.type === "linebreak") return /* @__PURE__ */ jsx2("br", {}, key);
-  if (node.type === "link") {
-    const href = safeHref(node.url);
-    const target = node.target;
+  if (link?.href) {
+    const href = safeHref(link.href);
+    const target = link.target;
     const rel = target && target !== "_self" ? "noopener noreferrer" : void 0;
-    return /* @__PURE__ */ jsx2("a", { href, target, rel, children: (node.children ?? []).map((c, i) => renderInlineNode(c, i)) }, key);
-  }
-  if (Array.isArray(node.children)) {
-    return /* @__PURE__ */ jsx2("span", { children: node.children.map((c, i) => renderInlineNode(c, i)) }, key);
+    el = /* @__PURE__ */ jsx("a", { href, target, rel, children: el });
   }
-  return null;
+  return /* @__PURE__ */ jsx("span", { children: el }, key);
 }
-function pickTag(node, token, fallback) {
+function pickTag(passage, token, fallback) {
   if (token?.tag) return token.tag;
-  if (node.type === "heading" && typeof node.tag === "string") {
-    return node.tag;
-  }
-  if (node.type === "quote") return "blockquote";
+  const kind = passage.kind;
+  if (kind && /^h[1-6]$/.test(kind)) return kind;
+  if (kind === "quote") return "blockquote";
   return fallback;
 }
-function tokenToCss(token, paragraphFormat) {
+function tokenToCss(token, align) {
   const style = {};
   if (token) {
     const v = token.value;
@@ -148,14 +247,62 @@ function tokenToCss(token, paragraphFormat) {
       style.textTransform = v.textTransform;
     }
   }
-  if (typeof paragraphFormat === "string" && paragraphFormat !== "") {
-    style.textAlign = paragraphFormat;
+  if (align) {
+    style.textAlign = align;
   }
   return Object.keys(style).length > 0 ? style : void 0;
 }
+
+// src/content/content-renderer.tsx
+import { Fragment as Fragment3, jsx as jsx2 } from "react/jsx-runtime";
+function DefaultPassageRun({ passages }) {
+  return /* @__PURE__ */ jsx2(PassageList, { passages });
+}
+function createContentRenderer(registry, options) {
+  const PassageRun = options?.passageRun ?? DefaultPassageRun;
+  return function ContentRenderer(props) {
+    const { ctx } = props;
+    const value = props.items ?? props.blocks;
+    const items = Array.isArray(value) ? value : value?.entries ?? null;
+    if (!items?.length) return null;
+    let priorityAssigned = false;
+    const out = [];
+    let run = [];
+    const flushRun = () => {
+      if (run.length === 0) return;
+      const priority = !priorityAssigned;
+      priorityAssigned = true;
+      out.push(
+        /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(PassageRun, { passages: run, ctx, priority }) }, run[0]._key ?? `run-${out.length}`)
+      );
+      run = [];
+    };
+    items.forEach((item, i) => {
+      if (!item) return;
+      if (isPassageEntry(item)) {
+        run.push(item);
+        return;
+      }
+      flushRun();
+      const Component = registry[item.__typename];
+      if (!Component) return;
+      const priority = !priorityAssigned;
+      priorityAssigned = true;
+      out.push(
+        /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(Component, { item, block: item, ctx, priority }) }, item._key ?? item._id ?? i)
+      );
+    });
+    flushRun();
+    return /* @__PURE__ */ jsx2(Fragment3, { children: out });
+  };
+}
 export {
+  PassageList,
   RichTextRenderer,
   RichTextTypographyProvider,
   createContentRenderer,
+  isPassageEntry,
+  passagesOf,
+  safeHref,
   useRichTextTypography
 };