fix issue with base64 images in editor

apps/mobile/android/app/src/main/assets/constants.js

@@ -22,55 +22,54 @@ let pageTheme = {
 };
 
 const markdownPatterns = [
-  { start: "*", end: "*", format: "italic" },
-  { start: "**", end: "**", format: "bold" },
-  { start: "`", end: "`", format: "code" },
-  { start: "#", format: "h1" },
-  { start: "##", format: "h2" },
-  { start: "###", format: "h3" },
-  { start: "####", format: "h4" },
-  { start: "#####", format: "h5" },
-  { start: "######", format: "h6" },
-  { start: "* ", cmd: "InsertUnorderedList" },
-  { start: "- ", cmd: "InsertUnorderedList" },
-  { start: "> ", format: "blockquote" },
+  {start: '*', end: '*', format: 'italic'},
+  {start: '**', end: '**', format: 'bold'},
+  {start: '`', end: '`', format: 'code'},
+  {start: '#', format: 'h1'},
+  {start: '##', format: 'h2'},
+  {start: '###', format: 'h3'},
+  {start: '####', format: 'h4'},
+  {start: '#####', format: 'h5'},
+  {start: '######', format: 'h6'},
+  {start: '* ', cmd: 'InsertUnorderedList'},
+  {start: '- ', cmd: 'InsertUnorderedList'},
+  {start: '> ', format: 'blockquote'},
   {
-    start: "1. ",
-    cmd: "InsertOrderedList",
-    value: { "list-style-type": "decimal" },
+    start: '1. ',
+    cmd: 'InsertOrderedList',
+    value: {'list-style-type': 'decimal'},
   },
   {
-    start: "1) ",
-    cmd: "InsertOrderedList",
-    value: { "list-style-type": "decimal" },
+    start: '1) ',
+    cmd: 'InsertOrderedList',
+    value: {'list-style-type': 'decimal'},
   },
   {
-    start: "a. ",
-    cmd: "InsertOrderedList",
-    value: { "list-style-type": "lower-alpha" },
+    start: 'a. ',
+    cmd: 'InsertOrderedList',
+    value: {'list-style-type': 'lower-alpha'},
   },
   {
-    start: "a) ",
-    cmd: "InsertOrderedList",
-    value: { "list-style-type": "lower-alpha" },
+    start: 'a) ',
+    cmd: 'InsertOrderedList',
+    value: {'list-style-type': 'lower-alpha'},
   },
   {
-    start: "i. ",
-    cmd: "InsertOrderedList",
-    value: { "list-style-type": "lower-roman" },
+    start: 'i. ',
+    cmd: 'InsertOrderedList',
+    value: {'list-style-type': 'lower-roman'},
   },
   {
-    start: "i) ",
-    cmd: "InsertOrderedList",
-    value: { "list-style-type": "lower-roman" },
+    start: 'i) ',
+    cmd: 'InsertOrderedList',
+    value: {'list-style-type': 'lower-roman'},
   },
-  { start: "---", replacement: "<hr/>" },
-  { start: "--", replacement: "—" },
-  { start: "-", replacement: "—" },
-  { start: "(c)", replacement: "©" },
+  {start: '---', replacement: '<hr/>'},
+  {start: '--', replacement: '—'},
+  {start: '-', replacement: '—'},
+  {start: '(c)', replacement: '©'},
 ];
 
-
 function dark() {
   if (!tinymce.activeEditor) return;
   tinymce.activeEditor.dom.styleSheetLoader.unload(
@@ -144,23 +143,24 @@ var minifyImg = function (
   resolve,
   imageArguments = 0.7,
 ) {
-  var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl;
-  new Promise(function (resolve) {
-    image = new Image();
-    image.src = dataUrl;
-    
-    resolve('Done : ');
-  }).then((d) => {
-    oldWidth = image.width;
-    oldHeight = image.height;
-    newHeight = Math.floor((oldHeight / oldWidth) * newWidth);
-    canvas = document.createElement('canvas');
-    canvas.width = newWidth;
-    canvas.height = newHeight;
-    ctx = canvas.getContext('2d');
-    ctx.drawImage(image, 0, 0, newWidth, newHeight);
-    newDataUrl = canvas.toDataURL(imageType, imageArguments);
-    resolve(newDataUrl);
+  fetch(dataUrl).then(async (res) => {
+    let blob = await res.blob();
+    new Compressor(blob, {
+      quality: imageArguments,
+      width: newWidth,
+      mimeType:imageType,
+      success: (result) => {
+        let fileReader = new FileReader();
+        fileReader.onloadend = function () {
+          resolve(fileReader.result);
+          fileReader.onloadend = null;
+        };
+        fileReader.readAsDataURL(result);
+      },
+      error: (err) => {
+        console.log(err.message);
+      },
+    });
   });
 };
 
@@ -180,7 +180,7 @@ function loadImage() {
             var content = `<img style="max-width:100% !important;" src="${r}">`;
             editor.insertContent(content);
           },
-          0.8,
+          0.6,
         );
         fileInput.removeEventListener('change', listener);
         reader.removeEventListener('load', load);

apps/mobile/android/app/src/main/assets/index.html

@@ -32,12 +32,12 @@
 	let isLoading = true;
 	let regex = /\n/gm;
 	</script>
+	<script src="./compressor.min.js"></script>
 	<script src="./listeners.js"></script>
 	<script src="./dist/main.js"></script>
 	<script src="./constants.js"></script>
 	<script src="./init.js"></script>
 	<script>
-		
 		init_tiny("calc(100vh - 55px)");
 	</script>
 

apps/mobile/html/Web.bundle/site/constants.js

@@ -136,7 +136,6 @@ function setTheme() {
   css.appendChild(document.createTextNode(node));
   document.getElementsByTagName('head')[0].appendChild(css);
 }
-
 var minifyImg = function (
   dataUrl,
   newWidth,
@@ -144,22 +143,24 @@ var minifyImg = function (
   resolve,
   imageArguments = 0.7,
 ) {
-  var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl;
-  new Promise(function (resolve) {
-    image = new Image();
-    image.src = dataUrl;
-    resolve('Done : ');
-  }).then((d) => {
-    oldWidth = image.width;
-    oldHeight = image.height;
-    newHeight = Math.floor((oldHeight / oldWidth) * newWidth);
-    canvas = document.createElement('canvas');
-    canvas.width = newWidth;
-    canvas.height = newHeight;
-    ctx = canvas.getContext('2d');
-    ctx.drawImage(image, 0, 0, newWidth, newHeight);
-    newDataUrl = canvas.toDataURL(imageType, imageArguments);
-    resolve(newDataUrl);
+  fetch(dataUrl).then(async (res) => {
+    let blob = await res.blob();
+    new Compressor(blob, {
+      quality: imageArguments,
+      width: newWidth,
+      mimeType:imageType,
+      success: (result) => {
+        let fileReader = new FileReader();
+        fileReader.onloadend = function () {
+          resolve(fileReader.result);
+          fileReader.onloadend = null;
+        };
+        fileReader.readAsDataURL(result);
+      },
+      error: (err) => {
+        console.log(err.message);
+      },
+    });
   });
 };
 
@@ -173,13 +174,13 @@ function loadImage() {
         console.log(e, 'loaded error');
         minifyImg(
           reader.result,
-          600,
+          1024,
           'image/jpeg',
           (r) => {
             var content = `<img style="max-width:100% !important;" src="${r}">`;
             editor.insertContent(content);
           },
-          0.7,
+          0.8,
         );
         fileInput.removeEventListener('change', listener);
         reader.removeEventListener('load', load);

apps/mobile/html/Web.bundle/site/index.html

@@ -32,6 +32,7 @@
 	let isLoading = true;
 	let regex = /\n/gm;
 	</script>
+	<script src="./compressor.min.js"></script>
 	<script src="./listeners.js"></script>
 	<script src="./dist/main.js"></script>
 	<script src="./constants.js"></script>