ticket #86 attempt 1

devplacepy/static/js/MessagesLayout.js

@@ -0,0 +1,525 @@
+// retoor <retoor@molodetz.nl>
+
+import { MessagesSocket } from "./MessagesSocket.js";
+import { contentRenderer } from "./ContentRenderer.js";
+
+const TYPING_THROTTLE_MS = 1500;
+const TYPING_HIDE_MS = 4000;
+const AUTO_SCROLL_MARGIN_PX = 100;
+const STABILIZE_MAX_FRAMES = 300;
+
+export class MessagesLayout {
+    constructor() {
+        this.layout = document.querySelector(".messages-layout");
+        if (!this.layout) {
+            return;
+        }
+        this.thread = document.querySelector(".messages-thread");
+        this.form = document.querySelector(".messages-input-area");
+        this.input = this.form ? this.form.querySelector('input[name="content"]') : null;
+        this.upload = this.form ? this.form.querySelector("dp-upload") : null;
+        this.sendBtn = this.form ? this.form.querySelector(".messages-send-btn") : null;
+        this._uploading = false;
+        this._pendingSends = new Set();
+        this.typingEl = document.getElementById("typing-indicator");
+
+        this.selfUid = this.layout.dataset.selfUid || "";
+        this.otherUid = this.layout.dataset.otherUid || "";
+
+        this._lastTypingSent = 0;
+        this._typingHideTimer = null;
+        this._socketReady = false;
+        this._userAtBottom = true;
+        this._stabilizeFrames = 0;
+        this._stabilizePending = false;
+
+        // Expose for diagnostics
+        window.__messagesLayout = this;
+
+        this.scrollThreadToEnd();
+        if (this.input) {
+            this.input.focus({ preventScroll: true });
+        }
+
+        this.connect();
+        this.bindForm();
+        this.bindTyping();
+        this.bindViewport();
+        this.bindAutoScroll();
+        this._startScrollWatcher();
+        this.markRead();
+    }
+
+    _startScrollWatcher() {
+        if (!this.thread) return;
+
+        const onAnyChange = () => {
+            if (!this._userAtBottom) return;
+            if (this._stabilizePending) return;
+            this._stabilizePending = true;
+            requestAnimationFrame(() => {
+                this._stabilizePending = false;
+                this._stabilizeScroll();
+            });
+        };
+
+        this._scrollWatcher = new MutationObserver(onAnyChange);
+        this._scrollWatcher.observe(this.thread, {
+            childList: true,
+            subtree: true,
+        });
+
+        this.thread.addEventListener("load", (e) => {
+            if (e.target.tagName === "IMG" && this._userAtBottom) {
+                onAnyChange();
+            }
+        }, true);
+
+        // Kick initial stabilization
+        onAnyChange();
+    }
+
+    _stabilizeScroll() {
+        if (!this.thread) {
+            this._stabilizeFrames = 0;
+            return;
+        }
+        if (!this._userAtBottom) {
+            this._stabilizeFrames = 0;
+            return;
+        }
+        if (this._stabilizeFrames >= STABILIZE_MAX_FRAMES) {
+            this._stabilizeFrames = 0;
+            return;
+        }
+        this._stabilizeFrames++;
+        this.thread.scrollTop = this.thread.scrollHeight;
+        const atBottom = this.thread.scrollHeight
+            - this.thread.scrollTop
+            - this.thread.clientHeight < 10;
+        if (!atBottom) {
+            this._stabilizePending = true;
+            requestAnimationFrame(() => {
+                this._stabilizePending = false;
+                this._stabilizeScroll();
+            });
+        } else {
+            this._stabilizeFrames = 0;
+        }
+    }
+
+    bindAutoScroll() {
+        if (!this.thread) return;
+        this.thread.addEventListener("scroll", () => {
+            if (this._stabilizePending) return;
+            const atBottom = this.thread.scrollHeight
+                - this.thread.scrollTop
+                - this.thread.clientHeight < AUTO_SCROLL_MARGIN_PX;
+            this._userAtBottom = atBottom;
+            if (atBottom) {
+                this._stabilizeScroll();
+            }
+        }, { passive: true });
+    }
+
+    bindViewport() {
+        const page = document.querySelector(".page-messages");
+        if (!page || !this.input || !this.form) return;
+
+        const viewport = window.visualViewport;
+
+        const ensureInputVisible = () => {
+            const vh = viewport ? viewport.height : window.innerHeight;
+            const formRect = this.form.getBoundingClientRect();
+            const currentInset = parseInt(page.style.getPropertyValue("--kb-inset")) || 0;
+            const delta = formRect.bottom - vh;
+            const newInset = Math.max(0, currentInset + delta);
+
+            if (newInset !== currentInset) {
+                page.style.setProperty("--kb-inset", `${Math.round(newInset)}px`);
+                this._userAtBottom = true;
+                this.scrollThreadToEnd();
+            }
+        };
+
+        if (viewport) {
+            let insetTimer = null;
+            const onViewportChange = () => {
+                cancelAnimationFrame(insetTimer);
+                insetTimer = requestAnimationFrame(ensureInputVisible);
+            };
+            viewport.addEventListener("resize", onViewportChange);
+            viewport.addEventListener("scroll", onViewportChange);
+        }
+
+        const ro = new ResizeObserver(() => ensureInputVisible());
+        ro.observe(page);
+        if (this.layout) ro.observe(this.layout);
+
+        if (this.form) {
+            const io = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    if (!entry.isIntersecting) ensureInputVisible();
+                }
+            }, { root: null, threshold: [0, 0.5, 1] });
+            io.observe(this.form);
+            this._viewportIO = io;
+        }
+
+        this.input.addEventListener("keydown", (event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                this.form.requestSubmit();
+            }
+        });
+
+        this.input.addEventListener("input", () => {
+            this.input.style.height = "auto";
+            this.input.style.height = Math.min(this.input.scrollHeight, 160) + "px";
+        });
+
+        this.input.addEventListener("focus", () => {
+            this._userAtBottom = true;
+            const doScroll = () => {
+                this.scrollThreadToEnd();
+                if (window.innerWidth < 768) {
+                    const retry = (delay) => setTimeout(() => {
+                        ensureInputVisible();
+                        this.scrollThreadToEnd();
+                    }, delay);
+                    retry(100);
+                    retry(350);
+                    retry(600);
+                }
+            };
+            requestAnimationFrame(doScroll);
+        });
+
+        this.input.addEventListener("blur", () => {
+            page.style.setProperty("--kb-inset", "0px");
+        });
+
+        ensureInputVisible();
+    }
+
+    connect() {
+        this.socket = new MessagesSocket({
+            onReady: () => this.onReady(),
+            onMessage: (frame) => this.onFrame(frame),
+            onClose: () => { this._socketReady = false; },
+        });
+        this.socket.connect();
+    }
+
+    onReady() {
+        this._socketReady = true;
+        if (this.otherUid) {
+            this.markRead();
+        }
+    }
+
+    onFrame(frame) {
+        switch (frame.type) {
+            case "message":
+                this.handleIncoming(frame);
+                break;
+            case "typing":
+                if (frame.from_uid === this.otherUid) this.showTyping();
+                break;
+            case "read":
+                if (frame.by_uid === this.otherUid) this.markReceipts();
+                break;
+            default:
+                break;
+        }
+    }
+
+    bindForm() {
+        if (!this.form || !this.input) return;
+        this.form.addEventListener("submit", (event) => {
+            if (!this._socketReady || !this.socket.isOpen()) {
+                return;
+            }
+            event.preventDefault();
+            this.sendViaSocket();
+        });
+        if (this.upload) {
+            this.upload.addEventListener("dp-upload:busy", (event) => {
+                this._uploading = !!(event.detail && event.detail.busy);
+                this.refreshSendButton();
+            });
+        }
+    }
+
+    refreshSendButton() {
+        if (!this.sendBtn) return;
+        const busy = this._uploading || this._pendingSends.size > 0;
+        this.sendBtn.disabled = busy;
+        this.sendBtn.classList.toggle("is-sending", busy);
+    }
+
+    sendViaSocket() {
+        const content = (this.input.value || "").trim();
+        const attachmentUids = this.collectAttachments();
+        if (!content && attachmentUids.length === 0) return;
+        const clientId = "c" + Date.now() + Math.random().toString(36).slice(2, 8);
+        this.appendOptimistic(content, clientId, attachmentUids.length);
+        const ok = this.socket.send({
+            type: "send",
+            receiver_uid: this.otherUid,
+            content,
+            attachment_uids: attachmentUids,
+            client_id: clientId,
+        });
+        if (!ok) {
+            this.form.submit();
+            return;
+        }
+        this._pendingSends.add(clientId);
+        this.refreshSendButton();
+        window.setTimeout(() => this.clearPendingSend(clientId), 8000);
+        this.input.value = "";
+        if (this.upload && typeof this.upload.clear === "function") {
+            this.upload.clear();
+        }
+        this.input.focus({ preventScroll: true });
+    }
+
+    clearPendingSend(clientId) {
+        if (this._pendingSends.delete(clientId)) {
+            this.refreshSendButton();
+        }
+    }
+
+    collectAttachments() {
+        const hidden = this.form.querySelector('input[name="attachment_uids"]');
+        if (!hidden || !hidden.value) return [];
+        return hidden.value.split(",").map((v) => v.trim()).filter(Boolean);
+    }
+
+    bindTyping() {
+        if (!this.input) return;
+        this.input.addEventListener("input", () => {
+            if (!this._socketReady || !this.otherUid) return;
+            const now = Date.now();
+            if (now - this._lastTypingSent < TYPING_THROTTLE_MS) return;
+            this._lastTypingSent = now;
+            this.socket.send({ type: "typing", receiver_uid: this.otherUid });
+        });
+    }
+    
+    appendOptimistic(content, clientId, attachmentCount) {
+        const bubble = this.buildBubble({
+            content,
+            mine: true,
+            clientId,
+            time: "now",
+            iso: new Date().toISOString(),
+            attachmentCount,
+        });
+        bubble.classList.add("pending");
+        this.insertBubble(bubble);
+    }
+
+    handleIncoming(frame) {
+        if (frame.uid && this.thread &&
+            this.thread.querySelector(`.message-bubble[data-msg-uid="${frame.uid}"]`)) {
+            if (frame.client_id) this.clearPendingSend(frame.client_id);
+            return;
+        }
+        if (frame.sender_uid === this.selfUid && frame.client_id) {
+            this.clearPendingSend(frame.client_id);
+            const pending = this.thread.querySelector(`.message-bubble[data-client-id="${frame.client_id}"]`);
+            if (pending) {
+                pending.classList.remove("pending");
+                pending.dataset.msgUid = frame.uid;
+                const oldBody = pending.querySelector(".rendered-content");
+                if (oldBody && frame.content !== undefined) {
+                    const content = document.createElement("dp-content");
+                    content.setAttribute("no-copy", "");
+                    if (frame.sender_role === "Admin") content.setAttribute("data-author-admin", "");
+                    content.textContent = frame.content || "";
+                    oldBody.replaceWith(content);
+                }
+                const time = pending.querySelector(".message-time");
+                if (time && frame.created_at) {
+                    time.setAttribute("datetime", frame.created_at);
+                    time.dataset.dt = "";
+                    time.dataset.dtMode = "ago";
+                    if (window.app && window.app.localTime) window.app.localTime.apply(time);
+                    else time.textContent = frame.time_ago;
+                } else if (time) {
+                    time.textContent = frame.time_ago;
+                }
+                const placeholder = pending.querySelector(".attachment-pending");
+                if (placeholder) placeholder.remove();
+                const gallery = this.renderAttachments(frame.attachments);
+                if (gallery) pending.insertBefore(gallery, time || null);
+                this.bumpConversation(frame, true);
+                return;
+            }
+        }
+
+        const partnerUid = frame.sender_uid === this.selfUid ? frame.receiver_uid : frame.sender_uid;
+        const inThisThread = this.otherUid && partnerUid === this.otherUid;
+
+        if (inThisThread) {
+            const mine = frame.sender_uid === this.selfUid;
+            const bubble = this.buildBubble({
+                content: frame.content,
+                mine,
+                time: frame.time_ago,
+                iso: frame.created_at,
+                uid: frame.uid,
+                senderRole: frame.sender_role,
+                attachments: frame.attachments,
+            });
+            this.insertBubble(bubble);
+            if (!mine && this._socketReady) {
+                this.socket.send({ type: "read", with_uid: this.otherUid });
+            }
+        }
+        this.bumpConversation(frame, frame.sender_uid === this.selfUid);
+    }
+
+    buildBubble({ content, mine, time, iso, uid, clientId, senderRole, attachments, attachmentCount }) {
+        const bubble = document.createElement("div");
+        bubble.className = "message-bubble " + (mine ? "mine" : "theirs");
+        if (uid) bubble.dataset.msgUid = uid;
+        if (clientId) bubble.dataset.clientId = clientId;
+
+        const el = document.createElement("dp-content");
+        el.setAttribute("no-copy", "");
+        if (senderRole === "Admin") el.setAttribute("data-author-admin", "");
+        el.textContent = content || "";
+        bubble.appendChild(el);
+
+        const gallery = this.renderAttachments(attachments);
+        if (gallery) {
+            bubble.appendChild(gallery);
+        } else if (attachmentCount > 0) {
+            const placeholder = document.createElement("div");
+            placeholder.className = "attachment-pending";
+            placeholder.textContent = attachmentCount === 1
+                ? "Uploading attachment..."
+                : `Uploading ${attachmentCount} attachments...`;
+            bubble.appendChild(placeholder);
+        }
+
+        const timeEl = document.createElement(iso ? "time" : "span");
+        timeEl.className = "message-time";
+        if (iso) {
+            timeEl.setAttribute("datetime", iso);
+            timeEl.dataset.dt = "";
+            timeEl.dataset.dtMode = "ago";
+            if (window.app && window.app.localTime) window.app.localTime.apply(timeEl);
+            else timeEl.textContent = time || "";
+        } else {
+            timeEl.textContent = time || "";
+        }
+        bubble.appendChild(timeEl);
+
+        if (mine) {
+            const receipt = document.createElement("span");
+            receipt.className = "message-receipt";
+            receipt.hidden = true;
+            receipt.innerHTML = "&#x2713;&#x2713;";
+            bubble.appendChild(receipt);
+        }
+
+        return bubble;
+    }
+
+    renderAttachments(attachments) {
+        if (!attachments || !attachments.length) return null;
+        const gallery = document.createElement("div");
+        gallery.className = "attachment-gallery";
+        for (const att of attachments) {
+            const item = document.createElement("div");
+            item.className = "attachment-gallery-item";
+            if (att.is_image) {
+                const img = document.createElement("img");
+                img.src = att.thumbnail_url || att.url;
+                img.alt = att.original_filename || "";
+                img.loading = "lazy";
+                img.className = "gallery-thumb";
+                img.dataset.lightbox = "";
+                img.dataset.full = att.url;
+                if (att.mime_type) img.dataset.mime = att.mime_type;
+                item.appendChild(img);
+            } else if (att.is_video) {
+                const video = document.createElement("video");
+                video.src = att.url;
+                video.controls = true;
+                video.preload = "metadata";
+                video.className = "gallery-video";
+                item.appendChild(video);
+            } else {
+                const link = document.createElement("a");
+                link.href = att.url;
+                link.target = "_blank";
+                link.rel = "noopener";
+                link.className = "non-image";
+                link.download = att.original_filename || "file";
+                link.textContent = att.original_filename || "file";
+                item.appendChild(link);
+            }
+            gallery.appendChild(item);
+        }
+        return gallery;
+    }
+
+    insertBubble(bubble) {
+        if (!this.thread) return;
+        if (this.typingEl && this.typingEl.parentElement === this.thread) {
+            this.thread.insertBefore(bubble, this.typingEl);
+        } else {
+            this.thread.appendChild(bubble);
+        }
+        this.scrollThreadToEnd();
+    }
+
+    markReceipts() {
+        this.thread.querySelectorAll(".message-bubble.mine .message-receipt").forEach((el) => {
+            el.hidden = false;
+        });
+    }
+
+    markRead() {
+        if (this._socketReady && this.otherUid) {
+            this.socket.send({ type: "read", with_uid: this.otherUid });
+        }
+    }
+
+    showTyping() {
+        if (!this.typingEl) return;
+        this.typingEl.hidden = false;
+        this.scrollThreadToEnd();
+        clearTimeout(this._typingHideTimer);
+        this._typingHideTimer = setTimeout(() => {
+            this.typingEl.hidden = true;
+        }, TYPING_HIDE_MS);
+    }
+
+    bumpConversation(frame, mine) {
+        const partnerUid = mine ? frame.receiver_uid : frame.sender_uid;
+        const item = document.querySelector(`.conversation-item[data-conv-uid="${partnerUid}"]`);
+        if (!item) return;
+        const preview = item.querySelector(".conversation-preview");
+        if (preview) preview.textContent = contentRenderer.preview(frame.content, 60);
+        const dot = item.querySelector(".conversation-unread-dot");
+        if (dot) {
+            dot.hidden = mine || partnerUid === this.otherUid;
+        }
+        const list = item.parentElement;
+        if (list && list.firstElementChild !== item) {
+            list.insertBefore(item, list.firstElementChild);
+        }
+    }
+
+    scrollThreadToEnd() {
+        if (!this.thread) return;
+        if (!this._userAtBottom) return;
+        this.thread.scrollTop = this.thread.scrollHeight;
+    }
+}

devplacepy/static/js/components/AppContent.js

@@ -13,7 +13,7 @@ export class AppContent extends Component {
             return;
         }
         if (!contentRenderer.emojiLoaded) {
-            contentRenderer.ready.then(() => this.connectedCallback());
+            contentRenderer.ready.then(() => this.connectedCallback()).catch(console.error);
             return;
         }
         this._rendered = true;

tests/unit/rendering.py

@@ -263,3 +263,43 @@ def test_xss_legitimate_link_survives_audit():
     out = str(render_content("see https://example.com/page ok"))
     assert 'href="https://example.com/page"' in out
     assert_no_executable_html(out)
+
+
+def test_url_inside_fenced_code_block_is_not_embedded():
+    out = str(render_content("```\nhttps://example.com/video.mp4\n```"))
+    assert "<pre" in out
+    assert "<video" not in out
+    assert "<iframe" not in out
+    assert "example.com/video.mp4" in out
+
+
+def test_mention_does_not_match_email_address():
+    out = str(render_content("contact me at user@domain.com for info"))
+    assert "mention-link" not in out
+    assert "domain.com" in out
+
+
+def test_bold_inside_inline_code_is_plain():
+    out = str(render_content("use `**not bold**` here"))
+    assert "<code>" in out
+    assert "<strong>" not in out
+
+
+def test_consecutive_line_breaks_preserve_paragraphs():
+    out = str(render_content("line one\n\nline two\n\n\nline three"))
+    assert "<p>line one</p>" in out
+    assert "<p>line two</p>" in out
+    assert "<p>line three</p>" in out
+
+
+def test_table_with_inline_links_renders_correctly():
+    out = str(render_content(
+        "| Name | Link |\n"
+        "|------|------|\n"
+        "| Dev  | https://dev.place |\n"
+        "| Docs | https://docs.place |\n"
+    ))
+    assert "<table>" in out
+    assert 'href="https://dev.place"' in out
+    assert 'href="https://docs.place"' in out
+    assert "<th" in out