mirror of
https://github.com/codex-team/editor.js
synced 2024-06-29 10:50:23 +02:00
refactoring(modules): Events module is util now (#1582)
* refactoring(modules): events module is util now * Update changelog * remove redundant line * refactor * Update editor-modules.d.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
parent
c4ebdee396
commit
d945d4c518
|
@ -15,6 +15,7 @@
|
||||||
- `Fix` - Fix unexpected behavior on an empty link pasting [#1348](https://github.com/codex-team/editor.js/issues/1348).
|
- `Fix` - Fix unexpected behavior on an empty link pasting [#1348](https://github.com/codex-team/editor.js/issues/1348).
|
||||||
- `Fix` - Fix SanitizerConfig type definition [#1513](https://github.com/codex-team/editor.js/issues/1513)
|
- `Fix` - Fix SanitizerConfig type definition [#1513](https://github.com/codex-team/editor.js/issues/1513)
|
||||||
- `Refactoring` - The Listeners module now is a util.
|
- `Refactoring` - The Listeners module now is a util.
|
||||||
|
- `Refactoring` - The Events module now is a util.
|
||||||
- `Fix` - Editor Config now immutable [#1552](https://github.com/codex-team/editor.js/issues/1552).
|
- `Fix` - Editor Config now immutable [#1552](https://github.com/codex-team/editor.js/issues/1552).
|
||||||
- `Refactoring` - Shortcuts module is util now.
|
- `Refactoring` - Shortcuts module is util now.
|
||||||
- `Fix` - Fix bubbling on BlockManagers' listener [#1433](https://github.com/codex-team/editor.js/issues/1433).
|
- `Fix` - Fix bubbling on BlockManagers' listener [#1433](https://github.com/codex-team/editor.js/issues/1433).
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { EditorModules } from '../types-internal/editor-modules';
|
||||||
import { EditorConfig } from '../../types';
|
import { EditorConfig } from '../../types';
|
||||||
import { ModuleConfig } from '../types-internal/module-config';
|
import { ModuleConfig } from '../types-internal/module-config';
|
||||||
import Listeners from './utils/listeners';
|
import Listeners from './utils/listeners';
|
||||||
|
import EventsDispatcher from './utils/events';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The type <T> of the Module generic.
|
* The type <T> of the Module generic.
|
||||||
|
@ -39,6 +40,11 @@ export default class Module<T extends ModuleNodes = {}> {
|
||||||
*/
|
*/
|
||||||
protected config: EditorConfig;
|
protected config: EditorConfig;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Editor event dispatcher class
|
||||||
|
*/
|
||||||
|
protected eventsDispatcher: EventsDispatcher;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Util for bind/unbind DOM event listeners
|
* Util for bind/unbind DOM event listeners
|
||||||
*/
|
*/
|
||||||
|
@ -86,14 +92,17 @@ export default class Module<T extends ModuleNodes = {}> {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class
|
* @class
|
||||||
|
*
|
||||||
* @param {EditorConfig} config - Editor's config
|
* @param {EditorConfig} config - Editor's config
|
||||||
|
* @param {EventsDispatcher} eventsDispatcher - Editor's event dispatcher
|
||||||
*/
|
*/
|
||||||
constructor({ config }: ModuleConfig) {
|
constructor({ config, eventsDispatcher }: ModuleConfig) {
|
||||||
if (new.target === Module) {
|
if (new.target === Module) {
|
||||||
throw new TypeError('Constructors for abstract class Module are not allowed.');
|
throw new TypeError('Constructors for abstract class Module are not allowed.');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.config = config;
|
this.config = config;
|
||||||
|
this.eventsDispatcher = eventsDispatcher;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { EditorConfig, SanitizerConfig } from '../../types';
|
||||||
import { EditorModules } from '../types-internal/editor-modules';
|
import { EditorModules } from '../types-internal/editor-modules';
|
||||||
import I18n from './i18n';
|
import I18n from './i18n';
|
||||||
import { CriticalError } from './errors/critical';
|
import { CriticalError } from './errors/critical';
|
||||||
|
import EventsDispatcher from './utils/events';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {Core} Core - editor core class
|
* @typedef {Core} Core - editor core class
|
||||||
|
@ -53,6 +54,11 @@ export default class Core {
|
||||||
*/
|
*/
|
||||||
public isReady: Promise<void>;
|
public isReady: Promise<void>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event Dispatcher util
|
||||||
|
*/
|
||||||
|
private eventsDispatcher: EventsDispatcher = new EventsDispatcher();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {EditorConfig} config - user configuration
|
* @param {EditorConfig} config - user configuration
|
||||||
*
|
*
|
||||||
|
@ -338,6 +344,7 @@ export default class Core {
|
||||||
*/
|
*/
|
||||||
this.moduleInstances[Module.displayName] = new Module({
|
this.moduleInstances[Module.displayName] = new Module({
|
||||||
config: this.configuration,
|
config: this.configuration,
|
||||||
|
eventsDispatcher: this.eventsDispatcher,
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
_.log(`Module ${Module.displayName} skipped because`, 'warn', e);
|
_.log(`Module ${Module.displayName} skipped because`, 'warn', e);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Events } from '../../../../types/api';
|
|
||||||
import Module from '../../__module';
|
import Module from '../../__module';
|
||||||
|
import { Events } from '../../../../types/api';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class EventsAPI
|
* @class EventsAPI
|
||||||
|
@ -26,7 +26,7 @@ export default class EventsAPI extends Module {
|
||||||
* @param {Function} callback - event handler
|
* @param {Function} callback - event handler
|
||||||
*/
|
*/
|
||||||
public on(eventName, callback): void {
|
public on(eventName, callback): void {
|
||||||
this.Editor.Events.on(eventName, callback);
|
this.eventsDispatcher.on(eventName, callback);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -36,7 +36,7 @@ export default class EventsAPI extends Module {
|
||||||
* @param {object} data - event's data
|
* @param {object} data - event's data
|
||||||
*/
|
*/
|
||||||
public emit(eventName, data): void {
|
public emit(eventName, data): void {
|
||||||
this.Editor.Events.emit(eventName, data);
|
this.eventsDispatcher.emit(eventName, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -46,6 +46,6 @@ export default class EventsAPI extends Module {
|
||||||
* @param {Function} callback - event handler
|
* @param {Function} callback - event handler
|
||||||
*/
|
*/
|
||||||
public off(eventName, callback): void {
|
public off(eventName, callback): void {
|
||||||
this.Editor.Events.off(eventName, callback);
|
this.eventsDispatcher.off(eventName, callback);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -147,7 +147,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
|
||||||
this.addDefaultSettings();
|
this.addDefaultSettings();
|
||||||
|
|
||||||
/** Tell to subscribers that block settings is opened */
|
/** Tell to subscribers that block settings is opened */
|
||||||
this.Editor.Events.emit(this.events.opened);
|
this.eventsDispatcher.emit(this.events.opened);
|
||||||
|
|
||||||
this.flipper.activate(this.blockTunesButtons);
|
this.flipper.activate(this.blockTunesButtons);
|
||||||
}
|
}
|
||||||
|
@ -183,7 +183,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
|
||||||
this.nodes.defaultSettings.innerHTML = '';
|
this.nodes.defaultSettings.innerHTML = '';
|
||||||
|
|
||||||
/** Tell to subscribers that block settings is closed */
|
/** Tell to subscribers that block settings is closed */
|
||||||
this.Editor.Events.emit(this.events.closed);
|
this.eventsDispatcher.emit(this.events.closed);
|
||||||
|
|
||||||
/** Clear cached buttons */
|
/** Clear cached buttons */
|
||||||
this.buttons = [];
|
this.buttons = [];
|
||||||
|
|
|
@ -14,6 +14,8 @@ import BoldInlineTool from '../inline-tools/inline-tool-bold';
|
||||||
import ItalicInlineTool from '../inline-tools/inline-tool-italic';
|
import ItalicInlineTool from '../inline-tools/inline-tool-italic';
|
||||||
import LinkInlineTool from '../inline-tools/inline-tool-link';
|
import LinkInlineTool from '../inline-tools/inline-tool-link';
|
||||||
import Stub from '../tools/stub';
|
import Stub from '../tools/stub';
|
||||||
|
import { ModuleConfig } from '../../types-internal/module-config';
|
||||||
|
import EventsDispatcher from '../utils/events';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @module Editor.js Tools Submodule
|
* @module Editor.js Tools Submodule
|
||||||
|
@ -198,9 +200,13 @@ export default class Tools extends Module {
|
||||||
* @class
|
* @class
|
||||||
*
|
*
|
||||||
* @param {EditorConfig} config - Editor's configuration
|
* @param {EditorConfig} config - Editor's configuration
|
||||||
|
* @param {EventsDispatcher} eventsDispatcher - Editor's event dispatcher
|
||||||
*/
|
*/
|
||||||
constructor({ config }) {
|
constructor({ config, eventsDispatcher }: ModuleConfig) {
|
||||||
super({ config });
|
super({
|
||||||
|
config,
|
||||||
|
eventsDispatcher,
|
||||||
|
});
|
||||||
|
|
||||||
this.toolsClasses = {};
|
this.toolsClasses = {};
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,6 @@ import Module from '../__module';
|
||||||
* Use external module CodeX Tooltip
|
* Use external module CodeX Tooltip
|
||||||
*/
|
*/
|
||||||
import CodeXTooltips, { TooltipContent, TooltipOptions } from 'codex-tooltip';
|
import CodeXTooltips, { TooltipContent, TooltipOptions } from 'codex-tooltip';
|
||||||
import { ModuleConfig } from '../../types-internal/module-config';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tooltip
|
* Tooltip
|
||||||
|
@ -20,14 +19,6 @@ export default class Tooltip extends Module {
|
||||||
*/
|
*/
|
||||||
private lib: CodeXTooltips = new CodeXTooltips();
|
private lib: CodeXTooltips = new CodeXTooltips();
|
||||||
|
|
||||||
/**
|
|
||||||
* @class
|
|
||||||
* @param {EditorConfig} - Editor's config
|
|
||||||
*/
|
|
||||||
constructor({ config }: ModuleConfig) {
|
|
||||||
super({ config });
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shows tooltip on element with passed HTML content
|
* Shows tooltip on element with passed HTML content
|
||||||
*
|
*
|
||||||
|
|
|
@ -1,19 +1,17 @@
|
||||||
import Module from '../__module';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @module eventDispatcher
|
* @class EventDispatcher
|
||||||
*
|
*
|
||||||
* Has two important methods:
|
* Has two important methods:
|
||||||
* - {Function} on - appends subscriber to the event. If event doesn't exist - creates new one
|
* - {Function} on - appends subscriber to the event. If event doesn't exist - creates new one
|
||||||
* - {Function} emit - fires all subscribers with data
|
* - {Function} emit - fires all subscribers with data
|
||||||
* - {Function off - unsubsribes callback
|
* - {Function off - unsubscribes callback
|
||||||
*
|
*
|
||||||
* @version 1.0.0
|
* @version 1.0.0
|
||||||
*
|
*
|
||||||
* @typedef {Events} Events
|
* @typedef {Events} Events
|
||||||
* @property {object} subscribers - all subscribers grouped by event name
|
* @property {object} subscribers - all subscribers grouped by event name
|
||||||
*/
|
*/
|
||||||
export default class Events extends Module {
|
export default class EventsDispatcher {
|
||||||
/**
|
/**
|
||||||
* Object with events` names as key and array of callback functions as value
|
* Object with events` names as key and array of callback functions as value
|
||||||
*
|
*
|
4
src/types-internal/editor-modules.d.ts
vendored
4
src/types-internal/editor-modules.d.ts
vendored
|
@ -4,8 +4,6 @@ import Toolbar from '../components/modules/toolbar/index';
|
||||||
import InlineToolbar from '../components/modules/toolbar/inline';
|
import InlineToolbar from '../components/modules/toolbar/inline';
|
||||||
import Toolbox from '../components/modules/toolbar/toolbox';
|
import Toolbox from '../components/modules/toolbar/toolbox';
|
||||||
import BlockSettings from '../components/modules/toolbar/blockSettings';
|
import BlockSettings from '../components/modules/toolbar/blockSettings';
|
||||||
import Events from '../components/modules/events';
|
|
||||||
import Shortcuts from '../components/utils/shortcuts';
|
|
||||||
import Paste from '../components/modules/paste';
|
import Paste from '../components/modules/paste';
|
||||||
import Notifier from '../components/modules/notifier';
|
import Notifier from '../components/modules/notifier';
|
||||||
import Tooltip from '../components/modules/tooltip';
|
import Tooltip from '../components/modules/tooltip';
|
||||||
|
@ -48,8 +46,6 @@ export interface EditorModules {
|
||||||
Toolbox: Toolbox;
|
Toolbox: Toolbox;
|
||||||
BlockSettings: BlockSettings;
|
BlockSettings: BlockSettings;
|
||||||
ConversionToolbar: ConversionToolbar;
|
ConversionToolbar: ConversionToolbar;
|
||||||
Events: Events;
|
|
||||||
Shortcuts: Shortcuts;
|
|
||||||
Paste: Paste;
|
Paste: Paste;
|
||||||
DragNDrop: DragNDrop;
|
DragNDrop: DragNDrop;
|
||||||
ModificationsObserver: ModificationsObserver;
|
ModificationsObserver: ModificationsObserver;
|
||||||
|
|
2
src/types-internal/module-config.d.ts
vendored
2
src/types-internal/module-config.d.ts
vendored
|
@ -1,8 +1,10 @@
|
||||||
import { EditorConfig } from '../../types/index';
|
import { EditorConfig } from '../../types/index';
|
||||||
|
import EventsDispatcher from '../components/utils/events';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Describes object passed to Editor modules constructor
|
* Describes object passed to Editor modules constructor
|
||||||
*/
|
*/
|
||||||
export interface ModuleConfig {
|
export interface ModuleConfig {
|
||||||
config: EditorConfig;
|
config: EditorConfig;
|
||||||
|
eventsDispatcher: EventsDispatcher;
|
||||||
}
|
}
|
||||||
|
|
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
|
@ -104,8 +104,6 @@ declare class EditorJS {
|
||||||
|
|
||||||
public blocks: Blocks;
|
public blocks: Blocks;
|
||||||
public caret: Caret;
|
public caret: Caret;
|
||||||
public events: Events;
|
|
||||||
public listeners: Listeners;
|
|
||||||
public sanitizer: Sanitizer;
|
public sanitizer: Sanitizer;
|
||||||
public saver: Saver;
|
public saver: Saver;
|
||||||
public selection: Selection;
|
public selection: Selection;
|
||||||
|
|
Loading…
Reference in a new issue