slate-angular 1.7.1 → 1.8.0

package/bundles/slate-angular.umd.js

@@ -550,6 +550,34 @@
         }
         return text;
     };
+    /**
+     * Get x-slate-fragment attribute from data-slate-fragment
+     */
+    var catchSlateFragment = /data-slate-fragment="(.+?)"/m;
+    var getSlateFragmentAttribute = function (dataTransfer) {
+        var htmlData = dataTransfer.getData('text/html');
+        var _a = __read(htmlData.match(catchSlateFragment) || [], 2), fragment = _a[1];
+        return fragment;
+    };
+    /**
+     * Get the x-slate-fragment attribute that exist in text/html data
+     * and append it to the DataTransfer object
+     */
+    var getClipboardData = function (dataTransfer, clipboardFormatKey) {
+        if (clipboardFormatKey === void 0) { clipboardFormatKey = 'x-slate-fragment'; }
+        if (!dataTransfer.getData("application/" + clipboardFormatKey)) {
+            var fragment = getSlateFragmentAttribute(dataTransfer);
+            if (fragment) {
+                var clipboardData_1 = new DataTransfer();
+                dataTransfer.types.forEach(function (type) {
+                    clipboardData_1.setData(type, dataTransfer.getData(type));
+                });
+                clipboardData_1.setData("application/" + clipboardFormatKey, fragment);
+                return clipboardData_1;
+            }
+        }
+        return dataTransfer;
+    };
 
     /**
      * An auto-incrementing identifier for keys.
@@ -571,6 +599,7 @@
         /iPad|iPhone|iPod/.test(navigator.userAgent) &&
         !window.MSStream;
     var IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+    var IS_ANDROID = typeof navigator !== 'undefined' && /Android/.test(navigator.userAgent);
     var IS_FIREFOX = typeof navigator !== 'undefined' &&
         /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
     var IS_SAFARI = typeof navigator !== 'undefined' &&
@@ -582,6 +611,24 @@
     // Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
     var IS_CHROME_LEGACY = typeof navigator !== 'undefined' &&
         /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
+    // Firefox did not support `beforeInput` until `v87`.
+    var IS_FIREFOX_LEGACY = typeof navigator !== 'undefined' &&
+        /^(?!.*Seamonkey)(?=.*Firefox\/(?:[0-7][0-9]|[0-8][0-6])).*/i.test(navigator.userAgent);
+    // qq browser
+    var IS_QQBROWSER = typeof navigator !== 'undefined' && /.*QQBrowser/.test(navigator.userAgent);
+    // UC mobile browser
+    var IS_UC_MOBILE = typeof navigator !== 'undefined' && /.*UCBrowser/.test(navigator.userAgent);
+    // Wechat browser
+    var IS_WECHATBROWSER = typeof navigator !== 'undefined' && /.*Wechat/.test(navigator.userAgent);
+    // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
+    // Chrome Legacy doesn't support `beforeinput` correctly
+    var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
+        !IS_EDGE_LEGACY &&
+        // globalThis is undefined in older browsers
+        typeof globalThis !== 'undefined' &&
+        globalThis.InputEvent &&
+        // @ts-ignore The `getTargetRanges` property isn't recognized.
+        typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
 
     var FAKE_LEFT_BLOCK_CARD_OFFSET = -1;
     var FAKE_RIGHT_BLOCK_CARD_OFFSET = -2;
@@ -664,27 +711,16 @@
             throw new Error("Unable to find the path for Slate node: " + JSON.stringify(node));
         },
         /**
-       * Find the DOM node that implements DocumentOrShadowRoot for the editor.
-       */
+         * Find the DOM node that implements DocumentOrShadowRoot for the editor.
+         */
         findDocumentOrShadowRoot: function (editor) {
             var el = AngularEditor.toDOMNode(editor, editor);
             var root = el.getRootNode();
-            // The below exception will always be thrown for iframes because the document inside an iframe
-            // does not inherit it's prototype from the parent document, therefore we return early
-            if (el.ownerDocument !== document) {
-                return el.ownerDocument;
-            }
-            if (!(root instanceof Document || root instanceof ShadowRoot)) {
-                throw new Error("Unable to find DocumentOrShadowRoot for editor element: " + el);
-            }
-            // COMPAT: Only Chrome implements the DocumentOrShadowRoot mixin for
-            // ShadowRoot; other browsers still implement it on the Document
-            // interface. (2020/08/08)
-            // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#Properties
-            if (root.getSelection === undefined && el.ownerDocument !== null) {
-                return el.ownerDocument;
-            }
-            return root;
+            if ((root instanceof Document || root instanceof ShadowRoot) &&
+                root.getSelection != null) {
+                return root;
+            }
+            return el.ownerDocument;
         },
         /**
          * Check if the editor is focused.
@@ -782,6 +818,18 @@
         insertData: function (editor, data) {
             editor.insertData(data);
         },
+        /**
+       * Insert fragment data from a `DataTransfer` into the editor.
+       */
+        insertFragmentData: function (editor, data) {
+            return editor.insertFragmentData(data);
+        },
+        /**
+         * Insert text data from a `DataTransfer` into the editor.
+         */
+        insertTextData: function (editor, data) {
+            return editor.insertTextData(data);
+        },
         /**
          * onKeydown hook.
          */
@@ -797,8 +845,8 @@
         /**
          * Sets data from the currently selected fragment on a `DataTransfer`.
          */
-        setFragmentData: function (editor, data) {
-            editor.setFragmentData(data);
+        setFragmentData: function (editor, data, originEvent) {
+            editor.setFragmentData(data, originEvent);
         },
         deleteCutData: function (editor) {
             editor.deleteCutData();
@@ -1063,7 +1111,9 @@
                 // composition the ASCII characters will be prepended to the zero-width
                 // space, so subtract 1 from the offset to account for the zero-width
                 // space character.
-                if (domNode_1 && offset === domNode_1.textContent.length && parentNode && parentNode.hasAttribute('data-slate-zero-width')) {
+                if (domNode_1 &&
+                    offset === domNode_1.textContent.length &&
+                    (parentNode && parentNode.hasAttribute('data-slate-zero-width'))) {
                     offset--;
                 }
             }
@@ -1519,7 +1569,7 @@
             // in the HTML, and can be used for intra-Slate pasting. If it's a text
             // node, wrap it in a `<span>` so we have something to set an attribute on.
             if (isDOMText(attach)) {
-                var span = document.createElement('span');
+                var span = attach.ownerDocument.createElement('span');
                 // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
                 // then leading and trailing spaces will be ignored. (2017/09/21)
                 span.style.whiteSpace = 'pre';
@@ -1533,13 +1583,14 @@
             attach.setAttribute('data-slate-fragment', encoded);
             data.setData("application/" + clipboardFormatKey, encoded);
             // Add the content to a <div> so that we can get its inner HTML.
-            var div = document.createElement('div');
+            var div = contents.ownerDocument.createElement('div');
             div.appendChild(contents);
             div.setAttribute('hidden', 'true');
-            document.body.appendChild(div);
+            contents.ownerDocument.body.appendChild(div);
             data.setData('text/html', div.innerHTML);
             data.setData('text/plain', getPlainText(div));
-            document.body.removeChild(div);
+            contents.ownerDocument.body.removeChild(div);
+            return data;
         };
         e.deleteCutData = function () {
             var selection = editor.selection;
@@ -1556,14 +1607,26 @@
             }
         };
         e.insertData = function (data) {
-            var e_5, _a;
-            var fragment = data.getData("application/" + clipboardFormatKey);
+            if (!e.insertFragmentData(data)) {
+                e.insertTextData(data);
+            }
+        };
+        e.insertFragmentData = function (data) {
+            /**
+             * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
+             */
+            var fragment = data.getData("application/" + clipboardFormatKey) ||
+                getSlateFragmentAttribute(data);
             if (fragment) {
                 var decoded = decodeURIComponent(window.atob(fragment));
                 var parsed = JSON.parse(decoded);
                 e.insertFragment(parsed);
-                return;
+                return true;
             }
+            return false;
+        };
+        e.insertTextData = function (data) {
+            var e_5, _a;
             var text = data.getData('text/plain');
             if (text) {
                 var lines = text.split(/\r\n|\r|\n/);
@@ -1585,7 +1648,9 @@
                     }
                     finally { if (e_5) throw e_5.error; }
                 }
+                return true;
             }
+            return false;
         };
         e.onKeydown = function () { };
         e.onClick = function () { };
@@ -2177,6 +2242,31 @@
             }
             this.cdr.markForCheck();
         };
+        BaseLeafComponent.prototype.renderPlaceholder = function () {
+            // issue-1: IME input was interrupted
+            // issue-2: IME input focus jumping
+            // Issue occurs when the span node of the placeholder is before the slateString span node
+            if (this.context.leaf['placeholder']) {
+                if (!this.placeholderElement) {
+                    this.placeholderElement = document.createElement('span');
+                    this.placeholderElement.innerText = this.context.leaf['placeholder'];
+                    this.placeholderElement.contentEditable = 'false';
+                    this.placeholderElement.setAttribute('data-slate-placeholder', 'true');
+                    this.nativeElement.classList.add('leaf-with-placeholder');
+                    this.nativeElement.appendChild(this.placeholderElement);
+                }
+            }
+            else {
+                this.destroyPlaceholder();
+            }
+        };
+        BaseLeafComponent.prototype.destroyPlaceholder = function () {
+            if (this.placeholderElement) {
+                this.placeholderElement.remove();
+                this.placeholderElement = null;
+                this.nativeElement.classList.remove('leaf-with-placeholder');
+            }
+        };
         return BaseLeafComponent;
     }(BaseComponent));
     BaseLeafComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: BaseLeafComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
@@ -2503,15 +2593,23 @@
         function SlateDefaultLeafComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        SlateDefaultLeafComponent.prototype.onContextChange = function () {
+            _super.prototype.onContextChange.call(this);
+            this.renderPlaceholder();
+        };
+        SlateDefaultLeafComponent.prototype.ngOnDestroy = function () {
+            // Because the placeholder span is not in the current component, it is destroyed along with the current component
+            this.destroyPlaceholder();
+        };
         return SlateDefaultLeafComponent;
     }(BaseLeafComponent));
     SlateDefaultLeafComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateDefaultLeafComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    SlateDefaultLeafComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"context.leaf['placeholder']\">\n            <span contenteditable=\"false\" data-slate-placeholder=\"true\" slate-placeholder=\"true\">{{context.leaf['placeholder']}}</span>\n        </ng-container>\n        <span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>", isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SlateDefaultLeafComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SlateDefaultLeafComponent, selector: "span[slateDefaultLeaf]", host: { attributes: { "data-slate-leaf": "true" } }, usesInheritance: true, ngImport: i0__namespace, template: "<span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>", isInline: true, components: [{ type: SlateStringComponent, selector: "span[slateString]", inputs: ["context"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SlateDefaultLeafComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[slateDefaultLeaf]',
-                        template: "\n        <ng-container *ngIf=\"context.leaf['placeholder']\">\n            <span contenteditable=\"false\" data-slate-placeholder=\"true\" slate-placeholder=\"true\">{{context.leaf['placeholder']}}</span>\n        </ng-container>\n        <span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>",
+                        template: "<span slateString [context]=\"context\" [viewContext]=\"viewContext\"><span>",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         host: {
                             'data-slate-leaf': 'true'
@@ -2927,13 +3025,6 @@
                 }] } });
 
     var timeDebug = Debug__default["default"]('slate-angular-time');
-    // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
-    // Chrome Legacy doesn't support `beforeinput` correctly
-    var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
-        !IS_EDGE_LEGACY &&
-        globalThis.InputEvent &&
-        // @ts-ignore The `getTargetRanges` property isn't recognized.
-        typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
     // not correctly clipboardData on beforeinput
     var forceOnDOMPaste = IS_SAFARI;
     var SlateEditableComponent = /** @class */ (function () {
@@ -2993,6 +3084,9 @@
             this.initializeContext();
             // remove unused DOM, just keep templateComponent instance
             this.templateElementRef.nativeElement.remove();
+            // add browser class
+            var browserClass = IS_FIREFOX ? 'firefox' : (IS_SAFARI ? 'safari' : '');
+            browserClass && this.elementRef.nativeElement.classList.add(browserClass);
         };
         SlateEditableComponent.prototype.ngOnChanges = function (simpleChanges) {
             if (!this.initialized) {
@@ -3371,7 +3465,10 @@
                         case 'insertFromYank':
                         case 'insertReplacementText':
                         case 'insertText': {
-                            if (data instanceof DataTransfer) {
+                            // use a weak comparison instead of 'instanceof' to allow
+                            // programmatic access of paste events coming from external windows
+                            // like cypress where cy.window does not work realibly
+                            if ((data === null || data === void 0 ? void 0 : data.constructor.name) === 'DataTransfer') {
                                 AngularEditor.insertData(editor, data);
                             }
                             else if (typeof data === 'string') {
@@ -3483,13 +3580,13 @@
             var isOutsideSlate = !hasStringTarget(window.getSelection()) && isTargetInsideVoid(this.editor, event.target);
             if (!isOutsideSlate && hasTarget(this.editor, event.target) && !this.readonly && !this.isDOMEventHandled(event, this.copy)) {
                 event.preventDefault();
-                AngularEditor.setFragmentData(this.editor, event.clipboardData);
+                AngularEditor.setFragmentData(this.editor, event.clipboardData, 'copy');
             }
         };
         SlateEditableComponent.prototype.onDOMCut = function (event) {
             if (!this.readonly && hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.cut)) {
                 event.preventDefault();
-                AngularEditor.setFragmentData(this.editor, event.clipboardData);
+                AngularEditor.setFragmentData(this.editor, event.clipboardData, 'cut');
                 var selection = this.editor.selection;
                 if (selection) {
                     AngularEditor.deleteCutData(this.editor);
@@ -3508,7 +3605,7 @@
             }
         };
         SlateEditableComponent.prototype.onDOMDragStart = function (event) {
-            if (hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragStart)) {
+            if (!this.readonly && hasTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.dragStart)) {
                 var node = AngularEditor.toSlateNode(this.editor, event.target);
                 var path = AngularEditor.findPath(this.editor, node);
                 var voidMatch = slate.Editor.isVoid(this.editor, node) ||
@@ -3520,7 +3617,7 @@
                     slate.Transforms.select(this.editor, range);
                 }
                 this.isDraggingInternally = true;
-                AngularEditor.setFragmentData(this.editor, event.dataTransfer);
+                AngularEditor.setFragmentData(this.editor, event.dataTransfer, 'drag');
             }
         };
         SlateEditableComponent.prototype.onDOMDrop = function (event) {
@@ -4097,6 +4194,8 @@
     exports.ELEMENT_TO_NODE = ELEMENT_TO_NODE;
     exports.FAKE_LEFT_BLOCK_CARD_OFFSET = FAKE_LEFT_BLOCK_CARD_OFFSET;
     exports.FAKE_RIGHT_BLOCK_CARD_OFFSET = FAKE_RIGHT_BLOCK_CARD_OFFSET;
+    exports.HAS_BEFORE_INPUT_SUPPORT = HAS_BEFORE_INPUT_SUPPORT;
+    exports.IS_ANDROID = IS_ANDROID;
     exports.IS_APPLE = IS_APPLE;
     exports.IS_CHROME = IS_CHROME;
     exports.IS_CHROME_LEGACY = IS_CHROME_LEGACY;
@@ -4104,10 +4203,14 @@
     exports.IS_DRAGGING = IS_DRAGGING;
     exports.IS_EDGE_LEGACY = IS_EDGE_LEGACY;
     exports.IS_FIREFOX = IS_FIREFOX;
+    exports.IS_FIREFOX_LEGACY = IS_FIREFOX_LEGACY;
     exports.IS_FOCUSED = IS_FOCUSED;
     exports.IS_IOS = IS_IOS;
+    exports.IS_QQBROWSER = IS_QQBROWSER;
     exports.IS_READONLY = IS_READONLY;
     exports.IS_SAFARI = IS_SAFARI;
+    exports.IS_UC_MOBILE = IS_UC_MOBILE;
+    exports.IS_WECHATBROWSER = IS_WECHATBROWSER;
     exports.KEY_TO_ELEMENT = KEY_TO_ELEMENT;
     exports.Key = Key;
     exports.NODE_TO_ELEMENT = NODE_TO_ELEMENT;
@@ -4123,10 +4226,12 @@
     exports.SlateStringComponent = SlateStringComponent;
     exports.check = check;
     exports.getCardTargetAttribute = getCardTargetAttribute;
+    exports.getClipboardData = getClipboardData;
     exports.getDefaultView = getDefaultView;
     exports.getEditableChild = getEditableChild;
     exports.getEditableChildAndIndex = getEditableChildAndIndex;
     exports.getPlainText = getPlainText;
+    exports.getSlateFragmentAttribute = getSlateFragmentAttribute;
     exports.hasBeforeContextChange = hasBeforeContextChange;
     exports.hasBlockCard = hasBlockCard;
     exports.hasBlockCardWithNode = hasBlockCardWithNode;