@devchitchat/chat 4.0.6 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devchitchat/chat",
-  "version": "4.0.6",
+  "version": "4.1.0",
   "description": "A small chat app. p2p video and screenshare.",
   "scripts": {
     "dev": "bun --watch index.js",

package/pages/channels/[channelId].phtml

@@ -137,7 +137,7 @@
     <article class="message" data-seq="{{seq}}" data-msg-id="{{msg_id}}" data-key="message_id" data-user-id="{{user_id}}" data-raw-text="{{raw_text}}" data-edited-at="{{edited_at}}" data-attachments="{{attachments_json}}" data-reactions="{{reactions_json}}">
       <span class="message-handle" data-user-id="{{user_id}}">{{user_display_name}}</span>
       <time class="message-time" datetime="{{ts}}">{{ts_fmt}}{{#if edited_at}}<span class="message-edited">(edited)</span>{{/if}}</time>
-      <p class="message-text">{{{text}}}</p>
+      <div class="message-text">{{{text}}}</div>
       <div class="reaction-bar"></div>
     </article>
     {{/each}}

package/pages/public/client/islands/call.js

@@ -210,6 +210,8 @@ export default function CallIsland(root) {
         renderReactionBar(article, reactions, msgId)
       }
 
+      enableTaskCheckboxes(article)
+
       // Date separator before this article if date changed
       const ts = parseInt(article.querySelector('time')?.getAttribute('datetime') ?? '0', 10)
       if (ts) {
@@ -430,7 +432,7 @@ export default function CallIsland(root) {
     const article = messages.querySelector(`[data-msg-id="${msg_id}"]`)
     if (!article) return
     const textEl = article.querySelector('.message-text')
-    if (textEl) textEl.innerHTML = sanitizeHtml(rendered_text)
+    if (textEl) { textEl.innerHTML = sanitizeHtml(rendered_text); enableTaskCheckboxes(article) }
     article.dataset.rawText = text
     article.dataset.editedAt = edited_at
     const timeEl = article.querySelector('.message-time')
@@ -692,6 +694,7 @@ export default function CallIsland(root) {
       article.appendChild(bar)
     }
 
+    enableTaskCheckboxes(article)
     messages.appendChild(article)
     renderReactionBar(article, reactions ?? [], msg_id)
     messages.scrollTop = messages.scrollHeight
@@ -703,6 +706,13 @@ export default function CallIsland(root) {
     return String(html ?? '').replaceAll('<script>', '').replaceAll('</script>', '')
   }
 
+  // Enable task-list checkboxes so they're clickable (renderer marks them disabled)
+  function enableTaskCheckboxes(article) {
+    for (const cb of article.querySelectorAll('.task-list-item-checkbox[disabled]')) {
+      cb.removeAttribute('disabled')
+    }
+  }
+
   // Delegated click: message sender name → open DM
   messages.addEventListener('click', e => {
     const handle = e.target.closest('.dm-trigger')
@@ -867,55 +877,7 @@ export default function CallIsland(root) {
     emojiPickerTarget = null
   }
 
-  // ── Reaction context menu (desktop right-click) ────────────────────────────
-
-  let activeReactionContextMenu = null
-
-  function closeReactionContextMenu() {
-    if (activeReactionContextMenu) { activeReactionContextMenu.remove(); activeReactionContextMenu = null }
-  }
-
-  function showReactionContextMenu(article, x, y) {
-    closeReactionContextMenu()
-    const msgId = article.dataset.msgId
-    if (!msgId) return
-
-    const menu = document.createElement('div')
-    menu.className = 'msg-context-menu msg-context-menu--reaction'
-
-    const reactBtn = document.createElement('button')
-    reactBtn.className = 'msg-context-menu-item'
-    reactBtn.type = 'button'
-    reactBtn.textContent = 'React'
-    reactBtn.addEventListener('click', (e) => {
-      e.stopPropagation()
-      openEmojiPickerAt(reactBtn, msgId)
-    })
-    menu.appendChild(reactBtn)
-
-    document.body.appendChild(menu)
-    activeReactionContextMenu = menu
-
-    // Position near cursor, viewport-aware
-    const menuRect = menu.getBoundingClientRect()
-    let left = x + window.scrollX
-    let top = y + window.scrollY
-    if (left + menuRect.width > window.innerWidth - 8) left = window.innerWidth - 8 - menuRect.width
-    if (left < 8) left = 8
-    menu.style.top = `${top}px`
-    menu.style.left = `${left}px`
-  }
-
-  // Right-click on a message article
-  messages.addEventListener('contextmenu', e => {
-    const article = e.target.closest('article.message')
-    if (!article) return
-    e.preventDefault()
-    showReactionContextMenu(article, e.clientX, e.clientY)
-  })
-
   document.addEventListener('click', e => {
-    if (activeReactionContextMenu && !activeReactionContextMenu.contains(e.target)) closeReactionContextMenu()
     // Close emoji picker on click-outside
     if (emojiPickerEl && emojiPickerEl.parentNode && !emojiPickerEl.contains(e.target)) {
       const isReactionAddBtn = e.target.closest('.reaction-add') || e.target.closest('.btn-react')
@@ -930,6 +892,29 @@ export default function CallIsland(root) {
     }
   })
 
+  // Delegated click on task-list checkboxes — toggle [ ] ↔ [x] and save via msg.edit
+  messages.addEventListener('click', e => {
+    const cb = e.target.closest('.task-list-item-checkbox')
+    if (!cb) return
+    e.preventDefault()  // we control the toggle ourselves
+    const article = cb.closest('article.message')
+    if (!article) return
+    const rawText = article.dataset.rawText
+    if (!rawText) return
+    const allCbs = Array.from(article.querySelectorAll('.task-list-item-checkbox'))
+    const idx = allCbs.indexOf(cb)
+    if (idx === -1) return
+    let count = 0
+    const newText = rawText.replace(/\[([ xX])\]/g, (match, state) => {
+      if (count++ !== idx) return match
+      return state.trim() === '' ? '[x]' : '[ ]'
+    })
+    if (newText === rawText) return
+    cb.checked = !cb.checked  // optimistic toggle
+    article.dataset.rawText = newText
+    ws.send({ t: 'msg.edit', body: { msg_id: article.dataset.msgId, channel_id: channelId, text: newText } })
+  })
+
   // Delegated click on .reaction-pill — toggle reaction
   messages.addEventListener('click', e => {
     const pill = e.target.closest('.reaction-pill')

package/pages/public/client/shared/messages.js

@@ -139,7 +139,7 @@ export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, tex
   article.innerHTML = `
       <span class="message-handle${isSelf ? '' : ' dm-trigger'}" data-user-id="${escHtml(user_id)}" title="${isSelf ? '' : 'Send a direct message'}">${escHtml(user_display_name ?? user_id)}</span>
       <time class="message-time" datetime="${ts}">${time}${editedHtml}</time>
-      ${textHtml ? `<p class="message-text">${textHtml}</p>` : ''}
+      ${textHtml ? `<div class="message-text">${textHtml}</div>` : ''}
       ${attachmentHtml}
       ${actionsHtml}
     `

package/pages/public/themes/base.css

@@ -537,8 +537,20 @@ details summary {
 .message-handle.dm-trigger { cursor: pointer; }
 .message-handle.dm-trigger:hover { text-decoration: underline; }
 .message-time { font-size: 11px; color: var(--text-muted); grid-column: 2; grid-row: 1; align-self: end; }
-.message-text { grid-column: 1 / -1; grid-row: 2; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
+.message-text { grid-column: 1 / -1; grid-row: 2; line-height: 1.5; color: var(--text-primary); word-break: break-word; overflow-wrap: anywhere; }
+.message-text p { white-space: pre-wrap; margin: 0 0 4px; }
+.message-text p:last-child { margin-bottom: 0; }
 .message-text a { word-break: break-all; }
+.message-text h1,.message-text h2,.message-text h3,.message-text h4 { margin: 8px 0 4px; font-weight: 600; line-height: 1.3; }
+.message-text h1 { font-size: 1.3em; }
+.message-text h2 { font-size: 1.15em; }
+.message-text h3,.message-text h4 { font-size: 1em; }
+.message-text ul,.message-text ol { margin: 4px 0; padding-left: 1.75em; }
+.message-text li { margin: 2px 0; }
+.message-text code { font-family: var(--font-mono, monospace); font-size: 0.875em; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; padding: 1px 4px; }
+.message-text pre { background: var(--bg-input, var(--bg-sidebar)); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; overflow-x: auto; margin: 6px 0; }
+.message-text pre code { background: none; padding: 0; font-size: 0.85em; }
+.message-text blockquote { border-left: 3px solid var(--accent); margin: 4px 0; padding: 2px 10px; color: var(--text-secondary); }
 
 /* ── Reaction bar ────────────────────────────────────────────────────────── */
 .reaction-bar {

package/src/ws/handlers/messageHandlers.js

@@ -42,6 +42,8 @@ export function handleMsgList(ws, msg, ctx) {
   const { messageService, sendWs } = ctx
   const { channel_id, after_seq, before_seq, limit } = msg.body || {}
 
+  const withRendered = messages => messages.map(m => ({ ...m, rendered_text: renderMarkdown(m.text).html }))
+
   if (before_seq != null) {
     const result = messageService.listMessagesBefore({
       channelId: channel_id,
@@ -49,12 +51,12 @@ export function handleMsgList(ws, msg, ctx) {
       beforeSeq: before_seq,
       limit: limit ?? 50,
     })
-    sendWs(ws, { t: 'msg.list_result', reply_to: msg.id, ok: true, body: { ...result, channel_id, direction: 'before' } })
+    sendWs(ws, { t: 'msg.list_result', reply_to: msg.id, ok: true, body: { ...result, messages: withRendered(result.messages), channel_id, direction: 'before' } })
     return
   }
 
   const result = messageService.listMessages({ channelId: channel_id, userId: ws.data.userId, afterSeq: after_seq ?? 0, limit: limit ?? 50 })
-  sendWs(ws, { t: 'msg.list_result', reply_to: msg.id, ok: true, body: { ...result, channel_id, direction: 'after' } })
+  sendWs(ws, { t: 'msg.list_result', reply_to: msg.id, ok: true, body: { ...result, messages: withRendered(result.messages), channel_id, direction: 'after' } })
 }
 
 export function handleMsgDelete(ws, msg, ctx) {