fix(editor): use nullable inline editor root element (#9320)

Fixes `sentry-7906c03b79a54ede819c56cc15ad9889`

blocksuite/framework/inline/src/services/event.ts

@@ -19,6 +19,8 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
     if (range.commonAncestorContainer.ownerDocument !== document) return false;
 
     const rootElement = this.editor.rootElement;
+    if (!rootElement) return false;
+
     const rootRange = document.createRange();
     rootRange.selectNode(rootElement);
 
@@ -140,7 +142,9 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
 
   private readonly _onCompositionEnd = async (event: CompositionEvent) => {
     this._isComposing = false;
-    if (!this.editor.rootElement.isConnected) return;
+    if (!this.editor.rootElement || !this.editor.rootElement.isConnected) {
+      return;
+    }
 
     const range = this.editor.rangeService.getNativeRange();
     if (
@@ -181,6 +185,7 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
 
   private readonly _onCompositionStart = () => {
     this._isComposing = true;
+    if (!this.editor.rootElement) return;
     // embeds is not editable and it will break IME
     const embeds = this.editor.rootElement.querySelectorAll(
       '[data-v-embed="true"]'
@@ -198,7 +203,9 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
   };
 
   private readonly _onCompositionUpdate = () => {
-    if (!this.editor.rootElement.isConnected) return;
+    if (!this.editor.rootElement || !this.editor.rootElement.isConnected) {
+      return;
+    }
 
     const range = this.editor.rangeService.getNativeRange();
     if (
@@ -272,6 +279,8 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
 
   private readonly _onSelectionChange = () => {
     const rootElement = this.editor.rootElement;
+    if (!rootElement) return;
+
     const previousInlineRange = this.editor.getInlineRange();
     if (this._isComposing) {
       return;
@@ -361,7 +370,9 @@ export class EventService<TextAttributes extends BaseTextAttributes> {
       'keydown',
       this._onKeyDown
     );
-    this.editor.disposables.addFromEvent(rootElement, 'click', this._onClick);
+    if (rootElement) {
+      this.editor.disposables.addFromEvent(rootElement, 'click', this._onClick);
+    }
   };
 
   get isComposing() {

blocksuite/framework/inline/src/services/range.ts

@@ -63,6 +63,8 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
     rangeIndexRelatedToLine: number;
   } | null => {
     const rootElement = this.editor.rootElement;
+    if (!rootElement) return null;
+
     const lineElements = Array.from(rootElement.querySelectorAll('v-line'));
 
     let beforeIndex = 0;
@@ -100,6 +102,8 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
 
   getTextPoint = (rangeIndex: InlineRange['index']): TextPoint | null => {
     const rootElement = this.editor.rootElement;
+    if (!rootElement) return null;
+
     const vLines = Array.from(rootElement.querySelectorAll('v-line'));
 
     let index = 0;
@@ -280,6 +284,7 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
     const handler = () => {
       const selection = document.getSelection();
       if (!selection) return;
+      if (!this.editor.rootElement) return;
 
       if (inlineRange === null) {
         if (selection.rangeCount > 0) {
@@ -321,6 +326,7 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
    */
   toDomRange = (inlineRange: InlineRange): Range | null => {
     const rootElement = this.editor.rootElement;
+    if (!rootElement) return null;
     return inlineRangeToDomRange(rootElement, inlineRange);
   };
 
@@ -358,7 +364,7 @@ export class RangeService<TextAttributes extends BaseTextAttributes> {
    */
   toInlineRange = (range: Range): InlineRange | null => {
     const { rootElement, yText } = this.editor;
-
+    if (!rootElement || !yText) return null;
     return domRangeToInlineRange(range, rootElement, yText);
   };
 

blocksuite/framework/inline/src/services/render.ts

@@ -78,7 +78,7 @@ export class RenderService<TextAttributes extends BaseTextAttributes> {
   }
   // render current deltas to VLines
   render = () => {
-    if (!this.editor.mounted) return;
+    if (!this.editor.rootElement) return;
 
     this._rendering = true;
 
@@ -160,7 +160,7 @@ export class RenderService<TextAttributes extends BaseTextAttributes> {
   rerenderWholeEditor = () => {
     const rootElement = this.editor.rootElement;
 
-    if (!rootElement.isConnected) return;
+    if (!rootElement || !rootElement.isConnected) return;
 
     rootElement.replaceChildren();
     // Because we bypassed Lit and disrupted the DOM structure, this will cause an inconsistency in the original state of `ChildPart`.
@@ -172,6 +172,7 @@ export class RenderService<TextAttributes extends BaseTextAttributes> {
   };
 
   waitForUpdate = async () => {
+    if (!this.editor.rootElement) return;
     const vLines = Array.from(
       this.editor.rootElement.querySelectorAll('v-line')
     );