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

package/src/utils.d.ts

@@ -7,7 +7,7 @@
  */
 import ColorTableView from './ui/colortableview';
 import type { FontFamilyOption, FontSizeOption } from './fontconfig';
-import type { ColorDefinition, DropdownView } from 'ckeditor5/src/ui';
+import type { ColorDefinition, ColorPickerConfig, DropdownView } from 'ckeditor5/src/ui';
 import type { ArrayOrItem } from 'ckeditor5/src/utils';
 import type { ViewAttributeElement, ViewElement, MatcherPattern, ViewElementDefinition, DowncastConversionApi } from 'ckeditor5/src/engine';
 /**
@@ -64,13 +64,15 @@ export declare function renderDowncastElement(styleAttr: string): (modelAttribut
  * @param config.documentColorsCount The number of document colors inside the dropdown.
  * @returns The new color table view.
  */
-export declare function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount }: {
+export declare function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerConfig }: {
     dropdownView: ColorTableDropdownView;
     colors: Array<ColorDefinition>;
     columns: number;
     removeButtonLabel: string;
+    colorPickerLabel: string;
     documentColorsLabel?: string;
     documentColorsCount?: number;
+    colorPickerConfig: ColorPickerConfig | false;
 }): ColorTableView;
 export type ColorTableDropdownView = DropdownView & {
     colorTableView?: ColorTableView;

package/src/utils.js

@@ -75,12 +75,19 @@ export function renderDowncastElement(styleAttr) {
  * @param config.documentColorsCount The number of document colors inside the dropdown.
  * @returns The new color table view.
  */
-export function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount }) {
+export function addColorTableToDropdown({ dropdownView, colors, columns, removeButtonLabel, colorPickerLabel, documentColorsLabel, documentColorsCount, colorPickerConfig }) {
     const locale = dropdownView.locale;
-    const colorTableView = new ColorTableView(locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount });
+    const colorTableView = new ColorTableView(locale, {
+        colors,
+        columns,
+        removeButtonLabel,
+        colorPickerLabel,
+        documentColorsLabel,
+        documentColorsCount,
+        colorPickerConfig
+    });
     dropdownView.colorTableView = colorTableView;
     dropdownView.panelView.children.add(colorTableView);
-    colorTableView.delegate('execute').to(dropdownView, 'execute');
     return colorTableView;
 }
 /**

package/theme/fontcolor.css

@@ -3,12 +3,73 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck .ck-button.ck-color-table__remove-color {
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck .ck-button.ck-color-table__remove-color,
+.ck .ck-button.ck-color-table__color-picker {
 	display: flex;
 	align-items: center;
 	width: 100%;
+
+	@mixin ck-dir rtl {
+		justify-content: flex-start;
+	}
+}
+
+.ck .ck-button.ck-color-table__color-picker {
+	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+
+	&:not(:focus) {
+		border-top: 1px solid var(--ck-color-base-border);
+	}
+
+	& .ck.ck-icon {
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-standard);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
 }
 
 label.ck.ck-color-grid__label {
 	font-weight: unset;
 }
+
+.ck.ck-color-picker {
+	padding: 8px;
+
+	& .hex-color-picker {
+		height: 100px;
+		margin: 0 0 var(--ck-spacing-large) 0;
+
+		&::part(saturation) {
+			border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
+		}
+		&::part(hue) {
+			border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
+		}
+
+		&::part(saturation-pointer),
+		&::part(hue-pointer) {
+			width: 15px;
+			height: 15px;
+		}
+	}
+}
+
+.ck.ck-color-table_action-bar {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	padding: 0 8px 8px;
+
+	& .ck-button-save,
+	& .ck-button-cancel {
+		flex: 1
+	}
+}