slate-angular 17.1.3 → 17.2.1

package/fesm2022/slate-angular.mjs

@@ -203,33 +203,15 @@ const getPlainText = (domNode) => {
     }
     return text;
 };
+const SlateFragmentAttributeKey = 'data-slate-angular-fragment';
 /**
- * Get x-slate-fragment attribute from data-slate-fragment
+ * Get x-slate-fragment attribute from data-slate-angular-fragment
  */
-const catchSlateFragment = /data-slate-fragment="(.+?)"/m;
-const getSlateFragmentAttribute = (dataTransfer) => {
-    const htmlData = dataTransfer.getData('text/html');
+const catchSlateFragment = /data-slate-angular-fragment="(.+?)"/m;
+const getSlateFragmentAttribute = (htmlData) => {
     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.
@@ -1073,6 +1055,208 @@ const createThrottleRAF = () => {
     return throttleRAF;
 };
 
+const setDataTransferClipboard = (dataTransfer, htmlText) => {
+    dataTransfer?.setData(`text/html`, htmlText);
+};
+const setDataTransferClipboardText = (data, text) => {
+    data?.setData(`text/plain`, text);
+};
+const getDataTransferClipboard = (data) => {
+    const html = data?.getData(`text/html`);
+    if (html) {
+        const htmlClipboardData = getClipboardFromHTMLText(html);
+        if (htmlClipboardData) {
+            return htmlClipboardData;
+        }
+        const textData = getDataTransferClipboardText(data);
+        if (textData) {
+            return {
+                html,
+                ...textData
+            };
+        }
+        else {
+            return { html };
+        }
+    }
+    else {
+        const textData = getDataTransferClipboardText(data);
+        return textData;
+    }
+};
+const getDataTransferClipboardText = (data) => {
+    if (!data) {
+        return null;
+    }
+    const text = data?.getData(`text/plain`);
+    if (text) {
+        const htmlClipboardData = getClipboardFromHTMLText(text);
+        if (htmlClipboardData) {
+            return htmlClipboardData;
+        }
+    }
+    return { text };
+};
+
+const isClipboardReadSupported = () => {
+    return 'clipboard' in navigator && 'read' in navigator.clipboard;
+};
+const isClipboardWriteSupported = () => {
+    return 'clipboard' in navigator && 'write' in navigator.clipboard;
+};
+const isClipboardWriteTextSupported = () => {
+    return 'clipboard' in navigator && 'writeText' in navigator.clipboard;
+};
+const isClipboardFile = (item) => {
+    return item.types.find(i => i.match(/^image\//));
+};
+const stripHtml = (html) => {
+    // See <https://github.com/developit/preact-markup/blob/4788b8d61b4e24f83688710746ee36e7464f7bbc/src/parse-markup.js#L60-L69>
+    const doc = document.implementation.createHTMLDocument('');
+    doc.documentElement.innerHTML = html.trim();
+    return doc.body.textContent || doc.body.innerText || '';
+};
+const blobAsString = (blob) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener('loadend', () => {
+            const text = reader.result;
+            resolve(text);
+        });
+        reader.addEventListener('error', () => {
+            reject(reader.error);
+        });
+        reader.readAsText(blob);
+    });
+};
+
+const setNavigatorClipboard = async (htmlText, data, text = '') => {
+    let textClipboard = text;
+    if (isClipboardWriteSupported()) {
+        await navigator.clipboard.write([
+            new ClipboardItem({
+                'text/html': new Blob([htmlText], {
+                    type: 'text/html'
+                }),
+                'text/plain': new Blob([JSON.stringify(textClipboard ?? data)], { type: 'text/plain' })
+            })
+        ]);
+    }
+};
+const getNavigatorClipboard = async () => {
+    if (!isClipboardReadSupported()) {
+        return null;
+    }
+    const clipboardItems = await navigator.clipboard.read();
+    let clipboardData = {};
+    if (Array.isArray(clipboardItems) && clipboardItems[0] instanceof ClipboardItem) {
+        for (const item of clipboardItems) {
+            if (isClipboardFile(item)) {
+                const clipboardFiles = item.types.filter(type => type.match(/^image\//));
+                const fileBlobs = await Promise.all(clipboardFiles.map(type => item.getType(type)));
+                const urls = fileBlobs.filter(Boolean).map(blob => URL.createObjectURL(blob));
+                const files = await Promise.all(urls.map(async (url) => {
+                    const blob = await (await fetch(url)).blob();
+                    return new File([blob], 'file', { type: blob.type });
+                }));
+                return {
+                    files
+                };
+            }
+            if (item.types.includes('text/html')) {
+                const htmlContent = await blobAsString(await item.getType('text/html'));
+                const htmlClipboardData = getClipboardFromHTMLText(htmlContent);
+                if (htmlClipboardData) {
+                    return htmlClipboardData;
+                }
+                if (htmlContent && htmlContent.trim()) {
+                    clipboardData = { html: htmlContent };
+                }
+            }
+            if (item.types.includes('text/plain')) {
+                const textContent = await blobAsString(await item.getType('text/plain'));
+                clipboardData = {
+                    text: stripHtml(textContent)
+                };
+            }
+        }
+    }
+    return clipboardData;
+};
+
+const buildHTMLText = (wrapper, attach, data) => {
+    const stringObj = JSON.stringify(data);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    attach.setAttribute(SlateFragmentAttributeKey, encoded);
+    return wrapper.innerHTML;
+};
+const getClipboardFromHTMLText = (html) => {
+    const fragmentAttribute = getSlateFragmentAttribute(html);
+    if (fragmentAttribute) {
+        try {
+            const decoded = decodeURIComponent(window.atob(fragmentAttribute));
+            const result = JSON.parse(decoded);
+            if (result && Array.isArray(result) && result.length > 0) {
+                return {
+                    elements: result
+                };
+            }
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    }
+    return null;
+};
+const createClipboardData = (html, elements, text, files) => {
+    const data = { elements, text, html, files };
+    return data;
+};
+const getClipboardData = async (dataTransfer) => {
+    let clipboardData = null;
+    if (dataTransfer) {
+        if (dataTransfer.files.length) {
+            return { files: Array.from(dataTransfer.files) };
+        }
+        clipboardData = getDataTransferClipboard(dataTransfer);
+        return clipboardData;
+    }
+    if (isClipboardReadSupported()) {
+        return await getNavigatorClipboard();
+    }
+    return clipboardData;
+};
+/**
+ * @param wrapper get wrapper.innerHTML string which will be written in clipboard
+ * @param attach attach must be child element of wrapper which will be attached json data
+ * @returns void
+ */
+const setClipboardData = async (clipboardData, wrapper, attach, dataTransfer) => {
+    if (!clipboardData) {
+        return;
+    }
+    const { elements, text } = clipboardData;
+    if (isClipboardWriteSupported()) {
+        const htmlText = buildHTMLText(wrapper, attach, elements);
+        // TODO
+        // maybe fail to write when copy some cell in table 
+        return await setNavigatorClipboard(htmlText, elements, text);
+    }
+    if (dataTransfer) {
+        const htmlText = buildHTMLText(wrapper, attach, elements);
+        setDataTransferClipboard(dataTransfer, htmlText);
+        setDataTransferClipboardText(dataTransfer, text);
+        return;
+    }
+    // Compatible with situations where navigator.clipboard.write is not supported and dataTransfer is empty
+    // Such as contextmenu copy in Firefox.
+    if (isClipboardWriteTextSupported()) {
+        const htmlText = buildHTMLText(wrapper, attach, elements);
+        return await navigator.clipboard.writeText(htmlText);
+    }
+};
+
 /**
  * Utilities for single-line deletion
  */
@@ -1195,7 +1379,7 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         }
         onChange();
     };
-    e.setFragmentData = (data) => {
+    e.setFragmentData = (dataTransfer, originEvent) => {
         const { selection } = e;
         if (!selection) {
             return;
@@ -1254,19 +1438,13 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
             attach = span;
         }
         const fragment = e.getFragment();
-        const stringObj = JSON.stringify(fragment);
-        const encoded = window.btoa(encodeURIComponent(stringObj));
-        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 = contents.ownerDocument.createElement('div');
         div.appendChild(contents);
         div.setAttribute('hidden', 'true');
         contents.ownerDocument.body.appendChild(div);
-        data.setData('text/html', div.innerHTML);
-        data.setData('text/plain', getPlainText(div));
+        setClipboardData({ text: getPlainText(div), elements: fragment }, div, attach, dataTransfer);
         contents.ownerDocument.body.removeChild(div);
-        return data;
     };
     e.deleteCutData = () => {
         const { selection } = editor;
@@ -1282,28 +1460,26 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
             }
         }
     };
-    e.insertData = (data) => {
-        if (!e.insertFragmentData(data)) {
+    e.insertData = async (data) => {
+        if (!(await e.insertFragmentData(data))) {
             e.insertTextData(data);
         }
     };
-    e.insertFragmentData = (data) => {
+    e.insertFragmentData = async (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);
+        const clipboardData = await getClipboardData(data);
+        if (clipboardData && clipboardData.elements) {
+            e.insertFragment(clipboardData.elements);
             return true;
         }
         return false;
     };
-    e.insertTextData = (data) => {
-        const text = data.getData('text/plain');
-        if (text) {
-            const lines = text.split(/\r\n|\r|\n/);
+    e.insertTextData = async (data) => {
+        const clipboardData = await getClipboardData(data);
+        if (clipboardData && clipboardData.text) {
+            const lines = clipboardData.text.split(/\r\n|\r|\n/);
             let split = false;
             for (const line of lines) {
                 if (split) {
@@ -4311,5 +4487,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, 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, SlateChildren, SlateChildrenOutlet, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateLeaves, SlateModule, SlateString, check, createThrottleRAF, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isEmpty, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, 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, SlateChildren, SlateChildrenOutlet, SlateDefaultString, SlateEditable, SlateElement, SlateErrorCode, SlateFragmentAttributeKey, SlateLeaves, SlateModule, SlateString, blobAsString, buildHTMLText, check, createClipboardData, createThrottleRAF, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getDataTransferClipboard, getDataTransferClipboardText, getDefaultView, getEditableChild, getEditableChildAndIndex, getNavigatorClipboard, getPlainText, getSlateFragmentAttribute, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isEmpty, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map