@makeswift/runtime 0.10.3 → 0.10.4
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 -3
- package/dist/Box.cjs.js.map +1 -1
- package/dist/Box.es.js +2 -4
- package/dist/Box.es.js.map +1 -1
- package/dist/Button.cjs.js +4 -4
- package/dist/Button.es.js +5 -5
- package/dist/Carousel.cjs.js +3 -3
- package/dist/Carousel.es.js +4 -4
- package/dist/Countdown.cjs.js +1 -3
- package/dist/Countdown.cjs.js.map +1 -1
- package/dist/Countdown.es.js +2 -4
- package/dist/Countdown.es.js.map +1 -1
- package/dist/Divider.cjs.js +1 -3
- package/dist/Divider.cjs.js.map +1 -1
- package/dist/Divider.es.js +2 -4
- package/dist/Divider.es.js.map +1 -1
- package/dist/Embed.cjs.js +1 -0
- package/dist/Embed.cjs.js.map +1 -1
- package/dist/Embed.es.js +2 -1
- package/dist/Embed.es.js.map +1 -1
- package/dist/Form.cjs.js +13 -13
- package/dist/Form.cjs.js.map +1 -1
- package/dist/Form.es.js +5 -5
- package/dist/Image.cjs.js +13 -13
- package/dist/Image.cjs.js.map +1 -1
- package/dist/Image.es.js +13 -13
- package/dist/LiveProvider.cjs.js +1 -3
- package/dist/LiveProvider.cjs.js.map +1 -1
- package/dist/LiveProvider.es.js +3 -5
- package/dist/LiveProvider.es.js.map +1 -1
- package/dist/Navigation.cjs.js +12 -12
- package/dist/Navigation.cjs.js.map +1 -1
- package/dist/Navigation.es.js +12 -12
- package/dist/PreviewProvider.cjs.js +1 -3
- package/dist/PreviewProvider.cjs.js.map +1 -1
- package/dist/PreviewProvider.es.js +3 -5
- package/dist/PreviewProvider.es.js.map +1 -1
- package/dist/ReadOnlyText.cjs.js +7 -6
- package/dist/ReadOnlyText.cjs.js.map +1 -1
- package/dist/ReadOnlyText.es.js +4 -3
- package/dist/ReadOnlyText.es.js.map +1 -1
- package/dist/ReadOnlyTextV2.cjs.js +7 -60
- package/dist/ReadOnlyTextV2.cjs.js.map +1 -1
- package/dist/ReadOnlyTextV2.es.js +9 -62
- package/dist/ReadOnlyTextV2.es.js.map +1 -1
- package/dist/Root.cjs.js +1 -3
- package/dist/Root.cjs.js.map +1 -1
- package/dist/Root.es.js +2 -4
- package/dist/Root.es.js.map +1 -1
- package/dist/SocialLinks.cjs.js +6 -6
- package/dist/SocialLinks.cjs.js.map +1 -1
- package/dist/SocialLinks.es.js +7 -7
- package/dist/Video.cjs.js +1 -0
- package/dist/Video.cjs.js.map +1 -1
- package/dist/Video.es.js +2 -1
- package/dist/Video.es.js.map +1 -1
- package/dist/builder.cjs.js +1 -0
- package/dist/builder.cjs.js.map +1 -1
- package/dist/builder.es.js +1 -0
- package/dist/builder.es.js.map +1 -1
- package/dist/components.cjs.js +3 -3
- package/dist/components.es.js +3 -3
- package/dist/control-serialization.es.js +1 -1
- package/dist/controls.cjs.js +1 -0
- package/dist/controls.cjs.js.map +1 -1
- package/dist/controls.es.js +2 -1
- package/dist/controls.es.js.map +1 -1
- package/dist/index.cjs.js +120 -256
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs3.js +107 -21
- package/dist/index.cjs3.js.map +1 -1
- package/dist/index.cjs4.js +57 -16
- package/dist/index.cjs4.js.map +1 -1
- package/dist/index.cjs5.js +42 -81
- package/dist/index.cjs5.js.map +1 -1
- package/dist/index.cjs6.js +82 -17
- package/dist/index.cjs6.js.map +1 -1
- package/dist/index.cjs7.js +18 -377
- package/dist/index.cjs7.js.map +1 -1
- package/dist/index.cjs8.js +258 -181
- package/dist/index.cjs8.js.map +1 -1
- package/dist/index.cjs9.js +343 -0
- package/dist/index.cjs9.js.map +1 -0
- package/dist/index.es.js +125 -260
- package/dist/index.es.js.map +1 -1
- package/dist/index.es2.js +1 -1
- package/dist/index.es3.js +103 -22
- package/dist/index.es3.js.map +1 -1
- package/dist/index.es4.js +57 -16
- package/dist/index.es4.js.map +1 -1
- package/dist/index.es5.js +42 -80
- package/dist/index.es5.js.map +1 -1
- package/dist/index.es6.js +81 -17
- package/dist/index.es6.js.map +1 -1
- package/dist/index.es7.js +18 -371
- package/dist/index.es7.js.map +1 -1
- package/dist/index.es8.js +259 -182
- package/dist/index.es8.js.map +1 -1
- package/dist/index.es9.js +336 -0
- package/dist/index.es9.js.map +1 -0
- package/dist/main.cjs.js +1 -0
- package/dist/main.cjs.js.map +1 -1
- package/dist/main.es.js +1 -0
- package/dist/main.es.js.map +1 -1
- package/dist/next.cjs.js +1 -3
- package/dist/next.cjs.js.map +1 -1
- package/dist/next.es.js +2 -4
- package/dist/next.es.js.map +1 -1
- package/dist/prop-controllers.cjs.js +1 -0
- package/dist/prop-controllers.cjs.js.map +1 -1
- package/dist/prop-controllers.es.js +1 -0
- package/dist/prop-controllers.es.js.map +1 -1
- package/dist/react-page.cjs.js +26 -6
- package/dist/react-page.cjs.js.map +1 -1
- package/dist/react-page.es.js +26 -7
- package/dist/react-page.es.js.map +1 -1
- package/dist/react.cjs.js +1 -3
- package/dist/react.cjs.js.map +1 -1
- package/dist/react.es.js +1 -3
- package/dist/react.es.js.map +1 -1
- package/dist/slate.cjs.js +9 -6
- package/dist/slate.cjs.js.map +1 -1
- package/dist/slate.es.js +9 -7
- package/dist/slate.es.js.map +1 -1
- package/dist/toText.cjs.js +67 -0
- package/dist/toText.cjs.js.map +1 -0
- package/dist/toText.es.js +66 -0
- package/dist/toText.es.js.map +1 -0
- package/dist/types/src/components/builtin/Text/register.d.ts.map +1 -1
- package/dist/types/src/controls/rich-text-v2/rich-text-v2.d.ts +2 -4
- package/dist/types/src/controls/rich-text-v2/rich-text-v2.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/EditableTextV2/render-element.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.d.ts +10 -0
- package/dist/types/src/runtimes/react/controls/rich-text-v2/EditableTextV2/usePresetValue.d.ts.map +1 -0
- package/dist/types/src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.d.ts.map +1 -1
- package/dist/types/src/slate/BuilderPlugin/index.d.ts +2 -1
- package/dist/types/src/slate/BuilderPlugin/index.d.ts.map +1 -1
- package/dist/types/src/slate/InlineModePlugin/index.d.ts.map +1 -1
- package/dist/types/src/slate/index.d.ts +1 -0
- package/dist/types/src/slate/index.d.ts.map +1 -1
- package/dist/types/src/slate/utils/index.d.ts +2 -0
- package/dist/types/src/slate/utils/index.d.ts.map +1 -0
- package/dist/types/src/slate/utils/toText.d.ts +4 -0
- package/dist/types/src/slate/utils/toText.d.ts.map +1 -0
- package/package.json +1 -1
package/dist/index.cjs8.js
CHANGED
|
@@ -31,39 +31,36 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
return target;
|
|
32
32
|
};
|
|
33
33
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
34
|
+
var css = require("@emotion/css");
|
|
35
|
+
var cssBoxModel = require("css-box-model");
|
|
36
|
+
var isHotkey = require("is-hotkey");
|
|
34
37
|
var React = require("react");
|
|
35
38
|
var slate = require("slate");
|
|
36
|
-
var isHotkey = require("is-hotkey");
|
|
37
39
|
var slateReact = require("slate-react");
|
|
38
|
-
var reactPage = require("./react-page.cjs.js");
|
|
39
40
|
var next = require("./index.cjs.js");
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
var index$1 = require("./index.cjs6.js");
|
|
43
|
-
var useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs.js");
|
|
41
|
+
var reactPage = require("./react-page.cjs.js");
|
|
42
|
+
require("uuid");
|
|
44
43
|
var jsxRuntime = require("react/jsx-runtime");
|
|
45
|
-
require("./
|
|
46
|
-
require("redux");
|
|
47
|
-
require("redux-thunk");
|
|
44
|
+
var index$1 = require("./index.cjs5.js");
|
|
48
45
|
require("./state/breakpoints.cjs.js");
|
|
49
|
-
require("
|
|
50
|
-
require("
|
|
51
|
-
require("
|
|
52
|
-
require("@emotion/serialize");
|
|
53
|
-
require("@emotion/utils");
|
|
46
|
+
var index = require("./index.cjs3.js");
|
|
47
|
+
require("./actions.cjs.js");
|
|
48
|
+
var useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs.js");
|
|
54
49
|
require("use-sync-external-store/shim/with-selector");
|
|
55
50
|
require("next/dynamic");
|
|
56
51
|
require("./text-input.cjs.js");
|
|
57
52
|
require("./combobox.cjs.js");
|
|
58
53
|
require("use-sync-external-store/shim");
|
|
54
|
+
require("redux");
|
|
55
|
+
require("redux-thunk");
|
|
59
56
|
require("./types.cjs.js");
|
|
60
57
|
require("./box-models.cjs.js");
|
|
61
|
-
require("css-box-model");
|
|
62
58
|
require("color");
|
|
63
59
|
require("scroll-into-view-if-needed");
|
|
64
60
|
require("react-dom");
|
|
65
61
|
require("html-react-parser");
|
|
66
62
|
require("next/head");
|
|
63
|
+
require("zod");
|
|
67
64
|
require("@emotion/server/create-instance");
|
|
68
65
|
require("next/document");
|
|
69
66
|
require("cors");
|
|
@@ -73,14 +70,189 @@ require("http-proxy");
|
|
|
73
70
|
require("set-cookie-parser");
|
|
74
71
|
require("./constants.cjs.js");
|
|
75
72
|
require("corporate-ipsum");
|
|
73
|
+
require("@emotion/serialize");
|
|
74
|
+
require("@emotion/utils");
|
|
76
75
|
require("next/link");
|
|
77
76
|
function _interopDefaultLegacy(e) {
|
|
78
77
|
return e && typeof e === "object" && "default" in e ? e : { "default": e };
|
|
79
78
|
}
|
|
80
79
|
var isHotkey__default = /* @__PURE__ */ _interopDefaultLegacy(isHotkey);
|
|
80
|
+
function BlockElement({
|
|
81
|
+
element,
|
|
82
|
+
attributes,
|
|
83
|
+
children
|
|
84
|
+
}) {
|
|
85
|
+
const blockStyles = [reactPage.useStyle({
|
|
86
|
+
margin: 0
|
|
87
|
+
}), reactPage.useStyle(next.useResponsiveStyle([element.textAlign], ([textAlign = "left"]) => ({
|
|
88
|
+
textAlign
|
|
89
|
+
})))];
|
|
90
|
+
const quoteStyles = reactPage.useStyle({
|
|
91
|
+
padding: "0.5em 10px",
|
|
92
|
+
fontSize: "1.25em",
|
|
93
|
+
fontWeight: "300",
|
|
94
|
+
borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
|
|
95
|
+
});
|
|
96
|
+
switch (element.type) {
|
|
97
|
+
case reactPage.BlockType.Default:
|
|
98
|
+
case reactPage.BlockType.Paragraph:
|
|
99
|
+
return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, attributes), {
|
|
100
|
+
className: css.cx(...blockStyles),
|
|
101
|
+
children
|
|
102
|
+
}));
|
|
103
|
+
case reactPage.BlockType.Heading1:
|
|
104
|
+
return /* @__PURE__ */ jsxRuntime.jsx("h1", __spreadProps(__spreadValues({}, attributes), {
|
|
105
|
+
className: css.cx(...blockStyles),
|
|
106
|
+
children
|
|
107
|
+
}));
|
|
108
|
+
case reactPage.BlockType.Heading2:
|
|
109
|
+
return /* @__PURE__ */ jsxRuntime.jsx("h2", __spreadProps(__spreadValues({}, attributes), {
|
|
110
|
+
className: css.cx(...blockStyles),
|
|
111
|
+
children
|
|
112
|
+
}));
|
|
113
|
+
case reactPage.BlockType.Heading3:
|
|
114
|
+
return /* @__PURE__ */ jsxRuntime.jsx("h3", __spreadProps(__spreadValues({}, attributes), {
|
|
115
|
+
className: css.cx(...blockStyles),
|
|
116
|
+
children
|
|
117
|
+
}));
|
|
118
|
+
case reactPage.BlockType.Heading4:
|
|
119
|
+
return /* @__PURE__ */ jsxRuntime.jsx("h4", __spreadProps(__spreadValues({}, attributes), {
|
|
120
|
+
className: css.cx(...blockStyles),
|
|
121
|
+
children
|
|
122
|
+
}));
|
|
123
|
+
case reactPage.BlockType.Heading5:
|
|
124
|
+
return /* @__PURE__ */ jsxRuntime.jsx("h5", __spreadProps(__spreadValues({}, attributes), {
|
|
125
|
+
className: css.cx(...blockStyles),
|
|
126
|
+
children
|
|
127
|
+
}));
|
|
128
|
+
case reactPage.BlockType.Heading6:
|
|
129
|
+
return /* @__PURE__ */ jsxRuntime.jsx("h6", __spreadProps(__spreadValues({}, attributes), {
|
|
130
|
+
className: css.cx(...blockStyles),
|
|
131
|
+
children
|
|
132
|
+
}));
|
|
133
|
+
case reactPage.BlockType.BlockQuote:
|
|
134
|
+
return /* @__PURE__ */ jsxRuntime.jsx("blockquote", __spreadProps(__spreadValues({}, attributes), {
|
|
135
|
+
className: css.cx(...blockStyles, quoteStyles),
|
|
136
|
+
children
|
|
137
|
+
}));
|
|
138
|
+
case reactPage.BlockType.OrderedList:
|
|
139
|
+
return /* @__PURE__ */ jsxRuntime.jsx("ol", __spreadProps(__spreadValues({}, attributes), {
|
|
140
|
+
className: css.cx(...blockStyles),
|
|
141
|
+
style: {
|
|
142
|
+
listStylePosition: "inside"
|
|
143
|
+
},
|
|
144
|
+
children
|
|
145
|
+
}));
|
|
146
|
+
case reactPage.BlockType.UnorderedList:
|
|
147
|
+
return /* @__PURE__ */ jsxRuntime.jsx("ul", __spreadProps(__spreadValues({}, attributes), {
|
|
148
|
+
className: css.cx(...blockStyles),
|
|
149
|
+
style: {
|
|
150
|
+
listStylePosition: "inside"
|
|
151
|
+
},
|
|
152
|
+
children
|
|
153
|
+
}));
|
|
154
|
+
case reactPage.BlockType.ListItem:
|
|
155
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, attributes), {
|
|
156
|
+
className: css.cx(...blockStyles),
|
|
157
|
+
children
|
|
158
|
+
}));
|
|
159
|
+
case reactPage.BlockType.ListItemChild:
|
|
160
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, attributes), {
|
|
161
|
+
className: css.cx(...blockStyles),
|
|
162
|
+
children
|
|
163
|
+
}));
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
function StyledLink(_a) {
|
|
167
|
+
var _b = _a, {
|
|
168
|
+
className
|
|
169
|
+
} = _b, restOfProps = __objRest(_b, [
|
|
170
|
+
"className"
|
|
171
|
+
]);
|
|
172
|
+
return /* @__PURE__ */ jsxRuntime.jsx(index.Link, __spreadProps(__spreadValues({}, restOfProps), {
|
|
173
|
+
className: css.cx(reactPage.useStyle({
|
|
174
|
+
textDecoration: "none"
|
|
175
|
+
}), className)
|
|
176
|
+
}));
|
|
177
|
+
}
|
|
178
|
+
function InlineElement({
|
|
179
|
+
element,
|
|
180
|
+
attributes,
|
|
181
|
+
children
|
|
182
|
+
}) {
|
|
183
|
+
var _a;
|
|
184
|
+
switch (element.type) {
|
|
185
|
+
case reactPage.InlineType.Code:
|
|
186
|
+
return /* @__PURE__ */ jsxRuntime.jsx("code", __spreadProps(__spreadValues({}, attributes), {
|
|
187
|
+
children
|
|
188
|
+
}));
|
|
189
|
+
case reactPage.InlineType.SuperScript:
|
|
190
|
+
return /* @__PURE__ */ jsxRuntime.jsx("sup", __spreadProps(__spreadValues({}, attributes), {
|
|
191
|
+
children
|
|
192
|
+
}));
|
|
193
|
+
case reactPage.InlineType.SubScript:
|
|
194
|
+
return /* @__PURE__ */ jsxRuntime.jsx("sub", __spreadProps(__spreadValues({}, attributes), {
|
|
195
|
+
children
|
|
196
|
+
}));
|
|
197
|
+
case reactPage.InlineType.Link:
|
|
198
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledLink, __spreadProps(__spreadValues({}, attributes), {
|
|
199
|
+
link: (_a = element.link) != null ? _a : void 0,
|
|
200
|
+
children
|
|
201
|
+
}));
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
function Element(_c) {
|
|
205
|
+
var _d = _c, {
|
|
206
|
+
element
|
|
207
|
+
} = _d, props = __objRest(_d, [
|
|
208
|
+
"element"
|
|
209
|
+
]);
|
|
210
|
+
switch (element.type) {
|
|
211
|
+
case reactPage.InlineType.Code:
|
|
212
|
+
case reactPage.InlineType.SuperScript:
|
|
213
|
+
case reactPage.InlineType.SubScript:
|
|
214
|
+
case reactPage.InlineType.Link:
|
|
215
|
+
return /* @__PURE__ */ jsxRuntime.jsx(InlineElement, __spreadValues({
|
|
216
|
+
element
|
|
217
|
+
}, props));
|
|
218
|
+
case reactPage.BlockType.Default:
|
|
219
|
+
case reactPage.BlockType.Paragraph:
|
|
220
|
+
case reactPage.BlockType.Heading1:
|
|
221
|
+
case reactPage.BlockType.Heading2:
|
|
222
|
+
case reactPage.BlockType.Heading3:
|
|
223
|
+
case reactPage.BlockType.Heading4:
|
|
224
|
+
case reactPage.BlockType.Heading5:
|
|
225
|
+
case reactPage.BlockType.Heading6:
|
|
226
|
+
case reactPage.BlockType.BlockQuote:
|
|
227
|
+
case reactPage.BlockType.OrderedList:
|
|
228
|
+
case reactPage.BlockType.UnorderedList:
|
|
229
|
+
case reactPage.BlockType.ListItem:
|
|
230
|
+
case reactPage.BlockType.ListItemChild:
|
|
231
|
+
return /* @__PURE__ */ jsxRuntime.jsx(BlockElement, __spreadValues({
|
|
232
|
+
element
|
|
233
|
+
}, props));
|
|
234
|
+
default:
|
|
235
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, props.attributes), {
|
|
236
|
+
children: props.children
|
|
237
|
+
}));
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
function Leaf(_e) {
|
|
241
|
+
var _f = _e, {
|
|
242
|
+
leaf
|
|
243
|
+
} = _f, props = __objRest(_f, [
|
|
244
|
+
"leaf"
|
|
245
|
+
]);
|
|
246
|
+
const enhancedTypography = next.useEnhancedTypography(leaf.typography);
|
|
247
|
+
const typographyClassName = next.useTypographyClassName(enhancedTypography);
|
|
248
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, props.attributes), {
|
|
249
|
+
className: typographyClassName,
|
|
250
|
+
children: props.children
|
|
251
|
+
}));
|
|
252
|
+
}
|
|
81
253
|
function useSyncDOMSelection(editor, isEnabled) {
|
|
82
254
|
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
83
|
-
if (!isEnabled
|
|
255
|
+
if (!isEnabled || editor.selection == null || slateReact.ReactEditor.isFocused(editor))
|
|
84
256
|
return;
|
|
85
257
|
try {
|
|
86
258
|
const root = slateReact.ReactEditor.findDocumentOrShadowRoot(editor);
|
|
@@ -100,206 +272,111 @@ function useSyncDOMSelection(editor, isEnabled) {
|
|
|
100
272
|
}
|
|
101
273
|
});
|
|
102
274
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
plugins
|
|
107
|
-
} = _b, props = __objRest(_b, [
|
|
108
|
-
"definition",
|
|
109
|
-
"plugins"
|
|
110
|
-
]);
|
|
111
|
-
function initialRenderElement(props2) {
|
|
112
|
-
return props2.children;
|
|
113
|
-
}
|
|
114
|
-
const renderElement = plugins.reduce((renderFn, plugin) => (props2) => {
|
|
115
|
-
const {
|
|
116
|
-
control,
|
|
117
|
-
renderElement: renderElement2
|
|
118
|
-
} = plugin;
|
|
119
|
-
if ((control == null ? void 0 : control.definition) == null || renderElement2 == null)
|
|
120
|
-
return renderFn(props2);
|
|
121
|
-
if (control.getElementValue == null)
|
|
122
|
-
return renderElement2(renderFn, void 0)(props2);
|
|
123
|
-
return /* @__PURE__ */ jsxRuntime.jsx(next.ControlValue, {
|
|
124
|
-
definition: control.definition,
|
|
125
|
-
data: control.getElementValue(props2.element),
|
|
126
|
-
children: (value) => renderElement2(renderFn, value)(props2)
|
|
127
|
-
});
|
|
128
|
-
}, initialRenderElement);
|
|
129
|
-
return renderElement(props);
|
|
130
|
-
}
|
|
131
|
-
function RichTextV2Leaf(_c) {
|
|
132
|
-
var _d = _c, {
|
|
133
|
-
definition,
|
|
134
|
-
plugins
|
|
135
|
-
} = _d, props = __objRest(_d, [
|
|
136
|
-
"definition",
|
|
137
|
-
"plugins"
|
|
138
|
-
]);
|
|
139
|
-
function initialRenderLeaf({
|
|
140
|
-
attributes,
|
|
141
|
-
children,
|
|
142
|
-
leaf
|
|
143
|
-
}) {
|
|
144
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({
|
|
145
|
-
className: leaf.className
|
|
146
|
-
}, attributes), {
|
|
147
|
-
children
|
|
148
|
-
}));
|
|
149
|
-
}
|
|
150
|
-
const renderLeaf = plugins.reduce((renderFn, plugin) => (props2) => {
|
|
151
|
-
const {
|
|
152
|
-
control,
|
|
153
|
-
renderLeaf: renderLeaf2
|
|
154
|
-
} = plugin;
|
|
155
|
-
if ((control == null ? void 0 : control.definition) == null || renderLeaf2 == null)
|
|
156
|
-
return renderFn(props2);
|
|
157
|
-
if (control.getLeafValue == null)
|
|
158
|
-
return renderLeaf2(renderFn, void 0)(props2);
|
|
159
|
-
return /* @__PURE__ */ jsxRuntime.jsx(next.ControlValue, {
|
|
160
|
-
definition: control.definition,
|
|
161
|
-
data: control.getLeafValue(props2.leaf),
|
|
162
|
-
children: (value) => renderLeaf2(renderFn, value)(props2)
|
|
163
|
-
});
|
|
164
|
-
}, initialRenderLeaf);
|
|
165
|
-
return renderLeaf(props);
|
|
166
|
-
}
|
|
167
|
-
function isChangeWithinPreviousSec(change) {
|
|
168
|
-
var _a;
|
|
169
|
-
return performance.now() - ((_a = change == null ? void 0 : change.time) != null ? _a : 0) < 1e3;
|
|
170
|
-
}
|
|
171
|
-
function useSyncRemoteChanges(editor, data) {
|
|
275
|
+
const COMMIT_DEBOUNCE_DELAY = 500;
|
|
276
|
+
function useSyncWithBuilder(editor, text) {
|
|
277
|
+
const [shouldCommit, setShouldCommit] = React.useState(true);
|
|
172
278
|
const isInBuilder = next.useIsInBuilder();
|
|
173
279
|
React.useEffect(() => {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
280
|
+
if (shouldCommit && text && isInBuilder) {
|
|
281
|
+
const nextValue = reactPage.richTextDTOtoDAO(text);
|
|
282
|
+
const nextSelection = reactPage.richTextDTOtoSelection(text);
|
|
283
|
+
if (!reactPage.deepEqual(editor.children, nextValue) || !reactPage.deepEqual(editor.selection, nextSelection)) {
|
|
284
|
+
editor.children = nextValue;
|
|
285
|
+
editor.selection = nextSelection;
|
|
286
|
+
editor.onChange();
|
|
287
|
+
}
|
|
179
288
|
}
|
|
180
|
-
}, [editor,
|
|
289
|
+
}, [editor, shouldCommit, text]);
|
|
290
|
+
React.useEffect(() => {
|
|
291
|
+
if (shouldCommit)
|
|
292
|
+
return;
|
|
293
|
+
const timeoutId = window.setTimeout(() => {
|
|
294
|
+
setShouldCommit(true);
|
|
295
|
+
}, COMMIT_DEBOUNCE_DELAY);
|
|
296
|
+
return () => {
|
|
297
|
+
window.clearTimeout(timeoutId);
|
|
298
|
+
};
|
|
299
|
+
}, [shouldCommit]);
|
|
300
|
+
return React.useCallback(() => setShouldCommit(false), []);
|
|
181
301
|
}
|
|
182
302
|
const defaultText = [{
|
|
183
|
-
type: reactPage.BlockType.
|
|
303
|
+
type: reactPage.BlockType.Paragraph,
|
|
184
304
|
children: [{
|
|
185
305
|
text: ""
|
|
186
306
|
}]
|
|
187
307
|
}];
|
|
188
|
-
function
|
|
308
|
+
const EditableText = React.forwardRef(function EditableText2({
|
|
309
|
+
id,
|
|
189
310
|
text,
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}) {
|
|
193
|
-
const
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
];
|
|
198
|
-
return plugins2;
|
|
199
|
-
}, [definition]);
|
|
200
|
-
const [editor] = React.useState(() => plugins.reduceRight((editor2, plugin) => {
|
|
201
|
-
var _a, _b;
|
|
202
|
-
return (_b = (_a = plugin == null ? void 0 : plugin.withPlugin) == null ? void 0 : _a.call(plugin, editor2)) != null ? _b : editor2;
|
|
203
|
-
}, index$1.withLocalChanges(index$2.withBuilder(slateReact.withReact(slate.createEditor())))));
|
|
204
|
-
const isPreservingFocus = React.useRef(false);
|
|
205
|
-
useSyncDOMSelection(editor, isPreservingFocus);
|
|
311
|
+
width,
|
|
312
|
+
margin
|
|
313
|
+
}, ref) {
|
|
314
|
+
const [editor] = React.useState(() => reactPage.withBlock(reactPage.withTypography(index$1.withBuilder(slateReact.withReact(slate.createEditor())))));
|
|
315
|
+
const [isPreservingDOMSElection, setIsPreservingDOMSelection] = React.useState(false);
|
|
316
|
+
useSyncDOMSelection(editor, isPreservingDOMSElection);
|
|
317
|
+
const delaySync = useSyncWithBuilder(editor, text);
|
|
206
318
|
const editMode = next.useBuilderEditMode();
|
|
207
|
-
|
|
319
|
+
const [propControllers, setPropControllers] = React.useState(null);
|
|
320
|
+
const controller = propControllers == null ? void 0 : propControllers.text;
|
|
208
321
|
React.useEffect(() => {
|
|
209
|
-
if (
|
|
322
|
+
if (controller == null)
|
|
210
323
|
return;
|
|
211
324
|
const element = slateReact.ReactEditor.toDOMNode(editor, editor);
|
|
212
325
|
return next.pollBoxModel({
|
|
213
326
|
element,
|
|
214
|
-
onBoxModelChange: (boxModel) =>
|
|
327
|
+
onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
|
|
215
328
|
});
|
|
216
|
-
}, [editor,
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
}));
|
|
228
|
-
}, [plugins, definition]);
|
|
229
|
-
const initialValue = React.useMemo(() => {
|
|
230
|
-
var _a, _b;
|
|
231
|
-
return (_b = (_a = text && reactPage.richTextV2DataToDescendents(text)) != null ? _a : definition.config.defaultValue) != null ? _b : defaultText;
|
|
232
|
-
}, [text, definition]);
|
|
329
|
+
}, [editor, controller]);
|
|
330
|
+
React.useImperativeHandle(ref, () => ({
|
|
331
|
+
getDomNode() {
|
|
332
|
+
return slateReact.ReactEditor.toDOMNode(editor, editor);
|
|
333
|
+
},
|
|
334
|
+
getBoxModel() {
|
|
335
|
+
return cssBoxModel.getBox(slateReact.ReactEditor.toDOMNode(editor, editor));
|
|
336
|
+
},
|
|
337
|
+
setPropControllers
|
|
338
|
+
}), [editor, setPropControllers]);
|
|
339
|
+
const initialValue = React.useMemo(() => text ? reactPage.richTextDTOtoDAO(text) : defaultText, [text]);
|
|
233
340
|
React.useEffect(() => {
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
slateReact.ReactEditor.deselect(editor);
|
|
237
|
-
}
|
|
238
|
-
}, [editMode]);
|
|
239
|
-
React.useEffect(() => {
|
|
240
|
-
var _a;
|
|
241
|
-
const defaultValue = (_a = definition.config.defaultValue) != null ? _a : defaultText;
|
|
242
|
-
control == null ? void 0 : control.setEditor(editor);
|
|
243
|
-
control == null ? void 0 : control.setDefaultValue(defaultValue);
|
|
244
|
-
if (initialValue === defaultValue) {
|
|
245
|
-
control == null ? void 0 : control.onLocalUserChange();
|
|
246
|
-
}
|
|
247
|
-
}, [control, definition, editor]);
|
|
341
|
+
controller == null ? void 0 : controller.setSlateEditor(editor);
|
|
342
|
+
}, [controller, editor]);
|
|
248
343
|
const handleFocus = React.useCallback(() => {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
}, [
|
|
344
|
+
controller == null ? void 0 : controller.focus();
|
|
345
|
+
setIsPreservingDOMSelection(true);
|
|
346
|
+
}, [controller]);
|
|
252
347
|
const handleKeyDown = React.useCallback((e) => {
|
|
253
348
|
if (isHotkey__default["default"]("mod+shift+z", e))
|
|
254
|
-
return
|
|
349
|
+
return controller == null ? void 0 : controller.redo();
|
|
255
350
|
if (isHotkey__default["default"]("mod+z", e))
|
|
256
|
-
return
|
|
257
|
-
if (isHotkey__default["default"]("escape")(e))
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
}
|
|
262
|
-
if (editMode === reactPage.BuilderEditMode.CONTENT) {
|
|
263
|
-
e.stopPropagation();
|
|
264
|
-
}
|
|
265
|
-
plugins.forEach((plugin) => {
|
|
266
|
-
var _a;
|
|
267
|
-
return (_a = plugin == null ? void 0 : plugin.onKeyDown) == null ? void 0 : _a.call(plugin, e, editor);
|
|
268
|
-
});
|
|
269
|
-
}, [control, plugins, editor, editMode]);
|
|
270
|
-
const handleKeyUp = React.useCallback((e) => {
|
|
271
|
-
if (editMode === reactPage.BuilderEditMode.CONTENT) {
|
|
272
|
-
e.stopPropagation();
|
|
273
|
-
e.preventDefault();
|
|
274
|
-
}
|
|
275
|
-
}, [control, editor, editMode]);
|
|
276
|
-
const handleClick = React.useCallback((e) => {
|
|
277
|
-
if (editMode === reactPage.BuilderEditMode.CONTENT)
|
|
278
|
-
e.stopPropagation();
|
|
279
|
-
}, [editMode]);
|
|
351
|
+
return controller == null ? void 0 : controller.undo();
|
|
352
|
+
if (isHotkey__default["default"]("escape")(e))
|
|
353
|
+
return controller == null ? void 0 : controller.blur();
|
|
354
|
+
reactPage.onKeyDown(e, editor);
|
|
355
|
+
}, [controller, editor]);
|
|
280
356
|
const handleBlur = React.useCallback((e) => {
|
|
281
|
-
var _a;
|
|
282
357
|
if (e.relatedTarget == null)
|
|
283
358
|
return;
|
|
284
|
-
|
|
285
|
-
|
|
359
|
+
setIsPreservingDOMSelection(false);
|
|
360
|
+
slateReact.ReactEditor.deselect(editor);
|
|
286
361
|
}, []);
|
|
287
362
|
return /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, {
|
|
288
363
|
editor,
|
|
289
364
|
value: initialValue,
|
|
365
|
+
onChange: delaySync,
|
|
290
366
|
children: /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, {
|
|
291
|
-
|
|
292
|
-
|
|
367
|
+
id,
|
|
368
|
+
renderLeaf: Leaf,
|
|
369
|
+
renderElement: Element,
|
|
293
370
|
onFocus: handleFocus,
|
|
294
371
|
onKeyDown: handleKeyDown,
|
|
295
|
-
onKeyUp: handleKeyUp,
|
|
296
|
-
onClick: handleClick,
|
|
297
372
|
onBlur: handleBlur,
|
|
373
|
+
className: css.cx(width, margin),
|
|
298
374
|
readOnly: editMode !== reactPage.BuilderEditMode.CONTENT,
|
|
299
375
|
placeholder: "Write some text..."
|
|
300
376
|
})
|
|
301
377
|
});
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
exports
|
|
378
|
+
});
|
|
379
|
+
var EditableText$1 = EditableText;
|
|
380
|
+
exports.EditableText = EditableText;
|
|
381
|
+
exports["default"] = EditableText$1;
|
|
305
382
|
//# sourceMappingURL=index.cjs8.js.map
|
package/dist/index.cjs8.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs8.js","sources":["../src/runtimes/react/controls/rich-text-v2/EditableTextV2/useSyncDOMSelection.tsx","../src/runtimes/react/controls/rich-text-v2/EditableTextV2/render-element.tsx","../src/runtimes/react/controls/rich-text-v2/EditableTextV2/render-leaf.tsx","../src/runtimes/react/controls/rich-text-v2/EditableTextV2/useRemoteChanges.tsx","../src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.tsx"],"sourcesContent":["import { Editor, Range as SlateRange } from 'slate'\nimport { useIsomorphicLayoutEffect } from '../../../../../components/hooks/useIsomorphicLayoutEffect'\nimport { MutableRefObject } from 'react'\nimport { ReactEditor } from 'slate-react'\n\n/**\n * Clicking outside of the host blurs our `<Editable />`.\n * `<Editable />` only updates the DOM's selection to match slate when it is focused.\n * In the case of a panel being clicked this hook updates the DOM selection to match slate.\n */\nexport function useSyncDOMSelection(editor: Editor, isEnabled: MutableRefObject<boolean>) {\n useIsomorphicLayoutEffect(() => {\n if (!isEnabled.current || editor.selection == null || ReactEditor.isFocused(editor)) return\n try {\n const root = ReactEditor.findDocumentOrShadowRoot(editor) as Document\n const domSelection = root.getSelection()\n const newDomRange: Range | null = ReactEditor.toDOMRange(editor, editor.selection)\n\n if (newDomRange) {\n if (SlateRange.isBackward(editor.selection!)) {\n domSelection?.setBaseAndExtent(\n newDomRange.endContainer,\n newDomRange.endOffset,\n newDomRange.startContainer,\n newDomRange.startOffset,\n )\n } else {\n domSelection?.setBaseAndExtent(\n newDomRange.startContainer,\n newDomRange.startOffset,\n newDomRange.endContainer,\n newDomRange.endOffset,\n )\n }\n } else {\n domSelection?.removeAllRanges()\n }\n } catch (e) {\n console.error(e)\n }\n })\n}\n","import { RenderElementProps } from 'slate-react'\nimport { RichTextV2ControlDefinition } from '../../../../../controls'\nimport { ControlValue } from '../../control'\nimport { RichTextV2Plugin } from '../../../../../controls/rich-text-v2/plugin'\n\ntype RichTextV2ElementProps = RenderElementProps & {\n definition: RichTextV2ControlDefinition\n plugins: RichTextV2Plugin[]\n}\n\nexport function RichTextV2Element({ definition, plugins, ...props }: RichTextV2ElementProps) {\n function initialRenderElement(props: RenderElementProps) {\n return props.children\n }\n\n const renderElement = plugins.reduce(\n (renderFn, plugin) => (props: RenderElementProps) => {\n const { control, renderElement } = plugin\n\n if (control?.definition == null || renderElement == null) return renderFn(props)\n\n if (control.getElementValue == null) return renderElement(renderFn, undefined)(props)\n\n return (\n <ControlValue definition={control.definition} data={control.getElementValue(props.element)}>\n {value => renderElement(renderFn, value)(props)}\n </ControlValue>\n )\n },\n initialRenderElement,\n )\n\n return renderElement(props)\n}\n","import { RenderLeafProps } from 'slate-react'\nimport { RichTextV2ControlDefinition } from '../../../../../controls'\nimport { ControlValue } from '../../control'\nimport { RichTextV2Plugin } from '../../../../../controls/rich-text-v2/plugin'\n\ntype RichTextV2LeafProps = RenderLeafProps & {\n definition: RichTextV2ControlDefinition\n plugins: RichTextV2Plugin[]\n}\n\nexport function RichTextV2Leaf({ definition, plugins, ...props }: RichTextV2LeafProps) {\n function initialRenderLeaf({ attributes, children, leaf }: RenderLeafProps) {\n return (\n <span className={leaf.className} {...attributes}>\n {children}\n </span>\n )\n }\n\n const renderLeaf = plugins.reduce(\n (renderFn, plugin) => (props: RenderLeafProps) => {\n const { control, renderLeaf } = plugin\n\n if (control?.definition == null || renderLeaf == null) return renderFn(props)\n\n if (control.getLeafValue == null) return renderLeaf(renderFn, undefined)(props)\n\n return (\n <ControlValue definition={control.definition} data={control.getLeafValue(props.leaf)}>\n {value => renderLeaf(renderFn, value)(props)}\n </ControlValue>\n )\n },\n initialRenderLeaf,\n )\n\n return renderLeaf(props)\n}\n","import { useEffect } from 'react'\nimport { Editor } from 'slate'\nimport { RichTextV2ControlData, richTextV2DataToDescendents } from '../../../../../controls'\nimport { LocalChange } from '../../../../../slate'\nimport { useIsInBuilder } from '../../..'\n\n// From the component point of view we can't know if the change came from an action or a undo/redo\n// So we diff the time and force updates on actions that occured over a second ago.\nfunction isChangeWithinPreviousSec(change?: LocalChange) {\n return performance.now() - (change?.time ?? 0) < 1000\n}\n\nexport function useSyncRemoteChanges(editor: Editor, data?: RichTextV2ControlData) {\n const isInBuilder = useIsInBuilder()\n\n useEffect(() => {\n if (\n !isChangeWithinPreviousSec(editor.localChanges.get(data?.key ?? '')) &&\n data &&\n isInBuilder\n ) {\n editor.children = richTextV2DataToDescendents(data)\n editor.selection = editor?.localChanges.get(data.key)?.selection ?? null\n editor.onChange()\n }\n }, [editor, data])\n}\n","import {\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { Descendant, createEditor } from 'slate'\nimport isHotkey from 'is-hotkey'\nimport {\n withReact,\n ReactEditor,\n RenderElementProps,\n RenderLeafProps,\n Slate,\n Editable,\n} from 'slate-react'\n\nimport {\n RichTextV2Control,\n RichTextV2ControlData,\n RichTextV2ControlDefinition,\n RichTextV2Mode,\n} from '../../../../../controls'\nimport { useBuilderEditMode } from '../../..'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport {\n BlockPlugin,\n InlineModePlugin,\n InlinePlugin,\n LinkPlugin,\n TextAlignPlugin,\n TypographyPlugin,\n withBuilder,\n withLocalChanges,\n} from '../../../../../slate'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { BlockType } from '../../../../../slate'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { richTextV2DataToDescendents } from '../../../../../controls/rich-text-v2/translation'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2ControlDefinition }\n\nconst defaultText: Descendant[] = [{ type: BlockType.Default, children: [{ text: '' }] }]\n\ntype Props = {\n text?: RichTextV2ControlData\n definition: RichTextV2ControlDefinition\n control: RichTextV2Control | null\n}\n\nexport function EditableTextV2({ text, definition, control }: Props) {\n const plugins = useMemo(() => {\n const plugins = [\n /**\n * TODO: we are manually referencing our default plugins for each mode here because\n * Referencing the real LinkPlugin causes a circular dependency.\n * When circular dependencies calm down we should update the plugin definition to use real plugins,\n * and just use the plugins that are defined by our config.\n */\n // ...(definition?.config?.plugins ?? []),\n ...(definition?.config?.mode === RichTextV2Mode.Inline\n ? [InlineModePlugin()]\n : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()]),\n ]\n return plugins\n }, [definition])\n\n const [editor] = useState(() =>\n plugins.reduceRight(\n (editor, plugin) => plugin?.withPlugin?.(editor) ?? editor,\n withLocalChanges(withBuilder(withReact(createEditor()))),\n ),\n )\n\n const isPreservingFocus = useRef(false)\n useSyncDOMSelection(editor, isPreservingFocus)\n\n const editMode = useBuilderEditMode()\n\n useSyncRemoteChanges(editor, text)\n\n useEffect(() => {\n if (control == null) return\n\n const element = ReactEditor.toDOMNode(editor, editor)\n return pollBoxModel({\n element,\n onBoxModelChange: boxModel => control.changeBoxModel(boxModel),\n })\n }, [editor, control])\n\n const renderElement = useCallback(\n (props: RenderElementProps) => {\n return <RichTextV2Element {...props} definition={definition} plugins={plugins} />\n },\n [plugins, definition],\n )\n\n const renderLeaf = useCallback(\n (props: RenderLeafProps) => {\n return <RichTextV2Leaf {...props} definition={definition} plugins={plugins} />\n },\n [plugins, definition],\n )\n\n const initialValue = useMemo(\n () =>\n (text && richTextV2DataToDescendents(text)) ?? definition.config.defaultValue ?? defaultText,\n [text, definition],\n )\n\n useEffect(() => {\n /**\n * This is required because clicking on the overlay has `relatedTarget` null just like the sidebar, but\n * - in the case of the overlay we switch to BUILD mode\n * - in the case of the sidebar we preserve the selection\n */\n if (editMode !== BuilderEditMode.CONTENT) {\n isPreservingFocus.current = false\n ReactEditor.deselect(editor)\n }\n }, [editMode])\n\n useEffect(() => {\n const defaultValue = definition.config.defaultValue ?? defaultText\n\n control?.setEditor(editor)\n control?.setDefaultValue(defaultValue)\n\n /**\n * When initialValue is set to the default value we need to trigger an local change so that the sidebar updates and so the data is saved\n */\n if (initialValue === defaultValue) {\n control?.onLocalUserChange()\n }\n }, [control, definition, editor])\n\n const handleFocus = useCallback(() => {\n isPreservingFocus.current = true\n control?.select()\n }, [control])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (isHotkey('mod+shift+z', e)) return control?.redo()\n if (isHotkey('mod+z', e)) return control?.undo()\n if (isHotkey('escape')(e)) {\n isPreservingFocus.current = false\n ReactEditor.blur(editor)\n control?.switchToBuildMode()\n }\n\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n }\n\n plugins.forEach(plugin => plugin?.onKeyDown?.(e, editor))\n },\n [control, plugins, editor, editMode],\n )\n\n const handleKeyUp = useCallback(\n (e: KeyboardEvent) => {\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n e.preventDefault()\n }\n },\n [control, editor, editMode],\n )\n\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (editMode === BuilderEditMode.CONTENT) e.stopPropagation()\n },\n [editMode],\n )\n\n const handleBlur = useCallback((e: FocusEvent) => {\n // outside of iframe (overlay, sidebar, etc)\n if (e.relatedTarget == null) return\n // another text\n if (e.relatedTarget?.getAttribute('contenteditable') === 'true')\n isPreservingFocus.current = false\n }, [])\n\n return (\n <Slate editor={editor} value={initialValue}>\n <Editable\n renderLeaf={renderLeaf}\n renderElement={renderElement}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onClick={handleClick}\n onBlur={handleBlur}\n readOnly={editMode !== BuilderEditMode.CONTENT}\n placeholder=\"Write some text...\"\n />\n </Slate>\n )\n}\n\nexport default EditableTextV2\n"],"names":["editor","isEnabled","useIsomorphicLayoutEffect","current","selection","ReactEditor","isFocused","root","findDocumentOrShadowRoot","domSelection","getSelection","newDomRange","toDOMRange","SlateRange","isBackward","setBaseAndExtent","endContainer","endOffset","startContainer","startOffset","removeAllRanges","e","console","error","definition","plugins","props","children","renderElement","reduce","renderFn","plugin","control","getElementValue","undefined","ControlValue","element","value","initialRenderElement","attributes","leaf","className","renderLeaf","getLeafValue","initialRenderLeaf","change","performance","now","time","data","isInBuilder","useIsInBuilder","useEffect","isChangeWithinPreviousSec","localChanges","get","key","richTextV2DataToDescendents","onChange","defaultText","type","BlockType","Default","text","useMemo","config","mode","RichTextV2Mode","Inline","InlineModePlugin","BlockPlugin","TypographyPlugin","TextAlignPlugin","InlinePlugin","LinkPlugin","useState","reduceRight","withPlugin","withLocalChanges","withBuilder","withReact","createEditor","isPreservingFocus","useRef","useSyncDOMSelection","editMode","useBuilderEditMode","useSyncRemoteChanges","toDOMNode","pollBoxModel","onBoxModelChange","boxModel","changeBoxModel","useCallback","initialValue","defaultValue","BuilderEditMode","CONTENT","deselect","setEditor","setDefaultValue","onLocalUserChange","handleFocus","select","handleKeyDown","isHotkey","redo","undo","blur","switchToBuildMode","stopPropagation","forEach","onKeyDown","handleKeyUp","preventDefault","handleClick","handleBlur","relatedTarget","getAttribute","Slate","Editable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,6BAA6BA,QAAgBC,WAAsC;AACxFC,4BAAAA,0BAA0B,MAAM;AAC1B,QAAA,CAACD,UAAUE,WAAWH,OAAOI,aAAa,QAAQC,WAAAA,YAAYC,UAAUN,MAAtB;AAA+B;AACjF,QAAA;AACIO,YAAAA,OAAOF,WAAAA,YAAYG,yBAAyBR,MAArC;AACPS,YAAAA,eAAeF,KAAKG;AAC1B,YAAMC,cAA4BN,WAAAA,YAAYO,WAAWZ,QAAQA,OAAOI,SAAtC;AAElC,UAAIO,aAAa;AACXE,YAAAA,YAAWC,WAAWd,OAAOI,SAA7B,GAA0C;AAC9BW,uDAAAA,iBACZJ,YAAYK,cACZL,YAAYM,WACZN,YAAYO,gBACZP,YAAYQ;AAAAA,QAJd,OAMK;AACSJ,uDAAAA,iBACZJ,YAAYO,gBACZP,YAAYQ,aACZR,YAAYK,cACZL,YAAYM;AAAAA,QAEf;AAAA,MAAA,OACI;AACLR,qDAAcW;AAAAA,MACf;AAAA,aACMC;AACPC,cAAQC,MAAMF,CAAd;AAAA,IACD;AAAA,EAAA,CA5BsB;AA8B1B;AC/BiC,2BAAA,IAA2D;AAA3D,eAAEG;AAAAA;AAAAA,IAAYC;AAAAA,MAAd,IAA0BC,kBAA1B,IAA0BA;AAAAA,IAAxBF;AAAAA,IAAYC;AAAAA;AAC9C,gCAA8BC,QAA2B;AAChDA,WAAAA,OAAMC;AAAAA,EACd;AAED,QAAMC,gBAAgBH,QAAQI,OAC5B,CAACC,UAAUC,WAAW,CAACL,WAA8B;AAC7C,UAAA;AAAA,MAAEM;AAAAA,MAASJ,eAAAA;AAAAA,QAAkBG;AAE/BC,QAAAA,oCAASR,eAAc,QAAQI,kBAAiB;AAAM,aAAOE,SAASJ,MAAD;AAEzE,QAAIM,QAAQC,mBAAmB;AAAM,aAAOL,eAAcE,UAAUI,MAAX,EAAsBR,MAAnC;AAE5C,0CACGS,KAAAA,cAAD;AAAA,MAAc,YAAYH,QAAQR;AAAAA,MAAY,MAAMQ,QAAQC,gBAAgBP,OAAMU,OAA9B;AAAA,MACjDC,UAAAA,CAAST,UAAAA,eAAcE,UAAUO,KAAX,EAAkBX,MAA/B;AAAA,IAAA,CAFd;AAAA,KAMFY,oBAdoB;AAiBfV,SAAAA,cAAcF,KAAD;AACrB;ACvB8B,wBAAA,IAAwD;AAAxD,eAAEF;AAAAA;AAAAA,IAAYC;AAAAA,MAAd,IAA0BC,kBAA1B,IAA0BA;AAAAA,IAAxBF;AAAAA,IAAYC;AAAAA;AAChB,6BAAA;AAAA,IAAEc;AAAAA,IAAYZ;AAAAA,IAAUa;AAAAA,KAAyB;AAExE,0CAAA,QAAA;AAAA,MAAM,WAAWA,KAAKC;AAAAA,OAAeF,aAArC;AAAA,MACGZ;AAAAA,IAAAA,EAFL;AAAA,EAKD;AAED,QAAMe,aAAajB,QAAQI,OACzB,CAACC,UAAUC,WAAW,CAACL,WAA2B;AAC1C,UAAA;AAAA,MAAEM;AAAAA,MAASU,YAAAA;AAAAA,QAAeX;AAE5BC,QAAAA,oCAASR,eAAc,QAAQkB,eAAc;AAAM,aAAOZ,SAASJ,MAAD;AAEtE,QAAIM,QAAQW,gBAAgB;AAAM,aAAOD,YAAWZ,UAAUI,MAAX,EAAsBR,MAAhC;AAEzC,0CACGS,KAAAA,cAAD;AAAA,MAAc,YAAYH,QAAQR;AAAAA,MAAY,MAAMQ,QAAQW,aAAajB,OAAMc,IAA3B;AAAA,MACjDH,UAAAA,CAASK,UAAAA,YAAWZ,UAAUO,KAAX,EAAkBX,MAA5B;AAAA,IAAA,CAFd;AAAA,KAMFkB,iBAdiB;AAiBZF,SAAAA,WAAWhB,KAAD;AAClB;AC7BD,mCAAmCmB,QAAsB;;AAChDC,SAAAA,YAAYC,QAASF,wCAAQG,SAARH,YAAgB,KAAK;AAClD;AAEM,8BAA8B7C,QAAgBiD,MAA8B;AAC3EC,QAAAA,cAAcC,KAAAA;AAEpBC,QAAAA,UAAU,MAAM;;AAEZ,QAAA,CAACC,0BAA0BrD,OAAOsD,aAAaC,IAAIN,mCAAMO,QAANP,YAAa,EAArC,CAAD,KAC1BA,QACAC,aACA;AACOvB,aAAAA,WAAW8B,sCAA4BR,IAAD;AAC7CjD,aAAOI,YAAYJ,6CAAQsD,aAAaC,IAAIN,KAAKO,SAA9BxD,mBAAoCI,cAApCJ,YAAiD;AACpEA,aAAO0D,SAAP;AAAA,IACD;AAAA,EAAA,GACA,CAAC1D,QAAQiD,IAAT,CAVM;AAWV;AC0BD,MAAMU,cAA4B,CAAC;AAAA,EAAEC,MAAMC,UAAUC,UAAAA;AAAAA,EAASnC,UAAU,CAAC;AAAA,IAAEoC,MAAM;AAAA,EAAA,CAAT;AAArC,CAAD;AAQH,wBAAA;AAAA,EAAEA;AAAAA,EAAMvC;AAAAA,EAAYQ;AAAAA,GAAkB;AAC7DP,QAAAA,UAAUuC,MAAAA,QAAQ,MAAM;;AAC5B,UAAMvC,WAAU;AAAA,MAQd,GAAID,gDAAYyC,WAAZzC,mBAAoB0C,UAASC,UAAAA,eAAeC,SAC5C,CAACC,2BAAD,CAAA,IACA,CAACC,UAAW,YAAA,GAAIC,UAAAA,oBAAoBC,UAAAA,mBAAmBC,UAAY,aAAA,GAAIC,MAAAA,YAAvE;AAAA,IAAA;AAECjD,WAAAA;AAAAA,EAAAA,GACN,CAACD,UAAD,CAdoB;AAgBjB,QAAA,CAACxB,UAAU2E,eAAS,MACxBlD,QAAQmD,YACN,CAAC5E,SAAQ+B;;AAAWA,wDAAQ8C,eAAR9C,gCAAqB/B,aAArB+B,YAAgC/B;AAAAA,KACpD8E,QAAAA,iBAAiBC,QAAYC,YAAAA,WAAAA,UAAUC,mBAAD,CAAA,CAAV,CAAZ,CAFlB,CADuB;AAOnBC,QAAAA,oBAAoBC,aAAO,KAAD;AAChCC,sBAAoBpF,QAAQkF,iBAAT;AAEbG,QAAAA,WAAWC,KAAAA;AAEjBC,uBAAqBvF,QAAQ+D,IAAT;AAEpBX,QAAAA,UAAU,MAAM;AACVpB,QAAAA,WAAW;AAAM;AAEfI,UAAAA,UAAU/B,WAAAA,YAAYmF,UAAUxF,QAAQA,MAA9B;AAChB,WAAOyF,kBAAa;AAAA,MAClBrD;AAAAA,MACAsD,kBAAkBC,CAAAA,aAAY3D,QAAQ4D,eAAeD,QAAvB;AAAA,IAAA,CAFb;AAAA,EAAA,GAIlB,CAAC3F,QAAQgC,OAAT,CARM;AAUHJ,QAAAA,gBAAgBiE,kBACpB,CAACnE,UAA8B;AACtB,0CAAC,mBAAD,iCAAuBA,QAAvB;AAAA,MAA8B;AAAA,MAAwB;AAAA,IAAA,EAA7D;AAAA,EAAA,GAEF,CAACD,SAASD,UAAV,CAJ+B;AAO3BkB,QAAAA,aAAamD,kBACjB,CAACnE,UAA2B;AACnB,0CAAC,gBAAD,iCAAoBA,QAApB;AAAA,MAA2B;AAAA,MAAwB;AAAA,IAAA,EAA1D;AAAA,EAAA,GAEF,CAACD,SAASD,UAAV,CAJ4B;AAOxBsE,QAAAA,eAAe9B,MAAAA,QACnB,MAAA;;AACGD,+BAAQN,UAAAA,4BAA4BM,IAAD,MAAnCA,YAA8CvC,WAAWyC,OAAO8B,iBAAhEhC,YAAgFJ;AAAAA,KACnF,CAACI,MAAMvC,UAAP,CAH0B;AAM5B4B,QAAAA,UAAU,MAAM;AAMViC,QAAAA,aAAaW,0BAAgBC,SAAS;AACxCf,wBAAkB/E,UAAU;AAC5BE,6BAAY6F,SAASlG,MAArB;AAAA,IACD;AAAA,EAAA,GACA,CAACqF,QAAD,CAVM;AAYTjC,QAAAA,UAAU,MAAM;;AACR2C,UAAAA,eAAevE,iBAAWyC,OAAO8B,iBAAlBvE,YAAkCmC;AAEvD3B,uCAASmE,UAAUnG;AACnBgC,uCAASoE,gBAAgBL;AAKrBD,QAAAA,iBAAiBC,cAAc;AACjC/D,yCAASqE;AAAAA,IACV;AAAA,EACA,GAAA,CAACrE,SAASR,YAAYxB,MAAtB,CAZM;AAcHsG,QAAAA,cAAcT,MAAAA,YAAY,MAAM;AACpCX,sBAAkB/E,UAAU;AAC5B6B,uCAASuE;AAAAA,EAAT,GACC,CAACvE,OAAD,CAH4B;AAKzBwE,QAAAA,gBAAgBX,kBACpB,CAACxE,MAAqB;AAChBoF,QAAAA,kBAAAA,WAAS,eAAepF,CAAhB;AAAoB,aAAOW,mCAAS0E;AAC5CD,QAAAA,kBAAAA,WAAS,SAASpF,CAAV;AAAc,aAAOW,mCAAS2E;AAC1C,QAAIF,6BAAS,QAAD,EAAWpF,CAAnB,GAAuB;AACzB6D,wBAAkB/E,UAAU;AAC5BE,6BAAYuG,KAAK5G,MAAjB;AACAgC,yCAAS6E;AAAAA,IACV;AAEGxB,QAAAA,aAAaW,0BAAgBC,SAAS;AACxC5E,QAAEyF,gBAAF;AAAA,IACD;AAEDrF,YAAQsF,QAAQhF,CAAUA,WAAAA;;AAAAA,oDAAQiF,cAARjF,gCAAoBV,GAAGrB;AAAAA,KAAjD;AAAA,KAEF,CAACgC,SAASP,SAASzB,QAAQqF,QAA3B,CAhB+B;AAmB3B4B,QAAAA,cAAcpB,kBAClB,CAACxE,MAAqB;AAChBgE,QAAAA,aAAaW,0BAAgBC,SAAS;AACxC5E,QAAEyF,gBAAF;AACAzF,QAAE6F,eAAF;AAAA,IACD;AAAA,EAEH,GAAA,CAAClF,SAAShC,QAAQqF,QAAlB,CAP6B;AAUzB8B,QAAAA,cAActB,kBAClB,CAACxE,MAAkB;AACbgE,QAAAA,aAAaW,UAAAA,gBAAgBC;AAAS5E,QAAEyF,gBAAF;AAAA,EAAA,GAE5C,CAACzB,QAAD,CAJ6B;AAOzB+B,QAAAA,aAAavB,kBAAY,CAACxE,MAAkB;;AAEhD,QAAIA,EAAEgG,iBAAiB;AAAM;AAE7B,QAAIhG,SAAEgG,kBAAFhG,mBAAiBiG,aAAa,wBAAuB;AACvDpC,wBAAkB/E,UAAU;AAAA,EALF,GAM3B,CAN2B,CAAA;AAQ9B,wCACGoH,WAAAA,OAAD;AAAA,IAAO;AAAA,IAAgB,OAAOzB;AAAAA,IAA9B,yCACG0B,qBAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA,SAASlB;AAAAA,MACT,WAAWE;AAAAA,MACX,SAASS;AAAAA,MACT,SAASE;AAAAA,MACT,QAAQC;AAAAA,MACR,UAAU/B,aAAaW,UAAAA,gBAAgBC;AAAAA,MACvC,aAAY;AAAA,IAAA,CATd;AAAA,EAAA,CAFJ;AAeD;;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs8.js","sources":["../src/runtimes/react/controls/rich-text/components/Element/block.tsx","../src/runtimes/react/controls/rich-text/components/Element/inline.tsx","../src/runtimes/react/controls/rich-text/components/Element/element.tsx","../src/runtimes/react/controls/rich-text/components/Leaf/leaf.tsx","../src/runtimes/react/controls/rich-text/EditableText/useSyncDOMSelection.tsx","../src/runtimes/react/controls/rich-text/EditableText/useSyncWithBuilder.tsx","../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { RenderElementProps } from 'slate-react'\nimport { useResponsiveStyle } from '../../../../../../components/utils/responsive-style'\nimport { Block, BlockType } from '../../../../../../slate'\nimport { useStyle } from '../../../../use-style'\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n element: Block\n}\n\nexport function BlockElement({ element, attributes, children }: InlineRenderElementProps) {\n const blockStyles = [\n useStyle({ margin: 0 }),\n useStyle(useResponsiveStyle([element.textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n ]\n\n const quoteStyles = useStyle({\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 switch (element.type) {\n case BlockType.Default:\n case BlockType.Paragraph:\n return (\n <p {...attributes} className={cx(...blockStyles)}>\n {children}\n </p>\n )\n case BlockType.Heading1:\n return (\n <h1 {...attributes} className={cx(...blockStyles)}>\n {children}\n </h1>\n )\n case BlockType.Heading2:\n return (\n <h2 {...attributes} className={cx(...blockStyles)}>\n {children}\n </h2>\n )\n case BlockType.Heading3:\n return (\n <h3 {...attributes} className={cx(...blockStyles)}>\n {children}\n </h3>\n )\n case BlockType.Heading4:\n return (\n <h4 {...attributes} className={cx(...blockStyles)}>\n {children}\n </h4>\n )\n case BlockType.Heading5:\n return (\n <h5 {...attributes} className={cx(...blockStyles)}>\n {children}\n </h5>\n )\n case BlockType.Heading6:\n return (\n <h6 {...attributes} className={cx(...blockStyles)}>\n {children}\n </h6>\n )\n case BlockType.BlockQuote:\n return (\n <blockquote {...attributes} className={cx(...blockStyles, quoteStyles)}>\n {children}\n </blockquote>\n )\n case BlockType.OrderedList:\n return (\n <ol {...attributes} className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n {children}\n </ol>\n )\n case BlockType.UnorderedList:\n return (\n <ul {...attributes} className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n {children}\n </ul>\n )\n case BlockType.ListItem:\n return (\n <li {...attributes} className={cx(...blockStyles)}>\n {children}\n </li>\n )\n case BlockType.ListItemChild:\n return (\n <span {...attributes} className={cx(...blockStyles)}>\n {children}\n </span>\n )\n }\n}\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { RenderElementProps } from 'slate-react'\nimport { Inline, InlineType } from '../../../../../../slate/types'\nimport { useStyle } from '../../../../use-style'\nimport { Link } from '../../../../../../components/shared/Link'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n return <Link {...restOfProps} className={cx(useStyle({ textDecoration: 'none' }), className)} />\n}\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n element: Inline\n}\n\nexport function InlineElement({ element, attributes, children }: InlineRenderElementProps) {\n switch (element.type) {\n case InlineType.Code:\n return <code {...attributes}>{children}</code>\n case InlineType.SuperScript:\n return <sup {...attributes}>{children}</sup>\n case InlineType.SubScript:\n return <sub {...attributes}>{children}</sub>\n case InlineType.Link:\n return (\n <StyledLink {...attributes} link={element.link ?? undefined}>\n {children}\n </StyledLink>\n )\n }\n}\n","import { RenderElementProps } from 'slate-react'\nimport { BlockElement } from './block'\nimport { InlineElement } from './inline'\nimport { BlockType, InlineType } from '../../../../../../slate/types'\n\nexport function Element({ element, ...props }: RenderElementProps) {\n switch (element.type) {\n case InlineType.Code:\n case InlineType.SuperScript:\n case InlineType.SubScript:\n case InlineType.Link:\n return <InlineElement element={element} {...props} />\n case BlockType.Default:\n case BlockType.Paragraph:\n case BlockType.Heading1:\n case BlockType.Heading2:\n case BlockType.Heading3:\n case BlockType.Heading4:\n case BlockType.Heading5:\n case BlockType.Heading6:\n case BlockType.BlockQuote:\n case BlockType.OrderedList:\n case BlockType.UnorderedList:\n case BlockType.ListItem:\n case BlockType.ListItemChild:\n return <BlockElement element={element} {...props} />\n default:\n return <span {...props.attributes}>{props.children}</span>\n }\n}\n","import { RenderLeafProps } from 'slate-react'\nimport useEnhancedTypography, { useTypographyClassName } from '../../../typography'\n\nexport function Leaf({ leaf, ...props }: RenderLeafProps) {\n // for each breakpoint fetch related resources and merge its value with its override\n const enhancedTypography = useEnhancedTypography(leaf.typography)\n\n // for each breakpoint shallow merge back up through the breakpoints and create a className\n const typographyClassName = useTypographyClassName(enhancedTypography)\n\n return (\n <span {...props.attributes} className={typographyClassName}>\n {props.children}\n </span>\n )\n}\n","import { ReactEditor } from 'slate-react'\nimport { Editor, Range as SlateRange } from 'slate'\nimport { useIsomorphicLayoutEffect } from '../../../../../components/hooks/useIsomorphicLayoutEffect'\n\n/**\n * Clicking outside of the host blurs our `<Editable />`.\n * `<Editable />` only updates the DOM's selection to match slate when it is focused.\n * In the case of a panel being clicked this hook updates the DOM selection to match slate.\n */\nexport function useSyncDOMSelection(editor: Editor, isEnabled: boolean) {\n useIsomorphicLayoutEffect(() => {\n if (!isEnabled || editor.selection == null || ReactEditor.isFocused(editor)) return\n try {\n const root = ReactEditor.findDocumentOrShadowRoot(editor) as Document\n const domSelection = root.getSelection()\n const newDomRange: Range | null = ReactEditor.toDOMRange(editor, editor.selection)\n\n if (newDomRange) {\n if (SlateRange.isBackward(editor.selection!)) {\n domSelection?.setBaseAndExtent(\n newDomRange.endContainer,\n newDomRange.endOffset,\n newDomRange.startContainer,\n newDomRange.startOffset,\n )\n } else {\n domSelection?.setBaseAndExtent(\n newDomRange.startContainer,\n newDomRange.startOffset,\n newDomRange.endContainer,\n newDomRange.endOffset,\n )\n }\n } else {\n domSelection?.removeAllRanges()\n }\n } catch (e) {\n console.error(e)\n }\n })\n}\n","import { useState, useEffect, useCallback } from 'react'\nimport { Editor } from 'slate'\nimport { useIsInBuilder } from '../../../../../react'\nimport { richTextDTOtoDAO, richTextDTOtoSelection } from '../../../../../controls'\nimport { RichTextValue } from '../../../../../prop-controllers'\nimport deepEqual from '../../../../../utils/deepEqual'\n\nconst COMMIT_DEBOUNCE_DELAY = 500\n\n/**\n * Compare new prop value with current editor and update editor\n * if the values are not equal.\n */\nexport function useSyncWithBuilder(editor: Editor, text?: RichTextValue) {\n const [shouldCommit, setShouldCommit] = useState(true)\n const isInBuilder = useIsInBuilder()\n\n useEffect(() => {\n if (shouldCommit && text && isInBuilder) {\n const nextValue = richTextDTOtoDAO(text)\n const nextSelection = richTextDTOtoSelection(text)\n if (!deepEqual(editor.children, nextValue) || !deepEqual(editor.selection, nextSelection)) {\n editor.children = nextValue\n editor.selection = nextSelection\n editor.onChange()\n }\n }\n }, [editor, shouldCommit, text])\n\n useEffect(() => {\n if (shouldCommit) return\n\n const timeoutId = window.setTimeout(() => {\n setShouldCommit(true)\n }, COMMIT_DEBOUNCE_DELAY)\n\n return () => {\n window.clearTimeout(timeoutId)\n }\n }, [shouldCommit])\n\n return useCallback(() => setShouldCommit(false), [])\n}\n","import { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react'\nimport { useBuilderEditMode } from '../../..'\nimport { richTextDTOtoDAO } from '../../../../../controls'\nimport { RichTextValue } from '../../../../../prop-controllers'\nimport { ElementIDValue } from '../../../../../prop-controllers/descriptors'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport {\n RichTextDAO,\n BlockType,\n withBlock,\n withTypography,\n withBuilder,\n onKeyDown,\n} from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/prop-controller-handles'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n id?: ElementIDValue\n text?: RichTextValue\n width?: string\n margin?: string\n}\n\nconst defaultText: RichTextDAO = [{ type: BlockType.Paragraph, children: [{ text: '' }] }]\n\nexport const EditableText = forwardRef(function EditableText(\n { id, text, width, margin }: Props,\n ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n useSyncDOMSelection(editor, isPreservingDOMSElection)\n const delaySync = useSyncWithBuilder(editor, text)\n const editMode = useBuilderEditMode()\n\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> | null>(null)\n const controller = propControllers?.text\n\n useEffect(() => {\n if (controller == null) return\n\n const element = ReactEditor.toDOMNode(editor, editor)\n\n return pollBoxModel({\n element,\n onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n })\n }, [editor, controller])\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return ReactEditor.toDOMNode(editor, editor)\n },\n getBoxModel() {\n return getBox(ReactEditor.toDOMNode(editor, editor))\n },\n setPropControllers,\n }),\n [editor, setPropControllers],\n )\n\n const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n useEffect(() => {\n controller?.setSlateEditor(editor)\n }, [controller, editor])\n\n const handleFocus = useCallback(() => {\n controller?.focus()\n setIsPreservingDOMSelection(true)\n }, [controller])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (isHotkey('mod+shift+z', e)) return controller?.redo()\n if (isHotkey('mod+z', e)) return controller?.undo()\n if (isHotkey('escape')(e)) return controller?.blur()\n onKeyDown(e, editor)\n },\n [controller, editor],\n )\n\n const handleBlur = useCallback((e: FocusEvent) => {\n // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n if (e.relatedTarget == null) return\n // Otherwise we want to deselect on blur and stop preserving selection.\n setIsPreservingDOMSelection(false)\n ReactEditor.deselect(editor)\n }, [])\n\n return (\n <Slate editor={editor} value={initialValue} onChange={delaySync}>\n <Editable\n id={id}\n renderLeaf={Leaf}\n renderElement={Element}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n className={cx(width, margin)}\n readOnly={editMode !== BuilderEditMode.CONTENT}\n placeholder=\"Write some text...\"\n />\n </Slate>\n )\n})\n\nexport default EditableText\n"],"names":["element","attributes","children","blockStyles","useStyle","margin","useResponsiveStyle","textAlign","quoteStyles","padding","fontSize","fontWeight","borderLeft","type","BlockType","Default","Paragraph","cx","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6","BlockQuote","OrderedList","listStylePosition","UnorderedList","ListItem","ListItemChild","className","restOfProps","Link","textDecoration","InlineType","Code","SuperScript","SubScript","link","undefined","props","leaf","enhancedTypography","useEnhancedTypography","typography","typographyClassName","useTypographyClassName","editor","isEnabled","useIsomorphicLayoutEffect","selection","ReactEditor","isFocused","root","findDocumentOrShadowRoot","domSelection","getSelection","newDomRange","toDOMRange","SlateRange","isBackward","setBaseAndExtent","endContainer","endOffset","startContainer","startOffset","removeAllRanges","e","console","error","COMMIT_DEBOUNCE_DELAY","text","shouldCommit","setShouldCommit","useState","isInBuilder","useIsInBuilder","useEffect","nextValue","richTextDTOtoDAO","nextSelection","richTextDTOtoSelection","deepEqual","onChange","timeoutId","window","setTimeout","clearTimeout","useCallback","defaultText","EditableText","forwardRef","id","width","ref","withBlock","withTypography","withBuilder","withReact","createEditor","isPreservingDOMSElection","setIsPreservingDOMSelection","useSyncDOMSelection","delaySync","useSyncWithBuilder","editMode","useBuilderEditMode","propControllers","setPropControllers","controller","toDOMNode","pollBoxModel","onBoxModelChange","boxModel","changeBoxModel","useImperativeHandle","getDomNode","getBoxModel","getBox","initialValue","useMemo","setSlateEditor","handleFocus","focus","handleKeyDown","isHotkey","redo","undo","blur","onKeyDown","handleBlur","relatedTarget","deselect","Slate","Editable","Leaf","Element","BuilderEditMode","CONTENT"],"mappings":"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"}
|