@ckeditor/ckeditor5-font 37.1.0 → 38.0.0-rc.0

package/src/ui/colortableview.js

@@ -6,16 +6,15 @@
  * @module font/ui/colortableview
  */
 import { icons } from 'ckeditor5/src/core';
-import { ButtonView, ColorGridView, ColorTileView, FocusCycler, LabelView, Template, View, ViewCollection } from 'ckeditor5/src/ui';
+import { ButtonView, ColorGridView, ColorTileView, FocusCycler, LabelView, Template, View, ViewCollection, ColorPickerView, ColorPaletteIcon } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 import DocumentColorCollection from '../documentcolorcollection';
 import '../../theme/fontcolor.css';
 /**
  * A class which represents a view with the following sub–components:
  *
- * * A remove color button,
- * * A static {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors defined in the configuration,
- * * A dynamic {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors used in the document.
+ * * A {@link module:font/ui/colortableview~ColorTableView#colorGridsPageView color grids component},
+ * * A {@link module:font/ui/colortableview~ColorTableView#colorPickerPageView color picker component}.
  */
 export default class ColorTableView extends View {
     /**
@@ -25,21 +24,18 @@ export default class ColorTableView extends View {
      * @param colors An array with definitions of colors to be displayed in the table.
      * @param columns The number of columns in the color grid.
      * @param removeButtonLabel The label of the button responsible for removing the color.
+     * @param colorPickerLabel The label of the button responsible for color picker appearing.
      * @param documentColorsLabel The label for the section with the document colors.
      * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param colorPickerConfig The configuration of color picker feature.
      */
-    constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount }) {
+    constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, colorPickerConfig }) {
         super(locale);
         this.items = this.createCollection();
-        this.colorDefinitions = colors;
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
-        this.set('selectedColor', undefined);
-        this.removeButtonLabel = removeButtonLabel;
-        this.columns = columns;
-        this.documentColors = new DocumentColorCollection();
-        this.documentColorsCount = documentColorsCount;
         this._focusables = new ViewCollection();
+        this._colorPickerConfig = colorPickerConfig;
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
@@ -51,7 +47,36 @@ export default class ColorTableView extends View {
                 focusNext: 'tab'
             }
         });
-        this._documentColorsLabel = documentColorsLabel;
+        this.colorGridsPageView = new ColorGridsPageView(locale, {
+            colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel,
+            focusTracker: this.focusTracker,
+            focusables: this._focusables
+        });
+        this.colorPickerPageView = new ColorPickerPageView(locale, {
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokes: this.keystrokes,
+            colorPickerConfig
+        });
+        this.set('_isColorGridsPageVisible', true);
+        this.set('_isColorPickerPageVisible', false);
+        this.set('selectedColor', undefined);
+        this.colorGridsPageView.bind('isVisible').to(this, '_isColorGridsPageVisible');
+        this.colorPickerPageView.bind('isVisible').to(this, '_isColorPickerPageVisible');
+        /**
+         * This is kind of bindings. Unfortunately we could not use this.bind() method because the same property
+         * can not be binded twice. So this is work around how to bind 'selectedColor' property between components.
+         */
+        this.on('change:selectedColor', (evt, evtName, data) => {
+            this.colorGridsPageView.set('selectedColor', data);
+            this.colorPickerPageView.set('selectedColor', data);
+        });
+        this.colorGridsPageView.on('change:selectedColor', (evt, evtName, data) => {
+            this.set('selectedColor', data);
+        });
+        this.colorPickerPageView.on('change:selectedColor', (evt, evtName, data) => {
+            this.set('selectedColor', data);
+        });
         this.setTemplate({
             tag: 'div',
             attributes: {
@@ -62,7 +87,160 @@ export default class ColorTableView extends View {
             },
             children: this.items
         });
-        this.items.add(this._createRemoveColorButton());
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Appends static and document color grid views.
+     */
+    appendGrids() {
+        if (this.items.length) {
+            return;
+        }
+        this.items.add(this.colorGridsPageView);
+        this.colorGridsPageView.delegate('execute').to(this);
+        this.colorGridsPageView.delegate('showColorPicker').to(this);
+    }
+    /**
+     * Renders UI in dropdown. Which sub-components are rendered
+     * depends on the component configuration.
+     */
+    appendUI() {
+        this.appendGrids();
+        if (this._colorPickerConfig) {
+            this._appendColorPicker();
+        }
+    }
+    /**
+     * Show "Color picker" and hide "Color grids".
+     */
+    showColorPicker() {
+        if (!this.colorPickerPageView.colorPickerView) {
+            return;
+        }
+        this.set('_isColorPickerPageVisible', true);
+        this.colorPickerPageView.focus();
+        this.set('_isColorGridsPageVisible', false);
+    }
+    /**
+     * Show "Color grids" and hide "Color picker".
+     */
+    showColorGrids() {
+        this.set('_isColorGridsPageVisible', true);
+        this.set('_isColorPickerPageVisible', false);
+    }
+    /**
+     * Focuses the first focusable element in {@link #items}.
+     */
+    focus() {
+        this._focusCycler.focusFirst();
+    }
+    /**
+     * Focuses the last focusable element in {@link #items}.
+     */
+    focusLast() {
+        this._focusCycler.focusLast();
+    }
+    /**
+     * Scans through the editor model and searches for text node attributes with the given attribute name.
+     * Found entries are set as document colors.
+     *
+     * All the previously stored document colors will be lost in the process.
+     *
+     * @param model The model used as a source to obtain the document colors.
+     * @param attributeName Determines the name of the related model's attribute for a given dropdown.
+     */
+    updateDocumentColors(model, attributeName) {
+        this.colorGridsPageView.updateDocumentColors(model, attributeName);
+    }
+    /**
+     * Refreshes the state of the selected color in one or both {@link module:ui/colorgrid/colorgridview~ColorGridView}s
+     * available in the {@link module:font/ui/colortableview~ColorTableView}. It guarantees that the selection will occur only in one
+     * of them.
+     */
+    updateSelectedColors() {
+        this.colorGridsPageView.updateSelectedColors();
+    }
+    /**
+     * Appends the color picker view.
+     */
+    _appendColorPicker() {
+        if (this.items.length === 2) {
+            return;
+        }
+        this.items.add(this.colorPickerPageView);
+        if (this.colorGridsPageView.colorPickerButtonView) {
+            this.colorGridsPageView.colorPickerButtonView.on('execute', () => {
+                this.showColorPicker();
+            });
+        }
+        this.colorGridsPageView.addColorPickerButton();
+        this.colorPickerPageView.delegate('execute').to(this);
+        this.colorPickerPageView.delegate('cancel').to(this);
+    }
+}
+/**
+ * A class which represents a view with the following sub–components:
+ *
+ * * A remove color button,
+ * * A static {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors defined in the configuration,
+ * * A dynamic {@link module:ui/colorgrid/colorgridview~ColorGridView} of colors used in the document.
+ * * If color picker is configured, the "Color Picker" button is visible too.
+ */
+class ColorGridsPageView extends View {
+    /**
+     * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
+     *
+     * @param locale The localization services instance.
+     * @param colors An array with definitions of colors to be displayed in the table.
+     * @param columns The number of columns in the color grid.
+     * @param removeButtonLabel The label of the button responsible for removing the color.
+     * @param colorPickerLabel The label of the button responsible for color picker appearing.
+     * @param documentColorsLabel The label for the section with the document colors.
+     * @param documentColorsCount The number of colors in the document colors section inside the color dropdown.
+     * @param focusTracker Tracks information about the DOM focus in the list.
+     * @param focusables A collection of views that can be focused in the view.
+     */
+    constructor(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount, colorPickerLabel, focusTracker, focusables }) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isVisible', true);
+        this.focusTracker = focusTracker;
+        this.items = this.createCollection();
+        this.colorDefinitions = colors;
+        this.columns = columns;
+        this.documentColors = new DocumentColorCollection();
+        this.documentColorsCount = documentColorsCount;
+        this._focusables = focusables;
+        this._removeButtonLabel = removeButtonLabel;
+        this._colorPickerLabel = colorPickerLabel;
+        this._documentColorsLabel = documentColorsLabel;
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck-color-grids-page-view',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ]
+            },
+            children: this.items
+        });
+        this.removeColorButtonView = this._createRemoveColorButton();
+        this.items.add(this.removeColorButtonView);
     }
     /**
      * Scans through the editor model and searches for text node attributes with the given attribute name.
@@ -109,28 +287,8 @@ export default class ColorTableView extends View {
      */
     render() {
         super.render();
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Appends {@link #staticColorsGrid} and {@link #documentColorsGrid} views.
-     */
-    appendGrids() {
-        if (this.staticColorsGrid) {
-            return;
-        }
         this.staticColorsGrid = this._createStaticColorsGrid();
         this.items.add(this.staticColorsGrid);
-        this.focusTracker.add(this.staticColorsGrid.element);
-        this._focusables.add(this.staticColorsGrid);
         if (this.documentColorsCount) {
             // Create a label for document colors.
             const bind = Template.bind(this.documentColors, this.documentColors);
@@ -148,21 +306,62 @@ export default class ColorTableView extends View {
             this.items.add(label);
             this.documentColorsGrid = this._createDocumentColorsGrid();
             this.items.add(this.documentColorsGrid);
-            this.focusTracker.add(this.documentColorsGrid.element);
-            this._focusables.add(this.documentColorsGrid);
         }
+        this._createColorPickerButton();
+        this._addColorTablesElementsToFocusTracker();
+        this.focus();
     }
     /**
-     * Focuses the first focusable element in {@link #items}.
+     * Focuses the component.
      */
     focus() {
-        this._focusCycler.focusFirst();
+        this.removeColorButtonView.focus();
     }
     /**
-     * Focuses the last focusable element in {@link #items}.
+     * @inheritDoc
      */
-    focusLast() {
-        this._focusCycler.focusLast();
+    destroy() {
+        super.destroy();
+    }
+    /**
+     * Handles displaying the color picker button (if it was previously created) and making it focusable.
+     */
+    addColorPickerButton() {
+        if (this.colorPickerButtonView) {
+            this.items.add(this.colorPickerButtonView);
+            this.focusTracker.add(this.colorPickerButtonView.element);
+            this._focusables.add(this.colorPickerButtonView);
+        }
+    }
+    /**
+     * Adds color table elements to focus tracker.
+     */
+    _addColorTablesElementsToFocusTracker() {
+        this.focusTracker.add(this.removeColorButtonView.element);
+        this._focusables.add(this.removeColorButtonView);
+        if (this.staticColorsGrid) {
+            this.focusTracker.add(this.staticColorsGrid.element);
+            this._focusables.add(this.staticColorsGrid);
+        }
+        if (this.documentColorsGrid) {
+            this.focusTracker.add(this.documentColorsGrid.element);
+            this._focusables.add(this.documentColorsGrid);
+        }
+    }
+    /**
+     * Creates the button responsible for displaying the color picker component.
+     */
+    _createColorPickerButton() {
+        this.colorPickerButtonView = new ButtonView();
+        this.colorPickerButtonView.set({
+            label: this._colorPickerLabel,
+            withText: true,
+            icon: ColorPaletteIcon,
+            class: 'ck-color-table__color-picker'
+        });
+        this.colorPickerButtonView.on('execute', () => {
+            this.fire('showColorPicker');
+        });
     }
     /**
      * Adds the remove color button as a child of the current view.
@@ -172,15 +371,16 @@ export default class ColorTableView extends View {
         buttonView.set({
             withText: true,
             icon: icons.eraser,
-            label: this.removeButtonLabel
+            label: this._removeButtonLabel
         });
         buttonView.class = 'ck-color-table__remove-color';
         buttonView.on('execute', () => {
-            this.fire('execute', { value: null });
+            this.fire('execute', {
+                value: null,
+                source: 'removeColorButton'
+            });
         });
         buttonView.render();
-        this.focusTracker.add(buttonView.element);
-        this._focusables.add(buttonView);
         return buttonView;
     }
     /**
@@ -191,7 +391,12 @@ export default class ColorTableView extends View {
             colorDefinitions: this.colorDefinitions,
             columns: this.columns
         });
-        colorGrid.delegate('execute').to(this);
+        colorGrid.on('execute', (evt, data) => {
+            this.fire('execute', {
+                value: data.value,
+                source: 'staticColorsGrid'
+            });
+        });
         return colorGrid;
     }
     /**
@@ -202,7 +407,6 @@ export default class ColorTableView extends View {
         const documentColorsGrid = new ColorGridView(this.locale, {
             columns: this.columns
         });
-        documentColorsGrid.delegate('execute').to(this);
         documentColorsGrid.extendTemplate({
             attributes: {
                 class: bind.if('isEmpty', 'ck-hidden')
@@ -222,7 +426,8 @@ export default class ColorTableView extends View {
             }
             colorTile.on('execute', () => {
                 this.fire('execute', {
-                    value: colorObj.color
+                    value: colorObj.color,
+                    source: 'documentColorsGrid'
                 });
             });
             return colorTile;
@@ -258,3 +463,183 @@ export default class ColorTableView extends View {
         }
     }
 }
+/**
+ * A class which represents a color picker component view with the following sub–components:
+ *
+ * * Color picker saturation and hue sliders,
+ * * Input accepting colors in HEX format,
+ * * "Save" and "Cancel" action buttons.
+ */
+class ColorPickerPageView extends View {
+    /**
+     * @param locale The localization services instance.
+     * @param focusTracker Tracks information about the DOM focus in the list.
+     * @param focusables A collection of views that can be focused in the view..
+     * @param keystrokes An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     * @param colorPickerConfig The configuration of color picker feature.
+     */
+    constructor(locale, { focusTracker, focusables, keystrokes, colorPickerConfig }) {
+        super(locale);
+        this.items = this.createCollection();
+        this.focusTracker = focusTracker;
+        this.keystrokes = keystrokes;
+        this.set('isVisible', false);
+        this.set('selectedColor', undefined);
+        this._focusables = focusables;
+        this._pickerConfig = colorPickerConfig;
+        const bind = this.bindTemplate;
+        const { saveButtonView, cancelButtonView } = this._createActionButtons();
+        this.saveButtonView = saveButtonView;
+        this.cancelButtonView = cancelButtonView;
+        this.actionBarView = this._createActionBarView({ saveButtonView, cancelButtonView });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck-color-picker-page-view',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ]
+            },
+            children: this.items
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        const colorPickerView = new ColorPickerView(this.locale, this._pickerConfig);
+        this.colorPickerView = colorPickerView;
+        this.colorPickerView.render();
+        if (this.selectedColor) {
+            colorPickerView.color = this.selectedColor;
+        }
+        this.listenTo(this, 'change:selectedColor', (evt, name, value) => {
+            colorPickerView.color = value;
+        });
+        this.items.add(this.colorPickerView);
+        this.items.add(this.actionBarView);
+        this._addColorPickersElementsToFocusTracker();
+        this._stopPropagationOnArrowsKeys();
+        this._executeOnEnterPress();
+        this._executeUponColorChange();
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+    }
+    /**
+     * Focuses the color picker.
+     */
+    focus() {
+        this.colorPickerView.focus();
+    }
+    /**
+     * When color picker is focused and "enter" is pressed it executes command.
+     */
+    _executeOnEnterPress() {
+        this.keystrokes.set('enter', evt => {
+            if (this.isVisible && this.focusTracker.focusedElement !== this.cancelButtonView.element) {
+                this.fire('execute', {
+                    value: this.selectedColor
+                });
+                evt.stopPropagation();
+                evt.preventDefault();
+            }
+        });
+    }
+    /**
+     * Removes default behavior of arrow keys in dropdown.
+     */
+    _stopPropagationOnArrowsKeys() {
+        const stopPropagation = (data) => data.stopPropagation();
+        this.keystrokes.set('arrowright', stopPropagation);
+        this.keystrokes.set('arrowleft', stopPropagation);
+        this.keystrokes.set('arrowup', stopPropagation);
+        this.keystrokes.set('arrowdown', stopPropagation);
+    }
+    /**
+     * Adds color picker elements to focus tracker.
+     */
+    _addColorPickersElementsToFocusTracker() {
+        for (const slider of this.colorPickerView.slidersView) {
+            this.focusTracker.add(slider.element);
+            this._focusables.add(slider);
+        }
+        this.focusTracker.add(this.colorPickerView.hexInputRow.children.get(1).element);
+        this._focusables.add(this.colorPickerView.hexInputRow.children.get(1));
+        this.focusTracker.add(this.saveButtonView.element);
+        this._focusables.add(this.saveButtonView);
+        this.focusTracker.add(this.cancelButtonView.element);
+        this._focusables.add(this.cancelButtonView);
+    }
+    /**
+     * Creates bar containing "Save" and "Cancel" buttons.
+     */
+    _createActionBarView({ saveButtonView, cancelButtonView }) {
+        const actionBarRow = new View();
+        const children = this.createCollection();
+        children.add(saveButtonView);
+        children.add(cancelButtonView);
+        actionBarRow.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-color-table_action-bar'
+                ]
+            },
+            children
+        });
+        return actionBarRow;
+    }
+    /**
+     * Creates "Save" and "Cancel" buttons.
+     */
+    _createActionButtons() {
+        const locale = this.locale;
+        const t = locale.t;
+        const saveButtonView = new ButtonView(locale);
+        const cancelButtonView = new ButtonView(locale);
+        saveButtonView.set({
+            icon: icons.check,
+            class: 'ck-button-save',
+            withText: false,
+            label: t('Accept'),
+            type: 'submit'
+        });
+        cancelButtonView.set({
+            icon: icons.cancel,
+            class: 'ck-button-cancel',
+            withText: false,
+            label: t('Cancel')
+        });
+        saveButtonView.on('execute', () => {
+            this.fire('execute', {
+                source: 'saveButton',
+                value: this.selectedColor
+            });
+        });
+        cancelButtonView.on('execute', () => {
+            this.fire('cancel');
+        });
+        return {
+            saveButtonView, cancelButtonView
+        };
+    }
+    /**
+     * Fires the `execute` event if color in color picker changed.
+     *
+     * @fires execute
+     */
+    _executeUponColorChange() {
+        this.colorPickerView.on('change:color', (evt, evtName, newValue) => {
+            this.fire('execute', {
+                value: newValue,
+                source: 'colorPicker'
+            });
+        });
+    }
+}

package/src/ui/colorui.d.ts

@@ -7,7 +7,7 @@
  */
 import { Plugin, type Editor } from 'ckeditor5/src/core';
 import { type FONT_BACKGROUND_COLOR, type FONT_COLOR } from '../utils';
-import type ColorTableView from './colortableview';
+import { type default as ColorTableView } from './colortableview';
 /**
  * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
  *
@@ -40,6 +40,10 @@ export default class ColorUI extends Plugin {
      * Keeps a reference to {@link module:font/ui/colortableview~ColorTableView}.
      */
     colorTableView: ColorTableView | undefined;
+    /**
+     * Keeps all changes in color picker in one batch while dropdown is open.
+     */
+    private _undoStepBatch;
     /**
      * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.
      *

package/src/ui/colorui.js

@@ -42,12 +42,16 @@ export default class ColorUI extends Plugin {
         const locale = editor.locale;
         const t = locale.t;
         const command = editor.commands.get(this.commandName);
-        const colorsConfig = normalizeColorOptions((editor.config.get(this.componentName)).colors);
+        const componentConfig = editor.config.get(this.componentName);
+        const colorsConfig = normalizeColorOptions(componentConfig.colors);
         const localizedColors = getLocalizedColorOptions(locale, colorsConfig);
-        const documentColorsCount = editor.config.get(`${this.componentName}.documentColors`);
+        const documentColorsCount = componentConfig.documentColors;
+        const hasColorPicker = componentConfig.colorPicker !== false;
         // Register the UI component.
         editor.ui.componentFactory.add(this.componentName, locale => {
             const dropdownView = createDropdown(locale);
+            // Font color dropdown rendering is deferred once it gets open to improve performance (#6192).
+            let dropdownContentRendered = false;
             this.colorTableView = addColorTableToDropdown({
                 dropdownView,
                 colors: localizedColors.map(option => ({
@@ -59,8 +63,10 @@ export default class ColorUI extends Plugin {
                 })),
                 columns: this.columns,
                 removeButtonLabel: t('Remove color'),
+                colorPickerLabel: t('Color picker'),
                 documentColorsLabel: documentColorsCount !== 0 ? t('Document colors') : '',
-                documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount
+                documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount,
+                colorPickerConfig: hasColorPicker ? (componentConfig.colorPicker || {}) : false
             });
             this.colorTableView.bind('selectedColor').to(command, 'value');
             dropdownView.buttonView.set({
@@ -74,22 +80,48 @@ export default class ColorUI extends Plugin {
                 }
             });
             dropdownView.bind('isEnabled').to(command);
-            dropdownView.on('execute', (evt, data) => {
-                editor.execute(this.commandName, data);
+            this.colorTableView.on('execute', (evt, data) => {
+                if (dropdownView.isOpen) {
+                    editor.execute(this.commandName, {
+                        value: data.value,
+                        batch: this._undoStepBatch
+                    });
+                }
+                if (data.source !== 'colorPicker') {
+                    editor.editing.view.focus();
+                }
+            });
+            this.colorTableView.on('showColorPicker', () => {
+                this._undoStepBatch = editor.model.createBatch();
+            });
+            this.colorTableView.on('cancel', () => {
+                if (this._undoStepBatch.operations.length) {
+                    // We need to close the dropdown before the undo batch.
+                    // Otherwise, ColorUI treats undo as a selected color change,
+                    // propagating the update to the whole selection.
+                    // That's an issue if spans with various colors were selected.
+                    dropdownView.isOpen = false;
+                    editor.execute('undo', this._undoStepBatch);
+                }
                 editor.editing.view.focus();
             });
             dropdownView.on('change:isOpen', (evt, name, isVisible) => {
-                // Grids rendering is deferred (#6192).
-                dropdownView.colorTableView.appendGrids();
+                if (!dropdownContentRendered) {
+                    dropdownContentRendered = true;
+                    dropdownView.colorTableView.appendUI();
+                }
                 if (isVisible) {
                     if (documentColorsCount !== 0) {
                         this.colorTableView.updateDocumentColors(editor.model, this.componentName);
                     }
                     this.colorTableView.updateSelectedColors();
                 }
+                else {
+                    this.colorTableView.showColorGrids();
+                }
             });
             // Accessibility: focus the first active color when opening the dropdown.
-            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorTableView.staticColorsGrid.items.find((item) => item.isOn));
+            focusChildOnDropdownOpen(dropdownView, () => dropdownView.colorTableView.colorGridsPageView.staticColorsGrid.items.find((item) => item.isOn));
             return dropdownView;
         });
     }