communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
96 lines • 3.44 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { PluginEventType } from '../../utils/RichTextEditorUtils';
import { ChangeSource } from 'roosterjs-content-model-dom';
/**
* An update mode to indicate when the content update happens
*/
export var UpdateEvent;
(function (UpdateEvent) {
UpdateEvent["Init"] = "Init";
UpdateEvent["Dispose"] = "Dispose";
UpdateEvent["ContentChanged"] = "ContentChanged";
UpdateEvent["UserInput"] = "UserInput";
UpdateEvent["Blur"] = "Blur";
})(UpdateEvent || (UpdateEvent = {}));
var Keys;
(function (Keys) {
Keys[Keys["BACKSPACE"] = 8] = "BACKSPACE";
Keys[Keys["DELETE"] = 46] = "DELETE";
})(Keys || (Keys = {}));
/**
* A plugin to handle content update
*/
export class UpdateContentPlugin {
constructor() {
this.editor = null;
this.disposer = null;
// don't set callback in constructor to be able to update callback without plugin recreation
this.onUpdate = null;
this.onCompositionUpdate = () => {
if (this.onUpdate === null) {
return;
}
this.onUpdate(UpdateEvent.ContentChanged);
};
this.onBlur = () => {
if (this.onUpdate === null) {
return;
}
this.onUpdate(UpdateEvent.Blur);
};
}
getName() {
return 'UpdateContentPlugin';
}
/**
* Initialize this plugin
* @param editor The editor instance
*/
initialize(editor) {
this.editor = editor;
this.disposer = this.editor.attachDomEvent({
blur: { beforeDispatch: this.onBlur },
compositionupdate: { beforeDispatch: this.onCompositionUpdate }
});
}
dispose() {
this.editor = null;
if (this.disposer) {
this.disposer();
this.disposer = null;
}
}
onPluginEvent(event) {
if (this.onUpdate === null) {
return;
}
switch (event.eventType) {
case PluginEventType.EditorReady:
this.onUpdate(UpdateEvent.Init);
break;
case PluginEventType.BeforeDispose:
this.onUpdate(UpdateEvent.Dispose);
break;
case PluginEventType.CompositionEnd:
this.onUpdate(UpdateEvent.ContentChanged);
break;
case PluginEventType.ContentChanged:
if (event.source === ChangeSource.Cut ||
// We need to add the paste source here for an edge case:
// when user select an image that's already in the editor, then paste in an image to replace the selected one,
// we will only get a paste event.
// In this case, we need to update the removedInlineImage array to include the replaced image.
event.source === ChangeSource.Paste ||
(event.source === ChangeSource.Keyboard && (event.data === Keys.BACKSPACE || event.data === Keys.DELETE))) {
this.onUpdate(UpdateEvent.ContentChanged, true);
}
this.onUpdate(UpdateEvent.ContentChanged);
break;
case PluginEventType.Input:
this.onUpdate(UpdateEvent.UserInput);
break;
}
}
}
//# sourceMappingURL=UpdateContentPlugin.js.map