nodebb-plugin-pdf-secure2 1.2.34 → 1.2.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-pdf-secure2",
-  "version": "1.2.34",
+  "version": "1.2.36",
   "description": "Secure PDF viewer plugin for NodeBB - prevents downloading, enables canvas-only rendering with Premium group support",
   "main": "library.js",
   "repository": {

package/static/viewer.html

@@ -23,7 +23,7 @@
             --accent: #0078d4;
             --accent-hover: #1a86d9;
             --border-color: #404040;
-            --toolbar-height: 34px;
+            --toolbar-height: 36px;
             --sidebar-width: 200px;
             --toolbar-height-mobile: 44px;
             --bottom-bar-height: 52px;
@@ -98,7 +98,7 @@
             fill: var(--accent);
         }
 
-        /* Toolbar - Edge Style */
+        /* Toolbar - Edge Style (compact for iframe embed) */
         #toolbar {
             position: fixed;
             top: 0;
@@ -109,8 +109,9 @@
             border-bottom: 1px solid var(--border-color);
             display: flex;
             align-items: center;
-            padding: 0 6px;
-            gap: 1px;
+            justify-content: flex-start;
+            padding: 0 4px;
+            gap: 0px;
             z-index: 100;
         }
 
@@ -121,13 +122,13 @@
         }
 
         .toolbarBtn {
-            width: 24px;
-            height: 24px;
-            min-width: 24px;
+            width: 26px;
+            height: 26px;
+            min-width: 26px;
             border: none;
             background: transparent;
             color: var(--text-primary);
-            border-radius: 4px;
+            border-radius: 3px;
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -145,16 +146,16 @@
         }
 
         .toolbarBtn svg {
-            width: 14px;
-            height: 14px;
+            width: 15px;
+            height: 15px;
             fill: currentColor;
         }
 
         .separator {
             width: 1px;
-            height: 16px;
+            height: 18px;
             background: var(--border-color);
-            margin: 0 2px;
+            margin: 0 3px;
         }
 
         /* Enhanced Tooltips */
@@ -417,7 +418,7 @@
 
         .dropdownArrow {
             width: 14px;
-            height: 24px;
+            height: 26px;
             border: none;
             background: transparent;
             color: var(--text-primary);
@@ -542,8 +543,8 @@
         .pageInfo {
             display: flex;
             align-items: center;
-            gap: 4px;
-            margin-left: auto;
+            gap: 3px;
+            margin-left: 3px;
         }
 
         #pageInput {
@@ -555,6 +556,7 @@
             color: var(--text-primary);
             text-align: center;
             font-size: 11px;
+            padding: 0;
         }
 
         #pageCount {
@@ -1450,6 +1452,7 @@
 
         body.viewer-fullscreen .pageInfo {
             gap: 8px;
+            margin-left: auto;
         }
 
         body.viewer-fullscreen #viewerContainer {
@@ -2303,6 +2306,181 @@
             const annotationsStore = new Map();
             const annotationRotations = new Map(); // tracks rotation when annotations were saved
 
+            // localStorage persistence helpers
+            var _storagePrefix = (function () {
+                var filename = (_cfg && _cfg.filename) || 'local';
+                // FNV-1a hash to avoid key collisions from filenames containing delimiters
+                var hash = 0x811c9dc5;
+                for (var i = 0; i < filename.length; i++) {
+                    hash ^= filename.charCodeAt(i);
+                    hash = (hash * 0x01000193) >>> 0;
+                }
+                return hash.toString(36);
+            })();
+
+            function getStorageKey(pageNum) {
+                return 'pdfA::' + _storagePrefix + '::p' + pageNum;
+            }
+            function getRotStorageKey(pageNum) {
+                return 'pdfR::' + _storagePrefix + '::p' + pageNum;
+            }
+            function getTextHighlightKey(pageNum) {
+                return 'pdfH::' + _storagePrefix + '::p' + pageNum;
+            }
+
+            // Touch manifest - tracks which files have annotations and when last accessed
+            function touchManifest() {
+                try {
+                    var manifest = JSON.parse(localStorage.getItem('pdfAnnot_manifest') || '{}');
+                    manifest[_storagePrefix] = Date.now();
+                    localStorage.setItem('pdfAnnot_manifest', JSON.stringify(manifest));
+                } catch (e) { /* ignore */ }
+            }
+
+            // Evict oldest file's annotations when quota is exceeded
+            function evictOldest(excludePrefix) {
+                try {
+                    var manifest = JSON.parse(localStorage.getItem('pdfAnnot_manifest') || '{}');
+                    var entries = Object.entries(manifest).sort(function (a, b) { return a[1] - b[1]; });
+                    for (var i = 0; i < entries.length; i++) {
+                        var oldPrefix = entries[i][0];
+                        if (oldPrefix === excludePrefix) continue;
+                        // Remove all keys for this old file
+                        var keysToRemove = [];
+                        for (var j = 0; j < localStorage.length; j++) {
+                            var key = localStorage.key(j);
+                            if (key && key.indexOf('::' + oldPrefix + '::') !== -1) {
+                                keysToRemove.push(key);
+                            }
+                        }
+                        keysToRemove.forEach(function (k) { localStorage.removeItem(k); });
+                        delete manifest[oldPrefix];
+                        localStorage.setItem('pdfAnnot_manifest', JSON.stringify(manifest));
+                        return keysToRemove.length > 0;
+                    }
+                    return false;
+                } catch (e) { return false; }
+            }
+
+            // Debounced persistence - avoids blocking main thread on every stroke
+            var _persistTimers = {};
+            function debouncedPersist(pageNum, svgHtml, rotation) {
+                if (_persistTimers[pageNum]) clearTimeout(_persistTimers[pageNum]);
+                _persistTimers[pageNum] = setTimeout(function () {
+                    persistToStorage(pageNum, svgHtml, rotation);
+                    delete _persistTimers[pageNum];
+                }, 400);
+            }
+
+            // Flush all pending debounced writes (called on page unload)
+            function flushPendingPersist() {
+                Object.keys(_persistTimers).forEach(function (pn) {
+                    clearTimeout(_persistTimers[pn]);
+                    var data = annotationsStore.get(parseInt(pn, 10));
+                    var rot = annotationRotations.get(parseInt(pn, 10)) || 0;
+                    if (data) persistToStorage(parseInt(pn, 10), data, rot);
+                });
+                _persistTimers = {};
+            }
+            window.addEventListener('beforeunload', flushPendingPersist);
+            window.addEventListener('pagehide', flushPendingPersist);
+            document.addEventListener('visibilitychange', function () {
+                if (document.hidden) flushPendingPersist();
+            });
+
+            function persistToStorage(pageNum, svgHtml, rotation) {
+                try {
+                    if (svgHtml) {
+                        localStorage.setItem(getStorageKey(pageNum), svgHtml);
+                        localStorage.setItem(getRotStorageKey(pageNum), String(rotation || 0));
+                    } else {
+                        localStorage.removeItem(getStorageKey(pageNum));
+                        localStorage.removeItem(getRotStorageKey(pageNum));
+                    }
+                } catch (e) {
+                    if (e.name === 'QuotaExceededError' || e.code === 22) {
+                        if (evictOldest(_storagePrefix)) {
+                            try {
+                                localStorage.setItem(getStorageKey(pageNum), svgHtml);
+                                localStorage.setItem(getRotStorageKey(pageNum), String(rotation || 0));
+                                return;
+                            } catch (e2) { /* still full */ }
+                        }
+                        if (typeof showToast === 'function') {
+                            showToast('Depolama alani dolu. Bazi eski notlar silindi.', 'warning');
+                        }
+                    }
+                }
+            }
+            function loadFromStorage(pageNum) {
+                try {
+                    var html = localStorage.getItem(getStorageKey(pageNum));
+                    var rot = parseInt(localStorage.getItem(getRotStorageKey(pageNum)) || '0', 10);
+                    return html ? { html: html, rotation: rot } : null;
+                } catch (e) { return null; }
+            }
+
+            // Sanitize SVG/HTML from localStorage to prevent XSS
+            var _allowedSvgTags = ['path','rect','ellipse','line','circle','text','tspan','g','defs','marker','polyline','polygon'];
+            var _allowedSvgAttrs = ['d','x','y','x1','y1','x2','y2','cx','cy','r','rx','ry','width','height','viewBox',
+                'fill','stroke','stroke-width','stroke-linecap','stroke-linejoin','stroke-dasharray','opacity',
+                'transform','class','data-id','data-type','font-size','font-family','text-anchor','points',
+                'marker-start','marker-end','marker-mid','id','refX','refY','markerWidth','markerHeight',
+                'orient','markerUnits','style'];
+            function sanitizeSvgHtml(html) {
+                if (!html) return '';
+                var temp = document.createElement('div');
+                temp.innerHTML = html;
+                // Remove all non-allowed elements
+                temp.querySelectorAll('*').forEach(function (el) {
+                    var tag = el.tagName.toLowerCase();
+                    if (_allowedSvgTags.indexOf(tag) === -1) {
+                        el.remove();
+                        return;
+                    }
+                    // Remove non-allowed attributes
+                    var attrs = Array.from(el.attributes);
+                    attrs.forEach(function (attr) {
+                        if (_allowedSvgAttrs.indexOf(attr.name) === -1) {
+                            el.removeAttribute(attr.name);
+                        }
+                    });
+                    // Sanitize style attribute - only allow safe CSS properties
+                    if (el.hasAttribute('style')) {
+                        var style = el.getAttribute('style');
+                        if (/expression|javascript|url\s*\(/i.test(style)) {
+                            el.removeAttribute('style');
+                        }
+                    }
+                });
+                return temp.innerHTML;
+            }
+
+            // Sanitize text highlight HTML from localStorage
+            function sanitizeHighlightHtml(html) {
+                if (!html) return '';
+                var temp = document.createElement('div');
+                temp.innerHTML = html;
+                temp.querySelectorAll('*').forEach(function (el) {
+                    var tag = el.tagName.toLowerCase();
+                    if (tag !== 'div') { el.remove(); return; }
+                    // Only allow style and class attributes on divs
+                    var attrs = Array.from(el.attributes);
+                    attrs.forEach(function (attr) {
+                        if (attr.name !== 'style' && attr.name !== 'class') {
+                            el.removeAttribute(attr.name);
+                        }
+                    });
+                    if (el.hasAttribute('style')) {
+                        var style = el.getAttribute('style');
+                        if (/expression|javascript|url\s*\(/i.test(style)) {
+                            el.removeAttribute('style');
+                        }
+                    }
+                });
+                return temp.innerHTML;
+            }
+
             // AbortControllers for annotation layer event listeners (cleanup on re-inject)
             const annotationAbortControllers = new Map();  // pageNum -> AbortController
 
@@ -2650,6 +2828,7 @@
                     console.log('[PDF-Secure] No config found, showing file picker');
                     return;
                 }
+                touchManifest();
 
                 const config = _cfg;
                 console.log('[PDF-Secure] Auto-loading:', config.filename);
@@ -3349,6 +3528,15 @@
 
 
 
+                // Restore from localStorage if not already in memory
+                if (!annotationsStore.has(pageNum)) {
+                    var stored = loadFromStorage(pageNum);
+                    if (stored) {
+                        annotationsStore.set(pageNum, sanitizeSvgHtml(stored.html));
+                        annotationRotations.set(pageNum, stored.rotation);
+                    }
+                }
+
                 // Restore saved annotations for this page (with rotation transform if needed)
                 if (annotationsStore.has(pageNum)) {
                     const savedRot = annotationRotations.get(pageNum) || 0;
@@ -3537,10 +3725,13 @@
 
                 if (newState) {
                     annotationsStore.set(pageNum, newState);
-                    annotationRotations.set(pageNum, pdfViewer.pagesRotation || 0);
+                    var rot = pdfViewer.pagesRotation || 0;
+                    annotationRotations.set(pageNum, rot);
+                    debouncedPersist(pageNum, newState, rot);
                 } else {
                     annotationsStore.delete(pageNum);
                     annotationRotations.delete(pageNum);
+                    persistToStorage(pageNum, null, 0);
                 }
 
                 updateUndoRedoButtons();
@@ -3583,9 +3774,11 @@
                 if (previousHtml.trim()) {
                     annotationsStore.set(pageNum, svg.innerHTML);
                     annotationRotations.set(pageNum, curRot);
+                    persistToStorage(pageNum, svg.innerHTML, curRot);
                 } else {
                     annotationsStore.delete(pageNum);
                     annotationRotations.delete(pageNum);
+                    persistToStorage(pageNum, null, 0);
                 }
 
                 clearAnnotationSelection();
@@ -3619,9 +3812,11 @@
                 if (redoHtml.trim()) {
                     annotationsStore.set(pageNum, svg.innerHTML);
                     annotationRotations.set(pageNum, curRot);
+                    persistToStorage(pageNum, svg.innerHTML, curRot);
                 } else {
                     annotationsStore.delete(pageNum);
                     annotationRotations.delete(pageNum);
+                    persistToStorage(pageNum, null, 0);
                 }
 
                 clearAnnotationSelection();
@@ -3647,6 +3842,7 @@
                 svg.innerHTML = '';
                 annotationsStore.delete(pageNum);
                 annotationRotations.delete(pageNum);
+                persistToStorage(pageNum, null, 0);
 
                 clearAnnotationSelection();
                 updateUndoRedoButtons();
@@ -4327,24 +4523,40 @@
             function saveTextHighlights(pageNum, pageDiv) {
                 const container = pageDiv.querySelector('.textHighlightContainer');
                 if (container) {
-                    const key = `textHighlight_${pageNum}`;
-                    localStorage.setItem(key, container.innerHTML);
+                    try {
+                        localStorage.setItem(getTextHighlightKey(pageNum), container.innerHTML);
+                        touchManifest();
+                    } catch (e) {
+                        if (e.name === 'QuotaExceededError' || e.code === 22) {
+                            if (evictOldest(_storagePrefix)) {
+                                try {
+                                    localStorage.setItem(getTextHighlightKey(pageNum), container.innerHTML);
+                                    touchManifest();
+                                    return;
+                                } catch (e2) { /* still full */ }
+                            }
+                            if (typeof showToast === 'function') {
+                                showToast('Depolama alani dolu. Bazi eski notlar silindi.', 'warning');
+                            }
+                        }
+                    }
                 }
             }
 
             function loadTextHighlights(pageNum, pageDiv) {
-                const key = `textHighlight_${pageNum}`;
-                const saved = localStorage.getItem(key);
-                if (saved) {
-                    let container = pageDiv.querySelector('.textHighlightContainer');
-                    if (!container) {
-                        container = document.createElement('div');
-                        container.className = 'textHighlightContainer';
-                        container.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
-                        pageDiv.insertBefore(container, pageDiv.firstChild);
+                try {
+                    const saved = localStorage.getItem(getTextHighlightKey(pageNum));
+                    if (saved) {
+                        let container = pageDiv.querySelector('.textHighlightContainer');
+                        if (!container) {
+                            container = document.createElement('div');
+                            container.className = 'textHighlightContainer';
+                            container.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
+                            pageDiv.insertBefore(container, pageDiv.firstChild);
+                        }
+                        container.innerHTML = sanitizeHighlightHtml(saved);
                     }
-                    container.innerHTML = saved;
-                }
+                } catch (e) { /* localStorage unavailable */ }
             }
 
             function showHighlightPopup(x, y, pageDiv, rects) {