[IMP] dms: syntax-highlighted code/text preview via Odoo CodeEditor

Author: dnplkndll

dms/static/src/js/components/preview/file_preview_pane.esm.js

@@ -29,7 +29,16 @@ const _EXTENSION_MIMETYPES = {
     txt: "text/plain",
     json: "application/json",
     xml: "application/xml",
-    js: "application/javascript",
+    // Source-code extensions → dedicated code mimetypes that route to the
+    // syntax-highlighting CodePreview (see _CODE_MIMETYPES in handlers).
+    py: "text/x-python",
+    js: "text/javascript",
+    mjs: "text/javascript",
+    cjs: "text/javascript",
+    scss: "text/x-scss",
+    css: "text/x-scss",
+    sass: "text/x-scss",
+    less: "text/x-scss",
     rtf: "text/rtf",
     csv: "text/csv",
     html: "text/html",

dms/static/src/js/components/preview/handlers.esm.js

@@ -2,6 +2,7 @@
 // License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
 
 import {Component, onWillStart, useState} from "@odoo/owl";
+import {CodeEditor} from "@web/core/code_editor/code_editor";
 import {previewRegistry} from "./preview_registry.esm";
 
 // ---------------------------------------------------------------------------
@@ -62,6 +63,65 @@ export class TextPreview extends Component {
     }
 }
 
+// Code / source text: reuse Odoo's bundled CodeEditor (ACE) for a read-only,
+// syntax-highlighted preview — a step up from the raw-bytes iframe for
+// .py/.js/.scss/.css source files and a no-new-dependency win (the asset is
+// already in the backend bundle). Content is fetched once on mount; the file
+// extension picks the ACE mode. Odoo's bundled ACE ships only a handful of
+// modes (CodeEditor.MODES: python / javascript / xml / qweb / scss) — any
+// other mode 404s on its mode-*.js. These extensions are exactly the ones
+// _effectiveMimetype maps to the dedicated _CODE_MIMETYPES this handler claims;
+// browser-readable JSON/XML/HTML stay in TextPreview's iframe.
+const _ACE_MODES = {
+    py: "python",
+    js: "javascript",
+    mjs: "javascript",
+    cjs: "javascript",
+    scss: "scss",
+    css: "scss",
+    sass: "scss",
+    less: "scss",
+};
+
+export class CodePreview extends Component {
+    static template = "dms.preview.Code";
+    static components = {CodeEditor};
+    static props = fileProps;
+
+    setup() {
+        this.state = useState({content: "", error: null});
+        onWillStart(async () => {
+            // Only the CodeEditor path needs the content string; the iframe
+            // fallback streams it via src.
+            if (!this.aceMode) {
+                return;
+            }
+            try {
+                const r = await fetch(this.src);
+                if (!r.ok) {
+                    throw new Error(`HTTP ${r.status}`);
+                }
+                this.state.content = await r.text();
+            } catch (e) {
+                this.state.error = String(e.message || e);
+            }
+        });
+    }
+
+    get aceMode() {
+        const ext = (this.props.file.name || "").split(".").pop().toLowerCase();
+        return _ACE_MODES[ext] || null;
+    }
+
+    get src() {
+        const ts = encodeURIComponent(this.props.file.write_date || "");
+        return (
+            `/web/content?id=${this.props.file.id}&model=dms.file` +
+            `&field=content&filename_field=name&v=${ts}`
+        );
+    }
+}
+
 // Markdown: client-side render to HTML, displayed in a sandboxed iframe
 // via srcdoc. The sandbox attribute denies scripts and top navigation so
 // untrusted markdown can't execute as XSS. The render covers the common
@@ -227,6 +287,18 @@ reg.add("text/*", {
         mt === "application/javascript",
     score: 0,
 });
+// Syntax-highlighted code editor for genuine source files. Claims ONLY the
+// dedicated source-code mimetypes that _effectiveMimetype derives from a code
+// extension (.py/.js/.scss/...) — NOT the browser-readable text/plain, JSON or
+// XML, which the browser renders fine in TextPreview's iframe (and which the
+// dispatch contract keeps there). Wins over text/* (score 0) for those code
+// mimetypes; still below Markdown (score 5) so .md renders rich.
+const _CODE_MIMETYPES = new Set(["text/x-python", "text/javascript", "text/x-scss"]);
+reg.add("text/code", {
+    component: CodePreview,
+    match: (mt) => _CODE_MIMETYPES.has(mt),
+    score: 2,
+});
 // Markdown rendering wins over the generic text/* handler (score 0) so
 // `text/markdown` files render as formatted HTML instead of raw source.
 reg.add("text/markdown", {

dms/static/src/js/components/preview/handlers.xml

@@ -26,6 +26,30 @@
         />
     </t>
 
+    <t t-name="dms.preview.Code">
+        <div t-if="aceMode" class="o_dms_preview__code">
+            <div
+                t-if="state.error"
+                class="o_dms_preview_pane__empty o_dms_preview_pane__empty--error"
+            >
+                <i class="fa fa-exclamation-triangle me-2" />
+                <span t-out="state.error" />
+            </div>
+            <CodeEditor
+                t-else=""
+                value="state.content"
+                mode="aceMode"
+                readonly="true"
+            />
+        </div>
+        <iframe
+            t-else=""
+            class="o_dms_preview__iframe o_dms_preview__text"
+            t-att-src="src"
+            t-att-title="props.file.name"
+        />
+    </t>
+
     <t t-name="dms.preview.Markdown">
         <iframe
             class="o_dms_preview__iframe o_dms_preview__markdown"

dms/static/src/scss/file_preview_pane.scss

@@ -106,6 +106,19 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
+
+        // The kanban renderer fills the space below the in-flow toolbar and
+        // scrolls within it. Core sizes the renderer at min-height:100%, which
+        // — added to the toolbar's height — overflows __main (overflow:hidden)
+        // by the toolbar height: the last row and the scroll viewport's bottom
+        // are clipped and the wheel appears dead. Force flex-fill + own scroll,
+        // mirroring the list split below.
+        > .o_renderer,
+        > .o_kanban_renderer {
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: auto;
+        }
     }
 }
 
@@ -133,6 +146,14 @@
     flex-direction: row;
     height: 100%;
     min-height: 0;
+    // Fill the space beside the searchpanel and allow shrinking below the list
+    // table's intrinsic (min-content) width. Without min-width:0 the table's
+    // column widths keep the split wider than `.o_content`, overflowing it so
+    // the whole content area scrolls horizontally (the searchpanel scrolls off
+    // the left). The kanban split avoids this because its cards reflow to any
+    // width; the list table does not, so it must scroll inside its own column.
+    flex: 1 1 auto;
+    min-width: 0;
 
     &__list {
         flex: 1 1 auto;
@@ -454,6 +475,24 @@
     background: #fff;
 }
 
+// ---- Code editor (syntax-highlighted source/text preview) ----
+.o_dms_preview__code {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    // The CodeEditor (ACE) needs a sized container to fill; let it take the
+    // pane body's height and scroll internally.
+    .o_code_editor,
+    .ace_editor {
+        flex: 1 1 auto;
+        width: 100%;
+        min-height: 320px;
+        border-radius: 4px;
+    }
+}
+
 // ---- Fallback card (office / download) ----
 .o_dms_preview__fallback {
     display: flex;

dms/static/tests/components/file_preview_pane.test.js

@@ -267,6 +267,24 @@ describe("handler dispatch with effective-mimetype fallback", () => {
         expect(inst.handler.key).toBe("text/markdown");
     });
 
+    test("source-code extension routes to the code-editor handler", () => {
+        // .py stored as the generic text/plain → _effectiveMimetype rewrites
+        // it to text/x-python → CodePreview wins over the plain text iframe.
+        const inst = _instance({
+            state: {file: {id: 8, name: "build.py", mimetype: "text/plain"}},
+        });
+        expect(inst.handler.key).toBe("text/code");
+    });
+
+    test("plain text with no code extension stays on the text iframe", () => {
+        // .rst has no bundled ACE mode and no code-mimetype mapping — it must
+        // not get hijacked by CodePreview; the browser renders it fine.
+        const inst = _instance({
+            state: {file: {id: 9, name: "notes.rst", mimetype: "text/plain"}},
+        });
+        expect(inst.handler.key).toBe("text/*");
+    });
+
     test("audio/video extension wins over a wrong image/* mimetype", () => {
         // The OCA dms demo stores .wav files as image/webp (a thumbnail type
         // leaking onto media). An image mimetype on a known audio/video