@remkoj/optimizely-cms-react 4.3.0 → 5.0.0
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/components/cms-content/get-content.js +23 -21
- package/dist/components/cms-content/get-content.js.map +1 -1
- package/dist/components/cms-content/resolve-component.d.ts +4 -4
- package/dist/components/cms-content/resolve-component.js +14 -14
- package/dist/components/cms-content/resolve-component.js.map +1 -1
- package/dist/components/cms-content/rsc.d.ts +2 -2
- package/dist/components/cms-content/rsc.js +14 -7
- package/dist/components/cms-content/rsc.js.map +1 -1
- package/dist/components/cms-content/types.d.ts +11 -4
- package/dist/components/cms-content-area/index.d.ts +3 -10
- package/dist/components/cms-content-area/index.js +35 -51
- package/dist/components/cms-content-area/index.js.map +1 -1
- package/dist/components/cms-content-area/types.d.ts +49 -57
- package/dist/components/cms-editable/index.d.ts +48 -13
- package/dist/components/cms-editable/index.js +41 -5
- package/dist/components/cms-editable/index.js.map +1 -1
- package/dist/components/rich-text/components.d.ts +8 -7
- package/dist/components/rich-text/components.js +27 -22
- package/dist/components/rich-text/components.js.map +1 -1
- package/dist/components/rich-text/index.d.ts +4 -4
- package/dist/components/rich-text/index.js +19 -20
- package/dist/components/rich-text/index.js.map +1 -1
- package/dist/components/rich-text/types.d.ts +7 -15
- package/dist/components/rsc.d.ts +12 -12
- package/dist/components/rsc.js +17 -16
- package/dist/components/rsc.js.map +1 -1
- package/dist/components/type-utils.d.ts +13 -0
- package/dist/components/visual-builder/functions.js +1 -1
- package/dist/components/visual-builder/functions.js.map +1 -1
- package/dist/components/visual-builder/index.d.ts +1 -1
- package/dist/components/visual-builder/index.js +11 -9
- package/dist/components/visual-builder/index.js.map +1 -1
- package/dist/components/visual-builder/types.d.ts +3 -3
- package/dist/components/visual-builder/types.js.map +1 -1
- package/dist/components.d.ts +1 -1
- package/dist/context/client.d.ts +16 -4
- package/dist/context/client.js +38 -12
- package/dist/context/client.js.map +1 -1
- package/dist/context/rsc.d.ts +26 -9
- package/dist/context/rsc.js +84 -18
- package/dist/context/rsc.js.map +1 -1
- package/dist/context/shared.d.ts +3 -0
- package/dist/context/shared.js +7 -0
- package/dist/context/shared.js.map +1 -0
- package/dist/context/types.d.ts +24 -2
- package/dist/factory/default.js +16 -16
- package/dist/factory/default.js.map +1 -1
- package/dist/index.d.ts +4 -5
- package/dist/index.js +6 -2
- package/dist/index.js.map +1 -1
- package/dist/rsc.d.ts +2 -4
- package/dist/rsc.js +3 -1
- package/dist/rsc.js.map +1 -1
- package/dist/types.d.ts +5 -0
- package/dist/version.json +3 -0
- package/package.json +7 -7
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { ReactNode, SuspenseProps } from "react";
|
|
2
|
-
import type { PropsWithContext } from "../../context/types.js";
|
|
2
|
+
import type { PropsWithContext, PropsWithOptionalContext } from "../../context/types.js";
|
|
3
3
|
import type { PropsWithCmsContent } from "../cms-content/types.js";
|
|
4
4
|
import type { ContentType } from "../../types.js";
|
|
5
|
-
import type { ElementChildrenProps, ElementProps, ElementType, PropTypeIfPropExists, MayBeArray, TypeIfPropExists } from '../type-utils.js';
|
|
5
|
+
import type { ElementChildrenProps, ElementProps, ElementType, PropTypeIfPropExists, MayBeArray, TypeIfPropExists, ReservedKeys } from '../type-utils.js';
|
|
6
6
|
export type ContentAreaItemDefinition = {
|
|
7
7
|
__typename?: string | null;
|
|
8
8
|
_type?: string | null;
|
|
@@ -35,21 +35,27 @@ export type ValidContentAreaItemDefinition = {
|
|
|
35
35
|
} | null;
|
|
36
36
|
};
|
|
37
37
|
} & Record<string, any>;
|
|
38
|
-
export type
|
|
38
|
+
export type ItemsProperty<T extends ElementType> = "children" extends ElementChildrenProps<T> ? {
|
|
39
39
|
/**
|
|
40
|
-
* The
|
|
40
|
+
* The property of the component set for the "as" property of the Content Area which
|
|
41
|
+
* should receive the items within the Content Area.
|
|
42
|
+
*
|
|
43
|
+
* Defaults to "children", if not provided
|
|
41
44
|
*/
|
|
42
|
-
|
|
45
|
+
itemsProperty?: ElementChildrenProps<T>;
|
|
46
|
+
} : {
|
|
43
47
|
/**
|
|
44
|
-
* The
|
|
45
|
-
* the
|
|
46
|
-
* content area.
|
|
48
|
+
* The property of the component set for the "as" property of the Content Area which
|
|
49
|
+
* should receive the items within the Content Area.
|
|
47
50
|
*/
|
|
48
|
-
|
|
51
|
+
itemsProperty: ElementChildrenProps<T>;
|
|
52
|
+
};
|
|
53
|
+
export type PassthroughProps<T extends ElementType, ParentKeys extends string | number | symbol> = Omit<ElementProps<T>, ParentKeys | ReservedKeys | ElementChildrenProps<T>>;
|
|
54
|
+
export type CmsContentAreaCoreProps = PropsWithOptionalContext<{
|
|
49
55
|
/**
|
|
50
|
-
* The
|
|
56
|
+
* The content area items to be rendered
|
|
51
57
|
*/
|
|
52
|
-
|
|
58
|
+
items: (ContentAreaItemDefinition | null | undefined)[] | undefined | null;
|
|
53
59
|
/**
|
|
54
60
|
* Whether or not a suspense must be applied around each item of the
|
|
55
61
|
* ContentArea to allow dynamic content within the ContentArea items.
|
|
@@ -64,10 +70,6 @@ export type CmsContentAreaProps<T extends ElementType, CT extends ElementType> =
|
|
|
64
70
|
* editing
|
|
65
71
|
*/
|
|
66
72
|
fieldName?: string;
|
|
67
|
-
/**
|
|
68
|
-
* The HTML element, or React Component to use to render the Content Area Container
|
|
69
|
-
*/
|
|
70
|
-
as?: T;
|
|
71
73
|
/**
|
|
72
74
|
* If set to true, there will be no wrapping element around the
|
|
73
75
|
* items in the Content Area. Setting this to `true` ignores
|
|
@@ -78,54 +80,44 @@ export type CmsContentAreaProps<T extends ElementType, CT extends ElementType> =
|
|
|
78
80
|
* renditions, without changing the main path of the component.
|
|
79
81
|
*/
|
|
80
82
|
variant?: string;
|
|
83
|
+
}>;
|
|
84
|
+
export type CmsContentAreaWrapperProps<T extends ElementType, CT extends ElementType> = {
|
|
85
|
+
/**
|
|
86
|
+
* The HTML element, or React Component to use to render the Content Area Container
|
|
87
|
+
*/
|
|
88
|
+
as?: T;
|
|
81
89
|
/**
|
|
82
|
-
*
|
|
90
|
+
* The mapper used to apply CSS Classes to items, based upon
|
|
91
|
+
* the display mode (PaaS Only), Content type and position in
|
|
92
|
+
* content area.
|
|
83
93
|
*/
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Override the element type used to wrap the CMS Content Item
|
|
87
|
-
*/
|
|
88
|
-
as?: CT;
|
|
89
|
-
/**
|
|
90
|
-
* If set to true, there will be no wrapping element around the
|
|
91
|
-
* CmsContent used to render the item. Setting this to `true`
|
|
92
|
-
* ignores all other `itemWrapper` properties.
|
|
93
|
-
*/
|
|
94
|
-
noWrapper?: boolean;
|
|
95
|
-
/**
|
|
96
|
-
* The CSS Class to apply to the content area item wrapper
|
|
97
|
-
*/
|
|
98
|
-
className?: MayBeArray<PropTypeIfPropExists<CT, "className">>;
|
|
99
|
-
} & ("children" extends ElementChildrenProps<CT> ? {
|
|
100
|
-
/**
|
|
101
|
-
* The property of the component set for the "as" property of the Content Area Item
|
|
102
|
-
* which should receive the items within the Content Area.
|
|
103
|
-
*
|
|
104
|
-
* Defaults to "children", if not provided
|
|
105
|
-
*/
|
|
106
|
-
itemsProperty?: ElementChildrenProps<CT>;
|
|
107
|
-
} : {
|
|
108
|
-
/**
|
|
109
|
-
* The property of the component set for the "as" property of the Content Area Item
|
|
110
|
-
* which should receive the items within the Content Area.
|
|
111
|
-
*/
|
|
112
|
-
itemsProperty: ElementChildrenProps<CT>;
|
|
113
|
-
}) & Omit<Omit<ElementProps<CT>, "className" | "data-epi-block-id" | "data-displayoption" | "data-tag">, ElementChildrenProps<CT>>);
|
|
114
|
-
} & Omit<Omit<ElementProps<T>, "className" | "data-epi-edit">, ElementChildrenProps<T>> & ("children" extends ElementChildrenProps<T> ? {
|
|
94
|
+
classMapper?: TypeIfPropExists<T, "className", CmsContentAreaClassMapper>;
|
|
115
95
|
/**
|
|
116
|
-
* The
|
|
117
|
-
* should receive the items within the Content Area.
|
|
118
|
-
*
|
|
119
|
-
* Defaults to "children", if not provided
|
|
96
|
+
* The CSS Class to apply to the content area item wrapper
|
|
120
97
|
*/
|
|
121
|
-
|
|
122
|
-
} : {
|
|
98
|
+
className?: MayBeArray<PropTypeIfPropExists<T, "className">>;
|
|
123
99
|
/**
|
|
124
|
-
*
|
|
125
|
-
* should receive the items within the Content Area.
|
|
100
|
+
* Configure the wrapper for each item within the ContentArea
|
|
126
101
|
*/
|
|
127
|
-
|
|
128
|
-
}
|
|
102
|
+
itemWrapper?: CmsContentAreaItemWrapperProps<CT>;
|
|
103
|
+
} & ItemsProperty<T> & PassthroughProps<T, "as" | "classMapper" | "className" | "itemWrapper" | keyof CmsContentAreaCoreProps>;
|
|
104
|
+
export type CmsContentAreaItemWrapperProps<CT extends ElementType> = ({
|
|
105
|
+
/**
|
|
106
|
+
* Override the element type used to wrap the CMS Content Item
|
|
107
|
+
*/
|
|
108
|
+
as?: CT;
|
|
109
|
+
/**
|
|
110
|
+
* If set to true, there will be no wrapping element around the
|
|
111
|
+
* CmsContent used to render the item. Setting this to `true`
|
|
112
|
+
* ignores all other `itemWrapper` properties.
|
|
113
|
+
*/
|
|
114
|
+
noWrapper?: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* The CSS Class to apply to the content area item wrapper
|
|
117
|
+
*/
|
|
118
|
+
className?: MayBeArray<PropTypeIfPropExists<CT, "className">>;
|
|
119
|
+
} & ItemsProperty<CT> & PassthroughProps<CT, "as" | "noWrapper" | "className">);
|
|
120
|
+
export type CmsContentAreaProps<T extends ElementType, CT extends ElementType> = CmsContentAreaCoreProps & CmsContentAreaWrapperProps<T, CT>;
|
|
129
121
|
export type CmsContentAreaClassMapper = (displayOption: string, contentType: ContentType | null, index: number) => string;
|
|
130
122
|
export type BaseCmsContentAreaProps<T extends ElementType, CT extends ElementType> = PropsWithCmsContent<PropsWithContext<CmsContentAreaProps<T, CT>>>;
|
|
131
123
|
export type CmsContentAreaBaseComponent = <T extends ElementType, CT extends ElementType>(props: BaseCmsContentAreaProps<T, CT>) => ReactNode;
|
|
@@ -1,21 +1,56 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { PropsWithContext } from '../../context/types.js';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export type CmsEditableProps<FT extends
|
|
1
|
+
import { PropsWithChildren, type ReactNode } from 'react';
|
|
2
|
+
import { GenericContext, PropsWithContext } from '../../context/types.js';
|
|
3
|
+
import type { ElementType, GenericContextProps, ElementProps } from '../type-utils.js';
|
|
4
|
+
import { type ContentLink } from '@remkoj/optimizely-graph-client';
|
|
5
|
+
export type CmsEditableProps<FT extends ElementType> = PropsWithChildren<{
|
|
6
|
+
/**
|
|
7
|
+
* Override the component used to render, instead of wrapping the children. It allows
|
|
8
|
+
* any valid JSX identifier (e.g. HTML Element, Component or ExoticComponent)
|
|
9
|
+
*/
|
|
6
10
|
as?: FT;
|
|
7
|
-
|
|
11
|
+
/**
|
|
12
|
+
* The identifier of the component wrapped in this CmsEditable component. This will
|
|
13
|
+
* add the 'data-epi-block-id' property to the component.
|
|
14
|
+
*/
|
|
8
15
|
cmsId?: string | null;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
16
|
+
/**
|
|
17
|
+
* The name of the component field wrapped by this CmsEditable component. This will
|
|
18
|
+
* add the 'data-epi-property-name' property to the component.
|
|
19
|
+
*/
|
|
12
20
|
cmsFieldName?: string | null;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
21
|
+
/**
|
|
22
|
+
* The Context to be used when determining if the page rendering happens in edit mode
|
|
23
|
+
* or not.
|
|
24
|
+
*/
|
|
25
|
+
ctx?: GenericContext;
|
|
26
|
+
/**
|
|
27
|
+
* The default CTX paramteer is caught by this component, set this to true to pass the
|
|
28
|
+
* `ctx` property to the 'as' Component, or set to a valid property name to pass into
|
|
29
|
+
* that property.
|
|
30
|
+
*/
|
|
31
|
+
forwardCtx?: ElementProps<FT>['ctx'] extends GenericContext ? boolean | GenericContextProps<FT> : GenericContextProps<FT>;
|
|
32
|
+
/**
|
|
33
|
+
* If set, the `data-epi-block-id` attribute will always be included when the `cmsId`
|
|
34
|
+
* parameter is being set.
|
|
35
|
+
*/
|
|
36
|
+
forceBlockId?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* If set, this will be used to test if the content item being rendered is actually
|
|
39
|
+
* the one being edited. This allows
|
|
40
|
+
*/
|
|
41
|
+
currentContent?: ContentLink;
|
|
42
|
+
/**
|
|
43
|
+
* Override the value for the `data-epi-property-edittype` property
|
|
44
|
+
*/
|
|
45
|
+
editType?: 'floating' | 'inline' | null;
|
|
46
|
+
} & Omit<ElementProps<FT>, 'as' | 'cmsId' | 'cmsFieldName' | 'ctx' | 'forwardCtx'>>;
|
|
47
|
+
export type CmsEditableComponent = <CT extends ElementType>(props: CmsEditableProps<CT>) => ReactNode;
|
|
48
|
+
export type CmsEditableBaseComponent = <CT extends ElementType>(props: PropsWithContext<CmsEditableProps<CT>>) => ReactNode;
|
|
16
49
|
/**
|
|
17
50
|
* Server side wrapper to create HTML elements that include the needed
|
|
18
|
-
* data-epi- properties to render the edit mode markers
|
|
51
|
+
* data-epi- properties to render the edit mode markers. If the `cmsId`
|
|
52
|
+
* is a 32 character long string, it is assumed to be a GUID and rendered
|
|
53
|
+
* as `data-epi-content-id`, otherwise it is rendered as `data-epi-block-id`.
|
|
19
54
|
*
|
|
20
55
|
* @param param0 The HTML element with the simple properties
|
|
21
56
|
* @returns
|
|
@@ -1,15 +1,51 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* Server side wrapper to create HTML elements that include the needed
|
|
4
|
-
* data-epi- properties to render the edit mode markers
|
|
4
|
+
* data-epi- properties to render the edit mode markers. If the `cmsId`
|
|
5
|
+
* is a 32 character long string, it is assumed to be a GUID and rendered
|
|
6
|
+
* as `data-epi-content-id`, otherwise it is rendered as `data-epi-block-id`.
|
|
5
7
|
*
|
|
6
8
|
* @param param0 The HTML element with the simple properties
|
|
7
9
|
* @returns
|
|
8
10
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
export const CmsEditable = ({ ctx, forwardCtx, as, cmsId, cmsFieldName, children, key, forceBlockId, currentContent, editType, ...props }) => {
|
|
12
|
+
const { inEditMode, isDebugOrDevelopment, isDebug, editableContent } = ctx || {
|
|
13
|
+
inEditMode: false,
|
|
14
|
+
isDebug: true,
|
|
15
|
+
isDebugOrDevelopment: true,
|
|
16
|
+
};
|
|
17
|
+
const DefaultElement = as || 'div';
|
|
18
|
+
if (isDebugOrDevelopment && inEditMode && !cmsFieldName && !cmsId) {
|
|
19
|
+
console.warn(`⚠ [CmsEditable] CMS Editable used without a fieldname or id, this will not ouline the item`);
|
|
20
|
+
if (isDebug) {
|
|
21
|
+
console.trace('This happened here');
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
const addEditProps = inEditMode
|
|
25
|
+
? currentContent
|
|
26
|
+
? editableContent?.key == currentContent.key
|
|
27
|
+
: true
|
|
28
|
+
: false;
|
|
29
|
+
const itemProps = addEditProps
|
|
30
|
+
? {
|
|
31
|
+
...props,
|
|
32
|
+
// We assume GUIDs are represented as 32 char long strings, all other values are IDs
|
|
33
|
+
'data-epi-block-id': cmsId && (cmsId.length != 32 || forceBlockId) ? cmsId : undefined,
|
|
34
|
+
// We assume GUIDs are represented as 32 char long strings
|
|
35
|
+
'data-epi-content-id': cmsId && cmsId.length == 32 ? cmsId : undefined,
|
|
36
|
+
// We pass through the property name if provided
|
|
37
|
+
'data-epi-property-name': cmsFieldName ?? undefined,
|
|
38
|
+
// Configure the rendition of the property editor
|
|
39
|
+
'data-epi-property-edittype': editType ?? undefined,
|
|
40
|
+
}
|
|
41
|
+
: {
|
|
42
|
+
...props,
|
|
43
|
+
};
|
|
44
|
+
if (forwardCtx === true)
|
|
45
|
+
itemProps['ctx'] = ctx;
|
|
46
|
+
if (typeof forwardCtx == 'string' && forwardCtx.length > 0)
|
|
47
|
+
itemProps[forwardCtx] = ctx;
|
|
48
|
+
return _jsx(DefaultElement, { ...itemProps, children: children });
|
|
13
49
|
};
|
|
14
50
|
export default CmsEditable;
|
|
15
51
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/cms-editable/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/cms-editable/index.tsx"],"names":[],"mappings":";AAyEA;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,WAAW,GAA6B,CAAyB,EAC5E,GAAG,EACH,UAAU,EACV,EAAE,EACF,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,EACH,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,GAAG,KAAK,EAC+B,EAAE,EAAE;IAC3C,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,OAAO,EAAE,eAAe,EAAE,GAClE,GAAG,IAAI;QACL,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,IAAI;QACb,oBAAoB,EAAE,IAAI;KAC3B,CAAA;IACH,MAAM,cAAc,GAAG,EAAE,IAAI,KAAK,CAAA;IAElC,IAAI,oBAAoB,IAAI,UAAU,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC;QAClE,OAAO,CAAC,IAAI,CACV,4FAA4F,CAC7F,CAAA;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAA;QACrC,CAAC;IACH,CAAC;IAED,MAAM,YAAY,GAAG,UAAU;QAC7B,CAAC,CAAC,cAAc;YACd,CAAC,CAAC,eAAe,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG;YAC5C,CAAC,CAAC,IAAI;QACR,CAAC,CAAC,KAAK,CAAA;IAET,MAAM,SAAS,GAAwB,YAAY;QACjD,CAAC,CAAC;YACE,GAAG,KAAK;YACR,oFAAoF;YACpF,mBAAmB,EACjB,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YACnE,0DAA0D;YAC1D,qBAAqB,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;YACtE,gDAAgD;YAChD,wBAAwB,EAAE,YAAY,IAAI,SAAS;YACnD,iDAAiD;YACjD,4BAA4B,EAAE,QAAQ,IAAI,SAAS;SACpD;QACH,CAAC,CAAC;YACE,GAAG,KAAK;SACT,CAAA;IAEL,IAAI,UAAU,KAAK,IAAI;QAAE,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA;IAC/C,IAAI,OAAO,UAAU,IAAI,QAAQ,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;QACxD,SAAS,CAAC,UAAU,CAAC,GAAG,GAAG,CAAA;IAE7B,OAAO,KAAC,cAAc,OAAK,SAAS,YAAG,QAAQ,GAAkB,CAAA;AACnE,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { type FunctionComponent, type PropsWithChildren } from
|
|
2
|
-
import { ComponentTypeDictionary } from
|
|
3
|
-
import type { TextNode, TypedNode } from
|
|
1
|
+
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
+
import { ComponentTypeDictionary } from '../../factory/types.js';
|
|
3
|
+
import type { TextNode, TypedNode } from './types.js';
|
|
4
|
+
import { type PropsWithOptionalContext } from '../../context/types.js';
|
|
4
5
|
/**
|
|
5
6
|
* Create a React Component to render an element within a Rich-Text area.
|
|
6
7
|
* The generated React Component contains the logic to transform the attributes
|
|
@@ -16,12 +17,12 @@ import type { TextNode, TypedNode } from "./types.js";
|
|
|
16
17
|
*
|
|
17
18
|
* @returns The React Component
|
|
18
19
|
*/
|
|
19
|
-
export declare function createHtmlComponent<E extends keyof JSX.IntrinsicElements>(element: E, ignoreChildren?: boolean, defaultProps?: JSX.IntrinsicElements[E] & Record<string, string>): ({ children, node, ...props }: PropsWithChildren<JSX.IntrinsicElements[E] & {
|
|
20
|
+
export declare function createHtmlComponent<E extends keyof JSX.IntrinsicElements>(element: E, ignoreChildren?: boolean, defaultProps?: JSX.IntrinsicElements[E] & Record<string, string>): ({ children, node, ctx, ...props }: PropsWithOptionalContext<PropsWithChildren<JSX.IntrinsicElements[E] & {
|
|
20
21
|
node: TypedNode;
|
|
21
|
-
}
|
|
22
|
-
export declare const DefaultTextNode: FunctionComponent<{
|
|
22
|
+
}>>) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const DefaultTextNode: FunctionComponent<PropsWithOptionalContext<{
|
|
23
24
|
node: TextNode;
|
|
24
|
-
}
|
|
25
|
+
}>>;
|
|
25
26
|
/**
|
|
26
27
|
* A default component dictionary that allows to serialize the structured HTML
|
|
27
28
|
* into React, using the component library shared across the react SDK.
|
|
@@ -20,11 +20,13 @@ const reservedProps = ['url', 'class', 'children', 'type', 'internal', 'base'];
|
|
|
20
20
|
*/
|
|
21
21
|
export function createHtmlComponent(element, ignoreChildren = false, defaultProps) {
|
|
22
22
|
const HtmlElement = element;
|
|
23
|
-
const component = ({ children, node, ...props }) => {
|
|
23
|
+
const component = ({ children, node, ctx, ...props }) => {
|
|
24
24
|
const nodeProps = {};
|
|
25
25
|
const renderProps = Object.getOwnPropertyNames(node);
|
|
26
26
|
// Copy over non-reserved Props
|
|
27
|
-
renderProps
|
|
27
|
+
renderProps
|
|
28
|
+
.filter((x) => !reservedProps.includes(x))
|
|
29
|
+
.forEach((x) => (nodeProps[x] = node[x]));
|
|
28
30
|
// Move CSS Class definition into React property name
|
|
29
31
|
if (renderProps.includes('class'))
|
|
30
32
|
nodeProps['className'] = node['class'];
|
|
@@ -44,19 +46,17 @@ export function createHtmlComponent(element, ignoreChildren = false, defaultProp
|
|
|
44
46
|
}
|
|
45
47
|
}
|
|
46
48
|
// Render element
|
|
47
|
-
return ignoreChildren ?
|
|
48
|
-
_jsx(HtmlElement, { ...defaultProps, ...nodeProps, ...props }) :
|
|
49
|
-
_jsx(HtmlElement, { ...defaultProps, ...nodeProps, ...props, children: children });
|
|
49
|
+
return ignoreChildren ? (_jsx(HtmlElement, { ...defaultProps, ...nodeProps, ...props })) : (_jsx(HtmlElement, { ...defaultProps, ...nodeProps, ...props, children: children }));
|
|
50
50
|
};
|
|
51
51
|
return component;
|
|
52
52
|
}
|
|
53
|
-
export const DefaultTextNode = ({ node }) => {
|
|
53
|
+
export const DefaultTextNode = ({ ctx, node }) => {
|
|
54
54
|
if (node.bold)
|
|
55
55
|
return _jsx("strong", { children: decodeHTML(node.text) });
|
|
56
56
|
if (node.italic)
|
|
57
57
|
return _jsx("em", { children: decodeHTML(node.text) });
|
|
58
|
-
const unsupportedProps = Object.getOwnPropertyNames(node).filter(x => x != 'text');
|
|
59
|
-
if (unsupportedProps.length > 0 &&
|
|
58
|
+
const unsupportedProps = Object.getOwnPropertyNames(node).filter((x) => x != 'text');
|
|
59
|
+
if (unsupportedProps.length > 0 && ctx?.isDebugOrDevelopment)
|
|
60
60
|
console.warn('🟠 [Rich Text] Text node with unsupported additional properties:', unsupportedProps.join(', '));
|
|
61
61
|
return decodeHTML(node.text);
|
|
62
62
|
};
|
|
@@ -66,22 +66,27 @@ export const DefaultTextNode = ({ node }) => {
|
|
|
66
66
|
*/
|
|
67
67
|
export const DefaultComponents = [
|
|
68
68
|
// System types
|
|
69
|
-
{
|
|
69
|
+
{
|
|
70
|
+
type: 'RichText/richText',
|
|
71
|
+
component: createHtmlComponent('div', false, {
|
|
72
|
+
className: 'cms:rich-text',
|
|
73
|
+
}),
|
|
74
|
+
},
|
|
70
75
|
{ type: 'RichText/text', component: DefaultTextNode },
|
|
71
76
|
// Aliased tags
|
|
72
|
-
{ type: 'RichText/paragraph', component: createHtmlComponent(
|
|
73
|
-
{ type: 'RichText/heading-one', component: createHtmlComponent(
|
|
74
|
-
{ type: 'RichText/heading-two', component: createHtmlComponent(
|
|
75
|
-
{ type: 'RichText/heading-three', component: createHtmlComponent(
|
|
76
|
-
{ type: 'RichText/heading-four', component: createHtmlComponent(
|
|
77
|
-
{ type: 'RichText/heading-five', component: createHtmlComponent(
|
|
78
|
-
{ type: 'RichText/heading-six', component: createHtmlComponent(
|
|
79
|
-
{ type: 'RichText/link', component: createHtmlComponent(
|
|
80
|
-
{ type: 'RichText/bulleted-list', component: createHtmlComponent(
|
|
81
|
-
{ type: 'RichText/numbered-list', component: createHtmlComponent(
|
|
82
|
-
{ type: 'RichText/list-item', component: createHtmlComponent(
|
|
83
|
-
{ type: 'RichText/image', component: createHtmlComponent(
|
|
77
|
+
{ type: 'RichText/paragraph', component: createHtmlComponent('p') },
|
|
78
|
+
{ type: 'RichText/heading-one', component: createHtmlComponent('h1') },
|
|
79
|
+
{ type: 'RichText/heading-two', component: createHtmlComponent('h2') },
|
|
80
|
+
{ type: 'RichText/heading-three', component: createHtmlComponent('h3') },
|
|
81
|
+
{ type: 'RichText/heading-four', component: createHtmlComponent('h4') },
|
|
82
|
+
{ type: 'RichText/heading-five', component: createHtmlComponent('h5') },
|
|
83
|
+
{ type: 'RichText/heading-six', component: createHtmlComponent('h6') },
|
|
84
|
+
{ type: 'RichText/link', component: createHtmlComponent('a') },
|
|
85
|
+
{ type: 'RichText/bulleted-list', component: createHtmlComponent('ul') },
|
|
86
|
+
{ type: 'RichText/numbered-list', component: createHtmlComponent('ol') },
|
|
87
|
+
{ type: 'RichText/list-item', component: createHtmlComponent('li') },
|
|
88
|
+
{ type: 'RichText/image', component: createHtmlComponent('img', true) },
|
|
84
89
|
// Self-closing tags
|
|
85
|
-
{ type: 'RichText/br', component: createHtmlComponent(
|
|
90
|
+
{ type: 'RichText/br', component: createHtmlComponent('br', true) },
|
|
86
91
|
];
|
|
87
92
|
//# sourceMappingURL=components.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/components/rich-text/components.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/components/rich-text/components.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,mBAAmB;AACnB,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,CAAA;AAE9E,yBAAyB;AACzB;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,mBAAmB,CACjC,OAAU,EACV,iBAA0B,KAAK,EAC/B,YAAgE;IAEhE,MAAM,WAAW,GAAG,OAAiB,CAAA;IACrC,MAAM,SAAS,GAAG,CAAC,EACjB,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,GAAG,KAAK,EAGT,EAAE,EAAE;QACH,MAAM,SAAS,GAA8C,EAAE,CAAA;QAC/D,MAAM,WAAW,GAAG,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAElD,CAAA;QAED,+BAA+B;QAC/B,WAAW;aACR,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aACzC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAE3C,qDAAqD;QACrD,IAAI,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC;YAAE,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAA;QAEzE,cAAc;QACd,IAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAChC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;gBAClB,KAAK,MAAM;oBACT,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;oBAC/B,MAAK;gBACP,KAAK,OAAO,CAAC;gBACb,KAAK,OAAO;oBACV,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;oBAC9B,MAAK;gBACP;oBACE,SAAS,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;oBACnC,MAAK;YACT,CAAC;QACH,CAAC;QAED,iBAAiB;QACjB,OAAO,cAAc,CAAC,CAAC,CAAC,CACtB,KAAC,WAAW,OAAK,YAAY,KAAM,SAAS,KAAM,KAAK,GAAI,CAC5D,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,OAAK,YAAY,KAAM,SAAS,KAAM,KAAK,YACpD,QAAQ,GACG,CACf,CAAA;IACH,CAAC,CAAA;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAExB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE;IACpB,IAAI,IAAI,CAAC,IAAI;QAAE,OAAO,2BAAS,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAU,CAAA;IAC9D,IAAI,IAAI,CAAC,MAAM;QAAE,OAAO,uBAAK,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAM,CAAA;IACxD,MAAM,gBAAgB,GAAG,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,MAAM,CAC9D,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,MAAM,CACnB,CAAA;IACD,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,oBAAoB;QAC1D,OAAO,CAAC,IAAI,CACV,kEAAkE,EAClE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAC5B,CAAA;IACH,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC9B,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAA4B;IACxD,eAAe;IACf;QACE,IAAI,EAAE,mBAAmB;QACzB,SAAS,EAAE,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE;YAC3C,SAAS,EAAE,eAAe;SAC3B,CAAC;KACH;IACD,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe,EAAE;IAErD,eAAe;IACf,EAAE,IAAI,EAAE,oBAAoB,EAAE,SAAS,EAAE,mBAAmB,CAAC,GAAG,CAAC,EAAE;IACnE,EAAE,IAAI,EAAE,sBAAsB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACtE,EAAE,IAAI,EAAE,sBAAsB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACtE,EAAE,IAAI,EAAE,wBAAwB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACxE,EAAE,IAAI,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACvE,EAAE,IAAI,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACvE,EAAE,IAAI,EAAE,sBAAsB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACtE,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,mBAAmB,CAAC,GAAG,CAAC,EAAE;IAC9D,EAAE,IAAI,EAAE,wBAAwB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACxE,EAAE,IAAI,EAAE,wBAAwB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACxE,EAAE,IAAI,EAAE,oBAAoB,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACpE,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;IAEvE,oBAAoB;IACpB,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE;CACpE,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type FunctionComponent } from
|
|
2
|
-
import type { RichTextProps } from
|
|
3
|
-
import { type PropsWithContext } from
|
|
4
|
-
export * from
|
|
1
|
+
import { type FunctionComponent } from 'react';
|
|
2
|
+
import type { RichTextProps } from './types.js';
|
|
3
|
+
import { type PropsWithContext } from '../../context/types.js';
|
|
4
|
+
export * from './types.js';
|
|
5
5
|
export declare const RichText: FunctionComponent<PropsWithContext<RichTextProps>>;
|
|
@@ -1,39 +1,36 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import * as Utils from './utils.js';
|
|
3
|
-
import { DefaultComponentFactory } from
|
|
4
|
-
import { DefaultComponents, DefaultTextNode, createHtmlComponent } from
|
|
5
|
-
import { CmsEditable } from
|
|
6
|
-
export * from
|
|
7
|
-
export const RichText = ({ factory, text =
|
|
8
|
-
const id = Utils.getRandomId(
|
|
9
|
-
const richTextFactory = factory ??
|
|
10
|
-
const { inEditMode } = ctx;
|
|
3
|
+
import { DefaultComponentFactory } from '../../factory/default.js';
|
|
4
|
+
import { DefaultComponents, DefaultTextNode, createHtmlComponent, } from './components.js';
|
|
5
|
+
import { CmsEditable } from '../cms-editable/index.js';
|
|
6
|
+
export * from './types.js';
|
|
7
|
+
export const RichText = ({ factory, text = '{ "type": "richText" }', className = 'rich-text', as: Wrapper = 'div', debug = false, noWrapper = false, cmsFieldName = null, cmsId = null, ctx, ...props }) => {
|
|
8
|
+
const id = Utils.getRandomId('rich-text');
|
|
9
|
+
const richTextFactory = ctx.factory ?? factory ?? new DefaultComponentFactory(DefaultComponents);
|
|
11
10
|
try {
|
|
12
11
|
const data = Utils.processNodeInput(text);
|
|
13
12
|
const textContent = (data?.children || []).map((child, idx) => {
|
|
14
13
|
const elementId = id + '::' + idx;
|
|
15
|
-
return _jsx(RichTextElement, { factory: richTextFactory, node: child, idPrefix: elementId + '::' }, elementId);
|
|
14
|
+
return (_jsx(RichTextElement, { factory: richTextFactory, node: child, idPrefix: elementId + '::', ctx: ctx }, elementId));
|
|
16
15
|
});
|
|
17
16
|
if (noWrapper)
|
|
18
17
|
return _jsx(_Fragment, { children: textContent });
|
|
19
|
-
|
|
20
|
-
return _jsx(CmsEditable, { as: Wrapper, className: className, cmsId: cmsId || undefined, cmsFieldName: cmsFieldName || undefined, ctx: ctx, ...props, children: textContent });
|
|
21
|
-
return _jsx(Wrapper, { className: className, ...props, children: textContent });
|
|
18
|
+
return (_jsx(CmsEditable, { as: Wrapper, className: className, cmsId: cmsId || undefined, cmsFieldName: cmsFieldName || undefined, ctx: ctx, ...props, children: textContent }));
|
|
22
19
|
}
|
|
23
20
|
catch {
|
|
24
21
|
if (debug)
|
|
25
22
|
console.warn('🟠 [Rich Text] Invalid rich text received: ', text);
|
|
26
|
-
return Object.getOwnPropertyNames(props).length > 0 ? _jsx("div", { className: className, ...props }) : null;
|
|
23
|
+
return Object.getOwnPropertyNames(props).length > 0 ? (_jsx("div", { className: className, ...props })) : null;
|
|
27
24
|
}
|
|
28
25
|
};
|
|
29
26
|
//#region Supportive React components
|
|
30
|
-
const RichTextElement = ({ factory, node, idPrefix, debug }) => {
|
|
27
|
+
const RichTextElement = ({ factory, node, idPrefix, debug, ctx }) => {
|
|
31
28
|
// Render text
|
|
32
29
|
if (Utils.isText(node)) {
|
|
33
30
|
if (node.text.length == 0)
|
|
34
31
|
return null;
|
|
35
32
|
const TextComponent = factory?.resolve(`RichText/text`) ?? DefaultTextNode;
|
|
36
|
-
return _jsx(TextComponent, { node: node });
|
|
33
|
+
return _jsx(TextComponent, { node: node, ctx: ctx });
|
|
37
34
|
}
|
|
38
35
|
// Ignore incorrect data
|
|
39
36
|
if (!Utils.isTypedNode(node)) {
|
|
@@ -42,10 +39,12 @@ const RichTextElement = ({ factory, node, idPrefix, debug }) => {
|
|
|
42
39
|
return null;
|
|
43
40
|
}
|
|
44
41
|
// Process children
|
|
45
|
-
const childData = node.children &&
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
42
|
+
const childData = node.children && node.children.length > 0
|
|
43
|
+
? node.children.map((child, idx) => {
|
|
44
|
+
const elementId = idPrefix + idx;
|
|
45
|
+
return (_jsx(RichTextElement, { factory: factory, node: child, idPrefix: elementId + '::', ctx: ctx }, elementId));
|
|
46
|
+
})
|
|
47
|
+
: undefined;
|
|
49
48
|
// Resolve component (and add to factory if not yet present)
|
|
50
49
|
let Component = factory?.resolve(`RichText/${node.type}`);
|
|
51
50
|
if (!Component) {
|
|
@@ -55,6 +54,6 @@ const RichTextElement = ({ factory, node, idPrefix, debug }) => {
|
|
|
55
54
|
factory?.register(`RichText/${node.type}`, Component);
|
|
56
55
|
}
|
|
57
56
|
// Return component
|
|
58
|
-
return _jsx(Component, { node: node, children: childData &&
|
|
57
|
+
return (_jsx(Component, { node: node, ctx: ctx, children: childData && childData.length > 0 ? childData : undefined }));
|
|
59
58
|
};
|
|
60
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/rich-text/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/rich-text/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { ComponentType as ReactComponentType } from "react";
|
|
2
|
-
import type { ComponentFactory
|
|
2
|
+
import type { ComponentFactory } from "../../factory/types.js";
|
|
3
|
+
import type { PropsWithOptionalContext } from "../../context/types.js";
|
|
4
|
+
import type { ElementType } from "../type-utils.js";
|
|
3
5
|
export type RichTextProps = {
|
|
4
6
|
/**
|
|
5
7
|
* The component factory used for this rich text content
|
|
@@ -20,7 +22,7 @@ export type RichTextProps = {
|
|
|
20
22
|
* Set the component type of the wrapper to use, defaults to a 'div'
|
|
21
23
|
* element when not defined
|
|
22
24
|
*/
|
|
23
|
-
as?:
|
|
25
|
+
as?: ElementType;
|
|
24
26
|
/**
|
|
25
27
|
* Control the debugging output
|
|
26
28
|
*/
|
|
@@ -30,16 +32,6 @@ export type RichTextProps = {
|
|
|
30
32
|
* will be set on the Fragment to prevent React errors.
|
|
31
33
|
*/
|
|
32
34
|
noWrapper?: boolean;
|
|
33
|
-
} & ({
|
|
34
|
-
/**
|
|
35
|
-
* The fieldname of this Rich Text, when it is used as part of a block
|
|
36
|
-
*/
|
|
37
|
-
cmsFieldName?: never;
|
|
38
|
-
/**
|
|
39
|
-
* The Element ID if this is the sole output of a Visual Builder element
|
|
40
|
-
*/
|
|
41
|
-
cmsId?: string | null;
|
|
42
|
-
} | {
|
|
43
35
|
/**
|
|
44
36
|
* The fieldname of this Rich Text, when it is used as part of a block
|
|
45
37
|
*/
|
|
@@ -47,9 +39,9 @@ export type RichTextProps = {
|
|
|
47
39
|
/**
|
|
48
40
|
* The Element ID if this is the sole output of a Visual Builder element
|
|
49
41
|
*/
|
|
50
|
-
cmsId?:
|
|
51
|
-
}
|
|
52
|
-
export type RichTextComponent = ReactComponentType<RichTextProps
|
|
42
|
+
cmsId?: string | null;
|
|
43
|
+
};
|
|
44
|
+
export type RichTextComponent = ReactComponentType<PropsWithOptionalContext<RichTextProps>>;
|
|
53
45
|
export type RichTextElementProps = Readonly<{
|
|
54
46
|
debug?: boolean;
|
|
55
47
|
factory?: ComponentFactory;
|