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