js-draw 1.3.0 → 1.4.0

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/SVGLoader.mjs

@@ -211,29 +211,44 @@ export default class SVGLoader {
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
     // to prevent storing duplicate transform information when saving the component.
     getTransform(elem, supportedAttrs, computedStyles) {
-        computedStyles ??= window.getComputedStyle(elem);
-        let transformProperty = computedStyles.transform;
-        if (transformProperty === '' || transformProperty === 'none') {
-            transformProperty = elem.style.transform || 'none';
-        }
-        // Prefer the actual .style.transform
-        // to the computed stylesheet -- in some browsers, the computedStyles version
-        // can have lower precision.
+        // If possible, load the js-draw specific transform attribute
+        const highpTransformAttribute = 'data-highp-transform';
+        const rawTransformData = elem.getAttribute(highpTransformAttribute);
         let transform;
-        try {
-            transform = Mat33.fromCSSMatrix(elem.style.transform);
-        }
-        catch (_e) {
-            transform = Mat33.fromCSSMatrix(transformProperty);
-        }
-        const elemX = elem.getAttribute('x');
-        const elemY = elem.getAttribute('y');
-        if (elemX || elemY) {
-            const x = parseFloat(elemX ?? '0');
-            const y = parseFloat(elemY ?? '0');
-            if (!isNaN(x) && !isNaN(y)) {
-                supportedAttrs?.push('x', 'y');
-                transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+        if (rawTransformData) {
+            try {
+                transform = Mat33.fromCSSMatrix(rawTransformData);
+                supportedAttrs?.push(highpTransformAttribute);
+            }
+            catch (e) {
+                console.warn(`Unable to parse raw transform data, ${rawTransformData}. Falling back to CSS data.`);
+            }
+        }
+        if (!transform) {
+            computedStyles ??= window.getComputedStyle(elem);
+            let transformProperty = computedStyles.transform;
+            if (transformProperty === '' || transformProperty === 'none') {
+                transformProperty = elem.style.transform || 'none';
+            }
+            // Prefer the actual .style.transform
+            // to the computed stylesheet -- in some browsers, the computedStyles version
+            // can have lower precision.
+            try {
+                transform = Mat33.fromCSSMatrix(elem.style.transform);
+            }
+            catch (_e) {
+                console.warn('matrix parse error', _e);
+                transform = Mat33.fromCSSMatrix(transformProperty);
+            }
+            const elemX = elem.getAttribute('x');
+            const elemY = elem.getAttribute('y');
+            if (elemX || elemY) {
+                const x = parseFloat(elemX ?? '0');
+                const y = parseFloat(elemY ?? '0');
+                if (!isNaN(x) && !isNaN(y)) {
+                    supportedAttrs?.push('x', 'y');
+                    transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+                }
             }
         }
         return transform;

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';
@@ -136,7 +136,8 @@ export default class BackgroundComponent extends AbstractComponent {
     }
     generateGridPath(visibleRect) {
         const contentBBox = this.getFullBoundingBox(visibleRect);
-        const targetRect = visibleRect?.grownBy(this.gridStrokeWidth)?.intersection(contentBBox) ?? contentBBox;
+        // .grownBy acts on all sides, so we need only grow by strokeWidth / 2 (1 * the stroke radius)
+        const targetRect = (visibleRect?.intersection(contentBBox) ?? contentBBox).grownBy(this.gridStrokeWidth / 2);
         const roundDownToGrid = (coord) => Math.floor(coord / this.gridSize) * this.gridSize;
         const roundUpToGrid = (coord) => Math.ceil(coord / this.gridSize) * this.gridSize;
         const startY = roundUpToGrid(targetRect.y);

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/editorImageToSVG.d.ts

@@ -0,0 +1,8 @@
+import EditorImage, { PreRenderComponentCallback } from '../EditorImage';
+import { SVGSizingOptions } from './setExportedSVGSize';
+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,41 @@
+import { Mat33 } from '@js-draw/math';
+import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
+import  { svgLoaderAutoresizeClassName }  from '../../SVGLoader.mjs';
+import  setExportedSVGSize  from './setExportedSVGSize.mjs';
+const toSVGInternal = (image, renderFunction, options) => {
+    const importExportViewport = image.getImportExportViewport().getTemporaryClone();
+    const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, options.sanitize ?? false);
+    const origTransform = importExportViewport.canvasToScreenTransform;
+    // Render with (0,0) at (0,0) — we'll handle translation with
+    // the viewBox property.
+    importExportViewport.resetTransform(Mat33.identity);
+    // Use a callback rather than async/await to allow this function to create
+    // both sync and async render functions
+    renderFunction(renderer, () => {
+        importExportViewport.resetTransform(origTransform);
+        if (image.getAutoresizeEnabled()) {
+            result.classList.add(svgLoaderAutoresizeClassName);
+        }
+        else {
+            result.classList.remove(svgLoaderAutoresizeClassName);
+        }
+        setExportedSVGSize(result, importExportViewport, 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/export/setExportedSVGSize.d.ts

@@ -0,0 +1,6 @@
+import Viewport from '../../Viewport';
+export type SVGSizingOptions = {
+    minDimension?: number;
+};
+declare const setExportedSVGSize: (svg: SVGElement, viewport: Viewport, options: SVGSizingOptions) => void;
+export default setExportedSVGSize;

package/dist/mjs/image/export/setExportedSVGSize.mjs

@@ -0,0 +1,23 @@
+import { toRoundedString } from '@js-draw/math';
+// @internal
+const setExportedSVGSize = (svg, viewport, options) => {
+    // Just show the main region
+    const rect = viewport.visibleRect;
+    svg.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
+    // Adjust the width/height as necessary
+    let width = rect.w;
+    let height = rect.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 setExportedSVGSize;

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;