@uniformdev/canvas-react 19.178.2-alpha.25 → 19.179.2-alpha.22
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 +201 -101
- package/dist/index.d.ts +201 -101
- package/dist/index.esm.js +43 -55
- package/dist/index.js +45 -64
- package/dist/index.mjs +43 -55
- 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,13 +719,13 @@ var UniformPlayground = ({
|
|
|
718
719
|
|
|
719
720
|
// src/components/UniformRichText/UniformRichText.tsx
|
|
720
721
|
var import_canvas11 = require("@uniformdev/canvas");
|
|
721
|
-
var import_richtext6 = require("@uniformdev/richtext");
|
|
722
|
-
var import_react21 = __toESM(require("react"));
|
|
723
|
-
|
|
724
|
-
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
725
722
|
var import_richtext5 = require("@uniformdev/richtext");
|
|
726
723
|
var import_react20 = __toESM(require("react"));
|
|
727
724
|
|
|
725
|
+
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
726
|
+
var import_richtext4 = require("@uniformdev/richtext");
|
|
727
|
+
var import_react19 = __toESM(require("react"));
|
|
728
|
+
|
|
728
729
|
// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
|
|
729
730
|
var import_react11 = __toESM(require("react"));
|
|
730
731
|
var HeadingRichTextNode = ({ children, node }) => {
|
|
@@ -777,34 +778,25 @@ var ParagraphRichTextNode = ({ children, node }) => {
|
|
|
777
778
|
);
|
|
778
779
|
};
|
|
779
780
|
|
|
780
|
-
// src/components/UniformRichText/nodes/TableCellRichTextNode.tsx
|
|
781
|
-
var import_richtext3 = require("@uniformdev/richtext");
|
|
782
|
-
var import_react17 = __toESM(require("react"));
|
|
783
|
-
var TableCellRichTextNode = ({ children, node }) => {
|
|
784
|
-
const { headerState } = node;
|
|
785
|
-
const TableCellTag = (0, import_richtext3.getRichTextTagFromTableCellHeaderState)(headerState);
|
|
786
|
-
return /* @__PURE__ */ import_react17.default.createElement(TableCellTag, null, children);
|
|
787
|
-
};
|
|
788
|
-
|
|
789
781
|
// src/components/UniformRichText/nodes/TabRichTextNode.tsx
|
|
790
|
-
var
|
|
782
|
+
var import_react17 = __toESM(require("react"));
|
|
791
783
|
var TabRichTextNode = () => {
|
|
792
|
-
return /* @__PURE__ */
|
|
784
|
+
return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, " ");
|
|
793
785
|
};
|
|
794
786
|
|
|
795
787
|
// src/components/UniformRichText/nodes/TextRichTextNode.tsx
|
|
796
|
-
var
|
|
797
|
-
var
|
|
788
|
+
var import_richtext3 = require("@uniformdev/richtext");
|
|
789
|
+
var import_react18 = __toESM(require("react"));
|
|
798
790
|
var TextRichTextNode = ({ node }) => {
|
|
799
791
|
const { text, format } = node;
|
|
800
|
-
const tags = (0,
|
|
801
|
-
return /* @__PURE__ */
|
|
792
|
+
const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
|
|
793
|
+
return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react18.default.createElement(Tag, null, children), text) : text);
|
|
802
794
|
};
|
|
803
795
|
|
|
804
796
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
805
797
|
function UniformRichTextNode({ node, ...props }) {
|
|
806
798
|
var _a;
|
|
807
|
-
if (!(0,
|
|
799
|
+
if (!(0, import_richtext4.isRichTextNode)(node)) return null;
|
|
808
800
|
let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
|
|
809
801
|
if (typeof NodeRenderer === "undefined") {
|
|
810
802
|
NodeRenderer = resolveRichTextDefaultRenderer(node);
|
|
@@ -812,8 +804,8 @@ function UniformRichTextNode({ node, ...props }) {
|
|
|
812
804
|
if (!NodeRenderer) {
|
|
813
805
|
return null;
|
|
814
806
|
}
|
|
815
|
-
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */
|
|
816
|
-
return /* @__PURE__ */
|
|
807
|
+
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react19.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
|
|
808
|
+
return /* @__PURE__ */ import_react19.default.createElement(NodeRenderer, { node }, children);
|
|
817
809
|
}
|
|
818
810
|
var rendererMap = /* @__PURE__ */ new Map([
|
|
819
811
|
["heading", HeadingRichTextNode],
|
|
@@ -822,59 +814,48 @@ var rendererMap = /* @__PURE__ */ new Map([
|
|
|
822
814
|
["list", ListRichTextNode],
|
|
823
815
|
["listitem", ListItemRichTextNode],
|
|
824
816
|
["paragraph", ParagraphRichTextNode],
|
|
825
|
-
["quote", ({ children }) => /* @__PURE__ */
|
|
817
|
+
["quote", ({ children }) => /* @__PURE__ */ import_react19.default.createElement("blockquote", null, children)],
|
|
826
818
|
[
|
|
827
819
|
"code",
|
|
828
|
-
({ children }) => /* @__PURE__ */
|
|
820
|
+
({ children }) => /* @__PURE__ */ import_react19.default.createElement("pre", null, /* @__PURE__ */ import_react19.default.createElement("code", null, children))
|
|
829
821
|
],
|
|
830
|
-
["root", ({ children }) => /* @__PURE__ */
|
|
822
|
+
["root", ({ children }) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, children)],
|
|
831
823
|
["text", TextRichTextNode],
|
|
832
|
-
["tab", TabRichTextNode]
|
|
833
|
-
[
|
|
834
|
-
"table",
|
|
835
|
-
({ children }) => /* @__PURE__ */ import_react20.default.createElement("table", null, /* @__PURE__ */ import_react20.default.createElement("tbody", null, children))
|
|
836
|
-
],
|
|
837
|
-
["tablerow", ({ children }) => /* @__PURE__ */ import_react20.default.createElement("tr", null, children)],
|
|
838
|
-
["tablecell", TableCellRichTextNode]
|
|
824
|
+
["tab", TabRichTextNode]
|
|
839
825
|
]);
|
|
840
826
|
var resolveRichTextDefaultRenderer = (node) => {
|
|
841
827
|
return rendererMap.get(node.type);
|
|
842
828
|
};
|
|
843
829
|
|
|
844
830
|
// src/components/UniformRichText/UniformRichText.tsx
|
|
845
|
-
var UniformRichText =
|
|
846
|
-
|
|
847
|
-
const
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
855
|
-
const value = parameter.value;
|
|
856
|
-
if (!value || !(0, import_richtext6.isRichTextValue)(value)) return null;
|
|
857
|
-
if (!isContextualEditing && (0, import_richtext6.isRichTextValueConsideredEmpty)(value)) return null;
|
|
858
|
-
return Tag === null ? /* @__PURE__ */ import_react21.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react21.default.createElement(
|
|
831
|
+
var UniformRichText = import_react20.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
|
|
832
|
+
const { data: componentData } = useUniformCurrentComponent();
|
|
833
|
+
const parameter = (0, import_react20.useMemo)(() => {
|
|
834
|
+
var _a;
|
|
835
|
+
return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
836
|
+
}, [componentData, parameterId]);
|
|
837
|
+
const value = (0, import_react20.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
|
|
838
|
+
if (!value || !(0, import_richtext5.isRichTextValue)(value) || (0, import_richtext5.isRichTextValueConsideredEmpty)(value)) return null;
|
|
839
|
+
return Tag === null ? /* @__PURE__ */ import_react20.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react20.default.createElement(
|
|
859
840
|
Tag,
|
|
860
841
|
{
|
|
861
842
|
ref,
|
|
862
843
|
...props,
|
|
863
|
-
...
|
|
844
|
+
...{
|
|
864
845
|
[import_canvas11.ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
|
|
865
846
|
[import_canvas11.ATTRIBUTE_PARAMETER_ID]: parameterId,
|
|
866
847
|
[import_canvas11.ATTRIBUTE_PARAMETER_TYPE]: "richText"
|
|
867
|
-
}
|
|
848
|
+
}
|
|
868
849
|
},
|
|
869
|
-
|
|
850
|
+
/* @__PURE__ */ import_react20.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
|
|
870
851
|
);
|
|
871
852
|
});
|
|
872
853
|
|
|
873
854
|
// src/components/UniformText.tsx
|
|
874
|
-
var
|
|
855
|
+
var import_react22 = __toESM(require("react"));
|
|
875
856
|
|
|
876
857
|
// src/components/PureUniformText.tsx
|
|
877
|
-
var
|
|
858
|
+
var import_react21 = __toESM(require("react"));
|
|
878
859
|
var PureUniformText = ({
|
|
879
860
|
as: Tag = "span",
|
|
880
861
|
parameterId,
|
|
@@ -893,10 +874,10 @@ var PureUniformText = ({
|
|
|
893
874
|
return null;
|
|
894
875
|
}
|
|
895
876
|
if (!isContextualEditing) {
|
|
896
|
-
return /* @__PURE__ */
|
|
877
|
+
return /* @__PURE__ */ import_react21.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
|
|
897
878
|
}
|
|
898
879
|
const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
|
|
899
|
-
return /* @__PURE__ */
|
|
880
|
+
return /* @__PURE__ */ import_react21.default.createElement(
|
|
900
881
|
Tag,
|
|
901
882
|
{
|
|
902
883
|
...props,
|
|
@@ -925,7 +906,7 @@ var UniformText = ({
|
|
|
925
906
|
var _a, _b, _c;
|
|
926
907
|
const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
|
|
927
908
|
const { isContextualEditing } = useUniformCurrentComposition();
|
|
928
|
-
const [isFocused, setIsFocused] = (0,
|
|
909
|
+
const [isFocused, setIsFocused] = (0, import_react22.useState)(false);
|
|
929
910
|
const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
930
911
|
const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
|
|
931
912
|
const shouldSkipCustomRendering = isFocused && isEditable;
|
|
@@ -934,7 +915,7 @@ var UniformText = ({
|
|
|
934
915
|
}
|
|
935
916
|
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
936
917
|
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
937
|
-
return /* @__PURE__ */
|
|
918
|
+
return /* @__PURE__ */ import_react22.default.createElement(
|
|
938
919
|
PureUniformText,
|
|
939
920
|
{
|
|
940
921
|
...props,
|
|
@@ -967,14 +948,14 @@ var getParameterAttributes = (options) => {
|
|
|
967
948
|
|
|
968
949
|
// src/hooks/useCompositionEventEffect.ts
|
|
969
950
|
var import_canvas13 = require("@uniformdev/canvas");
|
|
970
|
-
var
|
|
951
|
+
var import_react23 = require("react");
|
|
971
952
|
function useCompositionEventEffect({
|
|
972
953
|
enabled,
|
|
973
954
|
projectId,
|
|
974
955
|
compositionId,
|
|
975
956
|
effect
|
|
976
957
|
}) {
|
|
977
|
-
(0,
|
|
958
|
+
(0, import_react23.useEffect)(() => {
|
|
978
959
|
if (!enabled || !compositionId || !projectId) {
|
|
979
960
|
return;
|
|
980
961
|
}
|
|
@@ -1003,17 +984,17 @@ function useCompositionEventEffect({
|
|
|
1003
984
|
|
|
1004
985
|
// src/hooks/useUniformContextualEditingState.ts
|
|
1005
986
|
var import_canvas14 = require("@uniformdev/canvas");
|
|
1006
|
-
var
|
|
987
|
+
var import_react24 = require("react");
|
|
1007
988
|
var useUniformContextualEditingState = ({
|
|
1008
989
|
global = false
|
|
1009
990
|
} = {}) => {
|
|
1010
991
|
const { isContextualEditing } = useUniformCurrentComposition();
|
|
1011
992
|
const { data: componentData } = useUniformCurrentComponent();
|
|
1012
|
-
const [selectedComponentReference, setSelectedComponentReference] = (0,
|
|
1013
|
-
const [previewMode, setPreviewMode] = (0,
|
|
993
|
+
const [selectedComponentReference, setSelectedComponentReference] = (0, import_react24.useState)();
|
|
994
|
+
const [previewMode, setPreviewMode] = (0, import_react24.useState)(
|
|
1014
995
|
isContextualEditing ? "editor" : void 0
|
|
1015
996
|
);
|
|
1016
|
-
const channel = (0,
|
|
997
|
+
const channel = (0, import_react24.useMemo)(() => {
|
|
1017
998
|
if (!isContextualEditing) {
|
|
1018
999
|
return;
|
|
1019
1000
|
}
|
|
@@ -1023,7 +1004,7 @@ var useUniformContextualEditingState = ({
|
|
|
1023
1004
|
});
|
|
1024
1005
|
return channel2;
|
|
1025
1006
|
}, [isContextualEditing]);
|
|
1026
|
-
(0,
|
|
1007
|
+
(0, import_react24.useEffect)(() => {
|
|
1027
1008
|
var _a, _b;
|
|
1028
1009
|
if (!channel) {
|
|
1029
1010
|
return;
|
|
@@ -1047,7 +1028,7 @@ var useUniformContextualEditingState = ({
|
|
|
1047
1028
|
unsubscribe();
|
|
1048
1029
|
};
|
|
1049
1030
|
}, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
|
|
1050
|
-
return (0,
|
|
1031
|
+
return (0, import_react24.useMemo)(
|
|
1051
1032
|
() => ({
|
|
1052
1033
|
isContextualEditing,
|
|
1053
1034
|
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,12 +695,15 @@ import {
|
|
|
690
695
|
ATTRIBUTE_PARAMETER_ID,
|
|
691
696
|
ATTRIBUTE_PARAMETER_TYPE
|
|
692
697
|
} from "@uniformdev/canvas";
|
|
693
|
-
import {
|
|
694
|
-
|
|
698
|
+
import {
|
|
699
|
+
isRichTextValue,
|
|
700
|
+
isRichTextValueConsideredEmpty
|
|
701
|
+
} from "@uniformdev/richtext";
|
|
702
|
+
import React18, { useMemo as useMemo5 } from "react";
|
|
695
703
|
|
|
696
704
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
697
705
|
import { isRichTextNode } from "@uniformdev/richtext";
|
|
698
|
-
import
|
|
706
|
+
import React17 from "react";
|
|
699
707
|
|
|
700
708
|
// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
|
|
701
709
|
import React9 from "react";
|
|
@@ -749,28 +757,19 @@ var ParagraphRichTextNode = ({ children, node }) => {
|
|
|
749
757
|
);
|
|
750
758
|
};
|
|
751
759
|
|
|
752
|
-
// src/components/UniformRichText/nodes/TableCellRichTextNode.tsx
|
|
753
|
-
import { getRichTextTagFromTableCellHeaderState } from "@uniformdev/richtext";
|
|
754
|
-
import React15 from "react";
|
|
755
|
-
var TableCellRichTextNode = ({ children, node }) => {
|
|
756
|
-
const { headerState } = node;
|
|
757
|
-
const TableCellTag = getRichTextTagFromTableCellHeaderState(headerState);
|
|
758
|
-
return /* @__PURE__ */ React15.createElement(TableCellTag, null, children);
|
|
759
|
-
};
|
|
760
|
-
|
|
761
760
|
// src/components/UniformRichText/nodes/TabRichTextNode.tsx
|
|
762
|
-
import
|
|
761
|
+
import React15 from "react";
|
|
763
762
|
var TabRichTextNode = () => {
|
|
764
|
-
return /* @__PURE__ */
|
|
763
|
+
return /* @__PURE__ */ React15.createElement(React15.Fragment, null, " ");
|
|
765
764
|
};
|
|
766
765
|
|
|
767
766
|
// src/components/UniformRichText/nodes/TextRichTextNode.tsx
|
|
768
767
|
import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
|
|
769
|
-
import
|
|
768
|
+
import React16 from "react";
|
|
770
769
|
var TextRichTextNode = ({ node }) => {
|
|
771
770
|
const { text, format } = node;
|
|
772
771
|
const tags = getRichTextTagsFromTextFormat(format);
|
|
773
|
-
return /* @__PURE__ */
|
|
772
|
+
return /* @__PURE__ */ React16.createElement(React16.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React16.createElement(Tag, null, children), text) : text);
|
|
774
773
|
};
|
|
775
774
|
|
|
776
775
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
@@ -784,8 +783,8 @@ function UniformRichTextNode({ node, ...props }) {
|
|
|
784
783
|
if (!NodeRenderer) {
|
|
785
784
|
return null;
|
|
786
785
|
}
|
|
787
|
-
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */
|
|
788
|
-
return /* @__PURE__ */
|
|
786
|
+
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React17.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
|
|
787
|
+
return /* @__PURE__ */ React17.createElement(NodeRenderer, { node }, children);
|
|
789
788
|
}
|
|
790
789
|
var rendererMap = /* @__PURE__ */ new Map([
|
|
791
790
|
["heading", HeadingRichTextNode],
|
|
@@ -794,59 +793,48 @@ var rendererMap = /* @__PURE__ */ new Map([
|
|
|
794
793
|
["list", ListRichTextNode],
|
|
795
794
|
["listitem", ListItemRichTextNode],
|
|
796
795
|
["paragraph", ParagraphRichTextNode],
|
|
797
|
-
["quote", ({ children }) => /* @__PURE__ */
|
|
796
|
+
["quote", ({ children }) => /* @__PURE__ */ React17.createElement("blockquote", null, children)],
|
|
798
797
|
[
|
|
799
798
|
"code",
|
|
800
|
-
({ children }) => /* @__PURE__ */
|
|
799
|
+
({ children }) => /* @__PURE__ */ React17.createElement("pre", null, /* @__PURE__ */ React17.createElement("code", null, children))
|
|
801
800
|
],
|
|
802
|
-
["root", ({ children }) => /* @__PURE__ */
|
|
801
|
+
["root", ({ children }) => /* @__PURE__ */ React17.createElement(React17.Fragment, null, children)],
|
|
803
802
|
["text", TextRichTextNode],
|
|
804
|
-
["tab", TabRichTextNode]
|
|
805
|
-
[
|
|
806
|
-
"table",
|
|
807
|
-
({ children }) => /* @__PURE__ */ React18.createElement("table", null, /* @__PURE__ */ React18.createElement("tbody", null, children))
|
|
808
|
-
],
|
|
809
|
-
["tablerow", ({ children }) => /* @__PURE__ */ React18.createElement("tr", null, children)],
|
|
810
|
-
["tablecell", TableCellRichTextNode]
|
|
803
|
+
["tab", TabRichTextNode]
|
|
811
804
|
]);
|
|
812
805
|
var resolveRichTextDefaultRenderer = (node) => {
|
|
813
806
|
return rendererMap.get(node.type);
|
|
814
807
|
};
|
|
815
808
|
|
|
816
809
|
// src/components/UniformRichText/UniformRichText.tsx
|
|
817
|
-
var UniformRichText =
|
|
818
|
-
|
|
819
|
-
const
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
827
|
-
const value = parameter.value;
|
|
828
|
-
if (!value || !isRichTextValue(value)) return null;
|
|
829
|
-
if (!isContextualEditing && isRichTextValueConsideredEmpty(value)) return null;
|
|
830
|
-
return Tag === null ? /* @__PURE__ */ React19.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React19.createElement(
|
|
810
|
+
var UniformRichText = React18.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
|
|
811
|
+
const { data: componentData } = useUniformCurrentComponent();
|
|
812
|
+
const parameter = useMemo5(() => {
|
|
813
|
+
var _a;
|
|
814
|
+
return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
815
|
+
}, [componentData, parameterId]);
|
|
816
|
+
const value = useMemo5(() => parameter == null ? void 0 : parameter.value, [parameter]);
|
|
817
|
+
if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value)) return null;
|
|
818
|
+
return Tag === null ? /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React18.createElement(
|
|
831
819
|
Tag,
|
|
832
820
|
{
|
|
833
821
|
ref,
|
|
834
822
|
...props,
|
|
835
|
-
...
|
|
823
|
+
...{
|
|
836
824
|
[ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
|
|
837
825
|
[ATTRIBUTE_PARAMETER_ID]: parameterId,
|
|
838
826
|
[ATTRIBUTE_PARAMETER_TYPE]: "richText"
|
|
839
|
-
}
|
|
827
|
+
}
|
|
840
828
|
},
|
|
841
|
-
|
|
829
|
+
/* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
|
|
842
830
|
);
|
|
843
831
|
});
|
|
844
832
|
|
|
845
833
|
// src/components/UniformText.tsx
|
|
846
|
-
import
|
|
834
|
+
import React20, { useState as useState2 } from "react";
|
|
847
835
|
|
|
848
836
|
// src/components/PureUniformText.tsx
|
|
849
|
-
import
|
|
837
|
+
import React19 from "react";
|
|
850
838
|
var PureUniformText = ({
|
|
851
839
|
as: Tag = "span",
|
|
852
840
|
parameterId,
|
|
@@ -865,10 +853,10 @@ var PureUniformText = ({
|
|
|
865
853
|
return null;
|
|
866
854
|
}
|
|
867
855
|
if (!isContextualEditing) {
|
|
868
|
-
return /* @__PURE__ */
|
|
856
|
+
return /* @__PURE__ */ React19.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
|
|
869
857
|
}
|
|
870
858
|
const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
|
|
871
|
-
return /* @__PURE__ */
|
|
859
|
+
return /* @__PURE__ */ React19.createElement(
|
|
872
860
|
Tag,
|
|
873
861
|
{
|
|
874
862
|
...props,
|
|
@@ -906,7 +894,7 @@ var UniformText = ({
|
|
|
906
894
|
}
|
|
907
895
|
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
908
896
|
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
909
|
-
return /* @__PURE__ */
|
|
897
|
+
return /* @__PURE__ */ React20.createElement(
|
|
910
898
|
PureUniformText,
|
|
911
899
|
{
|
|
912
900
|
...props,
|
|
@@ -984,7 +972,7 @@ import {
|
|
|
984
972
|
createCanvasChannel as createCanvasChannel2,
|
|
985
973
|
isUpdateContextualEditingStateInternalMessage
|
|
986
974
|
} from "@uniformdev/canvas";
|
|
987
|
-
import { useEffect as useEffect3, useMemo as
|
|
975
|
+
import { useEffect as useEffect3, useMemo as useMemo6, useState as useState3 } from "react";
|
|
988
976
|
var useUniformContextualEditingState = ({
|
|
989
977
|
global = false
|
|
990
978
|
} = {}) => {
|
|
@@ -994,7 +982,7 @@ var useUniformContextualEditingState = ({
|
|
|
994
982
|
const [previewMode, setPreviewMode] = useState3(
|
|
995
983
|
isContextualEditing ? "editor" : void 0
|
|
996
984
|
);
|
|
997
|
-
const channel =
|
|
985
|
+
const channel = useMemo6(() => {
|
|
998
986
|
if (!isContextualEditing) {
|
|
999
987
|
return;
|
|
1000
988
|
}
|
|
@@ -1028,7 +1016,7 @@ var useUniformContextualEditingState = ({
|
|
|
1028
1016
|
unsubscribe();
|
|
1029
1017
|
};
|
|
1030
1018
|
}, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
|
|
1031
|
-
return
|
|
1019
|
+
return useMemo6(
|
|
1032
1020
|
() => ({
|
|
1033
1021
|
isContextualEditing,
|
|
1034
1022
|
selectedComponentReference,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/canvas-react",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.179.2-alpha.22+79878be48f",
|
|
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.
|
|
49
|
-
"@uniformdev/context": "19.
|
|
50
|
-
"@uniformdev/context-react": "19.
|
|
51
|
-
"@uniformdev/richtext": "19.
|
|
48
|
+
"@uniformdev/canvas": "19.179.2-alpha.22+79878be48f",
|
|
49
|
+
"@uniformdev/context": "19.179.2-alpha.22+79878be48f",
|
|
50
|
+
"@uniformdev/context-react": "19.179.2-alpha.22+79878be48f",
|
|
51
|
+
"@uniformdev/richtext": "19.179.2-alpha.22+79878be48f"
|
|
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": "79878be48f2d4b1c6158026aa632e71c91473ac6"
|
|
71
71
|
}
|