TINY-10304: Fixed broken non-editable root advlist test (#9091) (#9104)

* TINY-10304: Fixed broken non-editable root advlist test (#9091)

* TINY-10304: Properly toggle editable root state

* TINY-10304: Try using the specific editor container

* TINY-10304: dump the whole page state

* TINY-10304: added missing AdvList plugin to hook init

* TINY-10304: Restored sync test and re-enabled all tests

* TINY-10304: Added changelog to mcagar

* TINY-10304: Added v6.5 API checking for mcagar TinyState

modules/mcagar/CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## Unreleased
 
+### Fixed
+
+- Changed so `TinyState.withNoneditableRootEditor` and `TinyState.withNoneditableRootEditorAsync` calls the setEditableRoot API instead of using direct dom mutation. #TINY-10304
+
 ## 8.4.0 - 2023-06-12
 
 ### Added

modules/mcagar/src/main/ts/ephox/mcagar/alien/EditorTypes.ts

@@ -47,6 +47,7 @@ export interface Editor {
   setContent: (content: string) => void;
 
   execCommand: (command: string, ui?: boolean, value?: any, args?: any) => boolean;
+  setEditableRoot?: (state: boolean) => void; // Introduced in v6.5
 
   nodeChanged: () => void;
   focus: () => void;

modules/mcagar/src/main/ts/ephox/mcagar/api/bdd/TinyState.ts

@@ -1,14 +1,22 @@
 import { Editor as EditorType } from '../../alien/EditorTypes';
 
+const setEditableRoot = <T extends EditorType = EditorType>(editor: T, state: boolean) => {
+  if (editor.setEditableRoot) {
+    editor.setEditableRoot(state);
+  } else {
+    throw new Error('setEditableRoot requires at least TinyMCE v6.5');
+  }
+};
+
 export const withNoneditableRootEditor = <T extends EditorType = EditorType>(editor: T, f: (editor: T) => void): void => {
-  editor.getBody().contentEditable = 'false';
+  setEditableRoot(editor, false);
   f(editor);
-  editor.getBody().contentEditable = 'true';
+  setEditableRoot(editor, true);
 };
 
 export const withNoneditableRootEditorAsync = async <T extends EditorType = EditorType>(editor: T, f: (editor: T) => Promise<void>): Promise<void> => {
-  editor.getBody().contentEditable = 'false';
+  setEditableRoot(editor, false);
   await f(editor);
-  editor.getBody().contentEditable = 'true';
+  setEditableRoot(editor, true);
 };
 

modules/tinymce/src/plugins/advlist/test/ts/browser/NoneditableRootTest.ts

@@ -1,10 +1,11 @@
 import { UiFinder } from '@ephox/agar';
 import { context, describe, it } from '@ephox/bedrock-client';
 import { SugarBody } from '@ephox/sugar';
-import { TinyAssertions, TinyHooks, TinySelections, TinyState, TinyUiActions } from '@ephox/wrap-mcagar';
+import { TinyAssertions, TinyDom, TinyHooks, TinySelections, TinyState, TinyUiActions } from '@ephox/wrap-mcagar';
 
 import Editor from 'tinymce/core/api/Editor';
-import Plugin from 'tinymce/plugins/lists/Plugin';
+import AdvListPlugin from 'tinymce/plugins/advlist/Plugin';
+import ListPlugin from 'tinymce/plugins/lists/Plugin';
 
 describe('browser.tinymce.plugins.advlist.NoneditableRootTest', () => {
   const hook = TinyHooks.bddSetup<Editor>({
@@ -13,21 +14,21 @@ describe('browser.tinymce.plugins.advlist.NoneditableRootTest', () => {
     contextmenu: 'lists',
     indent: false,
     base_url: '/project/tinymce/js/tinymce'
-  }, [ Plugin ], true);
+  }, [ ListPlugin, AdvListPlugin ], true);
 
   context('List ui controls', () => {
     const initialListContent = '<ol><li>a</li></ol>';
     const setupEditor = (editor: Editor) => {
       editor.setContent(initialListContent);
-      TinySelections.setCursor(editor, [ 0, 0, 0 ], 0);
+      TinySelections.setSelection(editor, [ 0, 0, 0 ], 0, [ 0, 0, 0 ], 1);
     };
 
     it('TINY-9458: List buttons numlist/bullist should be disabled', () => {
       TinyState.withNoneditableRootEditor<Editor>(hook.editor(), (editor) => {
         setupEditor(editor);
 
-        UiFinder.exists(SugarBody.body(), 'div[title="Numbered list"][aria-disabled="true"]');
-        UiFinder.exists(SugarBody.body(), 'div[title="Bullet list"][aria-disabled="true"]');
+        UiFinder.exists(TinyDom.container(editor), 'div[title="Numbered list"][aria-disabled="true"]');
+        UiFinder.exists(TinyDom.container(editor), 'div[title="Bullet list"][aria-disabled="true"]');
       });
     });