-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16474 from ckeditor/ck/app-menu-bar-special-chara…
…cters Feature (special-characters): Added menu bar integration for special characters. New component `menuBar:specialCharacters` is now by default added in "Insert" menu. Closes #16501. Other (special-characters): Special characters plugin now uses a dialog (instead of a toolbar dropdown). MINOR BREAKING CHANGE (special-characters): Special characters plugin now uses a dialog (instead of a toolbar dropdown).
- Loading branch information
Showing
14 changed files
with
474 additions
and
405 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
127 changes: 127 additions & 0 deletions
127
packages/ckeditor5-special-characters/src/ui/specialcharacterscategoriesview.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /** | ||
| * @module special-characters/ui/specialcharacterscategoriesview | ||
| */ | ||
|
|
||
| import { type Locale, Collection } from 'ckeditor5/src/utils.js'; | ||
| import { | ||
| addListToDropdown, | ||
| createLabeledDropdown, | ||
| LabeledFieldView, | ||
| View, | ||
| ViewModel, | ||
| type DropdownView, | ||
| type ListDropdownItemDefinition | ||
| } from 'ckeditor5/src/ui.js'; | ||
|
|
||
| /** | ||
| * A class representing the navigation part of the special characters UI. It is responsible | ||
| * for describing the feature and allowing the user to select a particular character group. | ||
| */ | ||
| export default class SpecialCharactersCategoriesView extends View { | ||
| /** | ||
| * Currently selected special characters group's name. | ||
| */ | ||
| declare public currentGroupName: string; | ||
|
|
||
| private _groupNames: Map<string, string>; | ||
|
|
||
| private _dropdownView: LabeledFieldView<DropdownView>; | ||
|
|
||
| /** | ||
| * Creates an instance of the {@link module:special-characters/ui/specialcharacterscategoriesview~SpecialCharactersCategoriesView} | ||
| * class. | ||
| * | ||
| * @param locale The localization services instance. | ||
| * @param groupNames The names of the character groups. | ||
| */ | ||
| constructor( locale: Locale, groupNames: Map<string, string> ) { | ||
| super( locale ); | ||
|
|
||
| this.set( 'currentGroupName', Array.from( groupNames.entries() )[ 0 ][ 0 ] ); | ||
| this._groupNames = groupNames; | ||
| this._dropdownView = new LabeledFieldView( locale, createLabeledDropdown ); | ||
|
|
||
| this.setTemplate( { | ||
| tag: 'div', | ||
| attributes: { | ||
| class: [ 'ck', 'ck-character-categories' ] | ||
| }, | ||
| children: [ | ||
| this._dropdownView | ||
| ] | ||
| } ); | ||
| } | ||
|
|
||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| public override render(): void { | ||
| super.render(); | ||
|
|
||
| this._setupDropdown(); | ||
| } | ||
|
|
||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| public focus(): void { | ||
| this._dropdownView.focus(); | ||
| } | ||
|
|
||
| /** | ||
| * Creates dropdown item list, sets up bindings and fills properties. | ||
| */ | ||
| private _setupDropdown(): void { | ||
| const items = new Collection<ListDropdownItemDefinition>(); | ||
|
|
||
| for ( const [ name, label ] of this._groupNames ) { | ||
| const item: ListDropdownItemDefinition = { | ||
| type: 'button', | ||
| model: new ViewModel( { | ||
| name, | ||
| label, | ||
| withText: true | ||
| } ) | ||
| }; | ||
|
|
||
| item.model.bind( 'isOn' ).to( this, 'currentGroupName', value => { | ||
| return value === name; | ||
| } ); | ||
|
|
||
| items.add( item ); | ||
| } | ||
|
|
||
| const t = this.locale!.t; | ||
| const accessibleLabel = t( 'Category' ); | ||
|
|
||
| this._dropdownView.set( { | ||
| label: accessibleLabel, | ||
| isEmpty: false | ||
| } ); | ||
|
|
||
| this._dropdownView.fieldView.panelPosition = this.locale!.uiLanguageDirection === 'rtl' ? 'se' : 'sw'; | ||
|
|
||
| this._dropdownView.fieldView.buttonView.set( { | ||
| withText: true, | ||
| tooltip: accessibleLabel, | ||
| ariaLabel: accessibleLabel, | ||
| ariaLabelledBy: undefined, | ||
| isOn: false | ||
| } ); | ||
| this._dropdownView.fieldView.buttonView.bind( 'label' ) | ||
| .to( this, 'currentGroupName', value => this._groupNames.get( value )! ); | ||
| this._dropdownView.fieldView.on( 'execute', ( { source } ) => { | ||
| this.currentGroupName = ( source as ViewModel ).name as string; | ||
| } ); | ||
|
|
||
| addListToDropdown( this._dropdownView.fieldView, items, { | ||
| ariaLabel: accessibleLabel, | ||
| role: 'menu' | ||
| } ); | ||
| } | ||
| } |
Oops, something went wrong.