@blinkk/root-cms 3.0.1-alpha.1 → 3.0.1-beta.2

package/dist/richtext.js

@@ -1,70 +1,99 @@
 import "./chunk-MLKGABMK.js";
 
 // core/richtext.tsx
-import { useTranslations } from "@blinkk/root";
-import { createContext } from "preact";
+import { StringParamsProvider, useTranslations } from "@blinkk/root";
+import { Component, createContext } from "preact";
 import { useContext } from "preact/hooks";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { renderToString } from "preact-render-to-string";
+import { jsx, jsxs } from "preact/jsx-runtime";
 var RichTextContext = createContext({});
 function useRichTextContext() {
   return useContext(RichTextContext);
 }
+var RichTextComponentMapContext = createContext({});
+function useRichTextContextComponentMap() {
+  return useContext(RichTextComponentMapContext);
+}
+function useRichTextTranslations() {
+  const ctx = useRichTextContext();
+  if (ctx.t) {
+    return ctx.t;
+  }
+  return useTranslations();
+}
 function RichText(props) {
+  const blocks = props.data?.blocks || [];
+  if (blocks.length === 0) {
+    return null;
+  }
   const richTextContext = useRichTextContext();
-  const components = {
-    delimiter: RichText.DelimiterBlock,
+  const componentMap = {
     heading: RichText.HeadingBlock,
     html: RichText.HtmlBlock,
     image: RichText.ImageBlock,
     orderedList: RichText.ListBlock,
     paragraph: RichText.ParagraphBlock,
-    quote: RichText.QuoteBlock,
     table: RichText.TableBlock,
     unorderedList: RichText.ListBlock,
     ...richTextContext.components,
     ...props.components
   };
-  const blocks = (props.data?.blocks || []).filter((block) => {
-    const blockType = block?.type;
-    if (!blockType) {
-      return false;
-    }
-    if (!(blockType in components)) {
-      console.warn(`ignoring unknown richtext type: "${blockType}"`);
-      return false;
-    }
-    return true;
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: blocks.map((block) => {
-    const Block = components[block.type];
-    return /* @__PURE__ */ jsx(Block, { ...block });
-  }) });
+  return /* @__PURE__ */ jsx(RichTextComponentMapContext.Provider, { value: componentMap, children: blocks.map((block) => {
+    return /* @__PURE__ */ jsx(RichText.Block, { ...block });
+  }).filter((value) => !!value) });
 }
-RichText.ParagraphBlock = (props) => {
-  if (!props.data?.text) {
+RichText.Block = (props) => {
+  const block = props;
+  const blockType = block?.type;
+  if (!blockType) {
     return null;
   }
-  const t = useTranslations();
-  return /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: t(props.data.text) } });
+  const componentMap = useRichTextContextComponentMap();
+  const BlockComponent = componentMap[blockType];
+  if (!BlockComponent) {
+    console.warn(`[RichText] ignoring unknown richtext type: "${blockType}"`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    InlineComponentRenderer,
+    {
+      block,
+      componentMap,
+      BlockComponent
+    }
+  );
 };
-RichText.DelimiterBlock = () => {
-  return /* @__PURE__ */ jsx("hr", {});
+var InlineComponentRenderer = class extends Component {
+  render() {
+    const { block, componentMap, BlockComponent } = this.props;
+    const stringParams = collectInlineComponentParams(
+      block,
+      componentMap,
+      this.context
+    );
+    if (stringParams) {
+      return /* @__PURE__ */ jsx(StringParamsProvider, { value: stringParams, children: /* @__PURE__ */ jsx(BlockComponent, { ...block }) });
+    }
+    return /* @__PURE__ */ jsx(BlockComponent, { ...block });
+  }
 };
-RichText.HeadingBlock = (props) => {
+RichText.ParagraphBlock = (props) => {
   if (!props.data?.text) {
     return null;
   }
-  const t = useTranslations();
-  const level = props.data.level || 2;
-  const Component = `h${level}`;
-  return /* @__PURE__ */ jsx(Component, { dangerouslySetInnerHTML: { __html: t(props.data.text) } });
+  const t = useRichTextTranslations();
+  const html = t(props.data.text);
+  return /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: html } });
 };
-RichText.QuoteBlock = (props) => {
+RichText.HeadingBlock = (props) => {
   if (!props.data?.text) {
     return null;
   }
-  const t = useTranslations();
-  return /* @__PURE__ */ jsx("blockquote", { dangerouslySetInnerHTML: { __html: t(props.data.text) } });
+  const t = useRichTextTranslations();
+  const level = props.data.level || 2;
+  const Component2 = `h${level}`;
+  const html = t(props.data.text);
+  return /* @__PURE__ */ jsx(Component2, { dangerouslySetInnerHTML: { __html: html } });
 };
 RichText.ListBlock = (props) => {
   if (!props.data?.items?.length) {
@@ -74,20 +103,20 @@ RichText.ListBlock = (props) => {
   if (!style) {
     style = props.type === "orderedList" ? "ordered" : "unordered";
   }
-  const Component = style === "ordered" ? "ol" : "ul";
+  const Component2 = style === "ordered" ? "ol" : "ul";
   const items = props.data.items;
-  return /* @__PURE__ */ jsx(Component, { children: items.map((item) => {
+  return /* @__PURE__ */ jsx(Component2, { children: items.map((item) => {
     if (item.content || item.items?.length) {
       return /* @__PURE__ */ jsxs("li", { children: [
         item.content && /* @__PURE__ */ jsx(
-          RichText.ParagraphBlock,
+          RichText.Block,
           {
             type: "paragraph",
-            data: { text: item.content }
+            data: { text: item.content, components: item.components }
           }
         ),
         item.items && item.items.length > 0 && /* @__PURE__ */ jsx(
-          RichText.ListBlock,
+          RichText.Block,
           {
             type: props.type,
             data: { style, items: item.items }
@@ -109,7 +138,8 @@ RichText.ImageBlock = (props) => {
   return /* @__PURE__ */ jsx("img", { src: imageUrl, width, height, alt });
 };
 RichText.HtmlBlock = (props) => {
-  const html = props.data?.html || "";
+  const t = useRichTextTranslations();
+  const html = t(props.data?.html || "");
   if (!html) {
     return null;
   }
@@ -122,8 +152,7 @@ RichText.TableBlock = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: row.cells.map((cell, cellIndex) => {
-    const isHeader = cell.type === "header";
-    const Cell = isHeader ? "th" : "td";
+    const Cell = cell.type === "header" ? "th" : "td";
     return /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(
       RichText,
       {
@@ -146,8 +175,34 @@ function toNumber(input) {
   }
   return parsedNumber;
 }
+function testContent(data) {
+  return data?.blocks?.length > 0;
+}
+function collectInlineComponentParams(block, componentMap, renderContext) {
+  const components = block?.data?.components || {};
+  if (Object.keys(components).length === 0) {
+    return null;
+  }
+  const params = {};
+  for (const [componentId, component] of Object.entries(components)) {
+    const Component2 = componentMap[component.type];
+    if (Component2) {
+      const key = `${component.type}:${componentId}`;
+      params[key] = renderToString(
+        /* @__PURE__ */ jsx(Component2, { ...component.data }),
+        renderContext
+      );
+    } else {
+      console.warn(
+        `[RichText] could not find inline component for type: "${component.type}"`
+      );
+    }
+  }
+  return params;
+}
 export {
   RichText,
   RichTextContext,
+  testContent,
   useRichTextContext
 };

package/dist/{schema-rjBOZk-j.d.ts → schema-Db_xODoi.d.ts}

@@ -155,6 +155,11 @@ type ArrayField = CommonFieldProps & {
      * Label to use for the "add item" button. Defaults to `Add`.
      */
     buttonLabel?: string;
+    /**
+     * Whether array items should be open (expanded) by default. Defaults to
+     * `false`, meaning items start collapsed.
+     */
+    defaultOpen?: boolean;
 };
 declare function array(field: Omit<ArrayField, 'type'>): ArrayField;
 /**

package/dist/ui/signin.css

@@ -1 +1 @@
-:root{--font-family-default: "Inter", sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--color-text-default: #333333;--color-border: #EFEFEF;--button-background-hover: #F5F5F5;--button-background-active: #E5E5E5}html{box-sizing:border-box;overflow-x:hidden;font-size:16px;line-height:1.5}*,*:before,*:after{box-sizing:inherit}html,body{font-family:var(--font-family-default);color:var(--color-text-default);height:100%;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}img,picture,figure,video,canvas,svg,iframe{display:block;max-width:100%;height:auto;margin:0}a{color:inherit}select{color-scheme:light}h1,h2,h3,h4,h5,p{margin:0}body.menu\:open{overflow:hidden}#root{margin:0 auto;min-height:100vh;position:relative}.bootstrap{font-size:48px;font-weight:900;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;gap:36px;position:relative}.bootstrap-error{font-size:14px;font-weight:400;line-height:20px;position:absolute;bottom:100px;left:0;right:0;text-align:center;animation:.5s forwards bootstrap-loading-error;animation-delay:1s;opacity:0;padding:0 24px}@keyframes bootstrap-loading-error{0%{opacity:0}to{opacity:1}}.signin{font-family:Google Sans,arial,sans-serif;text-align:center;padding:48px 20px;color:#3c4043}.signin__headline{margin-bottom:40px}.signin__headline__title{font-size:36px;line-height:1.3;font-weight:500;margin-bottom:20px}.signin__headline__body{font-size:18px;line-height:1.5;font-weight:500}.signin__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;text-align:center;gap:12px;background:#fff;border:1px solid #dadce0;border-radius:4px;cursor:pointer;font-family:inherit;padding:0 12px;height:40px;box-sizing:border-box;transition:all .218s ease}.signin__warning{max-width:520px;margin:0 auto 40px;padding:12px;border:1px solid #fbbc04;border-radius:8px;background:#fff9db;color:#5f370e;font-size:14px;line-height:1.5}.signin__button:hover{border-color:#d2e3fc;background-color:#4285f40a}.signin__button__icon{width:18px;height:18px;background-color:#fff}.signin__button__label{font-size:14px;line-height:1;letter-spacing:.25px;font-weight:500;color:#3c4043}.signin__error{color:red;font-weight:700;text-align:center;max-width:60ch;margin:20px auto 0}
+:root{--font-family-default: "Inter", sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--color-text-default: #333333;--color-border: #EFEFEF;--button-background-hover: #F5F5F5;--button-background-active: #E5E5E5}html{box-sizing:border-box;overflow-x:hidden;font-size:16px;line-height:1.5}*,*:before,*:after{box-sizing:inherit}html,body{font-family:var(--font-family-default);color:var(--color-text-default);height:100%;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}img,picture,figure,video,canvas,svg,iframe{display:block;max-width:100%;height:auto;margin:0}a{color:inherit}select{color-scheme:light}h1,h2,h3,h4,h5,p{margin:0}body.menu\:open{overflow:hidden}#root{margin:0 auto;min-height:100vh;position:relative}.bootstrap{font-size:48px;font-weight:900;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;gap:36px;position:relative}.bootstrap-error{font-size:14px;font-weight:400;line-height:20px;position:absolute;bottom:100px;left:0;right:0;text-align:center;animation:.5s forwards bootstrap-loading-error;animation-delay:1s;opacity:0;padding:0 24px}.bootstrap--error{gap:16px}.bootstrap__error-title{font-size:48px;font-weight:900;line-height:1.1;margin:0}.bootstrap__error-message{color:#b00020;font-size:16px;font-weight:500;line-height:1.5;margin:0;max-width:640px}@keyframes bootstrap-loading-error{0%{opacity:0}to{opacity:1}}.signin{font-family:Google Sans,arial,sans-serif;text-align:center;padding:48px 20px;color:#3c4043}.signin__headline{margin-bottom:40px}.signin__headline__title{font-size:36px;line-height:1.3;font-weight:500;margin-bottom:20px}.signin__headline__body{font-size:18px;line-height:1.5;font-weight:500}.signin__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;text-align:center;gap:12px;background:#fff;border:1px solid #dadce0;border-radius:4px;cursor:pointer;font-family:inherit;padding:0 12px;height:40px;box-sizing:border-box;transition:all .218s ease}.signin__warning{max-width:520px;margin:0 auto 40px;padding:12px;border:1px solid #fbbc04;border-radius:8px;background:#fff9db;color:#5f370e;font-size:14px;line-height:1.5}.signin__button:hover{border-color:#d2e3fc;background-color:#4285f40a}.signin__button__icon{width:18px;height:18px;background-color:#fff}.signin__button__label{font-size:14px;line-height:1;letter-spacing:.25px;font-weight:500;color:#3c4043}.signin__button--busy{cursor:default;opacity:.85;border-color:#d2e3fc;background-color:#4285f40a}.signin__button--busy:hover{background-color:#4285f40a}.signin__spinner{width:18px;height:18px;color:#4285f4;animation:signin-spin .7s linear infinite}@keyframes signin-spin{to{transform:rotate(360deg)}}.signin__error{color:red;font-weight:700;text-align:center;max-width:60ch;margin:20px auto 0}