const renderItemStructure = <T>(info: ItemStructureSpec, providersBackstage: UiFactoryBackstageProviders, renderIcons: boolean, fallbackIcon: Option<string> = Option.none()): { dom: RawDomSchema, optComponents: Array<Option<AlloySpec>> } => {
  // If RTL and icon is in whitelist, add RTL icon class for icons that don't have a `-rtl` icon available.
  // Use `-rtl` icon suffix for icons that do.
  const getIconName = (iconName: Option<string>): Option<string> => {
    return iconName.map((name) => I18n.isRtl() && Arr.contains(rtlIcon, name) ? name + '-rtl' : name);
  };

  const needRtlClass = I18n.isRtl() && info.iconContent.exists((name) => Arr.contains(rtlTransform, name));

  // TODO: TINY-3036 Work out a better way of dealing with custom icons
  const icon = getIconName(info.iconContent).map((iconName) => Icons.getOr(iconName, providersBackstage.icons, fallbackIcon));

  // Style items and autocompleter both have meta. Need to branch on style
  // This could probably be more stable...
  const textRender: (text: string) => AlloySpec = Option.from(info.meta).fold(
    () => renderText,
    (meta) => {
      return Obj.has(meta, 'style') ? Fun.curry(renderStyledText, meta.style) : renderText;
    }
  );

  if (info.presets === 'color') {
    return renderColorStructure(info.ariaLabel, info.value, icon, providersBackstage);
  } else {
    return renderNormalItemStructure(info, icon, renderIcons, textRender, needRtlClass);
  }
};

const renderCommonStructure = (icon: Option<string>, text: Option<string>, tooltip: Option<string>, receiver: Option<string>, behaviours: Option<Behaviour.NamedConfiguredBehaviour<Behaviour.BehaviourConfigSpec, Behaviour.BehaviourConfigDetail>[]>, providersBackstage: UiFactoryBackstageProviders) => {

  // If RTL and icon is in whitelist, add RTL icon class for icons that don't have a `-rtl` icon available.
  // Use `-rtl` icon suffix for icons that do.

  const getIconName = (iconName: string): string => {
    return I18n.isRtl() && Arr.contains(rtlIcon, iconName) ? iconName + '-rtl' : iconName;
  };
  const needsRtlClass = I18n.isRtl() && icon.exists((name) => Arr.contains(rtlTransform, name));

  return {
    dom: {
      tag: 'button',
      classes: [ ToolbarButtonClasses.Button ].concat(text.isSome() ? [ ToolbarButtonClasses.MatchWidth ] : []).concat(needsRtlClass ? [ ToolbarButtonClasses.IconRtl ] : []),
      attributes: getTooltipAttributes(tooltip, providersBackstage)
    },
    components: componentRenderPipeline([
      icon.map((iconName) => renderIconFromPack(getIconName(iconName), providersBackstage.icons)),
      text.map((text) => renderLabel(text, ToolbarButtonClasses.Button, providersBackstage))
    ]),

    eventOrder: {
      [NativeEvents.mousedown()]: [
        'focusing',
        'alloy.base.behaviour',
        'common-button-display-events'
      ]
    },

    buttonBehaviours: Behaviour.derive(
      [
        AddEventsBehaviour.config('common-button-display-events', [
          AlloyEvents.run(NativeEvents.mousedown(), (button, se) => {
            se.event().prevent();
            AlloyTriggers.emit(button, focusButtonEvent);
          })
        ])
      ].concat(
        receiver.map((r) => {
          return Reflecting.config({
            channel: r,
            initialData: { icon, text },
            renderComponents: (data, _state) => {
              return componentRenderPipeline([
                data.icon.map((iconName) => renderIconFromPack(getIconName(iconName), providersBackstage.icons)),
                data.text.map((text) => renderLabel(text, ToolbarButtonClasses.Button, providersBackstage))
              ]);
            }
          });
        }).toArray()
      ).concat(behaviours.getOr([ ]))
    )
  };
};

  suite.test('Switch language', function () {
    I18n.add('code1', {
      text: 'translation1'
    });

    RawAssertions.assertEq('Should not have switched language code', 'en', I18n.getCode());
    RawAssertions.assertEq('Should not be in in rtl mode', false, I18n.isRtl());
    RawAssertions.assertEq('Should not get code1 translation', 'text', I18n.translate('text'));

    I18n.add('code2', {
      _dir: 'rtl',
      text: 'translation2'
    });

    I18n.setCode('code2');
    RawAssertions.assertEq('Should have switched language code', 'code2', I18n.getCode());
    RawAssertions.assertEq('Should be in in rtl mode', true, I18n.isRtl());
    RawAssertions.assertEq('Should be get code2 translation', 'translation2', I18n.translate('text'));

    I18n.setCode('en');
  });

 return iconName.map((name) => I18n.isRtl() && Arr.contains(rtlIcon, name) ? name + '-rtl' : name);

const setup = (editor: Editor): RenderInfo => {
  const isInline = editor.getParam('inline', false, 'boolean');
  const mode = isInline ? Inline : Iframe;
  let lazyOuterContainer: Option<AlloyComponent> = Option.none();

  const dirAttributes = I18n.isRtl() ? {
    attributes: {
      dir: 'rtl'
    }
  } : {};

  const sink = GuiFactory.build({
    dom: {
      tag: 'div',
      classes: ['tox', 'tox-silver-sink', 'tox-tinymce-aux'],
      ...dirAttributes
    },
    behaviours: Behaviour.derive([
      Positioning.config({
        useFixed: false // this allows menus to scroll with the outer page, we don't want position: fixed
      })
    ])
  });

  const memAnchorBar = Memento.record({
    dom: {
      tag: 'div',
      classes: [ 'tox-anchorbar']
    }
  });

  const lazyAnchorBar = () => lazyOuterContainer.bind((container) => {
    return memAnchorBar.getOpt(container);
  }).getOrDie('Could not find a anchor bar element');

  const lazyMoreButton = () => lazyOuterContainer.bind((container) => {
    return OuterContainer.getMoreButton(container);
  }).getOrDie('Could not find more button element');

  const lazyToolbar = () => lazyOuterContainer.bind((container) => {
    return OuterContainer.getToolbar(container);
  }).getOrDie('Could not find more toolbar element');

  const lazyThrobber = () => lazyOuterContainer.bind((container) => {
    return OuterContainer.getThrobber(container);
  }).getOrDie('Could not find throbber element');

  const backstage: Backstage.UiFactoryBackstage = Backstage.init(sink, editor, lazyAnchorBar, lazyMoreButton);

  const lazySink = () => Result.value<AlloyComponent, Error>(sink);

  const partMenubar: AlloySpec = OuterContainer.parts().menubar({
    dom: {
      tag: 'div',
      classes: [ 'tox-menubar' ]
    },
    backstage,
    onEscape () {
      editor.focus();
    }
  });

  const partToolbar: AlloySpec = OuterContainer.parts().toolbar({
    dom: {
      tag: 'div',
      classes: [ 'tox-toolbar' ]
    },
    getSink: lazySink,
    backstage,
    onEscape() {
      editor.focus();
    },
    split: getToolbarDrawer(editor),
    lazyToolbar,
    lazyMoreButton
  });

  const partSocket: AlloySpec = OuterContainer.parts().socket({
    dom: {
      tag: 'div',
      classes: [ 'tox-edit-area' ]
    }
  });

  const partSidebar: AlloySpec = OuterContainer.parts().sidebar({
    dom: {
      tag: 'div',
      classes: ['tox-sidebar']
    }
  });

  const partThrobber: AlloySpec = OuterContainer.parts().throbber({
    dom: {
      tag: 'div',
      classes: ['tox-throbber']
    },
    backstage
  });

  const statusbar = editor.getParam('statusbar', true, 'boolean') && !isInline ? Option.some(renderStatusbar(editor, backstage.shared.providers)) : Option.none();
//.........这里部分代码省略.........

 const sAssertRtl = (label: string, rtl: boolean) => Step.sync(() => {
   RawAssertions.assertEq(label, rtl, I18n.isRtl());
 });

 const getIconName = (iconName: string): string => {
   return I18n.isRtl() && Arr.contains(rtlIcon, iconName) ? iconName + '-rtl' : iconName;
 };

//.........这里部分代码省略.........
          label: 'Replace with'
        },
        {
          type: 'grid',
          columns: 2,
          items: [
            {
              type: 'checkbox',
              name: 'matchcase',
              label: 'Match case'
            },
            {
              type: 'checkbox',
              name: 'wholewords',
              label: 'Find whole words only'
            }
          ]
        }
      ]
    },
    buttons: [
      {
        type: 'custom',
        name: 'find',
        text: 'Find',
        align: 'start',
        primary: true
      },
      {
        type: 'custom',
        name: 'replace',
        text: 'Replace',
        align: 'start',
        disabled: true,
      },
      {
        type: 'custom',
        name: 'replaceall',
        text: 'Replace All',
        align: 'start',
        disabled: true,
      },
      {
        type: 'custom',
        name: 'prev',
        text: 'Previous',
        align: 'end',
        // TODO TINY-3598: Use css to transform the icons when dir=rtl instead of swapping them
        icon: I18n.isRtl() ? 'arrow-right' : 'arrow-left',
        disabled: true,
      },
      {
        type: 'custom',
        name: 'next',
        text: 'Next',
        align: 'end',
        // TODO TINY-3598: Use css to transform the icons when dir=rtl instead of swapping them
        icon: I18n.isRtl() ? 'arrow-left' : 'arrow-right',
        disabled: true,
      }
    ],
    initialData,
    onAction: (api, details) => {
      const data = api.getData();
      switch (details.name) {
        case 'find':
          doSubmit(api);
          break;
        case 'replace':
          if (!Actions.replace(editor, currentIndexState, data.replacetext)) {
            disableAll(api, true);
            currentIndexState.set(-1);
            last = {};
          }
          break;
        case 'replaceall':
          Actions.replace(editor, currentIndexState, data.replacetext, true, true);
          disableAll(api, true);
          last = {};
          break;
        case 'prev':
          Actions.prev(editor, currentIndexState);
          updateButtonStates(api);
          break;
        case 'next':
          Actions.next(editor, currentIndexState);
          updateButtonStates(api);
          break;
        default:
          break;
      }
    },
    onSubmit: doSubmit,
    onClose: () => {
      editor.focus();
      Actions.done(editor, currentIndexState);
      editor.undoManager.add();
    }
  });
};