leksy-editor 1.0.13 → 1.0.14

package/constant.js

@@ -122,6 +122,8 @@ const SVG = {
     LOADER: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="#000000"></stop><stop offset=".3" stop-color="#000000" stop-opacity=".9"></stop><stop offset=".6" stop-color="#000000" stop-opacity=".6"></stop><stop offset=".8" stop-color="#000000" stop-opacity=".3"></stop><stop offset="1" stop-color="#000000" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(#a12)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="#000000" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>',
     FULLSCREEN_IMAGE: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 24 24" fill="currentColor"><path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z"></path></svg>',
     CLOSE: '<svg xmlns="http://www.w3.org/2000/svg" width="16px" viewBox="0 0 24 24" fill="currentColor"><path d="M10.5859 12L2.79297 4.20706L4.20718 2.79285L12.0001 10.5857L19.793 2.79285L21.2072 4.20706L13.4143 12L21.2072 19.7928L19.793 21.2071L12.0001 13.4142L4.20718 21.2071L2.79297 19.7928L10.5859 12Z"></path></svg>',
+    SPINNER: '<svg class="leksy-editor-spinner" width="16" height="16" viewBox="0 0 50 50"><circle class="leksy-editor-path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle></svg>',
+
 }
 
 
@@ -545,6 +547,7 @@ const FONTS = {
     "tahoma, sans-serif": "<p style='user-select: none; font-family: tahoma, sans-serif;'>Tahoma</p>",
     "trebuchet ms, sans-serif": "<p style='user-select: none; font-family: &quot;trebuchet ms&quot;, sans-serif;'>Trebuchet MS</p>",
     "verdana, sans-serif": "<p style='user-select: none; font-family: verdana, sans-serif;'>Verdana</p>",
+    "calibri, sans-serif": "<p style='user-select: none; font-family: calibri, sans-serif;'>Calibri</p>",
 }
 
 const FONT_SIZE_OPTIONS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Leksy Editor is an alternative to traditional WYSIWYG editors, designed primarily for creating mail templates, blogs, and documents without any content manipulation.",
   "main": "index.js",
   "directories": {

package/plugin.js

@@ -87,7 +87,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyFull');
-            core.resizerHandler()
+            core.resizerHandler?.()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_justify'])
@@ -101,7 +101,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyLeft');
-            core.resizerHandler()
+            core.resizerHandler?.()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_left'])
@@ -115,7 +115,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyRight');
-            core.resizerHandler()
+            core.resizerHandler?.()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_right'])
@@ -129,7 +129,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyCenter');
-            core.resizerHandler()
+            core.resizerHandler?.()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_center'])
@@ -809,9 +809,12 @@ const PLUGINS = {
                         return;
                     }
                     button.disabled = true;
+                    const originalText = button.innerText;
+                    button.innerHTML = ` <span style="margin-left: 8px;">${originalText}</span> ${SVG.SPINNER}`
                     const img = document.createElement('img');
                     img.src = await core.manuplateImage('base64', base64String);
                     img.alt = altInput.value || "";
+                    button.innerText = originalText
 
                     core.insertNode(img);
                     modal.close();

package/style.css

@@ -555,4 +555,39 @@
     object-fit: contain;
     max-width: 90%;
     max-height: 90%;
+}
+
+.leksy-editor-spinner {
+    animation: leksy-editor-rotate 1s linear infinite;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.leksy-editor-spinner .leksy-editor-path {
+    stroke: white;
+    stroke-linecap: round;
+    animation: leksy-editor-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes leksy-editor-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes leksy-editor-dash {
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
 }