@uniformdev/canvas-react 19.178.2-alpha.25 → 19.179.1-alpha.1
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 +0 -16
- package/dist/index.d.ts +0 -16
- package/dist/index.esm.js +36 -53
- package/dist/index.js +43 -63
- package/dist/index.mjs +36 -53
- package/package.json +6 -6
package/dist/index.d.mts
CHANGED
|
@@ -357,14 +357,6 @@ type UniformRichTextProps = {
|
|
|
357
357
|
* for rendering a rich text node
|
|
358
358
|
*/
|
|
359
359
|
resolveRichTextRenderer?: RenderRichTextComponentResolver;
|
|
360
|
-
/**
|
|
361
|
-
* Sets the value to show in Canvas editor when the parameter value is empty.
|
|
362
|
-
* Can be a static string, or a function to generate the placeholder out of parameter info.
|
|
363
|
-
* @default undefined
|
|
364
|
-
*/
|
|
365
|
-
placeholder?: string | ((parameter: {
|
|
366
|
-
id: string;
|
|
367
|
-
}) => string | undefined);
|
|
368
360
|
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'>;
|
|
369
361
|
/**
|
|
370
362
|
* Adds rendering support for Uniform Rich Text parameters
|
|
@@ -382,14 +374,6 @@ declare const UniformRichText: React$1.ForwardRefExoticComponent<{
|
|
|
382
374
|
* for rendering a rich text node
|
|
383
375
|
*/
|
|
384
376
|
resolveRichTextRenderer?: RenderRichTextComponentResolver | undefined;
|
|
385
|
-
/**
|
|
386
|
-
* Sets the value to show in Canvas editor when the parameter value is empty.
|
|
387
|
-
* Can be a static string, or a function to generate the placeholder out of parameter info.
|
|
388
|
-
* @default undefined
|
|
389
|
-
*/
|
|
390
|
-
placeholder?: string | ((parameter: {
|
|
391
|
-
id: string;
|
|
392
|
-
}) => string | undefined) | undefined;
|
|
393
377
|
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<unknown>>;
|
|
394
378
|
|
|
395
379
|
type UniformRichTextNodeProps = {
|
package/dist/index.d.ts
CHANGED
|
@@ -357,14 +357,6 @@ type UniformRichTextProps = {
|
|
|
357
357
|
* for rendering a rich text node
|
|
358
358
|
*/
|
|
359
359
|
resolveRichTextRenderer?: RenderRichTextComponentResolver;
|
|
360
|
-
/**
|
|
361
|
-
* Sets the value to show in Canvas editor when the parameter value is empty.
|
|
362
|
-
* Can be a static string, or a function to generate the placeholder out of parameter info.
|
|
363
|
-
* @default undefined
|
|
364
|
-
*/
|
|
365
|
-
placeholder?: string | ((parameter: {
|
|
366
|
-
id: string;
|
|
367
|
-
}) => string | undefined);
|
|
368
360
|
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'>;
|
|
369
361
|
/**
|
|
370
362
|
* Adds rendering support for Uniform Rich Text parameters
|
|
@@ -382,14 +374,6 @@ declare const UniformRichText: React$1.ForwardRefExoticComponent<{
|
|
|
382
374
|
* for rendering a rich text node
|
|
383
375
|
*/
|
|
384
376
|
resolveRichTextRenderer?: RenderRichTextComponentResolver | undefined;
|
|
385
|
-
/**
|
|
386
|
-
* Sets the value to show in Canvas editor when the parameter value is empty.
|
|
387
|
-
* Can be a static string, or a function to generate the placeholder out of parameter info.
|
|
388
|
-
* @default undefined
|
|
389
|
-
*/
|
|
390
|
-
placeholder?: string | ((parameter: {
|
|
391
|
-
id: string;
|
|
392
|
-
}) => string | undefined) | undefined;
|
|
393
377
|
} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<unknown>>;
|
|
394
378
|
|
|
395
379
|
type UniformRichTextNodeProps = {
|
package/dist/index.esm.js
CHANGED
|
@@ -690,12 +690,15 @@ import {
|
|
|
690
690
|
ATTRIBUTE_PARAMETER_ID,
|
|
691
691
|
ATTRIBUTE_PARAMETER_TYPE
|
|
692
692
|
} from "@uniformdev/canvas";
|
|
693
|
-
import {
|
|
694
|
-
|
|
693
|
+
import {
|
|
694
|
+
isRichTextValue,
|
|
695
|
+
isRichTextValueConsideredEmpty
|
|
696
|
+
} from "@uniformdev/richtext";
|
|
697
|
+
import React18, { useMemo as useMemo5 } from "react";
|
|
695
698
|
|
|
696
699
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
697
700
|
import { isRichTextNode } from "@uniformdev/richtext";
|
|
698
|
-
import
|
|
701
|
+
import React17 from "react";
|
|
699
702
|
|
|
700
703
|
// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
|
|
701
704
|
import React9 from "react";
|
|
@@ -749,28 +752,19 @@ var ParagraphRichTextNode = ({ children, node }) => {
|
|
|
749
752
|
);
|
|
750
753
|
};
|
|
751
754
|
|
|
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
755
|
// src/components/UniformRichText/nodes/TabRichTextNode.tsx
|
|
762
|
-
import
|
|
756
|
+
import React15 from "react";
|
|
763
757
|
var TabRichTextNode = () => {
|
|
764
|
-
return /* @__PURE__ */
|
|
758
|
+
return /* @__PURE__ */ React15.createElement(React15.Fragment, null, " ");
|
|
765
759
|
};
|
|
766
760
|
|
|
767
761
|
// src/components/UniformRichText/nodes/TextRichTextNode.tsx
|
|
768
762
|
import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
|
|
769
|
-
import
|
|
763
|
+
import React16 from "react";
|
|
770
764
|
var TextRichTextNode = ({ node }) => {
|
|
771
765
|
const { text, format } = node;
|
|
772
766
|
const tags = getRichTextTagsFromTextFormat(format);
|
|
773
|
-
return /* @__PURE__ */
|
|
767
|
+
return /* @__PURE__ */ React16.createElement(React16.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React16.createElement(Tag, null, children), text) : text);
|
|
774
768
|
};
|
|
775
769
|
|
|
776
770
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
@@ -784,8 +778,8 @@ function UniformRichTextNode({ node, ...props }) {
|
|
|
784
778
|
if (!NodeRenderer) {
|
|
785
779
|
return null;
|
|
786
780
|
}
|
|
787
|
-
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */
|
|
788
|
-
return /* @__PURE__ */
|
|
781
|
+
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React17.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
|
|
782
|
+
return /* @__PURE__ */ React17.createElement(NodeRenderer, { node }, children);
|
|
789
783
|
}
|
|
790
784
|
var rendererMap = /* @__PURE__ */ new Map([
|
|
791
785
|
["heading", HeadingRichTextNode],
|
|
@@ -794,59 +788,48 @@ var rendererMap = /* @__PURE__ */ new Map([
|
|
|
794
788
|
["list", ListRichTextNode],
|
|
795
789
|
["listitem", ListItemRichTextNode],
|
|
796
790
|
["paragraph", ParagraphRichTextNode],
|
|
797
|
-
["quote", ({ children }) => /* @__PURE__ */
|
|
791
|
+
["quote", ({ children }) => /* @__PURE__ */ React17.createElement("blockquote", null, children)],
|
|
798
792
|
[
|
|
799
793
|
"code",
|
|
800
|
-
({ children }) => /* @__PURE__ */
|
|
794
|
+
({ children }) => /* @__PURE__ */ React17.createElement("pre", null, /* @__PURE__ */ React17.createElement("code", null, children))
|
|
801
795
|
],
|
|
802
|
-
["root", ({ children }) => /* @__PURE__ */
|
|
796
|
+
["root", ({ children }) => /* @__PURE__ */ React17.createElement(React17.Fragment, null, children)],
|
|
803
797
|
["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]
|
|
798
|
+
["tab", TabRichTextNode]
|
|
811
799
|
]);
|
|
812
800
|
var resolveRichTextDefaultRenderer = (node) => {
|
|
813
801
|
return rendererMap.get(node.type);
|
|
814
802
|
};
|
|
815
803
|
|
|
816
804
|
// 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(
|
|
805
|
+
var UniformRichText = React18.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
|
|
806
|
+
const { data: componentData } = useUniformCurrentComponent();
|
|
807
|
+
const parameter = useMemo5(() => {
|
|
808
|
+
var _a;
|
|
809
|
+
return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
810
|
+
}, [componentData, parameterId]);
|
|
811
|
+
const value = useMemo5(() => parameter == null ? void 0 : parameter.value, [parameter]);
|
|
812
|
+
if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value)) return null;
|
|
813
|
+
return Tag === null ? /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React18.createElement(
|
|
831
814
|
Tag,
|
|
832
815
|
{
|
|
833
816
|
ref,
|
|
834
817
|
...props,
|
|
835
|
-
...
|
|
818
|
+
...{
|
|
836
819
|
[ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
|
|
837
820
|
[ATTRIBUTE_PARAMETER_ID]: parameterId,
|
|
838
821
|
[ATTRIBUTE_PARAMETER_TYPE]: "richText"
|
|
839
|
-
}
|
|
822
|
+
}
|
|
840
823
|
},
|
|
841
|
-
|
|
824
|
+
/* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
|
|
842
825
|
);
|
|
843
826
|
});
|
|
844
827
|
|
|
845
828
|
// src/components/UniformText.tsx
|
|
846
|
-
import
|
|
829
|
+
import React20, { useState as useState2 } from "react";
|
|
847
830
|
|
|
848
831
|
// src/components/PureUniformText.tsx
|
|
849
|
-
import
|
|
832
|
+
import React19 from "react";
|
|
850
833
|
var PureUniformText = ({
|
|
851
834
|
as: Tag = "span",
|
|
852
835
|
parameterId,
|
|
@@ -865,10 +848,10 @@ var PureUniformText = ({
|
|
|
865
848
|
return null;
|
|
866
849
|
}
|
|
867
850
|
if (!isContextualEditing) {
|
|
868
|
-
return /* @__PURE__ */
|
|
851
|
+
return /* @__PURE__ */ React19.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
|
|
869
852
|
}
|
|
870
853
|
const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
|
|
871
|
-
return /* @__PURE__ */
|
|
854
|
+
return /* @__PURE__ */ React19.createElement(
|
|
872
855
|
Tag,
|
|
873
856
|
{
|
|
874
857
|
...props,
|
|
@@ -906,7 +889,7 @@ var UniformText = ({
|
|
|
906
889
|
}
|
|
907
890
|
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
908
891
|
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
909
|
-
return /* @__PURE__ */
|
|
892
|
+
return /* @__PURE__ */ React20.createElement(
|
|
910
893
|
PureUniformText,
|
|
911
894
|
{
|
|
912
895
|
...props,
|
|
@@ -984,7 +967,7 @@ import {
|
|
|
984
967
|
createCanvasChannel as createCanvasChannel2,
|
|
985
968
|
isUpdateContextualEditingStateInternalMessage
|
|
986
969
|
} from "@uniformdev/canvas";
|
|
987
|
-
import { useEffect as useEffect3, useMemo as
|
|
970
|
+
import { useEffect as useEffect3, useMemo as useMemo6, useState as useState3 } from "react";
|
|
988
971
|
var useUniformContextualEditingState = ({
|
|
989
972
|
global = false
|
|
990
973
|
} = {}) => {
|
|
@@ -994,7 +977,7 @@ var useUniformContextualEditingState = ({
|
|
|
994
977
|
const [previewMode, setPreviewMode] = useState3(
|
|
995
978
|
isContextualEditing ? "editor" : void 0
|
|
996
979
|
);
|
|
997
|
-
const channel =
|
|
980
|
+
const channel = useMemo6(() => {
|
|
998
981
|
if (!isContextualEditing) {
|
|
999
982
|
return;
|
|
1000
983
|
}
|
|
@@ -1028,7 +1011,7 @@ var useUniformContextualEditingState = ({
|
|
|
1028
1011
|
unsubscribe();
|
|
1029
1012
|
};
|
|
1030
1013
|
}, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
|
|
1031
|
-
return
|
|
1014
|
+
return useMemo6(
|
|
1032
1015
|
() => ({
|
|
1033
1016
|
isContextualEditing,
|
|
1034
1017
|
selectedComponentReference,
|
package/dist/index.js
CHANGED
|
@@ -718,13 +718,13 @@ var UniformPlayground = ({
|
|
|
718
718
|
|
|
719
719
|
// src/components/UniformRichText/UniformRichText.tsx
|
|
720
720
|
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
721
|
var import_richtext5 = require("@uniformdev/richtext");
|
|
726
722
|
var import_react20 = __toESM(require("react"));
|
|
727
723
|
|
|
724
|
+
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
725
|
+
var import_richtext4 = require("@uniformdev/richtext");
|
|
726
|
+
var import_react19 = __toESM(require("react"));
|
|
727
|
+
|
|
728
728
|
// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
|
|
729
729
|
var import_react11 = __toESM(require("react"));
|
|
730
730
|
var HeadingRichTextNode = ({ children, node }) => {
|
|
@@ -777,34 +777,25 @@ var ParagraphRichTextNode = ({ children, node }) => {
|
|
|
777
777
|
);
|
|
778
778
|
};
|
|
779
779
|
|
|
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
780
|
// src/components/UniformRichText/nodes/TabRichTextNode.tsx
|
|
790
|
-
var
|
|
781
|
+
var import_react17 = __toESM(require("react"));
|
|
791
782
|
var TabRichTextNode = () => {
|
|
792
|
-
return /* @__PURE__ */
|
|
783
|
+
return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, " ");
|
|
793
784
|
};
|
|
794
785
|
|
|
795
786
|
// src/components/UniformRichText/nodes/TextRichTextNode.tsx
|
|
796
|
-
var
|
|
797
|
-
var
|
|
787
|
+
var import_richtext3 = require("@uniformdev/richtext");
|
|
788
|
+
var import_react18 = __toESM(require("react"));
|
|
798
789
|
var TextRichTextNode = ({ node }) => {
|
|
799
790
|
const { text, format } = node;
|
|
800
|
-
const tags = (0,
|
|
801
|
-
return /* @__PURE__ */
|
|
791
|
+
const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
|
|
792
|
+
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
793
|
};
|
|
803
794
|
|
|
804
795
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
805
796
|
function UniformRichTextNode({ node, ...props }) {
|
|
806
797
|
var _a;
|
|
807
|
-
if (!(0,
|
|
798
|
+
if (!(0, import_richtext4.isRichTextNode)(node)) return null;
|
|
808
799
|
let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
|
|
809
800
|
if (typeof NodeRenderer === "undefined") {
|
|
810
801
|
NodeRenderer = resolveRichTextDefaultRenderer(node);
|
|
@@ -812,8 +803,8 @@ function UniformRichTextNode({ node, ...props }) {
|
|
|
812
803
|
if (!NodeRenderer) {
|
|
813
804
|
return null;
|
|
814
805
|
}
|
|
815
|
-
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */
|
|
816
|
-
return /* @__PURE__ */
|
|
806
|
+
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react19.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
|
|
807
|
+
return /* @__PURE__ */ import_react19.default.createElement(NodeRenderer, { node }, children);
|
|
817
808
|
}
|
|
818
809
|
var rendererMap = /* @__PURE__ */ new Map([
|
|
819
810
|
["heading", HeadingRichTextNode],
|
|
@@ -822,59 +813,48 @@ var rendererMap = /* @__PURE__ */ new Map([
|
|
|
822
813
|
["list", ListRichTextNode],
|
|
823
814
|
["listitem", ListItemRichTextNode],
|
|
824
815
|
["paragraph", ParagraphRichTextNode],
|
|
825
|
-
["quote", ({ children }) => /* @__PURE__ */
|
|
816
|
+
["quote", ({ children }) => /* @__PURE__ */ import_react19.default.createElement("blockquote", null, children)],
|
|
826
817
|
[
|
|
827
818
|
"code",
|
|
828
|
-
({ children }) => /* @__PURE__ */
|
|
819
|
+
({ children }) => /* @__PURE__ */ import_react19.default.createElement("pre", null, /* @__PURE__ */ import_react19.default.createElement("code", null, children))
|
|
829
820
|
],
|
|
830
|
-
["root", ({ children }) => /* @__PURE__ */
|
|
821
|
+
["root", ({ children }) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, children)],
|
|
831
822
|
["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]
|
|
823
|
+
["tab", TabRichTextNode]
|
|
839
824
|
]);
|
|
840
825
|
var resolveRichTextDefaultRenderer = (node) => {
|
|
841
826
|
return rendererMap.get(node.type);
|
|
842
827
|
};
|
|
843
828
|
|
|
844
829
|
// 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(
|
|
830
|
+
var UniformRichText = import_react20.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
|
|
831
|
+
const { data: componentData } = useUniformCurrentComponent();
|
|
832
|
+
const parameter = (0, import_react20.useMemo)(() => {
|
|
833
|
+
var _a;
|
|
834
|
+
return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
835
|
+
}, [componentData, parameterId]);
|
|
836
|
+
const value = (0, import_react20.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
|
|
837
|
+
if (!value || !(0, import_richtext5.isRichTextValue)(value) || (0, import_richtext5.isRichTextValueConsideredEmpty)(value)) return null;
|
|
838
|
+
return Tag === null ? /* @__PURE__ */ import_react20.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react20.default.createElement(
|
|
859
839
|
Tag,
|
|
860
840
|
{
|
|
861
841
|
ref,
|
|
862
842
|
...props,
|
|
863
|
-
...
|
|
843
|
+
...{
|
|
864
844
|
[import_canvas11.ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
|
|
865
845
|
[import_canvas11.ATTRIBUTE_PARAMETER_ID]: parameterId,
|
|
866
846
|
[import_canvas11.ATTRIBUTE_PARAMETER_TYPE]: "richText"
|
|
867
|
-
}
|
|
847
|
+
}
|
|
868
848
|
},
|
|
869
|
-
|
|
849
|
+
/* @__PURE__ */ import_react20.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
|
|
870
850
|
);
|
|
871
851
|
});
|
|
872
852
|
|
|
873
853
|
// src/components/UniformText.tsx
|
|
874
|
-
var
|
|
854
|
+
var import_react22 = __toESM(require("react"));
|
|
875
855
|
|
|
876
856
|
// src/components/PureUniformText.tsx
|
|
877
|
-
var
|
|
857
|
+
var import_react21 = __toESM(require("react"));
|
|
878
858
|
var PureUniformText = ({
|
|
879
859
|
as: Tag = "span",
|
|
880
860
|
parameterId,
|
|
@@ -893,10 +873,10 @@ var PureUniformText = ({
|
|
|
893
873
|
return null;
|
|
894
874
|
}
|
|
895
875
|
if (!isContextualEditing) {
|
|
896
|
-
return /* @__PURE__ */
|
|
876
|
+
return /* @__PURE__ */ import_react21.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
|
|
897
877
|
}
|
|
898
878
|
const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
|
|
899
|
-
return /* @__PURE__ */
|
|
879
|
+
return /* @__PURE__ */ import_react21.default.createElement(
|
|
900
880
|
Tag,
|
|
901
881
|
{
|
|
902
882
|
...props,
|
|
@@ -925,7 +905,7 @@ var UniformText = ({
|
|
|
925
905
|
var _a, _b, _c;
|
|
926
906
|
const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
|
|
927
907
|
const { isContextualEditing } = useUniformCurrentComposition();
|
|
928
|
-
const [isFocused, setIsFocused] = (0,
|
|
908
|
+
const [isFocused, setIsFocused] = (0, import_react22.useState)(false);
|
|
929
909
|
const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
930
910
|
const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
|
|
931
911
|
const shouldSkipCustomRendering = isFocused && isEditable;
|
|
@@ -934,7 +914,7 @@ var UniformText = ({
|
|
|
934
914
|
}
|
|
935
915
|
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
936
916
|
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
937
|
-
return /* @__PURE__ */
|
|
917
|
+
return /* @__PURE__ */ import_react22.default.createElement(
|
|
938
918
|
PureUniformText,
|
|
939
919
|
{
|
|
940
920
|
...props,
|
|
@@ -967,14 +947,14 @@ var getParameterAttributes = (options) => {
|
|
|
967
947
|
|
|
968
948
|
// src/hooks/useCompositionEventEffect.ts
|
|
969
949
|
var import_canvas13 = require("@uniformdev/canvas");
|
|
970
|
-
var
|
|
950
|
+
var import_react23 = require("react");
|
|
971
951
|
function useCompositionEventEffect({
|
|
972
952
|
enabled,
|
|
973
953
|
projectId,
|
|
974
954
|
compositionId,
|
|
975
955
|
effect
|
|
976
956
|
}) {
|
|
977
|
-
(0,
|
|
957
|
+
(0, import_react23.useEffect)(() => {
|
|
978
958
|
if (!enabled || !compositionId || !projectId) {
|
|
979
959
|
return;
|
|
980
960
|
}
|
|
@@ -1003,17 +983,17 @@ function useCompositionEventEffect({
|
|
|
1003
983
|
|
|
1004
984
|
// src/hooks/useUniformContextualEditingState.ts
|
|
1005
985
|
var import_canvas14 = require("@uniformdev/canvas");
|
|
1006
|
-
var
|
|
986
|
+
var import_react24 = require("react");
|
|
1007
987
|
var useUniformContextualEditingState = ({
|
|
1008
988
|
global = false
|
|
1009
989
|
} = {}) => {
|
|
1010
990
|
const { isContextualEditing } = useUniformCurrentComposition();
|
|
1011
991
|
const { data: componentData } = useUniformCurrentComponent();
|
|
1012
|
-
const [selectedComponentReference, setSelectedComponentReference] = (0,
|
|
1013
|
-
const [previewMode, setPreviewMode] = (0,
|
|
992
|
+
const [selectedComponentReference, setSelectedComponentReference] = (0, import_react24.useState)();
|
|
993
|
+
const [previewMode, setPreviewMode] = (0, import_react24.useState)(
|
|
1014
994
|
isContextualEditing ? "editor" : void 0
|
|
1015
995
|
);
|
|
1016
|
-
const channel = (0,
|
|
996
|
+
const channel = (0, import_react24.useMemo)(() => {
|
|
1017
997
|
if (!isContextualEditing) {
|
|
1018
998
|
return;
|
|
1019
999
|
}
|
|
@@ -1023,7 +1003,7 @@ var useUniformContextualEditingState = ({
|
|
|
1023
1003
|
});
|
|
1024
1004
|
return channel2;
|
|
1025
1005
|
}, [isContextualEditing]);
|
|
1026
|
-
(0,
|
|
1006
|
+
(0, import_react24.useEffect)(() => {
|
|
1027
1007
|
var _a, _b;
|
|
1028
1008
|
if (!channel) {
|
|
1029
1009
|
return;
|
|
@@ -1047,7 +1027,7 @@ var useUniformContextualEditingState = ({
|
|
|
1047
1027
|
unsubscribe();
|
|
1048
1028
|
};
|
|
1049
1029
|
}, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
|
|
1050
|
-
return (0,
|
|
1030
|
+
return (0, import_react24.useMemo)(
|
|
1051
1031
|
() => ({
|
|
1052
1032
|
isContextualEditing,
|
|
1053
1033
|
selectedComponentReference,
|
package/dist/index.mjs
CHANGED
|
@@ -690,12 +690,15 @@ import {
|
|
|
690
690
|
ATTRIBUTE_PARAMETER_ID,
|
|
691
691
|
ATTRIBUTE_PARAMETER_TYPE
|
|
692
692
|
} from "@uniformdev/canvas";
|
|
693
|
-
import {
|
|
694
|
-
|
|
693
|
+
import {
|
|
694
|
+
isRichTextValue,
|
|
695
|
+
isRichTextValueConsideredEmpty
|
|
696
|
+
} from "@uniformdev/richtext";
|
|
697
|
+
import React18, { useMemo as useMemo5 } from "react";
|
|
695
698
|
|
|
696
699
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
697
700
|
import { isRichTextNode } from "@uniformdev/richtext";
|
|
698
|
-
import
|
|
701
|
+
import React17 from "react";
|
|
699
702
|
|
|
700
703
|
// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
|
|
701
704
|
import React9 from "react";
|
|
@@ -749,28 +752,19 @@ var ParagraphRichTextNode = ({ children, node }) => {
|
|
|
749
752
|
);
|
|
750
753
|
};
|
|
751
754
|
|
|
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
755
|
// src/components/UniformRichText/nodes/TabRichTextNode.tsx
|
|
762
|
-
import
|
|
756
|
+
import React15 from "react";
|
|
763
757
|
var TabRichTextNode = () => {
|
|
764
|
-
return /* @__PURE__ */
|
|
758
|
+
return /* @__PURE__ */ React15.createElement(React15.Fragment, null, " ");
|
|
765
759
|
};
|
|
766
760
|
|
|
767
761
|
// src/components/UniformRichText/nodes/TextRichTextNode.tsx
|
|
768
762
|
import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
|
|
769
|
-
import
|
|
763
|
+
import React16 from "react";
|
|
770
764
|
var TextRichTextNode = ({ node }) => {
|
|
771
765
|
const { text, format } = node;
|
|
772
766
|
const tags = getRichTextTagsFromTextFormat(format);
|
|
773
|
-
return /* @__PURE__ */
|
|
767
|
+
return /* @__PURE__ */ React16.createElement(React16.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React16.createElement(Tag, null, children), text) : text);
|
|
774
768
|
};
|
|
775
769
|
|
|
776
770
|
// src/components/UniformRichText/UniformRichTextNode.tsx
|
|
@@ -784,8 +778,8 @@ function UniformRichTextNode({ node, ...props }) {
|
|
|
784
778
|
if (!NodeRenderer) {
|
|
785
779
|
return null;
|
|
786
780
|
}
|
|
787
|
-
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */
|
|
788
|
-
return /* @__PURE__ */
|
|
781
|
+
const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React17.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
|
|
782
|
+
return /* @__PURE__ */ React17.createElement(NodeRenderer, { node }, children);
|
|
789
783
|
}
|
|
790
784
|
var rendererMap = /* @__PURE__ */ new Map([
|
|
791
785
|
["heading", HeadingRichTextNode],
|
|
@@ -794,59 +788,48 @@ var rendererMap = /* @__PURE__ */ new Map([
|
|
|
794
788
|
["list", ListRichTextNode],
|
|
795
789
|
["listitem", ListItemRichTextNode],
|
|
796
790
|
["paragraph", ParagraphRichTextNode],
|
|
797
|
-
["quote", ({ children }) => /* @__PURE__ */
|
|
791
|
+
["quote", ({ children }) => /* @__PURE__ */ React17.createElement("blockquote", null, children)],
|
|
798
792
|
[
|
|
799
793
|
"code",
|
|
800
|
-
({ children }) => /* @__PURE__ */
|
|
794
|
+
({ children }) => /* @__PURE__ */ React17.createElement("pre", null, /* @__PURE__ */ React17.createElement("code", null, children))
|
|
801
795
|
],
|
|
802
|
-
["root", ({ children }) => /* @__PURE__ */
|
|
796
|
+
["root", ({ children }) => /* @__PURE__ */ React17.createElement(React17.Fragment, null, children)],
|
|
803
797
|
["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]
|
|
798
|
+
["tab", TabRichTextNode]
|
|
811
799
|
]);
|
|
812
800
|
var resolveRichTextDefaultRenderer = (node) => {
|
|
813
801
|
return rendererMap.get(node.type);
|
|
814
802
|
};
|
|
815
803
|
|
|
816
804
|
// 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(
|
|
805
|
+
var UniformRichText = React18.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
|
|
806
|
+
const { data: componentData } = useUniformCurrentComponent();
|
|
807
|
+
const parameter = useMemo5(() => {
|
|
808
|
+
var _a;
|
|
809
|
+
return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
|
|
810
|
+
}, [componentData, parameterId]);
|
|
811
|
+
const value = useMemo5(() => parameter == null ? void 0 : parameter.value, [parameter]);
|
|
812
|
+
if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value)) return null;
|
|
813
|
+
return Tag === null ? /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React18.createElement(
|
|
831
814
|
Tag,
|
|
832
815
|
{
|
|
833
816
|
ref,
|
|
834
817
|
...props,
|
|
835
|
-
...
|
|
818
|
+
...{
|
|
836
819
|
[ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
|
|
837
820
|
[ATTRIBUTE_PARAMETER_ID]: parameterId,
|
|
838
821
|
[ATTRIBUTE_PARAMETER_TYPE]: "richText"
|
|
839
|
-
}
|
|
822
|
+
}
|
|
840
823
|
},
|
|
841
|
-
|
|
824
|
+
/* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
|
|
842
825
|
);
|
|
843
826
|
});
|
|
844
827
|
|
|
845
828
|
// src/components/UniformText.tsx
|
|
846
|
-
import
|
|
829
|
+
import React20, { useState as useState2 } from "react";
|
|
847
830
|
|
|
848
831
|
// src/components/PureUniformText.tsx
|
|
849
|
-
import
|
|
832
|
+
import React19 from "react";
|
|
850
833
|
var PureUniformText = ({
|
|
851
834
|
as: Tag = "span",
|
|
852
835
|
parameterId,
|
|
@@ -865,10 +848,10 @@ var PureUniformText = ({
|
|
|
865
848
|
return null;
|
|
866
849
|
}
|
|
867
850
|
if (!isContextualEditing) {
|
|
868
|
-
return /* @__PURE__ */
|
|
851
|
+
return /* @__PURE__ */ React19.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
|
|
869
852
|
}
|
|
870
853
|
const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
|
|
871
|
-
return /* @__PURE__ */
|
|
854
|
+
return /* @__PURE__ */ React19.createElement(
|
|
872
855
|
Tag,
|
|
873
856
|
{
|
|
874
857
|
...props,
|
|
@@ -906,7 +889,7 @@ var UniformText = ({
|
|
|
906
889
|
}
|
|
907
890
|
const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
|
|
908
891
|
const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
|
|
909
|
-
return /* @__PURE__ */
|
|
892
|
+
return /* @__PURE__ */ React20.createElement(
|
|
910
893
|
PureUniformText,
|
|
911
894
|
{
|
|
912
895
|
...props,
|
|
@@ -984,7 +967,7 @@ import {
|
|
|
984
967
|
createCanvasChannel as createCanvasChannel2,
|
|
985
968
|
isUpdateContextualEditingStateInternalMessage
|
|
986
969
|
} from "@uniformdev/canvas";
|
|
987
|
-
import { useEffect as useEffect3, useMemo as
|
|
970
|
+
import { useEffect as useEffect3, useMemo as useMemo6, useState as useState3 } from "react";
|
|
988
971
|
var useUniformContextualEditingState = ({
|
|
989
972
|
global = false
|
|
990
973
|
} = {}) => {
|
|
@@ -994,7 +977,7 @@ var useUniformContextualEditingState = ({
|
|
|
994
977
|
const [previewMode, setPreviewMode] = useState3(
|
|
995
978
|
isContextualEditing ? "editor" : void 0
|
|
996
979
|
);
|
|
997
|
-
const channel =
|
|
980
|
+
const channel = useMemo6(() => {
|
|
998
981
|
if (!isContextualEditing) {
|
|
999
982
|
return;
|
|
1000
983
|
}
|
|
@@ -1028,7 +1011,7 @@ var useUniformContextualEditingState = ({
|
|
|
1028
1011
|
unsubscribe();
|
|
1029
1012
|
};
|
|
1030
1013
|
}, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
|
|
1031
|
-
return
|
|
1014
|
+
return useMemo6(
|
|
1032
1015
|
() => ({
|
|
1033
1016
|
isContextualEditing,
|
|
1034
1017
|
selectedComponentReference,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/canvas-react",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.179.1-alpha.1+3adc08c00a",
|
|
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.1-alpha.1+3adc08c00a",
|
|
49
|
+
"@uniformdev/context": "19.179.1-alpha.1+3adc08c00a",
|
|
50
|
+
"@uniformdev/context-react": "19.179.1-alpha.1+3adc08c00a",
|
|
51
|
+
"@uniformdev/richtext": "19.179.1-alpha.1+3adc08c00a"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"immer": ">= 10",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "3adc08c00a0d3932b6b767faaa6157f8b71ef0a0"
|
|
71
71
|
}
|