overtype 1.1.6 → 1.1.8

package/dist/overtype.js

@@ -1,5 +1,5 @@
 /**
- * OverType v1.1.6
+ * OverType v1.1.8
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -164,6 +164,28 @@ var OverType = (() => {
     static parseInlineCode(html) {
       return html.replace(new RegExp("(?<!`)(`+)(?!`)((?:(?!\\1).)+?)(\\1)(?!`)", "g"), '<code><span class="syntax-marker">$1</span>$2<span class="syntax-marker">$3</span></code>');
     }
+    /**
+     * Sanitize URL to prevent XSS attacks
+     * @param {string} url - URL to sanitize
+     * @returns {string} Safe URL or '#' if dangerous
+     */
+    static sanitizeUrl(url) {
+      const trimmed = url.trim();
+      const lower = trimmed.toLowerCase();
+      const safeProtocols = [
+        "http://",
+        "https://",
+        "mailto:",
+        "ftp://",
+        "ftps://"
+      ];
+      const hasSafeProtocol = safeProtocols.some((protocol) => lower.startsWith(protocol));
+      const isRelative = trimmed.startsWith("/") || trimmed.startsWith("#") || trimmed.startsWith("?") || trimmed.startsWith(".") || !trimmed.includes(":") && !trimmed.includes("//");
+      if (hasSafeProtocol || isRelative) {
+        return url;
+      }
+      return "#";
+    }
     /**
      * Parse links
      * @param {string} html - HTML with potential link markdown
@@ -172,7 +194,8 @@ var OverType = (() => {
     static parseLinks(html) {
       return html.replace(/\[(.+?)\]\((.+?)\)/g, (match, text, url) => {
         const anchorName = `--link-${this.linkIndex++}`;
-        return `<a href="${url}" style="anchor-name: ${anchorName}"><span class="syntax-marker">[</span>${text}<span class="syntax-marker">](</span><span class="syntax-marker link-url">${url}</span><span class="syntax-marker">)</span></a>`;
+        const safeUrl = this.sanitizeUrl(url);
+        return `<a href="${safeUrl}" style="anchor-name: ${anchorName}"><span class="syntax-marker">[</span>${text}<span class="syntax-marker">](</span><span class="syntax-marker link-url">${url}</span><span class="syntax-marker">)</span></a>`;
       });
     }
     /**
@@ -1324,6 +1347,7 @@ ${blockSuffix}` : suffix;
     const {
       fontSize = "14px",
       lineHeight = 1.6,
+      /* System-first, guaranteed monospaced; avoids Android 'ui-monospace' pitfalls */
       fontFamily = '"SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace',
       padding = "20px",
       theme = null,
@@ -1387,7 +1411,6 @@ ${blockSuffix}` : suffix;
       
       /* Font properties - any difference breaks alignment */
       font-family: ${fontFamily} !important;
-      font-synthesis: none !important; /* no faux bold/italic width drift */
       font-variant-ligatures: none !important; /* keep metrics stable for code */
       font-size: var(--instance-font-size, ${fontSize}) !important;
       line-height: var(--instance-line-height, ${lineHeight}) !important;
@@ -1783,6 +1806,23 @@ ${blockSuffix}` : suffix;
         margin: 0 2px;
       }
     }
+    
+    /* Plain mode - hide preview and show textarea text */
+    .overtype-container.plain-mode .overtype-preview {
+      display: none !important;
+    }
+    
+    .overtype-container.plain-mode .overtype-input {
+      color: var(--text, #0d3b66) !important;
+      /* Use system font stack for better plain text readability */
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
+                   "Helvetica Neue", Arial, sans-serif !important;
+    }
+    
+    /* Ensure textarea remains transparent in overlay mode */
+    .overtype-container:not(.plain-mode) .overtype-input {
+      color: transparent !important;
+    }
 
     ${mobileStyles}
   `;
@@ -1846,6 +1886,10 @@ ${blockSuffix}` : suffix;
   <rect stroke="currentColor" fill="none" stroke-width="1.5" x="2" y="13" width="3" height="3" rx="0.5"></rect>
   <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.65 9.5 3.5 10.5 5 8.5"></polyline>
 </svg>`;
+  var eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" fill="none"></path>
+  <circle cx="12" cy="12" r="3" fill="none"></circle>
+</svg>`;
 
   // src/toolbar.js
   var Toolbar = class {
@@ -1877,7 +1921,9 @@ ${blockSuffix}` : suffix;
         { separator: true },
         { name: "bulletList", icon: bulletListIcon, title: "Bullet List", action: "toggleBulletList" },
         { name: "orderedList", icon: orderedListIcon, title: "Numbered List", action: "toggleNumberedList" },
-        { name: "taskList", icon: taskListIcon, title: "Task List", action: "toggleTaskList" }
+        { name: "taskList", icon: taskListIcon, title: "Task List", action: "toggleTaskList" },
+        { separator: true },
+        { name: "togglePlain", icon: eyeIcon, title: "Show plain textarea", action: "toggle-plain" }
       ];
       buttonConfig.forEach((config) => {
         if (config.separator) {
@@ -1958,6 +2004,10 @@ ${blockSuffix}` : suffix;
           case "toggleTaskList":
             toggleTaskList(textarea);
             break;
+          case "toggle-plain":
+            const isPlain = this.editor.container.classList.contains("plain-mode");
+            this.editor.showPlainTextarea(!isPlain);
+            break;
         }
         textarea.dispatchEvent(new Event("input", { bubbles: true }));
       } catch (error) {
@@ -2006,6 +2056,9 @@ ${blockSuffix}` : suffix;
             case "h3":
               isActive = activeFormats.includes("header-3");
               break;
+            case "togglePlain":
+              isActive = !this.editor.container.classList.contains("plain-mode");
+              break;
           }
           button.classList.toggle("active", isActive);
           button.setAttribute("aria-pressed", isActive.toString());
@@ -2254,7 +2307,8 @@ ${blockSuffix}` : suffix;
         // Typography
         fontSize: "14px",
         lineHeight: 1.6,
-        fontFamily: "ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', monospace",
+        /* System-first, guaranteed monospaced; avoids Android 'ui-monospace' pitfalls */
+        fontFamily: '"SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace',
         padding: "16px",
         // Mobile styles
         mobile: {
@@ -2732,6 +2786,26 @@ ${blockSuffix}` : suffix;
         this.statsBar = null;
       }
     }
+    /**
+     * Show or hide the plain textarea (toggle overlay visibility)
+     * @param {boolean} show - true to show plain textarea (hide overlay), false to show overlay
+     * @returns {boolean} Current plain textarea state
+     */
+    showPlainTextarea(show) {
+      if (show) {
+        this.container.classList.add("plain-mode");
+      } else {
+        this.container.classList.remove("plain-mode");
+      }
+      if (this.toolbar) {
+        const toggleBtn = this.container.querySelector('[data-action="toggle-plain"]');
+        if (toggleBtn) {
+          toggleBtn.classList.toggle("active", !show);
+          toggleBtn.title = show ? "Show markdown preview" : "Show plain textarea";
+        }
+      }
+      return show;
+    }
     /**
      * Destroy the editor instance
      */