@ckeditor/ckeditor5-ui 48.1.1 → 48.2.0-alpha.0

package/dist/editableui/editableuiview.d.ts

@@ -7,7 +7,8 @@
  */
 import { View } from '../view.js';
 import type { EditingView } from '@ckeditor/ckeditor5-engine';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import type { ViewRootElementDefinition } from '@ckeditor/ckeditor5-core';
 /**
  * The editable UI view class.
  */
@@ -22,6 +23,15 @@ export declare class EditableUIView extends View {
      * @observable
      */
     isFocused: boolean;
+    /**
+     * Whether this editable is bound to an inline root (a root that only holds inline content, with no block children).
+     * Set by the editor's UI initialization, after plugin schema registrations have settled. When `true`, a
+     * `ck-editor__editable_inline-root` CSS class is added to the element so themes can distinguish inline roots from
+     * block ones; the placeholder helper also reads it to decide where to host the placeholder.
+     *
+     * @observable
+     */
+    isInlineRoot: boolean;
     /**
      * The editing view instance the editable is related to. Editable uses the editing
      * view to dynamically modify its certain DOM attributes after {@link #render rendering}.
@@ -45,10 +55,11 @@ export declare class EditableUIView extends View {
      *
      * @param locale The locale instance.
      * @param editingView The editing view instance the editable is related to.
-     * @param editableElement The editable element. If not specified, this view
-     * should create it. Otherwise, the existing element should be used.
+     * @param editableElement The editable element. If an existing `HTMLElement` is passed, the view applies its
+     * template to it; otherwise the view creates a fresh element (a `<div>` by default, or one matching the given
+     * {@link module:core/editor/editorconfig~ViewRootElementDefinition}).
      */
-    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement);
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement | ViewRootElementDefinition);
     /**
      * Renders the view by either applying the {@link #template} to the existing
      * {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement} or assigning {@link #element}

package/dist/editableui/inline/inlineeditableuiview.d.ts

@@ -8,6 +8,7 @@
 import { EditableUIView } from '../editableuiview.js';
 import type { EditingView } from '@ckeditor/ckeditor5-engine';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type { ViewRootElementDefinition } from '@ckeditor/ckeditor5-core';
 /**
  * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
  */
@@ -21,14 +22,15 @@ export declare class InlineEditableUIView extends EditableUIView {
      *
      * @param locale The locale instance.
      * @param editingView The editing view instance the editable is related to.
-     * @param editableElement The editable element. If not specified, the
-     * {@link module:ui/editableui/editableuiview~EditableUIView}
-     * will create it. Otherwise, the existing element will be used.
+     * @param editableElement The editable element. May be an existing `HTMLElement`, a
+     * {@link module:core/editor/editorconfig~ViewRootElementDefinition} describing the element to create,
+     * or `undefined` to create a default `<div>` element. See
+     * {@link module:ui/editableui/editableuiview~EditableUIView}.
      * @param options Additional configuration of the view.
      * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
      * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
      */
-    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: InlineEditableUIViewOptions);
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement | ViewRootElementDefinition, options?: InlineEditableUIViewOptions);
     /**
      * @inheritDoc
      */

package/dist/index-editor.css

@@ -1406,6 +1406,18 @@
   right:-1px;
 }
 
+:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover){
+  background-color:var(--ck-color-button-on-background);
+}
+
+:is(:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)):after{
+  display:none;
+}
+
+.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__action:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover){
+  background-color:var(--ck-color-button-on-hover-background);
+}
+
 .ck.ck-splitbutton{
   font-size:inherit;
 }

package/dist/index.css

@@ -1406,6 +1406,18 @@
   right: -1px;
 }
 
+:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
+  background-color: var(--ck-color-button-on-background);
+}
+
+:is(:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)):after {
+  display: none;
+}
+
+.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__action:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
+  background-color: var(--ck-color-button-on-hover-background);
+}
+
 .ck.ck-splitbutton {
   font-size: inherit;
 }