@uniformdev/canvas-react 19.173.0 → 19.173.2-alpha.210
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +217 -85
- package/dist/index.d.ts +217 -85
- package/dist/index.esm.js +60 -38
- package/dist/index.js +65 -44
- package/dist/index.mjs +60 -38
- package/package.json +9 -9
package/dist/index.js
CHANGED
|
@@ -301,7 +301,8 @@ function useClientConditionsComposition(data) {
|
|
|
301
301
|
try {
|
|
302
302
|
return (0, import_immer.produce)(data, (draft) => {
|
|
303
303
|
(0, import_canvas5.walkNodeTree)(draft, (context) => {
|
|
304
|
-
(0, import_canvas5.
|
|
304
|
+
(0, import_canvas5.evaluateWalkTreeNodeVisibility)({ context, rules, showIndeterminate: false });
|
|
305
|
+
(0, import_canvas5.evaluateWalkTreePropertyCriteria)({ node: context.node, rules, keepIndeterminate: false });
|
|
305
306
|
});
|
|
306
307
|
});
|
|
307
308
|
} catch (e) {
|
|
@@ -718,12 +719,12 @@ var UniformPlayground = ({
|
|
|
718
719
|
|
|
719
720
|
// src/components/UniformRichText/UniformRichText.tsx
|
|
720
721
|
var import_canvas11 = require("@uniformdev/canvas");
|
|
721
|
-
var
|
|
722
|
-
var
|
|
722
|
+
var import_richtext6 = require("@uniformdev/richtext");
|
|
723
|
+
var import_react21 = __toESM(require("react"));
|
|
723
724
|
|
|
724
725
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
725
|
-
var
|
|
726
|
-
var
|
|
726
|
+
var import_richtext5 = require("@uniformdev/richtext");
|
|
727
|
+
var import_react20 = __toESM(require("react"));
|
|
727
728
|
|
|
728
729
|
// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
|
|
729
730
|
var import_react11 = __toESM(require("react"));
|
|
@@ -777,25 +778,34 @@ var ParagraphRichTextNode = ({ children, node }) => {
|
|
|
777
778
|
);
|
|
778
779
|
};
|
|
779
780
|
|
|
780
|
-
// src/components/UniformRichText/nodes/
|
|
781
|
+
// src/components/UniformRichText/nodes/TableCellRichTextNode.tsx
|
|
782
|
+
var import_richtext3 = require("@uniformdev/richtext");
|
|
781
783
|
var import_react17 = __toESM(require("react"));
|
|
784
|
+
var TableCellRichTextNode = ({ children, node }) => {
|
|
785
|
+
const { headerState } = node;
|
|
786
|
+
const TableCellTag = (0, import_richtext3.getRichTextTagFromTableCellHeaderState)(headerState);
|
|
787
|
+
return /* @__PURE__ */ import_react17.default.createElement(TableCellTag, null, children);
|
|
788
|
+
};
|
|
789
|
+
|
|
790
|
+
// src/components/UniformRichText/nodes/TabRichTextNode.tsx
|
|
791
|
+
var import_react18 = __toESM(require("react"));
|
|
782
792
|
var TabRichTextNode = () => {
|
|
783
|
-
return /* @__PURE__ */
|
|
793
|
+
return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, " ");
|
|
784
794
|
};
|
|
785
795
|
|
|
786
796
|
// src/components/UniformRichText/nodes/TextRichTextNode.tsx
|
|
787
|
-
var
|
|
788
|
-
var
|
|
797
|
+
var import_richtext4 = require("@uniformdev/richtext");
|
|
798
|
+
var import_react19 = __toESM(require("react"));
|
|
789
799
|
var TextRichTextNode = ({ node }) => {
|
|
790
800
|
const { text, format } = node;
|
|
791
|
-
const tags = (0,
|
|
792
|
-
return /* @__PURE__ */
|
|
801
|
+
const tags = (0, import_richtext4.getRichTextTagsFromTextFormat)(format);
|
|
802
|
+
return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react19.default.createElement(Tag, null, children), text) : text);
|
|
793
803
|
};
|
|
794
804
|
|
|
795
805
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
796
806
|
function UniformRichTextNode({ node, ...props }) {
|
|
797
807
|
var _a;
|
|
798
|
-
if (!(0,
|
|
808
|
+
if (!(0, import_richtext5.isRichTextNode)(node)) return null;
|
|
799
809
|
let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
|
|
800
810
|
if (typeof NodeRenderer === "undefined") {
|
|
801
811
|
NodeRenderer = resolveRichTextDefaultRenderer(node);
|
|
@@ -803,8 +813,8 @@ function UniformRichTextNode({ node, ...props }) {
|
|
|
803
813
|
if (!NodeRenderer) {
|
|
804
814
|
return null;
|
|
805
815
|
}
|
|
806
|
-
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */
|
|
807
|
-
return /* @__PURE__ */
|
|
816
|
+
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react20.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
|
|
817
|
+
return /* @__PURE__ */ import_react20.default.createElement(NodeRenderer, { node }, children);
|
|
808
818
|
}
|
|
809
819
|
var rendererMap = /* @__PURE__ */ new Map([
|
|
810
820
|
["heading", HeadingRichTextNode],
|
|
@@ -813,48 +823,59 @@ var rendererMap = /* @__PURE__ */ new Map([
|
|
|
813
823
|
["list", ListRichTextNode],
|
|
814
824
|
["listitem", ListItemRichTextNode],
|
|
815
825
|
["paragraph", ParagraphRichTextNode],
|
|
816
|
-
["quote", ({ children }) => /* @__PURE__ */
|
|
826
|
+
["quote", ({ children }) => /* @__PURE__ */ import_react20.default.createElement("blockquote", null, children)],
|
|
817
827
|
[
|
|
818
828
|
"code",
|
|
819
|
-
({ children }) => /* @__PURE__ */
|
|
829
|
+
({ children }) => /* @__PURE__ */ import_react20.default.createElement("pre", null, /* @__PURE__ */ import_react20.default.createElement("code", null, children))
|
|
820
830
|
],
|
|
821
|
-
["root", ({ children }) => /* @__PURE__ */
|
|
831
|
+
["root", ({ children }) => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, children)],
|
|
822
832
|
["text", TextRichTextNode],
|
|
823
|
-
["tab", TabRichTextNode]
|
|
833
|
+
["tab", TabRichTextNode],
|
|
834
|
+
[
|
|
835
|
+
"table",
|
|
836
|
+
({ children }) => /* @__PURE__ */ import_react20.default.createElement("table", null, /* @__PURE__ */ import_react20.default.createElement("tbody", null, children))
|
|
837
|
+
],
|
|
838
|
+
["tablerow", ({ children }) => /* @__PURE__ */ import_react20.default.createElement("tr", null, children)],
|
|
839
|
+
["tablecell", TableCellRichTextNode]
|
|
824
840
|
]);
|
|
825
841
|
var resolveRichTextDefaultRenderer = (node) => {
|
|
826
842
|
return rendererMap.get(node.type);
|
|
827
843
|
};
|
|
828
844
|
|
|
829
845
|
// src/components/UniformRichText/UniformRichText.tsx
|
|
830
|
-
var UniformRichText =
|
|
831
|
-
|
|
832
|
-
const
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
846
|
+
var UniformRichText = import_react21.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", placeholder, ...props }, ref) {
|
|
847
|
+
var _a;
|
|
848
|
+
const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
|
|
849
|
+
const { isContextualEditing } = useUniformCurrentComposition();
|
|
850
|
+
const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
851
|
+
if (!parameter) {
|
|
852
|
+
return null;
|
|
853
|
+
}
|
|
854
|
+
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
855
|
+
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
856
|
+
const value = parameter.value;
|
|
857
|
+
if (!value || !(0, import_richtext6.isRichTextValue)(value)) return null;
|
|
858
|
+
if (!isContextualEditing && (0, import_richtext6.isRichTextValueConsideredEmpty)(value)) return null;
|
|
859
|
+
return Tag === null ? /* @__PURE__ */ import_react21.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react21.default.createElement(
|
|
839
860
|
Tag,
|
|
840
861
|
{
|
|
841
862
|
ref,
|
|
842
863
|
...props,
|
|
843
|
-
...{
|
|
864
|
+
...isContextualEditing ? {
|
|
844
865
|
[import_canvas11.ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
|
|
845
866
|
[import_canvas11.ATTRIBUTE_PARAMETER_ID]: parameterId,
|
|
846
867
|
[import_canvas11.ATTRIBUTE_PARAMETER_TYPE]: "richText"
|
|
847
|
-
}
|
|
868
|
+
} : {}
|
|
848
869
|
},
|
|
849
|
-
/* @__PURE__ */
|
|
870
|
+
(0, import_richtext6.isRichTextValueConsideredEmpty)(value) ? /* @__PURE__ */ import_react21.default.createElement("p", null, /* @__PURE__ */ import_react21.default.createElement("i", null, computedPlaceholder)) : /* @__PURE__ */ import_react21.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
|
|
850
871
|
);
|
|
851
872
|
});
|
|
852
873
|
|
|
853
874
|
// src/components/UniformText.tsx
|
|
854
|
-
var
|
|
875
|
+
var import_react23 = __toESM(require("react"));
|
|
855
876
|
|
|
856
877
|
// src/components/PureUniformText.tsx
|
|
857
|
-
var
|
|
878
|
+
var import_react22 = __toESM(require("react"));
|
|
858
879
|
var PureUniformText = ({
|
|
859
880
|
as: Tag = "span",
|
|
860
881
|
parameterId,
|
|
@@ -873,10 +894,10 @@ var PureUniformText = ({
|
|
|
873
894
|
return null;
|
|
874
895
|
}
|
|
875
896
|
if (!isContextualEditing) {
|
|
876
|
-
return /* @__PURE__ */
|
|
897
|
+
return /* @__PURE__ */ import_react22.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
|
|
877
898
|
}
|
|
878
899
|
const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
|
|
879
|
-
return /* @__PURE__ */
|
|
900
|
+
return /* @__PURE__ */ import_react22.default.createElement(
|
|
880
901
|
Tag,
|
|
881
902
|
{
|
|
882
903
|
...props,
|
|
@@ -905,7 +926,7 @@ var UniformText = ({
|
|
|
905
926
|
var _a, _b, _c;
|
|
906
927
|
const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
|
|
907
928
|
const { isContextualEditing } = useUniformCurrentComposition();
|
|
908
|
-
const [isFocused, setIsFocused] = (0,
|
|
929
|
+
const [isFocused, setIsFocused] = (0, import_react23.useState)(false);
|
|
909
930
|
const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
910
931
|
const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
|
|
911
932
|
const shouldSkipCustomRendering = isFocused && isEditable;
|
|
@@ -914,7 +935,7 @@ var UniformText = ({
|
|
|
914
935
|
}
|
|
915
936
|
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
916
937
|
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
917
|
-
return /* @__PURE__ */
|
|
938
|
+
return /* @__PURE__ */ import_react23.default.createElement(
|
|
918
939
|
PureUniformText,
|
|
919
940
|
{
|
|
920
941
|
...props,
|
|
@@ -947,14 +968,14 @@ var getParameterAttributes = (options) => {
|
|
|
947
968
|
|
|
948
969
|
// src/hooks/useCompositionEventEffect.ts
|
|
949
970
|
var import_canvas13 = require("@uniformdev/canvas");
|
|
950
|
-
var
|
|
971
|
+
var import_react24 = require("react");
|
|
951
972
|
function useCompositionEventEffect({
|
|
952
973
|
enabled,
|
|
953
974
|
projectId,
|
|
954
975
|
compositionId,
|
|
955
976
|
effect
|
|
956
977
|
}) {
|
|
957
|
-
(0,
|
|
978
|
+
(0, import_react24.useEffect)(() => {
|
|
958
979
|
if (!enabled || !compositionId || !projectId) {
|
|
959
980
|
return;
|
|
960
981
|
}
|
|
@@ -983,17 +1004,17 @@ function useCompositionEventEffect({
|
|
|
983
1004
|
|
|
984
1005
|
// src/hooks/useUniformContextualEditingState.ts
|
|
985
1006
|
var import_canvas14 = require("@uniformdev/canvas");
|
|
986
|
-
var
|
|
1007
|
+
var import_react25 = require("react");
|
|
987
1008
|
var useUniformContextualEditingState = ({
|
|
988
1009
|
global = false
|
|
989
1010
|
} = {}) => {
|
|
990
1011
|
const { isContextualEditing } = useUniformCurrentComposition();
|
|
991
1012
|
const { data: componentData } = useUniformCurrentComponent();
|
|
992
|
-
const [selectedComponentReference, setSelectedComponentReference] = (0,
|
|
993
|
-
const [previewMode, setPreviewMode] = (0,
|
|
1013
|
+
const [selectedComponentReference, setSelectedComponentReference] = (0, import_react25.useState)();
|
|
1014
|
+
const [previewMode, setPreviewMode] = (0, import_react25.useState)(
|
|
994
1015
|
isContextualEditing ? "editor" : void 0
|
|
995
1016
|
);
|
|
996
|
-
const channel = (0,
|
|
1017
|
+
const channel = (0, import_react25.useMemo)(() => {
|
|
997
1018
|
if (!isContextualEditing) {
|
|
998
1019
|
return;
|
|
999
1020
|
}
|
|
@@ -1003,7 +1024,7 @@ var useUniformContextualEditingState = ({
|
|
|
1003
1024
|
});
|
|
1004
1025
|
return channel2;
|
|
1005
1026
|
}, [isContextualEditing]);
|
|
1006
|
-
(0,
|
|
1027
|
+
(0, import_react25.useEffect)(() => {
|
|
1007
1028
|
var _a, _b;
|
|
1008
1029
|
if (!channel) {
|
|
1009
1030
|
return;
|
|
@@ -1027,7 +1048,7 @@ var useUniformContextualEditingState = ({
|
|
|
1027
1048
|
unsubscribe();
|
|
1028
1049
|
};
|
|
1029
1050
|
}, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
|
|
1030
|
-
return (0,
|
|
1051
|
+
return (0, import_react25.useMemo)(
|
|
1031
1052
|
() => ({
|
|
1032
1053
|
isContextualEditing,
|
|
1033
1054
|
selectedComponentReference,
|
package/dist/index.mjs
CHANGED
|
@@ -234,7 +234,11 @@ var PureContextualEditingComponentWrapper = ({
|
|
|
234
234
|
import React4, { createContext, useContext } from "react";
|
|
235
235
|
|
|
236
236
|
// src/hooks/useClientConditionsComposition.ts
|
|
237
|
-
import {
|
|
237
|
+
import {
|
|
238
|
+
evaluateWalkTreeNodeVisibility,
|
|
239
|
+
evaluateWalkTreePropertyCriteria,
|
|
240
|
+
walkNodeTree
|
|
241
|
+
} from "@uniformdev/canvas";
|
|
238
242
|
import { produce } from "immer";
|
|
239
243
|
import { useMemo as useMemo2 } from "react";
|
|
240
244
|
|
|
@@ -261,7 +265,8 @@ function useClientConditionsComposition(data) {
|
|
|
261
265
|
try {
|
|
262
266
|
return produce(data, (draft) => {
|
|
263
267
|
walkNodeTree(draft, (context) => {
|
|
264
|
-
|
|
268
|
+
evaluateWalkTreeNodeVisibility({ context, rules, showIndeterminate: false });
|
|
269
|
+
evaluateWalkTreePropertyCriteria({ node: context.node, rules, keepIndeterminate: false });
|
|
265
270
|
});
|
|
266
271
|
});
|
|
267
272
|
} catch (e) {
|
|
@@ -690,15 +695,12 @@ import {
|
|
|
690
695
|
ATTRIBUTE_PARAMETER_ID,
|
|
691
696
|
ATTRIBUTE_PARAMETER_TYPE
|
|
692
697
|
} from "@uniformdev/canvas";
|
|
693
|
-
import {
|
|
694
|
-
|
|
695
|
-
isRichTextValueConsideredEmpty
|
|
696
|
-
} from "@uniformdev/richtext";
|
|
697
|
-
import React18, { useMemo as useMemo5 } from "react";
|
|
698
|
+
import { isRichTextValue, isRichTextValueConsideredEmpty } from "@uniformdev/richtext";
|
|
699
|
+
import React19 from "react";
|
|
698
700
|
|
|
699
701
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
700
702
|
import { isRichTextNode } from "@uniformdev/richtext";
|
|
701
|
-
import
|
|
703
|
+
import React18 from "react";
|
|
702
704
|
|
|
703
705
|
// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
|
|
704
706
|
import React9 from "react";
|
|
@@ -752,19 +754,28 @@ var ParagraphRichTextNode = ({ children, node }) => {
|
|
|
752
754
|
);
|
|
753
755
|
};
|
|
754
756
|
|
|
755
|
-
// src/components/UniformRichText/nodes/
|
|
757
|
+
// src/components/UniformRichText/nodes/TableCellRichTextNode.tsx
|
|
758
|
+
import { getRichTextTagFromTableCellHeaderState } from "@uniformdev/richtext";
|
|
756
759
|
import React15 from "react";
|
|
760
|
+
var TableCellRichTextNode = ({ children, node }) => {
|
|
761
|
+
const { headerState } = node;
|
|
762
|
+
const TableCellTag = getRichTextTagFromTableCellHeaderState(headerState);
|
|
763
|
+
return /* @__PURE__ */ React15.createElement(TableCellTag, null, children);
|
|
764
|
+
};
|
|
765
|
+
|
|
766
|
+
// src/components/UniformRichText/nodes/TabRichTextNode.tsx
|
|
767
|
+
import React16 from "react";
|
|
757
768
|
var TabRichTextNode = () => {
|
|
758
|
-
return /* @__PURE__ */
|
|
769
|
+
return /* @__PURE__ */ React16.createElement(React16.Fragment, null, " ");
|
|
759
770
|
};
|
|
760
771
|
|
|
761
772
|
// src/components/UniformRichText/nodes/TextRichTextNode.tsx
|
|
762
773
|
import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
|
|
763
|
-
import
|
|
774
|
+
import React17 from "react";
|
|
764
775
|
var TextRichTextNode = ({ node }) => {
|
|
765
776
|
const { text, format } = node;
|
|
766
777
|
const tags = getRichTextTagsFromTextFormat(format);
|
|
767
|
-
return /* @__PURE__ */
|
|
778
|
+
return /* @__PURE__ */ React17.createElement(React17.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React17.createElement(Tag, null, children), text) : text);
|
|
768
779
|
};
|
|
769
780
|
|
|
770
781
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
@@ -778,8 +789,8 @@ function UniformRichTextNode({ node, ...props }) {
|
|
|
778
789
|
if (!NodeRenderer) {
|
|
779
790
|
return null;
|
|
780
791
|
}
|
|
781
|
-
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */
|
|
782
|
-
return /* @__PURE__ */
|
|
792
|
+
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React18.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
|
|
793
|
+
return /* @__PURE__ */ React18.createElement(NodeRenderer, { node }, children);
|
|
783
794
|
}
|
|
784
795
|
var rendererMap = /* @__PURE__ */ new Map([
|
|
785
796
|
["heading", HeadingRichTextNode],
|
|
@@ -788,48 +799,59 @@ var rendererMap = /* @__PURE__ */ new Map([
|
|
|
788
799
|
["list", ListRichTextNode],
|
|
789
800
|
["listitem", ListItemRichTextNode],
|
|
790
801
|
["paragraph", ParagraphRichTextNode],
|
|
791
|
-
["quote", ({ children }) => /* @__PURE__ */
|
|
802
|
+
["quote", ({ children }) => /* @__PURE__ */ React18.createElement("blockquote", null, children)],
|
|
792
803
|
[
|
|
793
804
|
"code",
|
|
794
|
-
({ children }) => /* @__PURE__ */
|
|
805
|
+
({ children }) => /* @__PURE__ */ React18.createElement("pre", null, /* @__PURE__ */ React18.createElement("code", null, children))
|
|
795
806
|
],
|
|
796
|
-
["root", ({ children }) => /* @__PURE__ */
|
|
807
|
+
["root", ({ children }) => /* @__PURE__ */ React18.createElement(React18.Fragment, null, children)],
|
|
797
808
|
["text", TextRichTextNode],
|
|
798
|
-
["tab", TabRichTextNode]
|
|
809
|
+
["tab", TabRichTextNode],
|
|
810
|
+
[
|
|
811
|
+
"table",
|
|
812
|
+
({ children }) => /* @__PURE__ */ React18.createElement("table", null, /* @__PURE__ */ React18.createElement("tbody", null, children))
|
|
813
|
+
],
|
|
814
|
+
["tablerow", ({ children }) => /* @__PURE__ */ React18.createElement("tr", null, children)],
|
|
815
|
+
["tablecell", TableCellRichTextNode]
|
|
799
816
|
]);
|
|
800
817
|
var resolveRichTextDefaultRenderer = (node) => {
|
|
801
818
|
return rendererMap.get(node.type);
|
|
802
819
|
};
|
|
803
820
|
|
|
804
821
|
// src/components/UniformRichText/UniformRichText.tsx
|
|
805
|
-
var UniformRichText =
|
|
806
|
-
|
|
807
|
-
const
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
822
|
+
var UniformRichText = React19.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", placeholder, ...props }, ref) {
|
|
823
|
+
var _a;
|
|
824
|
+
const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
|
|
825
|
+
const { isContextualEditing } = useUniformCurrentComposition();
|
|
826
|
+
const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
827
|
+
if (!parameter) {
|
|
828
|
+
return null;
|
|
829
|
+
}
|
|
830
|
+
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
831
|
+
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
832
|
+
const value = parameter.value;
|
|
833
|
+
if (!value || !isRichTextValue(value)) return null;
|
|
834
|
+
if (!isContextualEditing && isRichTextValueConsideredEmpty(value)) return null;
|
|
835
|
+
return Tag === null ? /* @__PURE__ */ React19.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React19.createElement(
|
|
814
836
|
Tag,
|
|
815
837
|
{
|
|
816
838
|
ref,
|
|
817
839
|
...props,
|
|
818
|
-
...{
|
|
840
|
+
...isContextualEditing ? {
|
|
819
841
|
[ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
|
|
820
842
|
[ATTRIBUTE_PARAMETER_ID]: parameterId,
|
|
821
843
|
[ATTRIBUTE_PARAMETER_TYPE]: "richText"
|
|
822
|
-
}
|
|
844
|
+
} : {}
|
|
823
845
|
},
|
|
824
|
-
/* @__PURE__ */
|
|
846
|
+
isRichTextValueConsideredEmpty(value) ? /* @__PURE__ */ React19.createElement("p", null, /* @__PURE__ */ React19.createElement("i", null, computedPlaceholder)) : /* @__PURE__ */ React19.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
|
|
825
847
|
);
|
|
826
848
|
});
|
|
827
849
|
|
|
828
850
|
// src/components/UniformText.tsx
|
|
829
|
-
import
|
|
851
|
+
import React21, { useState as useState2 } from "react";
|
|
830
852
|
|
|
831
853
|
// src/components/PureUniformText.tsx
|
|
832
|
-
import
|
|
854
|
+
import React20 from "react";
|
|
833
855
|
var PureUniformText = ({
|
|
834
856
|
as: Tag = "span",
|
|
835
857
|
parameterId,
|
|
@@ -848,10 +870,10 @@ var PureUniformText = ({
|
|
|
848
870
|
return null;
|
|
849
871
|
}
|
|
850
872
|
if (!isContextualEditing) {
|
|
851
|
-
return /* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ React20.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
|
|
852
874
|
}
|
|
853
875
|
const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
|
|
854
|
-
return /* @__PURE__ */
|
|
876
|
+
return /* @__PURE__ */ React20.createElement(
|
|
855
877
|
Tag,
|
|
856
878
|
{
|
|
857
879
|
...props,
|
|
@@ -889,7 +911,7 @@ var UniformText = ({
|
|
|
889
911
|
}
|
|
890
912
|
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
891
913
|
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
892
|
-
return /* @__PURE__ */
|
|
914
|
+
return /* @__PURE__ */ React21.createElement(
|
|
893
915
|
PureUniformText,
|
|
894
916
|
{
|
|
895
917
|
...props,
|
|
@@ -967,7 +989,7 @@ import {
|
|
|
967
989
|
createCanvasChannel as createCanvasChannel2,
|
|
968
990
|
isUpdateContextualEditingStateInternalMessage
|
|
969
991
|
} from "@uniformdev/canvas";
|
|
970
|
-
import { useEffect as useEffect3, useMemo as
|
|
992
|
+
import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
|
|
971
993
|
var useUniformContextualEditingState = ({
|
|
972
994
|
global = false
|
|
973
995
|
} = {}) => {
|
|
@@ -977,7 +999,7 @@ var useUniformContextualEditingState = ({
|
|
|
977
999
|
const [previewMode, setPreviewMode] = useState3(
|
|
978
1000
|
isContextualEditing ? "editor" : void 0
|
|
979
1001
|
);
|
|
980
|
-
const channel =
|
|
1002
|
+
const channel = useMemo5(() => {
|
|
981
1003
|
if (!isContextualEditing) {
|
|
982
1004
|
return;
|
|
983
1005
|
}
|
|
@@ -1011,7 +1033,7 @@ var useUniformContextualEditingState = ({
|
|
|
1011
1033
|
unsubscribe();
|
|
1012
1034
|
};
|
|
1013
1035
|
}, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
|
|
1014
|
-
return
|
|
1036
|
+
return useMemo5(
|
|
1015
1037
|
() => ({
|
|
1016
1038
|
isContextualEditing,
|
|
1017
1039
|
selectedComponentReference,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/canvas-react",
|
|
3
|
-
"version": "19.173.
|
|
3
|
+
"version": "19.173.2-alpha.210+4f0f6ff104",
|
|
4
4
|
"description": "React SDK for Uniform Canvas",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"document": "api-extractor run --local"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@uniformdev/canvas": "19.173.
|
|
49
|
-
"@uniformdev/context": "19.173.
|
|
50
|
-
"@uniformdev/context-react": "19.173.
|
|
51
|
-
"@uniformdev/richtext": "19.173.
|
|
48
|
+
"@uniformdev/canvas": "19.173.2-alpha.210+4f0f6ff104",
|
|
49
|
+
"@uniformdev/context": "19.173.2-alpha.210+4f0f6ff104",
|
|
50
|
+
"@uniformdev/context-react": "19.173.2-alpha.210+4f0f6ff104",
|
|
51
|
+
"@uniformdev/richtext": "19.173.2-alpha.210+4f0f6ff104"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"immer": ">= 10",
|
|
@@ -56,10 +56,10 @@
|
|
|
56
56
|
"react-dom": ">=16"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@types/react": "18.
|
|
59
|
+
"@types/react": "18.3.3",
|
|
60
60
|
"immer": "10.1.1",
|
|
61
|
-
"react": "18.
|
|
62
|
-
"react-dom": "18.
|
|
61
|
+
"react": "18.3.1",
|
|
62
|
+
"react-dom": "18.3.1"
|
|
63
63
|
},
|
|
64
64
|
"files": [
|
|
65
65
|
"/dist"
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "4f0f6ff104f46349c338fde461f063f22f04ce0e"
|
|
71
71
|
}
|