@uniformdev/canvas-react 19.135.0 → 19.135.1-alpha.11

package/dist/index.esm.js

@@ -233,6 +233,50 @@ var PureContextualEditingComponentWrapper = ({
 // src/components/UniformComposition.tsx
 import React4, { createContext, useContext } from "react";
 
+// src/hooks/useClientConditionsComposition.ts
+import {
+  evaluateWalkTreeNodeVisibility,
+  evaluateWalkTreePropertyCriteria,
+  walkNodeTree
+} from "@uniformdev/canvas";
+import { produce } from "immer";
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/useClientVisibilityRules.ts
+import { createQuirksVisibilityRule } from "@uniformdev/canvas";
+import { useQuirks } from "@uniformdev/context-react";
+import { useMemo } from "react";
+function useClientVisibilityRules() {
+  const quirks = useQuirks({ throwOnMissingProvider: false });
+  return useMemo(() => {
+    return {
+      ...createQuirksVisibilityRule(quirks)
+    };
+  }, [quirks]);
+}
+
+// src/hooks/useClientConditionsComposition.ts
+function useClientConditionsComposition(data) {
+  const rules = useClientVisibilityRules();
+  const preprocessedValue = useMemo2(() => {
+    if (!data) {
+      return data;
+    }
+    try {
+      return produce(data, (draft) => {
+        walkNodeTree(draft, (context) => {
+          evaluateWalkTreeNodeVisibility({ context, rules, showIndeterminate: false });
+          evaluateWalkTreePropertyCriteria({ node: context.node, rules, keepIndeterminate: false });
+        });
+      });
+    } catch (e) {
+      console.error("Error evaluating visibility rules:", e.stack);
+      return data;
+    }
+  }, [data, rules]);
+  return preprocessedValue;
+}
+
 // src/hooks/useUniformContextualEditing.ts
 import {
   createCanvasChannel,
@@ -243,14 +287,15 @@ import {
   isAllowedReferrer,
   isUpdateCompositionInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
   enhance = (message) => message.composition
 }) => {
   const [contextualComposition, setContextualComposition] = useState();
-  const channel = useMemo(() => {
+  const latestEventTimeStamp = useRef();
+  const channel = useMemo3(() => {
     var _a;
     if (!isInContextEditingMode()) {
       return;
@@ -273,8 +318,12 @@ var useUniformContextualEditing = ({
       if (!isUpdateCompositionInternalMessage(message)) {
         return;
       }
+      if (latestEventTimeStamp.current && message.eventTimestamp && message.eventTimestamp <= latestEventTimeStamp.current) {
+        return;
+      }
       const enhancedComposition = await enhance(message);
       setContextualComposition(enhancedComposition);
+      latestEventTimeStamp.current = message.eventTimestamp;
     });
     registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
     return () => {
@@ -336,8 +385,9 @@ function UniformComposition({
   contextualEditingEnhancer,
   contextualEditingDefaultPlaceholder
 }) {
+  const ruledComposition = useClientConditionsComposition(data);
   const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: data,
+    initialCompositionValue: ruledComposition,
     enhance: contextualEditingEnhancer
   });
   return /* @__PURE__ */ React4.createElement(
@@ -600,20 +650,19 @@ function resolveChildren({
 
 // src/components/UniformPlayground.tsx
 import { EMPTY_COMPOSITION as EMPTY_COMPOSITION4 } from "@uniformdev/canvas";
-import React8, { useMemo as useMemo2 } from "react";
+import React8, { useMemo as useMemo4 } from "react";
 var UniformPlayground = ({
   resolveRenderer,
   decorators = [],
   contextualEditingEnhancer,
   behaviorTracking,
-  contextualEditingDefaultPlaceholder,
-  children
+  contextualEditingDefaultPlaceholder
 }) => {
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: EMPTY_COMPOSITION4,
     enhance: contextualEditingEnhancer
   });
-  const renderedComponent = useMemo2(() => {
+  const renderedComponent = useMemo4(() => {
     if (!composition) {
       return null;
     }
@@ -624,21 +673,13 @@ var UniformPlayground = ({
         behaviorTracking,
         resolveRenderer,
         contextualEditingDefaultPlaceholder
-      },
-      children
+      }
     ));
     decorators.forEach((Decorator) => {
       component = /* @__PURE__ */ React8.createElement(Decorator, { data: composition }, component);
     });
     return component;
-  }, [
-    children,
-    resolveRenderer,
-    decorators,
-    composition,
-    behaviorTracking,
-    contextualEditingDefaultPlaceholder
-  ]);
+  }, [resolveRenderer, decorators, composition, behaviorTracking, contextualEditingDefaultPlaceholder]);
   return /* @__PURE__ */ React8.createElement(
     UniformCompositionContext.Provider,
     {
@@ -654,15 +695,12 @@ import {
   ATTRIBUTE_PARAMETER_ID,
   ATTRIBUTE_PARAMETER_TYPE
 } from "@uniformdev/canvas";
-import {
-  isRichTextValue,
-  isRichTextValueConsideredEmpty
-} from "@uniformdev/richtext";
-import React18, { useMemo as useMemo3 } from "react";
+import { isRichTextValue, isRichTextValueConsideredEmpty } from "@uniformdev/richtext";
+import React19 from "react";
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
-import React17 from "react";
+import React18 from "react";
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
 import React9 from "react";
@@ -716,26 +754,34 @@ var ParagraphRichTextNode = ({ children, node }) => {
   );
 };
 
-// src/components/UniformRichText/nodes/TabRichTextNode.tsx
+// src/components/UniformRichText/nodes/TableCellRichTextNode.tsx
+import { getRichTextTagFromTableCellHeaderState } from "@uniformdev/richtext";
 import React15 from "react";
+var TableCellRichTextNode = ({ children, node }) => {
+  const { headerState } = node;
+  const TableCellTag = getRichTextTagFromTableCellHeaderState(headerState);
+  return /* @__PURE__ */ React15.createElement(TableCellTag, null, children);
+};
+
+// src/components/UniformRichText/nodes/TabRichTextNode.tsx
+import React16 from "react";
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, "	");
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import React16 from "react";
+import React17 from "react";
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = getRichTextTagsFromTextFormat(format);
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React16.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React17.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 function UniformRichTextNode({ node, ...props }) {
   var _a;
-  if (!isRichTextNode(node))
-    return null;
+  if (!isRichTextNode(node)) return null;
   let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
   if (typeof NodeRenderer === "undefined") {
     NodeRenderer = resolveRichTextDefaultRenderer(node);
@@ -743,8 +789,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React17.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ React17.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React18.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ React18.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -753,49 +799,59 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ React17.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ React18.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ React17.createElement("pre", null, /* @__PURE__ */ React17.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ React18.createElement("pre", null, /* @__PURE__ */ React18.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ React17.createElement(React17.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React18.createElement(React18.Fragment, null, children)],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  [
+    "table",
+    ({ children }) => /* @__PURE__ */ React18.createElement("table", null, /* @__PURE__ */ React18.createElement("tbody", null, children))
+  ],
+  ["tablerow", ({ children }) => /* @__PURE__ */ React18.createElement("tr", null, children)],
+  ["tablecell", TableCellRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = React18.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
-  const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo3(() => {
-    var _a;
-    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
-  }, [componentData, parameterId]);
-  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
-  if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
+var UniformRichText = React19.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", placeholder, ...props }, ref) {
+  var _a;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  if (!parameter) {
     return null;
-  return Tag === null ? /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React18.createElement(
+  }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
+  const value = parameter.value;
+  if (!value || !isRichTextValue(value)) return null;
+  if (!isContextualEditing && isRichTextValueConsideredEmpty(value)) return null;
+  return Tag === null ? /* @__PURE__ */ React19.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React19.createElement(
     Tag,
     {
       ref,
       ...props,
-      ...{
+      ...isContextualEditing ? {
         [ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
         [ATTRIBUTE_PARAMETER_ID]: parameterId,
         [ATTRIBUTE_PARAMETER_TYPE]: "richText"
-      }
+      } : {}
     },
-    /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+    isRichTextValueConsideredEmpty(value) ? /* @__PURE__ */ React19.createElement("p", null, /* @__PURE__ */ React19.createElement("i", null, computedPlaceholder)) : /* @__PURE__ */ React19.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
   );
 });
 
 // src/components/UniformText.tsx
-import React20, { useState as useState2 } from "react";
+import React21, { useState as useState2 } from "react";
 
 // src/components/PureUniformText.tsx
-import React19 from "react";
+import React20 from "react";
 var PureUniformText = ({
   as: Tag = "span",
   parameterId,
@@ -814,10 +870,10 @@ var PureUniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React19.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React20.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
   const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Tag,
     {
       ...props,
@@ -855,7 +911,7 @@ var UniformText = ({
   }
   const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
   const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(
     PureUniformText,
     {
       ...props,
@@ -933,14 +989,17 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = useState3();
-  const channel = useMemo4(() => {
+  const [previewMode, setPreviewMode] = useState3(
+    isContextualEditing ? "editor" : void 0
+  );
+  const channel = useMemo5(() => {
     if (!isContextualEditing) {
       return;
     }
@@ -951,15 +1010,20 @@ var useUniformContextualEditingState = ({
     return channel2;
   }, [isContextualEditing]);
   useEffect3(() => {
+    var _a, _b;
     if (!channel) {
       return;
     }
+    if (typeof window !== "undefined") {
+      setPreviewMode((_b = (_a = window.__UNIFORM_CONTEXTUAL_EDITING__) == null ? void 0 : _a.state) == null ? void 0 : _b.previewMode);
+    }
     const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
-      var _a;
+      var _a2;
       if (!isUpdateContextualEditingStateInternalMessage(message)) {
         return;
       }
-      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+      setPreviewMode(message.state.previewMode);
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a2 = message.state.selectedComponentReference) == null ? void 0 : _a2.parentId)) {
         setSelectedComponentReference(void 0);
         return;
       }
@@ -968,13 +1032,14 @@ var useUniformContextualEditingState = ({
     return () => {
       unsubscribe();
     };
-  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference]);
-  return useMemo4(
+  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
+  return useMemo5(
     () => ({
       isContextualEditing,
-      selectedComponentReference
+      selectedComponentReference,
+      previewMode
     }),
-    [isContextualEditing, selectedComponentReference]
+    [isContextualEditing, selectedComponentReference, previewMode]
   );
 };
 export {