Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

xterm/addon-fit: wtf why it goes width=1? #5320

Open
steve02081504 opened this issue Mar 14, 2025 · 0 comments
Open

xterm/addon-fit: wtf why it goes width=1? #5320

steve02081504 opened this issue Mar 14, 2025 · 0 comments

Comments

@steve02081504
Copy link

when I resize an terminal that using xterm/addon-fit over and over again it becomes uh.

Image

Details

  • Browser and browser version: Firefox
  • OS version: windows11
  • xterm.js version: latest

Steps to reproduce

  1. html code:
<!DOCTYPE html>
<html data-theme="dark">

<head>
	<meta charset="UTF-8">
	<meta name="darkreader-lock">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title data-i18n="terminal_assistant.title"></title>
	<link href="https://cdn.jsdelivr.net/npm/daisyui/daisyui.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.min.css">
</head>

<body class="flex flex-col h-screen items-center justify-center p-4">
	<div id="terminal" class="mockup-code border"></div>

	<script type="module">
		import { Terminal } from 'https://esm.run/xterm'
		import { WebLinksAddon } from 'https://esm.run/@xterm/addon-web-links'
		import { ClipboardAddon } from 'https://esm.run/@xterm/addon-clipboard'
		import { FitAddon } from 'https://esm.run/@xterm/addon-fit'

		const terminal = new Terminal({
			linkHandler: {
				activate(event, text, range) {
					if (event.button === 2) return
					event.preventDefault()
					window.open(text, '_blank')
				}
			},
			cursorBlink: true
		})

		const fiter = new FitAddon()
		terminal.loadAddon(fiter)
		terminal.loadAddon(new WebLinksAddon())
		terminal.loadAddon(new ClipboardAddon())

		terminal.open(document.getElementById('terminal'))
		fiter.fit()
		window.addEventListener('resize', () => {
			fiter.fit()
		})
		terminal.element.addEventListener('contextmenu', async (event) => {
			event.preventDefault()
			const selectedText = terminal.getSelection()
			if (selectedText) {
				await navigator.clipboard.writeText(selectedText)
				terminal.clearSelection()
			}
			else
				terminal.paste(await navigator.clipboard.readText())
		})
	</script>
</body>

</html>

(Original code: https://github.com/steve02081504/fount/blob/master/src/public/shells/shellassist/index.html)
2. resize it over and over again.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@steve02081504