+ Press Alt+0 (⌥0 on Mac) while editing to display the list of available keyboard shortcuts.
+
+ The content of the document.
` + }, + { + title: 'Annual financial report', + description: 'A report that spells out the company\'s financial condition.', + icon: financialReportIcon, + data: `| Metric name | +Year | +|||
|---|---|---|---|---|
| 2019 | +2020 | +2021 | +2022 | +|
| Revenue | +$100,000.00 | +$120,000.00 | +$130,000.00 | +$180,000.00 | +
| Operating expenses | ++ | + | + | + |
| Interest | ++ | + | + | + |
| Net profit | ++ | + | + | + |
+ Address, Phone, e-mail, social media
+A quick summary of who you are and what you specialize in.
+MARCH 2021 - CURRENT
+Position (Company name, city)
+JANUARY 2019 - MARCH 2021
+Position (Company name, city)
+MAY 2018
+Name of University, Degree
+JULY 2015
+Name of University, Degree
+${ new Date().toLocaleDateString() }
+Company name,
Street Name, Number
Post code, City
+
Dear [First name],
+Content of the letter. Content of the letter. Content of the letter. Content of the letter. + Content of the letter. + Content of the letter. Content of the letter. Content of the letter. Content of the letter. Content of the letter. + Content of the letter. Content of the letter. Content of the letter. Content of the letter. Content of the letter. + Content of the letter. Content of the letter. Content of the letter. Content of the letter. Content of the letter. + Content of the letter. Content of the letter. Content of the letter. Content of the letter. Content of the letter. + Content of the letter. Content of the letter. Content of the letter. Content of the letter. Content of the letter. + Content of the letter. Content of the letter. Content of the letter. Content of the letter.
+Kind regards,
+Name Surname
Position, Company
Phone, E-mail
| Column 1 | +Column 2 | +Column 3 | +Column 4 | +Column 5 | +
|---|---|---|---|---|
| + | + | + | + | + |
| + | + | + | + | + |
| + | + | + | + | + |
| + | + | + | + | + |
| + | + | + | + | + |
<br> element)": "Keystroke description for assistive technologies: keystroke for inserting a soft break.",
+ "Insert a hard break (a new paragraph)": "Keystroke description for assistive technologies: keystroke for inserting a hard break."
+}
diff --git a/packages/ckeditor5-enter/src/enter.ts b/packages/ckeditor5-enter/src/enter.ts
index f5d5e5c3e7e..bb668128060 100644
--- a/packages/ckeditor5-enter/src/enter.ts
+++ b/packages/ckeditor5-enter/src/enter.ts
@@ -30,6 +30,7 @@ export default class Enter extends Plugin {
const editor = this.editor;
const view = editor.editing.view;
const viewDocument = view.document;
+ const t = this.editor.t;
view.addObserver( EnterObserver );
@@ -51,5 +52,15 @@ export default class Enter extends Plugin {
view.scrollToTheSelection();
}, { priority: 'low' } );
+
+ // Add the information about the keystroke to the accessibility database.
+ editor.accessibility.addKeystrokeInfos( {
+ keystrokes: [
+ {
+ label: t( 'Insert a hard break (a new paragraph)' ),
+ keystroke: 'Enter'
+ }
+ ]
+ } );
}
}
diff --git a/packages/ckeditor5-enter/src/shiftenter.ts b/packages/ckeditor5-enter/src/shiftenter.ts
index 011d47c9677..2c1d478f163 100644
--- a/packages/ckeditor5-enter/src/shiftenter.ts
+++ b/packages/ckeditor5-enter/src/shiftenter.ts
@@ -32,6 +32,7 @@ export default class ShiftEnter extends Plugin {
const conversion = editor.conversion;
const view = editor.editing.view;
const viewDocument = view.document;
+ const t = this.editor.t;
// Configure the schema.
schema.register( 'softBreak', {
@@ -71,5 +72,15 @@ export default class ShiftEnter extends Plugin {
editor.execute( 'shiftEnter' );
view.scrollToTheSelection();
}, { priority: 'low' } );
+
+ // Add the information about the keystroke to the accessibility database.
+ editor.accessibility.addKeystrokeInfos( {
+ keystrokes: [
+ {
+ label: t( 'Insert a soft break (a <br> element)' ),
+ keystroke: 'Shift+Enter'
+ }
+ ]
+ } );
}
}
diff --git a/packages/ckeditor5-enter/tests/enter.js b/packages/ckeditor5-enter/tests/enter.js
index f907d4e8297..6480d996eb9 100644
--- a/packages/ckeditor5-enter/tests/enter.js
+++ b/packages/ckeditor5-enter/tests/enter.js
@@ -35,6 +35,17 @@ describe( 'Enter feature', () => {
return editor.destroy();
} );
+ it( 'should have pluginName', () => {
+ expect( Enter.pluginName ).to.equal( 'Enter' );
+ } );
+
+ it( 'should add keystroke accessibility info', () => {
+ expect( editor.accessibility.keystrokeInfos.get( 'contentEditing' ).groups.get( 'common' ).keystrokes ).to.deep.include( {
+ label: 'Insert a hard break (a new paragraph)',
+ keystroke: 'Enter'
+ } );
+ } );
+
it( 'creates the commands', () => {
expect( editor.commands.get( 'enter' ) ).to.be.instanceof( EnterCommand );
} );
diff --git a/packages/ckeditor5-enter/tests/shiftenter.js b/packages/ckeditor5-enter/tests/shiftenter.js
index e42da088651..55f3b7f9546 100644
--- a/packages/ckeditor5-enter/tests/shiftenter.js
+++ b/packages/ckeditor5-enter/tests/shiftenter.js
@@ -35,6 +35,17 @@ describe( 'ShiftEnter feature', () => {
return editor.destroy();
} );
+ it( 'should have pluginName', () => {
+ expect( ShiftEnter.pluginName ).to.equal( 'ShiftEnter' );
+ } );
+
+ it( 'should add keystroke accessibility info', () => {
+ expect( editor.accessibility.keystrokeInfos.get( 'contentEditing' ).groups.get( 'common' ).keystrokes ).to.deep.include( {
+ label: 'Insert a soft break (a <br> element)',
+ keystroke: 'Shift+Enter'
+ } );
+ } );
+
it( 'creates the commands', () => {
expect( editor.commands.get( 'shiftEnter' ) ).to.be.instanceof( ShiftEnterCommand );
} );
diff --git a/packages/ckeditor5-essentials/package.json b/packages/ckeditor5-essentials/package.json
index be51c464e3e..20984d93a2a 100644
--- a/packages/ckeditor5-essentials/package.json
+++ b/packages/ckeditor5-essentials/package.json
@@ -25,6 +25,7 @@
"@ckeditor/ckeditor5-select-all": "41.1.0",
"@ckeditor/ckeditor5-theme-lark": "41.1.0",
"@ckeditor/ckeditor5-typing": "41.1.0",
+ "@ckeditor/ckeditor5-ui": "41.1.0",
"@ckeditor/ckeditor5-undo": "41.1.0",
"typescript": "5.0.4",
"webpack": "^5.58.1",
diff --git a/packages/ckeditor5-essentials/src/essentials.ts b/packages/ckeditor5-essentials/src/essentials.ts
index 64b0e7d961e..f6d93b04cbb 100644
--- a/packages/ckeditor5-essentials/src/essentials.ts
+++ b/packages/ckeditor5-essentials/src/essentials.ts
@@ -14,6 +14,7 @@ import { Enter, ShiftEnter } from 'ckeditor5/src/enter.js';
import { SelectAll } from 'ckeditor5/src/select-all.js';
import { Typing } from 'ckeditor5/src/typing.js';
import { Undo } from 'ckeditor5/src/undo.js';
+import { AccessibilityHelp } from 'ckeditor5/src/ui.js';
/**
* A plugin including all essential editing features. It represents a set of features that enables similar functionalities
@@ -36,7 +37,7 @@ export default class Essentials extends Plugin {
* @inheritDoc
*/
public static get requires() {
- return [ Clipboard, Enter, SelectAll, ShiftEnter, Typing, Undo ] as const;
+ return [ AccessibilityHelp, Clipboard, Enter, SelectAll, ShiftEnter, Typing, Undo ] as const;
}
/**
diff --git a/packages/ckeditor5-essentials/tests/essentials.js b/packages/ckeditor5-essentials/tests/essentials.js
index da826d8cefa..1ce0f5d72fe 100644
--- a/packages/ckeditor5-essentials/tests/essentials.js
+++ b/packages/ckeditor5-essentials/tests/essentials.js
@@ -14,6 +14,7 @@ import SelectAll from '@ckeditor/ckeditor5-select-all/src/selectall.js';
import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter.js';
import Typing from '@ckeditor/ckeditor5-typing/src/typing.js';
import Undo from '@ckeditor/ckeditor5-undo/src/undo.js';
+import { AccessibilityHelp } from '@ckeditor/ckeditor5-ui';
describe( 'Essentials preset', () => {
let editor, editorElement;
@@ -39,6 +40,7 @@ describe( 'Essentials preset', () => {
} );
it( 'should load all its dependencies', () => {
+ expect( editor.plugins.get( AccessibilityHelp ) ).to.be.instanceOf( AccessibilityHelp );
expect( editor.plugins.get( Clipboard ) ).to.be.instanceOf( Clipboard );
expect( editor.plugins.get( Enter ) ).to.be.instanceOf( Enter );
expect( editor.plugins.get( SelectAll ) ).to.be.instanceOf( SelectAll );
diff --git a/packages/ckeditor5-find-and-replace/lang/contexts.json b/packages/ckeditor5-find-and-replace/lang/contexts.json
index a5a53472bc1..cbded05dcb9 100644
--- a/packages/ckeditor5-find-and-replace/lang/contexts.json
+++ b/packages/ckeditor5-find-and-replace/lang/contexts.json
@@ -11,5 +11,6 @@
"Replace with…": "The label for the text replacement in the find and replace dropdown.",
"Text to find must not be empty.": "An error text displayed when user attempted to find an empty text.",
"Tip: Find some text first in order to replace it.": "A message displayed next to the replace field when disabled but user tries to use it.",
- "Advanced options": "The label and the tooltip of the options dropdown button in the find and replace form."
+ "Advanced options": "The label and the tooltip of the options dropdown button in the find and replace form.",
+ "Find in the document": "Keystroke description for assistive technologies: keystroke for opening the find and replace UI."
}
diff --git a/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts b/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts
index bf1bd423c03..8412259b185 100644
--- a/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts
+++ b/packages/ckeditor5-find-and-replace/src/findandreplaceui.ts
@@ -71,6 +71,7 @@ export default class FindAndReplaceUI extends Plugin {
const editor = this.editor;
const isUiUsingDropdown = editor.config.get( 'findAndReplace.uiType' ) === 'dropdown';
const findCommand = editor.commands.get( 'find' )!;
+ const t = this.editor.t;
// Register the toolbar component: dropdown or button (that opens a dialog).
editor.ui.componentFactory.add( 'findAndReplace', () => {
@@ -122,6 +123,16 @@ export default class FindAndReplaceUI extends Plugin {
return this._createDialogButtonForMenuBar();
} );
}
+
+ // Add the information about the keystroke to the accessibility database.
+ editor.accessibility.addKeystrokeInfos( {
+ keystrokes: [
+ {
+ label: t( 'Find in the document' ),
+ keystroke: 'CTRL+F'
+ }
+ ]
+ } );
}
/**
diff --git a/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js b/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js
index feb22650e84..3bb3bc75b19 100644
--- a/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js
+++ b/packages/ckeditor5-find-and-replace/tests/findandreplaceui.js
@@ -63,6 +63,13 @@ describe( 'FindAndReplaceUI', () => {
return editor.destroy();
} );
+ it( 'should add keystroke accessibility info', () => {
+ expect( editor.accessibility.keystrokeInfos.get( 'contentEditing' ).groups.get( 'common' ).keystrokes ).to.deep.include( {
+ label: 'Find in the document',
+ keystroke: 'CTRL+F'
+ } );
+ } );
+
it( 'should register a button UI compontent', () => {
expect( toolbarButtonView ).to.be.instanceOf( ButtonView );
} );
@@ -475,6 +482,13 @@ describe( 'FindAndReplaceUI', () => {
return editor.destroy();
} );
+ it( 'should add keystroke accessibility info', () => {
+ expect( editor.accessibility.keystrokeInfos.get( 'contentEditing' ).groups.get( 'common' ).keystrokes ).to.deep.include( {
+ label: 'Find in the document',
+ keystroke: 'CTRL+F'
+ } );
+ } );
+
it( 'should create a dropdown UI component', () => {
expect( dropdown ).to.be.instanceOf( DropdownView );
} );
diff --git a/packages/ckeditor5-horizontal-line/src/horizontallineui.ts b/packages/ckeditor5-horizontal-line/src/horizontallineui.ts
index 26cfce1668b..7effba3f489 100644
--- a/packages/ckeditor5-horizontal-line/src/horizontallineui.ts
+++ b/packages/ckeditor5-horizontal-line/src/horizontallineui.ts
@@ -8,7 +8,7 @@
*/
import { icons, Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
import type HorizontalLineCommand from './horizontallinecommand.js';
@@ -28,28 +28,46 @@ export default class HorizontalLineUI extends Plugin {
*/
public init(): void {
const editor = this.editor;
- const t = editor.t;
// Add the `horizontalLine` button to feature components.
- editor.ui.componentFactory.add( 'horizontalLine', locale => {
- const command: HorizontalLineCommand = editor.commands.get( 'horizontalLine' )!;
- const view = new ButtonView( locale );
+ editor.ui.componentFactory.add( 'horizontalLine', () => {
+ const buttonView = this._createButton( ButtonView );
- view.set( {
- label: t( 'Horizontal line' ),
- icon: icons.horizontalLine,
+ buttonView.set( {
tooltip: true
} );
- view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+ return buttonView;
+ } );
- // Execute the command.
- this.listenTo( view, 'execute', () => {
- editor.execute( 'horizontalLine' );
- editor.editing.view.focus();
- } );
+ editor.ui.componentFactory.add( 'menuBar:horizontalLine', () => {
+ return this._createButton( MenuBarMenuListItemButtonView );
+ } );
+ }
+
+ /**
+ * Creates a button for horizontal line command to use either in toolbar or in menu bar.
+ */
+ private _createButtonfoobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle longhand style for shorthand filter (background vs background-color)', () => { + editor.data.addStyleProcessorRules( addBackgroundRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'background' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle shorthand style for longhand filter (background vs background-color)', () => { + editor.data.addStyleProcessorRules( addBackgroundRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'background' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial padding for generic padding filter (single box side)', () => { + editor.data.addStyleProcessorRules( addPaddingRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'padding' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial padding for specific full padding filter (single box side)', () => { + editor.data.addStyleProcessorRules( addPaddingRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'padding-left' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial padding for generic padding filter (multiple sides)', () => { + editor.data.addStyleProcessorRules( addPaddingRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'padding' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial padding for generic padding filter (box top side)', () => { + editor.data.addStyleProcessorRules( addPaddingRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'padding' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for generic border filter (box bottom side)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for generic border filter (box bottom side style only)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for generic border filter (box bottom side style and color)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); - editor.setData( 'foobar
' ); + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for generic border filter (missing border color)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border-left' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for partial border filter (box bottom side)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border-bottom' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for partial border filter (color only)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border-color' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for generic border filter (mixed)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border' } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should handle partial border for generic border filter (partly consumed)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'border' } ); + + editor.conversion.for( 'upcast' ).add( dispatcher => { + dispatcher.on( 'element:p', ( evt, data, { consumable } ) => { + consumable.consume( data.viewItem, { styles: [ 'border-left-width' ] } ); + } ); + } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' + ); + } ); + + it( 'should handle partial margin consumed for generic margin filter', () => { + editor.data.addStyleProcessorRules( addMarginRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: 'margin' } ); + + editor.model.schema.extend( 'paragraph', { allowAttributes: 'indent' } ); + + editor.conversion.for( 'upcast' ).attributeToAttribute( { + view: { + styles: { 'margin-left': /./ } + }, + model: { + key: 'indent', + value: viewElement => `${ parseInt( viewElement.getStyle( 'margin-left' ) ) * 2 }px` + } + } ); - expect( editor.getData() ).to.equal( 'foobar
' ); + editor.conversion.for( 'downcast' ).attributeToAttribute( { + model: 'indent', + view: value => ( { + key: 'style', + value: { 'margin-left': value } + } ) + } ); + + editor.setData( 'foobar
' ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' ); + } ); + + it( 'should store only reduced styles in model attribute (without duplicated long and shorthand)', () => { + editor.data.addStyleProcessorRules( addBorderRules ); + + dataFilter.allowElement( 'p' ); + dataFilter.allowAttributes( { name: 'p', styles: [ 'border' ] } ); + + editor.setData( + 'foobar
' + ); + + expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( { + data: 'foobar
' + ); + } ); } ); describe( 'attribute coupling', () => { diff --git a/packages/ckeditor5-image/docs/features/images-responsive.md b/packages/ckeditor5-image/docs/features/images-responsive.md index e5bca314ac7..d8f2726c82b 100644 --- a/packages/ckeditor5-image/docs/features/images-responsive.md +++ b/packages/ckeditor5-image/docs/features/images-responsive.md @@ -73,7 +73,3 @@ Regardless of the original file format, the responsive versions will be served a For detailed information on how to configure and use CKBox, please refer to the {@link features/ckbox#installation CKBox file manager} installation guide. - -## Contribute - -The source code of the feature is available on GitHub at [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link). diff --git a/packages/ckeditor5-image/src/imageinsert/imageinsertui.ts b/packages/ckeditor5-image/src/imageinsert/imageinsertui.ts index 92a5ecda81d..e353ccb2084 100644 --- a/packages/ckeditor5-image/src/imageinsert/imageinsertui.ts +++ b/packages/ckeditor5-image/src/imageinsert/imageinsertui.ts @@ -114,11 +114,11 @@ export default class ImageInsertUI extends Plugin { requiresForm }: { name: string; - observable: Observable & { isEnabled: boolean }; + observable: Observable & { isEnabled: boolean } | ( () => Observable & { isEnabled: boolean } ); buttonViewCreator: ( isOnlyOne: boolean ) => ButtonView; formViewCreator: ( isOnlyOne: boolean ) => FocusableView; requiresForm?: boolean; -} ): void { + } ): void { if ( this._integrations.has( name ) ) { /** * There are two insert-image integrations registered with the same name. @@ -174,7 +174,7 @@ export default class ImageInsertUI extends Plugin { } const dropdownView = this.dropdownView = createDropdown( locale, dropdownButton ); - const observables = integrations.map( ( { observable } ) => observable ); + const observables = integrations.map( ( { observable } ) => typeof observable == 'function' ? observable() : observable ); dropdownView.bind( 'isEnabled' ).toMany( observables, 'isEnabled', ( ...isEnabled ) => ( isEnabled.some( isEnabled => isEnabled ) @@ -250,7 +250,7 @@ export default class ImageInsertUI extends Plugin { } type IntegrationData = { - observable: Observable & { isEnabled: boolean }; + observable: Observable & { isEnabled: boolean } | ( () => Observable & { isEnabled: boolean } ); buttonViewCreator: ( isOnlyOne: boolean ) => ButtonView; formViewCreator: ( isOnlyOne: boolean ) => FocusableView; requiresForm: boolean; diff --git a/packages/ckeditor5-image/src/imageinsert/imageinsertviaurlui.ts b/packages/ckeditor5-image/src/imageinsert/imageinsertviaurlui.ts index 4c6e6ecbd91..41e56f7bb03 100644 --- a/packages/ckeditor5-image/src/imageinsert/imageinsertviaurlui.ts +++ b/packages/ckeditor5-image/src/imageinsert/imageinsertviaurlui.ts @@ -45,11 +45,10 @@ export default class ImageInsertViaUrlUI extends Plugin { */ public afterInit(): void { this._imageInsertUI = this.editor.plugins.get( 'ImageInsertUI' ); - const insertImageCommand: InsertImageCommand = this.editor.commands.get( 'insertImage' )!; this._imageInsertUI.registerIntegration( { name: 'url', - observable: insertImageCommand, + observable: () => this.editor.commands.get( 'insertImage' )!, requiresForm: true, buttonViewCreator: isOnlyOne => this._createInsertUrlButton( isOnlyOne ), formViewCreator: isOnlyOne => this._createInsertUrlView( isOnlyOne ) diff --git a/packages/ckeditor5-image/src/imageupload/imageuploadui.ts b/packages/ckeditor5-image/src/imageupload/imageuploadui.ts index a678d1e7d8e..d35bd3d2bd4 100644 --- a/packages/ckeditor5-image/src/imageupload/imageuploadui.ts +++ b/packages/ckeditor5-image/src/imageupload/imageuploadui.ts @@ -72,11 +72,10 @@ export default class ImageUploadUI extends Plugin { if ( editor.plugins.has( 'ImageInsertUI' ) ) { const imageInsertUI: ImageInsertUI = editor.plugins.get( 'ImageInsertUI' ); - const command: UploadImageCommand = editor.commands.get( 'uploadImage' )!; imageInsertUI.registerIntegration( { name: 'upload', - observable: command, + observable: () => editor.commands.get( 'uploadImage' )!, buttonViewCreator: () => { const uploadImageButton = editor.ui.componentFactory.create( 'uploadImage' ) as FileDialogButtonView; diff --git a/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js b/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js index 78f0bf76472..f61c6040842 100644 --- a/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js +++ b/packages/ckeditor5-image/tests/imageinsert/imageinsertui.js @@ -296,6 +296,22 @@ describe( 'ImageInsertUI', () => { } ); } ); + describe( 'single integration with form view required and observalbe as a function', () => { + beforeEach( async () => { + registerUrlIntegration( true ); + } ); + + it( 'should bind isEnabled state to observable', () => { + const dropdown = editor.ui.componentFactory.create( 'insertImage' ); + + observableUrl.isEnabled = false; + expect( dropdown.isEnabled ).to.be.false; + + observableUrl.isEnabled = true; + expect( dropdown.isEnabled ).to.be.true; + } ); + } ); + describe( 'multiple integrations', () => { beforeEach( async () => { registerUploadIntegration(); @@ -365,12 +381,39 @@ describe( 'ImageInsertUI', () => { } ); } ); - function registerUrlIntegration() { + describe( 'multiple integrations and observalbe as a function', () => { + beforeEach( async () => { + registerUploadIntegration( true ); + registerUrlIntegration( true ); + } ); + + it( 'should bind isEnabled state to observables', () => { + const dropdown = editor.ui.componentFactory.create( 'insertImage' ); + + observableUrl.isEnabled = false; + observableUpload.isEnabled = false; + expect( dropdown.isEnabled ).to.be.false; + + observableUrl.isEnabled = true; + observableUpload.isEnabled = false; + expect( dropdown.isEnabled ).to.be.true; + + observableUrl.isEnabled = false; + observableUpload.isEnabled = true; + expect( dropdown.isEnabled ).to.be.true; + + observableUrl.isEnabled = true; + observableUpload.isEnabled = true; + expect( dropdown.isEnabled ).to.be.true; + } ); + } ); + + function registerUrlIntegration( observableAsFunc ) { observableUrl = new Model( { isEnabled: true } ); insertImageUI.registerIntegration( { name: 'url', - observable: observableUrl, + observable: observableAsFunc ? () => observableUrl : observableUrl, requiresForm: true, buttonViewCreator( isOnlyOne ) { const button = new ButtonView( editor.locale ); @@ -389,12 +432,12 @@ describe( 'ImageInsertUI', () => { } ); } - function registerUploadIntegration() { + function registerUploadIntegration( observableAsFunc ) { observableUpload = new Model( { isEnabled: true } ); insertImageUI.registerIntegration( { name: 'upload', - observable: observableUpload, + observable: observableAsFunc ? () => observableUpload : observableUpload, buttonViewCreator( isOnlyOne ) { const button = new ButtonView( editor.locale ); diff --git a/packages/ckeditor5-indent/src/indentui.ts b/packages/ckeditor5-indent/src/indentui.ts index 079125475d7..016c114c2d6 100644 --- a/packages/ckeditor5-indent/src/indentui.ts +++ b/packages/ckeditor5-indent/src/indentui.ts @@ -7,7 +7,7 @@ * @module indent/indentui */ -import { ButtonView } from 'ckeditor5/src/ui.js'; +import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js'; import { icons, Plugin } from 'ckeditor5/src/core.js'; /** @@ -42,29 +42,54 @@ export default class IndentUI extends Plugin { } /** - * Defines a UI button. + * Defines UI buttons for both toolbar and menu bar. */ private _defineButton( commandName: 'indent' | 'outdent', label: string, icon: string ): void { const editor = this.editor; - editor.ui.componentFactory.add( commandName, locale => { - const command = editor.commands.get( commandName )!; - const view = new ButtonView( locale ); + editor.ui.componentFactory.add( commandName, () => { + const buttonView = this._createButton( ButtonView, commandName, label, icon ); - view.set( { - label, - icon, + buttonView.set( { tooltip: true } ); - view.bind( 'isEnabled' ).to( command, 'isEnabled' ); + return buttonView; + } ); - this.listenTo( view, 'execute', () => { - editor.execute( commandName ); - editor.editing.view.focus(); - } ); + editor.ui.componentFactory.add( 'menuBar:' + commandName, () => { + return this._createButton( MenuBarMenuListItemButtonView, commandName, label, icon ); + } ); + } - return view; + /** + * Creates a button to use either in toolbar or in menu bar. + */ + private _createButton). + if ( categoryDefinition.description ) { + elements.splice( 1, 0, createElement( document, 'p', {}, categoryDefinition.description ) ); + } + + return createElement( document, 'section', {}, elements ); + } ); + } + + /** + * Creates `[