diff --git a/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.test.tsx b/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.test.tsx index 0bbbe8f44a0..eee8d45be5c 100644 --- a/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.test.tsx +++ b/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.test.tsx @@ -6,6 +6,7 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin' import LexicalEditor from './LexicalEditor' import type { Props } from './LexicalEditor' import LexicalTextLengthPlugin from '../LexicalTextLengthPlugin' +import LexicalHeadingsReplacementPlugin from '../LexicalHeadingsReplacementPlugin' import ToolbarPlugin from '../LexicalEditorToolbarPlugin' import LexicalListPlugin from '../LexicalListPlugin' @@ -43,9 +44,19 @@ jest.mock('../LexicalTextLengthPlugin', () => ({ default: jest.fn(() =>
LexicalTextLengthPlugin
), })) +jest.mock('../LexicalHeadingsReplacementPlugin', () => ({ + __esModule: true, + default: jest.fn(() =>
LexicalHeadingsReplacementPlugin
), +})) + const mockedLexicalTextLengthPlugin = LexicalTextLengthPlugin as jest.MockedFunction +const mockedLexicalHeadingsReplacementPlugin = + LexicalHeadingsReplacementPlugin as jest.MockedFunction< + typeof LexicalHeadingsReplacementPlugin + > + const mockedToolbarPlugin = ToolbarPlugin as jest.MockedFunction< typeof ToolbarPlugin > @@ -67,6 +78,7 @@ const renderLexicalEditor = (props: Partial> = {}) => { describe('LexicalEditor', () => { beforeEach(() => { mockedLexicalTextLengthPlugin.mockImplementation(() => null) + mockedLexicalHeadingsReplacementPlugin.mockImplementation(() => null) mockedToolbarPlugin.mockImplementation(() => (
LexicalEditorToolbarPlugin
)) @@ -98,6 +110,14 @@ describe('LexicalEditor', () => { ) }) + it('renders LexicalHeadingsReplacementPlugin', async () => { + renderLexicalEditor() + + await waitFor(() => + expect(mockedLexicalHeadingsReplacementPlugin).toHaveBeenCalled() + ) + }) + it('renders OnChangePlugin with correct props', () => { renderLexicalEditor() diff --git a/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.tsx b/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.tsx index 341865000c6..1f681d3fe70 100644 --- a/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.tsx +++ b/packages/picasso-rich-text-editor/src/LexicalEditor/LexicalEditor.tsx @@ -23,6 +23,7 @@ import type { ChangeHandler, TextLengthChangeHandler } from './types' import ToolbarPlugin from '../LexicalEditorToolbarPlugin' import LexicalTextLengthPlugin from '../LexicalTextLengthPlugin' import LexicalListPlugin from '../LexicalListPlugin' +import LexicalHeadingsReplacementPlugin from '../LexicalHeadingsReplacementPlugin' const useStyles = makeStyles(styles, { name: 'LexicalEditor', @@ -172,6 +173,7 @@ const LexicalEditor = forwardRef(function LexicalEditor( {autoFocus && } + diff --git a/packages/picasso-rich-text-editor/src/LexicalEditor/utils/index.ts b/packages/picasso-rich-text-editor/src/LexicalEditor/utils/index.ts index e00c072310f..375dc9d77c2 100644 --- a/packages/picasso-rich-text-editor/src/LexicalEditor/utils/index.ts +++ b/packages/picasso-rich-text-editor/src/LexicalEditor/utils/index.ts @@ -3,4 +3,3 @@ export { synchronizeToolbarState } from './synchronizeToolbarState' export { toolbarStateReducer } from './toolbarState' export { getLexicalNode } from './getLexicalNode' export { createLexicalTheme } from './createLexicalTheme' -export { replaceHeadingNodes } from './replaceHeadingNodes' diff --git a/packages/picasso-rich-text-editor/src/LexicalEditor/utils/registerLexicalEvents.ts b/packages/picasso-rich-text-editor/src/LexicalEditor/utils/registerLexicalEvents.ts index 85dc3384f11..ad50e8306e6 100644 --- a/packages/picasso-rich-text-editor/src/LexicalEditor/utils/registerLexicalEvents.ts +++ b/packages/picasso-rich-text-editor/src/LexicalEditor/utils/registerLexicalEvents.ts @@ -1,8 +1,5 @@ -import type { LexicalEditor } from 'lexical' -import { HeadingNode } from '@lexical/rich-text' import { COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND } from 'lexical' - -import { replaceHeadingNodes } from './replaceHeadingNodes' +import type { LexicalEditor } from 'lexical' export type LexicalRegisterParams = { editor: LexicalEditor @@ -31,15 +28,9 @@ export const registerLexicalEvents = ({ COMMAND_PRIORITY_CRITICAL ) - const headingListener = editor.registerNodeTransform( - HeadingNode, - replaceHeadingNodes - ) - // Cleanup is necessary to avoid listeners piling up with useEffect return () => { editorListenerCleanup() editorCommandsCleanup() - headingListener() } } diff --git a/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/LexicalHeadingsReplacementPlugin.ts b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/LexicalHeadingsReplacementPlugin.ts new file mode 100644 index 00000000000..c9bb5129ef0 --- /dev/null +++ b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/LexicalHeadingsReplacementPlugin.ts @@ -0,0 +1,17 @@ +import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' +import { HeadingNode } from '@lexical/rich-text' +import { useEffect } from 'react' + +import { replaceHeadingNodes } from './utils' + +const LexicalHeadingsReplacementPlugin = () => { + const [editor] = useLexicalComposerContext() + + useEffect(() => { + return editor.registerNodeTransform(HeadingNode, replaceHeadingNodes) + }, [editor]) + + return null +} + +export default LexicalHeadingsReplacementPlugin diff --git a/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/index.ts b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/index.ts new file mode 100644 index 00000000000..eb767ec96a7 --- /dev/null +++ b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/index.ts @@ -0,0 +1 @@ +export { default } from './LexicalHeadingsReplacementPlugin' diff --git a/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/index.ts b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/index.ts new file mode 100644 index 00000000000..acf8b1789fe --- /dev/null +++ b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/index.ts @@ -0,0 +1 @@ +export { replaceHeadingNodes } from './replaceHeadingNodes' diff --git a/packages/picasso-rich-text-editor/src/LexicalEditor/utils/replaceHeadingNodes.test.ts b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/replaceHeadingNodes.test.ts similarity index 89% rename from packages/picasso-rich-text-editor/src/LexicalEditor/utils/replaceHeadingNodes.test.ts rename to packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/replaceHeadingNodes.test.ts index ebd6f330694..cab8d8d20bb 100644 --- a/packages/picasso-rich-text-editor/src/LexicalEditor/utils/replaceHeadingNodes.test.ts +++ b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/replaceHeadingNodes.test.ts @@ -52,11 +52,13 @@ describe('replaceHeadingNodes', () => { ) const appendMock = jest.fn() + const selectMock = jest.fn() mockedCreateParagraphNode.mockImplementation( () => ({ append: appendMock, + select: selectMock, } as unknown as ParagraphNode) ) @@ -67,8 +69,12 @@ describe('replaceHeadingNodes', () => { expect(setFormatMock).toHaveBeenCalledWith('bold') expect(appendMock).toHaveBeenCalledWith({ setFormat: setFormatMock }) + expect(selectMock).toHaveBeenCalled() - expect(node.replace).toHaveBeenCalledWith({ append: appendMock }) + expect(node.replace).toHaveBeenCalledWith({ + append: appendMock, + select: selectMock, + }) }) }) }) diff --git a/packages/picasso-rich-text-editor/src/LexicalEditor/utils/replaceHeadingNodes.ts b/packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/replaceHeadingNodes.ts similarity index 100% rename from packages/picasso-rich-text-editor/src/LexicalEditor/utils/replaceHeadingNodes.ts rename to packages/picasso-rich-text-editor/src/LexicalHeadingsReplacementPlugin/utils/replaceHeadingNodes.ts