Replace Trix with Lexxy

app/javascript/models/client_message.js

@@ -18,7 +18,7 @@ export default class ClientMessage {
       body,
       messageTimestamp: Math.floor(now.getTime()),
       messageDatetime: now.toISOString(),
-      messageClasses: this.#containsOnlyEmoji(node.textContent) ? "message--emoji" : "",
+      messageClasses: this.#containsOnlyEmoji(this.#plainTextFromNode(node)) ? "message--emoji" : "",
     })
   }
 
@@ -58,20 +58,19 @@ export default class ClientMessage {
   }
 
   #matchPlayCommand(node) {
-    return this.#stripWrapperElement(node)?.match(new RegExp(`^/play (${SOUND_NAMES.join("|")})`))?.[1]
+    return this.#plainTextFromNode(node)?.match(new RegExp(`^/play (${SOUND_NAMES.join("|")})`))?.[1]
   }
 
-  #stripWrapperElement(node) {
-    return node.innerHTML?.replace(/<div>(?:<!--[\s\S]*?-->)*([\s\S]*?)<\/div>/i, '$1')
+  #plainTextFromNode(node) {
+    return this.#isRichText(node) ? node.toString()?.trim() : node
   }
 
-
   #isRichText(node) {
     return typeof(node) != "string"
   }
 
   #richTextContent(node) {
-    return `<div class="trix-content">${node.innerHTML}</div>`
+    return `<div class="lexxy-content">${node.value}</div>`
   }
 
 

app/javascript/models/message_formatter.js

@@ -76,7 +76,20 @@ export default class MessageFormatter {
   }
 
   #highlightCodeBlock(block) {
-    if (this.#isPlainText(block)) window.hljs.highlightElement(block)
+    this.#normalizeLineBreaks(block)
+    if (!this.#isPlainText(block)) return
+
+    const language = block.dataset.language
+    if (language && window.hljs.getLanguage(language)) {
+      block.classList.add(`language-${language}`)
+    }
+
+    window.hljs.highlightElement(block)
+  }
+
+  // Lexxy breaks code block lines with <br>, Trix-era blocks used newlines
+  #normalizeLineBreaks(block) {
+    block.querySelectorAll("br").forEach(br => br.replaceWith("\n"))
   }
 
   #isPlainText(element) {