Support Input Methods

main/package.json

@@ -16,7 +16,7 @@
     "test": "yarn run build-code && yarn node --experimental-vm-modules $(yarn bin jest)"
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.58.0-rc4",
+    "@nodegui/nodegui": "0.59.0",
     "nodegui-plugin-font-icon": "0.3.1",
     "nodegui-plugin-qhotkey": "^0.1.1",
     "nodegui-plugin-rich-text-delegate": "0.3.0",

main/src/terminal/Terminal.ts

@@ -22,11 +22,15 @@ import {
 } from "@extraterm/extraterm-extension-api";
 import {
   Direction,
+  InputMethodHint,
+  InputMethodQuery,
   KeyboardModifier,
   MouseButton,
   QApplication,
   QBoxLayout,
   QClipboardMode,
+  QInputMethodEvent,
+  QInputMethodQueryEvent,
   QKeyEvent,
   QLabel,
   QMouseEvent,
@@ -35,6 +39,7 @@ import {
   QScrollBar,
   QSizePolicyPolicy,
   QWidget,
+  WidgetAttribute,
   WidgetEventTypes
 } from "@nodegui/nodegui";
 import { performance } from "node:perf_hooks";
@@ -69,6 +74,7 @@ import { BulkFileStorage } from "../bulk_file_handling/BulkFileStorage.js";
 import { BulkFile } from "../bulk_file_handling/BulkFile.js";
 import * as BulkFileUtils from "../bulk_file_handling/BulkFileUtils.js";
 import { Block } from "./Block.js";
+import { QEvent } from "@nodegui/nodegui/dist/lib/QtGui/QEvent/QEvent.js";
 
 export const EXTRATERM_COOKIE_ENV = "LC_EXTRATERM_COOKIE";
 
@@ -311,17 +317,26 @@ export class Terminal implements Tab, Disposable {
   #createUi() : void {
     this.scrollArea = new TerminalScrollArea({
       objectName: "content",
+      onInputMethod: (nativeEvent) => {
+        this.#handleInputMethod(new QInputMethodEvent(nativeEvent));
+      },
+      onInputMethodQuery: (nativeEvent) => {
+        this.#handleInputMethodQuery(new QInputMethodQueryEvent(nativeEvent));
+      },
       onKeyPress: (nativeEvent) => {
         this.#handleKeyPress(new QKeyEvent(nativeEvent));
       },
       onMouseButtonPress: (nativeEvent) => {
         this.#handleMouseButtonPress(new QMouseEvent(nativeEvent));
       },
     });
-    this.scrollArea.getWidget().addEventListener(WidgetEventTypes.Resize, () => {
+    this.scrollArea.getContentWidget().setAttribute(WidgetAttribute.WA_InputMethodEnabled, true);
+
+    const scrollAreaWidget = this.scrollArea.getWidget();
+    scrollAreaWidget.addEventListener(WidgetEventTypes.Resize, () => {
       this.#handleResize();
     });
-    this.scrollArea.getWidget().addEventListener(WidgetEventTypes.MouseButtonPress, (nativeEvent) => {
+    scrollAreaWidget.addEventListener(WidgetEventTypes.MouseButtonPress, (nativeEvent) => {
       this.#handleMouseButtonPressBelowFrames(new QMouseEvent(nativeEvent));
     });
     this.#contentWidget = this.scrollArea.getContentWidget();
@@ -654,7 +669,10 @@ export class Terminal implements Tab, Disposable {
 
   #handleKeyPress(event: QKeyEvent): void {
     const ev = qKeyEventToMinimalKeyboardEvent(event);
+    this.#handleTermKeyboardEvent(event, ev);
+  }
 
+  #handleTermKeyboardEvent(event: QEvent, ev: TermApi.MinimalKeyboardEvent): void {
     const commands = this.#keybindingsIOManager.getCurrentKeybindingsMapping().mapEventToCommands(ev);
     const filteredCommands = this.#extensionManager.queryCommands({
       commands,
@@ -674,6 +692,45 @@ export class Terminal implements Tab, Disposable {
     }
   }
 
+  #handleInputMethod(event: QInputMethodEvent): void {
+    this.scrollArea.getContentWidget().updateMicroFocus();
+    if (event.commitString() !== "") {
+      const termEvent: TermApi.MinimalKeyboardEvent = {
+        altKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        shiftKey: false,
+        key: event.commitString(),
+        isComposing: false
+      };
+      this.#handleTermKeyboardEvent(event, termEvent);
+
+      const terminalBlock = <TerminalBlock> this.#latestTerminalFrame.getBlock();
+      terminalBlock.setPreeditString(null);
+    } else {
+      const terminalBlock = <TerminalBlock> this.#latestTerminalFrame.getBlock();
+      terminalBlock.setPreeditString(event.preeditString());
+    }
+  }
+
+  #handleInputMethodQuery(event: QInputMethodQueryEvent): void {
+    const query = event.queries();
+    if (query & InputMethodQuery.ImEnabled) {
+      event.setValue(InputMethodQuery.ImEnabled, true);
+    }
+    if (query & InputMethodQuery.ImCursorRectangle) {
+      const rect = this.#getCursorContentWidgetGeometry();
+      event.setValue(InputMethodQuery.ImCursorRectangle, rect);
+    }
+    if (query & InputMethodQuery.ImReadOnly) {
+      event.setValue(InputMethodQuery.ImReadOnly, false);
+    }
+    if (query & InputMethodQuery.ImHints) {
+      event.setValue(InputMethodQuery.ImHints, InputMethodHint.ImhSensitiveData | InputMethodHint.ImhNoAutoUppercase);
+    }
+    event.accept();
+  }
+
   #handleMouseButtonPressBelowFrames(mouseEvent: QMouseEvent): void {
     if (this.#blockFrames.length === 0) {
       return;
@@ -1008,15 +1065,31 @@ export class Terminal implements Tab, Disposable {
   }
 
   getCursorGlobalGeometry(): QRect | null {
-    const frame = this.#findLastBareTerminalBlockFrame();
-    const block = <TerminalBlock> frame.getBlock();
+    return this.#getCursorGeometry(true);
+  }
+
+  #getCursorContentWidgetGeometry(): QRect | null {
+    return this.#getCursorGeometry(false);
+  }
+
+  #getCursorGeometry(global: boolean): QRect | null {
+    if (this.#latestTerminalFrame == null) {
+      return new QRect(0, 0, 1, 1);
+    }
+
+    const block = <TerminalBlock> this.#latestTerminalFrame.getBlock();
     const geo = block.getCursorGeometry();
     if (geo == null) {
       return null;
     }
 
-    const globalPos = block.getWidget().mapToGlobal(new QPoint(geo.left(), geo.top()));
-    return new QRect(globalPos.x(), globalPos.y(), geo.width(), geo.height());
+    let pos: QPoint;
+    if (global) {
+      pos = block.getWidget().mapToGlobal(new QPoint(geo.left(), geo.top()));
+    } else {
+      pos = block.getWidget().mapTo(this.scrollArea.getContentWidget(), new QPoint(geo.left(), geo.top()));
+    }
+    return new QRect(pos.x(), pos.y(), geo.width(), geo.height());
   }
 
   #handleScreenChange(event: TermApi.ScreenChangeEvent): void {

main/src/terminal/TerminalBlock.ts

@@ -18,6 +18,7 @@ import { EventEmitter } from "extraterm-event-emitter";
 import { countCells, reverseString } from "extraterm-unicode-utilities";
 import { BlockMetadata, BlockPosture } from "@extraterm/extraterm-extension-api";
 import { Line, MouseEventOptions, RenderEvent, TerminalCoord } from "term-api";
+import { LineImpl } from "term-api-lineimpl";
 
 import { Block } from "./Block.js";
 import * as Term from "../emulator/Term.js";
@@ -53,6 +54,7 @@ export class TerminalBlock implements Block {
   #parent: any = null;
   #widget: QWidget = null;
   #emulator: Term.Emulator = null;
+  #preeditString: string = null;
 
   #columns = 0;
 
@@ -169,6 +171,11 @@ export class TerminalBlock implements Block {
     this.#widget.update();
   }
 
+  setPreeditString(text: string): void {
+    this.#preeditString = text;
+    this.#widget.update();
+  }
+
   takeScrollbackFrom(startLine: number): Line[] {
     const result = this.#scrollback.slice(startLine);
     this.#scrollback.splice(startLine);
@@ -405,6 +412,7 @@ export class TerminalBlock implements Block {
       const startY = (screenTopRow + scrollbackLength) * heightPx;
       this.#renderLines(painter, lines, startY, cursorStyle === "block");
       this.#renderCursors(painter, lines, startY);
+      this.#renderPreexitString(painter);
     }
 
     this.#renderSelection(painter, topRenderRow, heightRows);
@@ -492,9 +500,11 @@ export class TerminalBlock implements Block {
 
     for (let i=firstRow; i<lastRow; i++) {
       // A row within a multi-row selection.
-      let rowLength = emulatorWidth;
+      let rowLength: number;
       if (i < this.#scrollback.length) {
         rowLength = Math.min(this.#scrollback[i].width, rightX);
+      } else {
+        rowLength = Math.min(emulatorWidth, rightX);
       }
       painter.fillRectF(leftX*widthPx, i*heightPx,
         (rowLength - leftX) * widthPx, heightPx, selectionQColor);
@@ -714,6 +724,21 @@ export class TerminalBlock implements Block {
     }
   }
 
+  #renderPreexitString(painter: QPainter): void {
+    if (this.#emulator == null || this.#preeditString == null || this.#preeditString === "") {
+      return;
+    }
+    const dim = this.#emulator.getDimensions();
+    const y = (dim.cursorY + this.#scrollback.length) * this.#fontMetrics.heightPx + (1/128);
+    // About 1/128, see else where.
+
+    const line = new LineImpl(dim.cols, this.#terminalVisualConfig.palette, 0);
+    line.setString(dim.cursorX, this.#preeditString);
+    line.setBgClutIndex(dim.cursorX, 15); // white
+    line.setFgClutIndex(dim.cursorX, 0);  // black
+    this.#renderSingleLine(painter, line, y, false);
+  }
+
   // private _configCursorStyleToHollowRendererCursorStyle(configCursorStyle: ConfigCursorStyle): CursorStyle {
   //   switch (configCursorStyle) {
   //     case "block":

package.json

@@ -30,7 +30,7 @@
   "resolutions": {
     "@types/node": "18.11.18",
     "typescript": "4.7.4",
-    "@nodegui/nodegui": "0.58.0-rc4",
+    "@nodegui/nodegui": "0.59.0",
     "7zip-bin": "5.1.1"
   },
   "private": true,
@@ -70,8 +70,8 @@
     ]
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.58.0-rc4",
-    "@nodegui/qode": "18.12.1-rc1",
+    "@nodegui/nodegui": "0.59.0",
+    "@nodegui/qode": "18.12.1",
     "node-gyp": "^8.3.0"
   },
   "devDependencies": {

packages/extraterm-char-render-canvas/package.json

@@ -21,7 +21,7 @@
     "run": "false"
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.58.0-rc4",
+    "@nodegui/nodegui": "0.59.0",
     "extraterm-char-cell-line": "1.0.0",
     "extraterm-color-utilities": "1.0.0",
     "extraterm-data-structures": "1.0.0",

packages/extraterm-extension-api/package.json

@@ -34,6 +34,6 @@
     "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "@nodegui/nodegui": "0.58.0-rc4"
+    "@nodegui/nodegui": "0.59.0"
   }
 }

packages/extraterm-timeoutqt/package.json

@@ -12,7 +12,7 @@
     "url": "git://github.com/sedwards2009/extraterm.git"
   },
   "dependencies": {
-    "@nodegui/nodegui": "0.58.0-rc4"
+    "@nodegui/nodegui": "0.59.0"
   },
   "devDependencies": {
     "eslint": "8.13.0",

packages/qt-construct/package.json

@@ -19,10 +19,10 @@
     "lint-strict": "eslint --max-warnings 1 \"src/**/*.ts\""
   },
   "peerDependencies": {
-    "@nodegui/nodegui": "0.58.0-rc4"
+    "@nodegui/nodegui": "0.59.0"
   },
   "devDependencies": {
-    "@nodegui/nodegui": "0.58.0-rc4",
+    "@nodegui/nodegui": "0.59.0",
     "eslint": "8.13.0",
     "eslint-config-extraterm": "1.0.0",
     "eslint-plugin-unicorn": "42.0.0",

packages/qt-construct/src/Widget.ts

@@ -27,6 +27,8 @@ export interface WidgetOptions {
   onEnter?: () => void;
   onFocusIn?: () => void;
   onFocusOut?: () => void;
+  onInputMethod?: (nativeEvent /* NativeQEvent */) => void;
+  onInputMethodQuery?: (nativeEvent /* NativeQEvent */) => void;
   onKeyPress?: (nativeEvent /* NativeQEvent */) => void;
   onLayoutRequest?: () => void;
   onLeave?: () => void;
@@ -48,9 +50,10 @@ export interface WidgetOptions {
 export function ApplyWidgetOptions(widget: QWidget, options: WidgetOptions): void {
   const {
     attribute, contentsMargins, contextMenuPolicy, cursor, enabled, cssClass, focusPolicy, layout, mouseTracking,
-    objectName, onClose, onEnter, onFocusIn, onFocusOut, onLayoutRequest, onLeave, onKeyPress, onMouseButtonPress,
-    onMouseMove, onMove, onPaint, onResize, onWheel, sizePolicy, styleSheet, windowIcon, windowTitle, maximumHeight,
-    maximumWidth, minimumHeight, minimumWidth, windowFlag, inlineStyle, toolTip, visible
+    objectName, onClose, onEnter, onFocusIn, onFocusOut, onInputMethod, onInputMethodQuery, onLayoutRequest, onLeave,
+    onKeyPress, onMouseButtonPress, onMouseMove, onMove, onPaint, onResize, onWheel, sizePolicy, styleSheet,
+    windowIcon, windowTitle, maximumHeight, maximumWidth, minimumHeight, minimumWidth, windowFlag, inlineStyle,
+    toolTip, visible
   } = options;
 
   if (enabled !== undefined) {
@@ -97,6 +100,14 @@ export function ApplyWidgetOptions(widget: QWidget, options: WidgetOptions): voi
   if (onFocusOut !== undefined) {
     widget.addEventListener(WidgetEventTypes.FocusOut, onFocusOut);
   }
+  if (onInputMethod !== undefined) {
+    widget.addEventListener(WidgetEventTypes.InputMethod, onInputMethod);
+  }
+  if (onInputMethodQuery !== undefined) {
+    widget.addEventListener(WidgetEventTypes.InputMethodQuery, onInputMethodQuery, {
+      afterDefault: true
+    });
+  }
   if (onLayoutRequest !== undefined) {
     widget.addEventListener(WidgetEventTypes.LayoutRequest, onLayoutRequest);
   }