Skip to content

Commit 9c797bc

Browse files
echarlesecharles
committed
lexical: hooks
1 parent c906757 commit 9c797bc

File tree

10 files changed

+57
-69
lines changed

10 files changed

+57
-69
lines changed

‎packages/lexical/src/components/CopyButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
LexicalEditor,
77
} from 'lexical';
88
import {$isCodeNode} from '@lexical/code';
9-
import {useDebounce} from '../utils';
9+
import {useDebounce} from '../hooks';
1010

1111
interface Props {
1212
editor: LexicalEditor;

‎packages/lexical/src/context/LexicalContext.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* MIT License
55
*/
66

7-
import {useState, createContext, useContext} from 'react';
7+
import { useState, createContext, useContext } from 'react';
88
import { LexicalEditor } from "lexical";
99

1010
type LexicalContextType = {

‎packages/lexical/src/editor/Editor.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,7 @@ import {
3737
} from "./..";
3838
import { commentTheme } from "../themes";
3939
import { useLexical } from "../context/LexicalContext";
40-
import TreeViewPlugin from "../plugins/TreeViewPlugin";
41-
import ToolbarPlugin from "../plugins/ToolbarPlugin";
40+
import { TreeViewPlugin, ToolbarPlugin } from "../plugins";
4241
import DraggableBlockPlugin from "../plugins/DraggableBlockPlugin"
4342

4443
import './../../style/index.css';
@@ -52,7 +51,7 @@ function Placeholder() {
5251
}
5352

5453
const initialConfig = {
55-
namespace: 'Jupyter Lexical Lexical example',
54+
namespace: 'Jupyter Lexical example',
5655
theme: commentTheme,
5756
onError(error: Error) {
5857
throw error;

‎packages/lexical/src/hooks/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@
44
* MIT License
55
*/
66

7+
export * from './useDebounce';
8+
export * from "./useLayoutEffect";
79
export * from "./useModal";

‎packages/lexical/src/utils/useDebounce.ts ‎packages/lexical/src/hooks/useDebounce.ts

File renamed without changes.

‎packages/lexical/src/utils/useLayoutEffect.ts ‎packages/lexical/src/hooks/useLayoutEffect.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
* MIT License
55
*/
66

7-
import {useEffect, useLayoutEffect} from 'react';
8-
import {CAN_USE_DOM} from './canUseDOM';
7+
import { useEffect, useLayoutEffect } from 'react';
8+
import { CAN_USE_DOM } from './../utils';
99

1010
export const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
1111
? useLayoutEffect

‎packages/lexical/src/plugins/CodeActionMenuPlugin.tsx

+42-54
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,27 @@
44
* MIT License
55
*/
66

7-
import type {JSX} from 'react';
8-
9-
import {
10-
$isCodeNode,
11-
CodeNode,
12-
getLanguageFriendlyName,
13-
normalizeCodeLang,
14-
} from '@lexical/code';
15-
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
16-
import {$getNearestNodeFromDOMNode, isHTMLElement} from 'lexical';
17-
import {useEffect, useRef, useState} from 'react';
18-
import {createPortal} from 'react-dom';
19-
20-
import {CopyButton} from '../components/CopyButton';
21-
import {canBePrettier, PrettierButton} from '../components/PrettierButton';
22-
import {useDebounce} from './../utils';
7+
import { useEffect, useRef, useState } from 'react';
8+
import type { JSX } from 'react';
9+
import { createPortal } from 'react-dom';
10+
import { $isCodeNode, CodeNode, getLanguageFriendlyName, normalizeCodeLang } from '@lexical/code';
11+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
12+
import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
13+
import { CopyButton } from '../components/CopyButton';
14+
import { canBePrettier, PrettierButton } from '../components/PrettierButton';
15+
import { useDebounce } from './../hooks';
2316

2417
import './../../style/lexical/CodeActionMenuPlugin.css';
2518

2619
const CODE_PADDING = 8;
2720

28-
interface Position {
21+
interface Position {
2922
top: string;
3023
right: string;
3124
}
3225

33-
function CodeActionMenuContainer({
34-
anchorElem,
35-
}: {
36-
anchorElem: HTMLElement;
37-
}): JSX.Element {
26+
function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }): JSX.Element {
3827
const [editor] = useLexicalComposerContext();
39-
4028
const [lang, setLang] = useState('');
4129
const [isShown, setShown] = useState<boolean>(false);
4230
const [shouldListenMouseMove, setShouldListenMouseMove] =
@@ -48,19 +36,19 @@ function CodeActionMenuContainer({
4836
const codeSetRef = useRef<Set<string>>(new Set());
4937
const codeDOMNodeRef = useRef<HTMLElement | null>(null);
5038

51-
function getCodeDOMNode(): HTMLElement | null {
39+
function getCodeDOMNode(): HTMLElement | null {
5240
return codeDOMNodeRef.current;
5341
}
5442

5543
const debouncedOnMouseMove = useDebounce(
56-
(event: MouseEvent) => {
57-
const {codeDOMNode, isOutside} = getMouseInfo(event);
58-
if (isOutside) {
44+
(event: MouseEvent) => {
45+
const { codeDOMNode, isOutside } = getMouseInfo(event);
46+
if (isOutside) {
5947
setShown(false);
6048
return;
6149
}
6250

63-
if (!codeDOMNode) {
51+
if (!codeDOMNode) {
6452
return;
6553
}
6654

@@ -69,19 +57,19 @@ function CodeActionMenuContainer({
6957
let codeNode: CodeNode | null = null;
7058
let _lang = '';
7159

72-
editor.update(() => {
60+
editor.update(() => {
7361
const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
7462

75-
if ($isCodeNode(maybeCodeNode)) {
63+
if ($isCodeNode(maybeCodeNode)) {
7664
codeNode = maybeCodeNode;
7765
_lang = codeNode.getLanguage() || '';
7866
}
7967
});
8068

81-
if (codeNode) {
82-
const {y: editorElemY, right: editorElemRight} =
69+
if (codeNode) {
70+
const { y: editorElemY, right: editorElemRight } =
8371
anchorElem.getBoundingClientRect();
84-
const {y, right} = codeDOMNode.getBoundingClientRect();
72+
const { y, right } = codeDOMNode.getBoundingClientRect();
8573
setLang(_lang);
8674
setShown(true);
8775
setPosition({
@@ -94,27 +82,27 @@ function CodeActionMenuContainer({
9482
1000,
9583
);
9684

97-
useEffect(() => {
98-
if (!shouldListenMouseMove) {
85+
useEffect(() => {
86+
if (!shouldListenMouseMove) {
9987
return;
10088
}
10189

10290
document.addEventListener('mousemove', debouncedOnMouseMove);
10391

104-
return () => {
92+
return () => {
10593
setShown(false);
10694
debouncedOnMouseMove.cancel();
10795
document.removeEventListener('mousemove', debouncedOnMouseMove);
10896
};
10997
}, [shouldListenMouseMove, debouncedOnMouseMove]);
11098

111-
useEffect(() => {
99+
useEffect(() => {
112100
return editor.registerMutationListener(
113101
CodeNode,
114-
(mutations) => {
115-
editor.getEditorState().read(() => {
116-
for (const [key, type] of mutations) {
117-
switch (type) {
102+
(mutations) => {
103+
editor.getEditorState().read(() => {
104+
for (const [key, type] of mutations) {
105+
switch (type) {
118106
case 'created':
119107
codeSetRef.current.add(key);
120108
break;
@@ -130,7 +118,7 @@ function CodeActionMenuContainer({
130118
});
131119
setShouldListenMouseMove(codeSetRef.current.size > 0);
132120
},
133-
{skipInitialization: false},
121+
{ skipInitialization: false},
134122
);
135123
}, [editor]);
136124

@@ -139,11 +127,11 @@ function CodeActionMenuContainer({
139127

140128
return (
141129
<>
142-
{isShown ? (
130+
{ isShown ? (
143131
<div className="code-action-menu-container" style={{...position}}>
144132
<div className="code-highlight-language">{codeFriendlyName}</div>
145-
<CopyButton editor={editor} getCodeDOMNode={getCodeDOMNode} />
146-
{canBePrettier(normalizedLang) ? (
133+
<CopyButton editor={editor } getCodeDOMNode={getCodeDOMNode } />
134+
{ canBePrettier(normalizedLang) ? (
147135
<PrettierButton
148136
editor={editor}
149137
getCodeDOMNode={getCodeDOMNode}
@@ -156,13 +144,13 @@ function CodeActionMenuContainer({
156144
);
157145
}
158146

159-
function getMouseInfo(event: MouseEvent): {
147+
function getMouseInfo(event: MouseEvent): {
160148
codeDOMNode: HTMLElement | null;
161149
isOutside: boolean;
162-
} {
150+
} {
163151
const target = event.target;
164152

165-
if (isHTMLElement(target)) {
153+
if (isHTMLElement(target)) {
166154
const codeDOMNode = target.closest<HTMLElement>(
167155
'code.PlaygroundEditorTheme__code',
168156
);
@@ -171,19 +159,19 @@ function getMouseInfo(event: MouseEvent): {
171159
target.closest<HTMLElement>('div.code-action-menu-container')
172160
);
173161

174-
return {codeDOMNode, isOutside};
175-
} else {
176-
return {codeDOMNode: null, isOutside: true};
162+
return { codeDOMNode, isOutside};
163+
} else {
164+
return { codeDOMNode: null, isOutside: true};
177165
}
178166
}
179167

180168
export function CodeActionMenuPlugin({
181169
anchorElem = document.body,
182-
}: {
170+
}: {
183171
anchorElem?: HTMLElement;
184-
}): React.ReactPortal | null {
172+
}): React.ReactPortal | null {
185173
return createPortal(
186-
<CodeActionMenuContainer anchorElem={anchorElem} />,
174+
<CodeActionMenuContainer anchorElem={anchorElem } />,
187175
anchorElem,
188176
);
189177
}

‎packages/lexical/src/plugins/MardownPlugin.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
* MIT License
55
*/
66

7-
import {MarkdownShortcutPlugin} from '@lexical/react/LexicalMarkdownShortcutPlugin';
8-
9-
import {PLAYGROUND_TRANSFORMERS} from '../convert/transformers/MarkdownTransformers';
7+
import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
8+
import { PLAYGROUND_TRANSFORMERS } from '../convert/transformers/MarkdownTransformers';
109

1110
export const MarkdownPlugin = (): JSX.Element => {
1211
return <MarkdownShortcutPlugin transformers={PLAYGROUND_TRANSFORMERS} />;

‎packages/lexical/src/plugins/TreeViewPlugin.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
* MIT License
55
*/
66

7-
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
8-
import {TreeView} from '@lexical/react/LexicalTreeView';
7+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
8+
import { TreeView } from '@lexical/react/LexicalTreeView';
99

10-
export default function TreeViewPlugin(): JSX.Element {
10+
export function TreeViewPlugin(): JSX.Element {
1111
const [editor] = useLexicalComposerContext();
1212
return (
1313
<TreeView
@@ -21,3 +21,5 @@ export default function TreeViewPlugin(): JSX.Element {
2121
/>
2222
);
2323
}
24+
25+
export default TreeViewPlugin;

‎packages/lexical/src/utils/index.ts

-2
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,3 @@ export * from "./point";
1414
export * from "./rect";
1515
export * from "./selection";
1616
export * from './setFloatingElemPosition';
17-
export * from './useDebounce';
18-
export * from "./useLayoutEffect";

0 commit comments

Comments
 (0)