mirror of
https://github.com/codex-team/editor.js
synced 2024-06-02 14:02:17 +02:00
feat(toolbar-api): method for toggling toolbox (#2332)
* Expose toolbox control method * Add test for toolbox * rename method to toggleToolbox * add missing test case * Add changelog * remove eslint rule * Update changelog Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * fix linter problems --------- Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
parent
707ff72a94
commit
0491155e33
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
### 2.27.0
|
### 2.27.0
|
||||||
|
|
||||||
|
- `New` — *Toolbar API* — Toolbox toggling method added.
|
||||||
- `Refactoring` — Popover class refactored.
|
- `Refactoring` — Popover class refactored.
|
||||||
- `Improvement` — *Toolbox* — Number of `close()` method calls optimized.
|
- `Improvement` — *Toolbox* — Number of `close()` method calls optimized.
|
||||||
- `Improvement` — The `onChange` callback won't be triggered only if all mutations contain nodes with the `data-mutation-free` attributes.
|
- `Improvement` — The `onChange` callback won't be triggered only if all mutations contain nodes with the `data-mutation-free` attributes.
|
||||||
|
|
|
@ -16,6 +16,7 @@ export default class ToolbarAPI extends Module {
|
||||||
close: (): void => this.close(),
|
close: (): void => this.close(),
|
||||||
open: (): void => this.open(),
|
open: (): void => this.open(),
|
||||||
toggleBlockSettings: (openingState?: boolean): void => this.toggleBlockSettings(openingState),
|
toggleBlockSettings: (openingState?: boolean): void => this.toggleBlockSettings(openingState),
|
||||||
|
toggleToolbox: (openingState?: boolean): void => this.toggleToolbox(openingState),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -55,4 +56,27 @@ export default class ToolbarAPI extends Module {
|
||||||
this.Editor.BlockSettings.close();
|
this.Editor.BlockSettings.close();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open toolbox
|
||||||
|
*
|
||||||
|
* @param {boolean} openingState - Opening state of toolbox
|
||||||
|
*/
|
||||||
|
public toggleToolbox(openingState: boolean): void {
|
||||||
|
if (this.Editor.BlockManager.currentBlockIndex === -1) {
|
||||||
|
_.logLabeled('Could\'t toggle the Toolbox because there is no block selected ', 'warn');
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const canOpenToolbox = openingState ?? !this.Editor.Toolbar.toolbox.opened;
|
||||||
|
|
||||||
|
if (canOpenToolbox) {
|
||||||
|
this.Editor.Toolbar.moveAndOpen();
|
||||||
|
this.Editor.Toolbar.toolbox.open();
|
||||||
|
} else {
|
||||||
|
this.Editor.Toolbar.toolbox.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
2
src/types-internal/editor-modules.d.ts
vendored
2
src/types-internal/editor-modules.d.ts
vendored
|
@ -22,7 +22,7 @@ import NotifierAPI from '../components/modules/api/notifier';
|
||||||
import SaverAPI from '../components/modules/api/saver';
|
import SaverAPI from '../components/modules/api/saver';
|
||||||
import Saver from '../components/modules/saver';
|
import Saver from '../components/modules/saver';
|
||||||
import BlockSelection from '../components/modules/blockSelection';
|
import BlockSelection from '../components/modules/blockSelection';
|
||||||
import RectangleSelection from '../components/modules/RectangleSelection';
|
import RectangleSelection from '../components/modules/rectangleSelection';
|
||||||
import InlineToolbarAPI from '../components/modules/api/inlineToolbar';
|
import InlineToolbarAPI from '../components/modules/api/inlineToolbar';
|
||||||
import CrossBlockSelection from '../components/modules/crossBlockSelection';
|
import CrossBlockSelection from '../components/modules/crossBlockSelection';
|
||||||
import ConversionToolbar from '../components/modules/toolbar/conversion';
|
import ConversionToolbar from '../components/modules/toolbar/conversion';
|
||||||
|
|
86
test/cypress/tests/api/toolbar.cy.ts
Normal file
86
test/cypress/tests/api/toolbar.cy.ts
Normal file
|
@ -0,0 +1,86 @@
|
||||||
|
/**
|
||||||
|
* There will be described test cases of 'api.toolbar.*' API
|
||||||
|
*/
|
||||||
|
import EditorJS from '../../../../types';
|
||||||
|
|
||||||
|
describe('api.toolbar', () => {
|
||||||
|
/**
|
||||||
|
* api.toolbar.openToolbox(openingState?: boolean)
|
||||||
|
*/
|
||||||
|
const firstBlock = {
|
||||||
|
id: 'bwnFX5LoX7',
|
||||||
|
type: 'paragraph',
|
||||||
|
data: {
|
||||||
|
text: 'The first block content mock.',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const editorDataMock = {
|
||||||
|
blocks: [
|
||||||
|
firstBlock,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
beforeEach(function () {
|
||||||
|
cy.createEditor({
|
||||||
|
data: editorDataMock,
|
||||||
|
readOnly: false,
|
||||||
|
}).as('editorInstance');
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(function () {
|
||||||
|
if (this.editorInstance) {
|
||||||
|
this.editorInstance.destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('*.toggleToolbox()', () => {
|
||||||
|
const isToolboxVisible = (): void => {
|
||||||
|
cy.get('[data-cy=editorjs]').find('div.ce-toolbox')
|
||||||
|
.then((toolbox) => {
|
||||||
|
if (toolbox.is(':visible')) {
|
||||||
|
assert.isOk(true, 'Toolbox visible');
|
||||||
|
} else {
|
||||||
|
assert.isNotOk(false, 'Toolbox should be visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const isToolboxNotVisible = (): void => {
|
||||||
|
cy.get('[data-cy=editorjs]').find('div.ce-toolbox')
|
||||||
|
.then((toolbox) => {
|
||||||
|
if (!toolbox.is(':visible')) {
|
||||||
|
assert.isOk(true, 'Toolbox not visible');
|
||||||
|
} else {
|
||||||
|
assert.isNotOk(false, 'Toolbox should not be visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
it('should open the toolbox', function () {
|
||||||
|
cy.get<EditorJS>('@editorInstance').then(async function (editor) {
|
||||||
|
editor.toolbar.toggleToolbox(true);
|
||||||
|
isToolboxVisible();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should close the toolbox', function () {
|
||||||
|
cy.get<EditorJS>('@editorInstance').then(async function (editor) {
|
||||||
|
editor.toolbar.toggleToolbox(true);
|
||||||
|
|
||||||
|
isToolboxVisible();
|
||||||
|
|
||||||
|
editor.toolbar.toggleToolbox(false);
|
||||||
|
isToolboxNotVisible();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('should toggle the toolbox', function () {
|
||||||
|
cy.get<EditorJS>('@editorInstance').then(async function (editor) {
|
||||||
|
editor.toolbar.toggleToolbox();
|
||||||
|
isToolboxVisible();
|
||||||
|
|
||||||
|
editor.toolbar.toggleToolbox();
|
||||||
|
isToolboxNotVisible();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
6
types/api/toolbar.d.ts
vendored
6
types/api/toolbar.d.ts
vendored
|
@ -17,4 +17,10 @@ export interface Toolbar {
|
||||||
* @param {boolean} openingState — opening state of Block Setting
|
* @param {boolean} openingState — opening state of Block Setting
|
||||||
*/
|
*/
|
||||||
toggleBlockSettings(openingState?: boolean): void;
|
toggleBlockSettings(openingState?: boolean): void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle toolbox
|
||||||
|
* @param {boolean} openingState — opening state of the toolbox
|
||||||
|
*/
|
||||||
|
toggleToolbox(openingState?: boolean): void;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue