js-draw 1.13.1 → 1.13.2

package/dist/cjs/Editor.js

@@ -42,7 +42,7 @@ const getLocalizationTable_1 = __importDefault(require("./localizations/getLocal
 const IconProvider_1 = __importDefault(require("./toolbar/IconProvider"));
 const CanvasRenderer_1 = __importDefault(require("./rendering/renderers/CanvasRenderer"));
 const untilNextAnimationFrame_1 = __importDefault(require("./util/untilNextAnimationFrame"));
-const fileToBase64_1 = __importDefault(require("./util/fileToBase64"));
+const fileToBase64Url_1 = __importDefault(require("./util/fileToBase64Url"));
 const uniteCommands_1 = __importDefault(require("./commands/uniteCommands"));
 const SelectionTool_1 = __importDefault(require("./tools/SelectionTool/SelectionTool"));
 const Erase_1 = __importDefault(require("./commands/Erase"));
@@ -476,7 +476,7 @@ class Editor {
                     this.showLoadingWarning(evt.loaded / evt.total);
                 };
                 try {
-                    const data = await (0, fileToBase64_1.default)(file, onprogress);
+                    const data = await (0, fileToBase64Url_1.default)(file, { onprogress });
                     if (data && this.toolController.dispatchInputEvent({
                         kind: inputEvents_1.InputEvtType.PasteEvent,
                         mime: fileType,

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

@@ -9,7 +9,7 @@ const EditorImage_1 = __importDefault(require("../../image/EditorImage"));
 const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
 const SelectionTool_1 = __importDefault(require("../../tools/SelectionTool/SelectionTool"));
 const math_1 = require("@js-draw/math");
-const fileToBase64_1 = __importDefault(require("../../util/fileToBase64"));
+const fileToBase64Url_1 = __importDefault(require("../../util/fileToBase64Url"));
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 const types_1 = require("../../types");
 const constants_1 = require("../constants");
@@ -111,11 +111,13 @@ class InsertImageWidget extends BaseWidget_1.default {
             this.imagePreview.style.display = 'block';
             const image = files[0];
             let data = null;
+            let errorMessage = null;
             try {
-                data = await (0, fileToBase64_1.default)(image);
+                data = await (0, fileToBase64Url_1.default)(image);
             }
-            catch (e) {
-                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            catch (error) {
+                console.error('Image load error', error);
+                errorMessage = this.localizationTable.imageLoadError(error);
             }
             if (data) {
                 this.image = ImageWrapper.fromSrcAndPreview(data, this.imagePreview, () => this.onImageDataUpdate());
@@ -124,6 +126,11 @@ class InsertImageWidget extends BaseWidget_1.default {
                 this.image = null;
             }
             this.onImageDataUpdate();
+            // Show the error after image update callbacks to ensure it is
+            // actually shown.
+            if (errorMessage) {
+                this.statusView.innerText = errorMessage;
+            }
         });
         altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
         actionButtonRow.replaceChildren(this.submitButton);

package/dist/cjs/util/fileToBase64Url.d.ts

@@ -0,0 +1,9 @@
+export interface FileToBase64UrlOptions {
+    onprogress?: (evt: ProgressEvent<FileReader>) => void;
+    onWarning?: (message: string, error: any) => void;
+}
+/**
+ * Converts `file` to a base64 data URL.
+ */
+declare const fileToBase64Url: (file: Blob, options?: FileToBase64UrlOptions) => Promise<string | null>;
+export default fileToBase64Url;

package/dist/cjs/util/fileToBase64Url.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Converts `file` to a base64 data URL.
+ */
+const fileToBase64Url = async (file, options = {}) => {
+    try {
+        const reader = new FileReader();
+        return await new Promise((resolve, reject) => {
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.onabort = reject;
+            reader.onprogress = (evt) => {
+                options.onprogress?.(evt);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    catch (error) {
+        // Files can fail to load with a FileReader in some cases. For example,
+        // in iOS Lockdown mode, where FileReader is unavailable.
+        (options.onWarning ?? console.warn)('Unable to convert file to base64 with a FileReader: ', error);
+        const arrayBuffer = await file.arrayBuffer();
+        const array = new Uint8Array(arrayBuffer);
+        // step: must be divisible by 3 (3 bytes = 4 base64 numerals)
+        //       If too large, this will fail (String.fromCharCode accepts a limited
+        //       number of arguments).
+        const step = 30;
+        const result = [];
+        for (let i = 0; i < array.length; i += step) {
+            // btoa accepts only characters with byte value 0-255 (which can be created
+            // with String.fromCharCode)
+            const stringByteArray = String.fromCharCode(...array.slice(i, i + step));
+            result.push(btoa(stringByteArray));
+        }
+        return `data:${file.type ?? 'image/*'};base64,${result.join('')}`;
+    }
+};
+exports.default = fileToBase64Url;

package/dist/cjs/util/fileToBase64Url.test.d.ts

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

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.13.1',
+    number: '1.13.2',
 };

package/dist/mjs/Editor.mjs

@@ -13,7 +13,7 @@ import  getLocalizationTable  from './localizations/getLocalizationTable.mjs';
 import  IconProvider  from './toolbar/IconProvider.mjs';
 import  CanvasRenderer  from './rendering/renderers/CanvasRenderer.mjs';
 import  untilNextAnimationFrame  from './util/untilNextAnimationFrame.mjs';
-import  fileToBase64  from './util/fileToBase64.mjs';
+import  fileToBase64Url  from './util/fileToBase64Url.mjs';
 import  uniteCommands  from './commands/uniteCommands.mjs';
 import  SelectionTool  from './tools/SelectionTool/SelectionTool.mjs';
 import  Erase  from './commands/Erase.mjs';
@@ -447,7 +447,7 @@ export class Editor {
                     this.showLoadingWarning(evt.loaded / evt.total);
                 };
                 try {
-                    const data = await fileToBase64(file, onprogress);
+                    const data = await fileToBase64Url(file, { onprogress });
                     if (data && this.toolController.dispatchInputEvent({
                         kind: InputEvtType.PasteEvent,
                         mime: fileType,

package/dist/mjs/toolbar/widgets/InsertImageWidget.mjs

@@ -4,7 +4,7 @@ import  EditorImage  from '../../image/EditorImage.mjs';
 import  uniteCommands  from '../../commands/uniteCommands.mjs';
 import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
 import { Mat33 } from '@js-draw/math';
-import  fileToBase64  from '../../util/fileToBase64.mjs';
+import  fileToBase64Url  from '../../util/fileToBase64Url.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
@@ -106,11 +106,13 @@ class InsertImageWidget extends BaseWidget {
             this.imagePreview.style.display = 'block';
             const image = files[0];
             let data = null;
+            let errorMessage = null;
             try {
-                data = await fileToBase64(image);
+                data = await fileToBase64Url(image);
             }
-            catch (e) {
-                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            catch (error) {
+                console.error('Image load error', error);
+                errorMessage = this.localizationTable.imageLoadError(error);
             }
             if (data) {
                 this.image = ImageWrapper.fromSrcAndPreview(data, this.imagePreview, () => this.onImageDataUpdate());
@@ -119,6 +121,11 @@ class InsertImageWidget extends BaseWidget {
                 this.image = null;
             }
             this.onImageDataUpdate();
+            // Show the error after image update callbacks to ensure it is
+            // actually shown.
+            if (errorMessage) {
+                this.statusView.innerText = errorMessage;
+            }
         });
         altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
         actionButtonRow.replaceChildren(this.submitButton);

package/dist/mjs/util/fileToBase64Url.d.ts

@@ -0,0 +1,9 @@
+export interface FileToBase64UrlOptions {
+    onprogress?: (evt: ProgressEvent<FileReader>) => void;
+    onWarning?: (message: string, error: any) => void;
+}
+/**
+ * Converts `file` to a base64 data URL.
+ */
+declare const fileToBase64Url: (file: Blob, options?: FileToBase64UrlOptions) => Promise<string | null>;
+export default fileToBase64Url;

package/dist/mjs/util/fileToBase64Url.mjs

@@ -0,0 +1,37 @@
+/**
+ * Converts `file` to a base64 data URL.
+ */
+const fileToBase64Url = async (file, options = {}) => {
+    try {
+        const reader = new FileReader();
+        return await new Promise((resolve, reject) => {
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.onabort = reject;
+            reader.onprogress = (evt) => {
+                options.onprogress?.(evt);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    catch (error) {
+        // Files can fail to load with a FileReader in some cases. For example,
+        // in iOS Lockdown mode, where FileReader is unavailable.
+        (options.onWarning ?? console.warn)('Unable to convert file to base64 with a FileReader: ', error);
+        const arrayBuffer = await file.arrayBuffer();
+        const array = new Uint8Array(arrayBuffer);
+        // step: must be divisible by 3 (3 bytes = 4 base64 numerals)
+        //       If too large, this will fail (String.fromCharCode accepts a limited
+        //       number of arguments).
+        const step = 30;
+        const result = [];
+        for (let i = 0; i < array.length; i += step) {
+            // btoa accepts only characters with byte value 0-255 (which can be created
+            // with String.fromCharCode)
+            const stringByteArray = String.fromCharCode(...array.slice(i, i + step));
+            result.push(btoa(stringByteArray));
+        }
+        return `data:${file.type ?? 'image/*'};base64,${result.join('')}`;
+    }
+};
+export default fileToBase64Url;

package/dist/mjs/util/fileToBase64Url.test.d.ts

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

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.13.1',
+    number: '1.13.2',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "814f5d57897fd16fd45860522d9ecbc6b8b04a38"
+  "gitHead": "9a48e4d746783977e2b2808be9d97f3521fb830f"
 }

package/dist/cjs/util/fileToBase64.d.ts

@@ -1,3 +0,0 @@
-type ProgressListener = (evt: ProgressEvent<FileReader>) => void;
-declare const fileToBase64: (file: File, onprogress?: ProgressListener) => Promise<string | null>;
-export default fileToBase64;

package/dist/cjs/util/fileToBase64.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fileToBase64 = (file, onprogress) => {
-    const reader = new FileReader();
-    return new Promise((resolve, reject) => {
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.onabort = reject;
-        reader.onprogress = (evt) => {
-            onprogress?.(evt);
-        };
-        reader.readAsDataURL(file);
-    });
-};
-exports.default = fileToBase64;

package/dist/mjs/util/fileToBase64.d.ts

@@ -1,3 +0,0 @@
-type ProgressListener = (evt: ProgressEvent<FileReader>) => void;
-declare const fileToBase64: (file: File, onprogress?: ProgressListener) => Promise<string | null>;
-export default fileToBase64;

package/dist/mjs/util/fileToBase64.mjs

@@ -1,13 +0,0 @@
-const fileToBase64 = (file, onprogress) => {
-    const reader = new FileReader();
-    return new Promise((resolve, reject) => {
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.onabort = reject;
-        reader.onprogress = (evt) => {
-            onprogress?.(evt);
-        };
-        reader.readAsDataURL(file);
-    });
-};
-export default fileToBase64;