xtermjs / xterm.js

A terminal for the web
https://xtermjs.org/
MIT License
16.99k stars 1.59k forks source link

can't input Chinese Number #5061

Open jsonParseTo opened 1 month ago

jsonParseTo commented 1 month ago

hi,bro: I have a problem in Chinese typing system, I can't input Chinese Numbers. but when i use english typing system, It's ok.

Details

Video

https://github.com/xtermjs/xterm.js/assets/16420341/bd117df6-2f02-4bb2-87e2-2a8c39042918

Code

import { useState, useRef, useEffect } from 'react';
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import '@xterm/xterm/css/xterm.css';

function App() {
    const terminalRef = useRef(null);
    const [termInputValue, setTermInputValue] = useState('');

    useEffect(() => {
        terminalRef.current = new Terminal();
        terminalRef.current.loadAddon(new FitAddon());
        terminalRef.current.open(document.getElementById('terminal'))

        terminalRef.current.onKey((e) => {
            const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
            if (e.domEvent.keyCode === 13) {
                terminalRef.current.write('\r\n');
                setTermInputValue('');
            } else if (e.domEvent.keyCode === 8) {
                terminalRef.current.write('\b \b');
                const inputVlaue = termInputValue.substring(0, termInputValue.length - 1);
                setTermInputValue(inputVlaue);
            } else if (printable) {
                terminalRef.current.write(e.key);
                setTermInputValue(termInputValue + e.key);
            }
        });

        terminalRef.current.onData((e) => {
            const reg = new RegExp('[\u4E00-\u9FA5]+');
            if (e.length > 1 || reg.test(e)) {
                terminalRef.current.write(e.replace(/(\r\n)/g, '\n').replace(/(\r)/g, '\n'));
                setTermInputValue(`${termInputValue}${e}`);
            }
        });
    }, [])
    return (
        <div id="terminal" />
    );
}

export default App;