@webiny/lexical-nodes 5.43.3 → 6.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/FontColorNode.d.ts +4 -4
- package/FontColorNode.js +96 -145
- package/FontColorNode.js.map +1 -1
- package/HeadingNode.d.ts +29 -17
- package/HeadingNode.js +181 -152
- package/HeadingNode.js.map +1 -1
- package/ImageNode.js +143 -188
- package/ImageNode.js.map +1 -1
- package/LinkNode.d.ts +2 -2
- package/LinkNode.js +251 -346
- package/LinkNode.js.map +1 -1
- package/ListItemNode.d.ts +4 -3
- package/ListItemNode.js +276 -354
- package/ListItemNode.js.map +1 -1
- package/ListNode.d.ts +28 -14
- package/ListNode.js +174 -208
- package/ListNode.js.map +1 -1
- package/ParagraphNode.d.ts +28 -16
- package/ParagraphNode.js +141 -179
- package/ParagraphNode.js.map +1 -1
- package/QuoteNode.d.ts +26 -19
- package/QuoteNode.js +104 -186
- package/QuoteNode.js.map +1 -1
- package/components/ImageNode/ContentEditable.js +7 -14
- package/components/ImageNode/ContentEditable.js.map +1 -1
- package/components/ImageNode/ImageComponent.js +104 -124
- package/components/ImageNode/ImageComponent.js.map +1 -1
- package/components/ImageNode/ImageResizer.js +78 -83
- package/components/ImageNode/ImageResizer.js.map +1 -1
- package/components/ImageNode/Placeholder.d.ts +1 -1
- package/components/ImageNode/Placeholder.js +10 -16
- package/components/ImageNode/Placeholder.js.map +1 -1
- package/components/ImageNode/SharedHistoryContext.d.ts +2 -2
- package/components/ImageNode/SharedHistoryContext.js +12 -20
- package/components/ImageNode/SharedHistoryContext.js.map +1 -1
- package/generateInitialLexicalValue.d.ts +4 -0
- package/generateInitialLexicalValue.js +27 -0
- package/generateInitialLexicalValue.js.map +1 -0
- package/index.d.ts +4 -8
- package/index.js +44 -230
- package/index.js.map +1 -1
- package/package.json +4 -4
- package/prepareLexicalState.d.ts +2 -0
- package/prepareLexicalState.js +53 -0
- package/prepareLexicalState.js.map +1 -0
- package/types.d.ts +4 -5
- package/types.js +1 -5
- package/types.js.map +1 -1
- package/utils/clearNodeFormating.d.ts +1 -1
- package/utils/clearNodeFormating.js +12 -18
- package/utils/clearNodeFormating.js.map +1 -1
- package/utils/formatList.d.ts +3 -3
- package/utils/formatList.js +171 -208
- package/utils/formatList.js.map +1 -1
- package/utils/formatToHeading.d.ts +2 -2
- package/utils/formatToHeading.js +8 -15
- package/utils/formatToHeading.js.map +1 -1
- package/utils/formatToParagraph.d.ts +1 -1
- package/utils/formatToParagraph.js +8 -16
- package/utils/formatToParagraph.js.map +1 -1
- package/utils/formatToQuote.d.ts +1 -1
- package/utils/formatToQuote.js +8 -15
- package/utils/formatToQuote.js.map +1 -1
- package/utils/getStyleId.d.ts +11 -0
- package/utils/getStyleId.js +14 -0
- package/utils/getStyleId.js.map +1 -0
- package/utils/listNode.d.ts +2 -2
- package/utils/listNode.js +37 -50
- package/utils/listNode.js.map +1 -1
- package/utils/toggleLink.d.ts +1 -1
- package/utils/toggleLink.js +41 -45
- package/utils/toggleLink.js.map +1 -1
- package/TypographyNode.d.ts +0 -39
- package/TypographyNode.js +0 -146
- package/TypographyNode.js.map +0 -1
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.ImageResizer = ImageResizer;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var React = _react;
|
|
10
1
|
/**
|
|
11
2
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
12
3
|
*
|
|
@@ -15,31 +6,34 @@ var React = _react;
|
|
|
15
6
|
*
|
|
16
7
|
*/
|
|
17
8
|
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
import { useRef } from "react";
|
|
18
11
|
function clamp(value, min, max) {
|
|
19
12
|
return Math.min(Math.max(value, min), max);
|
|
20
13
|
}
|
|
21
|
-
|
|
14
|
+
const Direction = {
|
|
22
15
|
east: 1 << 0,
|
|
23
16
|
north: 1 << 3,
|
|
24
17
|
south: 1 << 1,
|
|
25
18
|
west: 1 << 2
|
|
26
19
|
};
|
|
27
|
-
function ImageResizer(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
export function ImageResizer({
|
|
21
|
+
onResizeStart,
|
|
22
|
+
onResizeEnd,
|
|
23
|
+
buttonRef,
|
|
24
|
+
imageRef,
|
|
25
|
+
maxWidth,
|
|
26
|
+
editor,
|
|
27
|
+
showCaption,
|
|
28
|
+
setShowCaption,
|
|
29
|
+
captionsEnabled
|
|
30
|
+
}) {
|
|
31
|
+
const controlWrapperRef = useRef(null);
|
|
32
|
+
const userSelect = useRef({
|
|
39
33
|
priority: "",
|
|
40
34
|
value: "default"
|
|
41
35
|
});
|
|
42
|
-
|
|
36
|
+
const positioningRef = useRef({
|
|
43
37
|
currentHeight: 0,
|
|
44
38
|
currentWidth: 0,
|
|
45
39
|
direction: 0,
|
|
@@ -50,28 +44,28 @@ function ImageResizer(_ref) {
|
|
|
50
44
|
startX: 0,
|
|
51
45
|
startY: 0
|
|
52
46
|
});
|
|
53
|
-
|
|
47
|
+
const editorRootElement = editor.getRootElement();
|
|
54
48
|
// Find max width, accounting for editor padding.
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
49
|
+
const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
|
|
50
|
+
const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
|
|
51
|
+
const minWidth = 100;
|
|
52
|
+
const minHeight = 100;
|
|
53
|
+
const setStartCursor = direction => {
|
|
54
|
+
const ew = direction === Direction.east || direction === Direction.west;
|
|
55
|
+
const ns = direction === Direction.north || direction === Direction.south;
|
|
56
|
+
const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
|
|
57
|
+
const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
|
|
64
58
|
if (editorRootElement !== null) {
|
|
65
|
-
editorRootElement.style.setProperty("cursor",
|
|
59
|
+
editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
|
|
66
60
|
}
|
|
67
61
|
if (document.body !== null) {
|
|
68
|
-
document.body.style.setProperty("cursor",
|
|
62
|
+
document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
|
|
69
63
|
userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
|
|
70
64
|
userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
|
|
71
|
-
document.body.style.setProperty("-webkit-user-select",
|
|
65
|
+
document.body.style.setProperty("-webkit-user-select", `none`, "important");
|
|
72
66
|
}
|
|
73
67
|
};
|
|
74
|
-
|
|
68
|
+
const setEndCursor = () => {
|
|
75
69
|
if (editorRootElement !== null) {
|
|
76
70
|
editorRootElement.style.setProperty("cursor", "text");
|
|
77
71
|
}
|
|
@@ -80,17 +74,18 @@ function ImageResizer(_ref) {
|
|
|
80
74
|
document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
|
|
81
75
|
}
|
|
82
76
|
};
|
|
83
|
-
|
|
77
|
+
const handlePointerDown = (event, direction) => {
|
|
84
78
|
if (!editor.isEditable()) {
|
|
85
79
|
return;
|
|
86
80
|
}
|
|
87
|
-
|
|
88
|
-
|
|
81
|
+
const image = imageRef.current;
|
|
82
|
+
const controlWrapper = controlWrapperRef.current;
|
|
89
83
|
if (image !== null && controlWrapper !== null) {
|
|
90
|
-
|
|
91
|
-
width
|
|
92
|
-
height
|
|
93
|
-
|
|
84
|
+
const {
|
|
85
|
+
width,
|
|
86
|
+
height
|
|
87
|
+
} = image.getBoundingClientRect();
|
|
88
|
+
const positioning = positioningRef.current;
|
|
94
89
|
positioning.startWidth = width;
|
|
95
90
|
positioning.startHeight = height;
|
|
96
91
|
positioning.ratio = width / height;
|
|
@@ -103,50 +98,50 @@ function ImageResizer(_ref) {
|
|
|
103
98
|
setStartCursor(direction);
|
|
104
99
|
onResizeStart();
|
|
105
100
|
controlWrapper.classList.add("image-control-wrapper--resizing");
|
|
106
|
-
image.style.height =
|
|
107
|
-
image.style.width =
|
|
101
|
+
image.style.height = `${height}px`;
|
|
102
|
+
image.style.width = `${width}px`;
|
|
108
103
|
document.addEventListener("pointermove", handlePointerMove);
|
|
109
|
-
document.addEventListener("pointerup",
|
|
104
|
+
document.addEventListener("pointerup", handlePointerUp);
|
|
110
105
|
}
|
|
111
106
|
};
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
107
|
+
const handlePointerMove = event => {
|
|
108
|
+
const image = imageRef.current;
|
|
109
|
+
const positioning = positioningRef.current;
|
|
110
|
+
const isHorizontal = positioning.direction & (Direction.east | Direction.west);
|
|
111
|
+
const isVertical = positioning.direction & (Direction.south | Direction.north);
|
|
117
112
|
if (image !== null && positioning.isResizing) {
|
|
118
113
|
// Corner cursor
|
|
119
114
|
if (isHorizontal && isVertical) {
|
|
120
|
-
|
|
115
|
+
let diff = Math.floor(positioning.startX - event.clientX);
|
|
121
116
|
diff = positioning.direction & Direction.east ? -diff : diff;
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
image.style.width =
|
|
125
|
-
image.style.height =
|
|
117
|
+
const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
|
|
118
|
+
const height = width / positioning.ratio;
|
|
119
|
+
image.style.width = `${width}px`;
|
|
120
|
+
image.style.height = `${height}px`;
|
|
126
121
|
positioning.currentHeight = height;
|
|
127
122
|
positioning.currentWidth = width;
|
|
128
123
|
} else if (isVertical) {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
image.style.height =
|
|
133
|
-
positioning.currentHeight =
|
|
124
|
+
let diff = Math.floor(positioning.startY - event.clientY);
|
|
125
|
+
diff = positioning.direction & Direction.south ? -diff : diff;
|
|
126
|
+
const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
|
|
127
|
+
image.style.height = `${height}px`;
|
|
128
|
+
positioning.currentHeight = height;
|
|
134
129
|
} else {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
image.style.width =
|
|
139
|
-
positioning.currentWidth =
|
|
130
|
+
let diff = Math.floor(positioning.startX - event.clientX);
|
|
131
|
+
diff = positioning.direction & Direction.east ? -diff : diff;
|
|
132
|
+
const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
|
|
133
|
+
image.style.width = `${width}px`;
|
|
134
|
+
positioning.currentWidth = width;
|
|
140
135
|
}
|
|
141
136
|
}
|
|
142
137
|
};
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
138
|
+
const handlePointerUp = () => {
|
|
139
|
+
const image = imageRef.current;
|
|
140
|
+
const positioning = positioningRef.current;
|
|
141
|
+
const controlWrapper = controlWrapperRef.current;
|
|
147
142
|
if (image !== null && controlWrapper !== null && positioning.isResizing) {
|
|
148
|
-
|
|
149
|
-
|
|
143
|
+
const width = positioning.currentWidth;
|
|
144
|
+
const height = positioning.currentHeight;
|
|
150
145
|
positioning.startWidth = 0;
|
|
151
146
|
positioning.startHeight = 0;
|
|
152
147
|
positioning.ratio = 0;
|
|
@@ -159,7 +154,7 @@ function ImageResizer(_ref) {
|
|
|
159
154
|
setEndCursor();
|
|
160
155
|
onResizeEnd(width, height);
|
|
161
156
|
document.removeEventListener("pointermove", handlePointerMove);
|
|
162
|
-
document.removeEventListener("pointerup",
|
|
157
|
+
document.removeEventListener("pointerup", handlePointerUp);
|
|
163
158
|
}
|
|
164
159
|
};
|
|
165
160
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -167,47 +162,47 @@ function ImageResizer(_ref) {
|
|
|
167
162
|
}, !showCaption && captionsEnabled && /*#__PURE__*/React.createElement("button", {
|
|
168
163
|
className: "image-caption-button",
|
|
169
164
|
ref: buttonRef,
|
|
170
|
-
onClick:
|
|
165
|
+
onClick: () => {
|
|
171
166
|
setShowCaption(!showCaption);
|
|
172
167
|
}
|
|
173
168
|
}, "Add Caption"), /*#__PURE__*/React.createElement("div", {
|
|
174
169
|
className: "image-resizer image-resizer-n",
|
|
175
|
-
onPointerDown:
|
|
170
|
+
onPointerDown: event => {
|
|
176
171
|
handlePointerDown(event, Direction.north);
|
|
177
172
|
}
|
|
178
173
|
}), /*#__PURE__*/React.createElement("div", {
|
|
179
174
|
className: "image-resizer image-resizer-ne",
|
|
180
|
-
onPointerDown:
|
|
175
|
+
onPointerDown: event => {
|
|
181
176
|
handlePointerDown(event, Direction.north | Direction.east);
|
|
182
177
|
}
|
|
183
178
|
}), /*#__PURE__*/React.createElement("div", {
|
|
184
179
|
className: "image-resizer image-resizer-e",
|
|
185
|
-
onPointerDown:
|
|
180
|
+
onPointerDown: event => {
|
|
186
181
|
handlePointerDown(event, Direction.east);
|
|
187
182
|
}
|
|
188
183
|
}), /*#__PURE__*/React.createElement("div", {
|
|
189
184
|
className: "image-resizer image-resizer-se",
|
|
190
|
-
onPointerDown:
|
|
185
|
+
onPointerDown: event => {
|
|
191
186
|
handlePointerDown(event, Direction.south | Direction.east);
|
|
192
187
|
}
|
|
193
188
|
}), /*#__PURE__*/React.createElement("div", {
|
|
194
189
|
className: "image-resizer image-resizer-s",
|
|
195
|
-
onPointerDown:
|
|
190
|
+
onPointerDown: event => {
|
|
196
191
|
handlePointerDown(event, Direction.south);
|
|
197
192
|
}
|
|
198
193
|
}), /*#__PURE__*/React.createElement("div", {
|
|
199
194
|
className: "image-resizer image-resizer-sw",
|
|
200
|
-
onPointerDown:
|
|
195
|
+
onPointerDown: event => {
|
|
201
196
|
handlePointerDown(event, Direction.south | Direction.west);
|
|
202
197
|
}
|
|
203
198
|
}), /*#__PURE__*/React.createElement("div", {
|
|
204
199
|
className: "image-resizer image-resizer-w",
|
|
205
|
-
onPointerDown:
|
|
200
|
+
onPointerDown: event => {
|
|
206
201
|
handlePointerDown(event, Direction.west);
|
|
207
202
|
}
|
|
208
203
|
}), /*#__PURE__*/React.createElement("div", {
|
|
209
204
|
className: "image-resizer image-resizer-nw",
|
|
210
|
-
onPointerDown:
|
|
205
|
+
onPointerDown: event => {
|
|
211
206
|
handlePointerDown(event, Direction.north | Direction.west);
|
|
212
207
|
}
|
|
213
208
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","React","clamp","value","min","max","Math","Direction","east","north","south","west","ImageResizer","_ref","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","useRef","userSelect","priority","positioningRef","currentHeight","currentWidth","direction","isResizing","ratio","startHeight","startWidth","startX","startY","editorRootElement","getRootElement","maxWidthContainer","getBoundingClientRect","width","maxHeightContainer","height","minWidth","minHeight","setStartCursor","ew","ns","nwse","cursorDir","style","setProperty","concat","document","body","current","getPropertyValue","getPropertyPriority","setEndCursor","handlePointerDown","event","isEditable","image","controlWrapper","_image$getBoundingCli","positioning","clientX","clientY","classList","add","addEventListener","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","floor","remove","removeEventListener","createElement","ref","className","onClick","onPointerDown"],"sources":["ImageResizer.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n east: 1 << 0,\n north: 1 << 3,\n south: 1 << 1,\n west: 1 << 2\n};\n\nexport function ImageResizer({\n onResizeStart,\n onResizeEnd,\n buttonRef,\n imageRef,\n maxWidth,\n editor,\n showCaption,\n setShowCaption,\n captionsEnabled\n}: {\n editor: LexicalEditor;\n buttonRef: { current: null | HTMLButtonElement };\n imageRef: { current: null | HTMLElement };\n maxWidth?: number;\n onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n onResizeStart: () => void;\n setShowCaption: (show: boolean) => void;\n showCaption: boolean;\n captionsEnabled: boolean;\n}): JSX.Element {\n const controlWrapperRef = useRef<HTMLDivElement>(null);\n const userSelect = useRef({\n priority: \"\",\n value: \"default\"\n });\n const positioningRef = useRef<{\n currentHeight: \"inherit\" | number;\n currentWidth: \"inherit\" | number;\n direction: number;\n isResizing: boolean;\n ratio: number;\n startHeight: number;\n startWidth: number;\n startX: number;\n startY: number;\n }>({\n currentHeight: 0,\n currentWidth: 0,\n direction: 0,\n isResizing: false,\n ratio: 0,\n startHeight: 0,\n startWidth: 0,\n startX: 0,\n startY: 0\n });\n const editorRootElement = editor.getRootElement();\n // Find max width, accounting for editor padding.\n const maxWidthContainer = maxWidth\n ? maxWidth\n : editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().width - 20\n : 100;\n const maxHeightContainer =\n editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n const minWidth = 100;\n const minHeight = 100;\n\n const setStartCursor = (direction: number) => {\n const ew = direction === Direction.east || direction === Direction.west;\n const ns = direction === Direction.north || direction === Direction.south;\n const nwse =\n (direction & Direction.north && direction & Direction.west) ||\n (direction & Direction.south && direction & Direction.east);\n\n const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n userSelect.current.priority =\n document.body.style.getPropertyPriority(\"-webkit-user-select\");\n document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n }\n };\n\n const setEndCursor = () => {\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", \"text\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", \"default\");\n document.body.style.setProperty(\n \"-webkit-user-select\",\n userSelect.current.value,\n userSelect.current.priority\n );\n }\n };\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n if (!editor.isEditable()) {\n return;\n }\n\n const image = imageRef.current;\n const controlWrapper = controlWrapperRef.current;\n\n if (image !== null && controlWrapper !== null) {\n const { width, height } = image.getBoundingClientRect();\n const positioning = positioningRef.current;\n positioning.startWidth = width;\n positioning.startHeight = height;\n positioning.ratio = width / height;\n positioning.currentWidth = width;\n positioning.currentHeight = height;\n positioning.startX = event.clientX;\n positioning.startY = event.clientY;\n positioning.isResizing = true;\n positioning.direction = direction;\n\n setStartCursor(direction);\n onResizeStart();\n\n controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n image.style.height = `${height}px`;\n image.style.width = `${width}px`;\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n }\n };\n const handlePointerMove = (event: PointerEvent) => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n\n const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n if (image !== null && positioning.isResizing) {\n // Corner cursor\n if (isHorizontal && isVertical) {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n const height = width / positioning.ratio;\n image.style.width = `${width}px`;\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n positioning.currentWidth = width;\n } else if (isVertical) {\n let diff = Math.floor(positioning.startY - event.clientY);\n diff = positioning.direction & Direction.south ? -diff : diff;\n\n const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n } else {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n image.style.width = `${width}px`;\n positioning.currentWidth = width;\n }\n }\n };\n const handlePointerUp = () => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n const controlWrapper = controlWrapperRef.current;\n if (image !== null && controlWrapper !== null && positioning.isResizing) {\n const width = positioning.currentWidth;\n const height = positioning.currentHeight;\n positioning.startWidth = 0;\n positioning.startHeight = 0;\n positioning.ratio = 0;\n positioning.startX = 0;\n positioning.startY = 0;\n positioning.currentWidth = 0;\n positioning.currentHeight = 0;\n positioning.isResizing = false;\n\n controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n setEndCursor();\n onResizeEnd(width, height);\n\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n }\n };\n return (\n <div ref={controlWrapperRef}>\n {!showCaption && captionsEnabled && (\n <button\n className=\"image-caption-button\"\n ref={buttonRef}\n onClick={() => {\n setShowCaption(!showCaption);\n }}\n >\n Add Caption\n </button>\n )}\n <div\n className=\"image-resizer image-resizer-n\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north);\n }}\n />\n <div\n className=\"image-resizer image-resizer-ne\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-e\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-se\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-s\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south);\n }}\n />\n <div\n className=\"image-resizer image-resizer-sw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-w\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-nw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.west);\n }}\n />\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","useRef","clamp","value","min","max","Math","Direction","east","north","south","west","ImageResizer","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","userSelect","priority","positioningRef","currentHeight","currentWidth","direction","isResizing","ratio","startHeight","startWidth","startX","startY","editorRootElement","getRootElement","maxWidthContainer","getBoundingClientRect","width","maxHeightContainer","height","minWidth","minHeight","setStartCursor","ew","ns","nwse","cursorDir","style","setProperty","document","body","current","getPropertyValue","getPropertyPriority","setEndCursor","handlePointerDown","event","isEditable","image","controlWrapper","positioning","clientX","clientY","classList","add","addEventListener","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","floor","remove","removeEventListener","createElement","ref","className","onClick","onPointerDown"],"sources":["ImageResizer.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n east: 1 << 0,\n north: 1 << 3,\n south: 1 << 1,\n west: 1 << 2\n};\n\nexport function ImageResizer({\n onResizeStart,\n onResizeEnd,\n buttonRef,\n imageRef,\n maxWidth,\n editor,\n showCaption,\n setShowCaption,\n captionsEnabled\n}: {\n editor: LexicalEditor;\n buttonRef: { current: null | HTMLButtonElement };\n imageRef: { current: null | HTMLElement };\n maxWidth?: number;\n onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n onResizeStart: () => void;\n setShowCaption: (show: boolean) => void;\n showCaption: boolean;\n captionsEnabled: boolean;\n}): JSX.Element {\n const controlWrapperRef = useRef<HTMLDivElement>(null);\n const userSelect = useRef({\n priority: \"\",\n value: \"default\"\n });\n const positioningRef = useRef<{\n currentHeight: \"inherit\" | number;\n currentWidth: \"inherit\" | number;\n direction: number;\n isResizing: boolean;\n ratio: number;\n startHeight: number;\n startWidth: number;\n startX: number;\n startY: number;\n }>({\n currentHeight: 0,\n currentWidth: 0,\n direction: 0,\n isResizing: false,\n ratio: 0,\n startHeight: 0,\n startWidth: 0,\n startX: 0,\n startY: 0\n });\n const editorRootElement = editor.getRootElement();\n // Find max width, accounting for editor padding.\n const maxWidthContainer = maxWidth\n ? maxWidth\n : editorRootElement !== null\n ? editorRootElement.getBoundingClientRect().width - 20\n : 100;\n const maxHeightContainer =\n editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n const minWidth = 100;\n const minHeight = 100;\n\n const setStartCursor = (direction: number) => {\n const ew = direction === Direction.east || direction === Direction.west;\n const ns = direction === Direction.north || direction === Direction.south;\n const nwse =\n (direction & Direction.north && direction & Direction.west) ||\n (direction & Direction.south && direction & Direction.east);\n\n const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n userSelect.current.priority =\n document.body.style.getPropertyPriority(\"-webkit-user-select\");\n document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n }\n };\n\n const setEndCursor = () => {\n if (editorRootElement !== null) {\n editorRootElement.style.setProperty(\"cursor\", \"text\");\n }\n if (document.body !== null) {\n document.body.style.setProperty(\"cursor\", \"default\");\n document.body.style.setProperty(\n \"-webkit-user-select\",\n userSelect.current.value,\n userSelect.current.priority\n );\n }\n };\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n if (!editor.isEditable()) {\n return;\n }\n\n const image = imageRef.current;\n const controlWrapper = controlWrapperRef.current;\n\n if (image !== null && controlWrapper !== null) {\n const { width, height } = image.getBoundingClientRect();\n const positioning = positioningRef.current;\n positioning.startWidth = width;\n positioning.startHeight = height;\n positioning.ratio = width / height;\n positioning.currentWidth = width;\n positioning.currentHeight = height;\n positioning.startX = event.clientX;\n positioning.startY = event.clientY;\n positioning.isResizing = true;\n positioning.direction = direction;\n\n setStartCursor(direction);\n onResizeStart();\n\n controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n image.style.height = `${height}px`;\n image.style.width = `${width}px`;\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n }\n };\n const handlePointerMove = (event: PointerEvent) => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n\n const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n if (image !== null && positioning.isResizing) {\n // Corner cursor\n if (isHorizontal && isVertical) {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n const height = width / positioning.ratio;\n image.style.width = `${width}px`;\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n positioning.currentWidth = width;\n } else if (isVertical) {\n let diff = Math.floor(positioning.startY - event.clientY);\n diff = positioning.direction & Direction.south ? -diff : diff;\n\n const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n image.style.height = `${height}px`;\n positioning.currentHeight = height;\n } else {\n let diff = Math.floor(positioning.startX - event.clientX);\n diff = positioning.direction & Direction.east ? -diff : diff;\n\n const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n image.style.width = `${width}px`;\n positioning.currentWidth = width;\n }\n }\n };\n const handlePointerUp = () => {\n const image = imageRef.current;\n const positioning = positioningRef.current;\n const controlWrapper = controlWrapperRef.current;\n if (image !== null && controlWrapper !== null && positioning.isResizing) {\n const width = positioning.currentWidth;\n const height = positioning.currentHeight;\n positioning.startWidth = 0;\n positioning.startHeight = 0;\n positioning.ratio = 0;\n positioning.startX = 0;\n positioning.startY = 0;\n positioning.currentWidth = 0;\n positioning.currentHeight = 0;\n positioning.isResizing = false;\n\n controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n setEndCursor();\n onResizeEnd(width, height);\n\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n }\n };\n return (\n <div ref={controlWrapperRef}>\n {!showCaption && captionsEnabled && (\n <button\n className=\"image-caption-button\"\n ref={buttonRef}\n onClick={() => {\n setShowCaption(!showCaption);\n }}\n >\n Add Caption\n </button>\n )}\n <div\n className=\"image-resizer image-resizer-n\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north);\n }}\n />\n <div\n className=\"image-resizer image-resizer-ne\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-e\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-se\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.east);\n }}\n />\n <div\n className=\"image-resizer image-resizer-s\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south);\n }}\n />\n <div\n className=\"image-resizer image-resizer-sw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.south | Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-w\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.west);\n }}\n />\n <div\n className=\"image-resizer image-resizer-nw\"\n onPointerDown={event => {\n handlePointerDown(event, Direction.north | Direction.west);\n }}\n />\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import "./Placeholder.css";
|
|
9
9
|
import * as React from "react";
|
|
10
|
-
import { ReactNode } from "react";
|
|
10
|
+
import type { ReactNode } from "react";
|
|
11
11
|
export declare function Placeholder({ children, className, styles }: {
|
|
12
12
|
children: ReactNode;
|
|
13
13
|
className?: string;
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Placeholder = Placeholder;
|
|
9
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
|
-
require("./Placeholder.css");
|
|
11
|
-
var React = _interopRequireWildcard(require("react"));
|
|
12
1
|
/**
|
|
13
2
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
14
3
|
*
|
|
@@ -17,12 +6,17 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
17
6
|
*
|
|
18
7
|
*/
|
|
19
8
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
9
|
+
import "./Placeholder.css";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
export function Placeholder({
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
styles
|
|
15
|
+
}) {
|
|
24
16
|
return /*#__PURE__*/React.createElement("div", {
|
|
25
|
-
style:
|
|
17
|
+
style: {
|
|
18
|
+
...styles
|
|
19
|
+
},
|
|
26
20
|
className: className || "Placeholder__root"
|
|
27
21
|
}, children);
|
|
28
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","Placeholder","children","className","styles","createElement","style"],"sources":["Placeholder.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport \"./Placeholder.css\";\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\n\nexport function Placeholder({\n children,\n className,\n styles\n}: {\n children: ReactNode;\n className?: string;\n styles?: React.CSSProperties;\n}): JSX.Element {\n return (\n <div style={{ ...styles }} className={className || \"Placeholder__root\"}>\n {children}\n </div>\n );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAO,SAASC,WAAWA,CAAC;EACxBC,QAAQ;EACRC,SAAS;EACTC;AAKJ,CAAC,EAAe;EACZ,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,KAAK,EAAE;MAAE,GAAGF;IAAO,CAAE;IAACD,SAAS,EAAEA,SAAS,IAAI;EAAoB,GAClED,QACA,CAAC;AAEd","ignoreList":[]}
|
|
@@ -1,27 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var Context = /*#__PURE__*/(0, _react.createContext)({});
|
|
12
|
-
var SharedHistoryContext = exports.SharedHistoryContext = function SharedHistoryContext(_ref) {
|
|
13
|
-
var children = _ref.children;
|
|
14
|
-
var historyContext = (0, _react.useMemo)(function () {
|
|
15
|
-
return {
|
|
16
|
-
historyState: (0, _history.createEmptyHistoryState)()
|
|
17
|
-
};
|
|
18
|
-
}, []);
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { createContext, useContext, useMemo } from "react";
|
|
3
|
+
import { createEmptyHistoryState } from "@lexical/history";
|
|
4
|
+
const Context = /*#__PURE__*/createContext({});
|
|
5
|
+
export const SharedHistoryContext = ({
|
|
6
|
+
children
|
|
7
|
+
}) => {
|
|
8
|
+
const historyContext = useMemo(() => ({
|
|
9
|
+
historyState: createEmptyHistoryState()
|
|
10
|
+
}), []);
|
|
19
11
|
return /*#__PURE__*/React.createElement(Context.Provider, {
|
|
20
12
|
value: historyContext
|
|
21
13
|
}, children);
|
|
22
14
|
};
|
|
23
|
-
|
|
24
|
-
return
|
|
15
|
+
export const useSharedHistoryContext = () => {
|
|
16
|
+
return useContext(Context);
|
|
25
17
|
};
|
|
26
18
|
|
|
27
19
|
//# sourceMappingURL=SharedHistoryContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useMemo","createEmptyHistoryState","Context","SharedHistoryContext","children","historyContext","historyState","createElement","Provider","value","useSharedHistoryContext"],"sources":["SharedHistoryContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport type { HistoryState } from \"@lexical/history\";\nimport { createEmptyHistoryState } from \"@lexical/history\";\n\ntype ContextShape = {\n historyState?: HistoryState;\n};\n\nconst Context: React.Context<ContextShape> = createContext({});\n\nexport const SharedHistoryContext = ({ children }: { children: ReactNode }): JSX.Element => {\n const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);\n return <Context.Provider value={historyContext}>{children}</Context.Provider>;\n};\n\nexport const useSharedHistoryContext = (): ContextShape => {\n return useContext(Context);\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAE1D,SAASC,uBAAuB,QAAQ,kBAAkB;AAM1D,MAAMC,OAAoC,gBAAGJ,aAAa,CAAC,CAAC,CAAC,CAAC;AAE9D,OAAO,MAAMK,oBAAoB,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAkB;EACxF,MAAMC,cAAc,GAAGL,OAAO,CAAC,OAAO;IAAEM,YAAY,EAAEL,uBAAuB,CAAC;EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;EACvF,oBAAOJ,KAAA,CAAAU,aAAA,CAACL,OAAO,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAe,GAAED,QAA2B,CAAC;AACjF,CAAC;AAED,OAAO,MAAMM,uBAAuB,GAAGA,CAAA,KAAoB;EACvD,OAAOX,UAAU,CAACG,OAAO,CAAC;AAC9B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
const defaultLexicalValue = JSON.stringify({
|
|
2
|
+
root: {
|
|
3
|
+
children: [{
|
|
4
|
+
children: [],
|
|
5
|
+
direction: null,
|
|
6
|
+
format: "",
|
|
7
|
+
indent: 0,
|
|
8
|
+
styles: [],
|
|
9
|
+
type: "wby-paragraph",
|
|
10
|
+
version: 1
|
|
11
|
+
}],
|
|
12
|
+
direction: null,
|
|
13
|
+
format: "",
|
|
14
|
+
indent: 0,
|
|
15
|
+
type: "root",
|
|
16
|
+
version: 1
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* @description Basic JSON data string that will initialize the editor.
|
|
22
|
+
*/
|
|
23
|
+
export const generateInitialLexicalValue = () => {
|
|
24
|
+
return defaultLexicalValue;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
//# sourceMappingURL=generateInitialLexicalValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["defaultLexicalValue","JSON","stringify","root","children","direction","format","indent","styles","type","version","generateInitialLexicalValue"],"sources":["generateInitialLexicalValue.ts"],"sourcesContent":["const defaultLexicalValue = JSON.stringify({\n root: {\n children: [\n {\n children: [],\n direction: null,\n format: \"\",\n indent: 0,\n styles: [],\n type: \"wby-paragraph\",\n version: 1\n }\n ],\n direction: null,\n format: \"\",\n indent: 0,\n type: \"root\",\n version: 1\n }\n});\n\n/**\n * @description Basic JSON data string that will initialize the editor.\n */\nexport const generateInitialLexicalValue = (): string => {\n return defaultLexicalValue;\n};\n"],"mappings":"AAAA,MAAMA,mBAAmB,GAAGC,IAAI,CAACC,SAAS,CAAC;EACvCC,IAAI,EAAE;IACFC,QAAQ,EAAE,CACN;MACIA,QAAQ,EAAE,EAAE;MACZC,SAAS,EAAE,IAAI;MACfC,MAAM,EAAE,EAAE;MACVC,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE,eAAe;MACrBC,OAAO,EAAE;IACb,CAAC,CACJ;IACDL,SAAS,EAAE,IAAI;IACfC,MAAM,EAAE,EAAE;IACVC,MAAM,EAAE,CAAC;IACTE,IAAI,EAAE,MAAM;IACZC,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;;AAEF;AACA;AACA;AACA,OAAO,MAAMC,2BAA2B,GAAGA,CAAA,KAAc;EACrD,OAAOX,mBAAmB;AAC9B,CAAC","ignoreList":[]}
|
package/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type Klass, type LexicalNode, type LexicalNodeReplacement } from "lexical";
|
|
2
2
|
export * from "./FontColorNode";
|
|
3
|
-
export * from "./TypographyNode";
|
|
4
3
|
export * from "./ListNode";
|
|
5
4
|
export * from "./ListItemNode";
|
|
6
5
|
export * from "./HeadingNode";
|
|
@@ -15,9 +14,6 @@ export * from "./utils/formatToHeading";
|
|
|
15
14
|
export * from "./utils/formatToParagraph";
|
|
16
15
|
export * from "./utils/clearNodeFormating";
|
|
17
16
|
export * from "./utils/toggleLink";
|
|
18
|
-
export
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
new (...args: any): any;
|
|
22
|
-
}>(node: InstanceType<T>) => LexicalNode;
|
|
23
|
-
}>;
|
|
17
|
+
export * from "./prepareLexicalState";
|
|
18
|
+
export * from "./generateInitialLexicalValue";
|
|
19
|
+
export declare const allNodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>;
|