opensource/lexical
1
0
Fork 0
mirror of https://github.com/facebook/lexical.git synced 2025-05-17 15:18:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix Lexical typed commands (#1598)

Browse Source 
* Fix Lexical typed commands

More clean ups

* Update codes
This commit is contained in:
Dominic Gannaway
2022-04-04 15:48:16 +00:00
committed by acywatson
parent b51435d21a
commit ac9dd0192e
40 changed files with 361 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@ -27821,10 +27821,12 @@
}
},
"packages/lexical-markdown": {
"name": "@lexical/markdown",
"version": "0.1.16",
"license": "MIT",
"dependencies": {
"@lexical/code": "0.1.16",
"@lexical/link": "0.1.16",
"@lexical/list": "0.1.16",
"@lexical/rich-text": "0.1.16",
"@lexical/text": "0.1.16",
@ -31107,6 +31109,7 @@
"version": "file:packages/lexical-markdown",
"requires": {
"@lexical/code": "0.1.16",
"@lexical/link": "0.1.16",
"@lexical/list": "0.1.16",
"@lexical/rich-text": "0.1.16",
"@lexical/text": "0.1.16",

3
packages/lexical-link/LexicalLink.d.ts vendored
View File

@ -13,6 +13,7 @@ import type {
LexicalNode,
NodeKey,
RangeSelection,
LexicalCommand,
} from 'lexical';
export declare class LinkNode extends ElementNode {
@ -45,3 +46,5 @@ export declare class AutoLinkNode extends LinkNode {
}
export function $createAutoLinkNode(url: string): AutoLinkNode;
export function $isAutoLinkNode(node: ?LexicalNode): boolean;
export var TOGGLE_LINK_COMMAND: LexicalCommand<string | null>;

3
packages/lexical-link/flow/LexicalLink.js.flow
View File

@ -12,6 +12,7 @@ import type {
LexicalNode,
NodeKey,
RangeSelection,
LexicalCommand,
} from 'lexical';
import {addClassNamesToElement} from '@lexical/utils';
import {$isElementNode, ElementNode} from 'lexical';
@ -49,3 +50,5 @@ declare export function $createAutoLinkNode(url: string): AutoLinkNode;
declare export function $isAutoLinkNode(
node: ?LexicalNode,
): boolean %checks(node instanceof AutoLinkNode);
declare export var TOGGLE_LINK_COMMAND: LexicalCommand<string | null>;

6
packages/lexical-link/src/index.js
View File

@ -11,13 +11,14 @@ import type {
DOMConversionMap,
DOMConversionOutput,
EditorConfig,
LexicalCommand,
LexicalNode,
NodeKey,
RangeSelection,
} from 'lexical';
import {addClassNamesToElement} from '@lexical/utils';
import {$isElementNode, ElementNode} from 'lexical';
import {$isElementNode, createCommand, ElementNode} from 'lexical';
export class LinkNode extends ElementNode {
__url: string;
@ -148,3 +149,6 @@ export function $createAutoLinkNode(url: string): AutoLinkNode {
export function $isAutoLinkNode(node: ?LexicalNode): boolean %checks {
return node instanceof AutoLinkNode;
}
export const TOGGLE_LINK_COMMAND: LexicalCommand<string | null> =
createCommand();

5
packages/lexical-list/LexicalList.d.ts vendored
View File

@ -13,6 +13,7 @@ import {
LexicalEditor,
ParagraphNode,
RangeSelection,
LexicalCommand,
} from 'lexical';
export function $createListItemNode(): ListItemNode;
@ -43,3 +44,7 @@ export declare class ListNode extends ElementNode {
}
export function outdentList(): boolean;
export function removeList(editor: LexicalEditor): boolean;
export var INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<void>;
export var INSERT_ORDERED_LIST_COMMAND: LexicalCommand<void>;
export var REMOVE_LIST_COMMAND: LexicalCommand<void>;

5
packages/lexical-list/flow/LexicalList.js.flow
View File

@ -12,6 +12,7 @@ import type {
LexicalEditor,
ParagraphNode,
RangeSelection,
LexicalCommand,
} from 'lexical';
import {ElementNode} from 'lexical';
@ -57,3 +58,7 @@ declare export class ListNode extends ElementNode {
}
declare export function outdentList(): boolean;
declare export function removeList(editor: LexicalEditor): boolean;
declare export var INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<void>;
declare export var INSERT_ORDERED_LIST_COMMAND: LexicalCommand<void>;
declare export var REMOVE_LIST_COMMAND: LexicalCommand<void>;

10
packages/lexical-list/src/index.js
View File

@ -7,6 +7,10 @@
* @flow strict
*/
import type {LexicalCommand} from 'lexical';
import {createCommand} from 'lexical';
import {
$handleListInsertParagraph,
indentList,
@ -36,3 +40,9 @@ export {
outdentList,
removeList,
};
export const INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<void> =
createCommand();
export const INSERT_ORDERED_LIST_COMMAND: LexicalCommand<void> =
createCommand();
export const REMOVE_LIST_COMMAND: LexicalCommand<void> = createCommand();

3
packages/lexical-markdown/package.json
View File

@ -18,7 +18,8 @@
"@lexical/code": "0.1.16",
"@lexical/text": "0.1.16",
"@lexical/rich-text": "0.1.16",
"@lexical/list": "0.1.16"
"@lexical/list": "0.1.16",
"@lexical/link": "0.1.16"
},
"repository": {
"type": "git",

2
packages/lexical-markdown/src/utils.js
View File

@ -18,6 +18,7 @@ import type {
} from 'lexical';
import {$createCodeNode} from '@lexical/code';
import {TOGGLE_LINK_COMMAND} from '@lexical/link';
import {$createListItemNode, $createListNode} from '@lexical/list';
import {$createHeadingNode, $createQuoteNode} from '@lexical/rich-text';
import {
@ -31,7 +32,6 @@ import {
$isElementNode,
$isRangeSelection,
$setSelection,
TOGGLE_LINK_COMMAND,
} from 'lexical';
import invariant from 'shared/invariant';

123
packages/lexical-plain-text/src/index.js
View File

@ -30,21 +30,14 @@ import {
DELETE_WORD_COMMAND,
DRAGSTART_COMMAND,
DROP_COMMAND,
FORMAT_ELEMENT_COMMAND,
FORMAT_TEXT_COMMAND,
INDENT_CONTENT_COMMAND,
INSERT_HORIZONTAL_RULE_COMMAND,
INSERT_IMAGE_COMMAND,
INSERT_LINE_BREAK_COMMAND,
INSERT_PARAGRAPH_COMMAND,
INSERT_TABLE_COMMAND,
INSERT_TEXT_COMMAND,
KEY_ARROW_LEFT_COMMAND,
KEY_ARROW_RIGHT_COMMAND,
KEY_BACKSPACE_COMMAND,
KEY_DELETE_COMMAND,
KEY_ENTER_COMMAND,
OUTDENT_CONTENT_COMMAND,
PASTE_COMMAND,
REMOVE_TEXT_COMMAND,
} from 'lexical';
@ -154,12 +147,11 @@ export function registerPlainText(
const removeListener = mergeRegister(
editor.registerCommand(
DELETE_CHARACTER_COMMAND,
(payload) => {
(isBackward: boolean) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const isBackward: boolean = payload;
selection.deleteCharacter(isBackward);
return true;
},
@ -167,12 +159,11 @@ export function registerPlainText(
),
editor.registerCommand(
DELETE_WORD_COMMAND,
(payload) => {
(isBackward: boolean) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const isBackward: boolean = payload;
selection.deleteWord(isBackward);
return true;
},
@ -180,12 +171,11 @@ export function registerPlainText(
),
editor.registerCommand(
DELETE_LINE_COMMAND,
(payload) => {
(isBackward: boolean) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const isBackward: boolean = payload;
selection.deleteLine(isBackward);
return true;
},
@ -193,12 +183,11 @@ export function registerPlainText(
),
editor.registerCommand(
INSERT_TEXT_COMMAND,
(payload) => {
(eventOrText: InputEvent | string) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const eventOrText: InputEvent | string = payload;
if (typeof eventOrText === 'string') {
selection.insertText(eventOrText);
} else {
@ -230,12 +219,11 @@ export function registerPlainText(
),
editor.registerCommand(
INSERT_LINE_BREAK_COMMAND,
(payload) => {
(selectStart: boolean) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const selectStart: boolean = payload;
selection.insertLineBreak(selectStart);
return true;
},
@ -253,83 +241,6 @@ export function registerPlainText(
},
0,
),
editor.registerCommand(
INDENT_CONTENT_COMMAND,
(payload) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
return true;
},
0,
),
editor.registerCommand(
OUTDENT_CONTENT_COMMAND,
(payload) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
return true;
},
0,
),
editor.registerCommand(
INSERT_HORIZONTAL_RULE_COMMAND,
(payload) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
return true;
},
0,
),
editor.registerCommand(
INSERT_IMAGE_COMMAND,
(payload) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
return true;
},
0,
),
editor.registerCommand(
INSERT_TABLE_COMMAND,
(payload) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
return true;
},
0,
),
editor.registerCommand(
FORMAT_ELEMENT_COMMAND,
(payload) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
return true;
},
0,
),
editor.registerCommand(
FORMAT_TEXT_COMMAND,
(payload) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
return true;
},
0,
),
editor.registerCommand(
KEY_ARROW_LEFT_COMMAND,
(payload) => {
@ -368,12 +279,11 @@ export function registerPlainText(
),
editor.registerCommand(
KEY_BACKSPACE_COMMAND,
(payload) => {
(event: KeyboardEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const event: KeyboardEvent = payload;
event.preventDefault();
return editor.dispatchCommand(DELETE_CHARACTER_COMMAND, true);
},
@ -381,12 +291,11 @@ export function registerPlainText(
),
editor.registerCommand(
KEY_DELETE_COMMAND,
(payload) => {
(event: KeyboardEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const event: KeyboardEvent = payload;
event.preventDefault();
return editor.dispatchCommand(DELETE_CHARACTER_COMMAND, false);
},
@ -394,12 +303,11 @@ export function registerPlainText(
),
editor.registerCommand(
KEY_ENTER_COMMAND,
(payload) => {
(event: KeyboardEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const event: KeyboardEvent = payload;
event.preventDefault();
return editor.dispatchCommand(INSERT_LINE_BREAK_COMMAND);
},
@ -407,12 +315,11 @@ export function registerPlainText(
),
editor.registerCommand(
COPY_COMMAND,
(payload) => {
(event: ClipboardEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const event: ClipboardEvent = payload;
onCopyForPlainText(event, editor);
return true;
},
@ -420,12 +327,11 @@ export function registerPlainText(
),
editor.registerCommand(
CUT_COMMAND,
(payload) => {
(event: ClipboardEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const event: ClipboardEvent = payload;
onCutForPlainText(event, editor);
return true;
},
@ -433,12 +339,11 @@ export function registerPlainText(
),
editor.registerCommand(
PASTE_COMMAND,
(payload) => {
(event: ClipboardEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const event: ClipboardEvent = payload;
onPasteForPlainText(event, editor);
return true;
},
@ -446,13 +351,12 @@ export function registerPlainText(
),
editor.registerCommand(
DROP_COMMAND,
(payload) => {
(event: DragEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
// TODO: Make drag and drop work at some point.
const event: DragEvent = payload;
event.preventDefault();
return true;
},
@ -460,13 +364,12 @@ export function registerPlainText(
),
editor.registerCommand(
DRAGSTART_COMMAND,
(payload) => {
(event: DragEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
// TODO: Make drag and drop work at some point.
const event: DragEvent = payload;
event.preventDefault();
return true;
},

33
packages/lexical-playground/src/plugins/ActionsPlugin.jsx
View File

@ -14,19 +14,16 @@ import {$convertFromMarkdownString} from '@lexical/markdown';
import {useCollaborationContext} from '@lexical/react/LexicalCollaborationPlugin';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {mergeRegister} from '@lexical/utils';
import {
$getRoot,
CLEAR_EDITOR_COMMAND,
CONNECTED_COMMAND,
READ_ONLY_COMMAND,
SPEECT_TO_TEXT_COMMAND,
TOGGLE_CONNECT_COMMAND,
} from 'lexical';
import {CONNECTED_COMMAND, TOGGLE_CONNECT_COMMAND} from '@lexical/yjs';
import {$getRoot, CLEAR_EDITOR_COMMAND, READ_ONLY_COMMAND} from 'lexical';
import * as React from 'react';
import {useCallback, useEffect, useState} from 'react';
import {$createStickyNode} from '../nodes/StickyNode';
import {SUPPORT_SPEECH_RECOGNITION} from './SpeechToTextPlugin';
import {
SPEECT_TO_TEXT_COMMAND,
SUPPORT_SPEECH_RECOGNITION,
} from './SpeechToTextPlugin';
const EditorPriority: CommandListenerEditorPriority = 0;
@ -90,15 +87,13 @@ export default function ActionsPlugins({
className={
'action-button action-button-mic ' +
(isSpeechToText ? 'active' : '')
}
>
}>
<i className="mic" />
</button>
)}
<button
className="action-button import"
onClick={() => importFile(editor)}
>
onClick={() => importFile(editor)}>
<i className="import" />
</button>
<button
@ -108,8 +103,7 @@ export default function ActionsPlugins({
fileName: `Playground ${new Date().toISOString()}`,
source: 'Playground',
})
}
>
}>
<i className="export" />
</button>
<button className="action-button sticky" onClick={insertSticky}>
@ -120,16 +114,14 @@ export default function ActionsPlugins({
onClick={() => {
editor.dispatchCommand(CLEAR_EDITOR_COMMAND);
editor.focus();
}}
>
}}>
<i className="clear" />
</button>
<button
className="action-button lock"
onClick={() => {
editor.setReadOnly(!editor.isReadOnly());
}}
>
}}>
<i className={isReadOnly ? 'unlock' : 'lock'} />
</button>
<button className="action-button" onClick={convertFromMarkdown}>
@ -140,8 +132,7 @@ export default function ActionsPlugins({
className="action-button connect"
onClick={() => {
editor.dispatchCommand(TOGGLE_CONNECT_COMMAND, !connected);
}}
>
}}>
<i className={connected ? 'disconnect' : 'connect'} />
</button>
)}

21
packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.jsx
View File

@ -9,7 +9,7 @@
import type {ElementNode, LexicalEditor, RangeSelection} from 'lexical';
import {$isLinkNode} from '@lexical/link';
import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {$isAtNodeEnd} from '@lexical/selection';
import {mergeRegister} from '@lexical/utils';
@ -20,7 +20,6 @@ import {
FORMAT_TEXT_COMMAND,
SELECTION_CHANGE_COMMAND,
TextNode,
TOGGLE_LINK_COMMAND,
} from 'lexical';
import React, {useCallback, useEffect, useRef, useState} from 'react';
// $FlowFixMe
@ -129,8 +128,7 @@ function FloatingCharacterStylesEditor({
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
}}
className={'popup-item spaced ' + (isBold ? 'active' : '')}
aria-label="Format Bold"
>
aria-label="Format Bold">
<i className="format bold" />
</button>
<button
@ -138,8 +136,7 @@ function FloatingCharacterStylesEditor({
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
}}
className={'popup-item spaced ' + (isItalic ? 'active' : '')}
aria-label="Format Italics"
>
aria-label="Format Italics">
<i className="format italic" />
</button>
<button
@ -147,8 +144,7 @@ function FloatingCharacterStylesEditor({
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
}}
className={'popup-item spaced ' + (isUnderline ? 'active' : '')}
aria-label="Format Underline"
>
aria-label="Format Underline">
<i className="format underline" />
</button>
<button
@ -156,8 +152,7 @@ function FloatingCharacterStylesEditor({
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
}}
className={'popup-item spaced ' + (isStrikethrough ? 'active' : '')}
aria-label="Format Strikethrough"
>
aria-label="Format Strikethrough">
<i className="format strikethrough" />
</button>
<button
@ -165,15 +160,13 @@ function FloatingCharacterStylesEditor({
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
}}
className={'popup-item spaced ' + (isCode ? 'active' : '')}
aria-label="Insert Code"
>
aria-label="Insert Code">
<i className="format code" />
</button>
<button
onClick={insertLink}
className={'popup-item spaced ' + (isLink ? 'active' : '')}
aria-label="Insert Link"
>
aria-label="Insert Link">
<i className="format link" />
</button>
</div>

13
packages/lexical-playground/src/plugins/EquationsPlugin.js
View File

@ -7,23 +7,24 @@
* @flow strict
*/
import type {CommandListenerEditorPriority} from 'lexical';
import type {CommandListenerEditorPriority, LexicalCommand} from 'lexical';
// $FlowFixMe
import 'katex/dist/katex.css';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {
$getSelection,
$isRangeSelection,
INSERT_EQUATION_COMMAND,
} from 'lexical';
import {$getSelection, $isRangeSelection, createCommand} from 'lexical';
import {useEffect} from 'react';
import {$createEquationNode, EquationNode} from '../nodes/EquationNode';
const EditorPriority: CommandListenerEditorPriority = 0;
export const INSERT_EQUATION_COMMAND: LexicalCommand<{
equation: string,
inline: boolean,
}> = createCommand();
export default function EquationsPlugin(): React$Node {
const [editor] = useLexicalComposerContext();

6
packages/lexical-playground/src/plugins/ExcalidrawPlugin.js
View File

@ -7,16 +7,18 @@
* @flow strict
*/
import type {CommandListenerEditorPriority} from 'lexical';
import type {CommandListenerEditorPriority, LexicalCommand} from 'lexical';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {$getSelection, $isRangeSelection,INSERT_EXCALIDRAW_COMMAND} from 'lexical';
import {$getSelection, $isRangeSelection, createCommand} from 'lexical';
import {useEffect} from 'react';
import {$createExcalidrawNode, ExcalidrawNode} from '../nodes/ExcalidrawNode';
const EditorPriority: CommandListenerEditorPriority = 0;
export const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void> = createCommand();
export default function ExcalidrawPlugin(): React$Node {
const [editor] = useLexicalComposerContext();

7
packages/lexical-playground/src/plugins/HorizontalRulePlugin.js
View File

@ -10,12 +10,11 @@
import type {CommandListenerEditorPriority} from 'lexical';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {$createHorizontalRuleNode} from '@lexical/react/LexicalHorizontalRuleNode';
import {
$getSelection,
$isRangeSelection,
$createHorizontalRuleNode,
INSERT_HORIZONTAL_RULE_COMMAND,
} from 'lexical';
} from '@lexical/react/LexicalHorizontalRuleNode';
import {$getSelection, $isRangeSelection} from 'lexical';
import {useEffect} from 'react';
const EditorPriority: CommandListenerEditorPriority = 0;

6
packages/lexical-playground/src/plugins/ImagesPlugin.js
View File

@ -7,14 +7,14 @@
* @flow strict
*/
import type {CommandListenerEditorPriority} from 'lexical';
import type {CommandListenerEditorPriority, LexicalCommand} from 'lexical';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {
$getSelection,
$isRangeSelection,
$isRootNode,
INSERT_IMAGE_COMMAND,
createCommand,
} from 'lexical';
import {useEffect} from 'react';
@ -23,6 +23,8 @@ import {$createImageNode, ImageNode} from '../nodes/ImageNode';
const EditorPriority: CommandListenerEditorPriority = 0;
export const INSERT_IMAGE_COMMAND: LexicalCommand<void> = createCommand();
export default function ImagesPlugin(): React$Node {
const [editor] = useLexicalComposerContext();

6
packages/lexical-playground/src/plugins/PollPlugin.js
View File

@ -7,14 +7,14 @@
* @flow strict
*/
import type {CommandListenerEditorPriority} from 'lexical';
import type {CommandListenerEditorPriority, LexicalCommand} from 'lexical';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {
$getSelection,
$isRangeSelection,
$isRootNode,
INSERT_POLL_COMMAND,
createCommand,
} from 'lexical';
import {useEffect} from 'react';
@ -22,6 +22,8 @@ import {$createPollNode, PollNode} from '../nodes/PollNode';
const EditorPriority: CommandListenerEditorPriority = 0;
export const INSERT_POLL_COMMAND: LexicalCommand<string> = createCommand();
export default function PollPlugin(): React$Node {
const [editor] = useLexicalComposerContext();
useEffect(() => {

9
packages/lexical-playground/src/plugins/SpeechToTextPlugin.js
View File

@ -9,6 +9,7 @@
import type {
CommandListenerEditorPriority,
LexicalCommand,
LexicalEditor,
RangeSelection,
} from 'lexical';
@ -17,8 +18,8 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {
$getSelection,
$isRangeSelection,
createCommand,
REDO_COMMAND,
SPEECT_TO_TEXT_COMMAND,
UNDO_COMMAND,
} from 'lexical';
import {useEffect, useRef, useState} from 'react';
@ -27,6 +28,8 @@ import useReport from '../hooks/useReport';
const EditorPriority: CommandListenerEditorPriority = 0;
export const SPEECT_TO_TEXT_COMMAND: LexicalCommand<boolean> = createCommand();
const VOICE_COMMANDS: $ReadOnly<{
[string]: ({editor: LexicalEditor, selection: RangeSelection}) => void,
}> = {
@ -103,8 +106,8 @@ function SpeechToTextPlugin(): null {
useEffect(() => {
return editor.registerCommand(
SPEECT_TO_TEXT_COMMAND,
(payload: boolean) => {
setIsEnabled(payload);
(_isEnabled: boolean) => {
setIsEnabled(_isEnabled);
return true;
},
EditorPriority,

97
packages/lexical-playground/src/plugins/ToolbarPlugin.jsx
View File

@ -19,9 +19,16 @@ import {
getCodeLanguages,
getDefaultCodeLanguage,
} from '@lexical/code';
import {$isLinkNode} from '@lexical/link';
import {$isListNode, ListNode} from '@lexical/list';
import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
import {
$isListNode,
INSERT_ORDERED_LIST_COMMAND,
INSERT_UNORDERED_LIST_COMMAND,
ListNode,
REMOVE_LIST_COMMAND,
} from '@lexical/list';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {INSERT_HORIZONTAL_RULE_COMMAND} from '@lexical/react/LexicalHorizontalRuleNode';
import {
$createHeadingNode,
$createQuoteNode,
@ -34,6 +41,7 @@ import {
$patchStyleText,
$wrapLeafNodesInElements,
} from '@lexical/selection';
import {INSERT_TABLE_COMMAND} from '@lexical/table';
import {$getNearestNodeOfType, mergeRegister} from '@lexical/utils';
import {
$createParagraphNode,
@ -46,21 +54,10 @@ import {
FORMAT_ELEMENT_COMMAND,
FORMAT_TEXT_COMMAND,
INDENT_CONTENT_COMMAND,
INSERT_EQUATION_COMMAND,
INSERT_EXCALIDRAW_COMMAND,
INSERT_HORIZONTAL_RULE_COMMAND,
INSERT_IMAGE_COMMAND,
INSERT_ORDERED_LIST_COMMAND,
INSERT_POLL_COMMAND,
INSERT_TABLE_COMMAND,
INSERT_TWEET_COMMAND,
INSERT_UNORDERED_LIST_COMMAND,
OUTDENT_CONTENT_COMMAND,
REDO_COMMAND,
REMOVE_LIST_COMMAND,
SELECTION_CHANGE_COMMAND,
TextNode,
TOGGLE_LINK_COMMAND,
UNDO_COMMAND,
} from 'lexical';
import * as React from 'react';
@ -73,6 +70,11 @@ import Button from '../ui/Button';
import Input from '../ui/Input';
import KatexEquationAlterer from '../ui/KatexEquationAlterer';
import LinkPreview from '../ui/LinkPreview';
import {INSERT_EQUATION_COMMAND} from './EquationsPlugin';
import {INSERT_EXCALIDRAW_COMMAND} from './ExcalidrawPlugin';
import {INSERT_IMAGE_COMMAND} from './ImagesPlugin';
import {INSERT_POLL_COMMAND} from './PollPlugin';
import {INSERT_TWEET_COMMAND} from './TwitterPlugin';
const LowPriority: CommandListenerLowPriority = 1;
@ -285,8 +287,7 @@ function InsertTableDialog({
<Input label="No of columns" onChange={setColumns} value={columns} />
<div
className="ToolbarPlugin__dialogActions"
data-test-id="table-model-confirm-insert"
>
data-test-id="table-model-confirm-insert">
<Button onClick={onClick}>Confirm</Button>
</div>
</>
@ -738,8 +739,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(UNDO_COMMAND);
}}
className="toolbar-item spaced"
aria-label="Undo"
>
aria-label="Undo">
<i className="format undo" />
</button>
<button
@ -748,8 +748,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(REDO_COMMAND);
}}
className="toolbar-item"
aria-label="Redo"
>
aria-label="Redo">
<i className="format redo" />
</button>
<Divider />
@ -760,8 +759,7 @@ export default function ToolbarPlugin(): React$Node {
onClick={() =>
setShowBlockOptionsDropDown(!showBlockOptionsDropDown)
}
aria-label="Formatting Options"
>
aria-label="Formatting Options">
<span className={'icon block-type ' + blockType} />
<span className="text">{blockTypeToBlockName[blockType]}</span>
<i className="chevron-down" />
@ -834,8 +832,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
}}
className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
aria-label="Format Bold"
>
aria-label="Format Bold">
<i className="format bold" />
</button>
<button
@ -843,8 +840,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
}}
className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
aria-label="Format Italics"
>
aria-label="Format Italics">
<i className="format italic" />
</button>
<button
@ -852,8 +848,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
}}
className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
aria-label="Format Underline"
>
aria-label="Format Underline">
<i className="format underline" />
</button>
<button
@ -866,8 +861,7 @@ export default function ToolbarPlugin(): React$Node {
className={
'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')
}
aria-label="Format Strikethrough"
>
aria-label="Format Strikethrough">
<i className="format strikethrough" />
</button>
<button
@ -875,15 +869,13 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
}}
className={'toolbar-item spaced ' + (isCode ? 'active' : '')}
aria-label="Insert Code"
>
aria-label="Insert Code">
<i className="format code" />
</button>
<button
onClick={insertLink}
className={'toolbar-item spaced ' + (isLink ? 'active' : '')}
aria-label="Insert Link"
>
aria-label="Insert Link">
<i className="format link" />
</button>
{isLink &&
@ -896,8 +888,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND);
}}
className="toolbar-item spaced"
aria-label="Insert Horizontal Rule"
>
aria-label="Insert Horizontal Rule">
<i className="format horizontal-rule" />
</button>
<button
@ -905,8 +896,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND);
}}
className="toolbar-item spaced"
aria-label="Insert Image"
>
aria-label="Insert Image">
<i className="format image" />
</button>
<button
@ -914,8 +904,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND);
}}
className="toolbar-item spaced"
aria-label="Insert Excalidraw"
>
aria-label="Insert Excalidraw">
<i className="format diagram-2" />
</button>
<button
@ -928,8 +917,7 @@ export default function ToolbarPlugin(): React$Node {
));
}}
className="toolbar-item"
aria-label="Insert Table"
>
aria-label="Insert Table">
<i className="format table" />
</button>
<button
@ -942,8 +930,7 @@ export default function ToolbarPlugin(): React$Node {
));
}}
className="toolbar-item"
aria-label="Insert Poll"
>
aria-label="Insert Poll">
<i className="format poll" />
</button>
<button
@ -956,8 +943,7 @@ export default function ToolbarPlugin(): React$Node {
));
}}
className="toolbar-item"
aria-label="Insert tweet"
>
aria-label="Insert tweet">
<i className="format tweet" />
</button>
<button
@ -970,8 +956,7 @@ export default function ToolbarPlugin(): React$Node {
));
}}
className="toolbar-item"
aria-label="Insert Equation"
>
aria-label="Insert Equation">
<i className="format equation" />
</button>
</>
@ -983,8 +968,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
}}
className="toolbar-item spaced"
aria-label="Left Align"
>
aria-label="Left Align">
<i className="format left-align" />
</button>
<button
@ -992,8 +976,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
}}
className="toolbar-item spaced"
aria-label="Center Align"
>
aria-label="Center Align">
<i className="format center-align" />
</button>
<button
@ -1001,8 +984,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
}}
className="toolbar-item spaced"
aria-label="Right Align"
>
aria-label="Right Align">
<i className="format right-align" />
</button>
<button
@ -1010,8 +992,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
}}
className="toolbar-item"
aria-label="Justify Align"
>
aria-label="Justify Align">
<i className="format justify-align" />
</button>
<Divider />
@ -1020,8 +1001,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND);
}}
className="toolbar-item spaced"
aria-label="Outdent"
>
aria-label="Outdent">
<i className={'format ' + (isRTL ? 'indent' : 'outdent')} />
</button>
<button
@ -1029,8 +1009,7 @@ export default function ToolbarPlugin(): React$Node {
activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND);
}}
className="toolbar-item"
aria-label="Indent"
>
aria-label="Indent">
<i className={'format ' + (isRTL ? 'outdent' : 'indent')} />
</button>
{modal}

6
packages/lexical-playground/src/plugins/TwitterPlugin.js
View File

@ -7,14 +7,14 @@
* @flow strict
*/
import type {CommandListenerEditorPriority} from 'lexical';
import type {CommandListenerEditorPriority, LexicalCommand} from 'lexical';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {
$createParagraphNode,
$getSelection,
$isRangeSelection,
INSERT_TWEET_COMMAND,
createCommand,
} from 'lexical';
import {useEffect} from 'react';
@ -22,6 +22,8 @@ import {$createTweetNode, TweetNode} from '../nodes/TweetNode.jsx';
const EditorPriority: CommandListenerEditorPriority = 0;
export const INSERT_TWEET_COMMAND: LexicalCommand<string> = createCommand();
export default function TwitterPlugin(): React$Node {
const [editor] = useLexicalComposerContext();

2
packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
View File

@ -100,7 +100,7 @@
.PlaygroundEditorTheme__tableCell {
border: 1px solid black;
padding: 8px;
height: 40px;
height: 20px;
min-width: 75px;
vertical-align: top;
text-align: start;

4
packages/lexical-react/LexicalHorizontalRuleNode.d.ts vendored
View File

@ -6,7 +6,7 @@
*
*/
import type {LexicalNode} from 'lexical';
import type {LexicalNode, LexicalCommand} from 'lexical';
import {DecoratorNode} from 'lexical';
export declare class HorizontalRuleNode extends DecoratorNode<React.ReactNode> {
getType(): string;
@ -21,3 +21,5 @@ export function $createHorizontalRuleNode(): HorizontalRuleNode;
export function $isHorizontalRuleNode(
node: LexicalNode | null | undefined,
): boolean;
export var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;

4
packages/lexical-react/flow/LexicalHorizontalRuleNode.js.flow
View File

@ -7,7 +7,7 @@
* @flow strict
*/
import type {LexicalNode} from 'lexical';
import type {LexicalNode, LexicalCommand} from 'lexical';
import {DecoratorNode} from 'lexical';
@ -25,3 +25,5 @@ declare export function $createHorizontalRuleNode(): HorizontalRuleNode;
declare export function $isHorizontalRuleNode(
node: ?LexicalNode,
): boolean %checks(node instanceof HorizontalRuleNode);
declare export var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;

7
packages/lexical-react/src/LexicalHorizontalRuleNode.jsx
View File

@ -7,11 +7,14 @@
* @flow strict
*/
import type {LexicalNode} from 'lexical';
import type {LexicalCommand, LexicalNode} from 'lexical';
import {DecoratorNode} from 'lexical';
import {createCommand, DecoratorNode} from 'lexical';
import * as React from 'react';
export const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void> =
createCommand();
function HorizontalRuleComponent() {
return <hr />;
}

9
packages/lexical-react/src/LexicalLinkPlugin.js
View File

@ -9,9 +9,14 @@
import type {CommandListenerEditorPriority} from 'lexical';
import {$createLinkNode, $isLinkNode, LinkNode} from '@lexical/link';
import {
$createLinkNode,
$isLinkNode,
LinkNode,
TOGGLE_LINK_COMMAND,
} from '@lexical/link';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {$getSelection, $setSelection, TOGGLE_LINK_COMMAND} from 'lexical';
import {$getSelection, $setSelection} from 'lexical';
import {useEffect} from 'react';
const EditorPriority: CommandListenerEditorPriority = 0;

7
packages/lexical-react/src/LexicalTablePlugin.js
View File

@ -18,6 +18,7 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {
$createTableNodeWithDimensions,
applyTableHandlers,
INSERT_TABLE_COMMAND,
TableCellNode,
TableNode,
TableRowNode,
@ -28,7 +29,6 @@ import {
$getSelection,
$isRangeSelection,
$isRootNode,
INSERT_TABLE_COMMAND,
} from 'lexical';
import {useEffect} from 'react';
import invariant from 'shared/invariant';
@ -57,7 +57,10 @@ export default function TablePlugin(): React$Node {
const focusNode = focus.getNode();
if (focusNode !== null) {
const tableNode = $createTableNodeWithDimensions(rows, columns);
const tableNode = $createTableNodeWithDimensions(
Number(rows),
Number(columns),
);
if ($isRootNode(focusNode)) {
const target = focusNode.getChildAtIndex(focus.offset);
if (target !== null) {

6
packages/lexical-react/src/shared/useList.js
View File

@ -12,18 +12,18 @@ import type {CommandListenerLowPriority, LexicalEditor} from 'lexical';
import {
$handleListInsertParagraph,
indentList,
INSERT_ORDERED_LIST_COMMAND,
INSERT_UNORDERED_LIST_COMMAND,
insertList,
outdentList,
REMOVE_LIST_COMMAND,
removeList,
} from '@lexical/list';
import {mergeRegister} from '@lexical/utils';
import {
INDENT_CONTENT_COMMAND,
INSERT_ORDERED_LIST_COMMAND,
INSERT_PARAGRAPH_COMMAND,
INSERT_UNORDERED_LIST_COMMAND,
OUTDENT_CONTENT_COMMAND,
REMOVE_LIST_COMMAND,
} from 'lexical';
import {useEffect} from 'react';

4
packages/lexical-react/src/shared/useYjsCollaboration.jsx
View File

@ -13,6 +13,7 @@ import type {Doc} from 'yjs';
import {mergeRegister} from '@lexical/utils';
import {
CONNECTED_COMMAND,
createBinding,
createUndoManager,
initLocalState,
@ -20,16 +21,15 @@ import {
syncCursorPositions,
syncLexicalUpdateToYjs,
syncYjsChangesToLexical,
TOGGLE_CONNECT_COMMAND,
} from '@lexical/yjs';
import {
$createParagraphNode,
$getRoot,
$getSelection,
BLUR_COMMAND,
CONNECTED_COMMAND,
FOCUS_COMMAND,
REDO_COMMAND,
TOGGLE_CONNECT_COMMAND,
UNDO_COMMAND,
} from 'lexical';
import * as React from 'react';

9
packages/lexical-rich-text/src/index.js
View File

@ -432,12 +432,11 @@ export function registerRichText(
),
editor.registerCommand(
FORMAT_ELEMENT_COMMAND,
(payload) => {
(format: ElementFormatType) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
const format: ElementFormatType = payload;
const node = selection.anchor.getNode();
const element = $isElementNode(node) ? node : node.getParentOrThrow();
element.setFormat(format);
@ -640,13 +639,12 @@ export function registerRichText(
),
editor.registerCommand(
DROP_COMMAND,
(payload) => {
(event: DragEvent) => {
const selection = $getSelection();
if (!$isRangeSelection(selection)) {
return false;
}
// TODO: Make drag and drop work at some point.
const event: DragEvent = payload;
event.preventDefault();
return true;
},
@ -694,10 +692,9 @@ export function registerRichText(
),
editor.registerCommand(
PASTE_COMMAND,
(payload) => {
(event: ClipboardEvent) => {
const selection = $getSelection();
if ($isRangeSelection(selection) || $isGridSelection(selection)) {
const event: ClipboardEvent = payload;
onPasteForRichText(event, editor);
return true;
}

5
packages/lexical-table/LexicalTable.d.ts vendored
View File

@ -230,3 +230,8 @@ declare class TableSelection {
formatCells(type: TextFormatType): void;
clearText(): void;
}
export var INSERT_TABLE_COMMAND: LexicalCommand<{
rows: string;
columns: string;
}>;

6
packages/lexical-table/flow/LexicalTable.js.flow
View File

@ -15,6 +15,7 @@ import type {
RangeSelection,
LexicalEditor,
TextFormatType,
LexicalCommand,
} from 'lexical';
import {ElementNode} from 'lexical';
@ -238,3 +239,8 @@ declare export class TableSelection {
formatCells(type: TextFormatType): void;
clearText(): void;
}
declare export var INSERT_TABLE_COMMAND: LexicalCommand<{
rows: string,
columns: string,
}>;

6
packages/lexical-table/src/LexicalTableSelectionHelpers.js
View File

@ -565,14 +565,10 @@ export function applyTableHandlers(
tableSelection.listenersToRemove.add(
editor.registerCommand(
DELETE_CHARACTER_COMMAND,
(payload) => {
() => {
const selection = $getSelection();
if ($isGridSelection(selection)) {
const event: KeyboardEvent = payload;
event.preventDefault();
event.stopPropagation();
tableSelection.clearText();
return true;
} else if ($isRangeSelection(selection)) {

9
packages/lexical-table/src/index.js
View File

@ -7,6 +7,10 @@
* @flow strict
*/
import type {LexicalCommand} from 'lexical';
import {createCommand} from 'lexical';
import {
$createTableCellNode,
$isTableCellNode,
@ -70,3 +74,8 @@ export {
TableRowNode,
TableSelection,
};
export const INSERT_TABLE_COMMAND: LexicalCommand<{
columns: string,
rows: string,
}> = createCommand();

5
packages/lexical-yjs/src/index.js
View File

@ -8,8 +8,10 @@
*/
import type {Binding} from './Bindings';
import type {LexicalCommand} from 'lexical';
import type {Doc, RelativePosition, UndoManager, XmlText} from 'yjs';
import {createCommand} from 'lexical';
// $FlowFixMe: need Flow typings for yjs
import {UndoManager as YjsUndoManager} from 'yjs';
@ -21,6 +23,9 @@ export type UserState = {
name: string,
};
export const CONNECTED_COMMAND: LexicalCommand<boolean> = createCommand();
export const TOGGLE_CONNECT_COMMAND: LexicalCommand<boolean> = createCommand();
export type ProviderAwareness = {
getLocalState: () => UserState | null,
getStates: () => Map<number, UserState>,

111
packages/lexical/Lexical.d.ts vendored
View File

@ -12,60 +12,50 @@ import {Class, $ReadOnly} from 'utility-types';
* LexicalCommands
*/
export type LexicalCommand<T> = $ReadOnly<{type: T}>;
export type LexicalCommand<P> = $ReadOnly<{}>;
declare var SELECTION_CHANGE_COMMAND: LexicalCommand<'selectionChange'>;
declare var CLICK_COMMAND: LexicalCommand<'click'>;
declare var DELETE_CHARACTER_COMMAND: LexicalCommand<'deleteCharacter'>;
declare var INSERT_LINE_BREAK_COMMAND: LexicalCommand<'insertLinebreak'>;
declare var INSERT_PARAGRAPH_COMMAND: LexicalCommand<'insertParagraph'>;
declare var INSERT_TEXT_COMMAND: LexicalCommand<'insertText'>;
declare var PASTE_COMMAND: LexicalCommand<'paste'>;
declare var REMOVE_TEXT_COMMAND: LexicalCommand<'removeText'>;
declare var DELETE_WORD_COMMAND: LexicalCommand<'deleteWord'>;
declare var DELETE_LINE_COMMAND: LexicalCommand<'deleteLine'>;
declare var FORMAT_TEXT_COMMAND: LexicalCommand<'formatText'>;
declare var UNDO_COMMAND: LexicalCommand<'undo'>;
declare var REDO_COMMAND: LexicalCommand<'redo'>;
declare var KEY_ARROW_RIGHT_COMMAND: LexicalCommand<'keyArrowRight'>;
declare var KEY_ARROW_LEFT_COMMAND: LexicalCommand<'keyArrowLeft'>;
declare var KEY_ARROW_UP_COMMAND: LexicalCommand<'keyArrowUp'>;
declare var KEY_ARROW_DOWN_COMMAND: LexicalCommand<'keyArrowDown'>;
declare var KEY_ENTER_COMMAND: LexicalCommand<'keyEnter'>;
declare var KEY_BACKSPACE_COMMAND: LexicalCommand<'keyBackspace'>;
declare var KEY_ESCAPE_COMMAND: LexicalCommand<'keyEscape'>;
declare var KEY_DELETE_COMMAND: LexicalCommand<'keyDelete'>;
declare var KEY_TAB_COMMAND: LexicalCommand<'keyTab'>;
declare var INDENT_CONTENT_COMMAND: LexicalCommand<'indentContent'>;
declare var OUTDENT_CONTENT_COMMAND: LexicalCommand<'outdentContent'>;
declare var DROP_COMMAND: LexicalCommand<'drop'>;
declare var FORMAT_ELEMENT_COMMAND: LexicalCommand<'formatElement'>;
declare var DRAGSTART_COMMAND: LexicalCommand<'dragstart'>;
declare var COPY_COMMAND: LexicalCommand<'copy'>;
declare var CUT_COMMAND: LexicalCommand<'cut'>;
declare var CLEAR_EDITOR_COMMAND: LexicalCommand<'clearEditor'>;
declare var CLEAR_HISTORY_COMMAND: LexicalCommand<'clearHistory'>;
declare var CAN_REDO_COMMAND: LexicalCommand<'canRedo'>;
declare var CAN_UNDO_COMMAND: LexicalCommand<'canUndo'>;
declare var CONNECTED_COMMAND: LexicalCommand<'connected'>;
declare var TOGGLE_CONNECT_COMMAND: LexicalCommand<'toggleConnect'>;
declare var FOCUS_COMMAND: LexicalCommand<'focus'>;
declare var BLUR_COMMAND: LexicalCommand<'blur'>;
declare var TOGGLE_LINK_COMMAND: LexicalCommand<'toggleLink'>;
declare var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<'insertHorizontalRule'>;
declare var INSERT_IMAGE_COMMAND: LexicalCommand<'insertImage'>;
declare var INSERT_POLL_COMMAND: LexicalCommand<'insertPoll'>;
declare var INSERT_TABLE_COMMAND: LexicalCommand<'insertTable'>;
declare var INSERT_EXCALIDRAW_COMMAND: LexicalCommand<'insertExcalidraw'>;
declare var INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<'insertUnorderList'>;
declare var INSERT_ORDERED_LIST_COMMAND: LexicalCommand<'insertOrderedList'>;
declare var REMOVE_LIST_COMMAND: LexicalCommand<'removeList'>;
declare var INSERT_TWEET_COMMAND: LexicalCommand<'insertTweet'>;
declare var SPEECT_TO_TEXT_COMMAND: LexicalCommand<'speechToText'>;
declare var INSERT_EQUATION_COMMAND: LexicalCommand<'insertEquation'>;
declare var READ_ONLY_COMMAND: LexicalCommand<'readOnly'>;
export var SELECTION_CHANGE_COMMAND: LexicalCommand<void>;
export var CLICK_COMMAND: LexicalCommand<MouseEvent>;
export var DELETE_CHARACTER_COMMAND: LexicalCommand<boolean>;
export var INSERT_LINE_BREAK_COMMAND: LexicalCommand<boolean>;
export var INSERT_PARAGRAPH_COMMAND: LexicalCommand<void>;
export var INSERT_TEXT_COMMAND: LexicalCommand<InputEvent | string>;
export var PASTE_COMMAND: LexicalCommand<ClipboardEvent>;
export var REMOVE_TEXT_COMMAND: LexicalCommand<void>;
export var DELETE_WORD_COMMAND: LexicalCommand<boolean>;
export var DELETE_LINE_COMMAND: LexicalCommand<boolean>;
export var FORMAT_TEXT_COMMAND: LexicalCommand<TextFormatType>;
export var UNDO_COMMAND: LexicalCommand<void>;
export var REDO_COMMAND: LexicalCommand<void>;
export var KEY_ARROW_RIGHT_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_ARROW_LEFT_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_ARROW_UP_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_ARROW_DOWN_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_ENTER_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_BACKSPACE_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_ESCAPE_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_DELETE_COMMAND: LexicalCommand<KeyboardEvent>;
export var KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent>;
export var INDENT_CONTENT_COMMAND: LexicalCommand<void>;
export var OUTDENT_CONTENT_COMMAND: LexicalCommand<void>;
export var DROP_COMMAND: LexicalCommand<DragEvent>;
export var FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType>;
export var DRAGSTART_COMMAND: LexicalCommand<DragEvent>;
export var COPY_COMMAND: LexicalCommand<ClipboardEvent>;
export var CUT_COMMAND: LexicalCommand<ClipboardEvent>;
export var CLEAR_EDITOR_COMMAND: LexicalCommand<void>;
export var CLEAR_HISTORY_COMMAND: LexicalCommand<void>;
export var CAN_REDO_COMMAND: LexicalCommand<boolean>;
export var CAN_UNDO_COMMAND: LexicalCommand<boolean>;
export var FOCUS_COMMAND: LexicalCommand<FocusEvent>;
export var BLUR_COMMAND: LexicalCommand<FocusEvent>;
export var INSERT_TABLE_COMMAND: LexicalCommand<{
rows: string;
columns: string;
}>;
export var READ_ONLY_COMMAND: LexicalCommand<void>;
declare function createCommand<T>(): LexicalCommand<T>;
export declare function createCommand<T>(): LexicalCommand<T>;
/**
* LexicalEditor
@ -88,20 +78,18 @@ type RootListener = (
) => void;
type TextContentListener = (text: string) => void;
type MutationListener = (nodes: Map<NodeKey, NodeMutation>) => void;
type CommandListener = (
payload: CommandPayload,
editor: LexicalEditor,
) => boolean;
type CommandListener<P> = (payload: P, editor: LexicalEditor) => boolean;
export type ReadOnlyListener = (readOnly: boolean) => void;
type CommandPayload = any;
type InternalCommandListener = CommandListener<any>;
type Listeners = {
decorator: Set<DecoratorListener>;
mutation: MutationListeners;
textcontent: Set<TextContentListener>;
root: Set<RootListener>;
update: Set<UpdateListener>;
command: Map<string, Array<Set<CommandListener>>>;
command: Map<string, Array<Set<InternalCommandListener>>>;
};
type RegisteredNodes = Map<string, RegisteredNode>;
type RegisteredNode = {
@ -144,8 +132,9 @@ export declare class LexicalEditor {
registerRootListener(listener: RootListener): () => void;
registerDecoratorListener(listener: DecoratorListener): () => void;
registerTextContentListener(listener: TextContentListener): () => void;
registerCommand(
listener: CommandListener,
registerCommand<P>(
command: LexicalCommand<P>,
listener: CommandListener<P>,
priority: CommandListenerPriority,
): () => void;
registerReadOnlyListener(listener: ReadOnlyListener): () => void;
@ -157,7 +146,7 @@ export declare class LexicalEditor {
klass: Class<T>,
listener: Transform<T>,
): () => void;
dispatchCommand(type: string, payload: CommandPayload): boolean;
dispatchCommand(type: string, payload: P): boolean;
hasNodes(nodes: Array<Class<LexicalNode>>): boolean;
getDecorators<X>(): Record<NodeKey, X>;
getRootElement(): null | HTMLElement;

111
packages/lexical/flow/Lexical.js.flow
View File

@ -11,58 +11,44 @@
* LexicalCommands
*/
export type LexicalCommand<T> = $ReadOnly<{}>;
export type LexicalCommand<P> = $ReadOnly<{}>;
declare export var SELECTION_CHANGE_COMMAND: LexicalCommand<'selectionChange'>;
declare export var CLICK_COMMAND: LexicalCommand<'click'>;
declare export var DELETE_CHARACTER_COMMAND: LexicalCommand<'deleteCharacter'>;
declare export var INSERT_LINE_BREAK_COMMAND: LexicalCommand<'insertLinebreak'>;
declare export var INSERT_PARAGRAPH_COMMAND: LexicalCommand<'insertParagraph'>;
declare export var INSERT_TEXT_COMMAND: LexicalCommand<'insertText'>;
declare export var PASTE_COMMAND: LexicalCommand<'paste'>;
declare export var REMOVE_TEXT_COMMAND: LexicalCommand<'removeText'>;
declare export var DELETE_WORD_COMMAND: LexicalCommand<'deleteWord'>;
declare export var DELETE_LINE_COMMAND: LexicalCommand<'deleteLine'>;
declare export var FORMAT_TEXT_COMMAND: LexicalCommand<'formatText'>;
declare export var UNDO_COMMAND: LexicalCommand<'undo'>;
declare export var REDO_COMMAND: LexicalCommand<'redo'>;
declare export var KEY_ARROW_RIGHT_COMMAND: LexicalCommand<'keyArrowRight'>;
declare export var KEY_ARROW_LEFT_COMMAND: LexicalCommand<'keyArrowLeft'>;
declare export var KEY_ARROW_UP_COMMAND: LexicalCommand<'keyArrowUp'>;
declare export var KEY_ARROW_DOWN_COMMAND: LexicalCommand<'keyArrowDown'>;
declare export var KEY_ENTER_COMMAND: LexicalCommand<'keyEnter'>;
declare export var KEY_BACKSPACE_COMMAND: LexicalCommand<'keyBackspace'>;
declare export var KEY_ESCAPE_COMMAND: LexicalCommand<'keyEscape'>;
declare export var KEY_DELETE_COMMAND: LexicalCommand<'keyDelete'>;
declare export var KEY_TAB_COMMAND: LexicalCommand<'keyTab'>;
declare export var INDENT_CONTENT_COMMAND: LexicalCommand<'indentContent'>;
declare export var OUTDENT_CONTENT_COMMAND: LexicalCommand<'outdentContent'>;
declare export var DROP_COMMAND: LexicalCommand<'drop'>;
declare export var FORMAT_ELEMENT_COMMAND: LexicalCommand<'formatElement'>;
declare export var DRAGSTART_COMMAND: LexicalCommand<'dragstart'>;
declare export var COPY_COMMAND: LexicalCommand<'copy'>;
declare export var CUT_COMMAND: LexicalCommand<'cut'>;
declare export var CLEAR_EDITOR_COMMAND: LexicalCommand<'clearEditor'>;
declare export var CLEAR_HISTORY_COMMAND: LexicalCommand<'clearHistory'>;
declare export var CAN_REDO_COMMAND: LexicalCommand<'canRedo'>;
declare export var CAN_UNDO_COMMAND: LexicalCommand<'canUndo'>;
declare export var CONNECTED_COMMAND: LexicalCommand<'connected'>;
declare export var TOGGLE_CONNECT_COMMAND: LexicalCommand<'toggleConnect'>;
declare export var FOCUS_COMMAND: LexicalCommand<'focus'>;
declare export var BLUR_COMMAND: LexicalCommand<'blur'>;
declare export var TOGGLE_LINK_COMMAND: LexicalCommand<'toggleLink'>;
declare export var INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<'insertHorizontalRule'>;
declare export var INSERT_IMAGE_COMMAND: LexicalCommand<'insertImage'>;
declare export var INSERT_POLL_COMMAND: LexicalCommand<'insertPoll'>;
declare export var INSERT_TABLE_COMMAND: LexicalCommand<'insertTable'>;
declare export var INSERT_EXCALIDRAW_COMMAND: LexicalCommand<'insertExcalidraw'>;
declare export var INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<'insertUnorderList'>;
declare export var INSERT_ORDERED_LIST_COMMAND: LexicalCommand<'insertOrderedList'>;
declare export var REMOVE_LIST_COMMAND: LexicalCommand<'removeList'>;
declare export var INSERT_TWEET_COMMAND: LexicalCommand<'insertTweet'>;
declare export var SPEECT_TO_TEXT_COMMAND: LexicalCommand<'speechToText'>;
declare export var INSERT_EQUATION_COMMAND: LexicalCommand<'insertEquation'>;
declare export var READ_ONLY_COMMAND: LexicalCommand<'readOnly'>;
declare export var SELECTION_CHANGE_COMMAND: LexicalCommand<void>;
declare export var CLICK_COMMAND: LexicalCommand<MouseEvent>;
declare export var DELETE_CHARACTER_COMMAND: LexicalCommand<boolean>;
declare export var INSERT_LINE_BREAK_COMMAND: LexicalCommand<boolean>;
declare export var INSERT_PARAGRAPH_COMMAND: LexicalCommand<void>;
declare export var INSERT_TEXT_COMMAND: LexicalCommand<string>;
declare export var PASTE_COMMAND: LexicalCommand<ClipboardEvent>;
declare export var REMOVE_TEXT_COMMAND: LexicalCommand<void>;
declare export var DELETE_WORD_COMMAND: LexicalCommand<boolean>;
declare export var DELETE_LINE_COMMAND: LexicalCommand<boolean>;
declare export var FORMAT_TEXT_COMMAND: LexicalCommand<TextFormatType>;
declare export var UNDO_COMMAND: LexicalCommand<void>;
declare export var REDO_COMMAND: LexicalCommand<void>;
declare export var KEY_ARROW_RIGHT_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_ARROW_LEFT_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_ARROW_UP_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_ARROW_DOWN_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_ENTER_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_BACKSPACE_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_ESCAPE_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_DELETE_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent>;
declare export var INDENT_CONTENT_COMMAND: LexicalCommand<void>;
declare export var OUTDENT_CONTENT_COMMAND: LexicalCommand<void>;
declare export var DROP_COMMAND: LexicalCommand<DragEvent>;
declare export var FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType>;
declare export var DRAGSTART_COMMAND: LexicalCommand<DragEvent>;
declare export var COPY_COMMAND: LexicalCommand<ClipboardEvent>;
declare export var CUT_COMMAND: LexicalCommand<ClipboardEvent>;
declare export var CLEAR_EDITOR_COMMAND: LexicalCommand<void>;
declare export var CLEAR_HISTORY_COMMAND: LexicalCommand<void>;
declare export var CAN_REDO_COMMAND: LexicalCommand<boolean>;
declare export var CAN_UNDO_COMMAND: LexicalCommand<boolean>;
declare export var FOCUS_COMMAND: LexicalCommand<FocusEvent>;
declare export var BLUR_COMMAND: LexicalCommand<FocusEvent>;
declare export var READ_ONLY_COMMAND: LexicalCommand<void>;
declare export function createCommand<T>(): LexicalCommand<T>;
@ -90,21 +76,19 @@ type RootListener = (
type TextContentListener = (text: string) => void;
type ErrorHandler = (error: Error) => void;
type MutationListener = (nodes: Map<NodeKey, NodeMutation>) => void;
type CommandListener = (
payload: CommandPayload,
editor: LexicalEditor,
) => boolean;
type CommandListener<P> = (payload: P, editor: LexicalEditor) => boolean;
export type ReadOnlyListener = (readOnly: boolean) => void;
//$FlowFixMe
type CommandPayload = any;
// $FlowFixMe
type InternalCommandListener = CommandListener<any>;
type Listeners = {
decorator: Set<DecoratorListener>,
mutation: MutationListeners,
textcontent: Set<TextContentListener>,
root: Set<RootListener>,
update: Set<UpdateListener>,
command: Map<string, Array<Set<CommandListener>>>,
command: Map<string, Array<Set<InternalCommandListener>>>,
};
type RegisteredNodes = Map<string, RegisteredNode>;
type RegisteredNode = {
@ -153,9 +137,9 @@ declare export class LexicalEditor {
registerRootListener(listener: RootListener): () => void;
registerDecoratorListener(listener: DecoratorListener): () => void;
registerTextContentListener(listener: TextContentListener): () => void;
registerCommand<T>(
type: LexicalCommand<T>,
listener: CommandListener,
registerCommand<P>(
command: LexicalCommand<P>,
listener: CommandListener<P>,
priority: CommandListenerPriority,
): () => void;
registerReadOnlyListener(listener: ReadOnlyListener): () => void;
@ -167,10 +151,7 @@ declare export class LexicalEditor {
klass: Class<T>,
listener: Transform<T>,
): () => void;
dispatchCommand<T>(
type: LexicalCommand<T>,
payload?: CommandPayload,
): boolean;
dispatchCommand<P>(command: LexicalCommand<P>, payload?: P): boolean;
hasNodes(nodes: Array<Class<LexicalNode>>): boolean;
getDecorators<X>(): {
[NodeKey]: X,

143
packages/lexical/src/LexicalCommands.js
View File

@ -7,100 +7,57 @@
* @flow strict
*/
import type {LexicalCommand} from 'lexical';
import type {ElementFormatType, LexicalCommand, TextFormatType} from 'lexical';
export function createCommand<T>(): LexicalCommand<T> {
return Object.freeze({});
// $FlowFixMe: avoid freezing the object for perf reasons
return {};
}
export const SELECTION_CHANGE_COMMAND: LexicalCommand<'selectionChange'> =
createCommand<'selectionChange'>();
export const CLICK_COMMAND: LexicalCommand<'click'> = createCommand<'click'>();
export const DELETE_CHARACTER_COMMAND: LexicalCommand<'deleteCharacter'> =
createCommand<'deleteCharacter'>();
export const INSERT_LINE_BREAK_COMMAND: LexicalCommand<'insertLinebreak'> =
createCommand<'insertLinebreak'>();
export const INSERT_PARAGRAPH_COMMAND: LexicalCommand<'insertParagraph'> =
createCommand<'insertParagraph'>();
export const INSERT_TEXT_COMMAND: LexicalCommand<'insertText'> =
createCommand<'insertText'>();
export const PASTE_COMMAND: LexicalCommand<'paste'> = createCommand<'paste'>();
export const REMOVE_TEXT_COMMAND: LexicalCommand<'removeText'> =
createCommand<'removeText'>();
export const DELETE_WORD_COMMAND: LexicalCommand<'deleteWord'> =
createCommand<'deleteWord'>();
export const DELETE_LINE_COMMAND: LexicalCommand<'deleteLine'> =
createCommand<'deleteLine'>();
export const FORMAT_TEXT_COMMAND: LexicalCommand<'formatText'> =
createCommand<'formatText'>();
export const UNDO_COMMAND: LexicalCommand<'undo'> = createCommand<'undo'>();
export const REDO_COMMAND: LexicalCommand<'redo'> = createCommand<'redo'>();
export const KEY_ARROW_RIGHT_COMMAND: LexicalCommand<'keyArrowRight'> =
createCommand<'keyArrowRight'>();
export const KEY_ARROW_LEFT_COMMAND: LexicalCommand<'keyArrowLeft'> =
createCommand<'keyArrowLeft'>();
export const KEY_ARROW_UP_COMMAND: LexicalCommand<'keyArrowUp'> =
createCommand<'keyArrowUp'>();
export const KEY_ARROW_DOWN_COMMAND: LexicalCommand<'keyArrowDown'> =
createCommand<'keyArrowDown'>();
export const KEY_ENTER_COMMAND: LexicalCommand<'keyEnter'> =
createCommand<'keyEnter'>();
export const KEY_BACKSPACE_COMMAND: LexicalCommand<'keyBackspace'> =
createCommand<'keyBackspace'>();
export const KEY_ESCAPE_COMMAND: LexicalCommand<'keyEscape'> =
createCommand<'keyEscape'>();
export const KEY_DELETE_COMMAND: LexicalCommand<'keyDelete'> =
createCommand<'keyDelete'>();
export const KEY_TAB_COMMAND: LexicalCommand<'keyTab'> =
createCommand<'keyTab'>();
export const INDENT_CONTENT_COMMAND: LexicalCommand<'indentContent'> =
createCommand<'indentContent'>();
export const OUTDENT_CONTENT_COMMAND: LexicalCommand<'outdentContent'> =
createCommand<'outdentContent'>();
export const DROP_COMMAND: LexicalCommand<'drop'> = createCommand<'drop'>();
export const FORMAT_ELEMENT_COMMAND: LexicalCommand<'formatElement'> =
createCommand<'formatElement'>();
export const DRAGSTART_COMMAND: LexicalCommand<'dragstart'> =
createCommand<'dragstart'>();
export const COPY_COMMAND: LexicalCommand<'copy'> = createCommand<'copy'>();
export const CUT_COMMAND: LexicalCommand<'cut'> = createCommand<'cut'>();
export const CLEAR_EDITOR_COMMAND: LexicalCommand<'clearEditor'> =
createCommand<'clearEditor'>();
export const CLEAR_HISTORY_COMMAND: LexicalCommand<'clearHistory'> =
createCommand<'clearHistory'>();
export const CAN_REDO_COMMAND: LexicalCommand<'canRedo'> =
createCommand<'canRedo'>();
export const CAN_UNDO_COMMAND: LexicalCommand<'canUndo'> =
createCommand<'canUndo'>();
export const CONNECTED_COMMAND: LexicalCommand<'connected'> =
createCommand<'connected'>();
export const TOGGLE_CONNECT_COMMAND: LexicalCommand<'toggleConnect'> =
createCommand<'toggleConnect'>();
export const FOCUS_COMMAND: LexicalCommand<'focus'> = createCommand<'focus'>();
export const BLUR_COMMAND: LexicalCommand<'blur'> = createCommand<'blur'>();
export const TOGGLE_LINK_COMMAND: LexicalCommand<'toggleLink'> =
createCommand<'toggleLink'>();
export const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<'insertHorizontalRule'> =
createCommand<'insertHorizontalRule'>();
export const INSERT_IMAGE_COMMAND: LexicalCommand<'insertImage'> =
createCommand<'insertImage'>();
export const INSERT_POLL_COMMAND: LexicalCommand<'insertPoll'> =
createCommand<'insertPoll'>();
export const INSERT_TABLE_COMMAND: LexicalCommand<'insertTable'> =
createCommand<'insertTable'>();
export const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<'insertExcalidraw'> =
createCommand<'insertExcalidraw'>();
export const INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<'insertUnorderList'> =
createCommand<'insertUnorderList'>();
export const INSERT_ORDERED_LIST_COMMAND: LexicalCommand<'insertOrderedList'> =
createCommand<'insertOrderedList'>();
export const REMOVE_LIST_COMMAND: LexicalCommand<'removeList'> =
createCommand<'removeList'>();
export const INSERT_TWEET_COMMAND: LexicalCommand<'insertTweet'> =
createCommand<'insertTweet'>();
export const SPEECT_TO_TEXT_COMMAND: LexicalCommand<'speechToText'> =
createCommand<'speechToText'>();
export const INSERT_EQUATION_COMMAND: LexicalCommand<'insertEquation'> =
createCommand<'insertEquation'>();
export const READ_ONLY_COMMAND: LexicalCommand<'readOnly'> =
createCommand<'readOnly'>();
export const SELECTION_CHANGE_COMMAND: LexicalCommand<void> = createCommand();
export const CLICK_COMMAND: LexicalCommand<MouseEvent> = createCommand();
export const DELETE_CHARACTER_COMMAND: LexicalCommand<boolean> =
createCommand();
export const INSERT_LINE_BREAK_COMMAND: LexicalCommand<boolean> =
createCommand();
export const INSERT_PARAGRAPH_COMMAND: LexicalCommand<void> = createCommand();
export const INSERT_TEXT_COMMAND: LexicalCommand<string> = createCommand();
export const PASTE_COMMAND: LexicalCommand<ClipboardEvent> = createCommand();
export const REMOVE_TEXT_COMMAND: LexicalCommand<void> = createCommand();
export const DELETE_WORD_COMMAND: LexicalCommand<boolean> = createCommand();
export const DELETE_LINE_COMMAND: LexicalCommand<boolean> = createCommand();
export const FORMAT_TEXT_COMMAND: LexicalCommand<TextFormatType> =
createCommand();
export const UNDO_COMMAND: LexicalCommand<void> = createCommand();
export const REDO_COMMAND: LexicalCommand<void> = createCommand();
export const KEY_ARROW_RIGHT_COMMAND: LexicalCommand<KeyboardEvent> =
createCommand();
export const KEY_ARROW_LEFT_COMMAND: LexicalCommand<KeyboardEvent> =
createCommand();
export const KEY_ARROW_UP_COMMAND: LexicalCommand<KeyboardEvent> =
createCommand();
export const KEY_ARROW_DOWN_COMMAND: LexicalCommand<KeyboardEvent> =
createCommand();
export const KEY_ENTER_COMMAND: LexicalCommand<KeyboardEvent> = createCommand();
export const KEY_BACKSPACE_COMMAND: LexicalCommand<KeyboardEvent> =
createCommand();
export const KEY_ESCAPE_COMMAND: LexicalCommand<KeyboardEvent> =
createCommand();
export const KEY_DELETE_COMMAND: LexicalCommand<KeyboardEvent> =
createCommand();
export const KEY_TAB_COMMAND: LexicalCommand<KeyboardEvent> = createCommand();
export const INDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand();
export const OUTDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand();
export const DROP_COMMAND: LexicalCommand<DragEvent> = createCommand();
export const FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType> =
createCommand();
export const DRAGSTART_COMMAND: LexicalCommand<DragEvent> = createCommand();
export const COPY_COMMAND: LexicalCommand<ClipboardEvent> = createCommand();
export const CUT_COMMAND: LexicalCommand<ClipboardEvent> = createCommand();
export const CLEAR_EDITOR_COMMAND: LexicalCommand<void> = createCommand();
export const CLEAR_HISTORY_COMMAND: LexicalCommand<void> = createCommand();
export const CAN_REDO_COMMAND: LexicalCommand<boolean> = createCommand();
export const CAN_UNDO_COMMAND: LexicalCommand<boolean> = createCommand();
export const FOCUS_COMMAND: LexicalCommand<FocusEvent> = createCommand();
export const BLUR_COMMAND: LexicalCommand<FocusEvent> = createCommand();
export const READ_ONLY_COMMAND: LexicalCommand<void> = createCommand();

31
packages/lexical/src/LexicalEditor.js
View File

@ -128,10 +128,7 @@ export type RootListener = (
) => void;
export type TextContentListener = (text: string) => void;
export type MutationListener = (nodes: Map<NodeKey, NodeMutation>) => void;
export type CommandListener = (
payload: CommandPayload,
editor: LexicalEditor,
) => boolean;
export type CommandListener<P> = (payload: P, editor: LexicalEditor) => boolean;
export type ReadOnlyListener = (readOnly: boolean) => void;
export type CommandListenerEditorPriority = 0;
@ -150,9 +147,6 @@ export type CommandListenerPriority =
// eslint-disable-next-line no-unused-vars
export type LexicalCommand<T> = $ReadOnly<{}>;
// $FlowFixMe: intentional
export type CommandPayload = any;
type Listeners = {
// $FlowFixMe We don't want to require a generic within LexicalEditor just for commands.
command: Map<LexicalCommand<>, Array<Set<CommandListener>>>,
@ -423,17 +417,17 @@ export class LexicalEditor {
listenerSetOrMap.delete(listener);
};
}
registerCommand<T>(
type: LexicalCommand<T>,
listener: CommandListener,
registerCommand<P>(
command: LexicalCommand<P>,
listener: CommandListener<P>,
priority: CommandListenerPriority,
): () => void {
if (priority === undefined) {
invariant(false, 'Listener for type "command" requires a "priority".');
}
const commandsMap = this._listeners.command;
if (!commandsMap.has(type)) {
commandsMap.set(type, [
if (!commandsMap.has(command)) {
commandsMap.set(command, [
new Set(),
new Set(),
new Set(),
@ -441,12 +435,12 @@ export class LexicalEditor {
new Set(),
]);
}
const listenersInPriorityOrder = commandsMap.get(type);
const listenersInPriorityOrder = commandsMap.get(command);
if (listenersInPriorityOrder === undefined) {
invariant(
false,
'registerCommand: Command type of "%s" not found in command map',
type,
'registerCommand: Command %s not found in command map',
command,
);
}
const listeners = listenersInPriorityOrder[priority];
@ -458,7 +452,7 @@ export class LexicalEditor {
(listenersSet) => listenersSet.size === 0,
)
) {
commandsMap.delete(type);
commandsMap.delete(command);
}
};
}
@ -512,10 +506,7 @@ export class LexicalEditor {
}
return true;
}
dispatchCommand<T>(
type: LexicalCommand<T>,
payload?: CommandPayload,
): boolean {
dispatchCommand<P>(type: LexicalCommand<P>, payload?: P): boolean {
return triggerCommandListeners(this, type, payload);
}
getDecorators(): {[NodeKey]: mixed} {

7
packages/lexical/src/LexicalUpdates.js
View File

@ -8,7 +8,6 @@
*/
import type {
CommandPayload,
EditorUpdateOptions,
LexicalCommand,
LexicalEditor,
@ -459,10 +458,10 @@ export function triggerListeners(
}
}
export function triggerCommandListeners<T>(
export function triggerCommandListeners<P>(
editor: LexicalEditor,
type: LexicalCommand<T>,
payload: CommandPayload,
type: LexicalCommand<P>,
payload: P,
): boolean {
if (editor._updating === false || activeEditor !== editor) {
let returnVal = false;

5
scripts/error-codes/codes.json
View File

@ -76,5 +76,8 @@
"76": "getNodes: expected to find GridNode",
"77": "getNodes: expected to find GridRowNode",
"78": "getNodes: expected to find GridCellNode",
"79": "Expected grid selection"
"79": "Expected grid selection",
"80": "Expect paragraph containing only text nodes.",
"81": "registerCommand: Command %s not found in command map",
"82": "Expect to have a text node with offset."
}