@makeswift/runtime 0.6.1 → 0.6.3
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/Box.cjs.js +1 -1
- package/dist/Box.es.js +1 -1
- package/dist/Button.cjs.js +1 -1
- package/dist/Button.es.js +1 -1
- package/dist/Carousel.cjs.js +1 -1
- package/dist/Carousel.es.js +1 -1
- package/dist/Countdown.cjs.js +1 -1
- package/dist/Countdown.es.js +1 -1
- package/dist/Divider.cjs.js +1 -1
- package/dist/Divider.es.js +1 -1
- package/dist/EditableText.cjs.js +11 -2
- package/dist/EditableText.cjs.js.map +1 -1
- package/dist/EditableText.es.js +13 -4
- package/dist/EditableText.es.js.map +1 -1
- package/dist/Embed.cjs.js +1 -1
- package/dist/Embed.es.js +1 -1
- package/dist/Form.cjs.js +1 -1
- package/dist/Form.es.js +1 -1
- package/dist/Image.cjs.js +3 -6
- package/dist/Image.cjs.js.map +1 -1
- package/dist/Image.es.js +4 -7
- package/dist/Image.es.js.map +1 -1
- package/dist/LiveProvider.cjs.js +1 -1
- package/dist/LiveProvider.es.js +1 -1
- package/dist/Navigation.cjs.js +1 -1
- package/dist/Navigation.es.js +1 -1
- package/dist/PreviewProvider.cjs.js +2 -2
- package/dist/PreviewProvider.cjs.js.map +1 -1
- package/dist/PreviewProvider.es.js +2 -2
- package/dist/ReadOnlyText.cjs.js +6 -3
- package/dist/ReadOnlyText.cjs.js.map +1 -1
- package/dist/ReadOnlyText.es.js +6 -3
- package/dist/ReadOnlyText.es.js.map +1 -1
- package/dist/Root.cjs.js +1 -1
- package/dist/Root.es.js +1 -1
- package/dist/SocialLinks.cjs.js +1 -1
- package/dist/SocialLinks.es.js +1 -1
- package/dist/Text.cjs.js +1 -1
- package/dist/Text.es.js +1 -1
- package/dist/Video.cjs.js +1 -1
- package/dist/Video.es.js +1 -1
- package/dist/builder.cjs.js +1 -1
- package/dist/builder.es.js +1 -1
- package/dist/components.cjs.js +1 -1
- package/dist/components.es.js +1 -1
- package/dist/constants.cjs.js +20 -20
- package/dist/constants.cjs.js.map +1 -1
- package/dist/constants.es.js +2 -2
- package/dist/control-serialization.cjs.js +37 -37
- package/dist/control-serialization.cjs.js.map +1 -1
- package/dist/control-serialization.es.js +1 -1
- package/dist/control.cjs.js +22 -22
- package/dist/control.cjs.js.map +1 -1
- package/dist/control.es.js +1 -1
- package/dist/controls.cjs.js +21 -17
- package/dist/controls.cjs.js.map +1 -1
- package/dist/controls.es.js +1 -1
- package/dist/index.cjs.js +237 -208
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs2.js +1 -1
- package/dist/index.cjs5.js +36 -139
- package/dist/index.cjs5.js.map +1 -1
- package/dist/index.cjs6.js +141 -0
- package/dist/index.cjs6.js.map +1 -0
- package/dist/index.es.js +52 -26
- package/dist/index.es.js.map +1 -1
- package/dist/index.es2.js +1 -1
- package/dist/index.es5.js +34 -138
- package/dist/index.es5.js.map +1 -1
- package/dist/index.es6.js +139 -0
- package/dist/index.es6.js.map +1 -0
- package/dist/main.cjs.js +1 -1
- package/dist/main.es.js +1 -1
- package/dist/next.cjs.js +1 -1
- package/dist/next.es.js +2 -2
- package/dist/prop-controllers.cjs.js +4 -4
- package/dist/prop-controllers.es.js +1 -1
- package/dist/react.cjs.js +1 -1
- package/dist/react.es.js +1 -1
- package/dist/{slot.cjs.js → rich-text.cjs.js} +84 -8
- package/dist/rich-text.cjs.js.map +1 -0
- package/dist/{slot.es.js → rich-text.es.js} +80 -8
- package/dist/rich-text.es.js.map +1 -0
- package/dist/types/src/components/builtin/Box/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Image/Image.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/EditableText.d.ts.map +1 -1
- package/dist/types/src/controls/index.d.ts +1 -0
- package/dist/types/src/controls/index.d.ts.map +1 -1
- package/dist/types/src/controls/rich-text.d.ts +66 -0
- package/dist/types/src/controls/rich-text.d.ts.map +1 -0
- package/dist/types/src/controls/style.d.ts +16 -4
- package/dist/types/src/controls/style.d.ts.map +1 -1
- package/dist/types/src/prop-controllers/descriptors.d.ts +4 -2
- package/dist/types/src/prop-controllers/descriptors.d.ts.map +1 -1
- package/dist/types/src/prop-controllers/instances.d.ts +13 -3
- package/dist/types/src/prop-controllers/instances.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text.d.ts +8 -0
- package/dist/types/src/runtimes/react/controls/rich-text.d.ts.map +1 -0
- package/dist/types/src/runtimes/react/controls/slot.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/poll-box-model.d.ts +6 -0
- package/dist/types/src/runtimes/react/poll-box-model.d.ts.map +1 -0
- package/package.json +1 -1
- package/dist/slot.cjs.js.map +0 -1
- package/dist/slot.es.js.map +0 -1
package/dist/index.cjs2.js
CHANGED
|
@@ -33,7 +33,7 @@ var __objRest = (source, exclude) => {
|
|
|
33
33
|
var React = require("react");
|
|
34
34
|
var next = require("./index.cjs.js");
|
|
35
35
|
require("use-sync-external-store/shim");
|
|
36
|
-
require("./
|
|
36
|
+
require("./rich-text.cjs.js");
|
|
37
37
|
var css = require("@emotion/css");
|
|
38
38
|
var jsxRuntime = require("react/jsx-runtime");
|
|
39
39
|
var constants = require("./constants.cjs.js");
|
package/dist/index.cjs5.js
CHANGED
|
@@ -1,141 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const getDeviceId = ({ deviceId }) => deviceId;
|
|
39
|
-
const withColor = (swatches) => (_a) => {
|
|
40
|
-
var _b = _a, {
|
|
41
|
-
value: _c
|
|
42
|
-
} = _b, _d = _c, { color } = _d, restOfValue = __objRest(_d, ["color"]), rest = __objRest(_b, [
|
|
43
|
-
"value"
|
|
44
|
-
]);
|
|
45
|
-
return __spreadProps(__spreadValues({}, rest), {
|
|
46
|
-
value: __spreadValues(__spreadValues({}, restOfValue), color ? {
|
|
47
|
-
color: {
|
|
48
|
-
swatch: swatches.find((s) => s && s.id === color.swatchId),
|
|
49
|
-
alpha: color.alpha
|
|
50
|
-
}
|
|
51
|
-
} : {})
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
const overrideTypographyStyle = (source, override) => {
|
|
55
|
-
const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))];
|
|
56
|
-
return devices.map((deviceId) => ({
|
|
57
|
-
deviceId,
|
|
58
|
-
value: __spreadValues(__spreadValues({}, (next.findDeviceOverride(source, deviceId) || { value: {} }).value), (next.findDeviceOverride(override, deviceId, (v) => v) || { value: {} }).value)
|
|
59
|
-
}));
|
|
60
|
-
};
|
|
61
|
-
function useTypographyMark(value) {
|
|
62
|
-
var _a, _b, _c;
|
|
63
|
-
const typography = next.useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null);
|
|
64
|
-
const swatchIds = [
|
|
65
|
-
...constants.getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
|
|
66
|
-
...constants.getTypographyStyleSwatchIds(typography == null ? void 0 : typography.style)
|
|
67
|
-
];
|
|
68
|
-
const swatches = next.useSwatches(swatchIds);
|
|
69
|
-
return overrideTypographyStyle((_b = typography == null ? void 0 : typography.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _b : [], (_c = value == null ? void 0 : value.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _c : []);
|
|
70
|
-
}
|
|
71
|
-
function Mark(_a) {
|
|
72
|
-
var _b = _a, {
|
|
73
|
-
value,
|
|
74
|
-
className
|
|
75
|
-
} = _b, restOfProps = __objRest(_b, [
|
|
76
|
-
"value",
|
|
77
|
-
"className"
|
|
78
|
-
]);
|
|
79
|
-
const typographyStyle = useTypographyMark(value);
|
|
80
|
-
const typographyClassName = next.useStyle(next.responsiveStyle([typographyStyle], ([{
|
|
81
|
-
color,
|
|
82
|
-
fontFamily,
|
|
83
|
-
fontSize,
|
|
84
|
-
fontWeight,
|
|
85
|
-
lineHeight,
|
|
86
|
-
letterSpacing,
|
|
87
|
-
uppercase,
|
|
88
|
-
underline,
|
|
89
|
-
strikethrough,
|
|
90
|
-
italic
|
|
91
|
-
} = {}]) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, color == null ? {} : {
|
|
92
|
-
color: next.colorToString(color)
|
|
93
|
-
}), fontFamily == null ? {} : {
|
|
94
|
-
fontFamily
|
|
95
|
-
}), fontSize == null || fontSize.value == null || fontSize.unit == null ? {} : {
|
|
96
|
-
fontSize: `${fontSize.value}${fontSize.unit}`
|
|
97
|
-
}), fontWeight == null ? {} : {
|
|
98
|
-
fontWeight
|
|
99
|
-
}), lineHeight == null ? {} : {
|
|
100
|
-
lineHeight
|
|
101
|
-
}), letterSpacing == null ? {} : {
|
|
102
|
-
letterSpacing: `${letterSpacing / 10}em`
|
|
103
|
-
}), uppercase == null ? {} : {
|
|
104
|
-
textTransform: uppercase === true ? "uppercase" : "initial"
|
|
105
|
-
}), underline == null && strikethrough == null ? {} : {
|
|
106
|
-
textDecoration: [Boolean(underline) && "underline", Boolean(strikethrough) && "line-through"].filter(Boolean).join(" ")
|
|
107
|
-
}), italic == null ? {} : {
|
|
108
|
-
fontStyle: italic === true ? "italic" : "initial"
|
|
109
|
-
}), next.shallowMergeFallbacks));
|
|
110
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
|
|
111
|
-
className: css.cx(typographyClassName, className)
|
|
112
|
-
}));
|
|
113
|
-
}
|
|
114
|
-
var DeviceOverrideBlock = React.forwardRef(function Block(_c, ref) {
|
|
115
|
-
var _d = _c, {
|
|
116
|
-
textAlign,
|
|
117
|
-
className,
|
|
118
|
-
as
|
|
119
|
-
} = _d, restOfProps = __objRest(_d, [
|
|
120
|
-
"textAlign",
|
|
121
|
-
"className",
|
|
122
|
-
"as"
|
|
123
|
-
]);
|
|
124
|
-
const Component = as != null ? as : "div";
|
|
125
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
|
|
126
|
-
ref,
|
|
127
|
-
className: css.cx(next.useStyle({
|
|
128
|
-
margin: 0
|
|
129
|
-
}), next.useStyle(next.responsiveStyle([textAlign], ([textAlign2 = "left"]) => ({
|
|
130
|
-
textAlign: textAlign2
|
|
131
|
-
}))), next.useStyle(as === "blockquote" ? {
|
|
132
|
-
padding: "0.5em 10px",
|
|
133
|
-
fontSize: "1.25em",
|
|
134
|
-
fontWeight: "300",
|
|
135
|
-
borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
|
|
136
|
-
} : {}), className)
|
|
137
|
-
}));
|
|
138
|
-
});
|
|
139
|
-
exports.DeviceOverrideBlock = DeviceOverrideBlock;
|
|
140
|
-
exports.Mark = Mark;
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
var Text = require("./Text.cjs.js");
|
|
4
|
+
require("next/dynamic");
|
|
5
|
+
require("react");
|
|
6
|
+
require("./index.cjs.js");
|
|
7
|
+
require("use-sync-external-store/shim/with-selector");
|
|
8
|
+
require("./constants.cjs.js");
|
|
9
|
+
require("redux");
|
|
10
|
+
require("redux-thunk");
|
|
11
|
+
require("./actions.cjs.js");
|
|
12
|
+
require("./rich-text.cjs.js");
|
|
13
|
+
require("./control.cjs.js");
|
|
14
|
+
require("@emotion/css");
|
|
15
|
+
require("@emotion/serialize");
|
|
16
|
+
require("@emotion/utils");
|
|
17
|
+
require("react/jsx-runtime");
|
|
18
|
+
require("./text-input.cjs.js");
|
|
19
|
+
require("./combobox.cjs.js");
|
|
20
|
+
require("use-sync-external-store/shim");
|
|
21
|
+
require("./types.cjs.js");
|
|
22
|
+
require("color");
|
|
23
|
+
require("scroll-into-view-if-needed");
|
|
24
|
+
require("./box-models.cjs.js");
|
|
25
|
+
require("css-box-model");
|
|
26
|
+
require("react-dom");
|
|
27
|
+
require("html-react-parser");
|
|
28
|
+
require("next/head");
|
|
29
|
+
require("@emotion/server/create-instance");
|
|
30
|
+
require("next/document");
|
|
31
|
+
require("cookie");
|
|
32
|
+
require("cors");
|
|
33
|
+
require("http-proxy");
|
|
34
|
+
require("set-cookie-parser");
|
|
35
|
+
require("uuid/v4");
|
|
36
|
+
require("corporate-ipsum");
|
|
37
|
+
exports["default"] = Text["default"];
|
|
141
38
|
//# sourceMappingURL=index.cjs5.js.map
|
package/dist/index.cjs5.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs5.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n useSwatches,\n useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n fontWeight?: number\n fontSize?: LengthValue\n fontFamily?: string\n color?: Color\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n italic?: boolean\n underline?: boolean\n strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n id: string | null | undefined\n style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n (swatches: Swatch[]) =>\n ({\n value: { color, ...restOfValue },\n ...rest\n }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find(s => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n } as TypographyMarkDataValue,\n } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n source: Array<DeviceOverride<A>>,\n override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n return devices.map(deviceId => ({\n deviceId,\n value: {\n ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n },\n })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n const typography = useTypography(value?.id ?? null)\n const swatchIds = [\n ...getTypographyStyleSwatchIds(value?.style),\n ...getTypographyStyleSwatchIds(typography?.style),\n ]\n const swatches = useSwatches(swatchIds)\n\n return overrideTypographyStyle(\n typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n const typographyClassName = useStyle(\n responsiveStyle<\n TypographyMarkDataValue,\n [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n >(\n [typographyStyle],\n ([\n {\n color,\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n uppercase,\n underline,\n strikethrough,\n italic,\n } = {} as TypographyMarkDataValue,\n ]) => ({\n ...(color == null ? {} : { color: colorToString(color) }),\n ...(fontFamily == null ? {} : { fontFamily }),\n ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n ? {}\n : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(lineHeight == null ? {} : { lineHeight }),\n ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n ...(uppercase == null\n ? {}\n : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n ...(underline == null && strikethrough == null\n ? {}\n : {\n textDecoration: [\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' '),\n }),\n ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n }),\n shallowMergeFallbacks,\n ),\n )\n\n return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","import { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n { textAlign, className, as, ...restOfProps }: Props<T>,\n ref: ForwardedRef<ElementRef<T>>,\n) {\n const Component = as ?? 'div'\n\n return (\n // @ts-ignore: `ref` types don't match.\n <Component\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ margin: 0 }),\n useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n useStyle(\n as === 'blockquote'\n ? {\n padding: '0.5em 10px',\n fontSize: '1.25em',\n fontWeight: '300',\n borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n }\n : {},\n ),\n className,\n )}\n />\n )\n})\n"],"names":["findDeviceOverride","useTypography","getTypographyStyleSwatchIds","useSwatches","isNonNullable","value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
var next = require("./index.cjs.js");
|
|
34
|
+
var constants = require("./constants.cjs.js");
|
|
35
|
+
var css = require("@emotion/css");
|
|
36
|
+
var jsxRuntime = require("react/jsx-runtime");
|
|
37
|
+
var React = require("react");
|
|
38
|
+
const getDeviceId = ({ deviceId }) => deviceId;
|
|
39
|
+
const withColor = (swatches) => (_a) => {
|
|
40
|
+
var _b = _a, {
|
|
41
|
+
value: _c
|
|
42
|
+
} = _b, _d = _c, { color } = _d, restOfValue = __objRest(_d, ["color"]), rest = __objRest(_b, [
|
|
43
|
+
"value"
|
|
44
|
+
]);
|
|
45
|
+
return __spreadProps(__spreadValues({}, rest), {
|
|
46
|
+
value: __spreadValues(__spreadValues({}, restOfValue), color ? {
|
|
47
|
+
color: {
|
|
48
|
+
swatch: swatches.find((s) => s && s.id === color.swatchId),
|
|
49
|
+
alpha: color.alpha
|
|
50
|
+
}
|
|
51
|
+
} : {})
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
const overrideTypographyStyle = (source, override) => {
|
|
55
|
+
const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))];
|
|
56
|
+
return devices.map((deviceId) => ({
|
|
57
|
+
deviceId,
|
|
58
|
+
value: __spreadValues(__spreadValues({}, (next.findDeviceOverride(source, deviceId) || { value: {} }).value), (next.findDeviceOverride(override, deviceId, (v) => v) || { value: {} }).value)
|
|
59
|
+
}));
|
|
60
|
+
};
|
|
61
|
+
function useTypographyMark(value) {
|
|
62
|
+
var _a, _b, _c;
|
|
63
|
+
const typography = next.useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null);
|
|
64
|
+
const swatchIds = [
|
|
65
|
+
...constants.getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
|
|
66
|
+
...constants.getTypographyStyleSwatchIds(typography == null ? void 0 : typography.style)
|
|
67
|
+
];
|
|
68
|
+
const swatches = next.useSwatches(swatchIds);
|
|
69
|
+
return overrideTypographyStyle((_b = typography == null ? void 0 : typography.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _b : [], (_c = value == null ? void 0 : value.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _c : []);
|
|
70
|
+
}
|
|
71
|
+
function Mark(_a) {
|
|
72
|
+
var _b = _a, {
|
|
73
|
+
value,
|
|
74
|
+
className
|
|
75
|
+
} = _b, restOfProps = __objRest(_b, [
|
|
76
|
+
"value",
|
|
77
|
+
"className"
|
|
78
|
+
]);
|
|
79
|
+
const typographyStyle = useTypographyMark(value);
|
|
80
|
+
const typographyClassName = next.useStyle(next.responsiveStyle([typographyStyle], ([{
|
|
81
|
+
color,
|
|
82
|
+
fontFamily,
|
|
83
|
+
fontSize,
|
|
84
|
+
fontWeight,
|
|
85
|
+
lineHeight,
|
|
86
|
+
letterSpacing,
|
|
87
|
+
uppercase,
|
|
88
|
+
underline,
|
|
89
|
+
strikethrough,
|
|
90
|
+
italic
|
|
91
|
+
} = {}]) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, color == null ? {} : {
|
|
92
|
+
color: next.colorToString(color)
|
|
93
|
+
}), fontFamily == null ? {} : {
|
|
94
|
+
fontFamily
|
|
95
|
+
}), fontSize == null || fontSize.value == null || fontSize.unit == null ? {} : {
|
|
96
|
+
fontSize: `${fontSize.value}${fontSize.unit}`
|
|
97
|
+
}), fontWeight == null ? {} : {
|
|
98
|
+
fontWeight
|
|
99
|
+
}), lineHeight == null ? {} : {
|
|
100
|
+
lineHeight
|
|
101
|
+
}), letterSpacing == null ? {} : {
|
|
102
|
+
letterSpacing: `${letterSpacing / 10}em`
|
|
103
|
+
}), uppercase == null ? {} : {
|
|
104
|
+
textTransform: uppercase === true ? "uppercase" : "initial"
|
|
105
|
+
}), underline == null && strikethrough == null ? {} : {
|
|
106
|
+
textDecoration: [Boolean(underline) && "underline", Boolean(strikethrough) && "line-through"].filter(Boolean).join(" ")
|
|
107
|
+
}), italic == null ? {} : {
|
|
108
|
+
fontStyle: italic === true ? "italic" : "initial"
|
|
109
|
+
}), next.shallowMergeFallbacks));
|
|
110
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
|
|
111
|
+
className: css.cx(typographyClassName, className)
|
|
112
|
+
}));
|
|
113
|
+
}
|
|
114
|
+
var DeviceOverrideBlock = React.forwardRef(function Block(_c, ref) {
|
|
115
|
+
var _d = _c, {
|
|
116
|
+
textAlign,
|
|
117
|
+
className,
|
|
118
|
+
as
|
|
119
|
+
} = _d, restOfProps = __objRest(_d, [
|
|
120
|
+
"textAlign",
|
|
121
|
+
"className",
|
|
122
|
+
"as"
|
|
123
|
+
]);
|
|
124
|
+
const Component = as != null ? as : "div";
|
|
125
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
|
|
126
|
+
ref,
|
|
127
|
+
className: css.cx(next.useStyle({
|
|
128
|
+
margin: 0
|
|
129
|
+
}), next.useStyle(next.responsiveStyle([textAlign], ([textAlign2 = "left"]) => ({
|
|
130
|
+
textAlign: textAlign2
|
|
131
|
+
}))), next.useStyle(as === "blockquote" ? {
|
|
132
|
+
padding: "0.5em 10px",
|
|
133
|
+
fontSize: "1.25em",
|
|
134
|
+
fontWeight: "300",
|
|
135
|
+
borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
|
|
136
|
+
} : {}), className)
|
|
137
|
+
}));
|
|
138
|
+
});
|
|
139
|
+
exports.DeviceOverrideBlock = DeviceOverrideBlock;
|
|
140
|
+
exports.Mark = Mark;
|
|
141
|
+
//# sourceMappingURL=index.cjs6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs6.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n useSwatches,\n useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n fontWeight?: number\n fontSize?: LengthValue\n fontFamily?: string\n color?: Color\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n italic?: boolean\n underline?: boolean\n strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n id: string | null | undefined\n style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n (swatches: Swatch[]) =>\n ({\n value: { color, ...restOfValue },\n ...rest\n }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find(s => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n } as TypographyMarkDataValue,\n } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n source: Array<DeviceOverride<A>>,\n override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n return devices.map(deviceId => ({\n deviceId,\n value: {\n ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n },\n })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n const typography = useTypography(value?.id ?? null)\n const swatchIds = [\n ...getTypographyStyleSwatchIds(value?.style),\n ...getTypographyStyleSwatchIds(typography?.style),\n ]\n const swatches = useSwatches(swatchIds)\n\n return overrideTypographyStyle(\n typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n const typographyClassName = useStyle(\n responsiveStyle<\n TypographyMarkDataValue,\n [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n >(\n [typographyStyle],\n ([\n {\n color,\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n uppercase,\n underline,\n strikethrough,\n italic,\n } = {} as TypographyMarkDataValue,\n ]) => ({\n ...(color == null ? {} : { color: colorToString(color) }),\n ...(fontFamily == null ? {} : { fontFamily }),\n ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n ? {}\n : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(lineHeight == null ? {} : { lineHeight }),\n ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n ...(uppercase == null\n ? {}\n : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n ...(underline == null && strikethrough == null\n ? {}\n : {\n textDecoration: [\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' '),\n }),\n ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n }),\n shallowMergeFallbacks,\n ),\n )\n\n return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","import { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n { textAlign, className, as, ...restOfProps }: Props<T>,\n ref: ForwardedRef<ElementRef<T>>,\n) {\n const Component = as ?? 'div'\n\n return (\n // @ts-ignore: `ref` types don't match.\n <Component\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ margin: 0 }),\n useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n useStyle(\n as === 'blockquote'\n ? {\n padding: '0.5em 10px',\n fontSize: '1.25em',\n fontWeight: '300',\n borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n }\n : {},\n ),\n className,\n )}\n />\n )\n})\n"],"names":["findDeviceOverride","useTypography","getTypographyStyleSwatchIds","useSwatches","isNonNullable","value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft"],"mappings":"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"}
|
package/dist/index.es.js
CHANGED
|
@@ -39,13 +39,13 @@ import * as React from "react";
|
|
|
39
39
|
import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useCallback, useImperativeHandle, Component, Suspense } from "react";
|
|
40
40
|
import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
|
|
41
41
|
import dynamic from "next/dynamic";
|
|
42
|
-
import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, M as MakeswiftComponentType, k as getBorderSwatchIds, l as isNonNullable, m as getBoxShadowsSwatchIds, n as getResponsiveColorSwatchIds, o as
|
|
42
|
+
import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, M as MakeswiftComponentType, k as getBorderSwatchIds, l as isNonNullable, m as getBoxShadowsSwatchIds, n as getResponsiveColorSwatchIds, o as isPropControllersHandle, p as getComponentPropControllerDescriptors, q as getPropControllers, r as configureStore$1, s as getDocument, t as getElementId, u as getIsPreview, v as getIsInBuilder, w as copyElementTree, x as getReactComponent } from "./constants.es.js";
|
|
43
43
|
import { A as ActionTypes, f as introspectedResourcesFulfilled, g as apiResourceFulfilled, t as typographiesFulfilled, h as registerComponentHandleEffect, j as mountComponentEffect, k as registerComponentEffect, l as registerReactComponentEffect } from "./actions.es.js";
|
|
44
44
|
import { cache, cx } from "@emotion/css";
|
|
45
45
|
import { serializeStyles } from "@emotion/serialize";
|
|
46
46
|
import { registerStyles, insertStyles } from "@emotion/utils";
|
|
47
47
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
48
|
-
import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, r as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, I as ImageControlType, C as ColorControlType, Q as BorderPropControllerFormat, U as ShadowsPropControllerFormat, X as BorderRadiusPropControllerFormat, Y as MarginPropControllerFormat, Z as PaddingPropControllerFormat, _ as WidthPropControllerFormat, S as SlotControlType, a as StyleControlType } from "./
|
|
48
|
+
import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, r as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, I as ImageControlType, C as ColorControlType, Q as BorderPropControllerFormat, U as ShadowsPropControllerFormat, X as BorderRadiusPropControllerFormat, Y as MarginPropControllerFormat, Z as PaddingPropControllerFormat, _ as WidthPropControllerFormat, S as SlotControlType, $ as RichTextControlType, a as StyleControlType } from "./rich-text.es.js";
|
|
49
49
|
import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
|
|
50
50
|
import { C as ComboboxControlType } from "./combobox.es.js";
|
|
51
51
|
import { S as ShapeControlType, L as ListControlType, b as LinkControlType } from "./control.es.js";
|
|
@@ -1048,7 +1048,7 @@ class Document$1 extends NextDocument {
|
|
|
1048
1048
|
});
|
|
1049
1049
|
}
|
|
1050
1050
|
}
|
|
1051
|
-
const version = "0.6.
|
|
1051
|
+
const version = "0.6.3";
|
|
1052
1052
|
function isErrorWithMessage(error) {
|
|
1053
1053
|
return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
|
|
1054
1054
|
}
|
|
@@ -1379,7 +1379,10 @@ function registerComponent$c(runtime) {
|
|
|
1379
1379
|
props: {
|
|
1380
1380
|
id: ElementID(),
|
|
1381
1381
|
backgrounds: Backgrounds(),
|
|
1382
|
-
width: Width({
|
|
1382
|
+
width: Width({
|
|
1383
|
+
format: Width.Format.ClassName,
|
|
1384
|
+
defaultValue: { value: 100, unit: "%" }
|
|
1385
|
+
}),
|
|
1383
1386
|
height: ResponsiveIconRadioGroup({
|
|
1384
1387
|
label: "Height",
|
|
1385
1388
|
options: [
|
|
@@ -3067,6 +3070,25 @@ function ControlValue({
|
|
|
3067
3070
|
return children(data);
|
|
3068
3071
|
}
|
|
3069
3072
|
}
|
|
3073
|
+
function pollBoxModel({
|
|
3074
|
+
element,
|
|
3075
|
+
onBoxModelChange
|
|
3076
|
+
}) {
|
|
3077
|
+
let currentBoxModel = null;
|
|
3078
|
+
const handleAnimationFrameRequest = () => {
|
|
3079
|
+
const measuredBoxModel = getBox(element);
|
|
3080
|
+
if (!deepEqual(currentBoxModel, measuredBoxModel)) {
|
|
3081
|
+
currentBoxModel = measuredBoxModel;
|
|
3082
|
+
onBoxModelChange(currentBoxModel);
|
|
3083
|
+
}
|
|
3084
|
+
animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
|
|
3085
|
+
};
|
|
3086
|
+
let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
|
|
3087
|
+
return () => {
|
|
3088
|
+
cancelAnimationFrame(animationFrameHandle);
|
|
3089
|
+
onBoxModelChange(null);
|
|
3090
|
+
};
|
|
3091
|
+
}
|
|
3070
3092
|
function useSlot(data, control) {
|
|
3071
3093
|
if (data == null || data.elements.length === 0) {
|
|
3072
3094
|
return /* @__PURE__ */ jsx(Slot.Placeholder, {
|
|
@@ -3210,24 +3232,19 @@ function SlotPlaceholder({
|
|
|
3210
3232
|
})
|
|
3211
3233
|
});
|
|
3212
3234
|
}
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
};
|
|
3226
|
-
let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
|
|
3227
|
-
return () => {
|
|
3228
|
-
cancelAnimationFrame(animationFrameHandle);
|
|
3229
|
-
onBoxModelChange(null);
|
|
3230
|
-
};
|
|
3235
|
+
const Text = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es5.js"))));
|
|
3236
|
+
function useRichText(data, control) {
|
|
3237
|
+
const textCallbackRef = useCallback((handle) => {
|
|
3238
|
+
var _a;
|
|
3239
|
+
if (isPropControllersHandle(handle))
|
|
3240
|
+
(_a = handle == null ? void 0 : handle.setPropControllers) == null ? void 0 : _a.call(handle, control == null ? null : {
|
|
3241
|
+
text: control
|
|
3242
|
+
});
|
|
3243
|
+
}, [control]);
|
|
3244
|
+
return /* @__PURE__ */ jsx(Text, {
|
|
3245
|
+
text: data,
|
|
3246
|
+
ref: textCallbackRef
|
|
3247
|
+
});
|
|
3231
3248
|
}
|
|
3232
3249
|
function useWidthStyle(value, descriptor) {
|
|
3233
3250
|
return useStyle(responsiveWidth(value, descriptor.options.defaultValue));
|
|
@@ -3264,7 +3281,7 @@ function PropsValue({
|
|
|
3264
3281
|
return getPropControllers(state, documentKey, element.key);
|
|
3265
3282
|
});
|
|
3266
3283
|
return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
|
|
3267
|
-
var _a2;
|
|
3284
|
+
var _a2, _b;
|
|
3268
3285
|
switch (descriptor.type) {
|
|
3269
3286
|
case CheckboxControlType:
|
|
3270
3287
|
case NumberControlType:
|
|
@@ -3292,15 +3309,24 @@ function PropsValue({
|
|
|
3292
3309
|
[propName]: value
|
|
3293
3310
|
}))
|
|
3294
3311
|
}, descriptor.type);
|
|
3295
|
-
case
|
|
3312
|
+
case RichTextControlType:
|
|
3296
3313
|
const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
|
|
3297
3314
|
return /* @__PURE__ */ jsx(RenderHook, {
|
|
3298
|
-
hook:
|
|
3315
|
+
hook: useRichText,
|
|
3299
3316
|
parameters: [props[propName], control],
|
|
3300
3317
|
children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
|
|
3301
3318
|
[propName]: value
|
|
3302
3319
|
}))
|
|
3303
3320
|
}, descriptor.type);
|
|
3321
|
+
case SlotControlType: {
|
|
3322
|
+
const control2 = (_b = propControllers == null ? void 0 : propControllers[propName]) != null ? _b : null;
|
|
3323
|
+
return /* @__PURE__ */ jsx(RenderHook, {
|
|
3324
|
+
hook: useSlot,
|
|
3325
|
+
parameters: [props[propName], control2],
|
|
3326
|
+
children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
|
|
3327
|
+
[propName]: value
|
|
3328
|
+
}))
|
|
3329
|
+
}, descriptor.type);
|
|
3304
3330
|
}
|
|
3305
3331
|
case Types.Width:
|
|
3306
3332
|
switch (descriptor.options.format) {
|
|
@@ -3679,5 +3705,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
|
|
|
3679
3705
|
document: document2
|
|
3680
3706
|
});
|
|
3681
3707
|
}));
|
|
3682
|
-
export {
|
|
3708
|
+
export { Page as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element as E, DEVICES as F, findDeviceOverride as G, forwardNextDynamicRef as H, useIsPreview as I, useFiles as J, useSwatches as K, usePagePathnameSlice as L, useElementId as M, deepEqual as N, storeContextDefaultValue as O, PageProvider as P, StoreContext as Q, RuntimeProvider as R, Shapes as S, MakeswiftProvider as T, pollBoxModel as U, useTypography as V, shallowMergeFallbacks as W, MakeswiftClient as X, getStaticPaths as Y, getStaticProps as Z, getServerSideProps as _, ReactRuntime as a, Makeswift as a0, PreviewModeScript as a1, Document$1 as a2, MakeswiftApiHandler as a3, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
|
|
3683
3709
|
//# sourceMappingURL=index.es.js.map
|