mirror of
https://github.com/codex-team/editor.js
synced 2024-06-20 22:55:15 +02:00
* the popover component, vertical toolbox * toolbox position improved * popover width improved * always show the plus button * search field added * search input in popover * trying to create mobile toolbox * FIx mobile popover fixed positioning * Add mobile popover overlay * Hide mobile popover on scroll * Tmp * feat(toolbox): popover adapted for mobile devices (#2004) * FIx mobile popover fixed positioning * Add mobile popover overlay * Hide mobile popover on scroll * Alter toolbox buttons hover * Fix closing popover on overlay click * Tests fix * Fix onchange test * restore focus after toolbox closing by ESC * don't move toolbar by block-hover on mobile Resolves #1972 * popover mobile styles improved * Cleanup * Remove scroll event listener * Lock scroll on mobile * don't show shortcuts in mobile popover * Change data attr name * Remove unused styles * Remove unused listeners * disable hover on mobile popover * Scroll fix * Lint * Revert "Scroll fix" This reverts commit82deae543e
. * Return back background color for active state of toolbox buttons Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Vertical toolbox fixes (#2017) * Replace visibility property with display for hiding popover * Disable arrow right and left keys for popover * Revert "Replace visibility property with display for hiding popover" This reverts commitaf521cf6f2
. * Hide popover via setting max-height to 0 to fix animation in safari * Remove redundant condition * Extend element interface to avoid ts errors * Do not subscribe to block hovered if mobile * Add unsubscribing from overlay click event * Rename isMobile to isMobileScreen * Cleanup * fix: popover opening direction (#2022) * Change popover opening direction based on available space below it * Update check * Use cacheable decorator * Update src/components/flipper.ts Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com> * Fixes * Fix test * Clear search on popover hide * Fix popover width * Fix for tests * Update todos * Linter fixes * rm todo about beforeInsert because I have no idea what does it mean * i18n for search labels done * rm methods for hiding/showing of + * some code style update * Update CHANGELOG.md * make the list items a little bit compact * fix z-index issue caused by block-appearing animation also, improve popover padding for two reasons: - make the popover more consistent with the Table tool popover (in future, it can be done with the same api method) - make popover looks better * Some progress Use overriden config tmp * Cleanup * Proceed cleanup * Update tool-settings.d.ts * Get rid of isToolboxItemActive * Get rid of key * Filter out duplicates in conversion menu * Rename hash to id * Change function for generating hash * Cleanup * Further cleanup * [Feature] Multiple toolbox items: using of data overrides instead of config overrides (#2064) * Use data instead of config * check if active toolbox entry exists * comparison improved * eslint fix * rename toolbox types, simplify hasTools method * add empty line * wrong line * add multiple toobox note to the doc * Update toolbox configs merge logic * Add a test case * Add toolbox ui tests * Update tests * upd doc * Update header * Update changelog and package.json * Update changelog * Update jsdoc * Remove unused dependency * Make BlockTool's toolbox getter always return an array * Fix for unconfigured toolbox * Revert "Fix for unconfigured toolbox" This reverts commitdff1df2304
. * Change return type * Merge data overrides with actual block data when inserting a block * Revert "Merge data overrides with actual block data when inserting a block" This reverts commiteb0a59cc64
. * Merge tool's data with data overrides * Move merging block data with data overrides to insertNewBlock * Update changelog * Rename getDefaultBlockData to composeBlockData * Create block data on condition * Update types/api/blocks.d.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Update src/components/modules/api/blocks.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com> Co-authored-by: Peter Savchenko <specc.dev@gmail.com> Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com>
269 lines
6.8 KiB
TypeScript
269 lines
6.8 KiB
TypeScript
import { ToolboxConfig, BlockToolData, ToolboxConfigEntry } from '../../../../types';
|
|
|
|
const ICON = '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"></path></svg>';
|
|
|
|
describe('Editor Tools Api', () => {
|
|
context('Toolbox', () => {
|
|
it('should render a toolbox entry for tool if configured', () => {
|
|
/**
|
|
* Tool with single toolbox entry configured
|
|
*/
|
|
class TestTool {
|
|
/**
|
|
* Returns toolbox config as list of entries
|
|
*/
|
|
public static get toolbox(): ToolboxConfigEntry {
|
|
return {
|
|
title: 'Entry 1',
|
|
icon: ICON,
|
|
};
|
|
}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTool: TestTool,
|
|
},
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-toolbar__plus')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool]')
|
|
.should('have.length', 1);
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool] .ce-popover__item-icon')
|
|
.should('contain.html', TestTool.toolbox.icon);
|
|
});
|
|
|
|
it('should render several toolbox entries for one tool if configured', () => {
|
|
/**
|
|
* Tool with several toolbox entries configured
|
|
*/
|
|
class TestTool {
|
|
/**
|
|
* Returns toolbox config as list of entries
|
|
*/
|
|
public static get toolbox(): ToolboxConfig {
|
|
return [
|
|
{
|
|
title: 'Entry 1',
|
|
icon: ICON,
|
|
},
|
|
{
|
|
title: 'Entry 2',
|
|
icon: ICON,
|
|
},
|
|
];
|
|
}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTool: TestTool,
|
|
},
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-toolbar__plus')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool]')
|
|
.should('have.length', 2);
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool]')
|
|
.first()
|
|
.should('contain.text', TestTool.toolbox[0].title);
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool]')
|
|
.last()
|
|
.should('contain.text', TestTool.toolbox[1].title);
|
|
});
|
|
|
|
it('should insert block with overriden data on entry click in case toolbox entry provides data overrides', () => {
|
|
const text = 'Text';
|
|
const dataOverrides = {
|
|
testProp: 'new value',
|
|
};
|
|
|
|
/**
|
|
* Tool with default data to be overriden
|
|
*/
|
|
class TestTool {
|
|
private _data = {
|
|
testProp: 'default value',
|
|
}
|
|
|
|
/**
|
|
* Tool contructor
|
|
*
|
|
* @param data - previously saved data
|
|
*/
|
|
constructor({ data }) {
|
|
this._data = data;
|
|
}
|
|
|
|
/**
|
|
* Returns toolbox config as list of entries with overriden data
|
|
*/
|
|
public static get toolbox(): ToolboxConfig {
|
|
return [
|
|
{
|
|
title: 'Entry 1',
|
|
icon: ICON,
|
|
data: dataOverrides,
|
|
},
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Return Tool's view
|
|
*/
|
|
public render(): HTMLElement {
|
|
const wrapper = document.createElement('div');
|
|
|
|
wrapper.setAttribute('contenteditable', 'true');
|
|
|
|
return wrapper;
|
|
}
|
|
|
|
/**
|
|
* Extracts Tool's data from the view
|
|
*
|
|
* @param el - tool view
|
|
*/
|
|
public save(el: HTMLElement): BlockToolData {
|
|
return {
|
|
...this._data,
|
|
text: el.innerHTML,
|
|
};
|
|
}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTool: TestTool,
|
|
},
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-toolbar__plus')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool]')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.last()
|
|
.click()
|
|
.type(text);
|
|
|
|
cy.get('@editorInstance')
|
|
.then(async (editor: any) => {
|
|
const editorData = await editor.save();
|
|
|
|
expect(editorData.blocks[0].data).to.be.deep.eq({
|
|
...dataOverrides,
|
|
text,
|
|
});
|
|
});
|
|
});
|
|
|
|
it('should not display tool in toolbox if the tool has single toolbox entry configured and it has icon missing', () => {
|
|
/**
|
|
* Tool with one of the toolbox entries with icon missing
|
|
*/
|
|
class TestTool {
|
|
/**
|
|
* Returns toolbox config as list of entries one of which has missing icon
|
|
*/
|
|
public static get toolbox(): ToolboxConfig {
|
|
return {
|
|
title: 'Entry 2',
|
|
};
|
|
}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTool: TestTool,
|
|
},
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-toolbar__plus')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool]')
|
|
.should('not.exist');
|
|
});
|
|
|
|
it('should skip toolbox entries that have no icon', () => {
|
|
const skippedEntryTitle = 'Entry 2';
|
|
|
|
/**
|
|
* Tool with one of the toolbox entries with icon missing
|
|
*/
|
|
class TestTool {
|
|
/**
|
|
* Returns toolbox config as list of entries one of which has missing icon
|
|
*/
|
|
public static get toolbox(): ToolboxConfig {
|
|
return [
|
|
{
|
|
title: 'Entry 1',
|
|
icon: ICON,
|
|
},
|
|
{
|
|
title: skippedEntryTitle,
|
|
},
|
|
];
|
|
}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTool: TestTool,
|
|
},
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-toolbar__plus')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-popover__item[data-item-name=testTool]')
|
|
.should('have.length', 1)
|
|
.should('not.contain', skippedEntryTitle);
|
|
});
|
|
});
|
|
}); |