kopia lustrzana https://github.com/wagtail/wagtail
Refactor Draftail exports to match exposed module
rodzic
d86f48842d
commit
aecfce73ec
|
@ -6,10 +6,6 @@ import { IS_IE11, STRINGS } from '../../config/wagtailConfig';
|
||||||
|
|
||||||
import Icon from '../Icon/Icon';
|
import Icon from '../Icon/Icon';
|
||||||
|
|
||||||
import registry from './registry';
|
|
||||||
|
|
||||||
export { registry };
|
|
||||||
|
|
||||||
export { default as Link } from './decorators/Link';
|
export { default as Link } from './decorators/Link';
|
||||||
export { default as Document } from './decorators/Document';
|
export { default as Document } from './decorators/Document';
|
||||||
export { default as ImageBlock } from './blocks/ImageBlock';
|
export { default as ImageBlock } from './blocks/ImageBlock';
|
||||||
|
@ -17,6 +13,20 @@ export { default as EmbedBlock } from './blocks/EmbedBlock';
|
||||||
|
|
||||||
export { default as ModalWorkflowSource } from './sources/ModalWorkflowSource';
|
export { default as ModalWorkflowSource } from './sources/ModalWorkflowSource';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Registry for client-side code of Draftail plugins.
|
||||||
|
*/
|
||||||
|
const PLUGINS = {};
|
||||||
|
|
||||||
|
const registerPlugin = (plugin) => {
|
||||||
|
PLUGINS[plugin.type] = plugin;
|
||||||
|
return PLUGINS;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wraps a style/block/entity type’s icon with an icon font implementation,
|
||||||
|
* so Draftail can use icon fonts in its toolbar.
|
||||||
|
*/
|
||||||
export const wrapWagtailIcon = type => {
|
export const wrapWagtailIcon = type => {
|
||||||
const isIconFont = type.icon && typeof type.icon === 'string';
|
const isIconFont = type.icon && typeof type.icon === 'string';
|
||||||
if (isIconFont) {
|
if (isIconFont) {
|
||||||
|
@ -33,7 +43,7 @@ export const wrapWagtailIcon = type => {
|
||||||
* @param {string} fieldName
|
* @param {string} fieldName
|
||||||
* @param {Object} options
|
* @param {Object} options
|
||||||
*/
|
*/
|
||||||
export const initEditor = (fieldName, options) => {
|
const initEditor = (fieldName, options) => {
|
||||||
const field = document.querySelector(`[name="${fieldName}"]`);
|
const field = document.querySelector(`[name="${fieldName}"]`);
|
||||||
const editorWrapper = document.createElement('div');
|
const editorWrapper = document.createElement('div');
|
||||||
field.parentNode.appendChild(editorWrapper);
|
field.parentNode.appendChild(editorWrapper);
|
||||||
|
@ -47,9 +57,9 @@ export const initEditor = (fieldName, options) => {
|
||||||
let entityTypes = options.entityTypes || [];
|
let entityTypes = options.entityTypes || [];
|
||||||
|
|
||||||
entityTypes = entityTypes.map(wrapWagtailIcon).map((type) => {
|
entityTypes = entityTypes.map(wrapWagtailIcon).map((type) => {
|
||||||
const plugin = registry.getPlugin(type.type);
|
const plugin = PLUGINS[type.type];
|
||||||
// Override the properties defined in the JS plugin: Python should be the source of truth.
|
|
||||||
|
|
||||||
|
// Override the properties defined in the JS plugin: Python should be the source of truth.
|
||||||
return Object.assign({}, plugin, type);
|
return Object.assign({}, plugin, type);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -68,7 +78,6 @@ export const initEditor = (fieldName, options) => {
|
||||||
enableLineBreak={{ description: STRINGS.LINE_BREAK }}
|
enableLineBreak={{ description: STRINGS.LINE_BREAK }}
|
||||||
showUndoControl={{ description: STRINGS.UNDO }}
|
showUndoControl={{ description: STRINGS.UNDO }}
|
||||||
showRedoControl={{ description: STRINGS.REDO }}
|
showRedoControl={{ description: STRINGS.REDO }}
|
||||||
// If increasing above 4, we will need to add styles for the extra nesting levels.
|
|
||||||
maxListNesting={4}
|
maxListNesting={4}
|
||||||
// Draft.js + IE 11 presents some issues with pasting rich text. Disable rich paste there.
|
// Draft.js + IE 11 presents some issues with pasting rich text. Disable rich paste there.
|
||||||
stripPastedStyles={IS_IE11}
|
stripPastedStyles={IS_IE11}
|
||||||
|
@ -85,3 +94,8 @@ export const initEditor = (fieldName, options) => {
|
||||||
// Bind editor instance to its field so it can be accessed imperatively elsewhere.
|
// Bind editor instance to its field so it can be accessed imperatively elsewhere.
|
||||||
field.draftailEditor = draftailEditor;
|
field.draftailEditor = draftailEditor;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
initEditor,
|
||||||
|
registerPlugin,
|
||||||
|
};
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import {
|
import draftail, {
|
||||||
wrapWagtailIcon,
|
wrapWagtailIcon,
|
||||||
initEditor,
|
|
||||||
registry,
|
|
||||||
ModalWorkflowSource,
|
ModalWorkflowSource,
|
||||||
Link,
|
Link,
|
||||||
Document,
|
Document,
|
||||||
|
@ -21,7 +19,7 @@ describe('Draftail', () => {
|
||||||
field.value = 'null';
|
field.value = 'null';
|
||||||
document.body.appendChild(field);
|
document.body.appendChild(field);
|
||||||
|
|
||||||
initEditor('test', {});
|
draftail.initEditor('test', {});
|
||||||
|
|
||||||
expect(field.draftailEditor).toBeDefined();
|
expect(field.draftailEditor).toBeDefined();
|
||||||
});
|
});
|
||||||
|
@ -32,7 +30,7 @@ describe('Draftail', () => {
|
||||||
field.value = 'null';
|
field.value = 'null';
|
||||||
document.body.appendChild(field);
|
document.body.appendChild(field);
|
||||||
|
|
||||||
initEditor('test', {});
|
draftail.initEditor('test', {});
|
||||||
|
|
||||||
field.draftailEditor.saveState();
|
field.draftailEditor.saveState();
|
||||||
|
|
||||||
|
@ -45,13 +43,13 @@ describe('Draftail', () => {
|
||||||
field.value = 'null';
|
field.value = 'null';
|
||||||
document.body.appendChild(field);
|
document.body.appendChild(field);
|
||||||
|
|
||||||
registry.registerPlugin({
|
draftail.registerPlugin({
|
||||||
type: 'IMAGE',
|
type: 'IMAGE',
|
||||||
source: () => {},
|
source: () => {},
|
||||||
block: () => {},
|
block: () => {},
|
||||||
});
|
});
|
||||||
|
|
||||||
initEditor('test', {
|
draftail.initEditor('test', {
|
||||||
entityTypes: [
|
entityTypes: [
|
||||||
{ type: 'IMAGE' },
|
{ type: 'IMAGE' },
|
||||||
],
|
],
|
||||||
|
@ -78,7 +76,20 @@ describe('Draftail', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('#registry', () => expect(registry).toBeDefined());
|
describe('#registerPlugin', () => {
|
||||||
|
it('works', () => {
|
||||||
|
const plugin = {
|
||||||
|
type: 'TEST',
|
||||||
|
source: null,
|
||||||
|
decorator: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(draftail.registerPlugin(plugin)).toMatchObject({
|
||||||
|
TEST: plugin,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
it('#ModalWorkflowSource', () => expect(ModalWorkflowSource).toBeDefined());
|
it('#ModalWorkflowSource', () => expect(ModalWorkflowSource).toBeDefined());
|
||||||
it('#Link', () => expect(Link).toBeDefined());
|
it('#Link', () => expect(Link).toBeDefined());
|
||||||
it('#Document', () => expect(Document).toBeDefined());
|
it('#Document', () => expect(Document).toBeDefined());
|
||||||
|
|
|
@ -1,14 +0,0 @@
|
||||||
const plugins = {};
|
|
||||||
|
|
||||||
const registerPlugin = (plugin) => {
|
|
||||||
plugins[plugin.type] = plugin;
|
|
||||||
|
|
||||||
return plugins;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getPlugin = (type) => plugins[type];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
registerPlugin,
|
|
||||||
getPlugin,
|
|
||||||
};
|
|
|
@ -1,15 +0,0 @@
|
||||||
import registry from './registry';
|
|
||||||
|
|
||||||
describe('registry', () => {
|
|
||||||
it('works', () => {
|
|
||||||
const plugin = {
|
|
||||||
type: 'TEST',
|
|
||||||
source: null,
|
|
||||||
decorator: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
expect(registry.getPlugin('TEST')).not.toBeDefined();
|
|
||||||
registry.registerPlugin(plugin);
|
|
||||||
expect(registry.getPlugin('TEST')).toBe(plugin);
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,6 +1,4 @@
|
||||||
import {
|
import draftail, {
|
||||||
initEditor,
|
|
||||||
registry,
|
|
||||||
ModalWorkflowSource,
|
ModalWorkflowSource,
|
||||||
Link,
|
Link,
|
||||||
Document,
|
Document,
|
||||||
|
@ -11,10 +9,8 @@ import {
|
||||||
/**
|
/**
|
||||||
* Entry point loaded when the Draftail editor is in use.
|
* Entry point loaded when the Draftail editor is in use.
|
||||||
*/
|
*/
|
||||||
const draftail = registry;
|
|
||||||
|
|
||||||
// Expose Draftail as a global, with the initEditor function.
|
// Expose module as a global.
|
||||||
draftail.initEditor = initEditor;
|
|
||||||
window.draftail = draftail;
|
window.draftail = draftail;
|
||||||
|
|
||||||
// Plugins for the built-in entities.
|
// Plugins for the built-in entities.
|
||||||
|
|
|
@ -6,9 +6,6 @@ describe('draftail.entry', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('has defaults registered', () => {
|
it('has defaults registered', () => {
|
||||||
expect(window.draftail.getPlugin('LINK')).toBeDefined();
|
expect(Object.keys(window.draftail.registerPlugin({}))).toEqual(["DOCUMENT", "LINK", "IMAGE", "EMBED", "undefined"]);
|
||||||
expect(window.draftail.getPlugin('DOCUMENT')).toBeDefined();
|
|
||||||
expect(window.draftail.getPlugin('IMAGE')).toBeDefined();
|
|
||||||
expect(window.draftail.getPlugin('EMBED')).toBeDefined();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Ładowanie…
Reference in New Issue