neiki-editor 2.9.2 → 2.9.4

package/dist/neiki-editor.js

@@ -1,6 +1,6 @@
 /**
  * NeikiEditor - A Modern WYSIWYG Editor
- * Version: 2.9.2
+ * Version: 2.9.4
  *
  * A lightweight, feature-rich text editor with support for:
  * - Rich text formatting (bold, italic, underline, etc.)
@@ -19,6 +19,8 @@
   // SECTION 1: CONFIGURATION & CONSTANTS
   // ============================================
 
+  let EDITOR_INSTANCE_COUNTER = 0;
+
   // ============================================
   // TRANSLATIONS / i18n
   // ============================================
@@ -1089,8 +1091,9 @@
   // Register a custom translation (static method — available before init)
   function addTranslation(lang, keys) {
     if (!lang || typeof keys !== 'object') return;
+    if (!Utils.isSafeObjectKey(lang)) return;
     if (!TRANSLATIONS[lang]) TRANSLATIONS[lang] = {};
-    Object.assign(TRANSLATIONS[lang], keys);
+    Utils.safeAssign(TRANSLATIONS[lang], keys);
   }
 
   // Translation helper function
@@ -1127,6 +1130,7 @@
     theme: 'light',
     language: 'en',
     translations: null,
+    autosaveKey: null,
     plugins: [],
     onChange: null,
     onSave: null,
@@ -1284,8 +1288,12 @@
           el.textContent = value;
         } else if (key.startsWith('on') && typeof value === 'function') {
           el.addEventListener(key.slice(2).toLowerCase(), value);
-        } else if (key === 'style' && typeof value === 'object') {
-          Object.assign(el.style, value);
+        } else if (key === 'style' && value && typeof value === 'object') {
+          Object.keys(value).forEach(styleName => {
+            if (Utils.isSafeObjectKey(styleName)) {
+              el.style[styleName] = value[styleName];
+            }
+          });
         } else {
           el.setAttribute(key, value);
         }
@@ -1308,9 +1316,24 @@
       };
     },
 
+    isSafeObjectKey(key) {
+      return key !== '__proto__' && key !== 'prototype' && key !== 'constructor';
+    },
+
+    safeAssign(target, source) {
+      if (!source || typeof source !== 'object') return target;
+      Object.keys(source).forEach(key => {
+        if (!Object.prototype.hasOwnProperty.call(source, key) || !Utils.isSafeObjectKey(key)) return;
+        target[key] = source[key];
+      });
+      return target;
+    },
+
     deepMerge(target, source) {
       const result = { ...target };
+      if (!source || typeof source !== 'object') return result;
       Object.keys(source).forEach(key => {
+        if (!Object.prototype.hasOwnProperty.call(source, key) || !Utils.isSafeObjectKey(key)) return;
         if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
           result[key] = Utils.deepMerge(result[key] || {}, source[key]);
         } else {
@@ -1321,11 +1344,264 @@
     },
 
     sanitizeHTML(html) {
-      const temp = document.createElement('div');
-      temp.innerHTML = html;
-      const scripts = temp.querySelectorAll('script');
-      scripts.forEach(s => s.remove());
-      return temp.innerHTML;
+      const input = String(html || '');
+      const lowerInput = input.toLowerCase();
+      const root = document.createDocumentFragment();
+      const stack = [root];
+      const blockedTags = new Set(['script', 'style', 'iframe', 'object', 'embed', 'link', 'meta', 'base']);
+      const allowedTags = new Set([
+        'a', 'b', 'blockquote', 'br', 'caption', 'code', 'col', 'colgroup', 'div', 'em',
+        'font', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li', 'ol',
+        'p', 'pre', 's', 'span', 'strike', 'strong', 'sub', 'sup', 'table', 'tbody',
+        'td', 'tfoot', 'th', 'thead', 'tr', 'u', 'ul'
+      ]);
+      const voidTags = new Set(['br', 'col', 'hr', 'img']);
+      const urlAttrs = new Set(['href', 'src', 'xlink:href', 'poster']);
+      let index = 0;
+
+      const currentParent = () => stack[stack.length - 1];
+
+      while (index < input.length) {
+        const tagStart = input.indexOf('<', index);
+
+        if (tagStart === -1) {
+          currentParent().appendChild(document.createTextNode(input.slice(index)));
+          break;
+        }
+
+        if (tagStart > index) {
+          currentParent().appendChild(document.createTextNode(input.slice(index, tagStart)));
+        }
+
+        if (input.slice(tagStart, tagStart + 4) === '<!--') {
+          const commentEnd = input.indexOf('-->', tagStart + 4);
+          index = commentEnd === -1 ? input.length : commentEnd + 3;
+          continue;
+        }
+
+        const tagEnd = Utils.findTagEnd(input, tagStart + 1);
+        if (tagEnd === -1) {
+          currentParent().appendChild(document.createTextNode(input.slice(tagStart)));
+          break;
+        }
+
+        const rawTag = input.slice(tagStart + 1, tagEnd).trim();
+        if (!rawTag || rawTag[0] === '!' || rawTag[0] === '?') {
+          index = tagEnd + 1;
+          continue;
+        }
+
+        if (rawTag[0] === '/') {
+          const closingName = Utils.readHTMLName(rawTag, 1).name.toLowerCase();
+          for (let i = stack.length - 1; i > 0; i--) {
+            if (stack[i].nodeType === Node.ELEMENT_NODE && stack[i].tagName.toLowerCase() === closingName) {
+              stack.length = i;
+              break;
+            }
+          }
+          index = tagEnd + 1;
+          continue;
+        }
+
+        const tagInfo = Utils.readHTMLName(rawTag, 0);
+        const tagName = tagInfo.name.toLowerCase();
+        const selfClosing = Utils.isSelfClosingTag(rawTag);
+
+        if (blockedTags.has(tagName)) {
+          const closeTag = '</' + tagName;
+          const closeStart = lowerInput.indexOf(closeTag, tagEnd + 1);
+          const closeEnd = closeStart === -1 ? -1 : input.indexOf('>', closeStart + closeTag.length);
+          index = closeEnd === -1 ? tagEnd + 1 : closeEnd + 1;
+          continue;
+        }
+
+        if (!allowedTags.has(tagName)) {
+          index = tagEnd + 1;
+          continue;
+        }
+
+        const el = document.createElement(tagName);
+        Utils.parseHTMLAttributes(rawTag, tagInfo.end).forEach(attr => {
+          const attrName = attr.name.toLowerCase();
+          const attrValue = attr.value.trim();
+
+          if (!Utils.isSafeHTMLAttribute(attrName)) return;
+          if (urlAttrs.has(attrName) && !Utils.isSafeUrl(attrValue, tagName === 'img')) return;
+          if (attrName === 'style' && !Utils.isSafeStyleValue(attrValue)) return;
+
+          el.setAttribute(attr.name, attr.value);
+        });
+
+        if (tagName === 'a' && el.getAttribute('target') === '_blank') {
+          el.setAttribute('rel', 'noopener noreferrer');
+        }
+
+        currentParent().appendChild(el);
+        if (!selfClosing && !voidTags.has(tagName)) {
+          stack.push(el);
+        }
+
+        index = tagEnd + 1;
+      }
+
+      return Utils.serializeHTML(root);
+    },
+
+    findTagEnd(input, start) {
+      let quote = null;
+
+      for (let i = start; i < input.length; i++) {
+        const char = input[i];
+        if (quote) {
+          if (char === quote) quote = null;
+        } else if (char === '"' || char === "'") {
+          quote = char;
+        } else if (char === '>') {
+          return i;
+        }
+      }
+
+      return -1;
+    },
+
+    readHTMLName(input, start) {
+      let i = start;
+      let name = '';
+
+      while (i < input.length && Utils.isHTMLNameChar(input[i])) {
+        name += input[i];
+        i++;
+      }
+
+      return { name, end: i };
+    },
+
+    isHTMLNameChar(char) {
+      return (char >= 'a' && char <= 'z') ||
+        (char >= 'A' && char <= 'Z') ||
+        (char >= '0' && char <= '9') ||
+        char === '-' ||
+        char === '_' ||
+        char === ':';
+    },
+
+    isSelfClosingTag(rawTag) {
+      for (let i = rawTag.length - 1; i >= 0; i--) {
+        const char = rawTag[i];
+        if (char === ' ' || char === '\t' || char === '\n' || char === '\r') continue;
+        return char === '/';
+      }
+      return false;
+    },
+
+    parseHTMLAttributes(rawTag, start) {
+      const attrs = [];
+      let i = start;
+
+      while (i < rawTag.length) {
+        while (i < rawTag.length && /\s/.test(rawTag[i])) i++;
+        if (i >= rawTag.length || rawTag[i] === '/') break;
+
+        const attrInfo = Utils.readHTMLName(rawTag, i);
+        if (!attrInfo.name) {
+          i++;
+          continue;
+        }
+
+        i = attrInfo.end;
+        while (i < rawTag.length && /\s/.test(rawTag[i])) i++;
+
+        let value = '';
+        if (rawTag[i] === '=') {
+          i++;
+          while (i < rawTag.length && /\s/.test(rawTag[i])) i++;
+
+          if (rawTag[i] === '"' || rawTag[i] === "'") {
+            const quote = rawTag[i];
+            i++;
+            const valueStart = i;
+            while (i < rawTag.length && rawTag[i] !== quote) i++;
+            value = rawTag.slice(valueStart, i);
+            if (rawTag[i] === quote) i++;
+          } else {
+            const valueStart = i;
+            while (i < rawTag.length && !/\s/.test(rawTag[i]) && rawTag[i] !== '/') i++;
+            value = rawTag.slice(valueStart, i);
+          }
+        }
+
+        attrs.push({ name: attrInfo.name, value });
+      }
+
+      return attrs;
+    },
+
+    isSafeHTMLAttribute(name) {
+      if (!name || name.startsWith('on') || name === 'srcdoc') return false;
+      if (!Utils.isSafeObjectKey(name)) return false;
+      return /^[a-z0-9_:-]+$/.test(name);
+    },
+
+    isSafeStyleValue(value) {
+      const lower = String(value || '').toLowerCase();
+      return lower.indexOf('expression') === -1 &&
+        lower.indexOf('javascript:') === -1 &&
+        lower.indexOf('vbscript:') === -1 &&
+        lower.indexOf('data:') === -1;
+    },
+
+    serializeHTML(node) {
+      let html = '';
+
+      node.childNodes.forEach(child => {
+        if (child.nodeType === Node.TEXT_NODE) {
+          html += Utils.escapeHTML(child.textContent);
+          return;
+        }
+
+        if (child.nodeType !== Node.ELEMENT_NODE) return;
+
+        const tagName = child.tagName.toLowerCase();
+        html += '<' + tagName;
+        Array.from(child.attributes).forEach(attr => {
+          html += ' ' + attr.name + '="' + Utils.escapeHTML(attr.value) + '"';
+        });
+
+        if (new Set(['br', 'col', 'hr', 'img']).has(tagName)) {
+          html += '>';
+        } else {
+          html += '>' + Utils.serializeHTML(child) + '</' + tagName + '>';
+        }
+      });
+
+      return html;
+    },
+
+    isSafeUrl(value, allowImageData = false) {
+      if (!value) return true;
+      if (value.startsWith('#') || value.startsWith('/') || value.startsWith('./') || value.startsWith('../')) return true;
+
+      try {
+        const parsed = new URL(value, window.location.href);
+        const protocol = parsed.protocol.toLowerCase();
+        return protocol === 'http:' ||
+          protocol === 'https:' ||
+          protocol === 'mailto:' ||
+          protocol === 'tel:' ||
+          (allowImageData && protocol === 'data:' && /^data:image\//i.test(value));
+      } catch (e) {
+        return false;
+      }
+    },
+
+    escapeHTML(value) {
+      return String(value ?? '').replace(/[&<>"']/g, char => ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;'
+      })[char]);
     },
 
     isValidUrl(string) {
@@ -1668,7 +1944,7 @@
       this.overlay.appendChild(modal);
       this.overlay.classList.add('active');
 
-      const firstInput = modal.querySelector('input');
+      const firstInput = modal.querySelector('input:not([type="file"]), textarea, select, button');
       if (firstInput) firstInput.focus();
     }
 
@@ -1685,38 +1961,74 @@
     createLinkModal(data) {
       const modal = Utils.createElement('div', { className: 'neiki-modal' });
 
-      modal.innerHTML = `
-                <div class="neiki-modal-header">
-                    <h3>${t('modal.insertLink')}</h3>
-                    <button class="neiki-modal-close" type="button">${Icons.close}</button>
-                </div>
-                <div class="neiki-modal-body">
-                    <div class="neiki-form-group">
-                        <label>${t('modal.url')}</label>
-                        <input type="url" class="neiki-input" name="url" placeholder="https://example.com" value="${data.url || ''}">
-                    </div>
-                    <div class="neiki-form-group">
-                        <label>${t('modal.text')}</label>
-                        <input type="text" class="neiki-input" name="text" placeholder="${t('modal.linkText')}" value="${data.text || ''}">
-                    </div>
-                    <div class="neiki-form-group">
-                        <label>
-                            <input type="checkbox" name="newTab" ${data.newTab ? 'checked' : ''}> ${t('modal.openInNewTab')}
-                        </label>
-                    </div>
-                </div>
-                <div class="neiki-modal-footer">
-                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="cancel">${t('modal.cancel')}</button>
-                    <button class="neiki-btn neiki-btn-primary" type="button" data-action="insert">${t('modal.insert')}</button>
-                </div>
-            `;
+      const header = Utils.createElement('div', { className: 'neiki-modal-header' });
+      header.appendChild(Utils.createElement('h3', { textContent: t('modal.insertLink') }));
+      const closeBtn = Utils.createElement('button', {
+        className: 'neiki-modal-close',
+        type: 'button',
+        innerHTML: Icons.close
+      });
+      header.appendChild(closeBtn);
 
-      modal.querySelector('.neiki-modal-close').addEventListener('click', () => this.close());
-      modal.querySelector('[data-action="cancel"]').addEventListener('click', () => this.close());
-      modal.querySelector('[data-action="insert"]').addEventListener('click', () => {
-        const url = modal.querySelector('[name="url"]').value;
-        const text = modal.querySelector('[name="text"]').value || url;
-        const newTab = modal.querySelector('[name="newTab"]').checked;
+      const body = Utils.createElement('div', { className: 'neiki-modal-body' });
+      const urlGroup = Utils.createElement('div', { className: 'neiki-form-group' });
+      const urlInput = Utils.createElement('input', {
+        type: 'url',
+        className: 'neiki-input',
+        name: 'url',
+        placeholder: 'https://example.com'
+      });
+      urlInput.value = data.url || '';
+      urlGroup.appendChild(Utils.createElement('label', { textContent: t('modal.url') }));
+      urlGroup.appendChild(urlInput);
+
+      const textGroup = Utils.createElement('div', { className: 'neiki-form-group' });
+      const textInput = Utils.createElement('input', {
+        type: 'text',
+        className: 'neiki-input',
+        name: 'text',
+        placeholder: t('modal.linkText')
+      });
+      textInput.value = data.text || '';
+      textGroup.appendChild(Utils.createElement('label', { textContent: t('modal.text') }));
+      textGroup.appendChild(textInput);
+
+      const newTabGroup = Utils.createElement('div', { className: 'neiki-form-group' });
+      const newTabLabel = Utils.createElement('label');
+      const newTabInput = Utils.createElement('input', { type: 'checkbox', name: 'newTab' });
+      newTabInput.checked = !!data.newTab;
+      newTabLabel.appendChild(newTabInput);
+      newTabLabel.appendChild(document.createTextNode(' ' + t('modal.openInNewTab')));
+      newTabGroup.appendChild(newTabLabel);
+
+      body.appendChild(urlGroup);
+      body.appendChild(textGroup);
+      body.appendChild(newTabGroup);
+
+      const footer = Utils.createElement('div', { className: 'neiki-modal-footer' });
+      const cancelBtn = Utils.createElement('button', {
+        className: 'neiki-btn neiki-btn-secondary',
+        type: 'button',
+        textContent: t('modal.cancel')
+      });
+      const insertBtn = Utils.createElement('button', {
+        className: 'neiki-btn neiki-btn-primary',
+        type: 'button',
+        textContent: t('modal.insert')
+      });
+      footer.appendChild(cancelBtn);
+      footer.appendChild(insertBtn);
+
+      modal.appendChild(header);
+      modal.appendChild(body);
+      modal.appendChild(footer);
+
+      closeBtn.addEventListener('click', () => this.close());
+      cancelBtn.addEventListener('click', () => this.close());
+      insertBtn.addEventListener('click', () => {
+        const url = urlInput.value;
+        const text = textInput.value || url;
+        const newTab = newTabInput.checked;
 
         if (url) {
           this.editor.restoreSavedSelection();
@@ -1735,47 +2047,64 @@
 
       modal.innerHTML = `
                 <div class="neiki-modal-header">
-                    <h3>${t('modal.insertImage')}</h3>
+                    <h3>${Utils.escapeHTML(t('modal.insertImage'))}</h3>
                     <button class="neiki-modal-close" type="button">${Icons.close}</button>
                 </div>
                 <div class="neiki-modal-body">
                     <div class="neiki-form-group">
-                        <label>${t('modal.uploadImage')}</label>
-                        <input type="file" class="neiki-input" name="upload" accept="image/*" multiple>
-                        <small class="neiki-upload-hint" style="color: var(--neiki-text-muted); font-size: 11px;">${uploadHint}</small>
+                        <label>${Utils.escapeHTML(t('modal.uploadImage'))}</label>
+                        <div class="neiki-image-upload-zone" role="button" tabindex="0">
+                            <input type="file" class="neiki-image-upload-input" name="upload" accept="image/*" multiple>
+                            <div class="neiki-image-upload-icon">${Icons.image}</div>
+                            <div class="neiki-image-upload-title">${Utils.escapeHTML(t('modal.uploadImage'))}</div>
+                            <div class="neiki-image-upload-hint">${Utils.escapeHTML(uploadHint)}</div>
+                            <div class="neiki-image-upload-files" aria-live="polite"></div>
+                        </div>
                     </div>
                     <div class="neiki-form-divider">
-                        <span>${t('modal.or')}</span>
+                        <span>${Utils.escapeHTML(t('modal.or'))}</span>
                     </div>
                     <div class="neiki-form-group">
-                        <label>${t('modal.imageUrl')}</label>
-                        <input type="url" class="neiki-input" name="url" placeholder="https://example.com/image.jpg" value="${data.url || ''}">
+                        <label>${Utils.escapeHTML(t('modal.imageUrl'))}</label>
+                        <input type="url" class="neiki-input" name="url" placeholder="https://example.com/image.jpg">
                     </div>
                     <div class="neiki-form-group">
-                        <label>${t('modal.altText')}</label>
-                        <input type="text" class="neiki-input" name="alt" placeholder="${t('modal.describeImage')}" value="${data.alt || ''}">
+                        <label>${Utils.escapeHTML(t('modal.altText'))}</label>
+                        <input type="text" class="neiki-input" name="alt">
                     </div>
                     <div class="neiki-form-group">
-                        <label>${t('modal.widthOptional')}</label>
-                        <input type="text" class="neiki-input" name="width" placeholder="e.g. 300px or 50%" value="${data.width || ''}">
+                        <label>${Utils.escapeHTML(t('modal.widthOptional'))}</label>
+                        <input type="text" class="neiki-input" name="width" placeholder="e.g. 300px or 50%">
                     </div>
                 </div>
                 <div class="neiki-modal-footer">
-                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="cancel">${t('modal.cancel')}</button>
-                    <button class="neiki-btn neiki-btn-primary" type="button" data-action="insert">${t('modal.insert')}</button>
+                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="cancel">${Utils.escapeHTML(t('modal.cancel'))}</button>
+                    <button class="neiki-btn neiki-btn-primary" type="button" data-action="insert">${Utils.escapeHTML(t('modal.insert'))}</button>
                 </div>
             `;
 
       const uploadInput = modal.querySelector('[name="upload"]');
+      const uploadZone = modal.querySelector('.neiki-image-upload-zone');
+      const uploadFiles = modal.querySelector('.neiki-image-upload-files');
       const urlInput = modal.querySelector('[name="url"]');
-      const hintEl = modal.querySelector('.neiki-upload-hint');
       const insertBtn = modal.querySelector('[data-action="insert"]');
       let pendingFiles = [];
+      let uploadDragCounter = 0;
 
-      // Handle file upload (supports multiple files)
-      uploadInput.addEventListener('change', (e) => {
-        const files = Array.from(e.target.files).filter(f => f.type.startsWith('image/'));
-        const invalid = Array.from(e.target.files).filter(f => !f.type.startsWith('image/'));
+      urlInput.value = data.url || '';
+      modal.querySelector('[name="alt"]').placeholder = t('modal.describeImage');
+      modal.querySelector('[name="alt"]').value = data.alt || '';
+      modal.querySelector('[name="width"]').value = data.width || '';
+
+      const updateUploadFeedback = (files) => {
+        uploadZone.classList.toggle('has-files', files.length > 0);
+        uploadFiles.textContent = files.map(file => file.name).join(', ');
+      };
+
+      const handleSelectedFiles = (fileList) => {
+        const selectedFiles = Array.from(fileList || []);
+        const files = selectedFiles.filter(f => f.type.startsWith('image/'));
+        const invalid = selectedFiles.filter(f => !f.type.startsWith('image/'));
 
         if (invalid.length > 0) {
           alert(t('modal.invalidImageFile'));
@@ -1783,13 +2112,15 @@
 
         if (files.length === 0) {
           pendingFiles = [];
+          updateUploadFeedback([]);
+          urlInput.disabled = false;
           return;
         }
 
         pendingFiles = files;
+        updateUploadFeedback(files);
 
         if (files.length === 1 && !hasUploadHandler) {
-          // Single file without handler — preview as base64 in URL field
           const reader = new FileReader();
           reader.onload = (ev) => {
             urlInput.value = ev.target.result;
@@ -1797,10 +2128,51 @@
           };
           reader.readAsDataURL(files[0]);
         } else {
-          // Multiple files or handler present — disable URL field
           urlInput.value = '';
           urlInput.disabled = true;
         }
+      };
+
+      // Handle file upload (supports multiple files)
+      uploadInput.addEventListener('change', (e) => {
+        handleSelectedFiles(e.target.files);
+      });
+
+      uploadZone.addEventListener('click', (e) => {
+        if (e.target !== uploadInput) uploadInput.click();
+      });
+
+      uploadZone.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          uploadInput.click();
+        }
+      });
+
+      uploadZone.addEventListener('dragenter', (e) => {
+        e.preventDefault();
+        uploadDragCounter++;
+        uploadZone.classList.add('drag-over');
+      });
+
+      uploadZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+      });
+
+      uploadZone.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        uploadDragCounter--;
+        if (uploadDragCounter <= 0) {
+          uploadDragCounter = 0;
+          uploadZone.classList.remove('drag-over');
+        }
+      });
+
+      uploadZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadDragCounter = 0;
+        uploadZone.classList.remove('drag-over');
+        handleSelectedFiles(e.dataTransfer.files);
       });
 
       // Clear URL when upload is cleared
@@ -1809,6 +2181,7 @@
           urlInput.disabled = false;
           uploadInput.value = '';
           pendingFiles = [];
+          updateUploadFeedback([]);
         }
       });
 
@@ -1842,7 +2215,6 @@
           this.close();
         } else if (pendingFiles.length > 1) {
           // Multiple files without handler — insert each as base64
-          let loaded = 0;
           insertBtn.disabled = true;
           insertBtn.textContent = t('modal.uploadingImage');
 
@@ -1878,32 +2250,35 @@
 
       modal.innerHTML = `
                 <div class="neiki-modal-header">
-                    <h3>${t('modal.insertTable')}</h3>
+                    <h3>${Utils.escapeHTML(t('modal.insertTable'))}</h3>
                     <button class="neiki-modal-close" type="button">${Icons.close}</button>
                 </div>
                 <div class="neiki-modal-body">
                     <div class="neiki-form-row">
                         <div class="neiki-form-group">
-                            <label>${t('modal.rows')}</label>
-                            <input type="number" class="neiki-input" name="rows" min="1" max="20" value="${data.rows || 3}">
+                            <label>${Utils.escapeHTML(t('modal.rows'))}</label>
+                            <input type="number" class="neiki-input" name="rows" min="1" max="20">
                         </div>
                         <div class="neiki-form-group">
-                            <label>${t('modal.columns')}</label>
-                            <input type="number" class="neiki-input" name="cols" min="1" max="10" value="${data.cols || 3}">
+                            <label>${Utils.escapeHTML(t('modal.columns'))}</label>
+                            <input type="number" class="neiki-input" name="cols" min="1" max="10">
                         </div>
                     </div>
                     <div class="neiki-form-group">
                         <label>
-                            <input type="checkbox" name="header" ${data.header !== false ? 'checked' : ''}> ${t('modal.includeHeaderRow')}
+                            <input type="checkbox" name="header"> ${Utils.escapeHTML(t('modal.includeHeaderRow'))}
                         </label>
                     </div>
                 </div>
                 <div class="neiki-modal-footer">
-                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="cancel">${t('modal.cancel')}</button>
-                    <button class="neiki-btn neiki-btn-primary" type="button" data-action="insert">${t('modal.insert')}</button>
+                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="cancel">${Utils.escapeHTML(t('modal.cancel'))}</button>
+                    <button class="neiki-btn neiki-btn-primary" type="button" data-action="insert">${Utils.escapeHTML(t('modal.insert'))}</button>
                 </div>
             `;
 
+      modal.querySelector('[name="rows"]').value = parseInt(data.rows, 10) || 3;
+      modal.querySelector('[name="cols"]').value = parseInt(data.cols, 10) || 3;
+      modal.querySelector('[name="header"]').checked = data.header !== false;
       modal.querySelector('.neiki-modal-close').addEventListener('click', () => this.close());
       modal.querySelector('[data-action="cancel"]').addEventListener('click', () => this.close());
       modal.querySelector('[data-action="insert"]').addEventListener('click', () => {
@@ -1924,28 +2299,28 @@
 
       modal.innerHTML = `
                 <div class="neiki-modal-header">
-                    <h3>${t('modal.findReplace')}</h3>
+                    <h3>${Utils.escapeHTML(t('modal.findReplace'))}</h3>
                     <button class="neiki-modal-close" type="button">${Icons.close}</button>
                 </div>
                 <div class="neiki-modal-body">
                     <div class="neiki-form-group">
-                        <label>${t('modal.find')}</label>
-                        <input type="text" class="neiki-input" name="find" placeholder="${t('modal.searchText')}">
+                        <label>${Utils.escapeHTML(t('modal.find'))}</label>
+                        <input type="text" class="neiki-input" name="find">
                     </div>
                     <div class="neiki-form-group">
-                        <label>${t('modal.replaceWith')}</label>
-                        <input type="text" class="neiki-input" name="replace" placeholder="${t('modal.replacementText')}">
+                        <label>${Utils.escapeHTML(t('modal.replaceWith'))}</label>
+                        <input type="text" class="neiki-input" name="replace">
                     </div>
                     <div class="neiki-form-group neiki-form-row">
-                        <label><input type="checkbox" name="regex"> ${t('modal.useRegex')}</label>
-                        <label><input type="checkbox" name="caseSensitive"> ${t('modal.caseSensitive')}</label>
+                        <label><input type="checkbox" name="regex"> ${Utils.escapeHTML(t('modal.useRegex'))}</label>
+                        <label><input type="checkbox" name="caseSensitive"> ${Utils.escapeHTML(t('modal.caseSensitive'))}</label>
                     </div>
                     <div class="neiki-find-results" style="margin-top:10px;font-size:13px;color:var(--neiki-text-muted);"></div>
                 </div>
                 <div class="neiki-modal-footer">
-                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="findNext">${t('modal.findNext')}</button>
-                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="replaceOne">${t('modal.replace')}</button>
-                    <button class="neiki-btn neiki-btn-primary" type="button" data-action="replaceAll">${t('modal.replaceAll')}</button>
+                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="findNext">${Utils.escapeHTML(t('modal.findNext'))}</button>
+                    <button class="neiki-btn neiki-btn-secondary" type="button" data-action="replaceOne">${Utils.escapeHTML(t('modal.replace'))}</button>
+                    <button class="neiki-btn neiki-btn-primary" type="button" data-action="replaceAll">${Utils.escapeHTML(t('modal.replaceAll'))}</button>
                 </div>
             `;
 
@@ -1958,6 +2333,9 @@
       let currentMatches = [];
       let currentIndex = -1;
 
+      findInput.placeholder = t('modal.searchText');
+      replaceInput.placeholder = t('modal.replacementText');
+
       const clearHighlights = () => {
         const highlights = this.editor.contentArea.querySelectorAll('.neiki-highlight-find');
         highlights.forEach(h => {
@@ -1978,7 +2356,6 @@
           return;
         }
 
-        const content = this.editor.contentArea.innerHTML;
         let flags = 'g';
         if (!caseCheck.checked) flags += 'i';
 
@@ -2127,16 +2504,16 @@
 
       modal.innerHTML = `
         <div class="neiki-modal-header">
-          <h3>${t('menu.help')}</h3>
+          <h3>${Utils.escapeHTML(t('menu.help'))}</h3>
           <button class="neiki-modal-close" type="button">${Icons.close}</button>
         </div>
         <div class="neiki-modal-body" style="text-align: center; padding: 24px 20px;">
           <img src="https://github.com/neikiri/neiki-editor/raw/main/logo.png" alt="Neiki's Editor" style="width: 120px; height: auto; margin: 0 auto 16px; display: block;">
           <div style="font-size: 14px; line-height: 2; color: var(--neiki-text-primary);">
-            <div><strong>${t('help.author')}:</strong> neikiri (Jindřich Stoklasa)</div>
-            <div><strong>${t('help.version')}:</strong> 2.9.2</div>
-            <div><strong>${t('help.github')}:</strong> <a href="https://github.com/neikiri/neiki-editor" target="_blank" style="color: var(--neiki-accent);">github.com/neikiri/neiki-editor</a></div>
-            <div><strong>${t('help.documentation')}:</strong> <a href="https://github.com/neikiri/neiki-editor/wiki" target="_blank" style="color: var(--neiki-accent);">Wiki</a></div>
+            <div><strong>${Utils.escapeHTML(t('help.author'))}:</strong> neikiri (Jindřich Stoklasa)</div>
+            <div><strong>${Utils.escapeHTML(t('help.version'))}:</strong> 2.9.4</div>
+            <div><strong>${Utils.escapeHTML(t('help.github'))}:</strong> <a href="https://github.com/neikiri/neiki-editor" target="_blank" rel="noopener noreferrer" style="color: var(--neiki-accent);">github.com/neikiri/neiki-editor</a></div>
+            <div><strong>${Utils.escapeHTML(t('help.documentation'))}:</strong> <a href="https://github.com/neikiri/neiki-editor/wiki" target="_blank" rel="noopener noreferrer" style="color: var(--neiki-accent);">Wiki</a></div>
           </div>
         </div>
       `;
@@ -2743,26 +3120,34 @@
 
     insertHTML(html) {
       this.editor.focus();
-      document.execCommand('insertHTML', false, html);
+      document.execCommand('insertHTML', false, Utils.sanitizeHTML(html));
       this.editor.history.record();
       this.editor.triggerChange();
     }
 
     insertLink(url, text, newTab = false) {
+      if (!Utils.isSafeUrl(url)) return;
       const selection = Utils.getSelection();
       const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
 
       if (range && !range.collapsed) {
         this.exec('createLink', url);
         if (newTab) {
-          const links = this.editor.contentArea.querySelectorAll('a[href="' + url + '"]');
-          links.forEach(link => link.setAttribute('target', '_blank'));
+          const links = Array.from(this.editor.contentArea.querySelectorAll('a'))
+            .filter(link => link.getAttribute('href') === url);
+          links.forEach(link => {
+            link.setAttribute('target', '_blank');
+            link.setAttribute('rel', 'noopener noreferrer');
+          });
         }
       } else {
         const link = document.createElement('a');
         link.href = url;
         link.textContent = text || url;
-        if (newTab) link.target = '_blank';
+        if (newTab) {
+          link.target = '_blank';
+          link.rel = 'noopener noreferrer';
+        }
 
         this.editor.focus();
         document.execCommand('insertHTML', false, link.outerHTML);
@@ -2772,9 +3157,10 @@
     }
 
     insertImage(url, alt = '', width = '') {
-      let html = `<img src="${url}"`;
-      if (alt) html += ` alt="${alt}"`;
-      if (width) html += ` width="${width}"`;
+      if (!Utils.isSafeUrl(url, true)) return;
+      let html = `<img src="${Utils.escapeHTML(url)}"`;
+      if (alt) html += ` alt="${Utils.escapeHTML(alt)}"`;
+      if (width) html += ` width="${Utils.escapeHTML(width)}"`;
       html += '>';
 
       this.editor.focus();
@@ -2841,6 +3227,8 @@
         'neiki_' + (typeof element === 'string' ? element.replace(/[^a-zA-Z0-9]/g, '_') : 'editor');
 
       this.config = Utils.deepMerge(DEFAULT_CONFIG, options);
+      this.instanceIndex = ++EDITOR_INSTANCE_COUNTER;
+      this.storageId = this.createAutosaveStorageId(element);
       this.isFullscreen = false;
       this.isAutosaveEnabled = false;
       this.autosaveInterval = null;
@@ -2851,7 +3239,7 @@
 
     init() {
       // Initialize storage first
-      this.storage = new StorageManager(this.id);
+      this.storage = new StorageManager(this.storageId);
 
       // Set language for translations
       _currentLanguage = this.config.language || 'en';
@@ -2924,6 +3312,99 @@
       this.originalElement.parentNode.insertBefore(this.container, this.originalElement);
     }
 
+    createAutosaveStorageId(element) {
+      const customKey = this.config.autosaveKey ||
+        this.originalElement.getAttribute('data-neiki-autosave-key');
+
+      if (customKey) {
+        return 'autosave_' + this.normalizeStorageKey(customKey);
+      }
+
+      const pageScope = this.hashString(this.getPageStorageScope());
+      const elementScope = this.normalizeStorageKey(this.getElementStorageScope(element));
+      return 'autosave_' + pageScope + '_' + elementScope;
+    }
+
+    getPageStorageScope() {
+      try {
+        return window.location.href || window.location.pathname || 'page';
+      } catch (e) {
+        return 'page';
+      }
+    }
+
+    getElementStorageScope(element) {
+      if (this.originalElement.id) return this.originalElement.id;
+      if (this.originalElement.name) return this.originalElement.name;
+      if (this.originalElement.getAttribute('data-neiki-id')) {
+        return this.originalElement.getAttribute('data-neiki-id');
+      }
+      if (typeof element === 'string') return element;
+      return this.getElementPath(this.originalElement);
+    }
+
+    getElementPath(element) {
+      const parts = [];
+      let node = element;
+
+      while (node && node.nodeType === Node.ELEMENT_NODE && node !== document.body) {
+        let part = node.tagName.toLowerCase();
+        const parent = node.parentNode;
+
+        if (parent && parent.children) {
+          const siblings = Array.prototype.filter.call(parent.children, child => child.tagName === node.tagName);
+          if (siblings.length > 1) {
+            part += ':nth-of-type(' + (siblings.indexOf(node) + 1) + ')';
+          }
+        }
+
+        parts.unshift(part);
+        node = parent;
+      }
+
+      return parts.length ? parts.join('>') : 'editor_' + this.instanceIndex;
+    }
+
+    normalizeStorageKey(value) {
+      const input = String(value).trim();
+      let output = '';
+      let lastWasSeparator = false;
+
+      for (let i = 0; i < input.length; i++) {
+        const char = input[i];
+        const isSafe = (char >= 'a' && char <= 'z') ||
+          (char >= 'A' && char <= 'Z') ||
+          (char >= '0' && char <= '9') ||
+          char === '-' ||
+          char === '_';
+
+        if (isSafe) {
+          output += char;
+          lastWasSeparator = false;
+        } else if (!lastWasSeparator) {
+          output += '_';
+          lastWasSeparator = true;
+        }
+      }
+
+      while (output[0] === '_') output = output.slice(1);
+      while (output[output.length - 1] === '_') output = output.slice(0, -1);
+
+      return output || 'editor';
+    }
+
+    hashString(value) {
+      let hash = 0;
+      const input = String(value);
+
+      for (let i = 0; i < input.length; i++) {
+        hash = ((hash << 5) - hash) + input.charCodeAt(i);
+        hash |= 0;
+      }
+
+      return Math.abs(hash).toString(36);
+    }
+
     createToolbar() {
       this.toolbar = Utils.createElement('div', { className: 'neiki-toolbar' });
       this.toolbarButtons = {};
@@ -3357,14 +3838,14 @@
 
       if (autosaveEnabled && autosavedContent) {
         // Restore autosaved content only if autosave was enabled
-        this.contentArea.innerHTML = autosavedContent;
+        this.contentArea.innerHTML = Utils.sanitizeHTML(autosavedContent);
       } else {
         // Always use original element content (textarea value or innerHTML)
         // This ensures the page's actual content is shown, not old localStorage data
         if (this.originalElement.value) {
-          this.contentArea.innerHTML = this.originalElement.value;
+          this.contentArea.innerHTML = Utils.sanitizeHTML(this.originalElement.value);
         } else if (this.originalElement.innerHTML.trim()) {
-          this.contentArea.innerHTML = this.originalElement.innerHTML;
+          this.contentArea.innerHTML = Utils.sanitizeHTML(this.originalElement.innerHTML);
         }
       }
 
@@ -5026,7 +5507,6 @@
       if (!this.isResizing || !this.currentImg) return;
 
       const dx = e.clientX - this.startX;
-      const dy = e.clientY - this.startY;
 
       let newWidth, newHeight;