roosterjs 9.49.0 → 9.50.0

package/dist/rooster.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 9.49.0)
+// Type definitions for roosterjs (Version 9.50.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -6260,6 +6260,12 @@ interface BeforeCutCopyEvent extends BasePluginDomEvent<'beforeCutCopy', Clipboa
  * Provides a chance for plugin to change the content before it is pasted into editor.
  */
 interface BeforeDisposeEvent extends BasePluginEvent<'beforeDispose'> {
+}
+
+    /**
+ * Data of BeforeDropEvent
+ */
+interface BeforeDropEvent extends BasePluginDomEvent<'beforeDrop', DragEvent> {
 }
 
     /**
@@ -6616,7 +6622,7 @@ interface DoubleClickEvent extends BasePluginDomEvent<'doubleClick', MouseEvent>
     /**
  * Editor plugin event interface
  */
-type PluginEvent = BeforeAddUndoSnapshotEvent | BeforeCutCopyEvent | BeforeDisposeEvent | BeforeKeyboardEditingEvent | BeforeLogicalRootChangeEvent | BeforePasteEvent | BeforeSetContentEvent | CompositionEndEvent | ContentChangedEvent | ContextMenuEvent | RewriteFromModelEvent | EditImageEvent | EditorReadyEvent | EnterShadowEditEvent | EntityOperationEvent | ExtractContentWithDomEvent | EditorInputEvent | KeyDownEvent | KeyPressEvent | KeyUpEvent | LeaveShadowEditEvent | LogicalRootChangedEvent | MouseDownEvent | MouseUpEvent | ScrollEvent | SelectionChangedEvent | ZoomChangedEvent | PointerDownEvent | PointerUpEvent | DoubleClickEvent | FindResultChangedEvent;
+type PluginEvent = BeforeAddUndoSnapshotEvent | BeforeCutCopyEvent | BeforeDisposeEvent | BeforeDropEvent | BeforeKeyboardEditingEvent | BeforeLogicalRootChangeEvent | BeforePasteEvent | BeforeSetContentEvent | CompositionEndEvent | ContentChangedEvent | ContextMenuEvent | RewriteFromModelEvent | EditImageEvent | EditorReadyEvent | EnterShadowEditEvent | EntityOperationEvent | ExtractContentWithDomEvent | EditorInputEvent | KeyDownEvent | KeyPressEvent | KeyUpEvent | LeaveShadowEditEvent | LogicalRootChangedEvent | MouseDownEvent | MouseUpEvent | ScrollEvent | SelectionChangedEvent | ZoomChangedEvent | PointerDownEvent | PointerUpEvent | DoubleClickEvent | FindResultChangedEvent;
 
     /**
  * A type to extract data part of a plugin event type. Data part is the plugin event without eventType field.
@@ -6777,7 +6783,11 @@ type PluginEventType = /**
 /**
  * Find result changed event
  */
- | 'findResultChanged';
+ | 'findResultChanged'
+/**
+ * Let plugin know when a content will be dropped
+ */
+ | 'beforeDrop';
 
     /**
  * This interface represents a PluginEvent wrapping native scroll event
@@ -10804,6 +10814,56 @@ class AnnouncePlugin implements EditorPlugin  {
     onPluginEvent(event: PluginEvent): void;
 }
 
+    /**
+ * DragAndDrop plugin, handles ContentChanged event when change source is "Drop"
+ * to sanitize dropped content, similar to how PastePlugin sanitizes pasted content.
+ */
+class DragAndDropPlugin implements EditorPlugin  {
+    private editor;
+    private forbiddenElements;
+    private isInternalDragging;
+    private disposer;
+    /**
+     * Construct a new instance of DragAndDropPlugin
+     */
+    constructor(options?: DragAndDropOptions);
+    /**
+     * Get name of this plugin
+     */
+    getName(): string;
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(editor: IEditor): void;
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose(): void;
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    onPluginEvent(event: PluginEvent): void;
+}
+
+    /**
+ * Options for DragAndDrop plugin
+ */
+interface DragAndDropOptions {
+    /**
+     * Forbidden elements that cannot be dropped in the editor
+     * @default ['iframe']
+     */
+    forbiddenElements?: string[];
+}
+
     /**
  * Get dark mode color for a given color
  * @param color The color to calculate from

package/dist/rooster.js

@@ -12998,17 +12998,24 @@ var DOMEventPlugin = /** @class */ (function () {
                 dragEvent.preventDefault();
             }
         };
-        this.onDrop = function () {
-            var _a, _b;
-            var doc = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getDocument();
-            (_b = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _b === void 0 ? void 0 : _b.requestAnimationFrame(function () {
-                if (_this.editor) {
-                    _this.editor.takeSnapshot();
-                    _this.editor.triggerEvent('contentChanged', {
-                        source: roosterjs_content_model_dom_1.ChangeSource.Drop,
+        this.onDrop = function (e) {
+            var _a;
+            if (_this.editor) {
+                var beforeDropEvent = _this.editor.triggerEvent('beforeDrop', {
+                    rawEvent: e,
+                });
+                if (!(beforeDropEvent === null || beforeDropEvent === void 0 ? void 0 : beforeDropEvent.rawEvent.defaultPrevented)) {
+                    var doc = _this.editor.getDocument();
+                    (_a = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                        if (_this.editor) {
+                            _this.editor.takeSnapshot();
+                            _this.editor.triggerEvent('contentChanged', {
+                                source: roosterjs_content_model_dom_1.ChangeSource.Drop,
+                            });
+                        }
                     });
                 }
-            });
+            }
         };
         this.onScroll = function (e) {
             var _a;
@@ -13144,7 +13151,7 @@ var DOMEventPlugin = /** @class */ (function () {
             compositionend: { beforeDispatch: this.onCompositionEnd },
             // 4. Drag and Drop event
             dragstart: { beforeDispatch: this.onDragStart },
-            drop: { beforeDispatch: this.onDrop },
+            drop: { beforeDispatch: function (event) { return _this.onDrop(event); } },
             // 5. Pointer event
             pointerdown: { beforeDispatch: function (event) { return _this.onPointerDown(event); } },
         };
@@ -31533,16 +31540,43 @@ exports.isMarkdownTable = isMarkdownTable;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.splitParagraphSegments = void 0;
-var linkRegex = /(\[([^\[]+)\]\((https?:\/\/[^\)]+)\))|(\!\[([^\[]+)\]\((https?:\/\/[^\)]+)\))/g;
+// Matches markdown links and images in a string.
+// Group 1 (full link):  [text](url)       e.g. [Click here](https://example.com)
+//   Group 2: link text  e.g. "Click here"
+//   Group 3: link url   e.g. "https://example.com"
+// Group 4 (full image): ![alt](url)       e.g. ![Logo](https://example.com/logo.png)
+//   Group 5: alt text   e.g. "Logo"
+//   Group 6: image url  e.g. "https://example.com/logo.png"
+var linkRegex = /(\[([^\[]+)\]\(([^\)]+)\))|(\!\[([^\[]+)\]\(([^\)]+)\))/g;
 var isValidUrl = function (url) {
-    try {
-        new URL(url);
+    if (!url) {
+        return false;
+    }
+    // Accept common non-http schemes and relative paths
+    if (url.startsWith('data:') ||
+        url.startsWith('blob:') ||
+        url.startsWith('/') ||
+        url.startsWith('./') ||
+        url.startsWith('../')) {
         return true;
     }
+    try {
+        var parsed = new URL(url);
+        return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    }
     catch (_) {
         return false;
     }
 };
+function pushText(result, text) {
+    var last = result[result.length - 1];
+    if (last && last.type === 'text') {
+        last.text += text;
+    }
+    else {
+        result.push({ type: 'text', text: text, url: '' });
+    }
+}
 /**
  * @internal
  */
@@ -31552,22 +31586,28 @@ function splitParagraphSegments(text) {
     var match = null;
     while ((match = linkRegex.exec(text)) !== null) {
         if (match.index > lastIndex) {
-            result.push({ type: 'text', text: text.slice(lastIndex, match.index), url: '' });
+            pushText(result, text.slice(lastIndex, match.index));
         }
         if (match[2] && match[3]) {
-            result.push(isValidUrl(match[3])
-                ? { type: 'link', text: match[2], url: match[3] }
-                : { type: 'text', text: match[0], url: '' });
+            if (isValidUrl(match[3])) {
+                result.push({ type: 'link', text: match[2], url: match[3] });
+            }
+            else {
+                pushText(result, match[0]);
+            }
         }
         else if (match[5] && match[6]) {
-            result.push(isValidUrl(match[6])
-                ? { type: 'image', text: match[5], url: match[6] }
-                : { type: 'text', text: match[0], url: '' });
+            if (isValidUrl(match[6])) {
+                result.push({ type: 'image', text: match[5], url: match[6] });
+            }
+            else {
+                pushText(result, match[0]);
+            }
         }
         lastIndex = linkRegex.lastIndex;
     }
     if (lastIndex < text.length) {
-        result.push({ type: 'text', text: text.slice(lastIndex), url: '' });
+        pushText(result, text.slice(lastIndex));
     }
     return result;
 }
@@ -33392,6 +33432,192 @@ var CustomReplacePlugin = /** @class */ (function () {
 exports.CustomReplacePlugin = CustomReplacePlugin;
 
 
+/***/ },
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/dragAndDrop/DragAndDropPlugin.ts"
+/*!***************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/dragAndDrop/DragAndDropPlugin.ts ***!
+  \***************************************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.DragAndDropPlugin = void 0;
+var handleDroppedContent_1 = __webpack_require__(/*! ./utils/handleDroppedContent */ "./packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/handleDroppedContent.ts");
+var DefaultOptions = {
+    forbiddenElements: ['iframe'],
+};
+/**
+ * DragAndDrop plugin, handles ContentChanged event when change source is "Drop"
+ * to sanitize dropped content, similar to how PastePlugin sanitizes pasted content.
+ */
+var DragAndDropPlugin = /** @class */ (function () {
+    /**
+     * Construct a new instance of DragAndDropPlugin
+     */
+    function DragAndDropPlugin(options) {
+        if (options === void 0) { options = DefaultOptions; }
+        var _a;
+        this.editor = null;
+        this.forbiddenElements = [];
+        this.isInternalDragging = false;
+        this.disposer = null;
+        this.forbiddenElements = (_a = options.forbiddenElements) !== null && _a !== void 0 ? _a : [];
+    }
+    /**
+     * Get name of this plugin
+     */
+    DragAndDropPlugin.prototype.getName = function () {
+        return 'DragAndDrop';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    DragAndDropPlugin.prototype.initialize = function (editor) {
+        var _this = this;
+        this.editor = editor;
+        this.disposer = editor.attachDomEvent({
+            dragstart: {
+                beforeDispatch: function (_ev) {
+                    _this.isInternalDragging = true;
+                },
+            },
+        });
+    };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    DragAndDropPlugin.prototype.dispose = function () {
+        this.editor = null;
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+        this.isInternalDragging = false;
+        this.forbiddenElements = [];
+    };
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    DragAndDropPlugin.prototype.onPluginEvent = function (event) {
+        var _a;
+        if (this.editor && event.eventType == 'beforeDrop') {
+            if (this.isInternalDragging) {
+                this.isInternalDragging = false;
+            }
+            else {
+                var dropEvent = event.rawEvent;
+                var html = (_a = dropEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/html');
+                if (html) {
+                    (0, handleDroppedContent_1.handleDroppedContent)(this.editor, dropEvent, html, this.forbiddenElements);
+                }
+            }
+            return;
+        }
+    };
+    return DragAndDropPlugin;
+}());
+exports.DragAndDropPlugin = DragAndDropPlugin;
+
+
+/***/ },
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/cleanForbiddenElements.ts"
+/*!**************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/cleanForbiddenElements.ts ***!
+  \**************************************************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.cleanForbiddenElements = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+/**
+ * @internal
+ * Remove all forbidden elements from a parsed HTML document
+ * @param doc The parsed HTML document to clean
+ * @param forbiddenElements Array of tag names to remove (e.g., ['iframe', 'script'])
+ */
+function cleanForbiddenElements(doc, forbiddenElements) {
+    var e_1, _a;
+    var _b;
+    if (forbiddenElements.length === 0) {
+        return;
+    }
+    var selector = forbiddenElements.join(',');
+    var elements = Array.from(doc.body.querySelectorAll(selector));
+    try {
+        for (var elements_1 = (0, tslib_1.__values)(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
+            var element = elements_1_1.value;
+            (_b = element.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(element);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (elements_1_1 && !elements_1_1.done && (_a = elements_1.return)) _a.call(elements_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+exports.cleanForbiddenElements = cleanForbiddenElements;
+
+
+/***/ },
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/handleDroppedContent.ts"
+/*!************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/handleDroppedContent.ts ***!
+  \************************************************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.handleDroppedContent = void 0;
+var cleanForbiddenElements_1 = __webpack_require__(/*! ./cleanForbiddenElements */ "./packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/cleanForbiddenElements.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ * Handle dropped HTML content by inserting it at the drop position
+ */
+function handleDroppedContent(editor, event, html, forbiddenElements) {
+    var doc = editor.getDocument();
+    var domPosition = (0, roosterjs_content_model_dom_1.getNodePositionFromEvent)(doc, editor.getDOMHelper(), event.x, event.y);
+    if (domPosition) {
+        event.preventDefault();
+        event.stopPropagation();
+        var range = doc.createRange();
+        range.setStart(domPosition.node, domPosition.offset);
+        range.collapse(true);
+        var parsedHtml = editor.getDOMCreator().htmlToDOM(html);
+        (0, cleanForbiddenElements_1.cleanForbiddenElements)(parsedHtml, forbiddenElements);
+        var droppedModel_1 = (0, roosterjs_content_model_dom_1.domToContentModel)(parsedHtml.body, (0, roosterjs_content_model_dom_1.createDomToModelContext)());
+        editor.formatContentModel(function (model, context) {
+            (0, roosterjs_content_model_dom_1.mergeModel)(model, droppedModel_1, context);
+            return true;
+        }, {
+            selectionOverride: {
+                type: 'range',
+                range: range,
+                isReverted: false,
+            },
+        });
+    }
+}
+exports.handleDroppedContent = handleDroppedContent;
+
+
 /***/ },
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts"
@@ -38396,7 +38622,7 @@ exports.updateWrapper = updateWrapper;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.AnnouncePlugin = exports.moveHighlight = exports.replace = exports.find = exports.createFindReplaceContext = exports.FindReplacePlugin = exports.TouchPlugin = exports.HiddenPropertyPlugin = exports.ImageEditPlugin = exports.CustomReplacePlugin = exports.PickerPlugin = exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.isModelEmptyFast = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedoAlt = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.DefaultSanitizers = exports.PastePlugin = exports.TableEditPlugin = void 0;
+exports.DragAndDropPlugin = exports.AnnouncePlugin = exports.moveHighlight = exports.replace = exports.find = exports.createFindReplaceContext = exports.FindReplacePlugin = exports.TouchPlugin = exports.HiddenPropertyPlugin = exports.ImageEditPlugin = exports.CustomReplacePlugin = exports.PickerPlugin = exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.isModelEmptyFast = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedoAlt = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.DefaultSanitizers = exports.PastePlugin = exports.TableEditPlugin = void 0;
 var TableEditPlugin_1 = __webpack_require__(/*! ./tableEdit/TableEditPlugin */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/TableEditPlugin.ts");
 Object.defineProperty(exports, "TableEditPlugin", ({ enumerable: true, get: function () { return TableEditPlugin_1.TableEditPlugin; } }));
 var PastePlugin_1 = __webpack_require__(/*! ./paste/PastePlugin */ "./packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts");
@@ -38457,6 +38683,8 @@ var moveHighlight_1 = __webpack_require__(/*! ./findReplace/moveHighlight */ "./
 Object.defineProperty(exports, "moveHighlight", ({ enumerable: true, get: function () { return moveHighlight_1.moveHighlight; } }));
 var AnnouncePlugin_1 = __webpack_require__(/*! ./announce/AnnouncePlugin */ "./packages/roosterjs-content-model-plugins/lib/announce/AnnouncePlugin.ts");
 Object.defineProperty(exports, "AnnouncePlugin", ({ enumerable: true, get: function () { return AnnouncePlugin_1.AnnouncePlugin; } }));
+var DragAndDropPlugin_1 = __webpack_require__(/*! ./dragAndDrop/DragAndDropPlugin */ "./packages/roosterjs-content-model-plugins/lib/dragAndDrop/DragAndDropPlugin.ts");
+Object.defineProperty(exports, "DragAndDropPlugin", ({ enumerable: true, get: function () { return DragAndDropPlugin_1.DragAndDropPlugin; } }));
 
 
 /***/ },