@quadrats/common 0.7.3 → 1.0.0

package/file-uploader/createFileUploader.js

@@ -1,93 +1,115 @@
 import { __awaiter } from './_virtual/_tslib.js';
 import { readFileAsDataURL } from '@quadrats/utils';
-import { HistoryEditor, Transforms, isAboveBlockEmpty, createParagraphElement } 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';
 
-function createFileUploader(options = {}) {
-    const { type = FILE_UPLOADER_TYPE } = options;
-    const createFileUploaderElement = (editor, file, options) => __awaiter(this, void 0, void 0, function* () {
-        const { createElement, getBody, getHeaders, getUrl, uploader, } = options;
-        const [mime] = file.type.split('/');
-        const createByMime = createElement[mime];
-        if (!createByMime) {
-            return;
-        }
-        const { dataURL: createElementByDataURL, response: createElementByResponse } = createByMime;
-        const headers = yield (getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(file));
-        const xhr = uploader || new XMLHttpRequest();
-        const dataURL = yield readFileAsDataURL(file);
-        let sent = false;
-        const fileUploaderElement = {
-            type,
-            register: (getPath, onProgress) => {
-                xhr.onload = () => {
-                    if (xhr.status < 400) {
-                        const path = getPath();
-                        if (path) {
-                            HistoryEditor.withoutSaving(editor, () => {
-                                Transforms.removeNodes(editor, { at: path });
-                                Transforms.insertNodes(editor, createElementByResponse(xhr.response), { at: path });
-                            });
-                        }
-                    }
-                    else {
-                        throw xhr.response;
+const createFileUploaderElementByType = type => (editor, file, options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { createElement, getBody, getHeaders, getUrl, uploader, } = options;
+    const [mime] = file.type.split('/');
+    const createByMime = createElement[mime];
+    if (!createByMime) {
+        return;
+    }
+    const { dataURL: createElementByDataURL, response: createElementByResponse } = createByMime;
+    const headers = yield (getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(file));
+    const xhr = uploader || new XMLHttpRequest();
+    const dataURL = yield readFileAsDataURL(file);
+    let sent = false;
+    const fileUploaderElement = {
+        type,
+        register: (getPath, onProgress) => {
+            xhr.onload = () => {
+                if (xhr.status < 400) {
+                    const path = getPath();
+                    if (path) {
+                        HistoryEditor.withoutSaving(editor, () => {
+                            Transforms.removeNodes(editor, { at: path });
+                            Transforms.insertNodes(editor, createElementByResponse(xhr.response), { at: path });
+                        });
                     }
-                };
-                xhr.upload.onprogress = ({ loaded, total }) => onProgress((loaded * 100) / total);
-                if (!sent) {
-                    sent = true;
-                    xhr.send(getBody(file));
                 }
-                return () => {
-                    xhr.onload = null;
-                    xhr.upload.onprogress = null;
-                };
-            },
-            children: [createElementByDataURL(dataURL)],
-        };
-        xhr.open('POST', getUrl(file));
-        if (headers) {
-            for (const headerName in headers) {
-                xhr.setRequestHeader(headerName, headers[headerName]);
+                else {
+                    throw xhr.response;
+                }
+            };
+            xhr.upload.onprogress = ({ loaded, total }) => onProgress((loaded * 100) / total);
+            if (!sent) {
+                sent = true;
+                xhr.send(getBody(file));
             }
+            return () => {
+                xhr.onload = null;
+                xhr.upload.onprogress = null;
+            };
+        },
+        children: [createElementByDataURL(dataURL)],
+    };
+    xhr.open('POST', getUrl(file));
+    if (headers) {
+        for (const headerName in headers) {
+            xhr.setRequestHeader(headerName, headers[headerName]);
         }
-        return fileUploaderElement;
-    });
+    }
+    return fileUploaderElement;
+});
+function insertFileUploaderElement(editor, fileUploaderElement) {
+    var _a, _b, _c;
+    if (fileUploaderElement) {
+        // Clear empty node
+        if (isAboveBlockEmpty(editor)) {
+            Transforms.removeNodes(editor, {
+                at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
+            });
+        }
+        Transforms.insertNodes(editor, [fileUploaderElement, createParagraphElement()], {
+            at: ((_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor.path.length) ? [((_c = editor.selection) === null || _c === void 0 ? void 0 : _c.anchor.path[0]) + 1] : undefined,
+        });
+        Transforms.move(editor);
+    }
+}
+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) => {
-                var _a, _b, _c;
-                if (fileUploaderElement) {
-                    // Clear empty node
-                    if (isAboveBlockEmpty(editor)) {
-                        Transforms.removeNodes(editor, {
-                            at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
-                        });
-                    }
-                    Transforms.insertNodes(editor, [fileUploaderElement, createParagraphElement()], {
-                        at: ((_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor.path.length) ? [((_c = editor.selection) === null || _c === void 0 ? void 0 : _c.anchor.path[0]) + 1] : undefined,
-                    });
-                    Transforms.move(editor);
-                }
+                insertFileUploaderElement(editor, fileUploaderElement);
             });
         }), 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;
         },
     };
 }
 
-export { createFileUploader };
+export { createFileUploader, createFileUploaderElementByType, insertFileUploaderElement };

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) {
@@ -63,92 +67,117 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-function createFileUploader(options = {}) {
-    const { type = FILE_UPLOADER_TYPE } = options;
-    const createFileUploaderElement = (editor, file, options) => __awaiter(this, void 0, void 0, function* () {
-        const { createElement, getBody, getHeaders, getUrl, uploader, } = options;
-        const [mime] = file.type.split('/');
-        const createByMime = createElement[mime];
-        if (!createByMime) {
-            return;
-        }
-        const { dataURL: createElementByDataURL, response: createElementByResponse } = createByMime;
-        const headers = yield (getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(file));
-        const xhr = uploader || new XMLHttpRequest();
-        const dataURL = yield utils.readFileAsDataURL(file);
-        let sent = false;
-        const fileUploaderElement = {
-            type,
-            register: (getPath, onProgress) => {
-                xhr.onload = () => {
-                    if (xhr.status < 400) {
-                        const path = getPath();
-                        if (path) {
-                            core.HistoryEditor.withoutSaving(editor, () => {
-                                core.Transforms.removeNodes(editor, { at: path });
-                                core.Transforms.insertNodes(editor, createElementByResponse(xhr.response), { at: path });
-                            });
-                        }
-                    }
-                    else {
-                        throw xhr.response;
+const createFileUploaderElementByType = type => (editor, file, options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { createElement, getBody, getHeaders, getUrl, uploader, } = options;
+    const [mime] = file.type.split('/');
+    const createByMime = createElement[mime];
+    if (!createByMime) {
+        return;
+    }
+    const { dataURL: createElementByDataURL, response: createElementByResponse } = createByMime;
+    const headers = yield (getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(file));
+    const xhr = uploader || new XMLHttpRequest();
+    const dataURL = yield utils.readFileAsDataURL(file);
+    let sent = false;
+    const fileUploaderElement = {
+        type,
+        register: (getPath, onProgress) => {
+            xhr.onload = () => {
+                if (xhr.status < 400) {
+                    const path = getPath();
+                    if (path) {
+                        core.HistoryEditor.withoutSaving(editor, () => {
+                            core.Transforms.removeNodes(editor, { at: path });
+                            core.Transforms.insertNodes(editor, createElementByResponse(xhr.response), { at: path });
+                        });
                     }
-                };
-                xhr.upload.onprogress = ({ loaded, total }) => onProgress((loaded * 100) / total);
-                if (!sent) {
-                    sent = true;
-                    xhr.send(getBody(file));
                 }
-                return () => {
-                    xhr.onload = null;
-                    xhr.upload.onprogress = null;
-                };
-            },
-            children: [createElementByDataURL(dataURL)],
-        };
-        xhr.open('POST', getUrl(file));
-        if (headers) {
-            for (const headerName in headers) {
-                xhr.setRequestHeader(headerName, headers[headerName]);
+                else {
+                    throw xhr.response;
+                }
+            };
+            xhr.upload.onprogress = ({ loaded, total }) => onProgress((loaded * 100) / total);
+            if (!sent) {
+                sent = true;
+                xhr.send(getBody(file));
             }
+            return () => {
+                xhr.onload = null;
+                xhr.upload.onprogress = null;
+            };
+        },
+        children: [createElementByDataURL(dataURL)],
+    };
+    xhr.open('POST', getUrl(file));
+    if (headers) {
+        for (const headerName in headers) {
+            xhr.setRequestHeader(headerName, headers[headerName]);
         }
-        return fileUploaderElement;
-    });
+    }
+    return fileUploaderElement;
+});
+function insertFileUploaderElement(editor, fileUploaderElement) {
+    var _a, _b, _c;
+    if (fileUploaderElement) {
+        // Clear empty node
+        if (core.isAboveBlockEmpty(editor)) {
+            core.Transforms.removeNodes(editor, {
+                at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
+            });
+        }
+        core.Transforms.insertNodes(editor, [fileUploaderElement, core.createParagraphElement()], {
+            at: ((_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor.path.length) ? [((_c = editor.selection) === null || _c === void 0 ? void 0 : _c.anchor.path[0]) + 1] : undefined,
+        });
+        core.Transforms.move(editor);
+    }
+}
+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) => {
-                var _a, _b, _c;
-                if (fileUploaderElement) {
-                    // Clear empty node
-                    if (core.isAboveBlockEmpty(editor)) {
-                        core.Transforms.removeNodes(editor, {
-                            at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
-                        });
-                    }
-                    core.Transforms.insertNodes(editor, [fileUploaderElement, core.createParagraphElement()], {
-                        at: ((_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor.path.length) ? [((_c = editor.selection) === null || _c === void 0 ? void 0 : _c.anchor.path[0]) + 1] : undefined,
-                    });
-                    core.Transforms.move(editor);
-                }
+                insertFileUploaderElement(editor, fileUploaderElement);
             });
         }), 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;
 exports.getFilesFromInput = getFilesFromInput;
+exports.insertFileUploaderElement = insertFileUploaderElement;

package/file-uploader/index.d.ts

@@ -1,4 +1,4 @@
 export * from './typings';
 export * from './constants';
 export { GetFilesFromInputOptions, getFilesFromInput } from './getFilesFromInput';
-export { CreateFileUploaderOptions, createFileUploader } from './createFileUploader';
+export { CreateFileUploaderOptions, createFileUploaderElementByType, insertFileUploaderElement, createFileUploader, } from './createFileUploader';

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 } from './createFileUploader.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 {};

package/footnote/createFootnote.js

@@ -1,4 +1,4 @@
-import { isNodesTypeIn, getNodes, Transforms, unwrapNodesByTypes, wrapNodesWithUnhangRange } from '@quadrats/core';
+import { isNodesTypeIn, Transforms, wrapNodesWithUnhangRange, unwrapNodesByTypes, getNodes } from '@quadrats/core';
 import { FOOTNOTE_TYPE } from './constants.js';
 
 /* eslint-disable max-len */

package/heading/constants.d.ts

@@ -1,3 +1,3 @@
 import { HeadingLevel } from './typings';
 export declare const HEADING_TYPE = "heading";
-export declare const HEADING_LEVELS: readonly HeadingLevel[];
+export declare const HEADING_LEVELS: ReadonlyArray<HeadingLevel>;

package/heading/createHeading.js

@@ -1,5 +1,5 @@
-import { Element, Transforms, PARAGRAPH_TYPE, normalizeOnlyInlineOrTextInChildren, getNodes } from '@quadrats/core';
-import { HEADING_TYPE, HEADING_LEVELS } from './constants.js';
+import { PARAGRAPH_TYPE, getNodes, Element, Transforms, normalizeOnlyInlineOrTextInChildren } from '@quadrats/core';
+import { HEADING_LEVELS, HEADING_TYPE } from './constants.js';
 
 function createHeading({ type = HEADING_TYPE, enabledLevels = HEADING_LEVELS, } = {}) {
     const getHeadingNodes = (editor, level, options = {}) => getNodes(editor, Object.assign(Object.assign({}, options), { match: node => node.type === type && node.level === level }));

package/heading/typings.d.ts

@@ -2,6 +2,7 @@ import { Editor, QuadratsElement, GetNodesOptions, Node, NodeEntry, Withable, Wi
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface HeadingElement extends QuadratsElement, WithElementType {
     level: HeadingLevel;
+    align?: 'left' | 'center' | 'right';
 }
 export interface WithEnabledHeadingLevels<L extends HeadingLevel> {
     /**

package/highlight/createHighlight.d.ts

@@ -1,2 +1,2 @@
 import { Editor } from '@quadrats/core';
-export declare function createHighlight<E extends Editor = Editor>(variant?: string): ({ type, variant }?: import("@quadrats/common/toggle-mark").CreateToggleMarkOptions | undefined) => import("@quadrats/common/toggle-mark").ToggleMark<E>;
+export declare function createHighlight<E extends Editor = Editor>(variant?: string): ({ type, variant }?: import("@quadrats/common/toggle-mark").CreateToggleMarkOptions) => import("@quadrats/common/toggle-mark").ToggleMark<E>;

package/image/createImage.js

@@ -1,9 +1,9 @@
 import { isImageUrl } from '@quadrats/utils';
-import { Editor, Transforms, createParagraphElement, Element, normalizeVoidElementChildren, normalizeOnlyInlineOrTextInChildren, getAboveByTypes, isNodesTypeIn, Range } from '@quadrats/core';
+import { Range, isNodesTypeIn, getAboveByTypes, Editor, Transforms, createParagraphElement, Element, normalizeVoidElementChildren, normalizeOnlyInlineOrTextInChildren } from '@quadrats/core';
 import { IMAGE_TYPES } from './constants.js';
 
 function resolveSizeSteps(steps) {
-    let sortedSteps = steps.filter(step => step > 0 && step < 100).sort();
+    let sortedSteps = steps.filter((step) => step > 0 && step < 100).sort();
     if (!sortedSteps.includes(100)) {
         sortedSteps = [...sortedSteps, 100];
     }
@@ -16,12 +16,13 @@ function createImage(options = {}) {
     const getAboveImageFigure = (editor, options) => getAboveByTypes(editor, [types.figure], options);
     const getAboveImageCaption = (editor, options) => getAboveByTypes(editor, [types.caption], options);
     const isNodesInImage = (editor, options) => isNodesTypeIn(editor, [types.image], options);
-    const isSelectionInImage = editor => isNodesInImage(editor);
-    const isSelectionInImageCaption = editor => isNodesTypeIn(editor, [types.caption]);
-    const isCollapsedOnImage = editor => !!editor.selection && Range.isCollapsed(editor.selection) && isSelectionInImage(editor);
+    const isSelectionInImage = (editor) => isNodesInImage(editor);
+    const isSelectionInImageCaption = (editor) => isNodesTypeIn(editor, [types.caption]);
+    const isCollapsedOnImage = (editor) => !!editor.selection && Range.isCollapsed(editor.selection) && isSelectionInImage(editor);
     const createImageElement = (src, hosting) => {
         const imageElement = {
             type: types.image,
+            figureType: types.figure,
             src,
             hosting,
             children: [{ text: '' }],
@@ -51,7 +52,7 @@ function createImage(options = {}) {
         if (!sizeSteps) {
             return percentage;
         }
-        const lowerIndex = sizeSteps.findIndex(step => step >= percentage) - 1;
+        const lowerIndex = sizeSteps.findIndex((step) => step >= percentage) - 1;
         const upperIndex = lowerIndex + 1;
         if (lowerIndex < 0) {
             return sizeSteps[0];
@@ -89,7 +90,7 @@ function createImage(options = {}) {
         insertImage,
         resizeImage,
         with(editor) {
-            const { deleteBackward, deleteForward, insertBreak, isVoid, normalizeNode, } = editor;
+            const { deleteBackward, deleteForward, insertBreak, isVoid, normalizeNode } = editor;
             const deleteCollapsed = (origin, isEdgeMethodName) => {
                 const { selection } = editor;
                 /**
@@ -97,7 +98,7 @@ function createImage(options = {}) {
                  */
                 if (selection && Range.isCollapsed(selection)) {
                     const [, captionPath] = getAboveImageCaption(editor) || [];
-                    if ((captionPath && Editor[isEdgeMethodName](editor, selection.focus, captionPath))) {
+                    if (captionPath && Editor[isEdgeMethodName](editor, selection.focus, captionPath)) {
                         return;
                     }
                 }
@@ -128,7 +129,7 @@ function createImage(options = {}) {
                 }
                 insertBreak();
             };
-            editor.isVoid = element => element.type === types.image || isVoid(element);
+            editor.isVoid = (element) => element.type === types.image || isVoid(element);
             editor.normalizeNode = (entry) => {
                 const [node, path] = entry;
                 if (Element.isElement(node)) {
@@ -140,9 +141,9 @@ function createImage(options = {}) {
                     }
                     else if (node.type === types.image) {
                         const { src, width, hosting } = node;
-                        if (typeof src !== 'string'
-                            || !(width == null || typeof width === 'number')
-                            || !(hosting == null || typeof hosting === 'string')) {
+                        if (typeof src !== 'string' ||
+                            !(width == null || typeof width === 'number') ||
+                            !(hosting == null || typeof hosting === 'string')) {
                             const [, figurePath] = getAboveImageFigure(editor, { at: path }) || [];
                             if (figurePath) {
                                 Transforms.removeNodes(editor, { at: figurePath });

package/image/getImageFigureElementCommonProps.d.ts

@@ -1,6 +1,8 @@
 import { ImageFigureElement } from './typings';
 export declare function getImageFigureElementCommonProps(element: ImageFigureElement): {
     style?: {
+        '--qdr-image-align': 'flex-start' | 'center' | 'flex-end';
+        '--qdr-image-caption-align': 'left' | 'center' | 'right';
         width: string;
     };
 };

package/image/getImageFigureElementCommonProps.js

@@ -1,7 +1,33 @@
 function getImageFigureElementCommonProps(element) {
-    const { width } = element;
+    const { width, align } = element;
     return {
-        style: typeof width === 'number' ? { width: `${width}%` } : undefined,
+        style: {
+            width: typeof width === 'number' ? `${width}%` : 'unset',
+            '--qdr-image-align': (() => {
+                switch (align) {
+                    case 'start':
+                        return 'flex-start';
+                    case 'center':
+                        return 'center';
+                    case 'end':
+                        return 'flex-end';
+                    default:
+                        return 'flex-start';
+                }
+            })(),
+            '--qdr-image-caption-align': (() => {
+                switch (align) {
+                    case 'start':
+                        return 'left';
+                    case 'center':
+                        return 'center';
+                    case 'end':
+                        return 'right';
+                    default:
+                        return 'left';
+                }
+            })(),
+        },
     };
 }