@ckeditor/ckeditor5-table 39.0.2 → 40.1.0

package/build/translations/fi.js

@@ -1 +1 @@
-!function(t){const e=t.fi=t.fi||{};e.dictionary=Object.assign(e.dictionary||{},{"Align cell text to the bottom":"Siirrä solun teksti alaosaan","Align cell text to the center":"Siirrä solun teksti keskelle","Align cell text to the left":"Siirrä solun teksti vasemmalle","Align cell text to the middle":"Siirrä solun teksti keskiosaan","Align cell text to the right":"Siirrä solun teksti oikealle","Align cell text to the top":"Siirrä solun teksti yläosaan","Align table to the left":"Siirrä taulukko vasemmalle","Align table to the right":"Siirrä taulukko oikealle",Alignment:"Suunta",Background:"Tausta",Border:"Reunus","Cell properties":"Solun ominaisuudet","Center table":"Keskitä taulukko",Color:"Väri","Color picker":"Värin valitsin",Column:"Sarake",Dashed:"Katkoviiva","Delete column":"Poista sarake","Delete row":"Poista rivi",Dimensions:"Mittasuhteet",Dotted:"Pisteviiva",Double:"Kaksinkertainen","Enter table caption":"Ota taulukon tekstitys käyttöön",Groove:"Uurrettu","Header column":"Otsikkosarake","Header row":"Otsikkorivi",Height:"Korkeus","Horizontal text alignment toolbar":"Vaakasuoran tekstin suunnan työkalupalkki","Insert column left":"Lisää sarake vasemmalle","Insert column right":"Lisää sarake oikealle","Insert row above":"Lisää rivi ylle","Insert row below":"Lisää rivi alle","Insert table":"Lisää taulukko",Inset:"Upote","Justify cell text":"Tasaa solun teksti","Merge cell down":"Yhdistä solu alas","Merge cell left":"Yhdistä solu vasemmalle","Merge cell right":"Yhdistä solu oikealle","Merge cell up":"Yhdistä solu ylös","Merge cells":"Yhdistä tai jaa soluja",None:"Ei mitään",Outset:"Ulkonema",Padding:"Täyte",Ridge:"Harjanne",Row:"Rivi","Select column":"Valitse sarake","Select row":"Valitse rivi",Solid:"Kiinteä","Split cell horizontally":"Jaa solu vaakasuunnassa","Split cell vertically":"Jaa solu pystysuunnassa",Style:"Tyyli","Table alignment toolbar":"Taulukon suunnan työkalupalkki","Table cell text alignment":"Taulukkosolun tekstin suunta","Table properties":"Taulukon ominaisuudet","Table toolbar":"Taulukon työkalupalkki",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':'Väri ei kelpaa. Ota sen sijaan käyttöön "#FF0000", "rgb(255,0,0)" tai "red".','The value is invalid. Try "10px" or "2em" or simply "2".':'Arvo ei kelpaa. Ota käyttöön "10px", "2em" tai pelkästään "2".',"Toggle caption off":"Ota tekstitykset pois päältä","Toggle caption on":"Ota tekstitys käyttöön","Vertical text alignment toolbar":"Pystysuoran tekstin suunnan työkalupalkki",Width:"Leveys"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));
+!function(e){const t=e.fi=e.fi||{};t.dictionary=Object.assign(t.dictionary||{},{"Align cell text to the bottom":"Siirrä solun teksti alaosaan","Align cell text to the center":"Siirrä solun teksti keskelle","Align cell text to the left":"Siirrä solun teksti vasemmalle","Align cell text to the middle":"Siirrä solun teksti keskiosaan","Align cell text to the right":"Siirrä solun teksti oikealle","Align cell text to the top":"Siirrä solun teksti yläosaan","Align table to the left":"Siirrä taulukko vasemmalle","Align table to the right":"Siirrä taulukko oikealle",Alignment:"Suunta",Background:"Tausta",Border:"Reunus","Cell properties":"Solun ominaisuudet","Center table":"Keskitä taulukko",Color:"Väri","Color picker":"Värin valitsin",Column:"Sarake",Dashed:"Katkoviiva","Delete column":"Poista sarake","Delete row":"Poista rivi",Dimensions:"Mittasuhteet",Dotted:"Pisteviiva",Double:"Kaksinkertainen","Enter table caption":"Syötä taulukon kuvaus",Groove:"Uurrettu","Header column":"Otsikkosarake","Header row":"Otsikkorivi",Height:"Korkeus","Horizontal text alignment toolbar":"Vaakasuoran tekstin suunnan työkalupalkki","Insert column left":"Lisää sarake vasemmalle","Insert column right":"Lisää sarake oikealle","Insert row above":"Lisää rivi ylle","Insert row below":"Lisää rivi alle","Insert table":"Lisää taulukko",Inset:"Upote","Justify cell text":"Tasaa solun teksti","Merge cell down":"Yhdistä solu alas","Merge cell left":"Yhdistä solu vasemmalle","Merge cell right":"Yhdistä solu oikealle","Merge cell up":"Yhdistä solu ylös","Merge cells":"Yhdistä tai jaa soluja",None:"Ei mitään",Outset:"Ulkonema",Padding:"Täyte",Ridge:"Harjanne",Row:"Rivi","Select column":"Valitse sarake","Select row":"Valitse rivi",Solid:"Kiinteä","Split cell horizontally":"Jaa solu vaakasuunnassa","Split cell vertically":"Jaa solu pystysuunnassa",Style:"Tyyli","Table alignment toolbar":"Taulukon suunnan työkalupalkki","Table cell text alignment":"Taulukkosolun tekstin suunta","Table properties":"Taulukon ominaisuudet","Table toolbar":"Taulukon työkalupalkki",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':'Väri ei kelpaa. Ota sen sijaan käyttöön "#FF0000", "rgb(255,0,0)" tai "red".','The value is invalid. Try "10px" or "2em" or simply "2".':'Arvo ei kelpaa. Ota käyttöön "10px", "2em" tai pelkästään "2".',"Toggle caption off":"Poista taulukon kuvaus","Toggle caption on":"Lisää taulukon kuvaus","Vertical text alignment toolbar":"Pystysuoran tekstin suunnan työkalupalkki",Width:"Leveys"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/build/translations/hy.js

@@ -0,0 +1 @@
+!function(e){const t=e.hy=e.hy||{};t.dictionary=Object.assign(t.dictionary||{},{"Align cell text to the bottom":"","Align cell text to the center":"","Align cell text to the left":"","Align cell text to the middle":"","Align cell text to the right":"","Align cell text to the top":"","Align table to the left":"","Align table to the right":"",Alignment:"",Background:"",Border:"","Cell properties":"","Center table":"",Color:"","Color picker":"",Column:"Սյունակ",Dashed:"","Delete column":"","Delete row":"",Dimensions:"",Dotted:"",Double:"","Enter table caption":"",Groove:"","Header column":"","Header row":"",Height:"","Horizontal text alignment toolbar":"","Insert column left":"","Insert column right":"","Insert row above":"","Insert row below":"","Insert table":"",Inset:"","Justify cell text":"","Merge cell down":"","Merge cell left":"","Merge cell right":"","Merge cell up":"","Merge cells":"",None:"",Outset:"",Padding:"",Ridge:"",Row:"","Select column":"","Select row":"",Solid:"","Split cell horizontally":"","Split cell vertically":"",Style:"","Table alignment toolbar":"","Table cell text alignment":"","Table properties":"","Table toolbar":"",'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".':"",'The value is invalid. Try "10px" or "2em" or simply "2".':"","Toggle caption off":"","Toggle caption on":"","Vertical text alignment toolbar":"",Width:""})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/lang/translations/fi.po

@@ -251,12 +251,12 @@ msgstr "Värin valitsin"
 
 msgctxt "The button label for the table toolbar hiding caption attached to the table."
 msgid "Toggle caption off"
-msgstr "Ota tekstitykset pois päältä"
+msgstr "Poista taulukon kuvaus"
 
 msgctxt "The button label for the table toolbar showing caption attached to the table."
 msgid "Toggle caption on"
-msgstr "Ota tekstitys käyttöön"
+msgstr "Lisää taulukon kuvaus"
 
 msgctxt "The placeholder text for the table caption displayed when the caption is empty."
 msgid "Enter table caption"
-msgstr "Ota taulukon tekstitys käyttöön"
+msgstr "Syötä taulukon kuvaus"

package/lang/translations/hy.po

@@ -0,0 +1,262 @@
+# Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Armenian (https://app.transifex.com/ckeditor/teams/11143/hy/)\n"
+"Language: hy\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+
+msgctxt "Label for the insert table toolbar button."
+msgid "Insert table"
+msgstr ""
+
+msgctxt "Label for the set/unset table header column button."
+msgid "Header column"
+msgstr ""
+
+msgctxt "Label for the insert table column to the left of the current one button."
+msgid "Insert column left"
+msgstr ""
+
+msgctxt "Label for the insert table column to the right of the current one button."
+msgid "Insert column right"
+msgstr ""
+
+msgctxt "Label for the delete table column button."
+msgid "Delete column"
+msgstr ""
+
+msgctxt "Label for the select the entire table column button."
+msgid "Select column"
+msgstr ""
+
+msgctxt "Label for the table column dropdown button."
+msgid "Column"
+msgstr "Սյունակ"
+
+msgctxt "Label for the set/unset table header row button."
+msgid "Header row"
+msgstr ""
+
+msgctxt "Label for the insert row below button."
+msgid "Insert row below"
+msgstr ""
+
+msgctxt "Label for the insert row above button."
+msgid "Insert row above"
+msgstr ""
+
+msgctxt "Label for the delete table row button."
+msgid "Delete row"
+msgstr ""
+
+msgctxt "Label for the select the entire table row button."
+msgid "Select row"
+msgstr ""
+
+msgctxt "Label for the table row dropdown button."
+msgid "Row"
+msgstr ""
+
+msgctxt "Label for the merge table cell up button."
+msgid "Merge cell up"
+msgstr ""
+
+msgctxt "Label for the merge table cell right button."
+msgid "Merge cell right"
+msgstr ""
+
+msgctxt "Label for the merge table cell down button."
+msgid "Merge cell down"
+msgstr ""
+
+msgctxt "Label for the merge table cell left button."
+msgid "Merge cell left"
+msgstr ""
+
+msgctxt "Label for the split table cell vertically button."
+msgid "Split cell vertically"
+msgstr ""
+
+msgctxt "Label for the split table cell horizontally button."
+msgid "Split cell horizontally"
+msgstr ""
+
+msgctxt "Label for the merge table cells button."
+msgid "Merge cells"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a table toolbar attached to a table widget."
+msgid "Table toolbar"
+msgstr ""
+
+msgctxt "The label describing the form allowing to specify the properties of a selected table."
+msgid "Table properties"
+msgstr ""
+
+msgctxt "The label describing the form allowing to specify the properties of a selected table cell."
+msgid "Cell properties"
+msgstr ""
+
+msgctxt "The label describing a group of border–related form fields (border style, color, etc.)."
+msgid "Border"
+msgstr ""
+
+msgctxt "The label for the dropdown that allows configuring the border style of a table or a table cell."
+msgid "Style"
+msgstr ""
+
+msgctxt "The label for the input that allows configuring the width of a table or a table cell or the width of a border."
+msgid "Width"
+msgstr ""
+
+msgctxt "The label for the input that allows configuring the height of a table or a table cell."
+msgid "Height"
+msgstr ""
+
+msgctxt "The label for the input that allows configuring the border color of a table or a table cell."
+msgid "Color"
+msgstr ""
+
+msgctxt "The label for the input that allows configuring the background color of a table or a table cell."
+msgid "Background"
+msgstr ""
+
+msgctxt "The label for the input that allows configuring the padding of a table cell."
+msgid "Padding"
+msgstr ""
+
+msgctxt "The label describing a group of form fields that allows setting dimensions of a table or a table cell."
+msgid "Dimensions"
+msgstr ""
+
+msgctxt "The label for the group of toolbars that allows configuring the text alignment in a table cell."
+msgid "Table cell text alignment"
+msgstr ""
+
+msgctxt "The label for the toolbar that allows configuring the alignment of a table."
+msgid "Alignment"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a toolbar that allows configuring the horizontal text alignment in a table cell."
+msgid "Horizontal text alignment toolbar"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a toolbar that allows configuring the vertical text alignment in a table cell."
+msgid "Vertical text alignment toolbar"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a toolbar that allows configuring the alignment of a table."
+msgid "Table alignment toolbar"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when no style is applied to a table or a table cell."
+msgid "None"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the solid border is applied to a table or a table cell."
+msgid "Solid"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the dotted border is applied to a table or a table cell."
+msgid "Dotted"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the dashed border is applied to a table or a table cell."
+msgid "Dashed"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the double border is applied to a table or a table cell."
+msgid "Double"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the groove border is applied to a table or a table cell."
+msgid "Groove"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the ridge border is applied to a table or a table cell."
+msgid "Ridge"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the inset border is applied to a table or a table cell."
+msgid "Inset"
+msgstr ""
+
+msgctxt "The label for the border style dropdown when the outset border is applied to a table or a table cell."
+msgid "Outset"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the left."
+msgid "Align cell text to the left"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the center."
+msgid "Align cell text to the center"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the right."
+msgid "Align cell text to the right"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that justifies the table cell text."
+msgid "Justify cell text"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the top."
+msgid "Align cell text to the top"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the middle."
+msgid "Align cell text to the middle"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table cell text to the bottom."
+msgid "Align cell text to the bottom"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table to the left."
+msgid "Align table to the left"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that centers the table."
+msgid "Center table"
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that aligns the table to the right."
+msgid "Align table to the right"
+msgstr ""
+
+msgctxt "The localized error string that can be displayed next to color (background, border) fields that have an invalid value"
+msgid "The color is invalid. Try \"#FF0000\" or \"rgb(255,0,0)\" or \"red\"."
+msgstr ""
+
+msgctxt "The localized error string that can be displayed next to length (padding, border width) fields that have an invalid value."
+msgid "The value is invalid. Try \"10px\" or \"2em\" or simply \"2\"."
+msgstr ""
+
+msgctxt "The label used by assistive technologies describing a button that opens a color picker, where user can choose a configured color for a certain properties (eg.: background color, color, border-color etc.)."
+msgid "Color picker"
+msgstr ""
+
+msgctxt "The button label for the table toolbar hiding caption attached to the table."
+msgid "Toggle caption off"
+msgstr ""
+
+msgctxt "The button label for the table toolbar showing caption attached to the table."
+msgid "Toggle caption on"
+msgstr ""
+
+msgctxt "The placeholder text for the table caption displayed when the caption is empty."
+msgid "Enter table caption"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "39.0.2",
+  "version": "40.1.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,7 +12,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "39.0.2",
+    "ckeditor5": "40.1.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/tablecaption/toggletablecaptioncommand.js

@@ -6,7 +6,8 @@
 * @module table/tablecaption/toggletablecaptioncommand
 */
 import { Command } from 'ckeditor5/src/core';
-import { getCaptionFromTableModelElement, getSelectionAffectedTable } from './utils';
+import { getCaptionFromTableModelElement } from './utils';
+import { getSelectionAffectedTable } from '../utils/common';
 /**
  * The toggle table caption command.
  *

package/src/tablecaption/utils.d.ts

@@ -36,7 +36,3 @@ export declare function getCaptionFromModelSelection(selection: DocumentSelectio
 export declare function matchTableCaptionViewElement(element: ViewElement): {
     name: true;
 } | null;
-/**
- * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
- */
-export declare function getSelectionAffectedTable(selection: DocumentSelection): Element;

package/src/tablecaption/utils.js

@@ -2,6 +2,7 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
+import { getSelectionAffectedTable } from '../utils/common';
 /**
  * Checks if the provided model element is a `table`.
  *
@@ -54,14 +55,3 @@ export function matchTableCaptionViewElement(element) {
     }
     return null;
 }
-/**
- * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
- */
-export function getSelectionAffectedTable(selection) {
-    const selectedElement = selection.getSelectedElement();
-    // Is the command triggered from the `tableToolbar`?
-    if (selectedElement && selectedElement.is('element', 'table')) {
-        return selectedElement;
-    }
-    return selection.getFirstPosition().findAncestor('table');
-}

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -174,13 +174,22 @@ export default class TableCellPropertiesView extends View {
         submitHandler({
             view: this
         });
+        // Maintain continuous focus cycling over views that have focusable children and focus cyclers themselves.
+        [this.borderColorInput, this.backgroundInput].forEach(view => {
+            view.fieldView.focusCycler.on('forwardCycle', evt => {
+                this._focusCycler.focusNext();
+                evt.stop();
+            });
+            view.fieldView.focusCycler.on('backwardCycle', evt => {
+                this._focusCycler.focusPrevious();
+                evt.stop();
+            });
+        });
         [
             this.borderStyleDropdown,
             this.borderColorInput,
-            this.borderColorInput.fieldView.dropdownView.buttonView,
             this.borderWidthInput,
             this.backgroundInput,
-            this.backgroundInput.fieldView.dropdownView.buttonView,
             this.widthInput,
             this.heightInput,
             this.paddingInput,

package/src/tableproperties/commands/tablepropertycommand.js

@@ -3,6 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import { Command } from 'ckeditor5/src/core';
+import { getSelectionAffectedTable } from '../../utils/common';
 /**
  * The table cell attribute command.
  *
@@ -27,7 +28,7 @@ export default class TablePropertyCommand extends Command {
     refresh() {
         const editor = this.editor;
         const selection = editor.model.document.selection;
-        const table = selection.getFirstPosition().findAncestor('table');
+        const table = getSelectionAffectedTable(selection);
         this.isEnabled = !!table;
         this.value = this._getValue(table);
     }
@@ -44,7 +45,7 @@ export default class TablePropertyCommand extends Command {
         const model = this.editor.model;
         const selection = model.document.selection;
         const { value, batch } = options;
-        const table = selection.getFirstPosition().findAncestor('table');
+        const table = getSelectionAffectedTable(selection);
         const valueToSet = this._getValueToSet(value);
         model.enqueueChange(batch, writer => {
             if (valueToSet) {

package/src/tableproperties/tablepropertiesui.js

@@ -11,7 +11,7 @@ import { debounce } from 'lodash-es';
 import TablePropertiesView from './ui/tablepropertiesview';
 import tableProperties from './../../theme/icons/table-properties.svg';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, lengthFieldValidator, lineWidthFieldValidator, defaultColors } from '../utils/ui/table-properties';
-import { getTableWidgetAncestor } from '../utils/ui/widget';
+import { getSelectionAffectedTableWidget } from '../utils/ui/widget';
 import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon';
 import { getNormalizedDefaultProperties } from '../utils/table-properties';
 const ERROR_TEXT_TIMEOUT = 500;
@@ -251,7 +251,7 @@ export default class TablePropertiesUI extends Plugin {
     _updateView() {
         const editor = this.editor;
         const viewDocument = editor.editing.view.document;
-        if (!getTableWidgetAncestor(viewDocument.selection)) {
+        if (!getSelectionAffectedTableWidget(viewDocument.selection)) {
             this._hideView();
         }
         else if (this._isViewVisible) {

package/src/tableproperties/ui/tablepropertiesview.js

@@ -152,13 +152,22 @@ export default class TablePropertiesView extends View {
         submitHandler({
             view: this
         });
+        // Maintain continuous focus cycling over views that have focusable children and focus cyclers themselves.
+        [this.borderColorInput, this.backgroundInput].forEach(view => {
+            view.fieldView.focusCycler.on('forwardCycle', evt => {
+                this._focusCycler.focusNext();
+                evt.stop();
+            });
+            view.fieldView.focusCycler.on('backwardCycle', evt => {
+                this._focusCycler.focusPrevious();
+                evt.stop();
+            });
+        });
         [
             this.borderStyleDropdown,
             this.borderColorInput,
-            this.borderColorInput.fieldView.dropdownView.buttonView,
             this.borderWidthInput,
             this.backgroundInput,
-            this.backgroundInput.fieldView.dropdownView.buttonView,
             this.widthInput,
             this.heightInput,
             this.alignmentToolbar,

package/src/ui/colorinputview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/ui/colorinputview
  */
-import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView, type ColorPickerConfig } from 'ckeditor5/src/ui';
+import { View, InputTextView, FocusCycler, ViewCollection, type ColorDefinition, type DropdownView, type ColorPickerConfig, type FocusableView } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
 import '../../theme/colorinput.css';
 export type ColorInputViewOptions = {
@@ -20,7 +20,7 @@ export type ColorInputViewOptions = {
  *
  * @internal
  */
-export default class ColorInputView extends View {
+export default class ColorInputView extends View implements FocusableView {
     /**
      * The value of the input.
      *
@@ -62,6 +62,10 @@ export default class ColorInputView extends View {
      * Tracks information about the DOM focus in the view.
      */
     readonly focusTracker: FocusTracker;
+    /**
+     * Helps cycling over focusable children in the input view.
+     */
+    readonly focusCycler: FocusCycler;
     /**
      * A collection of views that can be focused in the view.
      */
@@ -84,10 +88,6 @@ export default class ColorInputView extends View {
      * So, we should interrupt the user by replacing the input's value.
      */
     protected _stillTyping: boolean;
-    /**
-     * Helps cycling over focusable items in the view.
-     */
-    protected readonly _focusCycler: FocusCycler;
     /**
      * Creates an instance of the color input view.
      *
@@ -104,9 +104,9 @@ export default class ColorInputView extends View {
      */
     render(): void;
     /**
-     * Focuses the input.
+     * Focuses the view.
      */
-    focus(): void;
+    focus(direction: 1 | -1): void;
     /**
      * @inheritDoc
      */

package/src/ui/colorinputview.js

@@ -38,7 +38,7 @@ export default class ColorInputView extends View {
         this.inputView = this._createInputTextView();
         this.keystrokes = new KeystrokeHandler();
         this._stillTyping = false;
-        this._focusCycler = new FocusCycler({
+        this.focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
             keystrokeHandler: this.keystrokes,
@@ -69,14 +69,22 @@ export default class ColorInputView extends View {
      */
     render() {
         super.render();
-        // Start listening for the keystrokes coming from the dropdown panel view.
-        this.keystrokes.listenTo(this.dropdownView.panelView.element);
+        [this.inputView, this.dropdownView.buttonView].forEach(view => {
+            this.focusTracker.add(view.element);
+            this._focusables.add(view);
+        });
+        this.keystrokes.listenTo(this.element);
     }
     /**
-     * Focuses the input.
+     * Focuses the view.
      */
-    focus() {
-        this.inputView.focus();
+    focus(direction) {
+        if (direction === -1) {
+            this.focusCycler.focusLast();
+        }
+        else {
+            this.focusCycler.focusFirst();
+        }
     }
     /**
      * @inheritDoc
@@ -129,8 +137,6 @@ export default class ColorInputView extends View {
         dropdown.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
         dropdown.panelView.children.add(colorSelector);
         dropdown.bind('isEnabled').to(this, 'isReadOnly', value => !value);
-        this._focusables.add(colorSelector);
-        this.focusTracker.add(colorSelector.element);
         dropdown.on('change:isOpen', (evt, name, isVisible) => {
             if (isVisible) {
                 colorSelector.updateSelectedColors();

package/src/utils/common.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module table/utils/common
  */
-import type { Conversion, Element, Item, Position, Schema, Writer } from 'ckeditor5/src/engine';
+import type { Conversion, Element, Item, Position, Schema, Writer, DocumentSelection } from 'ckeditor5/src/engine';
 import type TableUtils from '../tableutils';
 /**
  * A common method to update the numeric value. If a value is the default one, it will be unset.
@@ -40,3 +40,7 @@ export declare function enableProperty(schema: Schema, conversion: Conversion, o
     defaultValue: string;
     reduceBoxSides?: boolean;
 }): void;
+/**
+ * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
+ */
+export declare function getSelectionAffectedTable(selection: DocumentSelection): Element;

package/src/utils/common.js

@@ -55,3 +55,14 @@ export function enableProperty(schema, conversion, options) {
     upcastStyleToAttribute(conversion, { viewElement: /^(td|th)$/, ...options });
     downcastAttributeToStyle(conversion, { modelElement: 'tableCell', ...options });
 }
+/**
+ * Depending on the position of the selection we either return the table under cursor or look for the table higher in the hierarchy.
+ */
+export function getSelectionAffectedTable(selection) {
+    const selectedElement = selection.getSelectedElement();
+    // Is the command triggered from the `tableToolbar`?
+    if (selectedElement && selectedElement.is('element', 'table')) {
+        return selectedElement;
+    }
+    return selection.getFirstPosition().findAncestor('table');
+}

package/src/utils/ui/contextualballoon.js

@@ -7,7 +7,8 @@
  */
 import { Rect } from 'ckeditor5/src/utils';
 import { BalloonPanelView } from 'ckeditor5/src/ui';
-import { getTableWidgetAncestor } from './widget';
+import { getSelectionAffectedTableWidget, getTableWidgetAncestor } from './widget';
+import { getSelectionAffectedTable } from '../common';
 const DEFAULT_BALLOON_POSITIONS = BalloonPanelView.defaultPositions;
 const BALLOON_POSITIONS = [
     DEFAULT_BALLOON_POSITIONS.northArrowSouth,
@@ -28,14 +29,17 @@ const BALLOON_POSITIONS = [
  */
 export function repositionContextualBalloon(editor, target) {
     const balloon = editor.plugins.get('ContextualBalloon');
-    if (getTableWidgetAncestor(editor.editing.view.document.selection)) {
-        let position;
-        if (target === 'cell') {
+    const selection = editor.editing.view.document.selection;
+    let position;
+    if (target === 'cell') {
+        if (getTableWidgetAncestor(selection)) {
             position = getBalloonCellPositionData(editor);
         }
-        else {
-            position = getBalloonTablePositionData(editor);
-        }
+    }
+    else if (getSelectionAffectedTableWidget(selection)) {
+        position = getBalloonTablePositionData(editor);
+    }
+    if (position) {
         balloon.updatePosition(position);
     }
 }
@@ -47,8 +51,8 @@ export function repositionContextualBalloon(editor, target) {
  * @param editor The editor instance.
  */
 export function getBalloonTablePositionData(editor) {
-    const firstPosition = editor.model.document.selection.getFirstPosition();
-    const modelTable = firstPosition.findAncestor('table');
+    const selection = editor.model.document.selection;
+    const modelTable = getSelectionAffectedTable(selection);
     const viewTable = editor.editing.mapper.toViewElement(modelTable);
     return {
         target: editor.editing.view.domConverter.mapViewToDom(viewTable),

package/src/utils/ui/widget.d.ts

@@ -6,6 +6,10 @@
  * @module table/utils/ui/widget
  */
 import type { ViewDocumentSelection, ViewElement } from 'ckeditor5/src/engine';
+/**
+ * Depending on the position of the selection either return the selected table or the table higher in the hierarchy.
+ */
+export declare function getSelectionAffectedTableWidget(selection: ViewDocumentSelection): ViewElement | null;
 /**
  * Returns a table widget editing view element if one is selected.
  */