mirror of
https://github.com/codex-team/editor.js
synced 2024-06-18 13:45:20 +02:00
refactoring(modules): the listeners module now a util (#1572)
* listeners module goes util * fix listeners 'off' bug * improve garbage collecting
This commit is contained in:
parent
3bf30f0c1e
commit
2759b25d35
|
@ -13,6 +13,7 @@
|
|||
- `Fix` - Fix an unstable block cut process [#1489](https://github.com/codex-team/editor.js/issues/1489).
|
||||
- `Fix` - Type definition of the Sanitizer config: the sanitize function now contains param definition [#1491](https://github.com/codex-team/editor.js/pull/1491).
|
||||
- `Fix` - Fix unexpected behavior on an empty link pasting [#1348](https://github.com/codex-team/editor.js/issues/1348).
|
||||
- `Refactoring` - The Listeners module now is a util.
|
||||
- `Fix` - Editor Config now immutable [#1552](https://github.com/codex-team/editor.js/issues/1552).
|
||||
|
||||
### 2.19.1
|
||||
|
|
|
@ -87,6 +87,7 @@ export default class EditorJS {
|
|||
if (_.isFunction(moduleInstance.destroy)) {
|
||||
moduleInstance.destroy();
|
||||
}
|
||||
moduleInstance.listeners.removeAll();
|
||||
});
|
||||
|
||||
editor = null;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { EditorModules } from '../types-internal/editor-modules';
|
||||
import { EditorConfig } from '../../types';
|
||||
import { ModuleConfig } from '../types-internal/module-config';
|
||||
import Listeners from './utils/listeners';
|
||||
|
||||
/**
|
||||
* The type <T> of the Module generic.
|
||||
|
@ -38,6 +39,11 @@ export default class Module<T extends ModuleNodes = {}> {
|
|||
*/
|
||||
protected config: EditorConfig;
|
||||
|
||||
/**
|
||||
* Util for bind/unbind DOM event listeners
|
||||
*/
|
||||
protected listeners: Listeners = new Listeners();
|
||||
|
||||
/**
|
||||
* This object provides methods to push into set of listeners that being dropped when read-only mode is enabled
|
||||
*/
|
||||
|
@ -56,10 +62,8 @@ export default class Module<T extends ModuleNodes = {}> {
|
|||
handler: (event: Event) => void,
|
||||
options: boolean | AddEventListenerOptions = false
|
||||
): void => {
|
||||
const { Listeners } = this.Editor;
|
||||
|
||||
this.mutableListenerIds.push(
|
||||
Listeners.on(element, eventType, handler, options)
|
||||
this.listeners.on(element, eventType, handler, options)
|
||||
);
|
||||
},
|
||||
|
||||
|
@ -67,10 +71,8 @@ export default class Module<T extends ModuleNodes = {}> {
|
|||
* Clears all mutable listeners
|
||||
*/
|
||||
clearAll: (): void => {
|
||||
const { Listeners } = this.Editor;
|
||||
|
||||
for (const id of this.mutableListenerIds) {
|
||||
Listeners.offById(id);
|
||||
this.listeners.offById(id);
|
||||
}
|
||||
|
||||
this.mutableListenerIds = [];
|
||||
|
|
|
@ -27,7 +27,7 @@ export default class ListenersAPI extends Module {
|
|||
* @param {boolean} useCapture - capture event or not
|
||||
*/
|
||||
public on(element: HTMLElement, eventType: string, handler: () => void, useCapture?: boolean): void {
|
||||
this.Editor.Listeners.on(element, eventType, handler, useCapture);
|
||||
this.listeners.on(element, eventType, handler, useCapture);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -39,6 +39,6 @@ export default class ListenersAPI extends Module {
|
|||
* @param {boolean} useCapture - capture event or not
|
||||
*/
|
||||
public off(element: Element, eventType: string, handler: () => void, useCapture?: boolean): void {
|
||||
this.Editor.Listeners.off(element, eventType, handler, useCapture);
|
||||
this.listeners.off(element, eventType, handler, useCapture);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -184,7 +184,7 @@ export default class BlockManager extends Module {
|
|||
});
|
||||
|
||||
/** Copy event */
|
||||
this.Editor.Listeners.on(
|
||||
this.listeners.on(
|
||||
document,
|
||||
'copy',
|
||||
(e: ClipboardEvent) => this.Editor.BlockEvents.handleCommandC(e)
|
||||
|
|
|
@ -23,9 +23,7 @@ export default class CrossBlockSelection extends Module {
|
|||
* @returns {Promise}
|
||||
*/
|
||||
public async prepare(): Promise<void> {
|
||||
const { Listeners } = this.Editor;
|
||||
|
||||
Listeners.on(document, 'mousedown', (event: MouseEvent) => {
|
||||
this.listeners.on(document, 'mousedown', (event: MouseEvent) => {
|
||||
this.enableCrossBlockSelection(event);
|
||||
});
|
||||
}
|
||||
|
@ -40,13 +38,13 @@ export default class CrossBlockSelection extends Module {
|
|||
return;
|
||||
}
|
||||
|
||||
const { BlockManager, Listeners } = this.Editor;
|
||||
const { BlockManager } = this.Editor;
|
||||
|
||||
this.firstSelectedBlock = BlockManager.getBlock(event.target as HTMLElement);
|
||||
this.lastSelectedBlock = this.firstSelectedBlock;
|
||||
|
||||
Listeners.on(document, 'mouseover', this.onMouseOver);
|
||||
Listeners.on(document, 'mouseup', this.onMouseUp);
|
||||
this.listeners.on(document, 'mouseover', this.onMouseOver);
|
||||
this.listeners.on(document, 'mouseup', this.onMouseUp);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -176,10 +174,8 @@ export default class CrossBlockSelection extends Module {
|
|||
* Removes the listeners
|
||||
*/
|
||||
private onMouseUp = (): void => {
|
||||
const { Listeners } = this.Editor;
|
||||
|
||||
Listeners.off(document, 'mouseover', this.onMouseOver);
|
||||
Listeners.off(document, 'mouseup', this.onMouseUp);
|
||||
this.listeners.off(document, 'mouseover', this.onMouseOver);
|
||||
this.listeners.off(document, 'mouseup', this.onMouseUp);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -58,7 +58,7 @@ export default class ModificationsObserver extends Module {
|
|||
this.observer.disconnect();
|
||||
}
|
||||
this.observer = null;
|
||||
this.nativeInputs.forEach((input) => this.Editor.Listeners.off(input, 'input', this.mutationDebouncer));
|
||||
this.nativeInputs.forEach((input) => this.listeners.off(input, 'input', this.mutationDebouncer));
|
||||
this.mutationDebouncer = null;
|
||||
}
|
||||
|
||||
|
@ -163,13 +163,13 @@ export default class ModificationsObserver extends Module {
|
|||
private updateNativeInputs(): void {
|
||||
if (this.nativeInputs) {
|
||||
this.nativeInputs.forEach((input) => {
|
||||
this.Editor.Listeners.off(input, 'input');
|
||||
this.listeners.off(input, 'input');
|
||||
});
|
||||
}
|
||||
|
||||
this.nativeInputs = Array.from(this.Editor.UI.nodes.redactor.querySelectorAll('textarea, input, select'));
|
||||
|
||||
this.nativeInputs.forEach((input) => this.Editor.Listeners.on(input, 'input', this.mutationDebouncer));
|
||||
this.nativeInputs.forEach((input) => this.listeners.on(input, 'input', this.mutationDebouncer));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -263,18 +263,14 @@ export default class Paste extends Module {
|
|||
* Set onPaste callback handler
|
||||
*/
|
||||
private setCallback(): void {
|
||||
const { Listeners } = this.Editor;
|
||||
|
||||
Listeners.on(this.Editor.UI.nodes.holder, 'paste', this.handlePasteEvent);
|
||||
this.listeners.on(this.Editor.UI.nodes.holder, 'paste', this.handlePasteEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unset onPaste callback handler
|
||||
*/
|
||||
private unsetCallback(): void {
|
||||
const { Listeners } = this.Editor;
|
||||
|
||||
Listeners.off(this.Editor.UI.nodes.holder, 'paste', this.handlePasteEvent);
|
||||
this.listeners.off(this.Editor.UI.nodes.holder, 'paste', this.handlePasteEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -179,26 +179,25 @@ export default class RectangleSelection extends Module {
|
|||
* Sets Module necessary event handlers
|
||||
*/
|
||||
private enableModuleBindings(): void {
|
||||
const { Listeners } = this.Editor;
|
||||
const { container } = this.genHTML();
|
||||
|
||||
Listeners.on(container, 'mousedown', (mouseEvent: MouseEvent) => {
|
||||
this.listeners.on(container, 'mousedown', (mouseEvent: MouseEvent) => {
|
||||
this.processMouseDown(mouseEvent);
|
||||
}, false);
|
||||
|
||||
Listeners.on(document.body, 'mousemove', (mouseEvent: MouseEvent) => {
|
||||
this.listeners.on(document.body, 'mousemove', (mouseEvent: MouseEvent) => {
|
||||
this.processMouseMove(mouseEvent);
|
||||
}, false);
|
||||
|
||||
Listeners.on(document.body, 'mouseleave', () => {
|
||||
this.listeners.on(document.body, 'mouseleave', () => {
|
||||
this.processMouseLeave();
|
||||
});
|
||||
|
||||
Listeners.on(window, 'scroll', (mouseEvent: MouseEvent) => {
|
||||
this.listeners.on(window, 'scroll', (mouseEvent: MouseEvent) => {
|
||||
this.processScroll(mouseEvent);
|
||||
}, false);
|
||||
|
||||
Listeners.on(document.body, 'mouseup', () => {
|
||||
this.listeners.on(document.body, 'mouseup', () => {
|
||||
this.processMouseUp();
|
||||
}, false);
|
||||
}
|
||||
|
|
|
@ -325,7 +325,7 @@ export default class ConversionToolbar extends Module<ConversionToolbarNodes> {
|
|||
$.append(this.nodes.tools, tool);
|
||||
this.tools[toolName] = tool;
|
||||
|
||||
this.Editor.Listeners.on(tool, 'click', async () => {
|
||||
this.listeners.on(tool, 'click', async () => {
|
||||
await this.replaceWithBlock(toolName);
|
||||
});
|
||||
}
|
||||
|
|
|
@ -357,7 +357,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
|
|||
this.nodes.actions = $.make('div', this.CSS.actionsWrapper);
|
||||
|
||||
// To prevent reset of a selection when click on the wrapper
|
||||
this.Editor.Listeners.on(this.nodes.wrapper, 'mousedown', (event) => {
|
||||
this.listeners.on(this.nodes.wrapper, 'mousedown', (event) => {
|
||||
const isClickedOnActionsWrapper = (event.target as Element).closest(`.${this.CSS.actionsWrapper}`);
|
||||
|
||||
// If click is on actions wrapper,
|
||||
|
@ -479,7 +479,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
|
|||
|
||||
this.nodes.togglerAndButtonsWrapper.appendChild(this.nodes.conversionToggler);
|
||||
|
||||
this.Editor.Listeners.on(this.nodes.conversionToggler, 'click', () => {
|
||||
this.listeners.on(this.nodes.conversionToggler, 'click', () => {
|
||||
this.Editor.ConversionToolbar.toggle((conversionToolbarOpened) => {
|
||||
/**
|
||||
* When ConversionToolbar is opening on activated InlineToolbar flipper
|
||||
|
@ -594,7 +594,6 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
|
|||
*/
|
||||
private addTool(toolName: string, tool: InlineTool): void {
|
||||
const {
|
||||
Listeners,
|
||||
Tools,
|
||||
Tooltip,
|
||||
} = this.Editor;
|
||||
|
@ -617,7 +616,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
|
|||
this.nodes.actions.appendChild(actions);
|
||||
}
|
||||
|
||||
Listeners.on(button, 'click', (event) => {
|
||||
this.listeners.on(button, 'click', (event) => {
|
||||
this.toolClicked(tool);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
|
|
@ -225,7 +225,7 @@ export default class Toolbox extends Module<ToolboxNodes> {
|
|||
/**
|
||||
* Add click listener
|
||||
*/
|
||||
this.Editor.Listeners.on(button, 'click', (event: KeyboardEvent|MouseEvent) => {
|
||||
this.listeners.on(button, 'click', (event: KeyboardEvent|MouseEvent) => {
|
||||
this.toolButtonActivate(event, toolName);
|
||||
});
|
||||
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import Module from '../__module';
|
||||
import * as _ from '../utils';
|
||||
|
||||
/**
|
||||
|
@ -36,11 +35,9 @@ export interface ListenerData {
|
|||
}
|
||||
|
||||
/**
|
||||
* Editor.js Listeners module
|
||||
* Editor.js Listeners helper
|
||||
*
|
||||
* @module Listeners
|
||||
*
|
||||
* Module-decorator for event listeners assignment
|
||||
* Decorator for event listeners assignment
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 2.0.0
|
||||
|
@ -50,7 +47,7 @@ export interface ListenerData {
|
|||
* @typedef {Listeners} Listeners
|
||||
* @property {ListenerData[]} allListeners - listeners store
|
||||
*/
|
||||
export default class Listeners extends Module {
|
||||
export default class Listeners {
|
||||
/**
|
||||
* Stores all listeners data to find/remove/process it
|
||||
*
|
||||
|
@ -114,7 +111,7 @@ export default class Listeners extends Module {
|
|||
existingListeners.forEach((listener, i) => {
|
||||
const index = this.allListeners.indexOf(existingListeners[i]);
|
||||
|
||||
if (index > 0) {
|
||||
if (index > -1) {
|
||||
this.allListeners.splice(index, 1);
|
||||
|
||||
listener.element.removeEventListener(listener.eventType, listener.handler, listener.options);
|
2
src/types-internal/editor-modules.d.ts
vendored
2
src/types-internal/editor-modules.d.ts
vendored
|
@ -1,6 +1,5 @@
|
|||
import UI from '../components/modules/ui';
|
||||
import BlockEvents from '../components/modules/blockEvents';
|
||||
import Listeners from '../components/modules/listeners';
|
||||
import Toolbar from '../components/modules/toolbar/index';
|
||||
import InlineToolbar from '../components/modules/toolbar/inline';
|
||||
import Toolbox from '../components/modules/toolbar/toolbox';
|
||||
|
@ -44,7 +43,6 @@ export interface EditorModules {
|
|||
BlockEvents: BlockEvents;
|
||||
BlockSelection: BlockSelection;
|
||||
RectangleSelection: RectangleSelection;
|
||||
Listeners: Listeners;
|
||||
Toolbar: Toolbar;
|
||||
InlineToolbar: InlineToolbar;
|
||||
Toolbox: Toolbox;
|
||||
|
|
Loading…
Reference in a new issue