@quadrats/common 0.7.7 → 1.0.0

package/carousel/index.cjs.js

@@ -0,0 +1,202 @@
+'use strict';
+
+var core = require('@quadrats/core');
+
+const CAROUSEL_TYPE = 'carousel';
+const CAROUSEL_IMAGES_TYPE = 'carousel_images';
+const CAROUSEL_CAPTION_TYPE = 'carousel_caption';
+const CAROUSEL_PLACEHOLDER_TYPE = 'carousel_placeholder';
+const CAROUSEL_TYPES = {
+    carousel: CAROUSEL_TYPE,
+    carousel_images: CAROUSEL_IMAGES_TYPE,
+    carousel_caption: CAROUSEL_CAPTION_TYPE,
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __awaiter(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());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function getFilesFromInput(options) {
+    const { accept } = options;
+    return new Promise((resolve) => {
+        const inputEl = document.createElement('input');
+        if (accept) {
+            inputEl.accept = accept.join(',');
+        }
+        inputEl.multiple = true;
+        inputEl.type = 'file';
+        inputEl.addEventListener('cancel', () => {
+            resolve(undefined);
+        });
+        inputEl.addEventListener('change', () => {
+            const { files: fileList } = inputEl;
+            if (!fileList || !fileList.length) {
+                resolve(undefined);
+            }
+            else {
+                const files = [];
+                for (const file of fileList) {
+                    files.push(file);
+                }
+                resolve(files);
+            }
+        });
+        inputEl.click();
+    });
+}
+
+function createCarousel(options) {
+    const { types: typesOptions, accept: acceptOptions, ratio, maxLength: maxLengthOptions, limitSize: limitSizeOptions, confirmModal = true, getBody, getHeaders, getUrl, uploader, } = options;
+    const types = Object.assign(Object.assign({}, CAROUSEL_TYPES), typesOptions);
+    const maxLength = maxLengthOptions || 10;
+    const limitSize = limitSizeOptions || 5;
+    const accept = acceptOptions || ['image/jpeg', 'image/jpg', 'image/png'];
+    const selectFiles = () => __awaiter(this, void 0, void 0, function* () {
+        const files = yield getFilesFromInput({ accept });
+        return files;
+    });
+    const insertCarouselPlaceholder = (editor) => {
+        const carouselPlaceholderElement = {
+            type: CAROUSEL_PLACEHOLDER_TYPE,
+            ratio,
+            children: [{ text: '' }],
+        };
+        core.Editor.withoutNormalizing(editor, () => {
+            core.Transforms.insertNodes(editor, carouselPlaceholderElement);
+        });
+    };
+    const removeCarouselPlaceholder = (editor) => {
+        core.Transforms.removeNodes(editor, {
+            match: (node) => core.Element.isElement(node) && node.type === CAROUSEL_PLACEHOLDER_TYPE,
+        });
+    };
+    const createCarouselElement = ({ items }) => {
+        const carouselImagesElement = {
+            type: types.carousel_images,
+            images: items.map((i) => i.url),
+            ratio,
+            children: [{ text: '' }],
+        };
+        const carouselCaptionElement = {
+            type: types.carousel_caption,
+            captions: items.map((i) => i.caption),
+            children: [{ text: '' }],
+        };
+        return {
+            type: types.carousel,
+            confirmModal,
+            items,
+            children: [carouselImagesElement, carouselCaptionElement],
+        };
+    };
+    const insertCarousel = ({ editor, items }) => {
+        core.Transforms.insertNodes(editor, [createCarouselElement({ items }), core.createParagraphElement()]);
+    };
+    const updateCarouselElement = ({ editor, items, path }) => {
+        core.Transforms.setNodes(editor, { items }, { at: path });
+        const imagesEntries = core.Editor.nodes(editor, {
+            at: path,
+            match: (node) => core.Element.isElement(node) && node.type === types.carousel_images,
+            mode: 'all',
+        });
+        const imagesNode = imagesEntries.next().value;
+        const captionEntries = core.Editor.nodes(editor, {
+            at: path,
+            match: (node) => core.Element.isElement(node) && node.type === types.carousel_caption,
+            mode: 'all',
+        });
+        const captionNode = captionEntries.next().value;
+        if (imagesNode) {
+            const [, imagesPath] = imagesNode;
+            core.Transforms.setNodes(editor, { images: items.map((i) => i.url) }, { at: imagesPath });
+        }
+        if (captionNode) {
+            const [, captionPath] = captionNode;
+            core.Transforms.setNodes(editor, { captions: items.map((i) => i.caption) }, {
+                at: captionPath,
+            });
+        }
+    };
+    return {
+        types,
+        accept,
+        ratio,
+        maxLength,
+        limitSize,
+        confirmModal,
+        selectFiles,
+        insertCarouselPlaceholder,
+        removeCarouselPlaceholder,
+        createCarouselElement,
+        insertCarousel,
+        updateCarouselElement,
+        getBody,
+        getHeaders,
+        getUrl,
+        uploader,
+        with(editor) {
+            const { normalizeNode } = editor;
+            editor.normalizeNode = (entry) => {
+                const [node, path] = entry;
+                if (core.Element.isElement(node)) {
+                    const type = node.type;
+                    if (type === types.carousel) {
+                        for (const [child, childPath] of core.Node.children(editor, path)) {
+                            if (core.Element.isElement(child) &&
+                                child.type !== types.carousel_caption &&
+                                child.type !== types.carousel_images) {
+                                core.Transforms.removeNodes(editor, { at: childPath });
+                                return;
+                            }
+                        }
+                    }
+                    else if (type === types.carousel_caption || type === types.carousel_images) {
+                        for (const [child, childPath] of core.Node.children(editor, path)) {
+                            if (core.Element.isElement(child)) {
+                                core.Transforms.removeNodes(editor, { at: childPath });
+                                return;
+                            }
+                        }
+                    }
+                }
+                normalizeNode(entry);
+            };
+            return editor;
+        },
+    };
+}
+
+exports.CAROUSEL_CAPTION_TYPE = CAROUSEL_CAPTION_TYPE;
+exports.CAROUSEL_IMAGES_TYPE = CAROUSEL_IMAGES_TYPE;
+exports.CAROUSEL_PLACEHOLDER_TYPE = CAROUSEL_PLACEHOLDER_TYPE;
+exports.CAROUSEL_TYPE = CAROUSEL_TYPE;
+exports.CAROUSEL_TYPES = CAROUSEL_TYPES;
+exports.createCarousel = createCarousel;

package/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export * from './constants';
+export * from './createCarousel';

package/carousel/index.js

@@ -0,0 +1,2 @@
+export { CAROUSEL_CAPTION_TYPE, CAROUSEL_IMAGES_TYPE, CAROUSEL_PLACEHOLDER_TYPE, CAROUSEL_TYPE, CAROUSEL_TYPES } from './constants.js';
+export { createCarousel } from './createCarousel.js';

package/carousel/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/common/carousel",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/carousel/typings.d.ts

@@ -0,0 +1,58 @@
+import { Editor, Withable, QuadratsElement, WithElementType, Text, Path } from '@quadrats/core';
+import { ImageAccept, FileUploaderGetBody, FileUploaderGetHeaders, FileUploaderGetUrl, FileUploaderImplement } from '@quadrats/common/file-uploader';
+export type CarouselTypeKey = 'carousel';
+export type CarouselImagesTypeKey = 'carousel_images';
+export type CarouselCaptionTypeKey = 'carousel_caption';
+export type CarouselTypes = Record<CarouselTypeKey | CarouselImagesTypeKey | CarouselCaptionTypeKey, string>;
+export interface CarouselFieldArrayItem {
+    file: File;
+    progress: number;
+    preview: string;
+    url: string;
+    caption: string;
+    isError?: boolean;
+}
+export interface CarouselElement extends QuadratsElement, WithElementType {
+    confirmModal: boolean;
+    items: CarouselFieldArrayItem[];
+}
+export interface CarouselImagesElement extends QuadratsElement, WithElementType {
+    children: [Text];
+    ratio?: [number, number];
+    images: string[];
+}
+export interface CarouselCaptionElement extends QuadratsElement, WithElementType {
+    children: [Text];
+    captions: string[];
+}
+export interface CarouselPlaceholderElement extends QuadratsElement, WithElementType {
+    ratio?: [number, number];
+    children: [Text];
+}
+export interface Carousel<T extends Editor = Editor> extends Withable {
+    types: CarouselTypes;
+    insertCarouselPlaceholder(editor: T): void;
+    removeCarouselPlaceholder(editor: T): void;
+    createCarouselElement({ items }: {
+        items: CarouselFieldArrayItem[];
+    }): CarouselElement;
+    insertCarousel({ editor, items }: {
+        editor: T;
+        items: CarouselFieldArrayItem[];
+    }): void;
+    updateCarouselElement({ editor, items, path }: {
+        editor: T;
+        items: CarouselFieldArrayItem[];
+        path: Path;
+    }): void;
+    accept: ImageAccept[];
+    ratio?: [number, number];
+    maxLength: number;
+    limitSize: number;
+    confirmModal: boolean;
+    selectFiles(editor: T): Promise<File[] | undefined>;
+    getBody: FileUploaderGetBody;
+    getHeaders?: FileUploaderGetHeaders;
+    getUrl: FileUploaderGetUrl;
+    uploader?: FileUploaderImplement;
+}

package/embed/constants.d.ts

@@ -1 +1,2 @@
 export declare const EMBED_TYPE = "embed";
+export declare const EMBED_PLACEHOLDER_TYPE = "embed_placeholder";

package/embed/constants.js

@@ -1,3 +1,4 @@
 const EMBED_TYPE = 'embed';
+const EMBED_PLACEHOLDER_TYPE = 'embed_placeholder';
 
-export { EMBED_TYPE };
+export { EMBED_PLACEHOLDER_TYPE, EMBED_TYPE };

package/embed/createEmbed.js

@@ -1,12 +1,12 @@
-import { PARAGRAPH_TYPE, Element, Transforms, normalizeVoidElementChildren, isAboveBlockEmpty } from '@quadrats/core';
-import { EMBED_TYPE } from './constants.js';
+import { PARAGRAPH_TYPE, Element, Transforms, normalizeVoidElementChildren, Editor, isAboveBlockEmpty } from '@quadrats/core';
+import { EMBED_TYPE, EMBED_PLACEHOLDER_TYPE } from './constants.js';
 import { serializeEmbedCode } from './serializeEmbedCode.js';
 
 function createEmbed(options) {
     const { type = EMBED_TYPE, strategies } = options;
-    const insertEmbed = (editor, providers, embedCode, defaultNode = PARAGRAPH_TYPE) => {
+    const insertEmbed = (editor, provider, embedCode, defaultNode = PARAGRAPH_TYPE) => {
         var _a;
-        const result = serializeEmbedCode(embedCode, strategies, providers);
+        const result = serializeEmbedCode(embedCode, strategies, provider);
         if (result) {
             const [provider, data] = result;
             const embedElement = Object.assign(Object.assign({}, data), { type, provider, children: [{ text: '' }] });
@@ -23,10 +23,27 @@ function createEmbed(options) {
             Transforms.move(editor);
         }
     };
+    const insertEmbedPlaceholder = (editor, provider) => {
+        const embedPlaceholderElement = {
+            type: EMBED_PLACEHOLDER_TYPE,
+            provider,
+            children: [{ text: '' }],
+        };
+        Editor.withoutNormalizing(editor, () => {
+            Transforms.insertNodes(editor, embedPlaceholderElement);
+        });
+    };
+    const removeEmbedPlaceholder = (editor) => {
+        Transforms.removeNodes(editor, {
+            match: node => Element.isElement(node) && node.type === EMBED_PLACEHOLDER_TYPE,
+        });
+    };
     return {
         type,
         strategies,
         insertEmbed,
+        insertEmbedPlaceholder,
+        removeEmbedPlaceholder,
         with(editor) {
             const { isVoid, normalizeNode } = editor;
             editor.isVoid = element => element.type === type || isVoid(element);

package/embed/index.cjs.js

@@ -3,14 +3,13 @@
 var core = require('@quadrats/core');
 
 const EMBED_TYPE = 'embed';
+const EMBED_PLACEHOLDER_TYPE = 'embed_placeholder';
 
-function serializeEmbedCode(embedCode, strategies, providers) {
-    for (const provider of providers) {
-        const strategy = strategies[provider];
-        const data = strategy.serialize(embedCode);
-        if (data) {
-            return [provider, data];
-        }
+function serializeEmbedCode(embedCode, strategies, provider) {
+    const strategy = strategies[provider];
+    const data = strategy.serialize(embedCode);
+    if (data) {
+        return [provider, data];
     }
 }
 
@@ -24,9 +23,9 @@ function deserializeEmbedElementToData(element, strategies) {
 
 function createEmbed(options) {
     const { type = EMBED_TYPE, strategies } = options;
-    const insertEmbed = (editor, providers, embedCode, defaultNode = core.PARAGRAPH_TYPE) => {
+    const insertEmbed = (editor, provider, embedCode, defaultNode = core.PARAGRAPH_TYPE) => {
         var _a;
-        const result = serializeEmbedCode(embedCode, strategies, providers);
+        const result = serializeEmbedCode(embedCode, strategies, provider);
         if (result) {
             const [provider, data] = result;
             const embedElement = Object.assign(Object.assign({}, data), { type, provider, children: [{ text: '' }] });
@@ -43,10 +42,27 @@ function createEmbed(options) {
             core.Transforms.move(editor);
         }
     };
+    const insertEmbedPlaceholder = (editor, provider) => {
+        const embedPlaceholderElement = {
+            type: EMBED_PLACEHOLDER_TYPE,
+            provider,
+            children: [{ text: '' }],
+        };
+        core.Editor.withoutNormalizing(editor, () => {
+            core.Transforms.insertNodes(editor, embedPlaceholderElement);
+        });
+    };
+    const removeEmbedPlaceholder = (editor) => {
+        core.Transforms.removeNodes(editor, {
+            match: node => core.Element.isElement(node) && node.type === EMBED_PLACEHOLDER_TYPE,
+        });
+    };
     return {
         type,
         strategies,
         insertEmbed,
+        insertEmbedPlaceholder,
+        removeEmbedPlaceholder,
         with(editor) {
             const { isVoid, normalizeNode } = editor;
             editor.isVoid = element => element.type === type || isVoid(element);
@@ -70,6 +86,7 @@ function createEmbed(options) {
     };
 }
 
+exports.EMBED_PLACEHOLDER_TYPE = EMBED_PLACEHOLDER_TYPE;
 exports.EMBED_TYPE = EMBED_TYPE;
 exports.createEmbed = createEmbed;
 exports.deserializeEmbedElementToData = deserializeEmbedElementToData;

package/embed/index.js

@@ -1,4 +1,4 @@
-export { EMBED_TYPE } from './constants.js';
+export { EMBED_PLACEHOLDER_TYPE, EMBED_TYPE } from './constants.js';
 export { serializeEmbedCode } from './serializeEmbedCode.js';
 export { deserializeEmbedElementToData } from './deserializeEmbedElementToData.js';
 export { createEmbed } from './createEmbed.js';

package/embed/serializeEmbedCode.d.ts

@@ -1,2 +1,2 @@
 import { EmbedStrategies } from './typings';
-export declare function serializeEmbedCode<P extends string>(embedCode: string, strategies: EmbedStrategies<P>, providers: P[]): [P, any] | undefined;
+export declare function serializeEmbedCode<P extends string>(embedCode: string, strategies: EmbedStrategies<P>, provider: P): [P, any] | undefined;

package/embed/serializeEmbedCode.js

@@ -1,10 +1,8 @@
-function serializeEmbedCode(embedCode, strategies, providers) {
-    for (const provider of providers) {
-        const strategy = strategies[provider];
-        const data = strategy.serialize(embedCode);
-        if (data) {
-            return [provider, data];
-        }
+function serializeEmbedCode(embedCode, strategies, provider) {
+    const strategy = strategies[provider];
+    const data = strategy.serialize(embedCode);
+    if (data) {
+        return [provider, data];
     }
 }
 

package/embed/strategies/podcast-apple/index.cjs.js

@@ -4,7 +4,7 @@
 const PodcastAppleEmbedStrategy = {
     serialize: (embedCode) => {
         var _a, _b;
-        const result = (_b = (_a = /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\d]*)/i.exec(embedCode)) !== null && _a !== void 0 ? _a : /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/id([\d]*)/i.exec(embedCode)) !== null && _b !== void 0 ? _b : /^https:\/\/podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\d]*)/i.exec(embedCode);
+        const result = (_b = (_a = /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\S]*)/i.exec(embedCode)) !== null && _a !== void 0 ? _a : /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/id([\S]*)/i.exec(embedCode)) !== null && _b !== void 0 ? _b : /^https:\/\/podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\S]*)/i.exec(embedCode);
         if (result) {
             const [, language, contextId] = result;
             return {

package/embed/strategies/podcast-apple/index.js

@@ -2,7 +2,7 @@
 const PodcastAppleEmbedStrategy = {
     serialize: (embedCode) => {
         var _a, _b;
-        const result = (_b = (_a = /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\d]*)/i.exec(embedCode)) !== null && _a !== void 0 ? _a : /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/id([\d]*)/i.exec(embedCode)) !== null && _b !== void 0 ? _b : /^https:\/\/podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\d]*)/i.exec(embedCode);
+        const result = (_b = (_a = /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\S]*)/i.exec(embedCode)) !== null && _a !== void 0 ? _a : /^https:\/\/embed.podcasts.apple.com\/([\w-]*)\/podcast\/id([\S]*)/i.exec(embedCode)) !== null && _b !== void 0 ? _b : /^https:\/\/podcasts.apple.com\/([\w-]*)\/podcast\/[\S]*\/id([\S]*)/i.exec(embedCode);
         if (result) {
             const [, language, contextId] = result;
             return {

package/embed/typings.d.ts

@@ -1,5 +1,18 @@
 import { Editor, QuadratsElement, Node, Text, Withable, WithElementType } from '@quadrats/core';
 export interface EmbedElement extends QuadratsElement, WithElementType {
+    /**
+     * The embed provider.
+     *
+     * e.g. If you embed a youtube video, then you can use `youtube` as provider.
+     */
+    provider: string;
+    /**
+     * The embed alignment. default is `left`.
+     */
+    align?: 'left' | 'center' | 'right';
+    children: [Text];
+}
+export interface EmbedPlaceholderElement extends QuadratsElement, WithElementType {
     /**
      * The embed provider.
      *
@@ -22,5 +35,7 @@ export interface EmbedStrategy<EmbedData extends Record<string, unknown>, Render
 export type EmbedStrategies<Provider extends string> = Record<Provider, EmbedStrategy<any, any>>;
 export interface Embed<P extends string, T extends Editor = Editor> extends WithElementType, Withable {
     strategies: EmbedStrategies<P>;
-    insertEmbed(editor: T, providers: P[], embedCode: string, defaultNode?: Node | string): void;
+    insertEmbed(editor: T, provider: P, embedCode: string, defaultNode?: Node | string): void;
+    insertEmbedPlaceholder(editor: T, provider: P): void;
+    removeEmbedPlaceholder(editor: T): void;
 }

package/file-uploader/constants.d.ts

@@ -1 +1,2 @@
 export declare const FILE_UPLOADER_TYPE = "file_uploader";
+export declare const FILE_UPLOADER_PLACEHOLDER_TYPE = "file_uploader_placeholder";

package/file-uploader/constants.js

@@ -1,3 +1,4 @@
 const FILE_UPLOADER_TYPE = 'file_uploader';
+const FILE_UPLOADER_PLACEHOLDER_TYPE = 'file_uploader_placeholder';
 
-export { FILE_UPLOADER_TYPE };
+export { FILE_UPLOADER_PLACEHOLDER_TYPE, FILE_UPLOADER_TYPE };

package/file-uploader/createFileUploader.js

@@ -1,7 +1,7 @@
 import { __awaiter } from './_virtual/_tslib.js';
 import { readFileAsDataURL } from '@quadrats/utils';
-import { isAboveBlockEmpty, Transforms, createParagraphElement, HistoryEditor } from '@quadrats/core';
-import { FILE_UPLOADER_TYPE } from './constants.js';
+import { isAboveBlockEmpty, Transforms, createParagraphElement, Element, Editor, HistoryEditor } from '@quadrats/core';
+import { FILE_UPLOADER_TYPE, FILE_UPLOADER_PLACEHOLDER_TYPE } from './constants.js';
 import { getFilesFromInput } from './getFilesFromInput.js';
 
 const createFileUploaderElementByType = type => (editor, file, options) => __awaiter(void 0, void 0, void 0, function* () {
@@ -71,12 +71,19 @@ function insertFileUploaderElement(editor, fileUploaderElement) {
 function createFileUploader(options = {}) {
     const { type = FILE_UPLOADER_TYPE } = options;
     const createFileUploaderElement = createFileUploaderElementByType(type);
+    const removeUploaderPlaceholder = (editor) => {
+        Transforms.removeNodes(editor, {
+            match: node => Element.isElement(node) && node.type === FILE_UPLOADER_PLACEHOLDER_TYPE,
+        });
+    };
     const upload = (editor, options) => __awaiter(this, void 0, void 0, function* () {
         const { accept, multiple } = options;
         const files = yield getFilesFromInput({ accept, multiple });
         if (!files) {
+            removeUploaderPlaceholder(editor);
             return;
         }
+        removeUploaderPlaceholder(editor);
         files.reduce((prev, file) => __awaiter(this, void 0, void 0, function* () {
             yield prev;
             return createFileUploaderElement(editor, file, options).then((fileUploaderElement) => {
@@ -84,10 +91,21 @@ function createFileUploader(options = {}) {
             });
         }), Promise.resolve());
     });
+    const insertUploaderPlaceholder = (editor) => {
+        const uploaderPlaceholderElement = {
+            type: FILE_UPLOADER_PLACEHOLDER_TYPE,
+            children: [{ text: '' }],
+        };
+        Editor.withoutNormalizing(editor, () => {
+            Transforms.insertNodes(editor, uploaderPlaceholderElement);
+        });
+    };
     return {
         type,
         createFileUploaderElement,
         upload,
+        insertUploaderPlaceholder,
+        removeUploaderPlaceholder,
         with(editor) {
             return editor;
         },

package/file-uploader/getFilesFromInput.js

@@ -7,6 +7,9 @@ function getFilesFromInput(options = {}) {
         }
         inputEl.multiple = !!multiple;
         inputEl.type = 'file';
+        inputEl.addEventListener('cancel', () => {
+            resolve(undefined);
+        });
         inputEl.addEventListener('change', () => {
             const { files: fileList } = inputEl;
             if (!fileList || !fileList.length) {

package/file-uploader/index.cjs.js

@@ -4,6 +4,7 @@ var utils = require('@quadrats/utils');
 var core = require('@quadrats/core');
 
 const FILE_UPLOADER_TYPE = 'file_uploader';
+const FILE_UPLOADER_PLACEHOLDER_TYPE = 'file_uploader_placeholder';
 
 function getFilesFromInput(options = {}) {
     const { accept, multiple } = options;
@@ -14,6 +15,9 @@ function getFilesFromInput(options = {}) {
         }
         inputEl.multiple = !!multiple;
         inputEl.type = 'file';
+        inputEl.addEventListener('cancel', () => {
+            resolve(undefined);
+        });
         inputEl.addEventListener('change', () => {
             const { files: fileList } = inputEl;
             if (!fileList || !fileList.length) {
@@ -130,12 +134,19 @@ function insertFileUploaderElement(editor, fileUploaderElement) {
 function createFileUploader(options = {}) {
     const { type = FILE_UPLOADER_TYPE } = options;
     const createFileUploaderElement = createFileUploaderElementByType(type);
+    const removeUploaderPlaceholder = (editor) => {
+        core.Transforms.removeNodes(editor, {
+            match: node => core.Element.isElement(node) && node.type === FILE_UPLOADER_PLACEHOLDER_TYPE,
+        });
+    };
     const upload = (editor, options) => __awaiter(this, void 0, void 0, function* () {
         const { accept, multiple } = options;
         const files = yield getFilesFromInput({ accept, multiple });
         if (!files) {
+            removeUploaderPlaceholder(editor);
             return;
         }
+        removeUploaderPlaceholder(editor);
         files.reduce((prev, file) => __awaiter(this, void 0, void 0, function* () {
             yield prev;
             return createFileUploaderElement(editor, file, options).then((fileUploaderElement) => {
@@ -143,16 +154,28 @@ function createFileUploader(options = {}) {
             });
         }), Promise.resolve());
     });
+    const insertUploaderPlaceholder = (editor) => {
+        const uploaderPlaceholderElement = {
+            type: FILE_UPLOADER_PLACEHOLDER_TYPE,
+            children: [{ text: '' }],
+        };
+        core.Editor.withoutNormalizing(editor, () => {
+            core.Transforms.insertNodes(editor, uploaderPlaceholderElement);
+        });
+    };
     return {
         type,
         createFileUploaderElement,
         upload,
+        insertUploaderPlaceholder,
+        removeUploaderPlaceholder,
         with(editor) {
             return editor;
         },
     };
 }
 
+exports.FILE_UPLOADER_PLACEHOLDER_TYPE = FILE_UPLOADER_PLACEHOLDER_TYPE;
 exports.FILE_UPLOADER_TYPE = FILE_UPLOADER_TYPE;
 exports.createFileUploader = createFileUploader;
 exports.createFileUploaderElementByType = createFileUploaderElementByType;

package/file-uploader/index.js

@@ -1,3 +1,3 @@
-export { FILE_UPLOADER_TYPE } from './constants.js';
+export { FILE_UPLOADER_PLACEHOLDER_TYPE, FILE_UPLOADER_TYPE } from './constants.js';
 export { getFilesFromInput } from './getFilesFromInput.js';
 export { createFileUploader, createFileUploaderElementByType, insertFileUploaderElement } from './createFileUploader.js';

package/file-uploader/typings.d.ts

@@ -1,5 +1,6 @@
-import { Editor, QuadratsElement, Path, TransformsInsertNodesOptions, Withable } from '@quadrats/core';
+import { Editor, QuadratsElement, Path, TransformsInsertNodesOptions, Withable, WithElementType, Text } from '@quadrats/core';
 import { GetFilesFromInputOptions } from './getFilesFromInput';
+export type ImageAccept = 'image/jpeg' | 'image/jpg' | 'image/png';
 export interface XHRUploadHeaders {
     [name: string]: string;
 }
@@ -25,7 +26,7 @@ interface FileUploaderUploadImplementOnProgressArgs {
 interface FileUploaderUploadImplement {
     onprogress: ((options: FileUploaderUploadImplementOnProgressArgs) => void) | null;
 }
-interface FileUploaderImplement {
+export interface FileUploaderImplement {
     onload: (() => void) | null;
     open: (method: string, url: string | URL) => void;
     setRequestHeader: (key: string, value: string) => void;
@@ -34,6 +35,9 @@ interface FileUploaderImplement {
     readonly response: any;
     readonly upload: FileUploaderUploadImplement;
 }
+export interface UploaderPlaceholderElement extends QuadratsElement, WithElementType {
+    children: [Text];
+}
 export interface FileUploaderCreateFileUploaderElementOptions {
     createElement: {
         [mime in string]?: {
@@ -51,5 +55,7 @@ export interface FileUploader<T extends Editor = Editor> extends Withable {
     type: string;
     createFileUploaderElement(editor: T, file: File, options: FileUploaderCreateFileUploaderElementOptions): Promise<FileUploaderElement | undefined>;
     upload(editor: T, options: FileUploaderUploadOptions): Promise<void>;
+    insertUploaderPlaceholder(editor: T): void;
+    removeUploaderPlaceholder(editor: T): void;
 }
 export {};