js-draw 1.17.0 → 1.19.1

package/dist/cjs/testing/sendKeyPressRelease.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const inputEvents_1 = require("../inputEvents");
+const sendKeyPressRelease = (editor, key) => {
+    editor.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyPressEvent, key);
+    editor.sendKeyboardEvent(inputEvents_1.InputEvtType.KeyUpEvent, key);
+};
+exports.default = sendKeyPressRelease;

package/dist/cjs/testing/sendPenEvent.d.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import { Point2 } from '@js-draw/math';
-import Pointer from '../Pointer';
+import Pointer, { PointerDevice } from '../Pointer';
 import { InputEvtType } from '../inputEvents';
 /**
  * Dispatch a pen event to the currently selected tool.
@@ -8,5 +8,5 @@ import { InputEvtType } from '../inputEvents';
  *
  * @see {@link sendTouchEvent}
  */
-declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => Pointer;
+declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[], deviceType?: PointerDevice) => Pointer;
 export default sendPenEvent;

package/dist/cjs/testing/sendPenEvent.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Pointer_1 = __importDefault(require("../Pointer"));
+const Pointer_1 = __importStar(require("../Pointer"));
 const inputEvents_1 = require("../inputEvents");
 const getUniquePointerId_1 = __importDefault(require("./getUniquePointerId"));
 /**
@@ -12,9 +35,9 @@ const getUniquePointerId_1 = __importDefault(require("./getUniquePointerId"));
  *
  * @see {@link sendTouchEvent}
  */
-const sendPenEvent = (editor, eventType, point, allPointers) => {
+const sendPenEvent = (editor, eventType, point, allPointers, deviceType = Pointer_1.PointerDevice.Pen) => {
     const id = (0, getUniquePointerId_1.default)(allPointers ?? []);
-    const mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== inputEvents_1.InputEvtType.PointerUpEvt, editor.viewport, id);
+    const mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== inputEvents_1.InputEvtType.PointerUpEvt, editor.viewport, id, deviceType);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
         allPointers: allPointers ?? [

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

@@ -1,6 +1,7 @@
 import { Color4 } from '@js-draw/math';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { PenStyle } from '../tools/Pen';
+import { EraserMode } from '../tools/Eraser';
 export type IconElemType = HTMLImageElement | SVGElement;
 /**
  * Provides icons that can be used in the toolbar and other locations.
@@ -39,7 +40,7 @@ export default class IconProvider {
     makeUndoIcon(): IconElemType;
     makeRedoIcon(): IconElemType;
     makeDropdownIcon(): IconElemType;
-    makeEraserIcon(eraserSize?: number): IconElemType;
+    makeEraserIcon(eraserSize?: number, mode?: EraserMode): IconElemType;
     makeSelectionIcon(): IconElemType;
     makeRotateIcon(): IconElemType;
     makeHandToolIcon(): IconElemType;
@@ -88,6 +89,7 @@ export default class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     protected isRoundedTipPen(penStyle: PenStyle): boolean;
+    protected isPolylinePen(penStyle: PenStyle): boolean;
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo(): string | null;
 }

package/dist/cjs/toolbar/IconProvider.js

@@ -13,6 +13,8 @@ const math_1 = require("@js-draw/math");
 const SVGRenderer_1 = __importDefault(require("../rendering/renderers/SVGRenderer"));
 const Viewport_1 = __importDefault(require("../Viewport"));
 const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
+const PolylineBuilder_1 = require("../components/builders/PolylineBuilder");
+const Eraser_1 = require("../tools/Eraser");
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
 	style='fill: var(--icon-color);'
@@ -117,16 +119,23 @@ class IconProvider {
         icon.setAttribute('viewBox', '-10 -10 110 110');
         return icon;
     }
-    makeEraserIcon(eraserSize) {
+    makeEraserIcon(eraserSize, mode) {
         const icon = document.createElementNS(svgNamespace, 'svg');
         eraserSize ??= 10;
         const scaledSize = eraserSize / 4;
         const eraserColor = '#ff70af';
         // Draw an eraser-like shape. Created with Inkscape
         icon.innerHTML = `
+		<defs>
+			<linearGradient id="dash-pattern">
+				<stop offset="80%" stop-color="${eraserColor}"/>
+				<stop offset="85%" stop-color="white"/>
+				<stop offset="90%" stop-color="${eraserColor}"/>
+			</linearGradient>
+		</defs>
 		<g>
 			<path
-				style="fill:${eraserColor}"
+				style="fill:${mode === Eraser_1.EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor}"
 				stroke="black"
 				transform="rotate(41.35)"
 				d="M 52.5 27
@@ -840,7 +849,10 @@ class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     isRoundedTipPen(penStyle) {
-        return penStyle.factory === FreehandLineBuilder_1.makeFreehandLineBuilder;
+        return penStyle.factory === FreehandLineBuilder_1.makeFreehandLineBuilder || penStyle.factory === PolylineBuilder_1.makePolylineBuilder;
+    }
+    isPolylinePen(penStyle) {
+        return penStyle.factory === PolylineBuilder_1.makePolylineBuilder;
     }
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo() { return null; }

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

@@ -17,9 +17,11 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     dragAndDropHereOrBrowse: string;
     cancel: string;
     submit: string;
+    addAll: string;
     roundedTipPen: string;
+    roundedTipPen2: string;
     flatTipPen: string;
-    selectPenTip: string;
+    selectPenType: string;
     selectShape: string;
     colorLabel: string;
     pen: string;
@@ -30,6 +32,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     resizeImageToSelection: string;
     deleteSelection: string;
     duplicateSelection: string;
+    fullStrokeEraser: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
     colorSelectionCanceledAnnouncement: string;
@@ -54,6 +57,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     strokeAutocorrect: string;
     errorImageHasZeroSize: string;
     describeTheImage: string;
+    fileInput__loading: string;
     penDropdown__baseHelpText: string;
     penDropdown__colorHelpText: string;
     penDropdown__thicknessHelpText: string;
@@ -66,7 +70,10 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     handDropdown__zoomOutHelpText: string;
     handDropdown__resetViewHelpText: string;
     handDropdown__touchPanningHelpText: string;
+    eraserDropdown__baseHelpText: string;
+    eraserDropdown__fullStrokeEraserHelpText: string;
     handDropdown__lockRotationHelpText: string;
+    eraserDropdown__thicknessHelpText: string;
     selectionDropdown__baseHelpText: string;
     selectionDropdown__resizeToHelpText: string;
     selectionDropdown__deleteHelpText: string;

package/dist/cjs/toolbar/localization.js

@@ -17,6 +17,7 @@ exports.defaultToolbarLocalization = {
     chooseFile: 'Choose file',
     dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
     submit: 'Submit',
+    addAll: 'Add all',
     cancel: 'Cancel',
     resetView: 'Reset view',
     thicknessLabel: 'Thickness',
@@ -30,7 +31,8 @@ exports.defaultToolbarLocalization = {
     save: 'Save',
     undo: 'Undo',
     redo: 'Redo',
-    selectPenTip: 'Pen tip',
+    fullStrokeEraser: 'Full stroke eraser',
+    selectPenType: 'Pen type',
     selectShape: 'Shape',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
@@ -48,6 +50,7 @@ exports.defaultToolbarLocalization = {
     strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
+    roundedTipPen2: 'Polyline',
     flatTipPen: 'Flat',
     arrowPen: 'Arrow',
     linePen: 'Line',
@@ -58,11 +61,12 @@ exports.defaultToolbarLocalization = {
     paste: 'Paste',
     errorImageHasZeroSize: 'Error: Image has zero size',
     describeTheImage: 'Image description',
+    fileInput__loading: 'Loading...',
     // Help text
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
     penDropdown__colorHelpText: 'Changes the pen\'s color',
     penDropdown__thicknessHelpText: 'Changes the thickness of strokes drawn by the pen.',
-    penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen tip” style or “shape” can be chosen. Choosing a “pen tip” style draws freehand lines. Choosing a “shape” draws shapes.',
+    penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen” style or “shape” can be chosen. Choosing a “pen” style draws freehand lines. Choosing a “shape” draws shapes.',
     penDropdown__autocorrectHelpText: 'Converts approximate freehand lines and rectangles to perfect ones.\n\nThe pen must be held stationary at the end of a stroke to trigger a correction.',
     penDropdown__stabilizationHelpText: 'Draws smoother strokes.\n\nThis also adds a short delay between the mouse/stylus and the stroke.',
     handDropdown__baseHelpText: 'This tool is responsible for scrolling, rotating, and zooming the editor.',
@@ -72,6 +76,9 @@ exports.defaultToolbarLocalization = {
     handDropdown__zoomDisplayHelpText: 'Shows the current zoom level. 100% shows the image at its actual size.',
     handDropdown__touchPanningHelpText: 'When enabled, touch gestures move the image rather than select or draw.',
     handDropdown__lockRotationHelpText: 'When enabled, prevents touch gestures from rotating the screen.',
+    eraserDropdown__baseHelpText: 'This tool removes strokes, images, and text under the cursor.',
+    eraserDropdown__thicknessHelpText: 'Changes the size of the eraser.',
+    eraserDropdown__fullStrokeEraserHelpText: 'When in full-stroke mode, entire shapes are erased.\n\nWhen not in full-stroke mode, shapes can be partially erased.',
     selectionDropdown__baseHelpText: 'Selects content and manipulates the selection',
     selectionDropdown__resizeToHelpText: 'Crops the drawing to the size of what\'s currently selected.\n\nIf auto-resize is enabled, it will be disabled.',
     selectionDropdown__deleteHelpText: 'Erases selected items.',

package/dist/cjs/toolbar/widgets/BaseWidget.d.ts

@@ -126,6 +126,7 @@ export default abstract class BaseWidget {
     setHidden(hidden: boolean): void;
     /** Set whether the widget is contained within another. @internal */
     setIsToplevel(toplevel: boolean): void;
+    /** Returns true if the menu for this widget is open. */
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -405,6 +405,7 @@ class BaseWidget {
     setIsToplevel(toplevel) {
         this.toplevel = toplevel;
     }
+    /** Returns true if the menu for this widget is open. */
     isDropdownVisible() {
         return this.dropdown?.visible?.get() ?? false;
     }

package/dist/cjs/toolbar/widgets/EraserToolWidget.d.ts

@@ -1,15 +1,20 @@
 import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
 import { ToolbarLocalization } from '../localization';
+import HelpDisplay from '../utils/HelpDisplay';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class EraserToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
+    protected getHelpText(): string;
     protected getTitle(): string;
+    private makeIconForType;
     protected createIcon(): Element;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private static idCounter;
+    private makeEraserTypeSelector;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;
 }

package/dist/cjs/toolbar/widgets/EraserToolWidget.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const Eraser_1 = require("../../tools/Eraser");
 const types_1 = require("../../types");
 const constants_1 = require("../constants");
 const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
@@ -19,26 +20,57 @@ class EraserToolWidget extends BaseToolWidget_1.default {
             }
         });
     }
+    getHelpText() {
+        return this.localizationTable.eraserDropdown__baseHelpText;
+    }
     getTitle() {
         return this.localizationTable.eraser;
     }
+    makeIconForType(mode) {
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness(), mode);
+    }
     createIcon() {
-        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+        return this.makeIconForType(this.tool.getModeValue().get());
+    }
+    makeEraserTypeSelector(helpDisplay) {
+        const container = document.createElement('div');
+        const labelElement = document.createElement('label');
+        const checkboxElement = document.createElement('input');
+        checkboxElement.id = `${constants_1.toolbarCSSPrefix}eraserToolWidget-${EraserToolWidget.idCounter++}`;
+        labelElement.htmlFor = checkboxElement.id;
+        labelElement.innerText = this.localizationTable.fullStrokeEraser;
+        checkboxElement.type = 'checkbox';
+        checkboxElement.oninput = () => {
+            this.tool.getModeValue().set(checkboxElement.checked ? Eraser_1.EraserMode.FullStroke : Eraser_1.EraserMode.PartialStroke);
+        };
+        const updateValue = () => {
+            checkboxElement.checked = this.tool.getModeValue().get() === Eraser_1.EraserMode.FullStroke;
+        };
+        container.replaceChildren(labelElement, checkboxElement);
+        helpDisplay?.registerTextHelpForElement(container, this.localizationTable.eraserDropdown__fullStrokeEraserHelpText);
+        return {
+            addTo: (parent) => {
+                parent.appendChild(container);
+            },
+            updateValue,
+        };
     }
-    fillDropdown(dropdown) {
+    fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
         const thicknessSlider = (0, makeThicknessSlider_1.default)(this.editor, thickness => {
             this.tool.setThickness(thickness);
         });
         thicknessSlider.setBounds(10, 55);
+        helpDisplay?.registerTextHelpForElement(thicknessSlider.container, this.localizationTable.eraserDropdown__thicknessHelpText);
+        const modeSelector = this.makeEraserTypeSelector(helpDisplay);
         this.updateInputs = () => {
             thicknessSlider.setValue(this.tool.getThickness());
+            modeSelector.updateValue();
         };
         this.updateInputs();
-        const spacer = document.createElement('div');
-        spacer.style.height = '5px';
-        container.replaceChildren(thicknessSlider.container, spacer);
+        container.replaceChildren(thicknessSlider.container);
+        modeSelector.addTo(container);
         dropdown.replaceChildren(container);
         return true;
     }
@@ -46,6 +78,7 @@ class EraserToolWidget extends BaseToolWidget_1.default {
         return {
             ...super.serializeState(),
             thickness: this.tool.getThickness(),
+            mode: this.tool.getModeValue().get(),
         };
     }
     deserializeFrom(state) {
@@ -57,6 +90,13 @@ class EraserToolWidget extends BaseToolWidget_1.default {
             }
             this.tool.setThickness(parsedThickness);
         }
+        if (state.mode) {
+            const mode = state.mode;
+            if (Object.values(Eraser_1.EraserMode).includes(mode)) {
+                this.tool.getModeValue().set(mode);
+            }
+        }
     }
 }
+EraserToolWidget.idCounter = 0;
 exports.default = EraserToolWidget;

package/dist/cjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts

@@ -0,0 +1,22 @@
+import { RenderableImage } from 'js-draw/src/rendering/renderers/AbstractRenderer';
+/** Handles filtering and other operations on an image. */
+export declare class ImageWrapper {
+    private imageBase64Url;
+    private preview;
+    private onUrlUpdate;
+    private readonly originalSrc;
+    private altText;
+    private constructor();
+    private updateImageData;
+    decreaseSize(resizeFactor?: number): void;
+    reset(): void;
+    isChanged(): boolean;
+    getBase64Url(): string;
+    getAltText(): string;
+    setAltText(text: string): void;
+    static fromSrcAndPreview(initialBase64Src: string, preview: HTMLImageElement, onUrlUpdate: () => void): ImageWrapper;
+    static fromRenderable(renderable: RenderableImage, onUrlUpdate: () => void): {
+        wrapper: ImageWrapper;
+        preview: HTMLImageElement;
+    };
+}

package/dist/cjs/toolbar/widgets/InsertImageWidget/ImageWrapper.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWrapper = void 0;
+/** Handles filtering and other operations on an image. */
+class ImageWrapper {
+    constructor(imageBase64Url, preview, onUrlUpdate) {
+        this.imageBase64Url = imageBase64Url;
+        this.preview = preview;
+        this.onUrlUpdate = onUrlUpdate;
+        this.originalSrc = imageBase64Url;
+        preview.src = imageBase64Url;
+    }
+    updateImageData(base64DataUrl) {
+        this.preview.src = base64DataUrl;
+        this.imageBase64Url = base64DataUrl;
+        this.onUrlUpdate();
+    }
+    decreaseSize(resizeFactor = 3 / 4) {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.preview.naturalWidth * resizeFactor;
+        canvas.height = this.preview.naturalHeight * resizeFactor;
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(this.preview, 0, 0, canvas.width, canvas.height);
+        // JPEG can be much smaller than PNG for the same image size. Prefer it if
+        // the image is already a JPEG.
+        const format = this.originalSrc?.startsWith('data:image/jpeg;') ? 'image/jpeg' : 'image/png';
+        this.updateImageData(canvas.toDataURL(format));
+    }
+    reset() {
+        this.updateImageData(this.originalSrc);
+    }
+    isChanged() {
+        return this.imageBase64Url !== this.originalSrc;
+    }
+    getBase64Url() {
+        return this.imageBase64Url;
+    }
+    getAltText() {
+        return this.altText;
+    }
+    setAltText(text) {
+        this.altText = text;
+    }
+    static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
+        return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);
+    }
+    static fromRenderable(renderable, onUrlUpdate) {
+        const preview = new Image();
+        preview.src = renderable.base64Url;
+        const result = new ImageWrapper(renderable.base64Url, preview, onUrlUpdate);
+        const altText = renderable.label ?? renderable.image.getAttribute('alt');
+        if (altText) {
+            result.setAltText(altText);
+        }
+        return { wrapper: result, preview };
+    }
+}
+exports.ImageWrapper = ImageWrapper;

package/dist/cjs/toolbar/widgets/InsertImageWidget/fileToImages.d.ts

@@ -0,0 +1,3 @@
+import type { RenderableImage } from '../../../rendering/renderers/AbstractRenderer';
+declare const fileToImages: (imageFile: File) => Promise<RenderableImage[]>;
+export default fileToImages;

package/dist/cjs/toolbar/widgets/InsertImageWidget/fileToImages.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fileToBase64Url_1 = __importDefault(require("../../../util/fileToBase64Url"));
+const math_1 = require("@js-draw/math");
+const fileToImages = async (imageFile) => {
+    const result = [];
+    const imageElement = new Image();
+    const base64Url = await (0, fileToBase64Url_1.default)(imageFile);
+    if (base64Url) {
+        result.push({
+            image: imageElement,
+            base64Url: base64Url,
+            transform: math_1.Mat33.identity,
+        });
+    }
+    return result;
+};
+exports.default = fileToImages;

package/dist/cjs/toolbar/widgets/InsertImageWidget/index.d.ts

@@ -0,0 +1,37 @@
+import Editor from '../../../Editor';
+import { ToolbarLocalization } from '../../localization';
+import BaseWidget from '../BaseWidget';
+/**
+ * Provides a widget that allows inserting or modifying raster images.
+ *
+ * It's possible to customize the file picker used by this widget through {@link EditorSettings.image}.
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, makeEdgeToolbar, InsertImageWidget } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ *
+ * toolbar.addWidget(new InsertImageWidget(editor));
+ * ```
+ */
+export default class InsertImageWidget extends BaseWidget {
+    private images;
+    private imagesPreview;
+    private selectedFiles;
+    private imageAltTextInput;
+    private statusView;
+    private submitButton;
+    constructor(editor: Editor, localization?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected setDropdownVisible(visible: boolean): void;
+    protected handleClick(): void;
+    private static nextInputId;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private onImageDataUpdate;
+    private hideDialog;
+    private updateImageSizeDisplay;
+    private updateInputs;
+}