opentiny 6.9.0

package/src/plugins/link/test/ts/browser/SelectedLinkTest.ts

@@ -0,0 +1,83 @@
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyHooks, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/link/Plugin';
+
+import { TestLinkUi } from '../module/TestLinkUi';
+
+describe('browser.tinymce.plugins.link.SelectedLinkTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'link',
+    toolbar: 'link openlink unlink',
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  it('TBA: should not get anchor info if not selected node', async () => {
+    TestLinkUi.clearHistory();
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://tinymce.com">tiny</a></p>');
+    TinySelections.setCursor(editor, [ 0 ], 1);
+    editor.execCommand('mcelink');
+    await TinyUiActions.pWaitForDialog(editor);
+    TestLinkUi.assertDialogContents({
+      href: '',
+      text: '',
+      title: '',
+      target: ''
+    });
+    await TestLinkUi.pClickCancel(editor);
+    TestLinkUi.clearHistory();
+  });
+
+  it('TINY-4867: link should not be active when multiple links or plain text selected', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://tinymce.com">a</a> b <a href="http://tinymce.com">c</a></p>');
+    // Check the link button is enabled (single link)
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="link"].tox-tbtn--enabled');
+    // Check the link button is enabled (collapsed in link)
+    TinySelections.setCursor(editor, [ 0, 0, 0 ], 0);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="link"].tox-tbtn--enabled');
+    // Check the link button is disabled (text)
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 3);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="link"]:not(.tox-tbtn--enabled)');
+    // Check the link button is disabled (multiple links)
+    TinySelections.setSelection(editor, [ 0, 1 ], 0, [ 0, 1 ], 2);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="link"]:not(.tox-tbtn--enabled)');
+  });
+
+  it('TINY-4867: openlink should be disabled when multiple links or plain text selected', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://tinymce.com">a</a> b <a href="http://tinymce.com">c</a></p>');
+    // Check the open link button is enabled (single link)
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="openlink"]:not(.tox-tbtn--disabled)');
+    // Check the open link button is enabled (collapsed in link)
+    TinySelections.setCursor(editor, [ 0, 0, 0 ], 0);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="openlink"]:not(.tox-tbtn--disabled)');
+    // Check the open link button is disabled (text)
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 3);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="openlink"].tox-tbtn--disabled');
+    // Check the open link button is disabled (multiple links)
+    TinySelections.setSelection(editor, [ 0, 1 ], 0, [ 0, 1 ], 2);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="openlink"].tox-tbtn--disabled');
+  });
+
+  it('TINY-4867: unlink should be enabled when single link or multiple links selected', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://tinymce.com">a</a> b <a href="http://tinymce.com">c</a></p>');
+    // Check the unlink button is enabled (single link)
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 3);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="unlink"]:not(.tox-tbtn--disabled)');
+    // Check the unlink button is enabled (collapsed in link)
+    TinySelections.setCursor(editor, [ 0, 0, 0 ], 0);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="unlink"]:not(.tox-tbtn--disabled)');
+    // Check the unlink button is disabled (text)
+    TinySelections.setSelection(editor, [ 0, 1 ], 0, [ 0, 1 ], 2);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="unlink"].tox-tbtn--disabled');
+    // Check the unlink button is enabled (multiple links)
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+    await TinyUiActions.pWaitForUi(editor, 'button[data-mce-name="unlink"]:not(.tox-tbtn--disabled)');
+  });
+});

package/src/plugins/link/test/ts/browser/SelectedTextLinkTest.ts

@@ -0,0 +1,174 @@
+import { FocusTools, Keys, UiFinder } from '@ephox/agar';
+import { describe, it, before, after, context } from '@ephox/bedrock-client';
+import { SugarBody, SugarDocument } from '@ephox/sugar';
+import { TinyHooks, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/link/Plugin';
+
+import { TestLinkUi } from '../module/TestLinkUi';
+
+describe('browser.tinymce.plugins.link.SelectedTextLinkTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'link',
+    toolbar: '',
+    setup: (editor: Editor) => {
+      // Simulate comments being enabled
+      editor.on('GetContent', (e) => {
+        if (e.selection) {
+          e.content += '<!-- TinyComments -->';
+        }
+      });
+    },
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const doc = SugarDocument.getDocument();
+
+  before(() => {
+    TestLinkUi.clearHistory();
+  });
+
+  after(() => {
+    TestLinkUi.clearHistory();
+  });
+
+  const pOpenDialog = async (editor: Editor, textToDisplayVisible: boolean = true) => {
+    editor.execCommand('mcelink');
+    await TinyUiActions.pWaitForDialog(editor);
+    const existence = textToDisplayVisible ? UiFinder.exists : UiFinder.notExists;
+    existence(SugarBody.body(), '.tox-label:contains("Text to display")');
+  };
+
+  it('TINY-5205: basic text selection with existing link should preserve the text when changing URL', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://oldlink/">word</a></p>');
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+    await pOpenDialog(editor);
+    FocusTools.setActiveValue(doc, 'http://something');
+    await TestLinkUi.pClickSave(editor);
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 1,
+      'p:contains(word)': 1,
+      'p': 1
+    });
+  });
+
+  it('TBA: complex selections across paragraphs should preserve the text', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><strong>word</strong></p><p><strong>other</strong></p>');
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 1 ], 1);
+    await pOpenDialog(editor, false);
+    FocusTools.setActiveValue(doc, 'http://something');
+    TinyUiActions.keydown(editor, Keys.enter());
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 2,
+      'p:contains(word)': 1,
+      'p:contains(other)': 1,
+      'p': 2
+    });
+  });
+
+  it('TINY-5205: complex selections with existing link should preserve the text when changing URL', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://oldlink/"><strong>word</strong><em>other</em></a></p>');
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+    await pOpenDialog(editor);
+    FocusTools.setActiveValue(doc, 'http://something');
+    await TestLinkUi.pClickSave(editor);
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 1,
+      'strong:contains(word)': 1,
+      'em:contains(other)': 1,
+      'p': 1
+    });
+  });
+
+  it('TINY-5205: complex selections with existing link should replace the text when changing text', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://oldlink/"><strong>word</strong><em>other</em></a></p>');
+    TinySelections.setSelection(editor, [ 0 ], 0, [ 0 ], 1);
+    await pOpenDialog(editor);
+    FocusTools.setActiveValue(doc, 'http://something');
+    TinyUiActions.keydown(editor, Keys.tab());
+    FocusTools.setActiveValue(doc, 'new text');
+    await TestLinkUi.pClickSave(editor);
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 1,
+      'a:contains(new text)': 1,
+      'strong': 0,
+      'em': 0,
+      'p': 1
+    });
+  });
+
+  it('TINY-5205: collapsed selection in complex structure should preserve the text when changing URL', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://oldlink/"><strong>word</strong><em>other</em></a></p>');
+    TinySelections.setCursor(editor, [ 0, 0, 0, 0 ], 2);
+    await pOpenDialog(editor);
+    FocusTools.setActiveValue(doc, 'http://something');
+    await TestLinkUi.pClickSave(editor);
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 1,
+      'strong:contains(word)': 1,
+      'em:contains(other)': 1,
+      'p': 1
+    });
+  });
+
+  it('TINY-5205: Selection with link inside should replace link', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p>a <a href="http://www.google.com/">b</a> c</p>');
+    TinySelections.setSelection(editor, [ 0, 0 ], 0, [ 0, 2 ], 2);
+    await pOpenDialog(editor);
+    FocusTools.setActiveValue(doc, 'http://something');
+    await TestLinkUi.pClickSave(editor);
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 1,
+      'a': 1,
+      'p': 1
+    });
+  });
+
+  it('TINY-5205: Selection across partial link should split and replace link', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://www.google.com/">a b</a> c</p>');
+    TinySelections.setSelection(editor, [ 0, 0, 0 ], 2, [ 0, 1 ], 2);
+    await pOpenDialog(editor);
+    FocusTools.setActiveValue(doc, 'http://something');
+    await TestLinkUi.pClickSave(editor);
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://www.google.com/"]': 1,
+      'a[href="http://something"]': 1,
+      'a': 2,
+      'p': 1
+    });
+  });
+
+  context('Block links', () => {
+    it('TINY-9172: Collapsed selection in root block link should not have text to display', async () => {
+      const editor = hook.editor();
+      editor.setContent('<a href="#"><p>root</p></a>');
+      TinySelections.setCursor(editor, [ 0, 0, 0 ], 1);
+      await pOpenDialog(editor, false);
+      await TestLinkUi.pClickCancel(editor);
+    });
+
+    it('TINY-9172: Collapsed selection in wrapped block link should not have text to display', async () => {
+      const editor = hook.editor();
+      editor.setContent('<div><a href="#"><p>block</p></a></div>');
+      TinySelections.setCursor(editor, [ 0, 0, 0, 0 ], 1);
+      await pOpenDialog(editor, false);
+      await TestLinkUi.pClickCancel(editor);
+    });
+
+    it('TINY-9335: Expanded selections inside a block link should not have text to display', async () => {
+      const editor = hook.editor();
+      editor.setContent('<div><a href="#"><p>block</p></a></div>');
+      TinySelections.setSelection(editor, [ 0, 0, 0, 0 ], 1, [ 0, 0, 0, 0 ], 3);
+      await pOpenDialog(editor, false);
+      await TestLinkUi.pClickCancel(editor);
+    });
+  });
+});

package/src/plugins/link/test/ts/browser/UpdateLinkTest.ts

@@ -0,0 +1,108 @@
+import { FocusTools, Keys, Waiter } from '@ephox/agar';
+import { describe, it, before, afterEach, context } from '@ephox/bedrock-client';
+import { SugarDocument } from '@ephox/sugar';
+import { TinyAssertions, TinyHooks, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/link/Plugin';
+
+import { TestLinkUi } from '../module/TestLinkUi';
+
+describe('browser.tinymce.plugins.link.UpdateLinkTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'link',
+    toolbar: '',
+    base_url: '/project/tinymce/js/tinymce',
+    indent: false
+  }, [ Plugin ]);
+
+  before(() => {
+    TestLinkUi.clearHistory();
+  });
+
+  afterEach(() => {
+    TestLinkUi.clearHistory();
+  });
+
+  it('TBA: should not get anchor info if not selected node', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://tinymce.com" class="shouldbekept" title="shouldalsobekept">tiny</a></p>');
+    TinySelections.setCursor(editor, [ 0, 0, 0 ], 2);
+    editor.execCommand('mcelink');
+    await TinyUiActions.pWaitForDialog(editor);
+    TestLinkUi.assertDialogContents({
+      href: 'http://tinymce.com',
+      text: 'tiny',
+      title: 'shouldalsobekept',
+      target: ''
+    });
+    FocusTools.setActiveValue(SugarDocument.getDocument(), 'http://something');
+    TinyUiActions.keydown(editor, Keys.enter());
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 1,
+      'a[class="shouldbekept"]': 1,
+      'a[title="shouldalsobekept"]': 1
+    });
+  });
+
+  it('TBA: should remove attributes if unset in the dialog', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="http://tinymce.com" class="shouldbekept" title="shouldnotbekept">tiny</a></p>');
+    TinySelections.setCursor(editor, [ 0, 0, 0 ], 2);
+    editor.execCommand('mcelink');
+    await TinyUiActions.pWaitForDialog(editor);
+    TestLinkUi.assertDialogContents({
+      href: 'http://tinymce.com',
+      text: 'tiny',
+      title: 'shouldnotbekept',
+      target: ''
+    });
+    FocusTools.setActiveValue(SugarDocument.getDocument(), 'http://something');
+    await TestLinkUi.pSetInputFieldValue(editor, 'Title', '');
+    TinyUiActions.keydown(editor, Keys.enter());
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href="http://something"]': 1,
+      'a[class="shouldbekept"]': 1,
+      'a[title="shouldnotbekept"]': 0
+    });
+  });
+
+  it('TINY-7998: Updating a link with a dangerous URL should remove the href attribute', async () => {
+    const editor = hook.editor();
+    editor.setContent('<p><a href="https://tinymce.com" title="shouldbekept">tiny</a></p>');
+    TinySelections.setCursor(editor, [ 0, 0, 0 ], 2);
+    editor.execCommand('mceLink');
+    await TinyUiActions.pWaitForDialog(editor);
+    FocusTools.setActiveValue(SugarDocument.getDocument(), 'javascript:alert(1)');
+    TinyUiActions.submitDialog(editor);
+    await TestLinkUi.pAssertContentPresence(editor, {
+      'a[href]': 0,
+      'a[title="shouldbekept"]': 1,
+      'a:contains("tiny")': 1
+    });
+  });
+
+  context('Block links', () => {
+    it('TINY-9172: Should update a root block link', async () => {
+      const editor = hook.editor();
+      editor.setContent('<a href="#1"><p>tiny</p></a>');
+      TinySelections.setCursor(editor, [ 0, 0, 0 ], 1);
+      editor.execCommand('mceLink');
+      await TinyUiActions.pWaitForDialog(editor);
+      FocusTools.setActiveValue(SugarDocument.getDocument(), '#2');
+      TinyUiActions.submitDialog(editor);
+      await Waiter.pTryUntil('Wait for content to change', () => TinyAssertions.assertContent(editor, '<a href="#2"><p>tiny</p></a>'));
+    });
+
+    it('TINY-9172: Should update a wrapped block link', async () => {
+      const editor = hook.editor();
+      editor.setContent('<div><a href="#1"><p>tiny</p></a></div>');
+      TinySelections.setCursor(editor, [ 0, 0, 0, 0 ], 1);
+      editor.execCommand('mceLink');
+      await TinyUiActions.pWaitForDialog(editor);
+      FocusTools.setActiveValue(SugarDocument.getDocument(), '#2');
+      TinyUiActions.submitDialog(editor);
+      await Waiter.pTryUntil('Wait for content to change', () => TinyAssertions.assertContent(editor, '<div><a href="#2"><p>tiny</p></a></div>'));
+    });
+  });
+});

package/src/plugins/link/test/ts/browser/UrlInputTest.ts

@@ -0,0 +1,50 @@
+import { FocusTools } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { PlatformDetection } from '@ephox/sand';
+import { SugarDocument } from '@ephox/sugar';
+import { TinyHooks, TinyUiActions, TinyContentActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/link/Plugin';
+
+import { TestLinkUi } from '../module/TestLinkUi';
+
+describe('browser.tinymce.plugins.link.UrlInputTest', () => {
+
+  const platform = PlatformDetection.detect();
+
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'link',
+    toolbar: 'link',
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const pOpenLinkDialogWithKeyboard = async (editor: Editor) => {
+    TinyContentActions.keystroke(editor, 'K'.charCodeAt(0), platform.os.isMacOS() ? { meta: true } : { ctrl: true });
+    await TinyUiActions.pWaitForDialog(editor);
+  };
+
+  it('TBA: insert url by typing', async () => {
+    const editor = hook.editor();
+    await TestLinkUi.pOpenLinkDialog(editor);
+    const focused = FocusTools.setActiveValue(SugarDocument.getDocument(), 'http://www.test.com/');
+    TestLinkUi.fireEvent(focused, 'input');
+    TestLinkUi.assertDialogContents({
+      href: 'http://www.test.com/',
+      text: 'http://www.test.com/'
+    });
+    TinyUiActions.closeDialog(editor);
+  });
+
+  it('TINY-2884: insert url by keyboard shortcut', async () => {
+    const editor = hook.editor();
+    await pOpenLinkDialogWithKeyboard(editor);
+    const focused = FocusTools.setActiveValue(SugarDocument.getDocument(), 'http://www.test.com/');
+    TestLinkUi.fireEvent(focused, 'input');
+    TestLinkUi.assertDialogContents({
+      href: 'http://www.test.com/',
+      text: 'http://www.test.com/'
+    });
+    TinyUiActions.closeDialog(editor);
+  });
+});

package/src/plugins/link/test/ts/browser/UrlProtocolTest.ts

@@ -0,0 +1,99 @@
+import { FocusTools, UiFinder } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { SugarBody, SugarDocument } from '@ephox/sugar';
+import { TinyHooks, TinySelections, TinyUiActions } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+import Plugin from 'tinymce/plugins/link/Plugin';
+
+import { TestLinkUi } from '../module/TestLinkUi';
+
+describe('browser.tinymce.plugins.link.UrlProtocolTest', () => {
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    plugins: 'link',
+    toolbar: 'link',
+    base_url: '/project/tinymce/js/tinymce'
+  }, [ Plugin ]);
+
+  const pTestProtocolConfirm = async (editor: Editor, url: string, expectedProtocol: string) => {
+    editor.setContent('<p>Something</p>');
+    TinySelections.setSelection(editor, [ 0, 0 ], ''.length, [ 0, 0 ], 'Something'.length);
+    await TestLinkUi.pOpenLinkDialog(editor);
+
+    FocusTools.setActiveValue(SugarDocument.getDocument(), url);
+    TestLinkUi.assertDialogContents({
+      href: url,
+      text: 'Something',
+      title: '',
+      target: ''
+    });
+    await TestLinkUi.pClickSave(editor);
+    await TinyUiActions.pWaitForDialog(editor, '[role="dialog"].tox-confirm-dialog');
+    await TestLinkUi.pClickConfirmYes(editor);
+    await TestLinkUi.pAssertContentPresence(editor, { [`a[href="${expectedProtocol}${url}"]:contains("Something")`]: 1 });
+  };
+
+  const pTestNoProtocolConfirm = async (editor: Editor, url: string) => {
+    editor.setContent('<p>Something</p>');
+    TinySelections.setSelection(editor, [ 0, 0 ], ''.length, [ 0, 0 ], 'Something'.length);
+    await TestLinkUi.pOpenLinkDialog(editor);
+
+    FocusTools.setActiveValue(SugarDocument.getDocument(), url);
+    TestLinkUi.assertDialogContents({
+      href: url,
+      text: 'Something',
+      title: '',
+      target: ''
+    });
+    await TestLinkUi.pClickSave(editor);
+    UiFinder.notExists(SugarBody.body(), '[role="dialog"]');
+    await TestLinkUi.pAssertContentPresence(editor, { [`a[href="${url}"]:contains("Something")`]: 1 });
+  };
+
+  it('TBA: Test regex for non relative ftp link', async () => {
+    const editor = hook.editor();
+    await pTestNoProtocolConfirm(editor, 'ftp://testftp.com');
+  });
+
+  it('TBA: Test new regex for non relative http link', async () => {
+    const editor = hook.editor();
+    await pTestNoProtocolConfirm(editor, 'http://testhttp.com');
+    await pTestNoProtocolConfirm(editor, 'https://testhttp.com');
+  });
+
+  it('TBA: Test regex for non relative link with no protocol', async () => {
+    const editor = hook.editor();
+    await pTestProtocolConfirm(editor, 'www.http.com', 'https://');
+    await pTestProtocolConfirm(editor, 'www3.http.com', 'https://');
+  });
+
+  it('TBA: Test regex for relative link', async () => {
+    const editor = hook.editor();
+    await pTestNoProtocolConfirm(editor, 'test.jpg');
+  });
+
+  it('TBA: Test regex for anchor link', async () => {
+    const editor = hook.editor();
+    await pTestNoProtocolConfirm(editor, '#test');
+  });
+
+  it('TBA: Test regex for email link with mailto:', async () => {
+    const editor = hook.editor();
+    await pTestNoProtocolConfirm(editor, 'mailto:no-reply@example.com');
+  });
+
+  it('TBA: Test regex for email link', async () => {
+    const editor = hook.editor();
+    await pTestProtocolConfirm(editor, 'no-reply@example.com', 'mailto:');
+  });
+
+  it('TBA: Test regex for path with www', async () => {
+    const editor = hook.editor();
+    await pTestNoProtocolConfirm(editor, 'www-example.jpg');
+  });
+
+  it('TINY-5941: Test regex for path with @', async () => {
+    const editor = hook.editor();
+    await pTestNoProtocolConfirm(editor, 'imgs/test@2xdpi.jpg');
+  });
+});

package/src/plugins/link/test/ts/module/TestLinkUi.ts

@@ -0,0 +1,137 @@
+import { FocusTools, Mouse, UiControls, UiFinder, Waiter } from '@ephox/agar';
+import { Obj } from '@ephox/katamari';
+import { Attribute, Class, SugarBody, SugarDocument, SugarElement, Traverse, Value } from '@ephox/sugar';
+import { TinyAssertions, TinyUiActions } from '@ephox/wrap-mcagar';
+import { assert } from 'chai';
+
+import Editor from 'tinymce/core/api/Editor';
+
+const doc = SugarDocument.getDocument();
+
+const selectors = {
+  href: 'label.tox-label:contains(URL) + div>div>input.tox-textfield',
+  text: 'label.tox-label:contains(Text to display) + input.tox-textfield',
+  title: 'label.tox-label:contains(Title) + input.tox-textfield',
+  target: 'label.tox-label:contains(Open link in...) + div.tox-listboxfield > .tox-listbox',
+  linklist: 'label.tox-label:contains(Link list) + div.tox-listboxfield > .tox-listbox'
+};
+
+const pOpenLinkDialog = async (editor: Editor): Promise<void> => {
+  TinyUiActions.clickOnToolbar(editor, '[aria-label="Insert/edit link"]');
+  await TinyUiActions.pWaitForDialog(editor);
+};
+
+const clickOnConfirmDialog = (editor: Editor, state: boolean): void => {
+  TinyUiActions.clickOnUi(editor, '[role="dialog"].tox-confirm-dialog button:contains("' + (state ? 'Yes' : 'No') + '")');
+};
+
+const fireEvent = (elem: SugarElement, event: string): void => {
+  const evt = new Event(event, {
+    bubbles: true,
+    cancelable: true
+  });
+  elem.dom.dispatchEvent(evt);
+};
+
+const getInput = (selector: string) =>
+  UiFinder.findIn<HTMLInputElement>(SugarBody.body(), selector).getOrDie();
+
+const assertInputValue = (label: string, selector: string, expected: string | boolean): void => {
+  const input = getInput(selector);
+  if (input.dom.type === 'checkbox') {
+    assert.equal(input.dom.checked, expected, `The input value for ${label} should be: ${expected}`);
+  } else if (Class.has(input, 'tox-listbox')) {
+    assert.equal(Attribute.get(input, 'data-value'), String(expected), `The input value for ${label} should be: ${expected}`);
+  } else {
+    assert.equal(Value.get(input), expected, `The input value for ${label} should be: ${expected}`);
+  }
+};
+
+const assertDialogContents = (expected: Record<string, any>): void => {
+  Obj.mapToArray(selectors, (value, key) => {
+    if (Obj.has(expected, key)) {
+      assertInputValue(key, value, expected[key]);
+    }
+  });
+};
+
+const pInsertLink = async (editor: Editor, url: string): Promise<void> => {
+  await pOpenLinkDialog(editor);
+  FocusTools.setActiveValue(doc, url);
+  await pClickSave(editor);
+};
+
+const pAssertContentPresence = (editor: Editor, presence: Record<string, number>): Promise<void> =>
+  Waiter.pTryUntil('Waiting for content to have expected presence', () => TinyAssertions.assertContentPresence(editor, presence));
+
+const pWaitForDialogClose = (): Promise<void> => Waiter.pTryUntil(
+  'Waiting for dialog to go away',
+  () => UiFinder.notExists(SugarBody.body(), '[role="dialog"]:not(.tox-confirm-dialog)')
+);
+
+const pWaitForConfirmClose = (): Promise<void> => Waiter.pTryUntil(
+  'Waiting for confirm dialog to go away',
+  () => UiFinder.notExists(SugarBody.body(), '[role="dialog"].tox-confirm-dialog')
+);
+
+const pClickSave = async (editor: Editor): Promise<void> => {
+  TinyUiActions.submitDialog(editor);
+  await pWaitForDialogClose();
+};
+
+const pClickCancel = async (editor: Editor): Promise<void> => {
+  TinyUiActions.cancelDialog(editor);
+  await pWaitForDialogClose();
+};
+
+const pClickConfirmYes = async (editor: Editor): Promise<void> => {
+  clickOnConfirmDialog(editor, true);
+  await pWaitForConfirmClose();
+};
+
+const pClickConfirmNo = async (editor: Editor): Promise<void> => {
+  clickOnConfirmDialog(editor, false);
+  await pWaitForConfirmClose();
+};
+
+const pFindInDialog = async <T extends Element>(editor: Editor, selector: string): Promise<SugarElement<T>> => {
+  const dialog = await TinyUiActions.pWaitForDialog(editor);
+  return UiFinder.findIn<T>(dialog, selector).getOrDie();
+};
+
+const clearHistory = (): void => {
+  localStorage.removeItem('tinymce-url-history');
+};
+
+const pSetListBoxItem = async (editor: Editor, group: string, itemText: string): Promise<void> => {
+  const element = await pFindInDialog(editor, 'label:contains("' + group + '") + .tox-listboxfield .tox-listbox');
+  Mouse.click(element);
+  const list = await UiFinder.pWaitForVisible('Wait for list to open', SugarBody.body(), '.tox-menu.tox-collection--list');
+  const item = UiFinder.findIn(list, '.tox-collection__item-label:contains(' + itemText + ')').getOrDie();
+  const parent = Traverse.parent(item).getOrDie('Failed to find parent');
+  Mouse.click(parent);
+};
+
+const pSetInputFieldValue = async (editor: Editor, group: string, newValue: string): Promise<void> => {
+  const element = await pFindInDialog<HTMLInputElement>(editor, 'label:contains("' + group + '") + input');
+  UiControls.setValue(element, newValue);
+  fireEvent(element, 'input');
+};
+
+export const TestLinkUi = {
+  assertInputValue,
+  pAssertContentPresence,
+  pOpenLinkDialog,
+  fireEvent,
+  pFindInDialog,
+  assertDialogContents,
+  pClickSave,
+  pClickCancel,
+  pWaitForDialogClose,
+  pClickConfirmYes,
+  pClickConfirmNo,
+  pInsertLink,
+  clearHistory,
+  pSetListBoxItem,
+  pSetInputFieldValue
+};

package/src/plugins/lists/demo/html/demo.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Lists Demo Page</title>
+  </head>
+
+  <body>
+  <h2>Lists Demo Page</h2>
+    <div id="ephox-ui">
+      <textarea cols="30" rows="10" class="tinymce"></textarea>
+    </div>
+    <script src="../../../../../js/tinymce/tinymce.js"></script>
+    <script src="../../../../../scratch/demos/plugins/lists/demo.js"></script>
+  </body>
+</html>