charmbracelet / bubbles

TUI components for Bubble Tea 🫧
MIT License
5.35k stars 252 forks source link

textarea.Placeholder cannot display the first Chinese character properly #579

Open zzhaolei opened 1 month ago

zzhaolei commented 1 month ago

Describe the bug textarea.Placeholder cannot display the first Chinese character properly

Setup

To Reproduce

  1. clone https://github.com/charmbracelet/bubbletea/blob/master/examples/chat/main.go
  2. change
    ta := textarea.New()
    ta.Placeholder = "Send a message..."
    ta.Focus()

    to

    ta := textarea.New()
    ta.Placeholder = "输入消息..."
    ta.Focus()
  3. go run main.go
  4. 
    Welcome to the chat room!
    Type a message and press Enter
    to send.

┃ è��入消息...


**Source Code**

package main

// A simple program demonstrating the text area component from the Bubbles // component library.

import ( "fmt" "log" "strings"

"github.com/charmbracelet/bubbles/textarea"
"github.com/charmbracelet/bubbles/viewport"
tea "github.com/charmbracelet/bubbletea"
"github.com/charmbracelet/lipgloss"

)

func main() { p := tea.NewProgram(initialModel())

if _, err := p.Run(); err != nil {
    log.Fatal(err)
}

}

type ( errMsg error )

type model struct { viewport viewport.Model messages []string textarea textarea.Model senderStyle lipgloss.Style err error }

func initialModel() model { ta := textarea.New() ta.Placeholder = "输入消息..." ta.Focus()

ta.Prompt = "┃ "
ta.CharLimit = 280

ta.SetWidth(30)
ta.SetHeight(3)

// Remove cursor line styling
ta.FocusedStyle.CursorLine = lipgloss.NewStyle()

ta.ShowLineNumbers = false

vp := viewport.New(30, 5)
vp.SetContent(`Welcome to the chat room!

Type a message and press Enter to send.`)

ta.KeyMap.InsertNewline.SetEnabled(false)

return model{
    textarea:    ta,
    messages:    []string{},
    viewport:    vp,
    senderStyle: lipgloss.NewStyle().Foreground(lipgloss.Color("5")),
    err:         nil,
}

}

func (m model) Init() tea.Cmd { return textarea.Blink }

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) { var ( tiCmd tea.Cmd vpCmd tea.Cmd )

m.textarea, tiCmd = m.textarea.Update(msg)
m.viewport, vpCmd = m.viewport.Update(msg)

switch msg := msg.(type) {
case tea.KeyMsg:
    switch msg.Type {
    case tea.KeyCtrlC, tea.KeyEsc:
        fmt.Println(m.textarea.Value())
        return m, tea.Quit
    case tea.KeyEnter:
        m.messages = append(m.messages, m.senderStyle.Render("You: ")+m.textarea.Value())
        m.viewport.SetContent(strings.Join(m.messages, "\n"))
        m.textarea.Reset()
        m.viewport.GotoBottom()
    }

// We handle errors just like any other message
case errMsg:
    m.err = msg
    return m, nil
}

return m, tea.Batch(tiCmd, vpCmd)

}

func (m model) View() string { return fmt.Sprintf( "%s\n\n%s", m.viewport.View(), m.textarea.View(), ) + "\n\n" }



**Expected behavior**
Normal display Chinese

**Screenshots**
<img width="415" alt="image" src="https://github.com/user-attachments/assets/6dc152f1-726d-43db-ba4f-dfe2acbf9a4c">

**Additional context**
none
bashbunni commented 3 weeks ago

I was able to reproduce this with the steps you provided. Thank you so much for bringing this to our attention 🙏 image

tried both zh_CN.UTF-8 and en_US.UTF-8