@selfcommunity/react-ui 0.7.9-alpha.77 → 0.7.9-alpha.79
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/lib/cjs/components/Editor/Editor.js +2 -0
- package/lib/cjs/components/Editor/nodes/ImageNode.js +6 -0
- package/lib/cjs/components/Editor/plugins/ImagePlugin.js +4 -0
- package/lib/cjs/components/Editor/plugins/ToolbarPlugin.js +17 -3
- package/lib/esm/components/Editor/Editor.js +2 -0
- package/lib/esm/components/Editor/nodes/ImageNode.js +6 -0
- package/lib/esm/components/Editor/plugins/ImagePlugin.js +4 -0
- package/lib/esm/components/Editor/plugins/ToolbarPlugin.js +19 -5
- package/lib/umd/311.js +2 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +7 -7
- package/lib/umd/871.js +0 -2
- /package/lib/umd/{871.js.LICENSE.txt → 311.js.LICENSE.txt} +0 -0
|
@@ -135,6 +135,8 @@ const Editor = (inProps, ref) => {
|
|
|
135
135
|
}
|
|
136
136
|
}));
|
|
137
137
|
// RENDER
|
|
138
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
139
|
+
// @ts-ignore
|
|
138
140
|
const initialConfig = (0, react_1.useMemo)(() => ({
|
|
139
141
|
namespace: 'LexicalEditor',
|
|
140
142
|
editable: editable,
|
|
@@ -105,6 +105,8 @@ function convertImageElement(domNode) {
|
|
|
105
105
|
}
|
|
106
106
|
return null;
|
|
107
107
|
}
|
|
108
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
109
|
+
// @ts-ignore
|
|
108
110
|
class ImageNode extends lexical_1.DecoratorNode {
|
|
109
111
|
constructor(src, altText, maxWidth, key) {
|
|
110
112
|
super(key);
|
|
@@ -170,8 +172,12 @@ class ImageNode extends lexical_1.DecoratorNode {
|
|
|
170
172
|
}
|
|
171
173
|
exportJSON() {
|
|
172
174
|
return {
|
|
175
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
176
|
+
// @ts-ignore
|
|
173
177
|
altText: this.getAltText(),
|
|
174
178
|
maxWidth: this.__maxWidth,
|
|
179
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
180
|
+
// @ts-ignore
|
|
175
181
|
src: this.getSrc(),
|
|
176
182
|
type: 'image',
|
|
177
183
|
version: 1
|
|
@@ -79,6 +79,8 @@ const Root = (0, styles_1.styled)(Image, {
|
|
|
79
79
|
function ImagePlugin() {
|
|
80
80
|
const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
|
|
81
81
|
(0, react_1.useEffect)(() => {
|
|
82
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
83
|
+
// @ts-ignore
|
|
82
84
|
if (!editor.hasNodes([ImageNode_1.ImageNode])) {
|
|
83
85
|
return;
|
|
84
86
|
}
|
|
@@ -95,6 +97,8 @@ function ImagePlugin() {
|
|
|
95
97
|
return true;
|
|
96
98
|
}, lexical_1.COMMAND_PRIORITY_EDITOR);
|
|
97
99
|
}, [editor]);
|
|
100
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
101
|
+
// @ts-ignore
|
|
98
102
|
if (!editor.hasNodes([ImageNode_1.ImageNode])) {
|
|
99
103
|
return null;
|
|
100
104
|
}
|
|
@@ -50,7 +50,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
|
|
|
50
50
|
const formatParagraph = () => {
|
|
51
51
|
editor.update(() => {
|
|
52
52
|
const selection = (0, lexical_1.$getSelection)();
|
|
53
|
-
if ((0, lexical_1.$isRangeSelection)(selection) || (0,
|
|
53
|
+
if ((0, lexical_1.$isRangeSelection)(selection) || (0, table_1.$isTableSelection)(selection)) {
|
|
54
54
|
(0, selection_1.$setBlocksType)(selection, () => (0, lexical_1.$createParagraphNode)());
|
|
55
55
|
}
|
|
56
56
|
});
|
|
@@ -59,7 +59,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
|
|
|
59
59
|
if (blockType !== headingSize) {
|
|
60
60
|
editor.update(() => {
|
|
61
61
|
const selection = (0, lexical_1.$getSelection)();
|
|
62
|
-
if ((0, lexical_1.$isRangeSelection)(selection) || (0,
|
|
62
|
+
if ((0, lexical_1.$isRangeSelection)(selection) || (0, table_1.$isTableSelection)(selection)) {
|
|
63
63
|
(0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createHeadingNode)(headingSize));
|
|
64
64
|
}
|
|
65
65
|
});
|
|
@@ -85,7 +85,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
|
|
|
85
85
|
if (blockType !== 'quote') {
|
|
86
86
|
editor.update(() => {
|
|
87
87
|
const selection = (0, lexical_1.$getSelection)();
|
|
88
|
-
if ((0, lexical_1.$isRangeSelection)(selection) || (0,
|
|
88
|
+
if ((0, lexical_1.$isRangeSelection)(selection) || (0, table_1.$isTableSelection)(selection)) {
|
|
89
89
|
(0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createQuoteNode)());
|
|
90
90
|
}
|
|
91
91
|
});
|
|
@@ -169,6 +169,8 @@ function ToolbarPlugin(inProps) {
|
|
|
169
169
|
const elementDOM = activeEditor.getElementByKey(elementKey);
|
|
170
170
|
// Update text format
|
|
171
171
|
setFormats(FORMATS.filter((f) => selection.hasFormat(f)));
|
|
172
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
173
|
+
// @ts-ignore
|
|
172
174
|
setAlignment(ALIGNMENTS.find((a) => element.getFormatType() === a) || ALIGNMENTS[0]);
|
|
173
175
|
// Update links
|
|
174
176
|
const node = (0, editor_1.getSelectedNode)(selection);
|
|
@@ -194,6 +196,8 @@ function ToolbarPlugin(inProps) {
|
|
|
194
196
|
setBlockType(type);
|
|
195
197
|
}
|
|
196
198
|
else {
|
|
199
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
200
|
+
// @ts-ignore
|
|
197
201
|
const type = (0, rich_text_1.$isHeadingNode)(element) ? element.getTag() : element.getType();
|
|
198
202
|
if (type in blockTypeToBlockIcon) {
|
|
199
203
|
setBlockType(type);
|
|
@@ -236,12 +240,22 @@ function ToolbarPlugin(inProps) {
|
|
|
236
240
|
node = node.splitText(anchor.offset)[1] || node;
|
|
237
241
|
}
|
|
238
242
|
if (idx === nodes.length - 1) {
|
|
243
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
244
|
+
// @ts-ignore
|
|
239
245
|
node = node.splitText(focus.offset)[0] || node;
|
|
240
246
|
}
|
|
247
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
248
|
+
// @ts-ignore
|
|
241
249
|
if (node.__style !== '') {
|
|
250
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
251
|
+
// @ts-ignore
|
|
242
252
|
node.setStyle('');
|
|
243
253
|
}
|
|
254
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
255
|
+
// @ts-ignore
|
|
244
256
|
if (node.__format !== 0) {
|
|
257
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
258
|
+
// @ts-ignore
|
|
245
259
|
node.setFormat(0);
|
|
246
260
|
(0, utils_1.$getNearestBlockElementAncestorOrThrow)(node).setFormat('');
|
|
247
261
|
}
|
|
@@ -101,6 +101,8 @@ function convertImageElement(domNode) {
|
|
|
101
101
|
}
|
|
102
102
|
return null;
|
|
103
103
|
}
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
105
|
+
// @ts-ignore
|
|
104
106
|
export class ImageNode extends DecoratorNode {
|
|
105
107
|
constructor(src, altText, maxWidth, key) {
|
|
106
108
|
super(key);
|
|
@@ -166,8 +168,12 @@ export class ImageNode extends DecoratorNode {
|
|
|
166
168
|
}
|
|
167
169
|
exportJSON() {
|
|
168
170
|
return {
|
|
171
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
172
|
+
// @ts-ignore
|
|
169
173
|
altText: this.getAltText(),
|
|
170
174
|
maxWidth: this.__maxWidth,
|
|
175
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
176
|
+
// @ts-ignore
|
|
171
177
|
src: this.getSrc(),
|
|
172
178
|
type: 'image',
|
|
173
179
|
version: 1
|
|
@@ -76,6 +76,8 @@ const Root = styled(Image, {
|
|
|
76
76
|
export default function ImagePlugin() {
|
|
77
77
|
const [editor] = useLexicalComposerContext();
|
|
78
78
|
useEffect(() => {
|
|
79
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
80
|
+
// @ts-ignore
|
|
79
81
|
if (!editor.hasNodes([ImageNode])) {
|
|
80
82
|
return;
|
|
81
83
|
}
|
|
@@ -92,6 +94,8 @@ export default function ImagePlugin() {
|
|
|
92
94
|
return true;
|
|
93
95
|
}, COMMAND_PRIORITY_EDITOR);
|
|
94
96
|
}, [editor]);
|
|
97
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
98
|
+
// @ts-ignore
|
|
95
99
|
if (!editor.hasNodes([ImageNode])) {
|
|
96
100
|
return null;
|
|
97
101
|
}
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, COMMAND_PRIORITY_CRITICAL,
|
|
8
|
+
import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, COMMAND_PRIORITY_CRITICAL, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical';
|
|
9
9
|
import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
|
|
10
10
|
import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND } from '@lexical/list';
|
|
11
11
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
12
12
|
import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
|
|
13
13
|
import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
|
|
14
14
|
import { $setBlocksType } from '@lexical/selection';
|
|
15
|
-
import { $isTableNode } from '@lexical/table';
|
|
15
|
+
import { $isTableNode, $isTableSelection } from '@lexical/table';
|
|
16
16
|
import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
|
|
17
17
|
import * as React from 'react';
|
|
18
18
|
import { useCallback, useEffect, useState } from 'react';
|
|
@@ -47,7 +47,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
|
|
|
47
47
|
const formatParagraph = () => {
|
|
48
48
|
editor.update(() => {
|
|
49
49
|
const selection = $getSelection();
|
|
50
|
-
if ($isRangeSelection(selection) ||
|
|
50
|
+
if ($isRangeSelection(selection) || $isTableSelection(selection)) {
|
|
51
51
|
$setBlocksType(selection, () => $createParagraphNode());
|
|
52
52
|
}
|
|
53
53
|
});
|
|
@@ -56,7 +56,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
|
|
|
56
56
|
if (blockType !== headingSize) {
|
|
57
57
|
editor.update(() => {
|
|
58
58
|
const selection = $getSelection();
|
|
59
|
-
if ($isRangeSelection(selection) ||
|
|
59
|
+
if ($isRangeSelection(selection) || $isTableSelection(selection)) {
|
|
60
60
|
$setBlocksType(selection, () => $createHeadingNode(headingSize));
|
|
61
61
|
}
|
|
62
62
|
});
|
|
@@ -82,7 +82,7 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
|
|
|
82
82
|
if (blockType !== 'quote') {
|
|
83
83
|
editor.update(() => {
|
|
84
84
|
const selection = $getSelection();
|
|
85
|
-
if ($isRangeSelection(selection) ||
|
|
85
|
+
if ($isRangeSelection(selection) || $isTableSelection(selection)) {
|
|
86
86
|
$setBlocksType(selection, () => $createQuoteNode());
|
|
87
87
|
}
|
|
88
88
|
});
|
|
@@ -166,6 +166,8 @@ export default function ToolbarPlugin(inProps) {
|
|
|
166
166
|
const elementDOM = activeEditor.getElementByKey(elementKey);
|
|
167
167
|
// Update text format
|
|
168
168
|
setFormats(FORMATS.filter((f) => selection.hasFormat(f)));
|
|
169
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
170
|
+
// @ts-ignore
|
|
169
171
|
setAlignment(ALIGNMENTS.find((a) => element.getFormatType() === a) || ALIGNMENTS[0]);
|
|
170
172
|
// Update links
|
|
171
173
|
const node = getSelectedNode(selection);
|
|
@@ -191,6 +193,8 @@ export default function ToolbarPlugin(inProps) {
|
|
|
191
193
|
setBlockType(type);
|
|
192
194
|
}
|
|
193
195
|
else {
|
|
196
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
197
|
+
// @ts-ignore
|
|
194
198
|
const type = $isHeadingNode(element) ? element.getTag() : element.getType();
|
|
195
199
|
if (type in blockTypeToBlockIcon) {
|
|
196
200
|
setBlockType(type);
|
|
@@ -233,12 +237,22 @@ export default function ToolbarPlugin(inProps) {
|
|
|
233
237
|
node = node.splitText(anchor.offset)[1] || node;
|
|
234
238
|
}
|
|
235
239
|
if (idx === nodes.length - 1) {
|
|
240
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
241
|
+
// @ts-ignore
|
|
236
242
|
node = node.splitText(focus.offset)[0] || node;
|
|
237
243
|
}
|
|
244
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
245
|
+
// @ts-ignore
|
|
238
246
|
if (node.__style !== '') {
|
|
247
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
248
|
+
// @ts-ignore
|
|
239
249
|
node.setStyle('');
|
|
240
250
|
}
|
|
251
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
252
|
+
// @ts-ignore
|
|
241
253
|
if (node.__format !== 0) {
|
|
254
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
255
|
+
// @ts-ignore
|
|
242
256
|
node.setFormat(0);
|
|
243
257
|
$getNearestBlockElementAncestorOrThrow(node).setFormat('');
|
|
244
258
|
}
|