Ensure document is defined during hasFocus (#6711)

Ensure document is defined during hasFocus. Fixes #6707.

packages/core/src/canvas/index.ts

@@ -138,7 +138,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
    */
   getDocument() {
     const frame = this.getFrameEl();
-    return frame?.contentDocument as Document;
+    return frame?.contentDocument;
   }
 
   /**
@@ -566,7 +566,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
    * @returns {Boolean}
    */
   hasFocus() {
-    return this.getDocument().hasFocus();
+    return !!this.getDocument()?.hasFocus?.();
   }
 
   /**

packages/core/src/utils/sorter/ComponentSorter.ts

@@ -244,9 +244,11 @@ export default class ComponentSorter<NodeType extends BaseComponentNode> extends
     const targetDoc = Canvas.getDocument();
     let range = null;
 
+    if (!targetDoc) return;
+
     const poiner = getPointerEvent(e);
 
-    // @ts-ignore
+    // @ts-ignore not yet widely supported
     if (targetDoc.caretPositionFromPoint) {
       // New standard method
       // @ts-ignore

packages/core/test/specs/canvas/index.ts

@@ -20,6 +20,20 @@ describe('Canvas', () => {
     expect(canvas).toBeTruthy();
   });
 
+  describe('Focus', () => {
+    test('hasFocus() returns false if document is unavailable', () => {
+      jest.spyOn(canvas, 'getDocument').mockReturnValue(null as any);
+      expect(canvas.hasFocus()).toBe(false);
+    });
+
+    test('hasFocus() proxies document hasFocus when available', () => {
+      const hasFocus = jest.fn(() => true);
+      jest.spyOn(canvas, 'getDocument').mockReturnValue({ hasFocus } as any);
+      expect(canvas.hasFocus()).toBe(true);
+      expect(hasFocus).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('Canvas Spots', () => {
     describe('addSpot()', () => {
       test('Add single spot', () => {

packages/core/test/specs/grapesjs/index.ts

@@ -122,8 +122,8 @@ describe('GrapesJS', () => {
       config.protectedCss = '';
       const editor = initTestEditor(config);
       editor.onReady(() => {
-        const htmlEl = editor.Canvas.getDocument().documentElement;
-        expect(htmlEl.outerHTML.replace(/\s+/g, ' ')).toContain('body { background-color: #fff');
+        const htmlEl = editor.Canvas.getDocument()?.documentElement;
+        expect(htmlEl?.outerHTML.replace(/\s+/g, ' ')).toContain('body { background-color: #fff');
         done();
       });
     });