js-draw 0.10.3 → 0.11.1

package/dist/src/Editor.d.ts

@@ -29,6 +29,7 @@ import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
+import AbstractComponent from './components/AbstractComponent';
 type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
@@ -157,7 +158,7 @@ export declare class Editor {
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem: HTMLElement): void;
     /** `apply` a command. `command` will be announced for accessibility. */
-    dispatch(command: Command, addToHistory?: boolean): void;
+    dispatch(command: Command, addToHistory?: boolean): void | Promise<void>;
     /**
      * Dispatches a command without announcing it. By default, does not add to history.
      * Use this to show finalized commands that don't need to have `announceForAccessibility`
@@ -173,7 +174,7 @@ export declare class Editor {
      * editor.dispatchNoAnnounce(editor.viewport.zoomTo(someRectangle), addToHistory);
      * ```
      */
-    dispatchNoAnnounce(command: Command, addToHistory?: boolean): void;
+    dispatchNoAnnounce(command: Command, addToHistory?: boolean): void | Promise<void>;
     /**
      * Apply a large transformation in chunks.
      * If `apply` is `false`, the commands are unapplied.
@@ -185,8 +186,15 @@ export declare class Editor {
     asyncUnapplyCommands(commands: Command[], chunkSize: number): Promise<void>;
     private announceUndoCallback;
     private announceRedoCallback;
+    private nextRerenderListeners;
     private rerenderQueued;
-    queueRerender(): void;
+    /**
+     * Schedule a re-render for some time in the near future. Does not schedule an additional
+     * re-render if a re-render is already queued.
+     *
+     * @returns a promise that resolves when
+     */
+    queueRerender(): Promise<void>;
     rerender(showImageBounds?: boolean): void;
     drawWetInk(...path: RenderablePathSpec[]): void;
     clearWetInk(): void;
@@ -197,6 +205,7 @@ export declare class Editor {
     addStyleSheet(content: string): HTMLStyleElement;
     sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
+    addAndCenterComponents(components: AbstractComponent[], selectComponents?: boolean): Promise<void>;
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
     loadFrom(loader: ImageLoader): Promise<void>;

package/dist/src/Editor.js

@@ -45,6 +45,9 @@ import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
 import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 import untilNextAnimationFrame from './util/untilNextAnimationFrame';
+import fileToBase64 from './util/fileToBase64';
+import uniteCommands from './commands/uniteCommands';
+import SelectionTool from './tools/SelectionTool/SelectionTool';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -81,6 +84,8 @@ export class Editor {
         this.announceRedoCallback = (command) => {
             this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this, this.localization)));
         };
+        // Listeners to be called once at the end of the next re-render.
+        this.nextRerenderListeners = [];
         this.rerenderQueued = false;
         this.localization = Object.assign(Object.assign({}, getLocalizationTable()), settings.localization);
         // Fill default settings.
@@ -372,18 +377,12 @@ export class Editor {
             for (const file of clipboardData.files) {
                 const fileType = file.type.toLowerCase();
                 if (fileType === 'image/png' || fileType === 'image/jpg') {
-                    const reader = new FileReader();
                     this.showLoadingWarning(0);
+                    const onprogress = (evt) => {
+                        this.showLoadingWarning(evt.loaded / evt.total);
+                    };
                     try {
-                        const data = yield new Promise((resolve, reject) => {
-                            reader.onload = () => resolve(reader.result);
-                            reader.onerror = reject;
-                            reader.onabort = reject;
-                            reader.onprogress = (evt) => {
-                                this.showLoadingWarning(evt.loaded / evt.total);
-                            };
-                            reader.readAsDataURL(file);
-                        });
+                        const data = yield fileToBase64(file, onprogress);
                         if (data && this.toolController.dispatchInputEvent({
                             kind: InputEvtType.PasteEvent,
                             mime: fileType,
@@ -477,14 +476,9 @@ export class Editor {
     }
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
-        if (addToHistory) {
-            // .push applies [command] to this
-            this.history.push(command);
-        }
-        else {
-            command.apply(this);
-        }
+        const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
         this.announceForAccessibility(command.description(this, this.localization));
+        return dispatchResult;
     }
     /**
      * Dispatches a command without announcing it. By default, does not add to history.
@@ -503,11 +497,10 @@ export class Editor {
      */
     dispatchNoAnnounce(command, addToHistory = false) {
         if (addToHistory) {
-            this.history.push(command);
-        }
-        else {
-            command.apply(this);
+            const apply = false; // Don't double-apply
+            this.history.push(command, apply);
         }
+        return command.apply(this);
     }
     /**
      * Apply a large transformation in chunks.
@@ -550,16 +543,27 @@ export class Editor {
     asyncUnapplyCommands(commands, chunkSize) {
         return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
     }
-    // Schedule a re-render for some time in the near future. Does not schedule an additional
-    // re-render if a re-render is already queued.
+    /**
+     * Schedule a re-render for some time in the near future. Does not schedule an additional
+     * re-render if a re-render is already queued.
+     *
+     * @returns a promise that resolves when
+     */
     queueRerender() {
         if (!this.rerenderQueued) {
             this.rerenderQueued = true;
             requestAnimationFrame(() => {
-                this.rerender();
-                this.rerenderQueued = false;
+                // If .rerender was called manually, we might not need to
+                // re-render.
+                if (this.rerenderQueued) {
+                    this.rerender();
+                    this.rerenderQueued = false;
+                }
             });
         }
+        return new Promise(resolve => {
+            this.nextRerenderListeners.push(() => resolve());
+        });
     }
     rerender(showImageBounds = true) {
         this.display.startRerender();
@@ -576,6 +580,8 @@ export class Editor {
             renderer.drawRect(this.importExportViewport.visibleRect, exportRectStrokeWidth, exportRectFill);
         }
         this.rerenderQueued = false;
+        this.nextRerenderListeners.forEach(listener => listener());
+        this.nextRerenderListeners = [];
     }
     drawWetInk(...path) {
         for (const part of path) {
@@ -628,6 +634,47 @@ export class Editor {
             current: mainPointer,
         });
     }
+    addAndCenterComponents(components, selectComponents = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let bbox = null;
+            for (const component of components) {
+                if (bbox) {
+                    bbox = bbox.union(component.getBBox());
+                }
+                else {
+                    bbox = component.getBBox();
+                }
+            }
+            if (!bbox) {
+                return;
+            }
+            // Find a transform that scales/moves bbox onto the screen.
+            const visibleRect = this.viewport.visibleRect;
+            const scaleRatioX = visibleRect.width / bbox.width;
+            const scaleRatioY = visibleRect.height / bbox.height;
+            let scaleRatio = scaleRatioX;
+            if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+                scaleRatio = scaleRatioY;
+            }
+            scaleRatio *= 2 / 3;
+            scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+            const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
+            const commands = [];
+            for (const component of components) {
+                // To allow deserialization, we need to add first, then transform.
+                commands.push(EditorImage.addElement(component));
+                commands.push(component.transformBy(transfm));
+            }
+            const applyChunkSize = 100;
+            yield this.dispatch(uniteCommands(commands, applyChunkSize), true);
+            if (selectComponents) {
+                for (const selectionTool of this.toolController.getMatchingTools(SelectionTool)) {
+                    selectionTool.setEnabled(true);
+                    selectionTool.setSelection(components);
+                }
+            }
+        });
+    }
     // Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
     // If `format` is not `image/png`, a PNG image URL may still be returned (as in the
     // case of `HTMLCanvasElement::toDataURL`).

package/dist/src/EditorImage.js

@@ -2,7 +2,7 @@ var _a;
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './math/Rect2';
 import SerializableCommand from './commands/SerializableCommand';
-// @internal
+// @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
 };

package/dist/src/SVGLoader.js

@@ -233,16 +233,17 @@ export default class SVGLoader {
         }
     }
     addImage(elem) {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             const image = new Image();
             image.src = (_a = elem.getAttribute('xlink:href')) !== null && _a !== void 0 ? _a : elem.href.baseVal;
+            image.setAttribute('alt', (_b = elem.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '');
             try {
                 const supportedAttrs = [];
                 const transform = this.getTransform(elem, supportedAttrs);
                 const imageElem = yield ImageComponent.fromImage(image, transform);
                 this.attachUnrecognisedAttrs(imageElem, elem, new Set(supportedAttrs), new Set(['transform']));
-                (_b = this.onAddComponent) === null || _b === void 0 ? void 0 : _b.call(this, imageElem);
+                (_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, imageElem);
             }
             catch (e) {
                 console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');

package/dist/src/components/AbstractComponent.d.ts

@@ -28,6 +28,7 @@ export default abstract class AbstractComponent {
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
+    setZIndex(newZIndex: number): SerializableCommand;
     isSelectable(): boolean;
     getProportionalRenderingTime(): number;
     private static transformElementCommandId;

package/dist/src/components/AbstractComponent.js

@@ -48,6 +48,10 @@ export default class AbstractComponent {
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this);
     }
+    // Returns a command that updates this component's z-index.
+    setZIndex(newZIndex) {
+        return new AbstractComponent.TransformElementCommand(Mat33.identity, this, newZIndex);
+    }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
         return true;
@@ -126,10 +130,11 @@ AbstractComponent.zIndexCounter = 0;
 AbstractComponent.deserializationCallbacks = {};
 AbstractComponent.transformElementCommandId = 'transform-element';
 AbstractComponent.UnresolvedTransformElementCommand = class extends SerializableCommand {
-    constructor(affineTransfm, componentID) {
+    constructor(affineTransfm, componentID, targetZIndex) {
         super(AbstractComponent.transformElementCommandId);
         this.affineTransfm = affineTransfm;
         this.componentID = componentID;
+        this.targetZIndex = targetZIndex;
         this.command = null;
     }
     resolveCommand(editor) {
@@ -140,7 +145,7 @@ AbstractComponent.UnresolvedTransformElementCommand = class extends Serializable
         if (!component) {
             throw new Error(`Unable to resolve component with ID ${this.componentID}`);
         }
-        this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component);
+        this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component, this.targetZIndex);
     }
     apply(editor) {
         this.resolveCommand(editor);
@@ -157,15 +162,17 @@ AbstractComponent.UnresolvedTransformElementCommand = class extends Serializable
         return {
             id: this.componentID,
             transfm: this.affineTransfm.toArray(),
+            targetZIndex: this.targetZIndex,
         };
     }
 };
 AbstractComponent.TransformElementCommand = (_a = class extends SerializableCommand {
-        constructor(affineTransfm, component) {
+        constructor(affineTransfm, component, targetZIndex) {
             super(AbstractComponent.transformElementCommandId);
             this.affineTransfm = affineTransfm;
             this.component = component;
             this.origZIndex = component.zIndex;
+            this.targetZIndex = targetZIndex !== null && targetZIndex !== void 0 ? targetZIndex : AbstractComponent.zIndexCounter++;
         }
         updateTransform(editor, newTransfm) {
             // Any parent should have only one direct child.
@@ -182,7 +189,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
             }
         }
         apply(editor) {
-            this.component.zIndex = AbstractComponent.zIndexCounter++;
+            this.component.zIndex = this.targetZIndex;
             this.updateTransform(editor, this.affineTransfm);
             editor.queueRerender();
         }
@@ -198,6 +205,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
             return {
                 id: this.component.getId(),
                 transfm: this.affineTransfm.toArray(),
+                targetZIndex: this.targetZIndex,
             };
         }
     },
@@ -205,10 +213,11 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
         SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
             const elem = editor.image.lookupElement(json.id);
             const transform = new Mat33(...json.transfm);
+            const targetZIndex = json.targetZIndex;
             if (!elem) {
-                return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id);
+                return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id, targetZIndex);
             }
-            return new AbstractComponent.TransformElementCommand(transform, elem);
+            return new AbstractComponent.TransformElementCommand(transform, elem, targetZIndex);
         });
     })(),
     _a);

package/dist/src/components/ImageComponent.d.ts

@@ -23,6 +23,9 @@ export default class ImageComponent extends AbstractComponent {
     };
     protected applyTransformation(affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;
+    getAltText(): string | undefined;
+    getURL(): string;
+    getTransformation(): Mat33;
     protected createClone(): AbstractComponent;
     static deserializeFromJSON(data: any): ImageComponent;
 }

package/dist/src/components/ImageComponent.js

@@ -33,7 +33,7 @@ export default class ImageComponent extends AbstractComponent {
     }
     // Load from an image. Waits for the image to load if incomplete.
     static fromImage(elem, transform) {
-        var _a;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             if (!elem.complete) {
                 yield new Promise((resolve, reject) => {
@@ -70,6 +70,8 @@ export default class ImageComponent extends AbstractComponent {
                 image.width = width;
                 image.height = height;
             }
+            image.setAttribute('alt', (_b = elem.getAttribute('alt')) !== null && _b !== void 0 ? _b : '');
+            image.setAttribute('aria-label', (_c = elem.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : '');
             return new ImageComponent({
                 image,
                 base64Url: url,
@@ -111,6 +113,15 @@ export default class ImageComponent extends AbstractComponent {
     description(localizationTable) {
         return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
     }
+    getAltText() {
+        return this.image.label;
+    }
+    getURL() {
+        return this.image.base64Url;
+    }
+    getTransformation() {
+        return this.image.transform;
+    }
     createClone() {
         return new ImageComponent(Object.assign({}, this.image));
     }

package/dist/src/localizations/es.js

@@ -14,5 +14,5 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
         return `Color fue cambiado a ${color}`;
     }, keyboardPanZoom: 'Mover la pantalla con el teclado', penTool: function (penId) {
         return `Lapiz ${penId}`;
-    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto' });
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto', image: 'Imagen', imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`, imageLoadError: (message) => `Error cargando imagen: ${message}` });
 export default localization;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -188,15 +188,19 @@ export default class SVGRenderer extends AbstractRenderer {
         }
     }
     drawImage(image) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
+        let label = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '';
+        if (label === '') {
+            label = (_c = image.image.getAttribute('alt')) !== null && _c !== void 0 ? _c : '';
+        }
         const svgImgElem = document.createElementNS(svgNameSpace, 'image');
         svgImgElem.setAttribute('href', image.base64Url);
-        svgImgElem.setAttribute('width', (_a = image.image.getAttribute('width')) !== null && _a !== void 0 ? _a : '');
-        svgImgElem.setAttribute('height', (_b = image.image.getAttribute('height')) !== null && _b !== void 0 ? _b : '');
-        svgImgElem.setAttribute('aria-label', (_d = (_c = image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : image.image.getAttribute('alt')) !== null && _d !== void 0 ? _d : '');
+        svgImgElem.setAttribute('width', (_d = image.image.getAttribute('width')) !== null && _d !== void 0 ? _d : '');
+        svgImgElem.setAttribute('height', (_e = image.image.getAttribute('height')) !== null && _e !== void 0 ? _e : '');
+        svgImgElem.setAttribute('aria-label', label);
         this.transformFrom(image.transform, svgImgElem);
         this.elem.appendChild(svgImgElem);
-        (_e = this.objectElems) === null || _e === void 0 ? void 0 : _e.push(svgImgElem);
+        (_f = this.objectElems) === null || _f === void 0 ? void 0 : _f.push(svgImgElem);
     }
     startObject(boundingBox) {
         super.startObject(boundingBox);

package/dist/src/toolbar/HTMLToolbar.js

@@ -12,7 +12,7 @@ import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
-import { ActionButtonWidget } from './lib';
+import { ActionButtonWidget, InsertImageWidget } from './lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -179,6 +179,7 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(TextTool)) {
             this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
         }
+        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
         const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
         if (panZoomTool) {
             this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));

package/dist/src/toolbar/IconProvider.d.ts

@@ -19,6 +19,7 @@ export default class IconProvider {
     makeAllDevicePanningIcon(): IconType;
     makeZoomIcon(): IconType;
     makeRotationLockIcon(): IconType;
+    makeInsertImageIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
     makePenIcon(tipThickness: number, color: string | Color4, roundedTip?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -284,6 +284,13 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '10 10 70 70');
         return icon;
     }
+    makeInsertImageIcon() {
+        return this.makeIconFromPath(`
+			M 5 10 L 5 90 L 95 90 L 95 10 L 5 10 z
+			M 10 15 L 90 15 L 90 50 L 70 75 L 40 50 L 10 75 L 10 15 z
+			M 22.5 25 A 7.5 7.5 0 0 0 15 32.5 A 7.5 7.5 0 0 0 22.5 40 A 7.5 7.5 0 0 0 30 32.5 A 7.5 7.5 0 0 0 22.5 25 z 
+		`);
+    }
     makeTextIcon(textStyle) {
         var _a, _b;
         const icon = document.createElementNS(svgNamespace, 'svg');

package/dist/src/toolbar/localization.d.ts

@@ -7,6 +7,11 @@ export interface ToolbarLocalization {
     filledRectanglePen: string;
     linePen: string;
     arrowPen: string;
+    image: string;
+    inputAltText: string;
+    chooseFile: string;
+    cancel: string;
+    submit: string;
     freehandPen: string;
     pressureSensitiveFreehandPen: string;
     selectObjectType: string;
@@ -27,9 +32,12 @@ export interface ToolbarLocalization {
     resetView: string;
     selectionToolKeyboardShortcuts: string;
     paste: string;
+    errorImageHasZeroSize: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;
     colorChangedAnnouncement: (color: string) => string;
+    imageSize: (size: number, units: string) => string;
+    imageLoadError: (message: string) => string;
 }
 export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/src/toolbar/localization.js

@@ -4,6 +4,11 @@ export const defaultToolbarLocalization = {
     select: 'Select',
     handTool: 'Pan',
     zoom: 'Zoom',
+    image: 'Image',
+    inputAltText: 'Alt text: ',
+    chooseFile: 'Choose file: ',
+    submit: 'Submit',
+    cancel: 'Cancel',
     resetView: 'Reset view',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
@@ -31,4 +36,7 @@ export const defaultToolbarLocalization = {
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
     colorChangedAnnouncement: (color) => `Color changed to ${color}`,
+    imageSize: (size, units) => `Image size: ${size} ${units}`,
+    errorImageHasZeroSize: 'Error: Image has zero size',
+    imageLoadError: (message) => `Error loading image: ${message}`,
 };

package/dist/src/toolbar/widgets/InsertImageWidget.d.ts

@@ -0,0 +1,19 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+export default class InsertImageWidget extends ActionButtonWidget {
+    private imageSelectionOverlay;
+    private imagePreview;
+    private imageFileInput;
+    private imageAltTextInput;
+    private statusView;
+    private imageBase64URL;
+    private submitButton;
+    constructor(editor: Editor, localization?: ToolbarLocalization);
+    private static nextInputId;
+    private fillOverlay;
+    private hideDialog;
+    private updateImageSizeDisplay;
+    private clearInputs;
+    private onClicked;
+}