mirror of
https://github.com/codex-team/editor.js
synced 2024-05-07 00:46:45 +02:00
581289c03e
* Default tunes to popover * Add the rest of default tunes * Add popover * Cleanup * Rename custom content * Cleanup * Add ability to open block settings upwards * Fix tests * Cleanup default tunes * Rename and cleanup * Add ability to display rendered custom tunes * cleanup * Rename * Add flag to close tunes popover * Cleanup * i18n * Cleanup * Fix build and tests * Fix for iframe * Add comments * Display active item, move closeOnActivate to popover * Add confirmation support to popover * Handle boolean value in confirmation param * Clarify flippable logic in popover * Comments * Pass editor element as a param of popover constructor * Fix readability * Tests * Fix flipper for confirmation element * Update confirmation config structure * Rename onClick to onActivate * Fix tests and build * Make confirmation props optional * Simplify processing tunes * Renamings * Fix text block tunes * Docs * Update event type * Move enabling confirmation state to separate method * move popover types * Unhardcode color * Support toggling * Add support of disabled items * Fix tab in empty block leading to selecting second item in popover * Remove margins for styles api settings button class * Fix arrow navigation between blocks after opening block tunes * Cleaup in default tunes code * Fix chaining confirmations * Colors * Types * Change the way flippable elements of popover custom area are set * Remove borders around popover icons * Fix untabbable inline toolbar * Fix locked scroll after closing tunes popover on mobile * Cleanup * Set max popover width * Make popover icon's border outside * Fix tab issue * Fix focus/hover issue * Reformat * Cleanup * Fix opening block tunes via keyboard * Add disableSpecialHoverAndFocusBehavior * Add deprecated comment * Cleanup * Fix popover active state * Fix checklist deletion with confirmation * Fix checklist deletion 2 * Fix popover focus * Fix popover items being impossible to flip after searching * Fix popover item highlighting issue * Update flipper.spec.ts * Fixes after review * Add Tunes Api tests * Fix multiple popover entries configured by one tune * Add tool's renderSettings() tests * Add popover confirmation state test * Fix popover width on mobile * Add popover tests * Add changelog and update version * Update changelog * Fix block tunes being unable to open after tune activation Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
import { PopoverItem } from '../../../../types/index.js';
|
|
|
|
/**
|
|
* Mock of some Block Tool
|
|
*/
|
|
class SomePlugin {
|
|
/**
|
|
* Event handler to be spyed in test
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
public static pluginInternalKeydownHandler(): void {}
|
|
|
|
/**
|
|
* Mocked render method
|
|
*/
|
|
public render(): HTMLElement {
|
|
const wrapper = document.createElement('div');
|
|
|
|
wrapper.classList.add('cdx-some-plugin');
|
|
wrapper.contentEditable = 'true';
|
|
wrapper.addEventListener('keydown', SomePlugin.pluginInternalKeydownHandler);
|
|
|
|
return wrapper;
|
|
}
|
|
|
|
/**
|
|
* Used to display our tool in the Toolboz
|
|
*/
|
|
public static get toolbox(): PopoverItem {
|
|
return {
|
|
icon: '₷',
|
|
label: 'Some tool',
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
onActivate: (): void => {},
|
|
};
|
|
}
|
|
}
|
|
|
|
describe('Flipper', () => {
|
|
beforeEach(() => {
|
|
if (this && this.editorInstance) {
|
|
this.editorInstance.destroy();
|
|
} else {
|
|
cy.createEditor({
|
|
tools: {
|
|
sometool: SomePlugin,
|
|
},
|
|
}).as('editorInstance');
|
|
}
|
|
});
|
|
|
|
it('should prevent plugins event handlers from being called while keyboard navigation', () => {
|
|
const TAB_KEY_CODE = 9;
|
|
const ARROW_DOWN_KEY_CODE = 40;
|
|
const ENTER_KEY_CODE = 13;
|
|
|
|
const sampleText = 'sample text';
|
|
|
|
cy.spy(SomePlugin, 'pluginInternalKeydownHandler');
|
|
|
|
// Insert sometool block and enter sample text
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.trigger('keydown', { keyCode: TAB_KEY_CODE });
|
|
|
|
cy.get('[data-item-name=sometool]').click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.cdx-some-plugin')
|
|
.focus()
|
|
.type(sampleText);
|
|
|
|
// Try to delete the block via keyboard
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.cdx-some-plugin')
|
|
// Open tunes menu
|
|
.trigger('keydown', { keyCode: TAB_KEY_CODE })
|
|
// Navigate to delete button (the second button)
|
|
.trigger('keydown', { keyCode: ARROW_DOWN_KEY_CODE })
|
|
.trigger('keydown', { keyCode: ARROW_DOWN_KEY_CODE });
|
|
|
|
/**
|
|
* Check whether we focus the Delete Tune or not
|
|
*/
|
|
cy.get('[data-item-name="delete"]')
|
|
.should('have.class', 'ce-popover__item--focused');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.cdx-some-plugin')
|
|
// Click delete
|
|
.trigger('keydown', { keyCode: ENTER_KEY_CODE })
|
|
// // Confirm delete
|
|
.trigger('keydown', { keyCode: ENTER_KEY_CODE });
|
|
|
|
expect(SomePlugin.pluginInternalKeydownHandler).to.have.not.been.called;
|
|
});
|
|
});
|