communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
112 lines • 6.21 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
/* @conditional-compile-remove(rich-text-editor) */
import { scrollToBottomRichTextEditor } from '../../utils/RichTextEditorUtils';
import { ContentChangedEventSource, PluginEventType } from '../../utils/RichTextEditorUtils';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { getInlineImageAttributes } from '../../utils/RichTextEditorUtils';
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { _base64ToBlob, removeImageTags, _IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY } from "../../../../../acs-ui-common/src";
/* @conditional-compile-remove(rich-text-editor-image-upload) */
import { v1 as generateGUID } from 'uuid';
/**
* CopyPastePlugin is a plugin for handling copy and paste events in the editor.
*/
export default class CopyPastePlugin {
constructor() {
this.editor = null;
/* @conditional-compile-remove(rich-text-editor-image-upload) */
this.imageBase64DataMap = {};
/* @conditional-compile-remove(rich-text-editor-image-upload) */
this.handleInlineImage = (event) => {
if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && this.onInsertInlineImage) {
event.fragment.querySelectorAll('img').forEach((image) => {
// Assign a unique id to the image element so Contosos can identify the image element.
// We also use it internally such as in getRemovedInlineImages to compare images in the content with previous images
image.id = generateGUID();
const clipboardImage = event.clipboardData.image;
const fileName = (clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.name) ||
(clipboardImage === null || clipboardImage === void 0 ? void 0 : clipboardImage.type.replace('/', '.')) ||
image.getAttribute(_IMAGE_ATTRIBUTE_INLINE_IMAGE_FILE_NAME_KEY) ||
'';
// If the image src is an external url, call the onInsertInlineImage callback with the url.
let imageUrl = image.src;
if (image.src.startsWith('data:image/')) {
this.imageBase64DataMap[image.id] = image.src;
const blobImage = _base64ToBlob(image.src);
imageUrl = URL.createObjectURL(blobImage);
}
image.src = imageUrl;
image.alt = image.alt || 'image';
image.dataset.imageFileName = fileName;
const imageAttributes = getInlineImageAttributes(image);
this.onInsertInlineImage && this.onInsertInlineImage(imageAttributes);
});
}
};
}
getName() {
return 'CopyPastePlugin';
}
initialize(editor) {
this.editor = editor;
}
dispose() { }
onPluginEvent(event) {
/* @conditional-compile-remove(rich-text-editor-image-upload) */
if (event.eventType === PluginEventType.BeforeCutCopy) {
event.clonedRoot.querySelectorAll('img').forEach((image) => __awaiter(this, void 0, void 0, function* () {
if (image.src.startsWith('blob:')) {
const base64Data = this.imageBase64DataMap[image.id];
image.src = base64Data || image.src;
}
}));
}
/* @conditional-compile-remove(rich-text-editor-image-upload) */
// If onInsertInlineImage is not provided, we should remove the image tags before calling the onPaste callback
if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal' && !this.onInsertInlineImage) {
removeImageTags({ content: event.fragment });
}
handleBeforePasteEvent(event, /* @conditional-compile-remove(rich-text-editor-image-upload) */ this.onPaste);
/* @conditional-compile-remove(rich-text-editor-image-upload) */
// We should handle the onInsertInlineImage after the onPaste callback in case Contosos want to modify the image tags, especially the src attribute.
if (this.onInsertInlineImage) {
this.handleInlineImage(event);
}
if (this.editor !== null && !this.editor.isDisposed()) {
// scroll the editor to the correct position after pasting content
scrollToBottomAfterContentPaste(event);
}
}
}
/**
* @internal
* Exported only for unit testing
*/
export const handleBeforePasteEvent = (event,
/* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste) => {
if (event.eventType === PluginEventType.BeforePaste && event.pasteType === 'normal') {
/* @conditional-compile-remove(rich-text-editor-image-upload) */
onPaste === null || onPaste === void 0 ? void 0 : onPaste({ content: event.fragment });
/* @conditional-compile-remove(rich-text-editor-image-upload) */
return;
}
};
/**
* Update the scroll position of the editor after pasting content to ensure the content is visible.
* @param event - The plugin event.
*/
export const scrollToBottomAfterContentPaste = (event) => {
if (event.eventType === PluginEventType.ContentChanged && event.source === ContentChangedEventSource.Paste) {
/* @conditional-compile-remove(rich-text-editor) */
scrollToBottomRichTextEditor();
}
};
//# sourceMappingURL=CopyPastePlugin.js.map