From 8b5f956aad3d147befe75749272ac97e118e1abb Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Fri, 7 Jun 2024 11:39:34 +0200
Subject: [PATCH] Use `detachEditable` function with additional checks to
 remove editable

---
 src/useMultiRootEditor.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/useMultiRootEditor.tsx b/src/useMultiRootEditor.tsx
index 5f7aec3..6cd7426 100644
--- a/src/useMultiRootEditor.tsx
+++ b/src/useMultiRootEditor.tsx
@@ -566,12 +566,11 @@ const EditorEditable = memo( forwardRef( ( { id, semaphore, rootName }: {
 
 			editor = instance;
 
-			const { ui } = editor;
-			const prevEditable = ui.view.editables[ rootName ];
+			const { ui, model } = editor;
+			const root = model.document.getRoot( rootName );
 
-			if ( prevEditable ) {
-				ui.removeEditable( prevEditable );
-				ui.view.removeEditable( rootName );
+			if ( root && editor.ui.getEditableElement( rootName ) ) {
+				editor.detachEditable( root );
 			}
 
 			editable = ui.view.createEditable( rootName, innerRef.current );
@@ -581,11 +580,12 @@ const EditorEditable = memo( forwardRef( ( { id, semaphore, rootName }: {
 		} );
 
 		return () => {
-			if ( editable && innerRef.current && editor && editor.state !== 'destroyed' ) {
-				const { ui } = editor;
+			if ( editor && editor.state !== 'destroyed' && innerRef.current ) {
+				const root = editor.model.document.getRoot( rootName );
 
-				ui.removeEditable( editable );
-				ui.view.removeEditable( rootName );
+				if ( root ) {
+					editor.detachEditable( root );
+				}
 			}
 		};
 	}, [ semaphore.revision ] );