fix: handle special characters in the UI; backend was okay before

Author: hrhv

packages/imagekit-editor-dev/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekit-editor-dev",
-  "version": "2.2.0-dev-24-04-2026.9",
+  "version": "2.2.0-dev-29-04-2026.5",
   "description": "AI Image Editor powered by ImageKit",
   "scripts": {
     "prepack": "yarn build",

packages/imagekit-editor-dev/src/components/header/SettingsModal.tsx

@@ -20,6 +20,7 @@ import { useTemplateStorage } from "../../context/TemplateStorageContext"
 import { useTemplateSync } from "../../hooks/useTemplateSync"
 import { applyTemplateStorageAccessFailure } from "../../storage/templateAccessError"
 import { useEditorStore } from "../../store"
+import { formatTemplateNameForUI } from "../../utils"
 
 const FlexAny = Flex as unknown as React.FC<Record<string, unknown>>
 
@@ -58,7 +59,9 @@ export function SettingsModal({ onClose, knownIsPrivate }: SettingsModalProps) {
     onCloseRef.current = onClose
   })
 
-  const [localName, setLocalName] = useState(templateName)
+  const [localName, setLocalName] = useState(() =>
+    formatTemplateNameForUI(templateName),
+  )
   const [localVisibility, setLocalVisibility] = useState<"everyone" | "onlyMe">(
     () => visibilityFromKnownPrivate(knownIsPrivate),
   )
@@ -67,7 +70,7 @@ export function SettingsModal({ onClose, knownIsPrivate }: SettingsModalProps) {
   const [isSaving, setIsSaving] = useState(false)
 
   useEffect(() => {
-    setLocalName(templateName)
+    setLocalName(formatTemplateNameForUI(templateName))
   }, [templateName])
 
   useEffect(() => {

packages/imagekit-editor-dev/src/components/header/TemplateNameInput.tsx

@@ -2,19 +2,23 @@ import { Input } from "@chakra-ui/react"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
 import { useEditorStore } from "../../store"
+import { formatTemplateNameForUI } from "../../utils"
 
 const UNTITLED = "Untitled Template"
+const InputAny = Input as unknown as React.ElementType
 
 export function TemplateNameInput() {
-  const templateName = useEditorStore((s) => s.templateName)
+  const templateNameRaw = useEditorStore((s) => s.templateName)
   const templateId = useEditorStore((s) => s.templateId)
   const isPristine = useEditorStore((s) => s.isPristine)
   const setTemplateName = useEditorStore((s) => s.setTemplateName)
 
-  const [localValue, setLocalValue] = useState(templateName)
+  const templateNameUI = formatTemplateNameForUI(templateNameRaw)
+  const [localValue, setLocalValue] = useState(templateNameUI)
   const localValueRef = useRef(localValue)
   const inputRef = useRef<HTMLInputElement>(null)
   const isFocusedRef = useRef(false)
+  const didUserEditRef = useRef(false)
   const prevIsPristineRef = useRef(isPristine)
 
   localValueRef.current = localValue
@@ -23,9 +27,10 @@ export function TemplateNameInput() {
   // template from the dropdown) update the input without overwriting in-progress edits.
   useEffect(() => {
     if (!isFocusedRef.current) {
-      setLocalValue(templateName)
+      didUserEditRef.current = false
+      setLocalValue(formatTemplateNameForUI(templateNameRaw))
     }
-  }, [templateName])
+  }, [templateNameRaw])
 
   // Focus the input when starting a new unsaved template (reset → pristine with no id).
   // Do not focus when transitioning to pristine after a successful save (id stays set).
@@ -43,6 +48,12 @@ export function TemplateNameInput() {
     if (!trimmed) {
       setLocalValue(UNTITLED)
     }
+
+    // Avoid mutating store just because the persisted name was HTML-encoded.
+    if (!didUserEditRef.current && finalName === templateNameUI) {
+      return
+    }
+
     // setTemplateName only marks isPristine:false when the name actually changed,
     // which is what gates the auto-save in useAutoSaveTemplate.
     setTemplateName(finalName)
@@ -63,18 +74,22 @@ export function TemplateNameInput() {
       inputRef.current?.blur()
     }
     if (e.key === "Escape") {
-      setLocalValue(templateName)
+      didUserEditRef.current = false
+      setLocalValue(templateNameUI)
       inputRef.current?.blur()
     }
   }
 
   const isDefault = localValue === UNTITLED
 
   return (
-    <Input
+    <InputAny
       ref={inputRef}
       value={localValue}
-      onChange={(e) => setLocalValue(e.target.value)}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        didUserEditRef.current = true
+        setLocalValue(e.target.value)
+      }}
       onBlur={handleBlur}
       onFocus={handleFocus}
       onKeyDown={handleKeyDown}