parley: add IME support to text editor example

examples/vello_editor/src/main.rs

@@ -60,6 +60,7 @@ impl<'s> ApplicationHandler for SimpleVelloApp<'s> {
  let window = cached_window
  .take()
  .unwrap_or_else(|| create_winit_window(event_loop));
+ window.set_ime_allowed(true);
 
  // Create a vello Surface
  let size = window.inner_size();
@@ -107,7 +108,7 @@ impl<'s> ApplicationHandler for SimpleVelloApp<'s> {
  _ => return,
  };
 
- self.editor.handle_event(&event);
+ self.editor.handle_event(&render_state.window, &event);
  render_state.window.request_redraw();
  // render_state
  // .window

examples/vello_editor/src/text.rs

@@ -3,12 +3,15 @@
 
 #[cfg(not(target_os = "android"))]
 use clipboard_rs::{Clipboard, ClipboardContext};
-use parley::layout::cursor::{Selection, VisualMode};
+use parley::layout::cursor::{Cursor, Selection, VisualMode};
 use parley::layout::Affinity;
 use parley::{layout::PositionedLayoutItem, FontContext};
 use peniko::{kurbo::Affine, Color, Fill};
 use std::time::Instant;
 use vello::Scene;
+use winit::dpi::{LogicalPosition, LogicalSize};
+use winit::event::Ime;
+use winit::window::Window;
 use winit::{
  event::{Modifiers, WindowEvent},
  keyboard::{KeyCode, PhysicalKey},
@@ -26,13 +29,24 @@ pub enum ActiveText<'a> {
  Selection(&'a str),
 }
 
+#[derive(Default)]
+enum ComposeState {
+ #[default]
+ None,
+ Preedit {
+ /// The location of the (uncommitted) preedit text
+ text_at: Selection,
+ },
+}
+
 #[derive(Default)]
 pub struct Editor {
  font_cx: FontContext,
  layout_cx: LayoutContext,
  buffer: String,
  layout: Layout,
  selection: Selection,
+ compose_state: ComposeState,
  cursor_mode: VisualMode,
  last_click_time: Option<Instant>,
  click_count: u32,
@@ -126,7 +140,28 @@ impl Editor {
  // TODO: support clipboard on Android
  }
 
- pub fn handle_event(&mut self, event: &WindowEvent) {
+ pub fn handle_event(&mut self, window: &Window, event: &WindowEvent) {
+ if let ComposeState::Preedit { text_at } = self.compose_state {
+ // Clear old preedit state when handling events that potentially mutate text/selection.
+ // This is a bit overzealous, e.g., pressing and releasing shift probably shouldnt't
+ // clear the preedit.
+ if matches!(
+ event,
+ WindowEvent::KeyboardInput { .. }
+ | WindowEvent::MouseInput { .. }
+ | WindowEvent::Ime(..)
+ ) {
+ let range = text_at.text_range();
+ self.selection =
+ Selection::from_index(&self.layout, range.start - 1, Affinity::Upstream);
+ self.buffer.replace_range(range, "");
+ self.compose_state = ComposeState::None;
+ // TODO: defer updating layout. If the event itself also causes an update, we now
+ // update twice.
+ self.update_layout(self.width, 1.0);
+ }
+ }
+
  match event {
  WindowEvent::Resized(size) => {
  self.update_layout(size.width as f32, 1.0);
@@ -265,6 +300,87 @@ impl Editor {
 
  // println!("Active text: {:?}", self.active_text());
  }
+ WindowEvent::Ime(ime) => {
+ match ime {
+ Ime::Commit(text) => {
+ let start = self
+ .delete_current_selection()
+ .unwrap_or_else(|| self.selection.focus().text_range().start);
+ self.buffer.insert_str(start, text);
+ self.update_layout(self.width, 1.0);
+ self.selection = Selection::from_index(
+ &self.layout,
+ start + text.len() - 1,
+ Affinity::Upstream,
+ );
+ }
+ Ime::Preedit(text, compose_cursor) => {
+ if text.is_empty() {
+ // Winit sends empty preedit text to indicate the preedit was cleared.
+ return;
+ }
+
+ let start = self
+ .delete_current_selection()
+ .unwrap_or_else(|| self.selection.focus().text_range().start);
+ self.buffer.insert_str(start, text);
+ self.update_layout(self.width, 1.0);
+
+ {
+ // winit says the cursor should be hidden when compose_cursor is None.
+ // Do we handle that? We also don't extend the cursor to the end
+ // indicated by winit, instead IME composing is currently indicated by
+ // highlighting the entire preedit text. Should we even update the
+ // selection at all?
+ let compose_cursor = compose_cursor.unwrap_or((0, 0));
+ self.selection = Selection::from_index(
+ &self.layout,
+ start - 1 + compose_cursor.0,
+ Affinity::Upstream,
+ );
+ }
+
+ {
+ let text_end = Cursor::from_index(
+ &self.layout,
+ start - 1 + text.len(),
+ Affinity::Upstream,
+ );
+ let ime_cursor = self.selection.extend_to_cursor(text_end);
+ self.compose_state = ComposeState::Preedit {
+ text_at: ime_cursor,
+ };
+
+ // Find the smallest rectangle that contains the entire preedit text.
+ // Send that rectangle to the platform to suggest placement for the IME
+ // candidate box.
+ let mut union_rect = None;
+ ime_cursor.geometry_with(&self.layout, |rect| {
+ if union_rect.is_none() {
+ union_rect = Some(rect);
+ }
+ union_rect = Some(union_rect.unwrap().union(rect));
+ });
+ if let Some(union_rect) = union_rect {
+ window.set_ime_cursor_area(
+ LogicalPosition::new(union_rect.x0, union_rect.y0),
+ LogicalSize::new(
+ union_rect.width(),
+ // TODO: an offset is added here to prevent the IME
+ // candidate box from overlapping with the IME cursor. From
+ // the Winit docs I would've expected the IME candidate box
+ // not to overlap the indicated IME cursor area, but for
+ // some reason it does (tested using fcitx5
+ // on wayland)
+ union_rect.height() + 40.0,
+ ),
+ );
+ }
+ }
+ }
+ _ => {}
+ }
+ }
  WindowEvent::MouseInput { state, button, .. } => {
  if *button == winit::event::MouseButton::Left {
  self.pointer_down = state.is_pressed();
@@ -350,6 +466,13 @@ impl Editor {
  if let Some(cursor) = self.selection.focus().weak_geometry(&self.layout, 1.5) {
  scene.fill(Fill::NonZero, transform, Color::LIGHT_GRAY, None, &cursor);
  };
+ if let ComposeState::Preedit { text_at } = self.compose_state {
+ // TODO: underline rather than fill, requires access to underline_offset metric for
+ // each run
+ text_at.geometry_with(&self.layout, |rect| {
+ scene.fill(Fill::NonZero, transform, Color::SPRING_GREEN, None, &rect);
+ });
+ }
  for line in self.layout.lines() {
  for item in line.items() {
  let PositionedLayoutItem::GlyphRun(glyph_run) = item else {

parley/src/layout/cursor.rs

@@ -505,6 +505,16 @@ impl Selection {
  }
  }
 
+ /// Returns a new selection with the focus extended to the given cursor.
+ #[must_use]
+ pub fn extend_to_cursor(&self, focus: Cursor) -> Self {
+ Self {
+ anchor: self.anchor,
+ focus,
+ h_pos: None,
+ }
+ }
+
  /// Returns a new selection with the focus moved to the next cluster in
  /// visual order.
  ///