@arcblock/terminal 3.1.17 → 3.1.18

package/lib/styles.js

@@ -1,134 +1,9 @@
 import e from "@emotion/styled";
-const t = e.div({
+const r = e.div({
   // Base styles for .terminal-player
-  display: "inline-block",
+  display: "block",
   position: "relative",
-  fontSize: 0,
-  // Terminal styles
-  "& .terminal": { display: "inline-block" },
-  "& .terminal .xterm .xterm-viewport": { overflowY: "hidden !important" },
-  // Terminal frame
-  "& .terminal-frame": { position: "relative" },
-  // Reset styles for terminal divs
-  "& .terminal div": {
-    margin: 0,
-    padding: 0,
-    border: 0,
-    outline: 0,
-    fontWeight: "inherit",
-    fontStyle: "inherit",
-    fontSize: "100%",
-    verticalAlign: "baseline"
-  },
-  // Window theme
-  "&.terminal-window .terminal-frame": {
-    borderRadius: 6,
-    border: "1px solid #b3b3b3",
-    boxShadow: "0px 0px 18px #b3b3b3",
-    margin: 18,
-    overflow: "hidden",
-    "& .terminal-titlebar": {
-      background: "#e8e8e8",
-      borderBottom: "1px solid #b1aeb1",
-      borderTop: "1px solid #f3f1f3",
-      borderTopLeftRadius: 6,
-      borderTopRightRadius: 6,
-      color: "#3b4247",
-      fontSize: 14,
-      height: 22,
-      lineHeight: "22px",
-      position: "relative",
-      textAlign: "center",
-      width: "100%",
-      "& .buttons": { left: 8, lineHeight: "0px", position: "absolute", top: 3.5 },
-      "& .close-button": {
-        background: "#ff5c5c",
-        borderRadius: "50%",
-        border: "1px solid #e33e41",
-        display: "inline-block",
-        height: 12,
-        width: 12
-      },
-      "& .minimize-button": {
-        background: "#ffbd4c",
-        borderRadius: "50%",
-        border: "1px solid #e09e3e",
-        display: "inline-block",
-        height: 12,
-        marginLeft: 4,
-        width: 12
-      },
-      "& .maximize-button": {
-        background: "#00ca56",
-        borderRadius: "50%",
-        border: "1px solid #14ae46",
-        display: "inline-block",
-        height: 12,
-        marginLeft: 4,
-        width: 12
-      }
-    },
-    "& .terminal-body": { backgroundColor: "#1d1d1d", padding: 10 }
-  },
-  // Floating theme
-  "&.terminal-floating .terminal-frame": {
-    backgroundColor: "#1d1d1d",
-    borderRadius: 6,
-    boxShadow: "0px 0px 18px #b3b3b3",
-    margin: 18,
-    overflow: "hidden",
-    "& .terminal-titlebar": {
-      color: "white",
-      fontSize: 14,
-      height: 34,
-      lineHeight: "34px",
-      position: "relative",
-      textAlign: "center",
-      width: "100%",
-      "& .buttons": { left: 13, lineHeight: "0px", position: "absolute", top: 9 },
-      "& .close-button": { background: "#ff5c5c", borderRadius: "50%", display: "inline-block", height: 15, width: 15 },
-      "& .minimize-button": {
-        background: "#ffbd4c",
-        borderRadius: "50%",
-        display: "inline-block",
-        height: 15,
-        lineHeight: "10px",
-        marginLeft: 4,
-        width: 15
-      },
-      "& .maximize-button": {
-        background: "#00ca56",
-        borderRadius: "50%",
-        display: "inline-block",
-        height: 15,
-        lineHeight: "10px",
-        marginLeft: 4,
-        width: 15
-      }
-    },
-    "& .terminal-body": { padding: 20 }
-  },
-  // Solid theme
-  "&.terminal-solid .terminal-frame": {
-    backgroundColor: "#1d1d1d",
-    borderRadius: 6,
-    boxShadow: "0px 0px 18px #b3b3b3",
-    margin: 18,
-    overflow: "hidden",
-    "& .terminal-titlebar": {
-      color: "white",
-      fontSize: 14,
-      position: "relative",
-      textAlign: "center",
-      width: "100%",
-      "& .title": {
-        margin: "15px 15px 15px",
-        "&:empty": { display: "none" }
-      },
-      "& .buttons": { display: "none" }
-    },
-    "& .terminal-body": { padding: 20 }
-  },
+  overflow: "hidden",
   // Player controls
   "& .controller": {
     background: "#45484d",
@@ -194,16 +69,21 @@ const t = e.div({
   "& .start svg": {
     cursor: "pointer",
     fill: "#eaeaea",
-    height: 130,
+    width: 100,
+    height: 100,
     left: "50%",
     marginLeft: -65,
     marginTop: -65,
     position: "absolute",
     top: "50%",
-    width: 130,
     zIndex: 20,
     filter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))",
-    WebkitFilter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))"
+    WebkitFilter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))",
+    opacity: 0.6,
+    "&:hover": {
+      opacity: 0.8,
+      transition: "all 0.3s ease"
+    }
   },
   "&.small .start svg": { height: 60, marginLeft: -30, marginTop: -30, width: 60 },
   "&.framed .start svg": {
@@ -213,25 +93,31 @@ const t = e.div({
     OTransform: "translate(0px, 8px)",
     MsTransform: "translate(0px, 8px)"
   },
-  "& .cover:hover + .start svg, & .start:hover svg": { fill: "white" },
   "&.started .cover, &.started .start": { display: "none" },
   "& .terminal-watermark": { zIndex: 99999 }
 }), o = e.div({
-  // Xterm base styles
+  // Base xterm styles
   "& .xterm": {
-    fontFeatureSettings: "'liga' 0",
+    cursor: "text",
     position: "relative",
     userSelect: "none",
-    MsUserSelect: "none",
-    WebkitUserSelect: "none",
-    cursor: "text",
-    "&.focus, &:focus": { outline: "none" },
-    "&.enable-mouse-events": { cursor: "default" },
-    "&.xterm-cursor-pointer": { cursor: "pointer" },
-    "&.column-select.focus": { cursor: "crosshair" }
+    msUserSelect: "none",
+    webkitUserSelect: "none"
+  },
+  "& .xterm.focus, & .xterm:focus": {
+    outline: "none"
+  },
+  "& .xterm .xterm-helpers": {
+    position: "absolute",
+    top: 0,
+    // The z-index of the helpers must be higher than the canvases in order for IMEs to appear on top
+    zIndex: 5
   },
-  "& .xterm .xterm-helpers": { position: "absolute", top: 0, zIndex: 5 },
   "& .xterm .xterm-helper-textarea": {
+    padding: 0,
+    border: 0,
+    margin: 0,
+    // Move textarea out of the screen to the far left, so that the cursor is not visible
     position: "absolute",
     opacity: 0,
     left: "-9999em",
@@ -239,34 +125,45 @@ const t = e.div({
     width: 0,
     height: 0,
     zIndex: -5,
+    // Prevent wrapping so the IME appears against the textarea at the correct position
     whiteSpace: "nowrap",
     overflow: "hidden",
     resize: "none"
   },
   "& .xterm .composition-view": {
+    // TODO: Composition position got messed up somewhere
     background: "#000",
-    color: "#fff",
+    color: "#FFF",
     display: "none",
     position: "absolute",
     whiteSpace: "nowrap",
-    zIndex: 1,
-    "&.active": { display: "block" }
+    zIndex: 1
+  },
+  "& .xterm .composition-view.active": {
+    display: "block"
+  },
+  // '& .xterm .xterm-viewport': {
+  //   // On OS X this is required in order for the scroll bar to appear fully opaque
+  //   backgroundColor: 'transparent',
+  //   overflowY: 'scroll',
+  //   cursor: 'default',
+  //   position: 'absolute',
+  //   right: 0,
+  //   left: 0,
+  //   top: 0,
+  //   bottom: 0,
+  // },
+  "& .xterm .xterm-screen": {
+    position: "relative"
   },
-  "& .xterm .xterm-viewport": {
-    backgroundColor: "#000",
-    overflowY: "scroll",
-    cursor: "default",
+  "& .xterm .xterm-screen canvas": {
     position: "absolute",
-    right: 0,
     left: 0,
-    top: 0,
-    bottom: 0
+    top: 0
   },
-  "& .xterm .xterm-screen": {
-    position: "relative",
-    "& canvas": { position: "absolute", left: 0, top: 0 }
+  "& .xterm .xterm-scroll-area": {
+    visibility: "hidden"
   },
-  "& .xterm .xterm-scroll-area": { visibility: "hidden" },
   "& .xterm-char-measure-element": {
     display: "inline-block",
     visibility: "hidden",
@@ -275,20 +172,84 @@ const t = e.div({
     left: "-9999em",
     lineHeight: "normal"
   },
-  "& .xterm .xterm-accessibility, & .xterm .xterm-message": {
+  "& .xterm.enable-mouse-events": {
+    // When mouse events are enabled (eg. tmux), revert to the standard pointer cursor
+    cursor: "default"
+  },
+  "& .xterm.xterm-cursor-pointer, & .xterm .xterm-cursor-pointer": {
+    cursor: "pointer"
+  },
+  "& .xterm.column-select.focus": {
+    // Column selection mode
+    cursor: "crosshair"
+  },
+  "& .xterm .xterm-accessibility:not(.debug), & .xterm .xterm-message": {
     position: "absolute",
     left: 0,
     top: 0,
     bottom: 0,
     right: 0,
     zIndex: 10,
+    color: "transparent",
+    pointerEvents: "none"
+  },
+  "& .xterm .xterm-accessibility-tree:not(.debug) *::selection": {
     color: "transparent"
   },
-  "& .xterm .live-region": { position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" },
-  "& .xterm-dim": { opacity: 0.5 },
-  "& .xterm-underline": { textDecoration: "underline" }
+  "& .xterm .xterm-accessibility-tree": {
+    userSelect: "text",
+    whiteSpace: "pre"
+  },
+  "& .xterm .live-region": {
+    position: "absolute",
+    left: "-9999px",
+    width: "1px",
+    height: "1px",
+    overflow: "hidden"
+  },
+  "& .xterm-dim": {
+    // Dim should not apply to background, so the opacity of the foreground color is applied
+    // explicitly in the generated class and reset to 1 here
+    opacity: "1 !important"
+  },
+  // Text decoration styles
+  "& .xterm-underline-1": { textDecoration: "underline" },
+  "& .xterm-underline-2": { textDecoration: "double underline" },
+  "& .xterm-underline-3": { textDecoration: "wavy underline" },
+  "& .xterm-underline-4": { textDecoration: "dotted underline" },
+  "& .xterm-underline-5": { textDecoration: "dashed underline" },
+  "& .xterm-overline": {
+    textDecoration: "overline"
+  },
+  "& .xterm-overline.xterm-underline-1": { textDecoration: "overline underline" },
+  "& .xterm-overline.xterm-underline-2": { textDecoration: "overline double underline" },
+  "& .xterm-overline.xterm-underline-3": { textDecoration: "overline wavy underline" },
+  "& .xterm-overline.xterm-underline-4": { textDecoration: "overline dotted underline" },
+  "& .xterm-overline.xterm-underline-5": { textDecoration: "overline dashed underline" },
+  "& .xterm-strikethrough": {
+    textDecoration: "line-through"
+  },
+  // Decoration styles
+  "& .xterm-screen .xterm-decoration-container .xterm-decoration": {
+    zIndex: 6,
+    position: "absolute"
+  },
+  "& .xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer": {
+    zIndex: 7
+  },
+  "& .xterm-decoration-overview-ruler": {
+    zIndex: 8,
+    position: "absolute",
+    top: 0,
+    right: 0,
+    pointerEvents: "none"
+  },
+  "& .xterm-decoration-top": {
+    zIndex: 2,
+    position: "relative"
+  }
 });
 export {
-  t as PlayerRoot,
+  r as PlayerRoot,
   o as TerminalRoot
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/terminal",
-  "version": "3.1.17",
+  "version": "3.1.18",
   "description": "A react wrapper for xterm allowing you to easily render a terminal in the browser",
   "keywords": [
     "react",
@@ -40,16 +40,16 @@
   "peerDependencies": {
     "react": "^19.0.0"
   },
-  "gitHead": "5b5551ce69cf45e2bed8cc06fbb3592020b7618c",
+  "gitHead": "a145d1dd215444e7b65b8fa08cba2d8db513a94a",
   "dependencies": {
-    "@arcblock/react-hooks": "3.1.17",
-    "@arcblock/ux": "3.1.17",
+    "@arcblock/react-hooks": "3.1.18",
+    "@arcblock/ux": "3.1.18",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
     "ahooks": "^3.8.5",
-    "lodash": "^4.17.21",
-    "xterm": "4.19.0",
-    "xterm-addon-fit": "^0.2.1",
-    "xterm-addon-web-links": "^0.2.1"
+    "lodash": "^4.17.21"
   }
 }

package/src/Player.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-unused-prop-types, no-console */
-import { useReducer, useState, useRef, useEffect, useCallback } from 'react';
+import { useReducer, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useSize } from 'ahooks';
 import isUndefined from 'lodash/isUndefined';
 import noop from 'lodash/noop';
 
@@ -19,7 +18,7 @@ import {
   defaultState,
 } from './util';
 
-export const PLAYER_FRAME_DELAY = 24;
+export const PLAYER_FRAME_DELAY = 8;
 
 export default function Player({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
@@ -49,13 +48,14 @@ export default function Player({ ...rawProps }) {
     cols: options.cols,
     rows: options.rows,
     cursorStyle: options.cursorStyle,
+    cursorBlink: options.cursorBlink ?? true,
     fontFamily: options.fontFamily,
     fontSize: options.fontSize,
     lineHeight: options.lineHeight,
     letterSpacing: options.letterSpacing,
     allowTransparency: true,
     scrollback: 0,
-    theme: options.theme || {},
+    theme: options.enableTheme ? options.theme : {},
   };
 
   const stateReducer = (state, action) => {
@@ -85,39 +85,7 @@ export default function Player({ ...rawProps }) {
   const container = useRef(null);
   const animationRef = useRef(null);
   const startTimeRef = useRef(null);
-  const [maxWidth, setMaxWidth] = useState(0);
-  const size = useSize(document.body);
   const [state, dispatch] = useReducer(stateReducer, defaultState);
-  const width = size?.width || 0;
-
-  useEffect(() => {
-    if (!terminal.current) {
-      return;
-    }
-
-    try {
-      const COLUMN_WIDTH = 972 / 121;
-      const child = container.current.getBoundingClientRect();
-      let containerWidth = child.x < 0 ? child.width + child.x : child.width;
-      if (container.current.parentNode) {
-        const parent = container.current.parentNode.getBoundingClientRect();
-        if (child.width > parent.width) {
-          containerWidth = parent.width;
-        }
-      }
-
-      if (options.controls) {
-        containerWidth -= 12;
-      }
-      const colContainer = Math.ceil(containerWidth / COLUMN_WIDTH);
-      const cols = Math.min(Math.max(colContainer, 40), options.cols);
-
-      terminal.current.resize(cols, options.rows);
-    } catch (err) {
-      // Do nothing
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width, maxWidth]);
 
   // Render a frame with Promise-based approach
   const renderFrame = useCallback(
@@ -140,6 +108,21 @@ export default function Player({ ...rawProps }) {
     [frames, state.requireReset]
   );
 
+  // Render a frame synchronously for jump operations (no delay)
+  const renderFrameSync = useCallback(
+    (frameIndex) => {
+      const frame = frames[frameIndex];
+      if (frame && frame.content && terminal.current) {
+        if (state.requireReset) {
+          terminal.current.reset();
+        }
+        // Use synchronous write without callback for instant rendering
+        terminal.current.write(frame.content);
+      }
+    },
+    [frames, state.requireReset]
+  );
+
   // Emit a event
   const emitEvent = useCallback(
     (name) => {
@@ -151,21 +134,20 @@ export default function Player({ ...rawProps }) {
   );
 
   const doJump = useCallback(
-    async (time) => {
+    (time) => {
       if (!terminal.current) return;
 
       terminal.current.reset();
       const toFrameIndex = findFrameAt(frames, time);
 
       if (toFrameIndex >= 0) {
-        // Render all frames up to the target frame sequentially
+        // Render all frames up to the target frame synchronously for instant jump
         for (let i = 0; i <= toFrameIndex; i++) {
-          // eslint-disable-next-line no-await-in-loop
-          await renderFrame(i);
+          renderFrameSync(i);
         }
       }
     },
-    [frames, renderFrame]
+    [frames, renderFrameSync]
   );
 
   const onJump = useCallback(
@@ -207,6 +189,9 @@ export default function Player({ ...rawProps }) {
 
   const onStart = useCallback(() => {
     if (state.isStarted === false) {
+      // 触发一下 resize，保证文字输出正常
+      terminal.current.resize();
+
       dispatch({ type: 'start' });
       if (terminal.current) {
         terminal.current.reset();
@@ -227,38 +212,15 @@ export default function Player({ ...rawProps }) {
     return false;
   }, [emitEvent]);
 
-  const onPlay = useCallback(() => {
-    if (state.currentFrame >= frames.length - 1) {
-      // Reset to beginning if at the end
-      dispatch({ type: 'reset', payload: { currentFrame: -1, currentTime: 0 } });
-      if (terminal.current) {
-        terminal.current.reset();
-      }
-      startTimeRef.current = null;
-      // Start from beginning
-      dispatch({ type: 'play', payload: { currentFrame: -1, currentTime: 0 } });
-    } else {
-      // Continue from current position
-      startTimeRef.current = null; // Reset timing for accurate playback
-      dispatch({ type: 'play' });
-    }
-
-    emitEvent('onPlay');
-    return false;
-  }, [state.currentFrame, frames.length, emitEvent]);
-
   // Render thumbnailTime
   useEffect(() => {
     if (!terminal.current) {
       return;
     }
-    if (container.current) {
-      try {
-        setMaxWidth(container.current.getBoundingClientRect().width);
-      } catch (e) {
-        // Do nothing
-      }
-    }
+
+    // Focus terminal to ensure cursor is visible
+    terminal.current.focus();
+
     if (options.autoplay) {
       onStart();
     } else {
@@ -448,11 +410,6 @@ export default function Player({ ...rawProps }) {
             <span className="icon" />
           </div>
         )}
-        {!state.isPlaying && state.isStarted && (
-          <div className="play" onClick={onPlay} title="Play">
-            <span className="icon" />
-          </div>
-        )}
         {!state.isPlaying && !state.isStarted && (
           <div className="play" onClick={onStart} title="Start">
             <span className="icon" />

package/src/Terminal.jsx

@@ -2,9 +2,9 @@
 /* eslint-disable react/no-unused-class-component-methods */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Terminal as XTerm } from 'xterm';
-import { WebLinksAddon } from 'xterm-addon-web-links';
-import { FitAddon } from 'xterm-addon-fit';
+import { Terminal as XTerm } from '@xterm/xterm';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { FitAddon } from '@xterm/addon-fit';
 import debounce from 'lodash/debounce';
 import noop from 'lodash/noop';
 import { TerminalRoot } from './styles';
@@ -14,6 +14,8 @@ export default class Terminal extends React.Component {
 
   container = null;
 
+  shouldTriggerFitWhenWrite = false;
+
   componentDidMount() {
     const { value = '', options = {} } = this.props;
     this.fitAddon = new FitAddon();
@@ -31,15 +33,9 @@ export default class Terminal extends React.Component {
       this.xterm.write(value);
     }
 
-    setTimeout(() => {
-      if (this.xterm) {
-        this.fitAddon.fit();
-      }
-    }, 0);
-
     this.debounceFit = debounce(() => {
       this.fitAddon.fit();
-    }, 600);
+    }, 500);
 
     window.addEventListener('resize', this.debounceFit);
   }
@@ -75,6 +71,10 @@ export default class Terminal extends React.Component {
   write(data, cb) {
     if (this.xterm) {
       this.xterm.write(data, cb);
+      if (this.shouldTriggerFitWhenWrite) {
+        this.debounceFit();
+        this.shouldTriggerFitWhenWrite = false;
+      }
     }
   }
 
@@ -100,22 +100,29 @@ export default class Terminal extends React.Component {
     onRender(data);
   };
 
-  resize(cols, rows) {
+  resize() {
     if (this.xterm) {
-      this.xterm.resize(Math.round(cols), Math.round(rows));
+      const { cols, rows } = this.props.options;
+      this.shouldTriggerFitWhenWrite = true;
+      setTimeout(() => {
+        this.xterm.resize(Math.round(cols), Math.round(rows));
+        this.shouldTriggerFitWhenWrite = true;
+      }, 250);
     }
   }
 
   setOption(key, value) {
     if (this.xterm) {
-      this.xterm.setOption(key, value);
+      // In xterm.js v5, use options object directly instead of setOption
+      this.xterm.options[key] = value;
     }
   }
 
   getOption(key) {
     if (this.xterm) {
-      this.xterm.setOption(key);
+      return this.xterm.options[key];
     }
+    return undefined;
   }
 
   refresh() {