Merge pull request #64 from getpingback/fix/variableInput

fix: variable input initial content
getpingback · Feb 11, 2025 · e045b60 · e045b60
2 parents 4e97f24 + 5e9098e
commit e045b60
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/components/variable-input/variable-input.test.tsx b/src/components/variable-input/variable-input.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { VariableInput } from './variable-input';
+import userEvent from '@testing-library/user-event';
 
 describe('VariableInput Component', () => {
   const options = [
@@ -111,4 +112,21 @@ describe('VariableInput Component', () => {
       expect(editor.innerHTML).not.toBe('Placeholder');
     }
   });
+
+  it('should update content when user types text', async () => {
+    const user = userEvent.setup();
+    const handleChangeContent = jest.fn();
+    const { container } = render(<VariableInput options={options} onChangeContent={handleChangeContent} />);
+
+    const editor = container.querySelector("[contenteditable='true']");
+    expect(editor).toBeInTheDocument();
+
+    if (editor) {
+      await user.click(editor);
+      await user.keyboard('Hello world');
+
+      expect(handleChangeContent).toHaveBeenCalledWith('Hello world');
+      expect(editor.textContent).toBe('Hello world');
+    }
+  });
 });
diff --git a/src/components/variable-input/variable-input.tsx b/src/components/variable-input/variable-input.tsx
@@ -55,7 +55,7 @@ export function VariableInput({
   ...props
 }: VariableInputProps) {
   const [open, setOpen] = React.useState(false);
-  const [text, setText] = React.useState('');
+  const [contentValue, setContentValue] = React.useState(initialContent);
   const [isFocused, setIsFocused] = React.useState(false);
   const [lastRange, setLastRange] = React.useState<Range | null>(null);
 
@@ -69,7 +69,7 @@ export function VariableInput({
     const plainText = transformContentToPlainText(target.innerHTML);
 
     onChangeContent?.(plainText);
-    setText(plainText);
+    setContentValue(plainText);
 
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
@@ -142,7 +142,7 @@ export function VariableInput({
     onSelectVariable?.(selectedVariable);
     const plainText = transformContentToPlainText(editor.innerHTML);
     onChangeContent?.(plainText);
-    setText(plainText);
+    setContentValue(plainText);
   };
 
   const handleFocus = () => {
@@ -208,21 +208,20 @@ export function VariableInput({
     if (editor && initialContent) {
       const contentWithSpans = transformVariablesToSpans(initialContent);
       editor.innerHTML = contentWithSpans;
-      setText(initialContent);
     }
-  }, [initialContent]);
+  }, []);
 
   React.useEffect(() => {
     const editor = editorRef.current;
 
     if (editor) {
-      if (!isFocused && !text && !initialContent && placeholder) {
+      if (!isFocused && !contentValue && placeholder) {
         editor.innerHTML = placeholderTag;
       } else if (isFocused && editor.innerHTML === placeholderTag) {
         editor.innerHTML = '';
       }
     }
-  }, [isFocused, text, placeholder, initialContent]);
+  }, [isFocused, contentValue, placeholder]);
 
   React.useEffect(() => {
     if (!open) return;