@fiduswriter/editor 0.1.19 → 0.1.21

package/src/collab/{chat.js → chat.ts}

@@ -1,13 +1,30 @@
 import {localizeDate, whenReady} from "fwtoolkit"
 import {E2EEEncryptor} from "fwtoolkit/e2ee/encryptor"
+
 import {messageTemplate} from "./templates.js"
 
+interface ChatMessage {
+    id: number
+    from: number
+    body: string
+    e2ee?: boolean
+}
+
+interface Participant {
+    id: number
+    name?: string
+}
+
 /*
  * Functions for chat between users who access a document simultaneously.
  */
 
 export class ModCollabChat {
-    constructor(mod) {
+    mod: any
+    currentlyFlashing: boolean
+    focus: boolean
+
+    constructor(mod: any) {
         mod.chat = this
         this.mod = mod
         this.currentlyFlashing = false
@@ -15,16 +32,21 @@ export class ModCollabChat {
         this.init()
     }
 
-    beep() {
-        const notification = document.getElementById("chat-notification")
+    beep(): void {
+        const notification = document.getElementById(
+            "chat-notification"
+        ) as HTMLAudioElement | null
+        if (!notification) {
+            return
+        }
         notification.play().catch(
             () => {} // Don't worry about it if the browser prohibits playing the sound
         )
     }
 
-    flashtab(messageTitle) {
+    flashtab(messageTitle: string): void {
         if (this.currentlyFlashing) {
-            return false
+            return
         }
         const origTitle = document.title
 
@@ -42,7 +64,7 @@ export class ModCollabChat {
         }, 500)
     }
 
-    async newMessage(message) {
+    async newMessage(message: ChatMessage): Promise<void> {
         if (document.getElementById(`m${message.id}`)) {
             return
         }
@@ -57,7 +79,7 @@ export class ModCollabChat {
                 try {
                     message.body = await E2EEEncryptor.decrypt(
                         message.body,
-                        this.mod.editor.e2ee.key
+                        this.mod.editor.e2ee.key as CryptoKey
                     )
                 } catch (error) {
                     console.error("E2EE: Failed to decrypt chat message", error)
@@ -72,37 +94,50 @@ export class ModCollabChat {
             }
         }
 
-        const theChatter = this.mod.participants.find(
-            participant => participant.id === message.from
+        const theChatter = (this.mod.participants as Participant[]).find(
+            (participant: Participant) => participant.id === message.from
         )
 
         const chatContainer = document.getElementById("chat-container")
+        if (!chatContainer) {
+            return
+        }
         chatContainer.insertAdjacentHTML(
             "beforeend",
-            messageTemplate({message, theChatter, localizeDate})
+            messageTemplate({
+                message,
+                theChatter: theChatter || ({name: ""} as Participant),
+                localizeDate
+            } as any)
         )
         if (!this.focus) {
             this.beep()
             this.flashtab(message.from + ": " + message.body)
         }
         if (chatContainer.style.display === "none") {
-            document.getElementById("chat").classList.add("highlighted")
+            document.getElementById("chat")?.classList.add("highlighted")
         }
     }
 
-    showChat(participants) {
+    showChat(participants: Participant[]): void {
         // If only one machine is connected and nothing has been chatted, don't show chat
         if (
             participants.length === 1 &&
             !document.querySelector("#chat-container .fw-message")
         ) {
-            document.getElementById("chat").style.display = "none"
+            const chatEl = document.getElementById("chat")
+            if (chatEl) {
+                chatEl.style.display = "none"
+            }
         } else {
-            document.getElementById("chat").style.display = "block"
+            const chatEl = document.getElementById("chat")
+            if (chatEl) {
+                chatEl.style.display = "block"
+            }
         }
     }
 
-    async sendMessage(messageText) {
+    async sendMessage(messageText: string): Promise<void> {
         // For E2EE documents, encrypt the chat message body.
         // The server relays encrypted messages without reading them.
         const isE2EE =
@@ -114,43 +149,55 @@ export class ModCollabChat {
             try {
                 const encryptedBody = await E2EEEncryptor.encrypt(
                     messageText,
-                    this.mod.editor.e2ee.key
+                    this.mod.editor.e2ee.key as CryptoKey
                 )
-                this.mod.editor.ws.send(() => ({
+                ;(this.mod.editor.ws as WebSocket).send((() => ({
                     type: "chat",
                     body: encryptedBody,
                     e2ee: true
-                }))
+                })) as any)
             } catch (error) {
                 console.error("E2EE: Failed to encrypt chat message", error)
                 // Fall back to sending unencrypted (should not happen
                 // in normal operation)
-                this.mod.editor.ws.send(() => ({
+                ;(this.mod.editor.ws as WebSocket).send((() => ({
                     type: "chat",
                     body: messageText
-                }))
+                })) as any)
             }
         } else {
-            this.mod.editor.ws.send(() => ({
+            ;(this.mod.editor.ws as WebSocket).send((() => ({
                 type: "chat",
                 body: messageText
-            }))
+            })) as any)
         }
     }
 
-    init() {
+    init(): void {
         document.body.insertAdjacentHTML(
             "beforeend",
             `<style>\n#messageform.empty:before{content:"${gettext("Send a message...")}"}\n</style>`
         )
         whenReady().then(() => {
-            document.getElementById("chat-container").style.maxHeight =
-                `${window.innerHeight - 200}px`
+            const chatContainer = document.getElementById("chat-container")
+            if (chatContainer) {
+                chatContainer.style.maxHeight = `${window.innerHeight - 200}px`
+            }
 
-            const resizeButton = document.querySelector("#chat .resize-button")
+            const resizeButton = document.querySelector(
+                "#chat .resize-button"
+            )
+            if (!resizeButton) {
+                return
+            }
             resizeButton.addEventListener("click", () => {
                 const chatEl = document.getElementById("chat")
-                if (resizeButton.classList.contains("fa-angle-double-down")) {
+                if (!chatEl) {
+                    return
+                }
+                if (
+                    resizeButton.classList.contains("fa-angle-double-down")
+                ) {
                     resizeButton.classList.remove("fa-angle-double-down")
                     resizeButton.classList.add("fa-angle-double-up")
                     chatEl.style.top = `${chatEl.getBoundingClientRect().top}px` // Set current height to get the animation working.
@@ -169,6 +216,9 @@ export class ModCollabChat {
             })
 
             const messageForm = document.getElementById("messageform")
+            if (!messageForm) {
+                return
+            }
 
             messageForm.addEventListener("focus", () =>
                 messageForm.classList.remove("empty")
@@ -186,6 +236,7 @@ export class ModCollabChat {
                     messageForm.innerText = ""
                     return false
                 }
+                return
             })
         })
 

package/src/collab/{colors.js → colors.ts}

@@ -1,5 +1,7 @@
 import {noSpaceTmp} from "fwtoolkit"
 
+import type {Editor} from "../types.js"
+
 const CSS_COLORS = [
     "0,119,190",
     "217,58,50",
@@ -12,9 +14,18 @@ const CSS_COLORS = [
     "255,165,0"
 ]
 
+interface ModCollab {
+    colors: ModCollabColors
+    editor: Editor
+}
+
 /* Create a CSS stylesheet for the colors of all users. */
 export class ModCollabColors {
-    constructor(mod) {
+    mod: ModCollab
+    userColorStyle: HTMLStyleElement | false
+    colorIds: number[]
+
+    constructor(mod: ModCollab) {
         mod.colors = this
         this.mod = mod
         this.userColorStyle = false
@@ -22,17 +33,19 @@ export class ModCollabColors {
         this.setup()
     }
 
-    setup() {
+    setup(): void {
         const styleContainers = document.createElement("temp")
         styleContainers.innerHTML =
             '<style type="text/css" id="user-colors"></style>'
         while (styleContainers.firstElementChild) {
             document.body.appendChild(styleContainers.firstElementChild)
         }
-        this.userColorStyle = document.getElementById("user-colors")
+        this.userColorStyle = document.getElementById(
+            "user-colors"
+        ) as HTMLStyleElement
     }
 
-    ensureUserColor(userId) {
+    ensureUserColor(userId: number): void {
         /* We assign a color to each user. This color stays even if the user
          * disconnects or the participant list is being updated.
          */
@@ -43,7 +56,10 @@ export class ModCollabColors {
     }
 
     // Ensure that there are at least the given number of user color styles.
-    provideUserColorStyles() {
+    provideUserColorStyles(): void {
+        if (!this.userColorStyle) {
+            return
+        }
         this.userColorStyle.innerHTML = this.colorIds
             .map((id, index) => {
                 const color =