slate-angular 1.7.3 → 1.9.0

package/fesm2015/slate-angular.js

@@ -208,6 +208,33 @@ const getPlainText = (domNode) => {
     }
     return text;
 };
+/**
+ * Get x-slate-fragment attribute from data-slate-fragment
+ */
+const catchSlateFragment = /data-slate-fragment="(.+?)"/m;
+const getSlateFragmentAttribute = (dataTransfer) => {
+    const htmlData = dataTransfer.getData('text/html');
+    const [, fragment] = htmlData.match(catchSlateFragment) || [];
+    return fragment;
+};
+/**
+ * Get the x-slate-fragment attribute that exist in text/html data
+ * and append it to the DataTransfer object
+ */
+const getClipboardData = (dataTransfer, clipboardFormatKey = 'x-slate-fragment') => {
+    if (!dataTransfer.getData(`application/${clipboardFormatKey}`)) {
+        const fragment = getSlateFragmentAttribute(dataTransfer);
+        if (fragment) {
+            const clipboardData = new DataTransfer();
+            dataTransfer.types.forEach(type => {
+                clipboardData.setData(type, dataTransfer.getData(type));
+            });
+            clipboardData.setData(`application/${clipboardFormatKey}`, fragment);
+            return clipboardData;
+        }
+    }
+    return dataTransfer;
+};
 
 /**
  * An auto-incrementing identifier for keys.
@@ -228,6 +255,7 @@ const IS_IOS = typeof navigator !== 'undefined' &&
     /iPad|iPhone|iPod/.test(navigator.userAgent) &&
     !window.MSStream;
 const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+const IS_ANDROID = typeof navigator !== 'undefined' && /Android/.test(navigator.userAgent);
 const IS_FIREFOX = typeof navigator !== 'undefined' &&
     /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
 const IS_SAFARI = typeof navigator !== 'undefined' &&
@@ -239,6 +267,24 @@ const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.u
 // Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
 const 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`.
+const IS_FIREFOX_LEGACY = typeof navigator !== 'undefined' &&
+    /^(?!.*Seamonkey)(?=.*Firefox\/(?:[0-7][0-9]|[0-8][0-6])).*/i.test(navigator.userAgent);
+// qq browser
+const IS_QQBROWSER = typeof navigator !== 'undefined' && /.*QQBrowser/.test(navigator.userAgent);
+// UC mobile browser
+const IS_UC_MOBILE = typeof navigator !== 'undefined' && /.*UCBrowser/.test(navigator.userAgent);
+// Wechat browser
+const 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
+const 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';
 
 const FAKE_LEFT_BLOCK_CARD_OFFSET = -1;
 const FAKE_RIGHT_BLOCK_CARD_OFFSET = -2;
@@ -321,27 +367,16 @@ const AngularEditor = {
         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(editor) {
         const el = AngularEditor.toDOMNode(editor, editor);
         const 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.
@@ -438,6 +473,18 @@ const AngularEditor = {
     insertData(editor, data) {
         editor.insertData(data);
     },
+    /**
+   * Insert fragment data from a `DataTransfer` into the editor.
+   */
+    insertFragmentData(editor, data) {
+        return editor.insertFragmentData(data);
+    },
+    /**
+     * Insert text data from a `DataTransfer` into the editor.
+     */
+    insertTextData(editor, data) {
+        return editor.insertTextData(data);
+    },
     /**
      * onKeydown hook.
      */
@@ -453,8 +500,8 @@ const AngularEditor = {
     /**
      * Sets data from the currently selected fragment on a `DataTransfer`.
      */
-    setFragmentData(editor, data) {
-        editor.setFragmentData(data);
+    setFragmentData(editor, data, originEvent) {
+        editor.setFragmentData(data, originEvent);
     },
     deleteCutData(editor) {
         editor.deleteCutData();
@@ -711,7 +758,9 @@ const AngularEditor = {
             // 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 && offset === domNode.textContent.length && parentNode && parentNode.hasAttribute('data-slate-zero-width')) {
+            if (domNode &&
+                offset === domNode.textContent.length &&
+                (parentNode && parentNode.hasAttribute('data-slate-zero-width'))) {
                 offset--;
             }
         }
@@ -1125,7 +1174,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         // 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)) {
-            const span = document.createElement('span');
+            const 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';
@@ -1139,13 +1188,14 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         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.
-        const div = document.createElement('div');
+        const 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 = () => {
         const { selection } = editor;
@@ -1162,13 +1212,25 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         }
     };
     e.insertData = (data) => {
-        const fragment = data.getData(`application/${clipboardFormatKey}`);
+        if (!e.insertFragmentData(data)) {
+            e.insertTextData(data);
+        }
+    };
+    e.insertFragmentData = (data) => {
+        /**
+         * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
+         */
+        const fragment = data.getData(`application/${clipboardFormatKey}`) ||
+            getSlateFragmentAttribute(data);
         if (fragment) {
             const decoded = decodeURIComponent(window.atob(fragment));
             const parsed = JSON.parse(decoded);
             e.insertFragment(parsed);
-            return;
+            return true;
         }
+        return false;
+    };
+    e.insertTextData = (data) => {
         const text = data.getData('text/plain');
         if (text) {
             const lines = text.split(/\r\n|\r|\n/);
@@ -1180,7 +1242,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
                 e.insertText(line);
                 split = true;
             }
+            return true;
         }
+        return false;
     };
     e.onKeydown = () => { };
     e.onClick = () => { };
@@ -1551,12 +1615,16 @@ class SlateBlockCardComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
+    get centerContainerElement() {
+        return this.centerContianer.nativeElement;
+    }
     ngOnInit() {
-        const fragment = document.createDocumentFragment();
-        fragment.append(...this.centerRootNodes);
-        this.centerContianer.nativeElement.appendChild(fragment);
+        this.append();
         this.nativeElement.classList.add(`slate-block-card`);
     }
+    append() {
+        this.centerRootNodes.forEach((rootNode) => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
+    }
     initializeCenter(rootNodes) {
         this.centerRootNodes = rootNodes;
     }
@@ -1662,6 +1730,11 @@ class ViewContainerItem {
             }
         }
     }
+    appendBlockCardElement() {
+        if (this.blockCardComponentRef) {
+            this.blockCardComponentRef.instance.append();
+        }
+    }
 }
 ViewContainerItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ViewContainerItem, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
 ViewContainerItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: ViewContainerItem, inputs: { viewContext: "viewContext" }, ngImport: i0 });
@@ -1737,35 +1810,28 @@ class BaseLeafComponent extends BaseComponent {
         this.cdr.markForCheck();
     }
     renderPlaceholder() {
-        var _a, _b, _c;
         // issue-1: IME input was interrupted
         // issue-2: IME input focus jumping
-        // Issue occurs when the placeholder node is removed (in leaf span)
-        // So add a placeholder span to the block element root node
+        // 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');
-                (_a = this.nativeElement.closest('[data-slate-node="element"]')) === null || _a === void 0 ? void 0 : _a.classList.add('element-placeholder');
-                (_b = this.nativeElement.closest('[data-slate-node="element"]')) === null || _b === void 0 ? void 0 : _b.appendChild(this.placeholderElement);
+                this.nativeElement.classList.add('leaf-with-placeholder');
+                this.nativeElement.appendChild(this.placeholderElement);
             }
         }
         else {
-            if (this.placeholderElement) {
-                this.placeholderElement.remove();
-                this.placeholderElement = null;
-                (_c = this.nativeElement.closest('[data-slate-node="element"]')) === null || _c === void 0 ? void 0 : _c.classList.remove('element-placeholder');
-            }
+            this.destroyPlaceholder();
         }
     }
     destroyPlaceholder() {
-        var _a, _b;
         if (this.placeholderElement) {
             this.placeholderElement.remove();
             this.placeholderElement = null;
-            (_b = (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.closest('[data-slate-node="element"]')) === null || _b === void 0 ? void 0 : _b.classList.remove('element-placeholder');
+            this.nativeElement.classList.remove('leaf-with-placeholder');
         }
     }
 }
@@ -1971,6 +2037,8 @@ class ViewContainer {
                 });
             }
         }
+        // Solve the block-card DOMElement loss when moving nodes
+        record.item.appendBlockCardElement();
     }
 }
 ViewContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ViewContainer, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2450,13 +2518,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }] } });
 
 const timeDebug = Debug('slate-angular-time');
-// COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
-// Chrome Legacy doesn't support `beforeinput` correctly
-const 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
 const forceOnDOMPaste = IS_SAFARI;
 class SlateEditableComponent {
@@ -2511,6 +2572,9 @@ class SlateEditableComponent {
         this.initializeContext();
         // remove unused DOM, just keep templateComponent instance
         this.templateElementRef.nativeElement.remove();
+        // add browser class
+        let browserClass = IS_FIREFOX ? 'firefox' : (IS_SAFARI ? 'safari' : '');
+        browserClass && this.elementRef.nativeElement.classList.add(browserClass);
     }
     ngOnChanges(simpleChanges) {
         if (!this.initialized) {
@@ -2884,7 +2948,10 @@ class SlateEditableComponent {
                     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') {
@@ -2996,13 +3063,13 @@ class SlateEditableComponent {
         const 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');
         }
     }
     onDOMCut(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');
             const { selection } = this.editor;
             if (selection) {
                 AngularEditor.deleteCutData(this.editor);
@@ -3021,7 +3088,7 @@ class SlateEditableComponent {
         }
     }
     onDOMDragStart(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)) {
             const node = AngularEditor.toSlateNode(this.editor, event.target);
             const path = AngularEditor.findPath(this.editor, node);
             const voidMatch = Editor.isVoid(this.editor, node) ||
@@ -3033,7 +3100,7 @@ class SlateEditableComponent {
                 Transforms.select(this.editor, range);
             }
             this.isDraggingInternally = true;
-            AngularEditor.setFragmentData(this.editor, event.dataTransfer);
+            AngularEditor.setFragmentData(this.editor, event.dataTransfer, 'drag');
         }
     }
     onDOMDrop(event) {
@@ -3576,5 +3643,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FOCUSED, IS_IOS, IS_READONLY, IS_SAFARI, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildrenComponent, SlateEditableComponent, SlateElementComponent, SlateErrorCode, SlateLeavesComponent, SlateModule, SlateStringComponent, check, getCardTargetAttribute, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildrenComponent, SlateEditableComponent, SlateElementComponent, SlateErrorCode, SlateLeavesComponent, SlateModule, SlateStringComponent, check, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
 //# sourceMappingURL=slate-angular.js.map