@lobehub/editor 1.5.8 → 1.5.10
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/es/plugins/code/node/code.d.ts +1 -0
- package/es/plugins/code/node/code.js +10 -0
- package/es/plugins/mention/command/index.d.ts +1 -1
- package/es/plugins/mention/command/index.js +2 -2
- package/es/plugins/mention/node/MentionNode.d.ts +5 -5
- package/es/plugins/mention/node/MentionNode.js +11 -11
- package/es/plugins/slash/react/ReactSlashPlugin.js +17 -15
- package/es/plugins/slash/service/i-slash-service.d.ts +2 -1
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ export declare class CodeNode extends CardLikeElementNode {
|
|
|
13
13
|
canIndent(): boolean;
|
|
14
14
|
canInsertTextBefore(): boolean;
|
|
15
15
|
canInsertTextAfter(): boolean;
|
|
16
|
+
updateDOM(prevNode: CodeNode, dom: HTMLElement, config: EditorConfig): boolean;
|
|
16
17
|
}
|
|
17
18
|
export declare function $createCodeNode(textContent?: string): CodeNode;
|
|
18
19
|
export declare function $isCodeInlineNode(node: unknown): node is CodeNode;
|
|
@@ -80,6 +80,16 @@ export var CodeNode = /*#__PURE__*/function (_CardLikeElementNode) {
|
|
|
80
80
|
value: function canInsertTextAfter() {
|
|
81
81
|
return true;
|
|
82
82
|
}
|
|
83
|
+
}, {
|
|
84
|
+
key: "updateDOM",
|
|
85
|
+
value: function updateDOM(prevNode, dom, config) {
|
|
86
|
+
// Update the class names if theme has changed
|
|
87
|
+
var prevTheme = prevNode ? prevNode : null;
|
|
88
|
+
if (prevTheme !== this) {
|
|
89
|
+
addClassNamesToElement(dom, config.theme.codeInline);
|
|
90
|
+
}
|
|
91
|
+
return false;
|
|
92
|
+
}
|
|
83
93
|
}], [{
|
|
84
94
|
key: "getType",
|
|
85
95
|
value: function getType() {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LexicalEditor } from 'lexical';
|
|
2
2
|
export declare const INSERT_MENTION_COMMAND: import("lexical").LexicalCommand<{
|
|
3
|
-
extra?: Record<string, unknown> | undefined;
|
|
4
3
|
label: string;
|
|
4
|
+
metadata?: Record<string, unknown> | undefined;
|
|
5
5
|
}>;
|
|
6
6
|
export declare function registerMentionCommand(editor: LexicalEditor): () => void;
|
|
@@ -4,10 +4,10 @@ import { $createMentionNode } from "../node/MentionNode";
|
|
|
4
4
|
export var INSERT_MENTION_COMMAND = createCommand('INSERT_MENTION_COMMAND');
|
|
5
5
|
export function registerMentionCommand(editor) {
|
|
6
6
|
return editor.registerCommand(INSERT_MENTION_COMMAND, function (payload) {
|
|
7
|
-
var
|
|
7
|
+
var metadata = payload.metadata,
|
|
8
8
|
label = payload.label;
|
|
9
9
|
editor.update(function () {
|
|
10
|
-
var mentionNode = $createMentionNode(label,
|
|
10
|
+
var mentionNode = $createMentionNode(label, metadata);
|
|
11
11
|
$insertNodes([mentionNode]); // Insert a zero-width space to ensure the image is not the last child
|
|
12
12
|
if ($isRootOrShadowRoot(mentionNode.getParentOrThrow())) {
|
|
13
13
|
$wrapNodeInElement(mentionNode, $createParagraphNode).selectEnd();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DOMConversionMap, DOMExportOutput, DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, SerializedLexicalNode, Spread } from 'lexical';
|
|
2
2
|
export type SerializedMentionNode = Spread<{
|
|
3
|
-
extra?: Record<string, unknown>;
|
|
4
3
|
label?: string;
|
|
4
|
+
metadata?: Record<string, unknown>;
|
|
5
5
|
}, SerializedLexicalNode>;
|
|
6
6
|
export declare class MentionNode extends DecoratorNode<any> {
|
|
7
7
|
static getType(): string;
|
|
@@ -9,10 +9,10 @@ export declare class MentionNode extends DecoratorNode<any> {
|
|
|
9
9
|
static importJSON(serializedNode: SerializedMentionNode): MentionNode;
|
|
10
10
|
static importDOM(): DOMConversionMap | null;
|
|
11
11
|
__label: string;
|
|
12
|
-
|
|
13
|
-
constructor(label?: string,
|
|
12
|
+
__metadata: Record<string, unknown>;
|
|
13
|
+
constructor(label?: string, metadata?: Record<string, unknown>, key?: string);
|
|
14
14
|
get label(): string;
|
|
15
|
-
get
|
|
15
|
+
get metadata(): Record<string, unknown>;
|
|
16
16
|
exportDOM(): DOMExportOutput;
|
|
17
17
|
createDOM(config: EditorConfig): HTMLElement;
|
|
18
18
|
getTextContent(): string;
|
|
@@ -22,5 +22,5 @@ export declare class MentionNode extends DecoratorNode<any> {
|
|
|
22
22
|
updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedMentionNode>): this;
|
|
23
23
|
decorate(editor: LexicalEditor): any;
|
|
24
24
|
}
|
|
25
|
-
export declare function $createMentionNode(label?: string,
|
|
25
|
+
export declare function $createMentionNode(label?: string, metadata?: Record<string, unknown>): MentionNode;
|
|
26
26
|
export declare function $isMentionNode(node: LexicalNode): node is MentionNode;
|
|
@@ -26,14 +26,14 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
|
|
|
26
26
|
function MentionNode() {
|
|
27
27
|
var _this;
|
|
28
28
|
var label = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
29
|
-
var
|
|
29
|
+
var metadata = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
30
30
|
var key = arguments.length > 2 ? arguments[2] : undefined;
|
|
31
31
|
_classCallCheck(this, MentionNode);
|
|
32
32
|
_this = _super.call(this, key);
|
|
33
33
|
_defineProperty(_assertThisInitialized(_this), "__label", void 0);
|
|
34
|
-
_defineProperty(_assertThisInitialized(_this), "
|
|
34
|
+
_defineProperty(_assertThisInitialized(_this), "__metadata", void 0);
|
|
35
35
|
_this.__label = label;
|
|
36
|
-
_this.
|
|
36
|
+
_this.__metadata = metadata;
|
|
37
37
|
return _this;
|
|
38
38
|
}
|
|
39
39
|
_createClass(MentionNode, [{
|
|
@@ -42,9 +42,9 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
|
|
|
42
42
|
return this.__label;
|
|
43
43
|
}
|
|
44
44
|
}, {
|
|
45
|
-
key: "
|
|
45
|
+
key: "metadata",
|
|
46
46
|
get: function get() {
|
|
47
|
-
return this.
|
|
47
|
+
return this.__metadata;
|
|
48
48
|
}
|
|
49
49
|
}, {
|
|
50
50
|
key: "exportDOM",
|
|
@@ -79,8 +79,8 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
|
|
|
79
79
|
key: "exportJSON",
|
|
80
80
|
value: function exportJSON() {
|
|
81
81
|
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(MentionNode.prototype), "exportJSON", this).call(this)), {}, {
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
label: this.label,
|
|
83
|
+
metadata: this.metadata
|
|
84
84
|
});
|
|
85
85
|
}
|
|
86
86
|
}, {
|
|
@@ -88,7 +88,7 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
|
|
|
88
88
|
value: function updateFromJSON(serializedNode) {
|
|
89
89
|
var node = _get(_getPrototypeOf(MentionNode.prototype), "updateFromJSON", this).call(this, serializedNode);
|
|
90
90
|
this.__label = serializedNode.label || '';
|
|
91
|
-
this.
|
|
91
|
+
this.__metadata = serializedNode.metadata || {};
|
|
92
92
|
return node;
|
|
93
93
|
}
|
|
94
94
|
}, {
|
|
@@ -105,7 +105,7 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
|
|
|
105
105
|
}, {
|
|
106
106
|
key: "clone",
|
|
107
107
|
value: function clone(node) {
|
|
108
|
-
return new MentionNode(node.__label, node.
|
|
108
|
+
return new MentionNode(node.__label, node.__metadata, node.__key);
|
|
109
109
|
}
|
|
110
110
|
}, {
|
|
111
111
|
key: "importJSON",
|
|
@@ -130,8 +130,8 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
|
|
|
130
130
|
}]);
|
|
131
131
|
return MentionNode;
|
|
132
132
|
}(DecoratorNode);
|
|
133
|
-
export function $createMentionNode(label,
|
|
134
|
-
return $applyNodeReplacement(new MentionNode(label,
|
|
133
|
+
export function $createMentionNode(label, metadata) {
|
|
134
|
+
return $applyNodeReplacement(new MentionNode(label, metadata));
|
|
135
135
|
}
|
|
136
136
|
function $convertMentionElement() {
|
|
137
137
|
return {
|
|
@@ -7,7 +7,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
7
7
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
8
8
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
9
9
|
import { mergeRegister } from '@lexical/utils';
|
|
10
|
-
import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND,
|
|
10
|
+
import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
|
|
11
11
|
import { Children, useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
12
12
|
import { useLexicalEditor } from "../../../editor-kernel/react";
|
|
13
13
|
import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context";
|
|
@@ -191,24 +191,26 @@ var ReactSlashPlugin = function ReactSlashPlugin(_ref) {
|
|
|
191
191
|
event.stopImmediatePropagation();
|
|
192
192
|
handleMenuSelect(selectedOption);
|
|
193
193
|
return true;
|
|
194
|
-
}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
}
|
|
198
|
-
var selectedOption = options.find(function (opt) {
|
|
199
|
-
return 'key' in opt && opt.key === activeKey;
|
|
200
|
-
});
|
|
201
|
-
if (!selectedOption) {
|
|
202
|
-
return false;
|
|
203
|
-
}
|
|
204
|
-
if (event !== null) {
|
|
194
|
+
}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_DOWN_COMMAND, function (event) {
|
|
195
|
+
// If slash menu is open and enter key is pressed, always block propagation
|
|
196
|
+
if (isOpen && event.key === 'Enter' && !event.isComposing) {
|
|
205
197
|
event.preventDefault();
|
|
206
198
|
event.stopImmediatePropagation();
|
|
199
|
+
|
|
200
|
+
// Only select option if we have valid options and activeKey
|
|
201
|
+
if (options !== null && activeKey !== null) {
|
|
202
|
+
var selectedOption = options.find(function (opt) {
|
|
203
|
+
return 'key' in opt && opt.key === activeKey;
|
|
204
|
+
});
|
|
205
|
+
if (selectedOption) {
|
|
206
|
+
handleMenuSelect(selectedOption);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
return true;
|
|
207
210
|
}
|
|
208
|
-
|
|
209
|
-
return true;
|
|
211
|
+
return false;
|
|
210
212
|
}, COMMAND_PRIORITY_CRITICAL));
|
|
211
|
-
}, [options, activeKey, handleActiveKeyChange, handleMenuSelect]);
|
|
213
|
+
}, [options, activeKey, handleActiveKeyChange, handleMenuSelect, isOpen]);
|
|
212
214
|
|
|
213
215
|
// Get custom render component if available
|
|
214
216
|
var _ref2 = triggerMapRef.current.get((resolution === null || resolution === void 0 ? void 0 : resolution.trigger) || '') || {},
|
|
@@ -5,7 +5,8 @@ import { getBasicTypeaheadTriggerMatch } from '../utils/utils';
|
|
|
5
5
|
export type ISlashDividerOption = {
|
|
6
6
|
type: 'divider';
|
|
7
7
|
};
|
|
8
|
-
export interface ISlashMenuOption extends DropdownMenuItemType {
|
|
8
|
+
export interface ISlashMenuOption extends Omit<DropdownMenuItemType, 'extra'> {
|
|
9
|
+
metadata?: Record<string, any>;
|
|
9
10
|
onSelect?: (editor: IEditor, matchingString: string) => void;
|
|
10
11
|
}
|
|
11
12
|
export type ISlashOption = ISlashMenuOption | ISlashDividerOption;
|
package/package.json
CHANGED