js-draw 1.3.1 → 1.4.1

package/dist/mjs/Editor.mjs

@@ -1,14 +1,13 @@
-import  EditorImage  from './EditorImage.mjs';
+import  EditorImage  from './image/EditorImage.mjs';
 import  ToolController  from './tools/ToolController.mjs';
 import  { EditorEventType }  from './types.mjs';
 import  { InputEvtType, keyUpEventFromHTMLEvent, keyPressEventFromHTMLEvent }  from './inputEvents.mjs';
 import  UndoRedoHistory  from './UndoRedoHistory.mjs';
 import  Viewport  from './Viewport.mjs';
 import  EventDispatcher  from './EventDispatcher.mjs';
-import { Vec2, Vec3, Color4, Mat33, toRoundedString } from '@js-draw/math';
+import { Vec2, Vec3, Color4, Mat33 } from '@js-draw/math';
 import  Display, { RenderingMode }  from './rendering/Display.mjs';
-import  SVGRenderer  from './rendering/renderers/SVGRenderer.mjs';
-import  SVGLoader, { svgLoaderAutoresizeClassName }  from './SVGLoader.mjs';
+import  SVGLoader  from './SVGLoader.mjs';
 import  Pointer  from './Pointer.mjs';
 import  getLocalizationTable  from './localizations/getLocalizationTable.mjs';
 import  IconProvider  from './toolbar/IconProvider.mjs';
@@ -26,6 +25,8 @@ import  StrokeKeyboardControl  from './tools/InputFilter/StrokeKeyboardControl.m
 import  guessKeyCodeFromKey  from './util/guessKeyCodeFromKey.mjs';
 import  makeAboutDialog  from './dialogs/makeAboutDialog.mjs';
 import  version  from './version.mjs';
+import  { editorImageToSVGSync, editorImageToSVGAsync }  from './image/export/editorImageToSVG.mjs';
+import  { MutableReactiveValue }  from './util/ReactiveValue.mjs';
 /**
  * The main entrypoint for the full editor.
  *
@@ -110,6 +111,7 @@ export class Editor {
         if (this.settings.minZoom > this.settings.maxZoom) {
             throw new Error('Minimum zoom must be lesser than maximum zoom!');
         }
+        this.readOnly = MutableReactiveValue.fromInitialValue(false);
         this.icons = this.settings.iconProvider;
         this.shortcuts = new KeyboardShortcutManager(this.settings.keyboardShortcutOverrides);
         this.container = document.createElement('div');
@@ -660,6 +662,26 @@ export class Editor {
         };
         this.eventListenerTargets.push(elem);
     }
+    /**
+     * Attempts to prevent **user-triggered** events from modifying
+     * the content of the image.
+     */
+    setReadOnly(readOnly) {
+        if (readOnly !== this.readOnly.get()) {
+            this.readOnly.set(readOnly);
+            this.notifier.dispatch(EditorEventType.ReadOnlyModeToggled, {
+                kind: EditorEventType.ReadOnlyModeToggled,
+                editorIsReadOnly: readOnly,
+            });
+        }
+    }
+    // @internal
+    isReadOnlyReactiveValue() {
+        return this.readOnly;
+    }
+    isReadOnly() {
+        return this.readOnly;
+    }
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
         const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
@@ -938,31 +960,42 @@ export class Editor {
     /**
      * Converts the editor's content into an SVG image.
      *
+     * If the output SVG has width or height less than `options.minDimension`, its size
+     * will be increased.
+     *
      * @see
      * {@link SVGRenderer}
      */
-    toSVG() {
-        const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
-        const sanitize = false;
-        const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, sanitize);
-        const origTransform = importExportViewport.canvasToScreenTransform;
-        // Render with (0,0) at (0,0) — we'll handle translation with
-        // the viewBox property.
-        importExportViewport.resetTransform(Mat33.identity);
-        this.image.renderAll(renderer);
-        importExportViewport.resetTransform(origTransform);
-        // Just show the main region
-        const rect = importExportViewport.visibleRect;
-        result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
-        result.setAttribute('width', toRoundedString(rect.w));
-        result.setAttribute('height', toRoundedString(rect.h));
-        if (this.image.getAutoresizeEnabled()) {
-            result.classList.add(svgLoaderAutoresizeClassName);
-        }
-        else {
-            result.classList.remove(svgLoaderAutoresizeClassName);
-        }
-        return result;
+    toSVG(options) {
+        return editorImageToSVGSync(this.image, options ?? {});
+    }
+    /**
+     * Converts the editor's content into an SVG image in an asynchronous,
+     * but **potentially lossy** way.
+     *
+     * **Warning**: If the image is being edited during an async rendering, edited components
+     * may not be rendered.
+     *
+     * Like {@link toSVG}, but can be configured to briefly pause after processing every
+     * `pauseAfterCount` items. This can prevent the editor from becoming unresponsive
+     * when saving very large images.
+     */
+    async toSVGAsync(options = {}) {
+        const pauseAfterCount = options.pauseAfterCount ?? 100;
+        return await editorImageToSVGAsync(this.image, async (_component, processedCount, totalComponents) => {
+            if (options.onProgress) {
+                const shouldContinue = await options.onProgress(processedCount, totalComponents);
+                if (shouldContinue === false) {
+                    return false;
+                }
+            }
+            if (processedCount % pauseAfterCount === 0) {
+                await untilNextAnimationFrame();
+            }
+            return true;
+        }, {
+            minDimension: options.minDimension,
+        });
     }
     /**
      * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
@@ -1114,10 +1147,14 @@ export class Editor {
         this.closeAboutDialog?.();
         this.closeAboutDialog = makeAboutDialog(this, notices).close;
     }
-    /** Removes and destroys the editor */
+    /**
+     * Removes and **destroys** the editor. The editor cannot be added to a parent
+     * again after calling this method.
+     */
     remove() {
         this.container.remove();
         // TODO: Is additional cleanup necessary here?
+        this.toolController.onEditorDestroyed();
     }
 }
 export default Editor;

package/dist/mjs/Editor.toSVGAsync.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/commands/Erase.mjs

@@ -1,5 +1,5 @@
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
-import  EditorImage  from '../EditorImage.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
 /**
  * Removes the given {@link AbstractComponent}s from the image.

package/dist/mjs/commands/UnresolvedCommand.d.ts

@@ -1,4 +1,4 @@
-import EditorImage from '../EditorImage';
+import EditorImage from '../image/EditorImage';
 import AbstractComponent from '../components/AbstractComponent';
 import SerializableCommand from './SerializableCommand';
 export type ResolveFromComponentCallback = () => SerializableCommand;

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

@@ -1,5 +1,5 @@
 import SerializableCommand from '../commands/SerializableCommand';
-import EditorImage from '../EditorImage';
+import EditorImage from '../image/EditorImage';
 import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';

package/dist/mjs/components/AbstractComponent.mjs

@@ -4,7 +4,7 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 };
 var _a;
 import  SerializableCommand  from '../commands/SerializableCommand.mjs';
-import  EditorImage  from '../EditorImage.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
 import { Mat33 } from '@js-draw/math';
 import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
 export var ComponentSizingMode;

package/dist/mjs/components/BackgroundComponent.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../Editor';
-import EditorImage from '../EditorImage';
+import EditorImage from '../image/EditorImage';
 import SerializableCommand from '../commands/SerializableCommand';
 import { LineSegment2, Mat33, Rect2, Color4 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';

package/dist/mjs/components/BackgroundComponent.mjs

@@ -1,4 +1,4 @@
-import  { EditorImageEventType }  from '../EditorImage.mjs';
+import  { EditorImageEventType }  from '../image/EditorImage.mjs';
 import { Rect2, Color4, toRoundedString, Path, PathCommandType, Vec2 } from '@js-draw/math';
 import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
@@ -190,6 +190,14 @@ export default class BackgroundComponent extends AbstractComponent {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
+        // If visibleRect is null, components should render everything.
+        // In that case, a full render is being done.
+        const mustRender = !visibleRect;
+        // If this.fillsScreen, the visibleRect needs to be known.
+        // Use the screen rect.
+        if (this.fillsScreen) {
+            visibleRect ??= canvas.getVisibleRect();
+        }
         const clip = this.backgroundType === BackgroundType.Grid;
         const contentBBox = this.getFullBoundingBox(visibleRect);
         canvas.startObject(contentBBox, clip);
@@ -197,13 +205,11 @@ export default class BackgroundComponent extends AbstractComponent {
             // If the rectangle for this region contains the visible rect,
             // we can fill the entire visible rectangle (which may be more efficient than
             // filling the entire region for this.)
-            if (visibleRect) {
-                const intersection = visibleRect.intersection(contentBBox);
-                if (intersection) {
-                    canvas.fillRect(intersection, this.mainColor);
-                }
+            const intersection = visibleRect?.intersection(contentBBox);
+            if (intersection) {
+                canvas.fillRect(intersection, this.mainColor);
             }
-            else {
+            else if (mustRender) {
                 canvas.fillRect(contentBBox, this.mainColor);
             }
         }

package/dist/mjs/components/SVGGlobalAttributesObject.d.ts

@@ -4,8 +4,8 @@ import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
-    private readonly attrs;
     protected contentBBox: Rect2;
+    private readonly attrs;
     constructor(attrs: GlobalAttrsList);
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(_lineSegment: LineSegment2): boolean;
@@ -15,6 +15,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;
-    static deserializeFromString(data: string): AbstractComponent;
+    static deserializeFromString(_data: string): AbstractComponent;
 }
 export {};

package/dist/mjs/components/SVGGlobalAttributesObject.mjs

@@ -10,10 +10,16 @@ import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mj
 const componentKind = 'svg-global-attributes';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {
+    // Does not modify `attrs`
     constructor(attrs) {
         super(componentKind);
-        this.attrs = attrs;
         this.contentBBox = Rect2.empty;
+        // Already stored/managed in `editor.image`.
+        const attrsManagedByRenderer = ['viewBox', 'width', 'height'];
+        // Only store attributes that aren't managed by other parts of the app.
+        this.attrs = attrs.filter(([attr, _value]) => {
+            return !attrsManagedByRenderer.includes(attr);
+        });
     }
     render(canvas, _visibleRect) {
         if (!(canvas instanceof SVGRenderer)) {
@@ -47,19 +53,9 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     serializeToJSON() {
         return JSON.stringify(this.attrs);
     }
-    static deserializeFromString(data) {
-        const json = JSON.parse(data);
-        const attrs = [];
-        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
-        // Don't deserialize all attributes, just those that should be safe.
-        for (const [key, val] of json) {
-            if (key === 'viewBox' || key === 'width' || key === 'height') {
-                if (val && numericAndSpaceContentExp.exec(val)) {
-                    attrs.push([key, val]);
-                }
-            }
-        }
-        return new SVGGlobalAttributesObject(attrs);
+    static deserializeFromString(_data) {
+        // To be safe, don't deserialize any attributes
+        return new SVGGlobalAttributesObject([]);
     }
 }
 AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

package/dist/mjs/{EditorImage.d.ts → image/EditorImage.d.ts}

@@ -1,11 +1,11 @@
-import AbstractRenderer from './rendering/renderers/AbstractRenderer';
-import Viewport from './Viewport';
-import AbstractComponent from './components/AbstractComponent';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import Viewport from '../Viewport';
+import AbstractComponent from '../components/AbstractComponent';
 import { Rect2 } from '@js-draw/math';
-import RenderingCache from './rendering/caching/RenderingCache';
-import SerializableCommand from './commands/SerializableCommand';
-import EventDispatcher from './EventDispatcher';
-import Command from './commands/Command';
+import RenderingCache from '../rendering/caching/RenderingCache';
+import SerializableCommand from '../commands/SerializableCommand';
+import EventDispatcher from '../EventDispatcher';
+import Command from '../commands/Command';
 export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export declare enum EditorImageEventType {
     ExportViewportChanged = 0,
@@ -14,6 +14,13 @@ export declare enum EditorImageEventType {
 export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
     image: EditorImage;
 }>;
+/**
+ * A callback used to
+ * 1. pause the render process
+ * 2. observe progress through `componentsProcessed` and `totalComponents`
+ * 3. stop the render process early by returning `false`.
+ */
+export type PreRenderComponentCallback = (component: AbstractComponent, componentsProcessed: number, totalComponents: number) => Promise<boolean>;
 export default class EditorImage {
     private root;
     private background;
@@ -36,7 +43,21 @@ export default class EditorImage {
      * the viewport used by the `renderer` (if any).
      */
     render(renderer: AbstractRenderer, viewport: Viewport | null): void;
-    /** Renders all nodes, even ones not within the viewport. @internal */
+    /**
+     * Like {@link renderAll}, but can be stopped early and paused.
+     *
+     * **Note**: If the image is being edited during an async rendering, there is no
+     * guarantee that all nodes will be rendered correctly (some may be missing).
+     *
+     * @internal
+     */
+    renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
+    /**
+     * Renders all nodes, even ones not within the viewport.
+     *
+     * This can be slow for large images
+     * @internal
+     */
     renderAll(renderer: AbstractRenderer): void;
     /**
      * @returns all elements in the image, sorted by z-index. This can be slow for large images.
@@ -136,6 +157,7 @@ export declare class ImageNode {
     private rebalance;
     protected removeChild(child: ImageNode): void;
     remove(): void;
+    renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
     render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
     renderDebugBoundingBoxes(renderer: AbstractRenderer, visibleRect: Rect2, depth?: number): void;
 }

package/dist/mjs/{EditorImage.mjs → image/EditorImage.mjs}

@@ -3,13 +3,13 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
     return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
 };
 var _a, _b, _c;
-import  Viewport  from './Viewport.mjs';
-import  AbstractComponent, { ComponentSizingMode }  from './components/AbstractComponent.mjs';
+import  Viewport  from '../Viewport.mjs';
+import  AbstractComponent, { ComponentSizingMode }  from '../components/AbstractComponent.mjs';
 import { Rect2, Vec2, Mat33, Color4 } from '@js-draw/math';
-import  SerializableCommand  from './commands/SerializableCommand.mjs';
-import  EventDispatcher  from './EventDispatcher.mjs';
-import  { assertIsBoolean, assertIsNumber, assertIsNumberArray }  from './util/assertions.mjs';
-import  Command  from './commands/Command.mjs';
+import  SerializableCommand  from '../commands/SerializableCommand.mjs';
+import  EventDispatcher  from '../EventDispatcher.mjs';
+import  { assertIsBoolean, assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
+import  Command  from '../commands/Command.mjs';
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
@@ -87,7 +87,27 @@ class EditorImage {
         this.background.render(renderer, viewport?.visibleRect);
         this.root.render(renderer, viewport?.visibleRect);
     }
-    /** Renders all nodes, even ones not within the viewport. @internal */
+    /**
+     * Like {@link renderAll}, but can be stopped early and paused.
+     *
+     * **Note**: If the image is being edited during an async rendering, there is no
+     * guarantee that all nodes will be rendered correctly (some may be missing).
+     *
+     * @internal
+     */
+    async renderAllAsync(renderer, preRenderComponent) {
+        const stoppedEarly = !(await this.background.renderAllAsync(renderer, preRenderComponent));
+        if (!stoppedEarly) {
+            return await this.root.renderAllAsync(renderer, preRenderComponent);
+        }
+        return false;
+    }
+    /**
+     * Renders all nodes, even ones not within the viewport.
+     *
+     * This can be slow for large images
+     * @internal
+     */
     renderAll(renderer) {
         this.render(renderer, null);
     }
@@ -610,6 +630,30 @@ export class ImageNode {
         this.content = null;
         this.children = [];
     }
+    // Creates a (potentially incomplete) async rendering of this image.
+    // Returns false if stopped early
+    async renderAllAsync(renderer, 
+    // Used to pause/stop the renderer process
+    preRenderComponent) {
+        const leaves = this.getLeaves();
+        sortLeavesByZIndex(leaves);
+        const totalLeaves = leaves.length;
+        for (let leafIndex = 0; leafIndex < totalLeaves; leafIndex++) {
+            const leaf = leaves[leafIndex];
+            const component = leaf.getContent();
+            // Even though leaf was originally a leaf, it might not be any longer --
+            // rendering is async and the tree can change during that time.
+            if (!component) {
+                continue;
+            }
+            const shouldContinue = await preRenderComponent(component, leafIndex, totalLeaves);
+            if (!shouldContinue) {
+                return false;
+            }
+            component.render(renderer, undefined);
+        }
+        return true;
+    }
     render(renderer, visibleRect) {
         let leaves;
         if (visibleRect) {

package/dist/mjs/image/EditorImage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/image/export/adjustExportedSVGSize.d.ts

@@ -0,0 +1,6 @@
+import { Rect2 } from '@js-draw/math';
+export type SVGSizingOptions = {
+    minDimension?: number;
+};
+declare const adjustExportedSVGSize: (svg: SVGElement, exportRect: Rect2, options: SVGSizingOptions) => void;
+export default adjustExportedSVGSize;

package/dist/mjs/image/export/adjustExportedSVGSize.mjs

@@ -0,0 +1,20 @@
+import { toRoundedString } from '@js-draw/math';
+// @internal
+const adjustExportedSVGSize = (svg, exportRect, options) => {
+    // Adjust the width/height as necessary
+    let width = exportRect.w;
+    let height = exportRect.h;
+    if (options?.minDimension && width < options.minDimension) {
+        const newWidth = options.minDimension;
+        height *= newWidth / (width || 1);
+        width = newWidth;
+    }
+    if (options?.minDimension && height < options.minDimension) {
+        const newHeight = options.minDimension;
+        width *= newHeight / (height || 1);
+        height = newHeight;
+    }
+    svg.setAttribute('width', toRoundedString(width));
+    svg.setAttribute('height', toRoundedString(height));
+};
+export default adjustExportedSVGSize;

package/dist/mjs/image/export/editorImageToSVG.d.ts

@@ -0,0 +1,8 @@
+import EditorImage, { PreRenderComponentCallback } from '../EditorImage';
+import { SVGSizingOptions } from './adjustExportedSVGSize';
+export interface SVGExportOptions extends SVGSizingOptions {
+    sanitize?: boolean;
+    minDimension?: number;
+}
+export declare const editorImageToSVGSync: (image: EditorImage, options: SVGExportOptions) => SVGSVGElement;
+export declare const editorImageToSVGAsync: (image: EditorImage, preRenderComponent: PreRenderComponentCallback, options: SVGExportOptions) => Promise<SVGElement>;

package/dist/mjs/image/export/editorImageToSVG.mjs

@@ -0,0 +1,55 @@
+import { Rect2 } from '@js-draw/math';
+import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
+import  { svgLoaderAutoresizeClassName }  from '../../SVGLoader.mjs';
+import  adjustExportedSVGSize  from './adjustExportedSVGSize.mjs';
+const toSVGInternal = (image, renderFunction, options) => {
+    const importExportViewport = image.getImportExportViewport().getTemporaryClone();
+    // If the rectangle has zero width or height, its size can't be increased
+    // -- set its size to the minimum.
+    if (options?.minDimension) {
+        const originalRect = importExportViewport.visibleRect;
+        let rect = originalRect;
+        if (rect.w <= 0) {
+            rect = new Rect2(rect.x, rect.y, options.minDimension, rect.h);
+        }
+        if (rect.h <= 0) {
+            rect = new Rect2(rect.x, rect.y, rect.w, options.minDimension);
+        }
+        if (!rect.eq(originalRect)) {
+            importExportViewport.updateScreenSize(rect.size);
+        }
+    }
+    const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, {
+        sanitize: options.sanitize ?? false,
+        useViewBoxForPositioning: true,
+    });
+    // Use a callback rather than async/await to allow this function to create
+    // both sync and async render functions
+    renderFunction(renderer, () => {
+        if (image.getAutoresizeEnabled()) {
+            result.classList.add(svgLoaderAutoresizeClassName);
+        }
+        else {
+            result.classList.remove(svgLoaderAutoresizeClassName);
+        }
+        const exportRect = importExportViewport.visibleRect;
+        adjustExportedSVGSize(result, exportRect, options);
+        return result;
+    });
+    return result;
+};
+export const editorImageToSVGSync = (image, options) => {
+    return toSVGInternal(image, (renderer, onComplete) => {
+        image.renderAll(renderer);
+        onComplete();
+    }, options);
+};
+export const editorImageToSVGAsync = (image, preRenderComponent, options) => {
+    return new Promise(resolve => {
+        toSVGInternal(image, async (renderer, onComplete) => {
+            await image.renderAllAsync(renderer, preRenderComponent);
+            const result = onComplete();
+            resolve(result);
+        }, options);
+    });
+};

package/dist/mjs/image/lib.d.ts

@@ -0,0 +1 @@
+export { default as EditorImage } from './EditorImage';

package/dist/mjs/image/lib.mjs

@@ -0,0 +1 @@
+export  { default as EditorImage }  from './EditorImage.mjs';

package/dist/mjs/lib.d.ts

@@ -15,7 +15,7 @@
  * @packageDocumentation
  */
 import Editor, { EditorSettings } from './Editor';
-export { default as EditorImage } from './EditorImage';
+export * from './image/lib';
 export * from './types';
 export * from './inputEvents';
 export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable';

package/dist/mjs/lib.mjs

@@ -15,7 +15,7 @@
  * @packageDocumentation
  */
 import  Editor  from './Editor.mjs';
-export  { default as EditorImage }  from './EditorImage.mjs';
+export  *  from './image/lib.mjs';
 export  *  from './types.mjs';
 export  *  from './inputEvents.mjs';
 export  { default as getLocalizationTable, matchingLocalizationTable }  from './localizations/getLocalizationTable.mjs';

package/dist/mjs/localizations/comments.d.ts

@@ -0,0 +1,6 @@
+import { EditorLocalization } from '../localization';
+/**
+ * Comments to help translators create translations.
+ */
+declare const comments: Partial<Record<keyof EditorLocalization, string>>;
+export default comments;

package/dist/mjs/localizations/comments.mjs

@@ -0,0 +1,8 @@
+/**
+ * Comments to help translators create translations.
+ */
+const comments = {
+    dragAndDropHereOrBrowse: 'Uses {{curly braces}} to denote bold text',
+    closeSidebar: 'Currently used as an accessibilty label',
+};
+export default comments;