opentiny 6.9.0

package/src/plugins/quickbars/main/ts/insert/Picker.ts

@@ -0,0 +1,56 @@
+import Editor from 'tinymce/core/api/Editor';
+import Delay from 'tinymce/core/api/util/Delay';
+import { EditorEvent } from 'tinymce/core/api/util/EventDispatcher';
+
+const pickFile = (editor: Editor): Promise<File[]> => new Promise((resolve) => {
+  let resolved = false;
+
+  const fileInput: HTMLInputElement = document.createElement('input');
+  fileInput.type = 'file';
+  fileInput.accept = 'image/*';
+  fileInput.style.position = 'fixed';
+  fileInput.style.left = '0';
+  fileInput.style.top = '0';
+  fileInput.style.opacity = '0.001';
+  document.body.appendChild(fileInput);
+
+  const resolveFileInput = (value: File[]) => {
+    if (!resolved) {
+      fileInput.parentNode?.removeChild(fileInput);
+      resolved = true;
+      resolve(value);
+    }
+  };
+
+  const changeHandler = (e: Event) => {
+    resolveFileInput(Array.prototype.slice.call((e.target as HTMLInputElement).files));
+  };
+
+  fileInput.addEventListener('input', changeHandler);
+  fileInput.addEventListener('change', changeHandler);
+
+  const cancelHandler = (e: EditorEvent<{}>) => {
+    const cleanup = () => {
+      resolveFileInput([]);
+    };
+
+    if (!resolved ) {
+      if (e.type === 'focusin') {
+        // Chrome will fire `focusin` before the input `change` event
+        Delay.setEditorTimeout(editor, cleanup, 1000);
+      } else {
+        cleanup();
+      }
+    }
+
+    editor.off('focusin remove', cancelHandler);
+  };
+
+  editor.on('focusin remove', cancelHandler);
+
+  fileInput.click();
+});
+
+export {
+  pickFile
+};

package/src/plugins/quickbars/main/ts/insert/Toolbars.ts

@@ -0,0 +1,34 @@
+import { Fun } from '@ephox/katamari';
+import { Attribute, PredicateExists, SelectorFind, SugarElement, SugarNode } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+
+import * as Options from '../api/Options';
+
+const addToEditor = (editor: Editor): void => {
+  const insertToolbarItems = Options.getInsertToolbarItems(editor);
+  if (insertToolbarItems.length > 0) {
+    editor.ui.registry.addContextToolbar('quickblock', {
+      predicate: (node) => {
+        const sugarNode = SugarElement.fromDom(node);
+        const textBlockElementsMap = editor.schema.getTextBlockElements();
+        const isRoot = (elem: SugarElement<Node>) => elem.dom === editor.getBody();
+        return !Attribute.has(sugarNode, 'data-mce-bogus') && SelectorFind.closest(sugarNode, 'table,[data-mce-bogus="all"]', isRoot).fold(
+          () => PredicateExists.closest(
+            sugarNode,
+            (elem) => SugarNode.name(elem) in textBlockElementsMap && editor.dom.isEmpty(elem.dom),
+            isRoot
+          ),
+          Fun.never
+        );
+      },
+      items: insertToolbarItems,
+      position: 'line',
+      scope: 'editor'
+    });
+  }
+};
+
+export {
+  addToEditor
+};

package/src/plugins/quickbars/main/ts/selection/Bookmark.ts

@@ -0,0 +1,122 @@
+import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
+
+interface Bookmark {
+  startContainer: Node;
+  startOffset: number;
+  endContainer?: Node;
+  endOffset?: number;
+}
+
+/**
+ * Returns a range bookmark. This will convert indexed bookmarks into temporary span elements with
+ * index 0 so that they can be restored properly after the DOM has been modified. Text bookmarks will not have spans
+ * added to them since they can be restored after a dom operation.
+ *
+ * So this: <p><b>|</b><b>|</b></p>
+ * becomes: <p><b><span data-mce-type="bookmark">|</span></b><b data-mce-type="bookmark">|</span></b></p>
+ *
+ * @param  {DOMRange} rng DOM Range to get bookmark on.
+ * @return {Object} Bookmark object.
+ */
+const create = (dom: DOMUtils, rng: Range): Bookmark => {
+  const bookmark: Partial<Bookmark> = {};
+
+  const setupEndPoint = (start?: boolean) => {
+    let container = rng[start ? 'startContainer' : 'endContainer'];
+    let offset = rng[start ? 'startOffset' : 'endOffset'];
+
+    if (container.nodeType === 1) {
+      const offsetNode = dom.create('span', { 'data-mce-type': 'bookmark' });
+
+      if (container.hasChildNodes()) {
+        offset = Math.min(offset, container.childNodes.length - 1);
+
+        if (start) {
+          container.insertBefore(offsetNode, container.childNodes[offset]);
+        } else {
+          dom.insertAfter(offsetNode, container.childNodes[offset]);
+        }
+      } else {
+        container.appendChild(offsetNode);
+      }
+
+      container = offsetNode;
+      offset = 0;
+    }
+
+    bookmark[start ? 'startContainer' : 'endContainer'] = container;
+    bookmark[start ? 'startOffset' : 'endOffset'] = offset;
+  };
+
+  setupEndPoint(true);
+
+  if (!rng.collapsed) {
+    setupEndPoint();
+  }
+
+  return bookmark as Bookmark;
+};
+
+/**
+ * Moves the selection to the current bookmark and removes any selection container wrappers.
+ *
+ * @param {Object} bookmark Bookmark object to move selection to.
+ */
+const resolve = (dom: DOMUtils, bookmark: Bookmark): Range => {
+  const restoreEndPoint = (start?: boolean) => {
+    const nodeIndex = (container: Node) => {
+      let node = container.parentNode?.firstChild;
+      let idx = 0;
+
+      while (node) {
+        if (node === container) {
+          return idx;
+        }
+
+        // Skip data-mce-type=bookmark nodes
+        if (node.nodeType !== 1 || (node as Element).getAttribute('data-mce-type') !== 'bookmark') {
+          idx++;
+        }
+
+        node = node.nextSibling;
+      }
+
+      return -1;
+    };
+
+    let container = bookmark[start ? 'startContainer' : 'endContainer'];
+    let offset = bookmark[start ? 'startOffset' : 'endOffset'];
+
+    if (!container) {
+      return;
+    }
+
+    if (container.nodeType === 1 && container.parentNode) {
+      const node = container;
+      offset = nodeIndex(container);
+      container = container.parentNode;
+      dom.remove(node);
+    }
+
+    bookmark[start ? 'startContainer' : 'endContainer'] = container;
+    bookmark[start ? 'startOffset' : 'endOffset'] = offset as number;
+  };
+
+  restoreEndPoint(true);
+  restoreEndPoint();
+
+  const rng = dom.createRng();
+
+  rng.setStart(bookmark.startContainer, bookmark.startOffset);
+
+  if (bookmark.endContainer) {
+    rng.setEnd(bookmark.endContainer, bookmark.endOffset as number);
+  }
+
+  return rng;
+};
+
+export {
+  create,
+  resolve
+};

package/src/plugins/quickbars/main/ts/selection/Toolbars.ts

@@ -0,0 +1,39 @@
+import { Class, SugarElement } from '@ephox/sugar';
+
+import Editor from 'tinymce/core/api/Editor';
+
+import * as Options from '../api/Options';
+
+const addToEditor = (editor: Editor): void => {
+  const isEditable = (node: Element | null): boolean => editor.dom.isEditable(node);
+  const isInEditableContext = (el: Element) => isEditable(el.parentElement);
+  const isImage = (node: Element): boolean => {
+    const isImageFigure = node.nodeName === 'FIGURE' && /image/i.test(node.className);
+    const isImage = node.nodeName === 'IMG' || isImageFigure;
+    const isPagebreak = Class.has(SugarElement.fromDom(node), 'mce-pagebreak');
+    return isImage && isInEditableContext(node) && !isPagebreak;
+  };
+
+  const imageToolbarItems = Options.getImageToolbarItems(editor);
+  if (imageToolbarItems.length > 0) {
+    editor.ui.registry.addContextToolbar('imageselection', {
+      predicate: isImage,
+      items: imageToolbarItems,
+      position: 'node'
+    });
+  }
+
+  const textToolbarItems = Options.getTextSelectionToolbarItems(editor);
+  if (textToolbarItems.length > 0) {
+    editor.ui.registry.addContextToolbar('textselection', {
+      predicate: (node) => !isImage(node) && !editor.selection.isCollapsed() && isEditable(node),
+      items: textToolbarItems,
+      position: 'selection',
+      scope: 'editor'
+    });
+  }
+};
+
+export {
+  addToEditor
+};

package/src/plugins/quickbars/test/ts/browser/ContentEditableTest.ts

@@ -0,0 +1,122 @@
+import { Mouse, UiFinder } from '@ephox/agar';
+import { context, describe, it } from '@ephox/bedrock-client';
+import { TinyAssertions, TinyDom, TinyHooks, TinySelections, TinyState } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/quickbars/Plugin';
+
+import { pAssertToolbarNotVisible, pAssertToolbarVisible } from '../module/test/Utils';
+
+// TODO TINY-10480: Investigate flaky tests
+describe.skip('browser.tinymce.plugins.quickbars.ContentEditableTest', () => {
+  const hook = TinyHooks.bddSetup<Editor>({
+    plugins: 'quickbars link',
+    inline: true,
+    toolbar: false,
+    menubar: false,
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ], true);
+
+  it('TBA: Text selection toolbar is not shown with contenteditable=false', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p>abc</p><p contenteditable="false">cab</p>');
+    TinySelections.setSelection(editor, [ 0, 0 ], 0, [ 0, 0 ], 1);
+    await pAssertToolbarVisible();
+    TinySelections.select(editor, 'p[contenteditable=false]', []);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TBA: Text selection toolbar is not shown with contenteditable=false parent, select parent', async () => {
+    const editor = hook.editor();
+    editor.setContent('<div><p>abc</p></div><div contenteditable="false"><p>cab</p></div>');
+    TinySelections.select(editor, 'div', []);
+    await pAssertToolbarVisible();
+    TinySelections.select(editor, 'div[contenteditable=false]', []);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TBA: Text selection toolbar is not shown with contenteditable=false parent, select child of parent', async () => {
+    const editor = hook.editor();
+    editor.setContent('<div><p>abc</p></div><div contenteditable="false"><p>cab</p></div>');
+    TinySelections.select(editor, 'div p', []);
+    await pAssertToolbarVisible();
+    TinySelections.select(editor, 'div[contenteditable=false] p', []);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TBA: Text selection toolbar is not shown with contenteditable=false span, select span', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p>abc</p><p>abc <span contenteditable="false">click on me</span> 123</p>');
+    TinySelections.setSelection(editor, [ 0, 0 ], 0, [ 0, 0 ], 1);
+    await pAssertToolbarVisible();
+    TinySelections.select(editor, 'p span', []);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TINY-9190: Toolbar is not shown in the fake caret', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p contenteditable="false">CEF element</p>');
+    // Selection is in the fake caret
+    TinyAssertions.assertCursor(editor, [ 0 ], 0);
+    TinyAssertions.assertContentPresence(editor, { 'p[data-mce-bogus="all"]': 1, 'p[data-mce-caret="before"]': 1 });
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TINY-9305: Toolbar is not shown when dragging', async () => {
+    const editor = hook.editor();
+    const emptyP = '<p>&nbsp;</p>';
+    editor.setContent(emptyP + emptyP + emptyP + '<p id="cefElement" contenteditable="false">CEF element</p>' + emptyP + emptyP + emptyP);
+    const elem = UiFinder.findIn(TinyDom.body(editor), '#cefElement').getOrDie();
+    Mouse.mouseDown(elem);
+    Mouse.mouseMoveTo(elem, 10, -75);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TINY-9305: Dragging CEF elements outside the editor should not prevent successive triggers of the quickbars', async () => {
+    const editor = hook.editor();
+    const emptyP = '<p>&nbsp;</p>';
+    editor.setContent(emptyP + emptyP + emptyP + '<p id="cefElement" contenteditable="false">CEF element</p>' + emptyP + emptyP + emptyP);
+    const elem = UiFinder.findIn(TinyDom.body(editor), '#cefElement').getOrDie();
+    Mouse.mouseDown(elem);
+    Mouse.mouseMoveTo(elem, -1000, -1000);
+    Mouse.mouseUp(elem);
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 0);
+    await pAssertToolbarVisible();
+  });
+
+  context('Noneditable root', () => {
+    it('TINY-9460: Text selection toolbar is not shown on text in noneditable root', async () => {
+      await TinyState.withNoneditableRootEditorAsync(hook.editor(), async (editor) => {
+        editor.setContent('<p>abc</p>');
+        TinySelections.setSelection(editor, [ 0, 0 ], 0, [ 0, 0 ], 1);
+        await pAssertToolbarNotVisible();
+      });
+    });
+
+    it('TINY-9460: Text selection toolbar is shown on editable text in noneditable root', async () => {
+      await TinyState.withNoneditableRootEditorAsync(hook.editor(), async (editor) => {
+        editor.setContent('<p contenteditable="true">abc</p>');
+        TinySelections.setSelection(editor, [ 0, 0 ], 0, [ 0, 0 ], 1);
+        await pAssertToolbarVisible();
+        TinySelections.setCursor(editor, [ 0, 0 ], 0, true);
+        await pAssertToolbarNotVisible();
+      });
+    });
+
+    it('TINY-9460: Image selection toolbar is not shown images in noneditable root', async () => {
+      await TinyState.withNoneditableRootEditorAsync(hook.editor(), async (editor) => {
+        editor.setContent('<p><img src="about:blank"></p>');
+        TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+        await pAssertToolbarNotVisible();
+      });
+    });
+
+    it('TINY-9460: Image selection toolbar is shown editable images in noneditable root', async () => {
+      await TinyState.withNoneditableRootEditorAsync(hook.editor(), async (editor) => {
+        editor.setContent('<p contenteditable="true"><img src="about:blank"></p>');
+        TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+        await pAssertToolbarVisible();
+      });
+    });
+  });
+});

package/src/plugins/quickbars/test/ts/browser/InsertToolbarPredicateTest.ts

@@ -0,0 +1,70 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyHooks, TinySelections } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/quickbars/Plugin';
+
+import { pAssertToolbarNotVisible, pAssertToolbarVisible } from '../module/test/Utils';
+
+// TODO TINY-10480: Investigate flaky tests
+describe.skip('browser.tinymce.plugins.quickbars.InsertToolbarPredicateTest', () => {
+  const hook = TinyHooks.bddSetup<Editor>({
+    plugins: 'quickbars link code',
+    inline: true,
+    toolbar: false,
+    menubar: false,
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ], true);
+
+  it('TINY-9190: Toolbar is shown when the pagragraph is empty', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p></p>', { format: 'raw' });
+    TinySelections.setCursor(editor, [ 0 ], 0);
+    await pAssertToolbarVisible();
+  });
+
+  it('TINY-9190: Toolbar is shown when the cursor is in an empty element', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><span><span><span></span></span></span></p>', { format: 'raw' });
+    TinySelections.setCursor(editor, [ 0, 0, 0, 0 ], 0);
+    await pAssertToolbarVisible();
+  });
+
+  it('TINY-9190: Toolbar is shown when the ancesor element has a data-mce-bogus="1" attribute', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><span><span data-mce-bogus="1"><span></span></span></span></p>', { format: 'raw' });
+    TinySelections.setCursor(editor, [ 0, 0, 0, 0 ], 0);
+    await pAssertToolbarVisible();
+  });
+
+  it('TINY-9190: Toolbar is not shown on the element that has "data-mce-bogus" attribute', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><span data-mce-bogus="1"></span></p>', { format: 'raw' });
+    TinySelections.setCursor(editor, [ 0, 0 ], 0);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TINY-9190: Toolbar is not shown when the ancestor element has a data-mce-bogus="all" attribute', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><span><span data-mce-bogus="all"><span><span></span></span></span></span></p>', { format: 'raw' });
+    TinySelections.setCursor(editor, [ 0, 0, 0, 0, 0 ], 0);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TINY-9190: Toolbar is not shown when the ancestor element is a table', async () => {
+    const editor = hook.editor();
+    const table = '<table><tbody>' +
+    '<tr><td></td></tr>' +
+    '</tbody></table>';
+    editor.setContent(`${table}`);
+    TinySelections.setCursor(editor, [ 0, 0, 0 ], 0);
+    await pAssertToolbarNotVisible();
+  });
+
+  it('TINY-9190: Toolbar is not shown on non-empty element', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p>Not an empty element</p>', { format: 'raw' });
+    TinySelections.setCursor(editor, [ 0 ], 0);
+    await pAssertToolbarNotVisible();
+  });
+});

package/src/plugins/quickbars/test/ts/browser/KeyboardShortcutContextToolbarTest.ts

@@ -0,0 +1,30 @@
+import { FocusTools, Keys } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { SugarDocument } from '@ephox/sugar';
+import { TinyHooks, TinySelections, TinyContentActions, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/quickbars/Plugin';
+
+describe('browser.tinymce.plugins.quickbars.KeyboardShortcutContextToolbarTest', () => {
+  const hook = TinyHooks.bddSetup<Editor>({
+    plugins: 'quickbars',
+    quickbars_insert_toolbar: 'quicktable image media codesample',
+    quickbars_selection_toolbar: 'bold italic underline | formatselect | bullist numlist | blockquote quicklink',
+    contextmenu: 'undo redo | inserttable | cell row column deletetable | help',
+    base_url: '/project/tinymce/js/tinymce',
+  }, [ Plugin ], true);
+
+  const doc = SugarDocument.getDocument();
+
+  it('TINY-2884: Ctrl+F9 should focus on the contextual toolbar', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p>aaaaaaa</p>');
+    TinySelections.setSelection(editor, [ 0, 0 ], 0, [ 0, 0 ], 4);
+    await TinyUiActions.pWaitForUi(editor, '.tox-pop div[role=toolbar] .tox-tbtn');
+    TinyContentActions.keystroke(editor, 120, { ctrl: true });
+    await FocusTools.pTryOnSelector('Assert toolbar is focused', doc, '.tox-pop div[role=toolbar] .tox-tbtn');
+    TinyUiActions.keystroke(editor, Keys.escape());
+    await FocusTools.pTryOnSelector('Assert editor is focused', doc, 'iframe');
+  });
+});

package/src/plugins/quickbars/test/ts/browser/OptionsTest.ts

@@ -0,0 +1,84 @@
+import { context, describe, it } from '@ephox/bedrock-client';
+import { assert } from 'chai';
+
+import Editor from 'tinymce/core/api/Editor';
+import EditorManager from 'tinymce/core/api/EditorManager';
+import * as Options from 'tinymce/plugins/quickbars/api/Options';
+
+describe('browser.tinymce.plugins.quickbars.OptionsTest', () => {
+  const test = (method: (editor: Editor) => string, options: any, expected: string) => () => {
+    const editor = new Editor('test', options, EditorManager);
+    Options.register(editor);
+
+    const result = method(editor);
+    assert.equal(result, expected);
+  };
+
+  context('getTextSelectionToolbarItems', () => {
+    it('TBA: testing for empty string should return empty string', test(
+      Options.getTextSelectionToolbarItems,
+      { quickbars_selection_toolbar: '' },
+      ''
+    ));
+
+    it('TBA: testing for boolean false should return empty string', test(
+      Options.getTextSelectionToolbarItems,
+      { quickbars_selection_toolbar: false },
+      ''
+    ));
+
+    it('TBA: testing for boolean true should fallback to defaults', test(
+      Options.getTextSelectionToolbarItems,
+      { quickbars_selection_toolbar: true },
+      'bold italic | quicklink h2 h3 blockquote'
+    ));
+
+    it('TBA: testing for undefined should fallback to defaults', test(
+      Options.getTextSelectionToolbarItems,
+      {
+        // intentionally blank undefined
+      },
+      'bold italic | quicklink h2 h3 blockquote'
+    ));
+
+    it('TBA: testing for custom config string', test(
+      Options.getTextSelectionToolbarItems,
+      { quickbars_selection_toolbar: 'hello | friend' },
+      'hello | friend'
+    ));
+  });
+
+  context('getInsertToolbarItems', () => {
+    it('TBA: testing for empty string should return empty string', test(
+      Options.getInsertToolbarItems,
+      { quickbars_insert_toolbar: '' },
+      ''
+    ));
+
+    it('TBA: testing for boolean false should return empty string', test(
+      Options.getInsertToolbarItems,
+      { quickbars_insert_toolbar: false },
+      ''
+    ));
+
+    it('TBA: testing for boolean true should fallback to defaults', test(
+      Options.getInsertToolbarItems,
+      { quickbars_insert_toolbar: true },
+      'quickimage quicktable'
+    ));
+
+    it('TBA: testing for undefined should fallback to defaults', test(
+      Options.getInsertToolbarItems,
+      {
+        // intentionally blank undefined
+      },
+      'quickimage quicktable'
+    ));
+
+    it('TBA: testing for custom config string', test(
+      Options.getInsertToolbarItems,
+      { quickbars_insert_toolbar: 'bye | now' },
+      'bye | now'
+    ));
+  });
+});

package/src/plugins/quickbars/test/ts/browser/SelectionToolbarTest.ts

@@ -0,0 +1,106 @@
+import { ApproxStructure, Assertions, UiFinder, Waiter } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { SugarBody } from '@ephox/sugar';
+import { TinyHooks, TinySelections } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import LinkPlugin from 'tinymce/plugins/link/Plugin';
+import PageBreakPlugin from 'tinymce/plugins/pagebreak/Plugin';
+import QuickbarsPlugin from 'tinymce/plugins/quickbars/Plugin';
+
+enum Alignment {
+  Left = 'left',
+  Right = 'right',
+  Center = 'center'
+}
+
+// TODO TINY-10480: Investigate flaky tests
+describe.skip('browser.tinymce.plugins.quickbars.SelectionToolbarTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'quickbars link pagebreak',
+    inline: true,
+    toolbar: false,
+    menubar: false,
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ LinkPlugin, QuickbarsPlugin, PageBreakPlugin ], true);
+
+  const imgSrc = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+  const pAssertButtonToggledState = (name: string, state: boolean) =>
+    Waiter.pTryUntil('Wait for toolbar button state', () => {
+      const button = UiFinder.findIn(SugarBody.body(), `.tox-toolbar button[aria-label="${name}"]`).getOrDie();
+      return Assertions.assertStructure('', ApproxStructure.build((s, _str, arr) => s.element('button', {
+        classes: [ state ? arr.has('tox-tbtn--enabled') : arr.not('tox-tbtn--enabled') ]
+      })), button);
+    });
+
+  const pWaitForTextToolbarAndAssertState = async (bold: boolean, italic: boolean, heading2: boolean, heading3: boolean, link: boolean, blockquote: boolean) => {
+    await pAssertButtonToggledState('Bold', bold);
+    await pAssertButtonToggledState('Italic', italic);
+    await pAssertButtonToggledState('Link', link);
+    await pAssertButtonToggledState('Heading 2', heading2);
+    await pAssertButtonToggledState('Heading 3', heading3);
+    await pAssertButtonToggledState('Blockquote', blockquote);
+  };
+
+  const pSetImageAndAssertToolbarState = async (editor: Editor, useFigure: boolean, alignment?: Alignment) => {
+    let attrs: string;
+    let imageHtml: string;
+    if (alignment === undefined) {
+      attrs = useFigure ? 'class="image"' : '';
+    } else if (alignment === Alignment.Center) {
+      attrs = useFigure ? `class="image align-${alignment}"` : 'style="margin-left: auto; margin-right: auto; display: block;"';
+    } else {
+      attrs = useFigure ? `class="image align-${alignment}"` : `style="float: ${alignment};"`;
+    }
+
+    if (useFigure) {
+      imageHtml = `<figure ${attrs} contenteditable="false"><img src="${imgSrc}"><figcaption contenteditable="true">Caption</figcaption></figure>`;
+    } else {
+      imageHtml = `<p><img src="${imgSrc}" ${attrs}></p>`;
+    }
+
+    editor.setContent('<p>Some <strong>bold</strong> and <em>italic</em> content.</p>' + imageHtml);
+    TinySelections.select(editor, useFigure ? 'figure' : 'img', []);
+    // A short wait to ensure the button state has been updated before running assertions
+    await Waiter.pWait(50);
+    await pAssertButtonToggledState('Align left', alignment === Alignment.Left);
+    await pAssertButtonToggledState('Align center', alignment === Alignment.Center);
+    await pAssertButtonToggledState('Align right', alignment === Alignment.Right);
+  };
+
+  it('TBA: Text selection toolbar', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p>Some <strong>bold</strong> and <em>italic</em> content.</p><blockquote><p>Some quoted content</p></blockquote>');
+    TinySelections.setSelection(editor, [ 0, 0 ], 0, [ 0, 0 ], 4);
+    await pWaitForTextToolbarAndAssertState(false, false, false, false, false, false);
+    TinySelections.setSelection(editor, [ 0, 1, 0 ], 0, [ 0, 1, 0 ], 3);
+    await pWaitForTextToolbarAndAssertState(true, false, false, false, false, false);
+    TinySelections.setSelection(editor, [ 0, 3, 0 ], 1, [ 0, 3, 0 ], 4);
+    await pWaitForTextToolbarAndAssertState(false, true, false, false, false, false);
+    TinySelections.setSelection(editor, [ 1, 0 ], 0, [ 1, 0 ], 1);
+    await pWaitForTextToolbarAndAssertState(false, false, false, false, false, true);
+  });
+
+  it('TBA: Image selection toolbar', async () => {
+    const editor = hook.editor();
+    await pSetImageAndAssertToolbarState(editor, false);
+    await pSetImageAndAssertToolbarState(editor, false, Alignment.Left);
+    await pSetImageAndAssertToolbarState(editor, false, Alignment.Center);
+    await pSetImageAndAssertToolbarState(editor, false, Alignment.Right);
+    await pSetImageAndAssertToolbarState(editor, true);
+    await pSetImageAndAssertToolbarState(editor, true, Alignment.Left);
+    await pSetImageAndAssertToolbarState(editor, true, Alignment.Center);
+    await pSetImageAndAssertToolbarState(editor, true, Alignment.Right);
+  });
+
+  it('TINY-10054: Pagebreak should not toggle toolbar', async () => {
+    const editor = hook.editor();
+    editor.setContent('<!-- pagebreak -->');
+    TinySelections.select(editor, 'img', []);
+    await Waiter.pWait(50); // Give the toolbar a chance to appear. If not present this test will pass even when it shouldn't.
+    await Waiter.pTryUntil('Wait for toolbar button state', () => {
+      UiFinder.notExists(SugarBody.body(), `.tox-toolbar button[aria-label="Align left"]`);
+    });
+  });
+});