From 1f36d2029237c46b5afd8ee72025d1be65ae6d9d Mon Sep 17 00:00:00 2001
From: Gabriel Grubba <70247653+Grubba27@users.noreply.github.com>
Date: Fri, 20 Mar 2026 17:24:56 -0300
Subject: [PATCH] FIX: NaN issue and remaining not being tracked (#113)

With https://github.com/discourse/discourse-signatures/pull/105 we had an issue where the character count would show NaN when the signature was empty.

For some reason it was not being auto tracked so when you hit the keys now it should update the UI as expected.
---
 .../signature-preferences.gjs                 | 18 ++++-
 config/settings.yml                           |  1 +
 spec/system/signature_character_count_spec.rb | 65 +++++++++++++++++++
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 spec/system/signature_character_count_spec.rb

diff --git a/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs b/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs
index 2e2eddf..3155f4a 100644
--- a/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs
+++ b/assets/javascripts/discourse/connectors/user-custom-preferences/signature-preferences.gjs
@@ -1,14 +1,18 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DEditor from "discourse/components/d-editor";
+import withEventValue from "discourse/helpers/with-event-value";
 import { i18n } from "discourse-i18n";
 
 export default class SignaturePreferences extends Component {
   @service currentUser;
   @service siteSettings;
 
+  @tracked _signatureRaw = this.args.model.custom_fields?.signature_raw || "";
+
   get canHaveSignature() {
     return this.currentUser?.can_have_signature !== false;
   }
@@ -18,8 +22,7 @@ export default class SignaturePreferences extends Component {
   }
 
   get charactersRemaining() {
-    const raw = this.args.model.custom_fields?.signature_raw || "";
-    return this.maxLength - raw.length;
+    return this.maxLength - this._signatureRaw.length;
   }
 
   @action
@@ -34,6 +37,12 @@ export default class SignaturePreferences extends Component {
     this.args.model.set("custom_fields.signature_url", event.target.value);
   }
 
+  @action
+  updateRawSignature(value) {
+    this._signatureRaw = value;
+    this.args.model.set("custom_fields.signature_raw", value);
+  }
+
   <template>
     {{#if this.siteSettings.signatures_enabled}}
       <div class="user-custom-preferences-outlet signature-preferences">
@@ -59,7 +68,10 @@ export default class SignaturePreferences extends Component {
               }}</label>
             <div class="controls input-xxlarge">
               {{#if this.siteSettings.signatures_advanced_mode}}
-                <DEditor @value={{@model.custom_fields.signature_raw}} />
+                <DEditor
+                  @value={{@model.custom_fields.signature_raw}}
+                  @change={{withEventValue this.updateRawSignature}}
+                />
                 <span class="signature-char-count">
                   {{i18n
                     "signatures.characters_remaining"
diff --git a/config/settings.yml b/config/settings.yml
index 2fc28c3..045c8a5 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -22,6 +22,7 @@ plugins:
     default: false
     client: true
   signatures_max_length:
+    client: true
     default: 500
     min: 50
     max: 10000
diff --git a/spec/system/signature_character_count_spec.rb b/spec/system/signature_character_count_spec.rb
new file mode 100644
index 0000000..4134dac
--- /dev/null
+++ b/spec/system/signature_character_count_spec.rb
@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+RSpec.describe "Signature character count" do
+  fab!(:user)
+
+  before do
+    enable_current_plugin
+    SiteSetting.signatures_enabled = true
+    SiteSetting.signatures_advanced_mode = true
+    SiteSetting.signatures_max_length = 500
+  end
+
+  it "shows max length when user has no signature" do
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+  end
+
+  it "shows max length when user has a null signature_raw" do
+    user.custom_fields["signature_raw"] = nil
+    user.save_custom_fields
+
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+  end
+
+  it "shows correct remaining characters when user has an existing signature" do
+    user.custom_fields["signature_raw"] = "Hello world"
+    user.save_custom_fields
+
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 489),
+    )
+  end
+
+  it "updates remaining characters as user types" do
+    sign_in(user)
+    visit "/my/preferences/profile"
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 500),
+    )
+
+    find(".signature-preferences .d-editor-input").send_keys("Test signature")
+
+    expect(page).to have_css(
+      ".signature-char-count",
+      text: I18n.t("js.signatures.characters_remaining.other", count: 486),
+    )
+  end
+end