docs: function initUI(editor, preset) {
    const name = 'colorSyntax';
    const className = 'tui-color';
    const i18n = editor.i18n;
    const toolbar = editor.getUI().getToolbar();
    const {usageStatistics} = editor.options;
  
    editor.eventManager.addEventType('colorButtonClicked');
  
    toolbar.insertItem(3, {
      type: 'button',
      options: {
        name,
        className,
        event: 'colorButtonClicked',
        tooltip: i18n.get('Text color')
      }
    });
    const colorSyntaxButtonIndex = toolbar.indexOfItem(name);
    const {$el: $button} = toolbar.getItem(colorSyntaxButtonIndex);
  
    const $colorPickerContainer = $('<div />');
  
    const $buttonBar = $(`<button type="button" class="te-apply-button">${i18n.get('OK')}</button>`);
  
    const cpOptions = {
      container: $colorPickerContainer[0],
      usageStatistics
    };
  
    if (preset) {
      cpOptions.preset = preset;
    }
  
    const colorPicker = ColorPicker.create(cpOptions);
  
    let selectedColor = colorPicker.getColor();
  
    $colorPickerContainer.append($buttonBar);
  
    const popup = editor.getUI().createPopup({
      header: false,
      title: false,
      content: $colorPickerContainer,
      className: 'tui-popup-color',
      $target: editor.getUI().getToolbar().$el,
      css: {
        'width': 'auto',
        'position': 'absolute'
      }
    });
  
    editor.eventManager.listen('focus', () => {
      popup.hide();
    });
  
    editor.eventManager.listen('colorButtonClicked', () => {
      if (popup.isShow()) {
        popup.hide();
  
        return;
      }
  
      const {
        offsetTop,
        offsetLeft
      } = $button.get(0);
      popup.$el.css({
        top: offsetTop + $button.outerHeight(),
        left: offsetLeft
      });
      colorPicker.slider.toggle(true);
  
      editor.eventManager.emit('closeAllPopup');
      popup.show();
    });
  
    editor.eventManager.listen('closeAllPopup', () => {
      popup.hide();
    });
  
    editor.eventManager.listen('removeEditor', () => {
      colorPicker.off('selectColor');
      popup.$el.find('.te-apply-button').off('click');
      popup.remove();
    });
  
    colorPicker.on('selectColor', e => {
      selectedColor = e.color;
  
      if (e.origin === 'palette') {
        editor.exec('color', selectedColor);
        popup.hide();
      }
    });
  
    popup.$el.find('.te-apply-button').on('click', () => {
      editor.exec('color', selectedColor);
    });
  }