release(v1.8.0): feat(onlyoffice): first-class ONLYOFFICE integration (view/edit), admin UI, API, CSP helpers

Refs #37 — implements ONLYOFFICE integration suggested in the discussion; video progress saving will be tracked separately.
2025-11-03 16:39:48 -05:00
parent 77a94ecd85
commit d00db803c3
15 changed files with 1240 additions and 105 deletions
--- a/public/.htaccess
+++ b/public/.htaccess
@@ -1,38 +1,46 @@
 # --------------------------------
-# Base: safe in most environments
+# FileRise portable .htaccess
 # --------------------------------
 Options -Indexes
 DirectoryIndex index.html

 <IfModule mod_authz_core.c>
-  <FilesMatch "^\.">
+  # Block dotfiles like .env, .git, etc., but allow ACME under .well-known
+  <FilesMatch "^\.(?!well-known(?:/|$))">
    Require all denied
  </FilesMatch>
 </IfModule>

+# ---------------- Rewrites ----------------
+<IfModule mod_rewrite.c>
 RewriteEngine On
+
 # Never redirect local/dev hosts
 RewriteCond %{HTTP_HOST} ^(localhost|127\.0\.0\.1|fr\.local|192\.168\.[0-9]+\.[0-9]+)$ [NC]
 RewriteRule ^ - [L]

-# --- HTTPS redirect ---
-# Use ONE of these blocks.
+# Let ACME http-01 pass BEFORE any redirect (needed for auto-renew)
+RewriteCond %{REQUEST_URI} ^/.well-known/acme-challenge/
+RewriteRule - - [L]

-# A) Direct TLS on this server (enable this if Apache terminates HTTPS here)
-#RewriteCond %{HTTPS} off
+# HTTPS redirect (enable ONE of these, comment the other)
+
+# A) Direct TLS on this server
+#RewriteCond %{HTTPS} !=on
 #RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

-# B) Behind a reverse proxy/CDN that sets X-Forwarded-Proto
+# B) Behind reverse proxy that sets X-Forwarded-Proto
 #RewriteCond %{HTTP:X-Forwarded-Proto} =http [OR]
 #RewriteCond %{HTTP:X-Forwarded-Proto} ^$
 #RewriteCond %{HTTPS} !=on
 #RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

-# Don't interfere with ACME/http-01 if you do your own certs
-#RewriteCond %{REQUEST_URI} ^/.well-known/acme-challenge/
-#RewriteRule - - [L]
+# Mark versioned assets (?v=...) with env flag for caching rules below
+RewriteCond %{QUERY_STRING} (^|&)v= [NC]
+RewriteRule ^ - [E=IS_VER:1]
+</IfModule>

-# --- MIME types (fonts/SVG/ESM) ---
+# ---------------- MIME types ----------------
 <IfModule mod_mime.c>
  AddType font/woff2 .woff2
  AddType font/woff  .woff
@@ -40,7 +48,7 @@ RewriteRule ^ - [L]
  AddType application/javascript .mjs
 </IfModule>

-# --- Security headers ---
+# ---------------- Security headers ----------------
 <IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set X-XSS-Protection "1; mode=block"
@@ -51,59 +59,54 @@ RewriteRule ^ - [L]
  Header always set Expect-CT "max-age=86400, enforce"
  Header always set Cross-Origin-Resource-Policy "same-origin"
  Header always set X-Permitted-Cross-Domain-Policies "none"
-  # HSTS only when actually on HTTPS
-  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" "expr=%{HTTPS} == 'on'"

-  # CSP (modules, blobs, workers, etc.)
+  # HSTS only when HTTPS (safe for .htaccess)
+  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
+
+  # CSP — keep this SHA-256 in sync with your inline pre-theme script
  Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' 'sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM='; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self'; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'"
 </IfModule>

-# --- Caching (query-string based, no env vars needed) ---
+# ---------------- Caching ----------------
 <IfModule mod_headers.c>
-  # HTML/PHP: no cache (only if PHP didn’t already set it)
+  # HTML/PHP: no cache
  <FilesMatch "\.(html?|php)$">
    Header setifempty Cache-Control "no-cache, no-store, must-revalidate"
    Header setifempty Pragma "no-cache"
    Header setifempty Expires "0"
  </FilesMatch>

-  # version.js: always non-cacheable
+  # version.js: never cache
  <FilesMatch "^js/version\.js$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
  </FilesMatch>

-  # Unversioned JS/CSS: 1 hour
+  # JS/CSS: long cache if ?v= present, else 1h
  <FilesMatch "\.(?:m?js|css)$">
-    Header set Cache-Control "public, max-age=3600, must-revalidate" "expr=%{QUERY_STRING} !~ /(^|&)v=/"
+    Header set Cache-Control "public, max-age=31536000, immutable" env=IS_VER
+    Header set Cache-Control "public, max-age=3600, must-revalidate" env=!IS_VER
  </FilesMatch>

-  # Unversioned static (images/fonts): 7 days
+  # Images/fonts: long cache if ?v= present, else 7d
  <FilesMatch "\.(?:png|jpe?g|gif|webp|svg|ico|woff2?|ttf|otf)$">
-    Header set Cache-Control "public, max-age=604800" "expr=%{QUERY_STRING} !~ /(^|&)v=/"
+    Header set Cache-Control "public, max-age=31536000, immutable" env=IS_VER
+    Header set Cache-Control "public, max-age=604800" env=!IS_VER
  </FilesMatch>
-
-  # --- Versioned assets (?v=...) : 1 year + immutable (override anything else) ---
-  <IfModule mod_headers.c>
-    <FilesMatch "\.(?:m?js|css|png|jpe?g|gif|webp|svg|ico|woff2?|ttf|otf)$">
-      # Only when query string has v=
-      Header unset Cache-Control "expr=%{QUERY_STRING} =~ /(^|&)v=/"
-      Header unset Expires       "expr=%{QUERY_STRING} =~ /(^|&)v=/"
-      Header set Cache-Control "public, max-age=31536000, s-maxage=31536000, immutable" "expr=%{QUERY_STRING} =~ /(^|&)v=/"
-    </FilesMatch>
-  </IfModule>
 </IfModule>

-# --- Compression ---
+# ---------------- Compression ----------------
 <IfModule mod_brotli.c>
-  BrotliCompressionQuality 5
+  # Do NOT set BrotliCompressionQuality in .htaccess (vhost/server only)
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript application/json image/svg+xml
 </IfModule>
 <IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
 </IfModule>

-# --- Disable TRACE ---
+# ---------------- Disable TRACE ----------------
+<IfModule mod_rewrite.c>
 RewriteCond %{REQUEST_METHOD} ^TRACE
-RewriteRule .* - [F]
+RewriteRule .* - [F]
+</IfModule>
--- a/public/api/onlyoffice/callback.php
+++ b/public/api/onlyoffice/callback.php
@@ -0,0 +1,13 @@
+<?php
+/**
+ * @OA\Post(
+ *   path="/api/onlyoffice/callback.php",
+ *   summary="ONLYOFFICE save callback",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Response(response=200, description="OK / error JSON")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->callback();
--- a/public/api/onlyoffice/config.php
+++ b/public/api/onlyoffice/config.php
@@ -0,0 +1,17 @@
+<?php
+/**
+ * @OA\Get(
+ *   path="/api/onlyoffice/config.php",
+ *   summary="Get editor config for a file (signed URLs, callback)",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Parameter(name="folder", in="query", @OA\Schema(type="string")),
+ *   @OA\Parameter(name="file",   in="query", @OA\Schema(type="string")),
+ *   @OA\Response(response=200, description="Editor config"),
+ *   @OA\Response(response=403, description="Forbidden"),
+ *   @OA\Response(response=404, description="Disabled / Not found")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->config();
--- a/public/api/onlyoffice/signed-download.php
+++ b/public/api/onlyoffice/signed-download.php
@@ -0,0 +1,15 @@
+<?php
+/**
+ * @OA\Get(
+ *   path="/api/onlyoffice/signed-download.php",
+ *   summary="Serve a signed file blob to ONLYOFFICE",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Parameter(name="tok", in="query", required=true, @OA\Schema(type="string")),
+ *   @OA\Response(response=200, description="File stream"),
+ *   @OA\Response(response=403, description="Signature/expiry invalid")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->signedDownload();
--- a/public/api/onlyoffice/status.php
+++ b/public/api/onlyoffice/status.php
@@ -0,0 +1,13 @@
+<?php
+/**
+ * @OA\Get(
+ *   path="/api/onlyoffice/status.php",
+ *   summary="ONLYOFFICE availability & supported extensions",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Response(response=200, description="Status JSON")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->status();
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -969,7 +969,7 @@ body {
      align-items: stretch;
  }.file-list-actions .action-btn {
  width: 100%;
-  height: 10px !important;
+  
  }.modal-content {
  width: 95%;
      margin: 20% auto;
@@ -996,7 +996,7 @@ body {
  #copySelectedBtn:hover,
  #moveSelectedBtn:hover,
  #downloadZipBtn:hover,
-  #extractZipBtn:hover
+  #extractZipBtn:hover,
  #customChooseBtn:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
--- a/public/js/adminPanel.js
+++ b/public/js/adminPanel.js
@@ -491,6 +491,7 @@ export function openAdminPanel() {
            { id: "headerSettings", label: t("header_settings") },
            { id: "loginOptions", label: t("login_options") },
            { id: "webdav", label: "WebDAV Access" },
+            { id: "onlyoffice", label: "ONLYOFFICE" },
            { id: "upload", label: t("shared_max_upload_size_bytes_title") },
            { id: "oidc", label: t("oidc_configuration") + " & TOTP" },
            { id: "shareLinks", label: t("manage_shared_links") },
@@ -514,7 +515,7 @@ export function openAdminPanel() {
        document.getElementById("closeAdminPanel").addEventListener("click", closeAdminPanel);
        document.getElementById("cancelAdminSettings").addEventListener("click", closeAdminPanel);

-        ["userManagement", "headerSettings", "loginOptions", "webdav", "upload", "oidc", "shareLinks", "sponsor"]
+        ["userManagement", "headerSettings", "loginOptions", "webdav", "onlyoffice", "upload", "oidc", "shareLinks", "sponsor"]
          .forEach(id => {
            document.getElementById(id + "Header")
              .addEventListener("click", () => toggleSection(id));
@@ -574,6 +575,268 @@ export function openAdminPanel() {
          </div>
        `;

+        // ONLYOFFICE Content
+        const hasOOSecret = !!(config.onlyoffice && config.onlyoffice.hasJwtSecret);
+        window.__HAS_OO_SECRET = hasOOSecret;
+        document.getElementById("onlyofficeContent").innerHTML = `
+  <div class="form-group">
+    <input type="checkbox" id="ooEnabled" />
+    <label for="ooEnabled">Enable ONLYOFFICE integration</label>
+  </div>
+
+  <div class="form-group">
+    <label for="ooDocsOrigin">Document Server Origin:</label>
+    <input type="url" id="ooDocsOrigin" class="form-control" placeholder="e.g. http://192.168.1.61" />
+    <small class="text-muted">Must be reachable by your browser (for API.js) and by FileRise (for callbacks). Avoid “localhost”.</small>
+  </div>
+
+  ${renderMaskedInput({ id: "ooJwtSecret", label: "JWT Secret", hasValue: hasOOSecret, isSecret: true })}
+`;
+
+        wireReplaceButtons(document.getElementById("onlyofficeContent"));
+
+
+
+
+
+               // --- Test ONLYOFFICE block ---
+               const testBox = document.createElement("div");
+               testBox.className = "card";
+               testBox.style.marginTop = "12px";
+               testBox.innerHTML = `
+         <div class="card-body">
+           <div style="display:flex;gap:8px;align-items:center;margin-bottom:6px;">
+             <strong>Test ONLYOFFICE connection</strong>
+             <button type="button" id="ooTestBtn" class="btn btn-sm btn-primary">Run tests</button>
+             <span id="ooTestSpinner" style="display:none;">⏳</span>
+           </div>
+           <ul id="ooTestResults" class="list-unstyled" style="margin:0;"></ul>
+           <small class="text-muted">These tests check FileRise config, callback reachability, CSP/script loading, and iframe embedding.</small>
+         </div>
+       `;
+               document.getElementById("onlyofficeContent").appendChild(testBox);
+       
+               // Util: tiny UI helpers for results
+               function ooRow(label, status, detail = "") {
+                 const li = document.createElement("li");
+                 li.style.margin = "6px 0";
+                 const icon = status === "ok" ? "✅" : status === "warn" ? "⚠️" : "❌";
+                 li.innerHTML = `<span style="min-width:1.2em;display:inline-block">${icon}</span> <strong>${label}</strong>${detail ? ` — <span>${detail}</span>` : ""}`;
+                 return li;
+               }
+               function ooClear(el) { while (el.firstChild) el.removeChild(el.firstChild); }
+       
+               // Probes that don’t explode your state
+               async function ooProbeScript(docsOrigin) {
+                 return new Promise(resolve => {
+                   const src = docsOrigin.replace(/\/$/, '') + '/web-apps/apps/api/documents/api.js?probe=' + Date.now();
+                   const s = document.createElement('script');
+                   s.id = 'ooProbeScript';
+                   s.async = true;
+                   s.src = src;
+                   s.onload = () => { resolve({ ok: true }); setTimeout(() => s.remove(), 0); };
+                   s.onerror = () => { resolve({ ok: false }); setTimeout(() => s.remove(), 0); };
+                   document.head.appendChild(s);
+                 });
+               }
+               async function ooProbeFrame(docsOrigin, timeoutMs = 4000) {
+                 return new Promise(resolve => {
+                   const f = document.createElement('iframe');
+                   f.id = 'ooProbeFrame';
+                   f.src = docsOrigin;
+                   f.style.display = 'none';
+                   let t = setTimeout(() => { cleanup(); resolve({ ok: false, timeout: true }); }, timeoutMs);
+                   function cleanup() { try { f.remove(); } catch { } clearTimeout(t); }
+                   f.onload = () => { cleanup(); resolve({ ok: true }); };
+                   f.onerror = () => { cleanup(); resolve({ ok: false }); };
+                   document.body.appendChild(f);
+                 });
+               }
+       
+               // Main test runner
+               async function runOnlyOfficeTests() {
+                 const spinner = document.getElementById('ooTestSpinner');
+                 const out = document.getElementById('ooTestResults');
+                 const docsOrigin = (document.getElementById('ooDocsOrigin')?.value || '').trim();
+       
+                 spinner.style.display = 'inline';
+                 ooClear(out);
+       
+                 // 1) FileRise status
+                 let statusOk = false, statusJson = null;
+                 try {
+                   const r = await fetch('/api/onlyoffice/status.php', { credentials: 'include' });
+                   statusJson = await r.json().catch(() => ({}));
+                   if (r.ok) {
+                     if (statusJson.enabled) {
+                       out.appendChild(ooRow('FileRise status', 'ok', 'Enabled and ready'));
+                       statusOk = true;
+                     } else {
+                       // Disabled usually means missing secret or origin; we’ll dig deeper below.
+                       out.appendChild(ooRow('FileRise status', 'warn', 'Disabled — check JWT Secret and Document Server Origin'));
+                     }
+                   } else {
+                     out.appendChild(ooRow('FileRise status', 'fail', `HTTP ${r.status}`));
+                   }
+                 } catch (e) {
+                   out.appendChild(ooRow('FileRise status', 'fail', (e && e.message) || 'Network error'));
+                 }
+       
+                 // 2) Secret presence (fresh read)
+                 try {
+                   const cfg = await fetch('/api/admin/getConfig.php', { credentials: 'include', cache: 'no-store' }).then(r => r.json());
+                   const hasSecret = !!(cfg.onlyoffice && cfg.onlyoffice.hasJwtSecret);
+                   out.appendChild(ooRow('JWT secret saved', hasSecret ? 'ok' : 'fail', hasSecret ? 'Present' : 'Missing'));
+                 } catch {
+                   out.appendChild(ooRow('JWT secret saved', 'warn', 'Could not verify'));
+                 }
+       
+                 // 3) Callback reachable (basic ping)
+                 try {
+                   const r = await fetch('/api/onlyoffice/callback.php?ping=1', { credentials: 'include', cache: 'no-store' });
+                   if (r.ok) out.appendChild(ooRow('Callback endpoint', 'ok', 'Reachable'));
+                   else out.appendChild(ooRow('Callback endpoint', 'fail', `HTTP ${r.status}`));
+                 } catch {
+                   out.appendChild(ooRow('Callback endpoint', 'fail', 'Network error'));
+                 }
+       
+                 // Early sanity on origin
+                 if (!/^https?:\/\//i.test(docsOrigin)) {
+                   out.appendChild(ooRow('Document Server Origin', 'fail', 'Enter a valid http(s) origin (e.g., https://docs.example.com)'));
+                   spinner.style.display = 'none';
+                   return;
+                 }
+       
+                 // 4a) Can browser load api.js (also surfaces CSP script-src issues)
+                 const sRes = await ooProbeScript(docsOrigin);
+                 out.appendChild(ooRow('Load api.js', sRes.ok ? 'ok' : 'fail', sRes.ok ? 'Loaded' : 'Blocked (check CSP script-src and origin)'));
+       
+                 // 4b) Can browser embed DS in an iframe (CSP frame-src)
+                 const fRes = await ooProbeFrame(docsOrigin);
+                 out.appendChild(ooRow('Embed DS iframe', fRes.ok ? 'ok' : 'fail', fRes.ok ? 'Allowed' : 'Blocked (check CSP frame-src)'));
+       
+                 // Optional tip if we see common red flags
+                 if (!statusOk || !sRes.ok || !fRes.ok) {
+                   const tip = document.createElement('li');
+                   tip.style.marginTop = '8px';
+                   tip.innerHTML = "💡 <em>Tip:</em> Use the CSP helper above to include your Document Server in <code>script-src</code>, <code>connect-src</code>, and <code>frame-src</code>.";
+                   out.appendChild(tip);
+                 }
+       
+                 spinner.style.display = 'none';
+               }
+       
+               // Wire the button
+               document.getElementById('ooTestBtn')?.addEventListener('click', runOnlyOfficeTests);
+
+               
+
+        // Append CSP help box
+        // --- CSP help box (replace your whole block with this) ---
+        const ooSec = document.getElementById("onlyofficeContent");
+        const cspHelp = document.createElement("div");
+        cspHelp.className = "alert alert-info";
+        cspHelp.style.marginTop = "12px";
+        cspHelp.innerHTML = `
+  <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+    <strong>Content-Security-Policy help</strong>
+    <button type="button" id="copyOoCsp" class="btn btn-sm btn-outline-secondary">Copy</button>
+    <button type="button" id="selectOoCsp" class="btn btn-sm btn-outline-secondary">Select</button>
+  </div>
+  <div class="form-text" style="margin-bottom:8px;">
+    Add/replace this line in <code>public/.htaccess</code> (Apache). It allows loading ONLYOFFICE's <code>api.js</code>,
+    embedding the editor iframe, and letting the script make XHR to your Document Server.
+  </div>
+  <pre id="ooCspSnippet" style="white-space:pre-wrap;user-select:text;padding:8px;border:1px solid #ccc;border-radius:6px;background:#f7f7f7;"></pre>
+  <div class="form-text" style="margin-top:8px;">
+    If you terminate SSL or set CSP at a reverse proxy (e.g. Nginx), update it there instead.
+    Also note: if your site is <code>https://</code>, your ONLYOFFICE server must be <code>https://</code> too,
+    otherwise the browser will block it as mixed content.
+  </div>
+  <details style="margin-top:8px;">
+    <summary>Nginx equivalent</summary>
+    <pre id="ooCspSnippetNginx" style="white-space:pre-wrap;user-select:text;padding:8px;border:1px solid #ccc;border-radius:6px;background:#f7f7f7; margin-top:6px;"></pre>
+  </details>
+`;
+        ooSec.appendChild(cspHelp);
+
+        const INLINE_SHA = "sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM=";
+
+        function buildCspApache(originRaw) {
+          const o = (originRaw || "https://your-onlyoffice-server.example.com").replace(/\/+$/, '');
+          const api = `${o}/web-apps/apps/api/documents/api.js`;
+          return `Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' '${INLINE_SHA}' ${o} ${api}; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' ${o}; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' ${o}"`;
+        }
+        function buildCspNginx(originRaw) {
+          const o = (originRaw || "https://your-onlyoffice-server.example.com").replace(/\/+$/, '');
+          const api = `${o}/web-apps/apps/api/documents/api.js`;
+          return `add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' '${INLINE_SHA}' ${o} ${api}; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' ${o}; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' ${o}" always;`;
+        }
+
+        const ooDocsInput = document.getElementById("ooDocsOrigin");
+        const cspPre = document.getElementById("ooCspSnippet");
+        const cspPreNgx = document.getElementById("ooCspSnippetNginx");
+
+        function refreshCsp() {
+          const val = (ooDocsInput?.value || "").trim();
+          cspPre.textContent = buildCspApache(val);
+          cspPreNgx.textContent = buildCspNginx(val);
+        }
+        ooDocsInput?.addEventListener("input", refreshCsp);
+        refreshCsp();
+
+        // ---- Copy helpers (with robust fallback) ----
+        async function copyToClipboard(text) {
+          // Best path: async clipboard API in a secure context (https/localhost)
+          if (navigator.clipboard && window.isSecureContext) {
+            try { await navigator.clipboard.writeText(text); return true; }
+            catch (_) { /* fall through */ }
+          }
+          // Fallback for http or blocked clipboard: hidden textarea + execCommand
+          try {
+            const ta = document.createElement('textarea');
+            ta.value = text;
+            ta.setAttribute('readonly', '');
+            ta.style.position = 'fixed';
+            ta.style.left = '-9999px';
+            document.body.appendChild(ta);
+            ta.select();
+            const ok = document.execCommand('copy'); // deprecated but still widely supported
+            document.body.removeChild(ta);
+            return ok;
+          } catch (_) {
+            return false;
+          }
+        }
+        function selectElementContents(el) {
+          const range = document.createRange();
+          range.selectNodeContents(el);
+          const sel = window.getSelection();
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+
+        document.getElementById("copyOoCsp")?.addEventListener("click", async () => {
+          const txt = (cspPre.textContent || "").trim();
+          const ok = await copyToClipboard(txt);
+          if (ok) {
+            showToast("CSP line copied.");
+          } else {
+            // Auto-select so the user can Ctrl/Cmd+C as a last resort
+            try { selectElementContents(cspPre); } catch { }
+            const reason = window.isSecureContext ? "" : " (page is not HTTPS or localhost)";
+            showToast("Copy failed" + reason + ". Press Ctrl/Cmd+C to copy.");
+          }
+        });
+
+        document.getElementById("selectOoCsp")?.addEventListener("click", () => {
+          try { selectElementContents(cspPre); showToast("Selected — press Ctrl/Cmd+C"); }
+          catch { /* ignore */ }
+        });
+
+        document.getElementById("ooEnabled").checked = !!(config.onlyoffice && config.onlyoffice.enabled);
+        document.getElementById("ooDocsOrigin").value = (config.onlyoffice && config.onlyoffice.docsOrigin) ? config.onlyoffice.docsOrigin : "";
+
        const hasId = !!(config.oidc && config.oidc.hasClientId);
        const hasSecret = !!(config.oidc && config.oidc.hasClientSecret);

@@ -696,10 +959,24 @@ export function openAdminPanel() {
        document.getElementById("authHeaderName").value = config.loginOptions.authHeaderName || "X-Remote-User";
        document.getElementById("enableWebDAV").checked = config.enableWebDAV === true;
        document.getElementById("sharedMaxUploadSize").value = config.sharedMaxUploadSize || "";
+        // remember lock for handleSave
+        window.__OO_LOCKED = !!(config.onlyoffice && config.onlyoffice.lockedByPhp);
+        if (window.__OO_LOCKED) {
+          const sec = document.getElementById("onlyofficeContent");
+          sec.querySelectorAll("input,button").forEach(el => el.disabled = true);
+          const note = document.createElement("div");
+          note.className = "form-text";
+          note.style.marginTop = "6px";
+          note.textContent = "Managed by config.php — edit ONLYOFFICE_* constants there.";
+          sec.appendChild(note);
+        }
        captureInitialAdminConfig();

      } else {
        mdl.style.display = "flex";
+        const hasId = !!(config.oidc && config.oidc.hasClientId);
+        const hasSecret = !!(config.oidc && config.oidc.hasClientSecret);
+
        document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
        document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
        document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
@@ -713,6 +990,10 @@ export function openAdminPanel() {
        if (!hasId) idEl.value = window.currentOIDCConfig?.clientId || "";
        if (!hasSecret) secEl.value = window.currentOIDCConfig?.clientSecret || "";
        wireReplaceButtons(document.getElementById("oidcContent"));
+        document.getElementById("ooEnabled").checked = !!(config.onlyoffice && config.onlyoffice.enabled);
+        document.getElementById("ooDocsOrigin").value = (config.onlyoffice && config.onlyoffice.docsOrigin) ? config.onlyoffice.docsOrigin : "";
+        const ooCont = document.getElementById("onlyofficeContent");
+        if (ooCont) wireReplaceButtons(ooCont);
        document.getElementById("oidcClientSecret").value = window.currentOIDCConfig?.clientSecret || "";
        document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig?.redirectUri || "";
        document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig?.globalOtpauthUrl || '';
@@ -752,6 +1033,30 @@ function handleSave() {
    payload.oidc.clientSecret = scEl.value.trim();
  }

+  const ooSecretEl = document.getElementById("ooJwtSecret");
+
+  payload.onlyoffice = {
+    enabled: document.getElementById("ooEnabled").checked,
+    docsOrigin: document.getElementById("ooDocsOrigin").value.trim()
+  };
+
+  if (ooSecretEl?.dataset.replace === '1' && ooSecretEl.value.trim() !== '') {
+    payload.onlyoffice.jwtSecret = ooSecretEl.value.trim();
+  }
+
+  // ---- ONLYOFFICE payload ----
+  if (!window.__OO_LOCKED) {
+    const ooSecretVal = (document.getElementById("ooJwtSecret")?.value || "").trim();
+    payload.onlyoffice = {
+      enabled: document.getElementById("ooEnabled").checked,
+      docsOrigin: document.getElementById("ooDocsOrigin").value.trim()
+    };
+    // If user typed a secret (non-empty), send it (server keeps it if non-empty)
+    if (ooSecretVal !== "") {
+      payload.onlyoffice.jwtSecret = ooSecretVal;
+    }
+  }
+
  fetch('/api/admin/updateConfig.php', {
    method: 'POST',
    credentials: 'include',
--- a/public/js/fileEditor.js
+++ b/public/js/fileEditor.js
@@ -65,6 +65,137 @@ function normalizeModeName(modeOption) {
  return name;
 }

+// ---- ONLYOFFICE integration -----------------------------------------------
+
+function getExt(name) { const i = name.lastIndexOf('.'); return i >= 0 ? name.slice(i + 1).toLowerCase() : ''; }
+
+// Cache OO capabilities (enabled flag + ext list) from /api/onlyoffice/status.php
+let __ooCaps = { enabled: false, exts: new Set(), fetched: false };
+
+async function fetchOnlyOfficeCapsOnce() {
+  if (__ooCaps.fetched) return __ooCaps;
+  try {
+    const r = await fetch('/api/onlyoffice/status.php', { credentials: 'include' });
+    if (r.ok) {
+      const j = await r.json();
+      __ooCaps.enabled = !!j.enabled;
+      __ooCaps.exts = new Set(Array.isArray(j.exts) ? j.exts : []);
+    }
+  } catch { /* ignore; keep defaults */ }
+  __ooCaps.fetched = true;
+  return __ooCaps;
+}
+
+async function shouldUseOnlyOffice(fileName) {
+  const { enabled, exts } = await fetchOnlyOfficeCapsOnce();
+  return enabled && exts.has(getExt(fileName));
+}
+
+function isAbsoluteHttpUrl(u) { return /^https?:\/\//i.test(u || ''); }
+
+async function ensureOnlyOfficeApi(srcFromConfig, originFromConfig) {
+  let src =
+    srcFromConfig ||
+    (originFromConfig ? originFromConfig.replace(/\/$/, '') + '/web-apps/apps/api/documents/api.js'
+      : (window.ONLYOFFICE_API_SRC || '/onlyoffice/web-apps/apps/api/documents/api.js'));
+  if (window.DocsAPI && typeof window.DocsAPI.DocEditor === 'function') return;
+  await loadScriptOnce(src);
+}
+
+async function openOnlyOffice(fileName, folder) {
+  let editor; // make visible to the whole function
+
+  try {
+    const url = `/api/onlyoffice/config.php?folder=${encodeURIComponent(folder)}&file=${encodeURIComponent(fileName)}`;
+    const resp = await fetch(url, { credentials: 'include' });
+
+    const text = await resp.text();
+    let cfg;
+    try { cfg = JSON.parse(text); } catch {
+      throw new Error(`ONLYOFFICE config parse failed (HTTP ${resp.status}). First 120 chars: ${text.slice(0,120)}`);
+    }
+    if (!resp.ok) throw new Error(cfg.error || `ONLYOFFICE config HTTP ${resp.status}`);
+
+    // Must be absolute
+    const docUrl = cfg?.document?.url;
+    const cbUrl  = cfg?.editorConfig?.callbackUrl;
+    if (!/^https?:\/\//i.test(docUrl || '') || !/^https?:\/\//i.test(cbUrl || '')) {
+      throw new Error(`Config URLs must be absolute. document.url='${docUrl}', callbackUrl='${cbUrl}'`);
+    }
+
+    // Load DocsAPI if needed
+    await ensureOnlyOfficeApi(cfg.docs_api_js, cfg.documentServerOrigin);
+
+    // Modal
+    const modal = document.createElement('div');
+    modal.id = 'ooEditorModal';
+    modal.classList.add('modal', 'editor-modal');
+    modal.setAttribute('tabindex', '-1');
+    modal.innerHTML = `
+      <div class="editor-header">
+        <h3 class="editor-title">
+          ${t("editing")}: ${escapeHTML(fileName)}
+        </h3>
+        <button id="closeEditorX" class="editor-close-btn" aria-label="${t("close") || "Close"}">&times;</button>
+      </div>
+      <div class="editor-body" style="flex:1;min-height:200px">
+        <div id="oo-editor" style="width:100%;height:100%"></div>
+      </div>
+    `;
+    document.body.appendChild(modal);
+    modal.style.display = 'block';
+    modal.focus();
+
+    // We’ll fill this after wiring the toggle, so destroy() can unhook it
+    let removeThemeListener = () => {};
+
+    const destroy = () => {
+      try { editor?.destroyEditor?.(); } catch {}
+      try { removeThemeListener(); } catch {}
+      try { modal.remove(); } catch {}
+    };
+
+    modal.addEventListener('keydown', e => { if (e.key === 'Escape') destroy(); });
+    document.getElementById('closeEditorX')?.addEventListener('click', destroy);
+
+    // Let DS request closing
+    cfg.events = Object.assign({}, cfg.events, { onRequestClose: destroy });
+
+    // Initial theme
+    const isDark =
+    document.documentElement.classList.contains('dark-mode') ||
+    /^(1|true)$/i.test(localStorage.getItem('darkMode') || '');
+  
+  cfg.editorConfig = cfg.editorConfig || {};
+  cfg.editorConfig.customization = Object.assign(
+    {},
+    cfg.editorConfig.customization,
+    { uiTheme: isDark ? 'theme-dark' : 'theme-light' } // <- correct key/value
+  );
+
+    // Launch editor
+    editor = new window.DocsAPI.DocEditor('oo-editor', cfg);
+
+    // Live theme switching (ONLYOFFICE v7.2+ supports setTheme)
+    const darkToggle = document.getElementById('darkModeToggle');
+    const onDarkToggle = () => {
+      const nowDark = document.documentElement.classList.contains('dark-mode');
+      if (editor && typeof editor.setTheme === 'function') {
+        editor.setTheme(nowDark ? 'dark' : 'light');
+      }
+    };
+    if (darkToggle) {
+      darkToggle.addEventListener('click', onDarkToggle);
+      removeThemeListener = () => darkToggle.removeEventListener('click', onDarkToggle);
+    }
+  } catch (e) {
+    console.error('[ONLYOFFICE] failed to open:', e);
+    showToast((e && e.message) ? e.message : 'Unable to open ONLYOFFICE editor.');
+  }
+}
+// ---- /ONLYOFFICE integration ----------------------------------------------
+
+
 const _loadedScripts = new Set();
 const _loadedCss = new Set();
 let _corePromise = null;
@@ -196,7 +327,7 @@ function observeModalResize(modal) {
 }
 export { observeModalResize };

-export function editFile(fileName, folder) {
+export async function editFile(fileName, folder) {
  // destroy any previous editor
  let existingEditor = document.getElementById("editorContainer");
  if (existingEditor) existingEditor.remove();
@@ -204,6 +335,11 @@ export function editFile(fileName, folder) {
  const folderUsed = folder || window.currentFolder || "root";
  const fileUrl = buildPreviewUrl(folderUsed, fileName);

+  if (await shouldUseOnlyOffice(fileName)) {
+    await openOnlyOffice(fileName, folderUsed);
+    return;
+  }
+
  // Probe size safely via API. Prefer HEAD; if missing Content-Length, fall back to a 1-byte Range GET.
  async function probeSize(url) {
    try {
--- a/public/js/fileListView.js
+++ b/public/js/fileListView.js
@@ -34,6 +34,25 @@ import {
  
  export let fileData = [];
  export let sortOrder = { column: "uploaded", ascending: true };
+
+
+
+    // onnlyoffice
+let OO_ENABLED = false;
+let OO_EXTS = new Set();
+
+export async function initOnlyOfficeCaps() {
+  try {
+    const r = await fetch('/api/onlyoffice/status.php', { credentials: 'include' });
+    if (!r.ok) throw 0;
+    const j = await r.json();
+    OO_ENABLED = !!j.enabled;
+    OO_EXTS = new Set(Array.isArray(j.exts) ? j.exts : []);
+  } catch {
+    OO_ENABLED = false;
+    OO_EXTS = new Set();
+  }
+}
  
  // Hide "Edit" for files >10 MiB
  const MAX_EDIT_BYTES = 10 * 1024 * 1024;
@@ -338,6 +357,7 @@ function searchFiles(searchTerm) {
  window.updateRowHighlight = updateRowHighlight;
  
  export async function loadFileList(folderParam) {
+    await initOnlyOfficeCaps(); 
    const reqId = ++__fileListReqSeq; // latest call wins
    const folder = folderParam || "root";
    const fileListContainer = document.getElementById("fileList");
@@ -1328,46 +1348,34 @@ function searchFiles(searchTerm) {
    if (!fileName || typeof fileName !== "string") return false;
    const dot = fileName.lastIndexOf(".");
    if (dot < 0) return false;
-  
    const ext = fileName.slice(dot + 1).toLowerCase();
  
-    const allowedExtensions = [
-      "txt", "text", "md", "markdown", "rst",
-      "html", "htm", "xhtml", "shtml",
-      "css", "scss", "sass", "less",
-      "js", "mjs", "cjs", "jsx",
-      "ts", "tsx",
-      "json", "jsonc", "ndjson",
-      "yml", "yaml", "toml", "xml", "plist",
-      "ini", "conf", "config", "cfg", "cnf", "properties", "props", "rc",
-      "env", "dotenv",
-      "csv", "tsv", "tab",
+    // Your CodeMirror text-based types
+    const textEditExts = new Set([
+      "txt","text","md","markdown","rst",
+      "html","htm","xhtml","shtml",
+      "css","scss","sass","less",
+      "js","mjs","cjs","jsx",
+      "ts","tsx",
+      "json","jsonc","ndjson",
+      "yml","yaml","toml","xml","plist",
+      "ini","conf","config","cfg","cnf","properties","props","rc",
+      "env","dotenv",
+      "csv","tsv","tab",
      "log",
-      "sh", "bash", "zsh", "ksh", "fish",
-      "bat", "cmd",
-      "ps1", "psm1", "psd1",
-      "py", "pyw",
-      "rb",
-      "pl", "pm",
-      "go",
-      "rs",
-      "java",
-      "kt", "kts",
-      "scala", "sc",
-      "groovy", "gradle",
-      "c", "h", "cpp", "cxx", "cc", "hpp", "hh", "hxx",
-      "m", "mm",
-      "swift",
-      "cs", "fs", "fsx",
-      "dart",
-      "lua",
-      "r", "rmd",
-      "sql",
-      "vue", "svelte",
-      "twig", "mustache", "hbs", "handlebars", "ejs", "pug", "jade"
-    ];
+      "sh","bash","zsh","ksh","fish",
+      "bat","cmd",
+      "ps1","psm1","psd1",
+      "py","pyw","rb","pl","pm","go","rs","java","kt","kts",
+      "scala","sc","groovy","gradle",
+      "c","h","cpp","cxx","cc","hpp","hh","hxx",
+      "m","mm","swift","cs","fs","fsx","dart","lua","r","rmd",
+      "sql","vue","svelte","twig","mustache","hbs","handlebars","ejs","pug","jade"
+    ]);
  
-    return allowedExtensions.includes(ext);
+    if (textEditExts.has(ext)) return true;            // CodeMirror
+    if (OO_ENABLED && OO_EXTS.has(ext)) return true;   // ONLYOFFICE types if enabled
+    return false;
  }
  
  // Expose global functions for pagination and preview.