@ckeditor/ckeditor5-collaboration-core
Version:
Base utilities used by CKEditor 5 collaboration features to support multiple users working together in a rich text editor.
104 lines (103 loc) • 2.8 kB
TypeScript
/**
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* @module collaboration-core/ui/pillview
*/
import { View, IconView, type ViewCollection } from "@ckeditor/ckeditor5-ui";
import { type Locale } from "@ckeditor/ckeditor5-utils";
import "../../theme/pill.css";
/**
* A small inline pill — an icon (optional) next to a short label, with an optional tooltip.
*
* The base shape is variant-agnostic; consumers attach their own modifier class through the
* {@link #class} property to apply a concrete colour palette.
*
* ```ts
* const view = new PillView( locale );
*
* view.set( {
* icon: starIcon,
* label: 'Beta',
* tooltip: 'This feature is still in beta.',
* class: 'ck-pill_beta'
* } );
*
* view.render();
*
* document.body.append( view.element! );
* ```
*/
export declare class PillView extends View<HTMLSpanElement> {
/**
* Collection of the child views rendered inside the pill {@link #element}.
*/
readonly children: ViewCollection;
/**
* The icon view rendered next to the label. Added to {@link #children} only when {@link #icon} is set.
*/
readonly iconView: IconView;
/**
* The view rendering the label text.
*/
readonly labelView: View;
/**
* The SVG source of the icon. When unset, the icon is not rendered.
*
* @observable
*/
icon: string | undefined;
/**
* The label text displayed inside the pill.
*
* @observable
*/
label: string | undefined;
/**
* Tooltip text shown on hover and keyboard focus. When unset, no tooltip is shown.
*
* Tooltips are rendered by the editor's {@link module:ui/tooltipmanager~TooltipManager} singleton.
*
* @observable
*/
tooltip: string | undefined;
/**
* Position of the tooltip relative to the pill. Matches the values accepted by
* {@link module:ui/tooltipmanager~TooltipManager}.
*
* @observable
* @default 'n'
*/
tooltipPosition: "n" | "e" | "s" | "w" | "sw" | "se";
/**
* Extra class applied to the tooltip balloon. Pass `'ck-tooltip_multi-line'` to render the tooltip
* across multiple lines with a `max-width` constraint, or any other class accepted by
* {@link module:ui/tooltipmanager~TooltipManager} via the `data-cke-tooltip-class` attribute.
*
* @observable
*/
tooltipClass: string | undefined;
/**
* Whether the icon is rendered before or after the label.
*
* @observable
* @default 'left'
*/
iconPosition: "left" | "right";
/**
* Additional CSS class set on the pill's root element. Use this to apply a concrete color palette
* for a particular variant, for instance `'ck-pill_beta'`.
*
* @observable
*/
class: string | undefined;
/**
* @inheritDoc
*/
constructor(locale?: Locale);
/**
* @inheritDoc
*/
override render(): void;
}