TypeScript Keys.up方法代碼示例

    TinyLoader.setup(function (editor, onSuccess, onFailure) {
      const tinyApis = TinyApis(editor);
      const tinyActions = TinyActions(editor);

      Pipeline.async({}, [
        tinyApis.sFocus,
        Logger.t('Arrow keys in figcaption', GeneralSteps.sequence([
          Logger.t('Arrow up from start of figcaption to paragraph before figure', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 0),
            tinyActions.sContentKeystroke(Keys.up(), { }),
            tinyApis.sAssertContent('<br /><figure><figcaption>a</figcaption></figure>'),
            tinyApis.sAssertSelection([], 0, [], 0)
          ])),
          Logger.t('Arrow down from end of figcaption to paragraph after figure', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            sAssertRawContent(editor, '<figure><figcaption>a</figcaption></figure><br>'),
            tinyApis.sAssertSelection([], 1, [], 1)
          ])),
          Logger.t('Arrow up in middle of figcaption', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.up(), { }),
            sAssertRawContent(editor, '<br><figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sAssertSelection([], 0, [], 0)
          ])),
          Logger.t('Arrow down in middle of figcaption', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            sAssertRawContent(editor, '<figure><figcaption>ab</figcaption></figure><br>'),
            tinyApis.sAssertSelection([], 1, [], 1)
          ]))
        ]))
      ], onSuccess, onFailure);
    }, {

    TinyLoader.setup(function (editor, onSuccess, onFailure) {
      Pipeline.async({}, [
        Logger.t('FakeCaret before/after table', GeneralSteps.sequence(browser.isEdge() || browser.isFirefox() ? [
          Logger.t('Move fake caret left before table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.left()),
            ApiChains.cAssertContentStructure(buildBody([ caretBefore(), table('1'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Move fake caret right after table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.right()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake caret right after table then right again before other table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table><table><tbody><tr><td>2</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), table('2') ])),
            ActionChains.cContentKeystroke(Keys.right()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), table('2'), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0),
            ActionChains.cContentKeystroke(Keys.right()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretBefore(), table('2'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake caret left before table then left again after other table', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table><table><tbody><tr><td>2</td></tr></tbody></table>'),
            ApiChains.cSetCursor([1, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), table('2') ])),
            ActionChains.cContentKeystroke(Keys.left()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretBefore(), table('2'), visualCaretBefore() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0),
            ActionChains.cContentKeystroke(Keys.left()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), table('2'), visualCaretAfter() ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake up for when table is first element', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.up()),
            ApiChains.cAssertContentStructure(buildBody([ block, table('1') ])),
            ApiChains.cAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Move fake down for when table is last element', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.down()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), block ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Move fake up for when table is first element but not when caret is not as start', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.up()),
            ApiChains.cAssertContentStructure(buildBody([ block, table('1') ])),
            ApiChains.cAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Move fake down for when table is last element but not when caret is not as end', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
            ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
            ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
            ActionChains.cContentKeystroke(Keys.down()),
            ApiChains.cAssertContentStructure(buildBody([ table('1'), block ])),
            ApiChains.cAssertSelection([1], 0, [1], 0)
          ]))] : []
        )),

        Logger.t('Table cell navigation', GeneralSteps.sequence([
          Logger.t('Should move to the cell above the current cell on key up', Chain.asStep(editor, [
            ApiChains.cFocus,
            ApiChains.cSetContent(`
              <table>
                <tbody>
                  <tr><td>1</td><td>2</td></tr>
                  <tr><td>2</td><td>3</td></tr>
                </tbody>
              </table>
            `),
            ApiChains.cSetCursor([0, 0, 1, 1, 0], 0),
            ActionChains.cContentKeystroke(Keys.up()),
            ApiChains.cAssertSelection([0, 0, 0, 1, 0], 0, [0, 0, 0, 1, 0], 0)
          ])),
          Logger.t('Should move to the cell below the current cell on key down', Chain.asStep(editor, [
            ApiChains.cFocus,
//.........這裏部分代碼省略.........

    (doc, body, gui, testContainer, store) => {
      const menubarEl = SelectorFind.descendant(testContainer.element(), '.test-menubar').getOrDie('Could not find menubar to test');

      const menubar = testContainer.getSystem().getByDom(menubarEl).getOrDie();

      const sAssertFocusOnToggleItem = (itemText: string) =>
        FocusTools.sTryOnSelector(
          'Focus should be on a toggle menu item containing: ' + itemText,
          doc,
          '.tox-selected-menu [role=menuitemcheckbox]:contains("' + itemText + '")'
        );

      const sAssertActiveToggleItemHasOneCheckmark = (itemText: string) =>
        Chain.asStep(sink, [
          UiFinder.cFindIn('.tox-selected-menu [role=menuitemcheckbox]:contains("' + itemText + '")'),
          Chain.op((menu) => {
            const checkMarks = Selectors.all('.tox-collection__item-icon');
            Assertions.assertEq('only one check mark is displayed for active toggled menu items', 1, checkMarks.length);
          })
        ]);

      const sAssertFocusOnItem = (itemText: string) =>
        FocusTools.sTryOnSelector(
          'Focus should be on item containing: ' + itemText,
          doc,
          '.tox-selected-menu [role=menuitem]:contains("' + itemText + '")'
        );

      const sAssertFocusOnMenuButton = (buttonText: string) =>
        FocusTools.sTryOnSelector(
          'Focus should be on menubar button containing: ' + buttonText,
          doc,
          '[role=menubar] button[role=menuitem]:contains("' + buttonText + '")'
        );

      const sWaitForMenuToAppear = () =>
        // Wait for menu to appear
        Waiter.sTryUntil(
          'Waiting for menu to be in DOM',
          UiFinder.sExists(sink, '.tox-menu'),
          100,
          1000
        );

      const sWaitForMenuToDisappear = () =>
        Waiter.sTryUntil(
          'Waiting for menu to NO LONGER be in DOM',
          UiFinder.sNotExists(sink, '.tox-menu'),
          100,
          1000
        );

      const sAssertMenuItemGroups = (label: string, groups: string[][]) => Logger.t(
        label,
        Chain.asStep(sink, [
          UiFinder.cFindIn('.tox-selected-menu'),
          Assertions.cAssertStructure(
            'Checking contents of menu',
            ApproxStructure.build((s, str, arr) => {
              return s.element('div', {
                children: Arr.map(groups, (items) => {
                  return s.element('div', {
                    classes: [ arr.has('tox-collection__group') ],
                    children: Arr.map(items, (itemText) => {
                      // itemText can have a trailing >, which means it has a caret
                      const hasCaret = Strings.endsWith(itemText, '>');
                      return s.element('div', {
                        classes: [ arr.has('tox-collection__item') ],
                        children: [
                          s.element('div', { classes: [ arr.has('tox-collection__item-icon') ] }),
                          s.element('div', {
                            classes: [ arr.has('tox-collection__item-label') ],
                            html: str.is(hasCaret ? itemText.substring(0, itemText.length - 1) : itemText)
                          })
                        ].concat(hasCaret ? [
                          s.element('div', { classes: [ arr.has('tox-collection__item-caret') ] })
                        ] : [ ])
                      });
                    })
                  });
                })
              });
            })
          )
        ])
      );

      return [
        store.sAssertEq('setup should have been called', [ 'Menubar.setup' ]),
        store.sClear,
        Assertions.sAssertStructure(
          'Checking initial structure for menubar',
          ApproxStructure.build((s, str, arr) => {
            return s.element('div', {
              classes: [arr.has('test-menubar')],
              attrs: {
                role: str.is('menubar')
              },
              children: [ ]
            });
//.........這裏部分代碼省略.........

 TinyLoader.setup(function (editor, onSuccess, onFailure) {
   Pipeline.async({}, browser.isEdge() || browser.isFirefox() ? [
     Logger.t('Move fake caret left before table', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
       ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ActionChains.cContentKeystroke(Keys.left()),
       ApiChains.cAssertContentStructure(buildBody([ caretBefore(), table('1'), visualCaretBefore() ])),
       ApiChains.cAssertSelection([0], 0, [0], 0)
     ])),
     Logger.t('Move fake caret right after table', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
       ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ActionChains.cContentKeystroke(Keys.right()),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), visualCaretAfter() ])),
       ApiChains.cAssertSelection([1], 0, [1], 0)
     ])),
     Logger.t('Move fake caret right after table then right again before other table', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table><table><tbody><tr><td>2</td></tr></tbody></table>'),
       ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), table('2') ])),
       ActionChains.cContentKeystroke(Keys.right()),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), table('2'), visualCaretAfter() ])),
       ApiChains.cAssertSelection([1], 0, [1], 0),
       ActionChains.cContentKeystroke(Keys.right()),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), caretBefore(), table('2'), visualCaretBefore() ])),
       ApiChains.cAssertSelection([1], 0, [1], 0)
     ])),
     Logger.t('Move fake caret left before table then left again after other table', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table><table><tbody><tr><td>2</td></tr></tbody></table>'),
       ApiChains.cSetCursor([1, 0, 0, 0, 0], 0),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), table('2') ])),
       ActionChains.cContentKeystroke(Keys.left()),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), caretBefore(), table('2'), visualCaretBefore() ])),
       ApiChains.cAssertSelection([1], 0, [1], 0),
       ActionChains.cContentKeystroke(Keys.left()),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), table('2'), visualCaretAfter() ])),
       ApiChains.cAssertSelection([1], 0, [1], 0)
     ])),
     Logger.t('Move fake up for when table is first element', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
       ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ActionChains.cContentKeystroke(Keys.up()),
       ApiChains.cAssertContentStructure(buildBody([ caretBefore(), table('1'), visualCaretBefore() ])),
       ApiChains.cAssertSelection([0], 0, [0], 0)
     ])),
     Logger.t('Move fake down for when table is last element', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
       ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ActionChains.cContentKeystroke(Keys.down()),
       ApiChains.cAssertContentStructure(buildBody([ table('1'), caretAfter(), visualCaretAfter() ])),
       ApiChains.cAssertSelection([1], 0, [1], 0)
     ])),
     Logger.t('Move fake up for when table is first element but not when caret is not as start', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
       ApiChains.cSetCursor([0, 0, 0, 0, 0], 1),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ActionChains.cContentKeystroke(Keys.up()),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ApiChains.cAssertSelection([0, 0, 0, 0, 0], 1, [0, 0, 0, 0, 0], 1)
     ])),
     Logger.t('Move fake down for when table is last element but not when caret is not as end', Chain.asStep(editor, [
       ApiChains.cFocus,
       ApiChains.cSetContent('<table><tbody><tr><td>1</td></tr></tbody></table>'),
       ApiChains.cSetCursor([0, 0, 0, 0, 0], 0),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ActionChains.cContentKeystroke(Keys.down()),
       ApiChains.cAssertContentStructure(buildBody([ table('1') ])),
       ApiChains.cAssertSelection([0, 0, 0, 0, 0], 0, [0, 0, 0, 0, 0], 0)
     ]))
   ] : [], onSuccess, onFailure);
 }, {

  TinyLoader.setup(function (editor, onSuccess, onFailure) {
    const tinyApis = TinyApis(editor);
    const tinyActions = TinyActions(editor);

    Pipeline.async({}, [
      Logger.t('Up navigation', GeneralSteps.sequence([
        Logger.t('Arrow up on first position in table cell', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 0, 0, 0, 0], 0),
          tinyActions.sContentKeystroke(Keys.up(), {}),
          tinyApis.sAssertSelection([0], 0, [0], 0),
          tinyApis.sAssertContent('<p>&nbsp;</p><table><tbody><tr><td>a</td><td>b</td></tr></tbody></table>')
        ])),
        Logger.t('Arrow up on first position in table cell to caption', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><caption>a</caption><tbody><tr><td>b</td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 1, 0, 0, 0], 0),
          tinyActions.sContentKeystroke(Keys.up(), {}),
          tinyApis.sAssertSelection([0, 0, 0], 0, [0, 0, 0], 0),
          tinyApis.sAssertContent('<table><caption>a</caption><tbody><tr><td>b</td></tr></tbody></table>')
        ])),
        Logger.t('Arrow up on second position in first table cell', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 0, 0, 0, 0], 1),
          tinyActions.sContentKeystroke(Keys.up(), {}),
          tinyApis.sAssertSelection([0], 0, [0], 0),
          tinyApis.sAssertContent('<p>&nbsp;</p><table><tbody><tr><td>a</td><td>b</td></tr></tbody></table>')
        ])),
        Logger.t('Arrow up on first position in first table cell on the second row', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 0, 1, 0, 0], 0),
          tinyActions.sContentKeystroke(Keys.up(), {}),
          tinyApis.sAssertSelection([0, 0, 0, 0, 0], 0, [0, 0, 0, 0, 0], 0),
          tinyApis.sAssertContent('<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>')
        ])),
      ])),
      Logger.t('Down navigation', GeneralSteps.sequence([
        Logger.t('Arrow down on last position in last table cell', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 0, 0, 1, 0], 1),
          tinyActions.sContentKeystroke(Keys.down(), {}),
          tinyApis.sAssertSelection([1], 0, [1], 0),
          tinyApis.sAssertContent('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table><p>&nbsp;</p>')
        ])),
        Logger.t('Arrow down on last position in last table cell with br', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><tbody><tr><td>a</td><td>b<br></td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 0, 0, 1, 0], 1),
          tinyActions.sContentKeystroke(Keys.down(), {}),
          tinyApis.sAssertSelection([1], 0, [1], 0),
          tinyApis.sAssertContent('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table><p>&nbsp;</p>')
        ])),
        Logger.t('Arrow down on second last position in last table cell', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 0, 0, 1, 0], 0),
          tinyActions.sContentKeystroke(Keys.down(), {}),
          tinyApis.sAssertSelection([1], 0, [1], 0),
          tinyApis.sAssertContent('<table><tbody><tr><td>a</td><td>b</td></tr></tbody></table><p>&nbsp;</p>')
        ])),
        Logger.t('Arrow down on last position in last table cell on the first row', GeneralSteps.sequence([
          tinyApis.sFocus,
          tinyApis.sSetContent('<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>'),
          tinyApis.sSetCursor([0, 0, 0, 1, 0], 1),
          tinyActions.sContentKeystroke(Keys.down(), {}),
          tinyApis.sAssertSelection([0, 0, 1, 1, 0], 1, [0, 0, 1, 1, 0], 1),
          tinyApis.sAssertContent('<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>')
        ])),
      ]))
    ], onSuccess, onFailure);
  }, {

  TinyLoader.setup((editor, onSuccess, onFailure) => {
    const tinyApis = TinyApis(editor);
    const tinyUi = TinyUi(editor);

    const doc = Element.fromDom(document);
    const body = Body.body();
    const editorBody = Element.fromDom(editor.getBody());

    const sOpenContextMenu = (target: string) => {
      return Chain.asStep(editor, [
        tinyUi.cTriggerContextMenu('trigger context menu', target, '.tox-silver-sink [role="menuitem"]'),
        Chain.wait(0)
      ]);
    };

    const sAssertFocusOnItem = (label: string, selector: string) => {
      return FocusTools.sTryOnSelector(`Focus should be on: ${label}`, doc, selector);
    };

    const sCloseDialogAndWait = GeneralSteps.sequence([
      tinyUi.sWaitForPopup('wait for dialog', 'div[role="dialog"]'),
      Chain.asStep(editor, [
        UiChains.cCloseDialog('div[role="dialog"]')
      ]),
      Waiter.sTryUntil(
        'Wait for dialog to close',
        UiFinder.sNotExists(body, 'div[role="dialog"]'), 50, 5000
      )
    ]);

    const sPressDownArrowKey = Keyboard.sKeydown(doc, Keys.down(), { });
    const sPressEnterKey = Keyboard.sKeydown(doc, Keys.enter(), { });

    const sRepeatDownArrowKey = (index) => {
      return GeneralSteps.sequence(Arr.range(index, () => sPressDownArrowKey));
    };

    // 'index' points to the context menuitems while 'subindex' points to the sub menuitems
    const sSelectContextMenu = (label: string, selector: string, index: number, subindex: number) => {
      return GeneralSteps.sequence([
        sOpenContextMenu('td'),
        sRepeatDownArrowKey(subindex),
        Keyboard.sKeydown(doc, Keys.right(), {}),
        sRepeatDownArrowKey(index),
        sAssertFocusOnItem(label, selector),
        sPressEnterKey
      ]);
    };

    const sSelectCellContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 0);
    const sSelectRowContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 1);
    const sSelectColumnContextMenu = (label, selector, index) => sSelectContextMenu(label, selector, index, 2);

    const tableHtml = '<table style="width: 100%;">' +
      '<tbody>' +
        '<tr>' +
          '<td></td>' +
          '<td></td>' +
        '</tr>' +
        '<tr>' +
          '<td></td>' +
          '<td></td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    const tableWithCaptionHtml = '<table style="width: 100%;">' +
      '<caption>Caption</caption>' +
      '<tbody>' +
        '<tr>' +
          '<td></td>' +
          '<td></td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    // Using a different table to test merge cells as selection using keydown (shift + arrow keys) does not work on Edge for some reason.
    // TODO: Investigate why selection does not work on Edge.
    const mergeTableHtml = '<table style="width: 100%;">' +
      '<tbody>' +
        '<tr>' +
          '<td data-mce-selected="1" data-mce-first-selected="1">a1</td>' +
          '<td>a2</td>' +
        '</tr>' +
        '<tr>' +
          '<td data-mce-selected="1" data-mce-last-selected="1">b1</td>' +
          '<td>b2</td>' +
        '</tr>' +
      '</tbody>' +
    '</table>';

    const sAssertHtmlStructure = (label: string, expectedHtml: string) => Assertions.sAssertStructure(label, ApproxStructure.build((s) => {
      return s.element('body', {
        children: [
          ApproxStructure.fromHtml(expectedHtml),
          s.theRest()
        ]
      });
    }), editorBody);

//.........這裏部分代碼省略.........

    TinyLoader.setup(function (editor, onSuccess, onFailure) {
      const tinyApis = TinyApis(editor);
      const tinyActions = TinyActions(editor);

      Pipeline.async({}, [
        tinyApis.sFocus,
        Logger.t('Arrow keys in figcaption', GeneralSteps.sequence([
          Logger.t('Arrow up from start of figcaption to paragraph before figure', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 0),
            tinyActions.sContentKeystroke(Keys.up(), { }),
            tinyApis.sAssertContent('<p>&nbsp;</p><figure><figcaption>a</figcaption></figure>'),
            tinyApis.sAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Arrow down from end of figcaption to paragraph after figure', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            tinyApis.sAssertContent('<figure><figcaption>a</figcaption></figure><p>&nbsp;</p>'),
            tinyApis.sAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Arrow up in middle of figcaption', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.up(), { }),
            tinyApis.sAssertContent('<p>&nbsp;</p><figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sAssertSelection([0], 0, [0], 0)
          ])),
          Logger.t('Arrow down in middle of figcaption', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>ab</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            tinyApis.sAssertContent('<figure><figcaption>ab</figcaption></figure><p>&nbsp;</p>'),
            tinyApis.sAssertSelection([1], 0, [1], 0)
          ])),
          Logger.t('Arrow up at line 2 in figcaption should not insert new block', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a<br />b</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 2], 0),
            tinyActions.sContentKeystroke(Keys.up(), { }),
            tinyApis.sAssertContent('<figure><figcaption>a<br />b</figcaption></figure>'),
            tinyApis.sAssertSelection([0, 0, 2], 0, [0, 0, 2], 0)
          ])),
          Logger.t('Arrow down at line 1 in figcaption should not insert new block', GeneralSteps.sequence([
            tinyApis.sSetContent('<figure><figcaption>a<br />b</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            tinyApis.sAssertContent('<figure><figcaption>a<br />b</figcaption></figure>'),
            tinyApis.sAssertSelection([0, 0, 0], 1, [0, 0, 0], 1)
          ])),
          Logger.t('Arrow down at figcaption with forced_root_block_attrs set', GeneralSteps.sequence([
            tinyApis.sSetSetting('forced_root_block_attrs', { class: 'x' }),
            tinyApis.sSetContent('<figure><figcaption>a</figcaption></figure>'),
            tinyApis.sSetCursor([0, 0, 0], 1),
            tinyActions.sContentKeystroke(Keys.down(), { }),
            tinyApis.sAssertContent('<figure><figcaption>a</figcaption></figure><p class="x">&nbsp;</p>'),
            tinyApis.sAssertSelection([1], 0, [1], 0),
            tinyApis.sDeleteSetting('forced_root_block_attrs')
          ]))
        ]))
      ], onSuccess, onFailure);
    }, {

  TinyLoader.setup((editor, onSuccess, onFailure) => {
    const tinyApis = TinyApis(editor);
    const tinyUi = TinyUi(editor);

    const doc = Element.fromDom(document);
    const editorBody = Element.fromDom(editor.getBody());

    const sOpenContextMenu = (target) => {
      return Chain.asStep(editor, [
        tinyUi.cTriggerContextMenu('trigger context menu', target, '.tox-silver-sink [role="menuitem"]'),
        Chain.wait(0)
      ]);
    };

    // Assert focus is on the expected menu item
    const sAssertFocusOnItem = (label, selector) => {
      return FocusTools.sTryOnSelector(`Focus should be on: ${label}`, doc, selector);
    };

    // Wait for dialog to open and close dialog
    const sWaitForAndCloseDialog = GeneralSteps.sequence([
      Chain.asStep(editor, [
        tinyUi.cWaitForPopup('wait for dialog', 'div[role="dialog"]'),
        UiChains.cCloseDialog('div[role="dialog"]')
      ]),
      Waiter.sTryUntil(
        'Wait for dialog to close',
        UiFinder.sNotExists(TinyDom.fromDom(document.body), 'div[role="dialog"]'), 50, 5000
      )
    ]);

    const sPressDownArrowKey = Keyboard.sKeydown(doc, Keys.down(), { });
    const sPressEnterKey = Keyboard.sKeydown(doc, Keys.enter(), { });

    const sRepeatDownArrowKey = (index) => {
      return GeneralSteps.sequence(Arr.range(index, () => sPressDownArrowKey));
    };

    const tableHtml = '<table style="width: 100%;">' +
    '<tbody>' +
      '<tr>' +
        '<td></td>' +
        '<td></td>' +
      '</tr>' +
      '<tr>' +
        '<td></td>' +
        '<td></td>' +
      '</tr>' +
    '</tbody>' +
    '</table>';

    const imgSrc = '../img/dogleft.jpg';

    const contentInTableHtml = (content: string) => {
      return '<table style="width: 100%;">' +
       '<tbody>' +
          '<tr>' +
            `<td>${content}</td>` +
          '</tr>' +
        '</tbody>' +
      '</table>';
    };

    const imageInTableHtml = contentInTableHtml('<img src="' + imgSrc + '" width="160" height="100"/>');
    const placeholderImageInTableHtml = contentInTableHtml('<img src="' + imgSrc + '" width="160" height="100" data-mce-placeholder="1"/>');
    const linkInTableHtml = contentInTableHtml('<a href="http://tiny.cloud/">Tiny</a>');

    // In Firefox we add a a bogus br element after the link that fixes a gecko link bug when,
    // a link is placed at the end of block elements there is no way to move the caret behind the link.
    const sAssertRemoveLinkHtmlStructure = Assertions.sAssertStructure('Assert remove link', ApproxStructure.build((s, str) => {
      return s.element('body', {
        children: [
          s.element('p', {
            children: [
              s.text(str.is('Tiny')),
              s.zeroOrOne(s.element('br', {}))
            ]
          })
        ]
      });
    }), editorBody);

    Pipeline.async({}, [
      tinyApis.sFocus,
      Log.stepsAsStep('TBA', 'Test context menus on empty editor', [
        sOpenContextMenu('p'),
        sAssertFocusOnItem('Link', '.tox-collection__item:contains("Link...")'),
        sPressEnterKey,
        sWaitForAndCloseDialog
      ]),
      Log.stepsAsStep('TBA', 'Test context menus on a link', [
        tinyApis.sSetContent('<p><a href="http://tiny.cloud/">Tiny</a></p>'),
        tinyApis.sSetSelection([ 0, 0, 0 ], 'Ti'.length, [ 0, 0, 0 ], 'Ti'.length),
        sOpenContextMenu('a'),
        sAssertFocusOnItem('Link', '.tox-collection__item:contains("Link...")'),
        sPressDownArrowKey,
        sAssertFocusOnItem('Remove Link', '.tox-collection__item:contains("Remove link")'),
        sPressDownArrowKey,
        sAssertFocusOnItem('Open Link', '.tox-collection__item:contains("Open link")'),
        sPressDownArrowKey,
//.........這裏部分代碼省略.........