@lvce-editor/find-widget-worker 2.7.0 → 3.2.0

package/dist/findWidgetWorkerMain.js

@@ -182,8 +182,8 @@ const getModuleNotFoundError = stderr => {
   const messageIndex = lines.findIndex(isModuleNotFoundMessage);
   const message = lines[messageIndex];
   return {
-    message,
-    code: ERR_MODULE_NOT_FOUND
+    code: ERR_MODULE_NOT_FOUND,
+    message
   };
 };
 const isModuleNotFoundError = stderr => {
@@ -206,14 +206,14 @@ const isUnhelpfulNativeModuleError = stderr => {
 const getNativeModuleErrorMessage = stderr => {
   const message = getMessageCodeBlock(stderr);
   return {
-    message: `Incompatible native node module: ${message}`,
-    code: E_INCOMPATIBLE_NATIVE_MODULE
+    code: E_INCOMPATIBLE_NATIVE_MODULE,
+    message: `Incompatible native node module: ${message}`
   };
 };
 const getModuleSyntaxError = () => {
   return {
-    message: `ES Modules are not supported in electron`,
-    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON
+    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON,
+    message: `ES Modules are not supported in electron`
   };
 };
 const getHelpfulChildProcessError = (stdout, stderr) => {
@@ -232,8 +232,8 @@ const getHelpfulChildProcessError = (stdout, stderr) => {
     rest
   } = getDetails(lines);
   return {
-    message: actualMessage,
     code: '',
+    message: actualMessage,
     stack: rest
   };
 };
@@ -243,8 +243,8 @@ class IpcError extends VError {
     if (stdout || stderr) {
       // @ts-ignore
       const {
-        message,
         code,
+        message,
         stack
       } = getHelpfulChildProcessError(stdout, stderr);
       const cause = new Error(message);
@@ -305,8 +305,8 @@ const wrap$f = global => {
 };
 const waitForFirstMessage = async port => {
   const {
-    resolve,
-    promise
+    promise,
+    resolve
   } = Promise.withResolvers();
   port.addEventListener('message', resolve, {
     once: true
@@ -326,8 +326,8 @@ const listen$6 = async () => {
   const type = firstMessage.params[0];
   if (type === 'message-port') {
     parentIpc.send({
-      jsonrpc: '2.0',
       id: firstMessage.id,
+      jsonrpc: '2.0',
       result: null
     });
     parentIpc.dispose();
@@ -369,56 +369,14 @@ const IpcChildWithModuleWorkerAndMessagePort$1 = {
   wrap: wrap$e
 };
 
-const Two = '2.0';
-const create$4 = (method, params) => {
-  return {
-    jsonrpc: Two,
-    method,
-    params
-  };
-};
+const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const set$4 = (id, fn) => {
-  callbacks[id] = fn;
-};
 const get$2 = id => {
   return callbacks[id];
 };
 const remove = id => {
   delete callbacks[id];
 };
-let id = 0;
-const create$3$1 = () => {
-  return ++id;
-};
-const registerPromise = () => {
-  const id = create$3$1();
-  const {
-    resolve,
-    promise
-  } = Promise.withResolvers();
-  set$4(id, resolve);
-  return {
-    id,
-    promise
-  };
-};
-const create$2$1 = (method, params) => {
-  const {
-    id,
-    promise
-  } = registerPromise();
-  const message = {
-    jsonrpc: Two,
-    method,
-    params,
-    id
-  };
-  return {
-    message,
-    promise
-  };
-};
 class JsonRpcError extends Error {
   constructor(message) {
     super(message);
@@ -612,9 +570,9 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1$1 = (id, error) => {
+const create$1$2 = (id, error) => {
   return {
-    jsonrpc: Two,
+    jsonrpc: Two$1,
     id,
     error
   };
@@ -623,22 +581,22 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1$1(id, errorProperty);
+  return create$1$2(id, errorProperty);
 };
-const create$5 = (message, result) => {
+const create$3 = (message, result) => {
   return {
-    jsonrpc: Two,
+    jsonrpc: Two$1,
     id: message.id,
     result: result ?? null
   };
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$5(message, resultProperty);
+  return create$3(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
-    jsonrpc: Two,
+    jsonrpc: Two$1,
     id,
     error: {
       code: Custom,
@@ -725,29 +683,6 @@ const handleJsonRpcMessage = async (...args) => {
   }
   throw new JsonRpcError('unexpected message');
 };
-const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
-  const {
-    message,
-    promise
-  } = create$2$1(method, params);
-  if (useSendAndTransfer && ipc.sendAndTransfer) {
-    ipc.sendAndTransfer(message);
-  } else {
-    ipc.send(message);
-  }
-  const responseMessage = await promise;
-  return unwrapJsonRpcResult(responseMessage);
-};
-const send = (transport, method, ...params) => {
-  const message = create$4(method, params);
-  transport.send(message);
-};
-const invoke$2 = (ipc, method, ...params) => {
-  return invokeHelper(ipc, method, params, false);
-};
-const invokeAndTransfer$1 = (ipc, method, ...params) => {
-  return invokeHelper(ipc, method, params, true);
-};
 
 class CommandNotFoundError extends Error {
   constructor(command) {
@@ -770,24 +705,87 @@ const execute = (command, ...args) => {
   return fn(...args);
 };
 
+const Two = '2.0';
+const create$s = (method, params) => {
+  return {
+    jsonrpc: Two,
+    method,
+    params
+  };
+};
+const create$r = (id, method, params) => {
+  const message = {
+    id,
+    jsonrpc: Two,
+    method,
+    params
+  };
+  return message;
+};
+let id = 0;
+const create$q = () => {
+  return ++id;
+};
+
+/* eslint-disable n/no-unsupported-features/es-syntax */
+
+const registerPromise = map => {
+  const id = create$q();
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  map[id] = resolve;
+  return {
+    id,
+    promise
+  };
+};
+
+// @ts-ignore
+const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer) => {
+  const {
+    id,
+    promise
+  } = registerPromise(callbacks);
+  const message = create$r(id, method, params);
+  if (useSendAndTransfer && ipc.sendAndTransfer) {
+    ipc.sendAndTransfer(message);
+  } else {
+    ipc.send(message);
+  }
+  const responseMessage = await promise;
+  return unwrapJsonRpcResult(responseMessage);
+};
 const createRpc = ipc => {
+  const callbacks = Object.create(null);
+  ipc._resolve = (id, response) => {
+    const fn = callbacks[id];
+    if (!fn) {
+      console.warn(`callback ${id} may already be disposed`);
+      return;
+    }
+    fn(response);
+    delete callbacks[id];
+  };
   const rpc = {
+    async dispose() {
+      await ipc?.dispose();
+    },
+    invoke(method, ...params) {
+      return invokeHelper(callbacks, ipc, method, params, false);
+    },
+    invokeAndTransfer(method, ...params) {
+      return invokeHelper(callbacks, ipc, method, params, true);
+    },
     // @ts-ignore
     ipc,
     /**
      * @deprecated
      */
     send(method, ...params) {
-      send(ipc, method, ...params);
-    },
-    invoke(method, ...params) {
-      return invoke$2(ipc, method, ...params);
-    },
-    invokeAndTransfer(method, ...params) {
-      return invokeAndTransfer$1(ipc, method, ...params);
-    },
-    async dispose() {
-      await ipc?.dispose();
+      const message = create$s(method, params);
+      ipc.send(message);
     }
   };
   return rpc;
@@ -804,7 +802,7 @@ const logError = () => {
 const handleMessage = event => {
   const actualRequiresSocket = event?.target?.requiresSocket || requiresSocket;
   const actualExecute = event?.target?.execute || execute;
-  return handleJsonRpcMessage(event.target, event.data, actualExecute, resolve, preparePrettyError, logError, actualRequiresSocket);
+  return handleJsonRpcMessage(event.target, event.data, actualExecute, event.target._resolve, preparePrettyError, logError, actualRequiresSocket);
 };
 const handleIpc = ipc => {
   if ('addEventListener' in ipc) {
@@ -822,7 +820,7 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create$3 = async ({
+const create$1$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -834,33 +832,104 @@ const create$3 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$3
+  create: create$1$1
 };
-const createMockRpc = ({
-  commandMap
-}) => {
-  const invocations = [];
-  const invoke = (method, ...params) => {
-    invocations.push([method, ...params]);
-    const command = commandMap[method];
-    if (!command) {
-      throw new Error(`command ${method} not found`);
+
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const TargetName = 'event.target.name';
+const TargetValue = 'event.target.value';
+
+const Tab = 2;
+const Enter = 3;
+const KeyF = 34;
+const F4 = 60;
+
+const User$1 = 1;
+const Script$1 = 2;
+
+const CtrlCmd = 1 << 11 >>> 0;
+const Shift = 1 << 10 >>> 0;
+const Alt = 1 << 9 >>> 0;
+
+const EditorWorker = 99;
+
+const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
+const SetFocusContext = 'Viewlet.setFocusContext';
+const SetValueByName = 'Viewlet.setValueByName';
+
+const FocusFindWidget$1 = 16;
+const FocusFindWidgetCloseButton$1 = 48;
+const FocusFindWidgetNextMatchButton = 49;
+const FocusFindWidgetPreviousMatchButton = 50;
+const FocusFindWidgetReplace$1 = 43;
+const FocusFindWidgetReplaceAllButton$1 = 47;
+const FocusFindWidgetReplaceButton = 46;
+const FocusIgnoreFiles = 1012;
+const FocusSearchExcludeInput = 1008;
+const FocusSearchIncludeInput = 1007;
+const FocusSearchInput = 21;
+const FocusSearchMatchCase = 32;
+const FocusSearchOpenEditors = 1011;
+const FocusSearchPreserveCase = 36;
+const FocusSearchRegex = 33;
+const FocusSearchReplaceAll = 35;
+const FocusSearchReplaceInput = 31;
+const FocusSearchWholeWord = 34;
+const FocusToggleDetails = 1010;
+const FocusToggleReplace = 1020;
+
+const rpcs = Object.create(null);
+const set$2 = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$1 = id => {
+  return rpcs[id];
+};
+
+const create$2 = rpcId => {
+  return {
+    async dispose() {
+      const rpc = get$1(rpcId);
+      await rpc.dispose();
+    },
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    set(rpc) {
+      set$2(rpcId, rpc);
     }
-    return command(...params);
   };
-  const mockRpc = {
-    invoke,
-    invokeAndTransfer: invoke,
-    invocations
-  };
-  return mockRpc;
+};
+
+const {
+  invoke,
+  set: set$1
+} = create$2(EditorWorker);
+const getLines$1 = async editorUid => {
+  const lines = await invoke('Editor.getLines2', editorUid);
+  return lines;
+};
+const getSelections$1 = async editorUid => {
+  const selections = await invoke('Editor.getSelections2', editorUid);
+  return selections;
 };
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
 };
-const create$2 = () => {
+const create$1 = () => {
   const states = Object.create(null);
   const commandMapRef = {};
   return {
@@ -941,262 +1010,69 @@ const terminate = () => {
   globalThis.close();
 };
 
-const CheckBox = 'checkbox';
-const Group = 'group';
-const None = 'none';
-
-const Button = 1;
-const Div = 4;
-const Text = 12;
-const TextArea = 62;
-
-const ClientX = 'event.clientX';
-const ClientY = 'event.clientY';
-const TargetName = 'event.target.name';
-
-const Tab = 2;
-const Enter = 3;
-const KeyF = 34;
-const F4 = 60;
-
-const User$1 = 1;
-const Script$1 = 2;
-
-const CtrlCmd = 1 << 11 >>> 0;
-const Shift = 1 << 10 >>> 0;
-const Alt = 1 << 9 >>> 0;
+const close$1 = async state => {
+  const {
+    editorUid
+  } = state;
+  // @ts-ignore
+  await invoke('Editor.closeFind2', editorUid);
+  return state;
+};
 
-const EditorWorker$1 = 99;
+const {
+  dispose: dispose$1,
+  get,
+  getCommandIds,
+  registerCommands,
+  set,
+  wrapCommand,
+  wrapGetter
+} = create$1();
 
-const FocusSelector = 'Viewlet.focusSelector';
-const SetCss = 'Viewlet.setCss';
-const SetFocusContext = 'Viewlet.setFocusContext';
-const SetValueByName = 'Viewlet.setValueByName';
-
-const FocusFindWidget$1 = 16;
-const FocusFindWidgetCloseButton$1 = 48;
-const FocusFindWidgetNextMatchButton = 49;
-const FocusFindWidgetPreviousMatchButton = 50;
-const FocusFindWidgetReplace$1 = 43;
-const FocusFindWidgetReplaceAllButton$1 = 47;
-const FocusFindWidgetReplaceButton = 46;
-const FocusIgnoreFiles = 1012;
-const FocusSearchExcludeInput = 1008;
-const FocusSearchIncludeInput = 1007;
-const FocusSearchInput = 21;
-const FocusSearchMatchCase = 32;
-const FocusSearchOpenEditors = 1011;
-const FocusSearchPreserveCase = 36;
-const FocusSearchRegex = 33;
-const FocusSearchReplaceAll = 35;
-const FocusSearchReplaceInput = 31;
-const FocusSearchWholeWord = 34;
-const FocusToggleDetails = 1010;
-const FocusToggleReplace = 1020;
-
-const rpcs = Object.create(null);
-const set$3 = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get$1 = id => {
-  return rpcs[id];
-};
-
-const create$1 = rpcId => {
-  return {
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get$1(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get$1(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$3(rpcId, rpc);
-    },
-    async dispose() {
-      const rpc = get$1(rpcId);
-      await rpc.dispose();
-    }
-  };
-};
-
-const {
-  invoke: invoke$1,
-  invokeAndTransfer,
-  set: set$2,
-  dispose: dispose$2
-} = create$1(EditorWorker$1);
-const sendMessagePortToExtensionHostWorker = async port => {
-  const command = 'HandleMessagePort.handleMessagePort2';
-  await invokeAndTransfer(
-  // @ts-ignore
-  'SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, 0);
-};
-// TODO add tests for this
-const activateByEvent = async event => {
-  // @ts-ignore
-  await invoke$1('ActivateByEvent.activateByEvent', event);
-};
-const applyEdit = async (editorUid, changes) => {
-  // @ts-ignore
-  await invoke$1('Editor.applyEdit2', editorUid, changes);
-};
-const applyWorkspaceEdit = async (editorUid, changes) => {
-  // @ts-ignore
-  await invoke$1('Editor.applyWorkspaceEdit', editorUid, changes);
-};
-const closeWidget = async (editorUid, widgetId, widgetName, focusId) => {
-  // @ts-ignore
-  await invoke$1('Editor.closeWidget2', editorUid, widgetId, widgetName, focusId);
-};
-const getWordAt = async (uid, rowIndex, columnIndex) => {
-  // @ts-ignore
-  const word = await invoke$1('Editor.getWordAt2', uid, rowIndex, columnIndex);
-  return word;
-};
-const getLines$1 = async editorUid => {
-  const lines = await invoke$1('Editor.getLines2', editorUid);
-  return lines;
-};
-const getPositionAtCursor = async parentUid => {
-  const position = await invoke$1('Editor.getPositionAtCursor', parentUid);
-  return position;
-};
-const getOffsetAtCursor = async editorId => {
-  // @ts-ignore
-  return await invoke$1('Editor.getOffsetAtCursor', editorId);
-};
-const getSelections$1 = async editorUid => {
-  const selections = await invoke$1('Editor.getSelections2', editorUid);
-  return selections;
-};
-const getWordAtOffset2 = async editorUid => {
-  return invoke$1('Editor.getWordAtOffset2', editorUid);
-};
-const getWordBefore = async (editorUid, rowIndex, columnIndex) => {
-  return invoke$1('Editor.getWordBefore2', editorUid, rowIndex, columnIndex);
-};
-const updateDebugInfo = async info => {
-  await invoke$1('Editor.updateDebugInfo', info);
-};
-const getUri = async editorUid => {
-  // @ts-ignore
-  return invoke$1('Editor.getUri', editorUid);
-};
-const getLanguageId = async editorUid => {
-  // @ts-ignore
-  return invoke$1('Editor.getLanguageId', editorUid);
-};
-const getProblems = async () => {
-  // @ts-ignore
-  return invoke$1('Editor.getProblems');
-};
-const registerMockRpc = commandMap => {
-  const mockRpc = createMockRpc({
-    commandMap
-  });
-  set$2(mockRpc);
-  return mockRpc;
-};
-
-const EditorWorker = {
-  __proto__: null,
-  activateByEvent,
-  applyEdit,
-  applyWorkspaceEdit,
-  closeWidget,
-  dispose: dispose$2,
-  getLanguageId,
-  getLines: getLines$1,
-  getOffsetAtCursor,
-  getPositionAtCursor,
-  getProblems,
-  getSelections: getSelections$1,
-  getUri,
-  getWordAt,
-  getWordAtOffset2,
-  getWordBefore,
-  invoke: invoke$1,
-  invokeAndTransfer,
-  registerMockRpc,
-  sendMessagePortToExtensionHostWorker,
-  set: set$2,
-  updateDebugInfo
-};
-
-const {
-  invoke,
-  set: set$1} = EditorWorker;
-
-const close$1 = async state => {
-  const {
-    editorUid
-  } = state;
-  // @ts-ignore
-  await invoke('Editor.closeFind2', editorUid);
-  return state;
-};
-
-const {
-  get,
-  set,
-  wrapCommand,
-  dispose: dispose$1,
-  getCommandIds,
-  registerCommands,
-  wrapGetter
-} = create$2();
-
-const User = 1;
-const Script = 2;
-const Unknown = 0;
+const User = 1;
+const Script = 2;
+const Unknown = 0;
 
 const create = (uid, x, y, width, height, parentUid) => {
   const state = {
-    uid,
-    value: '',
     ariaAnnouncement: '',
-    matches: new Uint32Array(),
-    matchIndex: -1,
-    matchCount: 0,
-    replaceExpanded: false,
-    useRegularExpression: false,
-    matchCase: false,
-    matchWholeWord: false,
-    replacement: '',
+    editorHeight: height,
     editorUid: parentUid,
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    focused: false,
-    focusSource: Unknown,
-    focus: 0,
-    version: 0,
-    lines: [],
-    selections: [],
+    editorWidth: width,
     editorX: x,
     editorY: y,
-    editorWidth: width,
-    editorHeight: height,
-    inputSource: 0,
-    preserveCase: false,
-    resizerPointerDown: false,
-    minWidth: 400,
+    focus: 0,
+    focused: false,
+    focusSource: Unknown,
+    height: 0,
     history: [],
+    inputBorderWidth: 1,
     inputErrorMessage: '',
-    searchInputHeight: 15,
+    inputGap: 3,
     inputLineHeight: 15,
-    inputPaddingTop: 4,
     inputPaddingBottom: 4,
-    inputBorderWidth: 1,
-    inputGap: 3
+    inputPaddingTop: 4,
+    inputSource: 0,
+    lines: [],
+    matchCase: false,
+    matchCount: 0,
+    matches: new Uint32Array(),
+    matchIndex: -1,
+    matchWholeWord: false,
+    minWidth: 400,
+    preserveCase: false,
+    replaceExpanded: false,
+    replacement: '',
+    resizerPointerDown: false,
+    searchInputHeight: 15,
+    selections: [],
+    uid,
+    useRegularExpression: false,
+    value: '',
+    version: 0,
+    width: 0,
+    x: 0,
+    y: 0
   };
   set(uid, state, state);
   return state;
@@ -1264,8 +1140,8 @@ const diff = (oldState, newState) => {
 
 const diff2 = uid => {
   const {
-    oldState,
-    newState
+    newState,
+    oldState
   } = get(uid);
   const diffResult = diff(oldState, newState);
   return diffResult;
@@ -1275,9 +1151,11 @@ const dispose = uid => {
   return dispose$1(uid);
 };
 
+const FindWidget$1 = 16;
 const FocusFindWidgetCloseButton = 48;
 const FocusFindWidgetReplace = 43;
 const FocusFindWidgetReplaceAllButton = 47;
+const FocusFindWidgetToggleReplace = 42;
 
 const setFindWidgetFocus = (state, focusKey) => {
   if (state.focus === focusKey) {
@@ -1301,18 +1179,18 @@ const setSelections = async (editorUid, selections) => {
 
 const focusIndex = async (state, index) => {
   const {
-    matchIndex,
-    matches,
     editorUid,
-    value
+    matches,
+    matchIndex
   } = state;
   if (index === matchIndex) {
     return state;
   }
   // // TODO find next match and highlight it
-  const matchRowIndex = matches[index * 2];
-  const matchColumnIndex = matches[index * 2 + 1];
-  const newSelections = new Uint32Array([matchRowIndex, matchColumnIndex, matchRowIndex, matchColumnIndex + value.length]);
+  const matchRowIndex = matches[index * 3];
+  const matchColumnIndex = matches[index * 3 + 1];
+  const matchLength = matches[index * 3 + 2];
+  const newSelections = new Uint32Array([matchRowIndex, matchColumnIndex, matchRowIndex, matchColumnIndex + matchLength]);
   await setSelections(editorUid, newSelections);
   return {
     ...state,
@@ -1331,8 +1209,8 @@ const focusLast = state => {
 };
 const focusNext = state => {
   const {
-    matchIndex,
-    matchCount
+    matchCount,
+    matchIndex
   } = state;
   if (matchIndex === matchCount - 1) {
     return focusFirst(state);
@@ -1373,8 +1251,8 @@ const escapeRegExpCharacters = value => {
 const buildRegex = (searchString, options) => {
   const {
     matchCase,
-    useRegularExpression,
-    matchWholeWord
+    matchWholeWord,
+    useRegularExpression
   } = options;
   const flags = matchCase ? 'g' : 'gi';
   const pattern = useRegularExpression ? searchString : escapeRegExpCharacters(searchString);
@@ -1382,13 +1260,13 @@ const buildRegex = (searchString, options) => {
   try {
     const regex = new RegExp(wrapped, flags);
     return {
-      regex,
-      error: ''
+      error: '',
+      regex
     };
   } catch (error) {
     return {
-      regex: new RegExp(''),
-      error: `${error}`
+      error: `${error}`,
+      regex: new RegExp('')
     };
   }
 };
@@ -1409,7 +1287,7 @@ const findRegexMatches = (lines, regex) => {
       if (!lastMatch) {
         break;
       }
-      matches.push(i, lastMatch.index);
+      matches.push(i, lastMatch.index, lastMatch[0].length);
     } while (true);
   }
   return new Uint32Array(matches);
@@ -1418,29 +1296,29 @@ const findRegexMatches = (lines, regex) => {
 const findMatches = (lines, searchString, options) => {
   if (searchString.length === 0) {
     return {
-      matches: new Uint32Array([]),
-      error: ''
+      error: '',
+      matches: new Uint32Array([])
     };
   }
   const {
-    regex,
-    error
+    error,
+    regex
   } = buildRegex(searchString, options);
   if (error) {
     return {
-      matches: new Uint32Array([]),
-      error
+      error,
+      matches: new Uint32Array([])
     };
   }
   const matches = findRegexMatches(lines, regex);
   return {
-    matches,
-    error: ''
+    error: '',
+    matches
   };
 };
 
 const getMatchCount = matches => {
-  return matches.length / 2;
+  return matches.length / 3;
 };
 
 const measureTextHeight = (value, lineHeight) => {
@@ -1461,57 +1339,57 @@ const measureInputHeight = (value, inputLineHeight, inputPaddingBottom, inputPad
   // TODO use variables for margin
   const height = inputHeight + replaceInputHeight + 5 + actualGap;
   return {
-    inputHeight,
     height,
+    inputHeight,
     replaceInputHeight
   };
 };
 
 const refresh$1 = (state, value, inputSource) => {
   const {
+    inputBorderWidth,
+    inputGap,
+    inputLineHeight,
+    inputPaddingBottom,
+    inputPaddingTop,
     lines,
     matchCase,
-    useRegularExpression,
     matchWholeWord,
-    inputLineHeight,
-    inputPaddingTop,
-    inputPaddingBottom,
     replaceExpanded,
-    inputBorderWidth,
-    inputGap
+    useRegularExpression
   } = state;
   const options = {
     matchCase,
-    useRegularExpression,
-    matchWholeWord
+    matchWholeWord,
+    useRegularExpression
   };
   const {
-    matches,
-    error
+    error,
+    matches
   } = findMatches(lines, value, options);
   const {
-    inputHeight,
-    height
+    height,
+    inputHeight
   } = measureInputHeight(value, inputLineHeight, inputPaddingBottom, inputPaddingTop, inputBorderWidth, inputGap, replaceExpanded);
   if (error) {
     return {
       ...state,
+      height,
       inputErrorMessage: error,
-      searchInputHeight: inputHeight,
-      height
+      searchInputHeight: inputHeight
     };
   }
   const matchCount = getMatchCount(matches);
   return {
     ...state,
+    height,
     inputErrorMessage: error,
-    searchInputHeight: inputHeight,
     inputSource,
     matchCount,
     matches,
     matchIndex: 0,
-    value,
-    height
+    searchInputHeight: inputHeight,
+    value
   };
 };
 
@@ -1581,6 +1459,47 @@ const applyEdits = async (editorId, edits) => {
   await invoke('Editor.applyDocumentEdits', editorId, edits);
 };
 
+/**
+ * Apply regex replacement with back-reference substitution ($1, $2, etc.)
+ */
+const applyRegexReplacement = (originalText, regex, replacement) => {
+  // Create a non-global version of the regex to get capture groups
+  const flags = regex.flags.replace('g', '');
+  const nonGlobalRegex = new RegExp(regex.source, flags);
+  const match = nonGlobalRegex.exec(originalText);
+  if (!match) {
+    return replacement;
+  }
+
+  // Replace $n back-references with captured groups
+  let result = replacement;
+
+  // Handle $& (entire match)
+  result = result.replaceAll('$&', match[0]);
+
+  // Handle $` (text before match) - in this context it's empty since we're matching the whole text
+  result = result.replaceAll('$`', '');
+
+  // Handle $' (text after match) - in this context it's empty since we're matching the whole text
+  result = result.replaceAll("$'", '');
+
+  // Handle $$ (literal $)
+  result = result.replaceAll('$$', '\u0000DOLLAR\u0000');
+
+  // Handle $n and $nn (numbered capture groups)
+  result = result.replaceAll(/\$(\d{1,2})/g, (_match, groupNumber) => {
+    const index = Number.parseInt(groupNumber, 10);
+    if (index < match.length) {
+      return match[index] ?? '';
+    }
+    return `$${groupNumber}`;
+  });
+
+  // Restore literal $
+  result = result.replaceAll('\u0000DOLLAR\u0000', '$');
+  return result;
+};
+
 /**
  * Preserves the case pattern of the original text when replacing.
  * Supports uppercase, lowercase, PascalCase, and camelCase patterns.
@@ -1620,24 +1539,47 @@ const preserveCase$1 = (originalText, replacementText) => {
   return replacementText;
 };
 
-const getEdits = (matches, value, replacement, startIndex, replaceAll, lines, preserveCaseOption = false) => {
+const getEdits = (matches, value, replacement, startIndex, replaceAll, lines, preserveCaseOption = false, options) => {
   if (value.length === 0 || matches.length === 0) {
     return [];
   }
   const edits = [];
-  const totalMatches = Math.floor(matches.length / 2);
+  const totalMatches = Math.floor(matches.length / 3);
   const fromIndex = replaceAll ? 0 : Math.max(0, startIndex);
   const toIndex = replaceAll ? totalMatches : Math.min(totalMatches, fromIndex + 1);
+
+  // Build regex once if using regular expressions
+  let regex;
+  if (options?.useRegularExpression) {
+    const {
+      error,
+      regex: builtRegex
+    } = buildRegex(value, options);
+    if (!error) {
+      regex = builtRegex;
+    }
+  }
   for (let i = fromIndex; i < toIndex; i++) {
-    const rowIndex = matches[i * 2];
-    const startColumnIndex = matches[i * 2 + 1];
-    const endColumnIndex = startColumnIndex + value.length;
+    const rowIndex = matches[i * 3];
+    const startColumnIndex = matches[i * 3 + 1];
+    const matchLength = matches[i * 3 + 2];
+    const endColumnIndex = startColumnIndex + matchLength;
 
     // Get the original text that was matched
     const originalText = lines[rowIndex].slice(startColumnIndex, endColumnIndex);
 
+    // Apply regex replacement with back-references if enabled
+    let finalReplacement;
+    if (options?.useRegularExpression && regex) {
+      finalReplacement = applyRegexReplacement(originalText, regex, replacement);
+    } else {
+      finalReplacement = replacement;
+    }
+
     // Apply case preservation if enabled
-    const finalReplacement = preserveCaseOption ? preserveCase$1(originalText, replacement) : replacement;
+    if (preserveCaseOption) {
+      finalReplacement = preserveCase$1(originalText, finalReplacement);
+    }
 
     // Convert row/column positions to character offsets
     let startOffset = 0;
@@ -1651,10 +1593,10 @@ const getEdits = (matches, value, replacement, startIndex, replaceAll, lines, pr
     }
     endOffset += endColumnIndex;
     edits.push({
-      startOffset,
       endOffset,
       inserted: finalReplacement,
-      origin: 'find-widget.replace'
+      origin: 'find-widget.replace',
+      startOffset
     });
   }
   return edits;
@@ -1662,18 +1604,24 @@ const getEdits = (matches, value, replacement, startIndex, replaceAll, lines, pr
 
 const replace$1 = async state => {
   const {
-    matches,
-    value,
-    replacement,
-    matchIndex,
     editorUid,
     lines,
-    preserveCase
+    matchCase,
+    matches,
+    matchIndex,
+    matchWholeWord,
+    preserveCase,
+    replacement,
+    useRegularExpression,
+    value
   } = state;
-  const edits = getEdits(matches, value, replacement, matchIndex, false, lines, preserveCase);
+  const options = {
+    matchCase,
+    matchWholeWord,
+    useRegularExpression
+  };
+  const edits = getEdits(matches, value, replacement, matchIndex, false, lines, preserveCase, options);
   await applyEdits(editorUid, edits);
-  // TODO ask editor worker to apply edit
-  // TODO ask editor worker for new lines?
   return {
     ...state
   };
@@ -1681,14 +1629,22 @@ const replace$1 = async state => {
 
 const replaceAll$1 = state => {
   const {
-    matches,
-    value,
-    replacement,
     editorUid,
     lines,
-    preserveCase
+    matchCase,
+    matches,
+    matchWholeWord,
+    preserveCase,
+    replacement,
+    useRegularExpression,
+    value
   } = state;
-  const edits = getEdits(matches, value, replacement, 0, true, lines, preserveCase);
+  const options = {
+    matchCase,
+    matchWholeWord,
+    useRegularExpression
+  };
+  const edits = getEdits(matches, value, replacement, 0, true, lines, preserveCase, options);
   void applyEdits(editorUid, edits);
   return {
     ...state
@@ -1697,18 +1653,18 @@ const replaceAll$1 = state => {
 
 const getClickHandler = name => {
   switch (name) {
-    case Replace$2:
-      return replace$1;
-    case ReplaceAll$2:
-      return replaceAll$1;
     case MatchCase$2:
       return toggleMatchCase;
     case MatchWholeWord$2:
       return toggleMatchWholeWord;
-    case UseRegularExpression$2:
-      return toggleUseRegularExpression;
     case PreserveCase$1:
       return togglePreserveCase;
+    case Replace$2:
+      return replace$1;
+    case ReplaceAll$2:
+      return replaceAll$1;
+    case UseRegularExpression$2:
+      return toggleUseRegularExpression;
     default:
       throw new Error(`unexpected click`);
   }
@@ -1724,7 +1680,10 @@ const handleClickClose = state => {
 };
 
 const handleFindWidgetFocus = (state, focusKey) => {
-  if (state.focus === focusKey) {
+  const {
+    focus
+  } = state;
+  if (!focusKey || focus === focusKey) {
     return state;
   }
   return {
@@ -1734,6 +1693,11 @@ const handleFindWidgetFocus = (state, focusKey) => {
   };
 };
 
+const handleFindFocus = state => {
+  return handleFindWidgetFocus(state, FindWidget$1);
+};
+
+// TODO maybe use one handleFocus function with a name parameter
 const handleReplaceFocus = state => {
   return handleFindWidgetFocus(state, FocusFindWidgetReplace);
 };
@@ -1755,10 +1719,10 @@ const getNewCoordinates = (oldWidth, oldX, eventX, minWidth) => {
 };
 const handleResizerPointerMove = async (state, eventX, eventY) => {
   const {
-    width,
-    x,
+    minWidth,
     resizerPointerDown,
-    minWidth
+    width,
+    x
   } = state;
   if (!resizerPointerDown) {
     return state;
@@ -1769,8 +1733,8 @@ const handleResizerPointerMove = async (state, eventX, eventY) => {
   } = getNewCoordinates(width, x, eventX, minWidth);
   return {
     ...state,
-    x: newX,
-    width: newWidth
+    width: newWidth,
+    x: newX
   };
 };
 
@@ -1781,15 +1745,19 @@ const handleResizerPointerUp = async (state, eventX, eventY) => {
   };
 };
 
+const handleToggleReplaceFocus = state => {
+  return handleFindWidgetFocus(state, FocusFindWidgetToggleReplace);
+};
+
 const toggleReplace$1 = state => {
   const {
-    replaceExpanded,
-    value,
+    inputBorderWidth,
+    inputGap,
     inputLineHeight,
     inputPaddingBottom,
     inputPaddingTop,
-    inputBorderWidth,
-    inputGap
+    replaceExpanded,
+    value
   } = state;
   const newExpanded = !replaceExpanded;
   const {
@@ -1797,8 +1765,8 @@ const toggleReplace$1 = state => {
   } = measureInputHeight(value, inputLineHeight, inputPaddingBottom, inputPaddingTop, inputBorderWidth, inputGap, newExpanded);
   return {
     ...state,
-    replaceExpanded: newExpanded,
-    height
+    height,
+    replaceExpanded: newExpanded
   };
 };
 
@@ -1812,8 +1780,10 @@ const focusElement = (state, whenExpression) => {
 
 const getNextFocus = (focus, replaceExpanded) => {
   switch (focus) {
-    case FocusToggleReplace:
-      return FocusSearchInput;
+    case FocusSearchExcludeInput:
+      return FocusIgnoreFiles;
+    case FocusSearchIncludeInput:
+      return FocusSearchOpenEditors;
     case FocusSearchInput:
       if (replaceExpanded) {
         return FocusSearchReplaceInput;
@@ -1821,27 +1791,25 @@ const getNextFocus = (focus, replaceExpanded) => {
       return FocusSearchMatchCase;
     case FocusSearchMatchCase:
       return FocusSearchWholeWord;
-    case FocusSearchWholeWord:
-      return FocusSearchRegex;
+    case FocusSearchOpenEditors:
+      return FocusSearchExcludeInput;
+    case FocusSearchPreserveCase:
+      return FocusSearchReplaceAll;
     case FocusSearchRegex:
       if (replaceExpanded) {
         return FocusSearchPreserveCase;
       }
       return FocusFindWidgetCloseButton$1;
-    case FocusSearchReplaceInput:
-      return FocusSearchMatchCase;
-    case FocusSearchPreserveCase:
-      return FocusSearchReplaceAll;
     case FocusSearchReplaceAll:
       return FocusToggleDetails;
-    case FocusSearchIncludeInput:
-      return FocusSearchOpenEditors;
-    case FocusSearchOpenEditors:
-      return FocusSearchExcludeInput;
-    case FocusSearchExcludeInput:
-      return FocusIgnoreFiles;
+    case FocusSearchReplaceInput:
+      return FocusSearchMatchCase;
+    case FocusSearchWholeWord:
+      return FocusSearchRegex;
     case FocusToggleDetails:
       return FocusSearchIncludeInput;
+    case FocusToggleReplace:
+      return FocusSearchInput;
     default:
       return focus;
   }
@@ -1858,6 +1826,14 @@ const focusNextElement = state => {
 
 const getPreviousFocus = (focus, replaceExpanded) => {
   switch (focus) {
+    case FocusFindWidgetCloseButton$1:
+      return FocusSearchRegex;
+    case FocusIgnoreFiles:
+      return FocusSearchExcludeInput;
+    case FocusSearchExcludeInput:
+      return FocusSearchOpenEditors;
+    case FocusSearchIncludeInput:
+      return FocusToggleDetails;
     case FocusSearchInput:
       return FocusToggleReplace;
     case FocusSearchMatchCase:
@@ -1865,31 +1841,23 @@ const getPreviousFocus = (focus, replaceExpanded) => {
         return FocusSearchReplaceInput;
       }
       return FocusSearchInput;
-    case FocusSearchWholeWord:
-      return FocusSearchMatchCase;
-    case FocusSearchRegex:
-      return FocusSearchWholeWord;
+    case FocusSearchOpenEditors:
+      return FocusSearchIncludeInput;
     case FocusSearchPreserveCase:
       return FocusSearchRegex;
-    case FocusSearchReplaceInput:
-      return FocusSearchInput;
+    case FocusSearchRegex:
+      return FocusSearchWholeWord;
     case FocusSearchReplaceAll:
       return FocusSearchPreserveCase;
+    case FocusSearchReplaceInput:
+      return FocusSearchInput;
+    case FocusSearchWholeWord:
+      return FocusSearchMatchCase;
     case FocusToggleDetails:
       if (replaceExpanded) {
         return FocusSearchReplaceAll;
       }
       return FocusSearchRegex;
-    case FocusSearchOpenEditors:
-      return FocusSearchIncludeInput;
-    case FocusSearchExcludeInput:
-      return FocusSearchOpenEditors;
-    case FocusIgnoreFiles:
-      return FocusSearchExcludeInput;
-    case FocusSearchIncludeInput:
-      return FocusToggleDetails;
-    case FocusFindWidgetCloseButton$1:
-      return FocusSearchRegex;
     default:
       return focus;
   }
@@ -1906,76 +1874,80 @@ const focusPreviousElement = state => {
 
 const getKeyBindings = () => {
   return [{
-    key: Enter,
     command: 'FindWidget.focusNext',
+    key: Enter,
     when: FocusFindWidget$1
   }, {
-    key: CtrlCmd | KeyF,
     command: 'FindWidget.preventDefaultBrowserFind',
+    key: CtrlCmd | KeyF,
     when: FocusFindWidget$1
   }, {
-    key: Shift | F4,
     command: 'FindWidget.focusPrevious',
+    key: Shift | F4,
     when: FocusFindWidget$1
   }, {
-    key: F4,
     command: 'FindWidget.focusNext',
+    key: F4,
     when: FocusFindWidget$1
   }, {
-    key: Shift | Tab,
     command: 'FindWidget.focusToggleReplace',
+    key: Shift | Tab,
     when: FocusFindWidget$1
   }, {
-    key: Tab,
     command: 'FindWidget.focusReplace',
+    key: Tab,
     when: FocusFindWidget$1
   }, {
-    key: Tab,
     command: 'FindWidget.focusPreviousMatchButton',
+    key: Tab,
+    when: FocusFindWidgetReplace$1
+  }, {
+    command: 'FindWidget.replace',
+    key: Enter,
     when: FocusFindWidgetReplace$1
   }, {
-    key: Alt | CtrlCmd | Enter,
     command: 'FindWidget.replaceAll',
+    key: Alt | CtrlCmd | Enter,
     when: FocusFindWidgetReplace$1
   }, {
-    key: Tab,
     command: 'FindWidget.focusNextMatchButton',
+    key: Tab,
     when: FocusFindWidgetPreviousMatchButton
   }, {
-    key: Shift | Tab,
     command: 'FindWidget.focusReplace',
+    key: Shift | Tab,
     when: FocusFindWidgetPreviousMatchButton
   }, {
-    key: Shift | Tab,
     command: 'FindWidget.focusPreviousMatchButton',
+    key: Shift | Tab,
     when: FocusFindWidgetNextMatchButton
   }, {
-    key: Tab,
     command: 'FindWidget.focusCloseButton',
+    key: Tab,
     when: FocusFindWidgetNextMatchButton
   }, {
-    key: Shift | Tab,
     command: 'FindWidget.focusNextMatchButton',
+    key: Shift | Tab,
     when: FocusFindWidgetCloseButton$1
   }, {
-    key: Tab,
     command: 'FindWidget.focusReplaceButton',
+    key: Tab,
     when: FocusFindWidgetCloseButton$1
   }, {
-    key: Shift | Tab,
     command: 'FindWidget.focusFind',
+    key: Shift | Tab,
     when: FocusFindWidgetReplace$1
   }, {
-    key: Tab,
     command: 'FindWidget.focusReplaceAllButton',
+    key: Tab,
     when: FocusFindWidgetReplaceButton
   }, {
-    key: Shift | Tab,
     command: 'FindWidget.focusCloseButton',
+    key: Shift | Tab,
     when: FocusFindWidgetReplaceButton
   }, {
-    key: Shift | Tab,
     command: 'FindWidget.focusReplaceButton',
+    key: Shift | Tab,
     when: FocusFindWidgetReplaceAllButton$1
   }];
 };
@@ -1987,8 +1959,8 @@ const handleInput = (state, value, inputSource = User$1) => {
 const handleReplaceInput = (state, value, inputSource = User$1) => {
   return {
     ...state,
-    replacement: value,
-    inputSource
+    inputSource,
+    replacement: value
   };
 };
 
@@ -2014,21 +1986,22 @@ const getFindWidgetPosition = (editorX, editorY, editorWidth) => {
   const x = editorX + editorWidth - width - paddingRight;
   const y = editorY + paddingTop;
   return {
-    y,
-    x,
+    height,
     width,
-    height
+    x,
+    y
   };
 };
 
 const getLines = async editorUid => {
-  // @ts-ignore
-  const lines = await invoke('Editor.getLines2', editorUid);
-  // @ts-ignore
+  const lines = await getLines$1(editorUid);
   return lines;
 };
 
 const getSelectedText = (lines, selections) => {
+  if (selections.length === 0) {
+    return '';
+  }
   const startRowIndex = selections[0];
   const startColumnIndex = selections[1];
   const endColumnIndex = selections[3];
@@ -2038,9 +2011,7 @@ const getSelectedText = (lines, selections) => {
 };
 
 const getSelections = async editorUid => {
-  // @ts-ignore
-  const selections = await invoke('Editor.getSelections2', editorUid);
-  // @ts-ignore
+  const selections = await getSelections$1(editorUid);
   return selections;
 };
 
@@ -2060,8 +2031,8 @@ const restoreState = savedState => {
   const value = getSavedValue(savedState);
   const replacement = getSavedReplacement(savedState);
   return {
-    value,
-    replacement
+    replacement,
+    value
   };
 };
 
@@ -2071,12 +2042,12 @@ const loadContent = async (state, savedState) => {
     editorWidth,
     editorX,
     editorY,
+    inputBorderWidth,
+    inputGap,
     inputLineHeight,
     inputPaddingBottom,
     inputPaddingTop,
-    replaceExpanded,
-    inputBorderWidth,
-    inputGap
+    replaceExpanded
   } = state;
   const {
     replacement,
@@ -2085,9 +2056,9 @@ const loadContent = async (state, savedState) => {
   const lines = await getLines(editorUid);
   const selections = await getSelections(editorUid);
   const {
+    width,
     x,
-    y,
-    width
+    y
   } = getFindWidgetPosition(editorX, editorY, editorWidth);
   if (lines.length === 0) {
     return state;
@@ -2096,8 +2067,8 @@ const loadContent = async (state, savedState) => {
   const matches = findMatchesCaseInsensitive(lines, actualValue);
   const matchCount = getMatchCount(matches);
   const {
-    inputHeight,
-    height
+    height,
+    inputHeight
   } = measureInputHeight(value, inputLineHeight, inputPaddingBottom, inputPaddingTop, inputBorderWidth, inputGap, replaceExpanded);
   return {
     ...state,
@@ -2131,33 +2102,33 @@ const SetEventListeners = 'Viewlet.registerEventListeners';
 
 const renderBounds = (oldState, newState) => {
   const {
-    x,
-    y,
-    width,
     height,
-    uid
+    uid,
+    width,
+    x,
+    y
   } = newState;
   return [SetBounds, uid, x, y, width, height];
 };
 
-const HandleBlur = 'handleBlur';
-const HandleClickButton = 'handleClickButton';
-const HandleClickClose = 'handleClickClose';
-const HandleClickNextMatch = 'handleClickNextMatch';
-const HandleClickPreviousMatch = 'handleClickPreviousMatch';
-const HandleClickReplace = 'handleClickReplace';
-const HandleClickReplaceAll = 'handleClickReplaceAll';
-const HandleClickToggleReplace = 'handleClickToggleReplace';
-const HandleFocus = 'handleFocus';
-const HandleFocusNext = 'handleFocusNext';
-const HandleFocusPrevious = 'handleFocusPrevious';
-const HandleInput = 'handleInput';
-const HandleReplaceFocus = 'handleReplaceFocus';
-const HandleReplaceInput = 'handleReplaceInput';
-const HandleResizerPointerDown = 'handleResizerPointerDown';
-const HandleResizerPointerMove = 'handleResizerPointerMove';
-const HandleResizerPointerUp = 'handleResizerPointerUp';
-const HandleToggleReplaceFocus = 'handleToggleReplaceFocus';
+const HandleBlur = 1;
+const HandleClickButton = 2;
+const HandleClickClose = 3;
+const HandleClickNextMatch = 4;
+const HandleClickPreviousMatch = 5;
+const HandleClickReplace = 6;
+const HandleClickReplaceAll = 7;
+const HandleClickToggleReplace = 8;
+const HandleFocus = 9;
+const HandleFocusNext = 10;
+const HandleFocusPrevious = 11;
+const HandleInput = 12;
+const HandleReplaceFocus = 13;
+const HandleReplaceInput = 14;
+const HandleResizerPointerDown = 15;
+const HandleResizerPointerMove = 16;
+const HandleResizerPointerUp = 17;
+const HandleToggleReplaceFocus = 19;
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -2241,60 +2212,60 @@ const getFindWidgetButtons = (findButtonsEnabled, replaceButtonsEnabled, matchCa
   const findFieldButtons = [{
     checked: matchCase$1,
     icon: MatchCase,
-    title: matchCase(),
     name: MatchCase$2,
-    onClick: HandleClickButton
+    onClick: HandleClickButton,
+    title: matchCase()
   }, {
     checked: matchWholeWord$1,
     icon: MatchWholeWord,
-    title: matchWholeWord(),
     name: MatchWholeWord$2,
-    onClick: HandleClickButton
+    onClick: HandleClickButton,
+    title: matchWholeWord()
   }, {
     checked: useRegularExpression$1,
     icon: UseRegularExpression,
-    title: useRegularExpression(),
     name: UseRegularExpression$2,
-    onClick: HandleClickButton
+    onClick: HandleClickButton,
+    title: useRegularExpression()
   }];
   const replaceFieldButtons = [{
     checked: preserveCase$1,
     icon: 'PreserveCase',
-    title: preserveCase(),
     name: PreserveCase$1,
-    onClick: HandleClickButton
+    onClick: HandleClickButton,
+    title: preserveCase()
   }];
   const findButtons = [{
-    label: previousMatch(),
-    icon: ArrowUp,
     disabled: !findButtonsEnabled,
-    onClick: HandleClickPreviousMatch,
-    name: FocusPrevious
+    icon: ArrowUp,
+    label: previousMatch(),
+    name: FocusPrevious,
+    onClick: HandleClickPreviousMatch
   }, {
-    label: nextMatch(),
-    icon: ArrowDown,
     disabled: !findButtonsEnabled,
-    onClick: HandleClickNextMatch,
-    name: FocusNext
+    icon: ArrowDown,
+    label: nextMatch(),
+    name: FocusNext,
+    onClick: HandleClickNextMatch
   }, {
-    label: close(),
-    icon: Close,
     disabled: false,
-    onClick: HandleClickClose,
-    name: Close$2
+    icon: Close,
+    label: close(),
+    name: Close$2,
+    onClick: HandleClickClose
   }];
   const replaceButtons = [{
-    label: replace(),
-    icon: Replace,
     disabled: !replaceButtonsEnabled,
-    onClick: HandleClickButton,
-    name: Replace$2
+    icon: Replace,
+    label: replace(),
+    name: Replace$2,
+    onClick: HandleClickButton
   }, {
-    label: replaceAll(),
-    icon: ReplaceAll,
     disabled: !replaceButtonsEnabled,
-    onClick: HandleClickButton,
-    name: ReplaceAll$2
+    icon: ReplaceAll,
+    label: replaceAll(),
+    name: ReplaceAll$2,
+    onClick: HandleClickButton
   }];
   return {
     findButtons,
@@ -2313,6 +2284,15 @@ const getFindWidgetButtonsEnabled = (matchCount, value) => {
   };
 };
 
+const CheckBox = 'checkbox';
+const Group = 'group';
+const None = 'none';
+
+const Button = 1;
+const Div = 4;
+const Text = 12;
+const TextArea = 62;
+
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
@@ -2353,18 +2333,18 @@ const ViewletFindWidget = 'ViewletFindWidget';
 
 const getIconVirtualDom = (icon, type = Div) => {
   return {
-    type,
+    childCount: 0,
     className: `${MaskIcon} MaskIcon${icon}`,
     role: None,
-    childCount: 0
+    type
   };
 };
 
 const getIconButtonVirtualDom = iconButton => {
   const {
-    label,
-    icon,
     disabled,
+    icon,
+    label,
     name,
     onClick
   } = iconButton;
@@ -2373,14 +2353,14 @@ const getIconButtonVirtualDom = iconButton => {
     className += ' ' + IconButtonDisabled;
   }
   return [{
-    type: Button,
-    className,
-    title: label,
     ariaLabel: label,
     childCount: 1,
+    className,
     disabled: disabled ? true : undefined,
+    name,
     onClick,
-    name
+    title: label,
+    type: Button
   }, getIconVirtualDom(icon)];
 };
 
@@ -2394,9 +2374,9 @@ const getFindMatchCountClassName = (matchCount, hasValue) => {
 
 const getMatchCountVirtualDom = (matchCountText, matchCount, hasValue) => {
   return [{
-    type: Div,
+    childCount: 1,
     className: getFindMatchCountClassName(matchCount, hasValue),
-    childCount: 1
+    type: Div
   }, text(matchCountText)];
 };
 
@@ -2404,50 +2384,50 @@ const checkedClassName = mergeClassNames(SearchFieldButton, SearchFieldButtonChe
 const unCheckedClassName = SearchFieldButton;
 const getSearchFieldButtonVirtualDom = button => {
   const {
-    icon,
     checked,
-    title,
+    icon,
     name,
-    onClick
+    onClick,
+    title
   } = button;
   return [{
-    type: Button,
     ariaChecked: checked,
+    childCount: 1,
     className: checked ? checkedClassName : unCheckedClassName,
     name,
+    onClick,
     role: CheckBox,
     tabIndex: 0,
     title,
-    childCount: 1,
-    onClick
+    type: Button
   }, {
-    type: Div,
+    childCount: 0,
     className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
-    childCount: 0
+    type: Div
   }];
 };
 
 const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus, extraClassName) => {
   const dom = [{
-    type: Div,
+    childCount: 2,
     className: mergeClassNames(SearchField, extraClassName),
     role: None,
-    childCount: 2
+    type: Div
   }, {
-    type: TextArea,
-    className: MultilineInputBox,
-    spellcheck: false,
     autocapitalize: 'off',
     autocorrect: 'off',
-    placeholder,
+    childCount: 0,
+    className: MultilineInputBox,
     name,
-    onInput,
     onFocus,
-    childCount: 0
+    onInput,
+    placeholder,
+    spellcheck: false,
+    type: TextArea
   }, {
-    type: Div,
+    childCount: insideButtons.length,
     className: SearchFieldButtons,
-    childCount: insideButtons.length
+    type: Div
   }, ...insideButtons.flatMap(getSearchFieldButtonVirtualDom)];
   if (outsideButtons.length > 0) {
     throw new Error('outsideButtons are deprecated');
@@ -2467,13 +2447,13 @@ const getExtraClassName = (hasError, inputFocused) => {
 const getFindWidgetFindVirtualDom = (matchCountText, buttons, fieldButtons, matchCount, hasValue, hasError, inputFocused) => {
   const extraClassName = getExtraClassName(hasError, inputFocused);
   return [{
-    type: Div,
+    childCount: 2,
     className: FindWidgetFind,
-    childCount: 2
+    type: Div
   }, ...getSearchFieldVirtualDom(SearchValue, find(), HandleInput, fieldButtons, [], HandleFocus, extraClassName), {
-    type: Div,
+    childCount: 1 + buttons.length,
     className: 'FindWidgetActions',
-    childCount: 1 + buttons.length
+    type: Div
   }, ...getMatchCountVirtualDom(matchCountText, matchCount, hasValue), ...buttons.flatMap(getIconButtonVirtualDom)];
 };
 
@@ -2483,56 +2463,56 @@ const getFindWidgetReplaceVirtualDom = (replaceExpanded, replaceButtons, replace
   }
   const extraClassName = replaceInputFocused ? SearchFieldFocused : '';
   return [{
-    type: Div,
+    childCount: 1 + replaceButtons.length,
     className: FindWidgetReplace,
-    childCount: 1 + replaceButtons.length
+    type: Div
   }, ...getSearchFieldVirtualDom(ReplaceValue, replace(), HandleReplaceInput, [], [], HandleReplaceFocus, extraClassName), ...replaceButtons.flatMap(getIconButtonVirtualDom)];
 };
 
 const getResizerVirtualDom = () => {
   return [{
-    type: Div,
-    className: Resizer,
     childCount: 1,
-    onPointerDown: HandleResizerPointerDown
+    className: Resizer,
+    onPointerDown: HandleResizerPointerDown,
+    type: Div
   }, {
-    type: Div,
+    childCount: 0,
     className: ResizerHighlight,
-    childCount: 0
+    type: Div
   }];
 };
 
 const getSearchToggleButtonVirtualDom = (replaceExpanded, onClick = '') => {
   const title = toggleReplace();
   return [{
-    type: Button,
-    className: mergeClassNames(IconButton, SearchToggleButton, replaceExpanded ? SearchToggleButtonExpanded : ''),
-    title,
-    ariaLabel: title,
     ariaExpanded: replaceExpanded,
-    name: ToggleReplace$1,
+    ariaLabel: title,
     childCount: 1,
+    className: mergeClassNames(IconButton, SearchToggleButton, replaceExpanded ? SearchToggleButtonExpanded : ''),
     'data-command': 'toggleReplace',
+    name: ToggleReplace$1,
     onClick,
-    onFocus: HandleToggleReplaceFocus
+    onFocus: HandleToggleReplaceFocus,
+    title,
+    type: Button
   }, {
-    type: Div,
+    childCount: 0,
     className: mergeClassNames(MaskIcon, replaceExpanded ? MaskIconChevronDown : MaskIconChevronRight),
-    childCount: 0
+    type: Div
   }];
 };
 
 const parentNode = {
-  type: Div,
-  className: mergeClassNames(Viewlet, ViewletFind, ViewletFindWidget, FindWidget),
   childCount: 3,
-  role: Group
+  className: mergeClassNames(Viewlet, ViewletFind, ViewletFindWidget, FindWidget),
+  role: Group,
+  type: Div
 };
 const getFindWidgetVirtualDom = (matchCountText, replaceExpanded, findButtons, findFieldButtons, replaceButtons, replaceFieldButtons, matchCount, value, hasError, inputFocused, replaceInputFocused) => {
   return [parentNode, ...getResizerVirtualDom(), ...getSearchToggleButtonVirtualDom(replaceExpanded, 'handleClickToggleReplace'), {
-    type: Div,
+    childCount: replaceExpanded ? 2 : 1,
     className: FindWidgetRight,
-    childCount: replaceExpanded ? 2 : 1
+    type: Div
   }, ...getFindWidgetFindVirtualDom(matchCountText, findButtons, findFieldButtons, matchCount, Boolean(value), hasError, inputFocused), ...getFindWidgetReplaceVirtualDom(replaceExpanded, replaceButtons, replaceFieldButtons, replaceInputFocused)];
 };
 
@@ -2546,15 +2526,15 @@ const getMatchCountText = (matchIndex, matchCount) => {
 const renderContent = (oldState, newState) => {
   const {
     focus,
-    uid,
-    matchCount,
-    value,
-    replaceExpanded,
+    inputErrorMessage,
     matchCase,
+    matchCount,
     matchWholeWord,
-    useRegularExpression,
     preserveCase,
-    inputErrorMessage
+    replaceExpanded,
+    uid,
+    useRegularExpression,
+    value
   } = newState;
   const matchCountText = getMatchCountText(newState.matchIndex, newState.matchCount);
   const {
@@ -2563,8 +2543,8 @@ const renderContent = (oldState, newState) => {
   } = getFindWidgetButtonsEnabled(matchCount, value);
   const {
     findButtons,
-    replaceButtons,
     findFieldButtons,
+    replaceButtons,
     replaceFieldButtons
   } = getFindWidgetButtons(findButtonsEnabled, replaceButtonsEnabled, matchCase, matchWholeWord, useRegularExpression, preserveCase);
   const hasError = Boolean(inputErrorMessage);
@@ -2576,12 +2556,12 @@ const renderContent = (oldState, newState) => {
 
 const renderCss = (oldState, newState) => {
   const {
+    height,
+    searchInputHeight: inputHeight,
     uid,
     width,
-    height,
     x,
-    y,
-    searchInputHeight: inputHeight
+    y
   } = newState;
   const css = `:root {
   --FindWidgetWidth: ${width}px;
@@ -2596,7 +2576,7 @@ const renderCss = (oldState, newState) => {
 const getEventListeners = (uid, widgetId) => {
   return [{
     name: HandleInput,
-    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleInput', 0, widgetId, 'event.target.value']
+    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleInput', 0, widgetId, TargetValue]
   }, {
     name: HandleClickClose,
     params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleClickClose', 0, widgetId]
@@ -2620,7 +2600,7 @@ const getEventListeners = (uid, widgetId) => {
     params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleBlur', 0, widgetId]
   }, {
     name: HandleReplaceInput,
-    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleReplaceInput', 0, widgetId]
+    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleReplaceInput', 0, widgetId, TargetValue]
   }, {
     name: HandleReplaceFocus,
     params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleReplaceFocus', 0, widgetId]
@@ -2630,6 +2610,9 @@ const getEventListeners = (uid, widgetId) => {
   }, {
     name: HandleFocusNext,
     params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleFocusNext', 0, widgetId]
+  }, {
+    name: HandleToggleReplaceFocus,
+    params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleToggleReplaceFocus', 0, widgetId]
   }, {
     name: HandleClickReplaceAll,
     params: ['executeWidgetCommand', 'FindWidget', 'FindWidget.handleClickReplaceAll', 0, widgetId]
@@ -2661,24 +2644,24 @@ const renderEventListeners = state => {
 
 const getFocusSelector = focusKey => {
   switch (focusKey) {
+    case FocusFindWidgetCloseButton$1:
+      return Close$2;
     case FocusSearchInput:
       return SearchValue;
-    case FocusSearchReplaceInput:
-      return ReplaceValue;
     case FocusSearchMatchCase:
       return MatchCase$2;
     case FocusSearchPreserveCase:
       return PreserveCase$1;
     case FocusSearchRegex:
       return UseRegularExpression$2;
-    case FocusSearchWholeWord:
-      return MatchWholeWord$2;
     case FocusSearchReplaceAll:
       return ReplaceAll$2;
+    case FocusSearchReplaceInput:
+      return ReplaceValue;
+    case FocusSearchWholeWord:
+      return MatchWholeWord$2;
     case FocusToggleReplace:
       return ToggleReplace$1;
-    case FocusFindWidgetCloseButton$1:
-      return Close$2;
     default:
       return '';
   }
@@ -2686,8 +2669,8 @@ const getFocusSelector = focusKey => {
 
 const renderFocus = (oldState, newState) => {
   const {
-    uid,
-    focus
+    focus,
+    uid
   } = newState;
   const name = getFocusSelector(focus);
   const selector = `[name="${name}"]`;
@@ -2702,16 +2685,16 @@ const renderFocusContext = (oldState, newState) => {
 
 const renderReplaceValue = (oldState, newState) => {
   const {
-    uid,
-    replacement
+    replacement,
+    uid
   } = newState;
   return [SetValueByName, uid, ReplaceValue, replacement];
 };
 
 const renderUid = (oldState, newState) => {
   const {
-    uid,
-    editorUid
+    editorUid,
+    uid
   } = newState;
   return [SetUid, uid, editorUid];
 };
@@ -2726,24 +2709,24 @@ const renderValue = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
-    case RenderContent:
-      return renderContent;
     case RenderBounds:
       return renderBounds;
+    case RenderContent:
+      return renderContent;
+    case RenderCss:
+      return renderCss;
     case RenderEventListeners:
       return renderEventListeners;
-    case RenderUid:
-      return renderUid;
-    case RenderFocusContext:
-      return renderFocusContext;
     case RenderFocus:
       return renderFocus;
-    case RenderValue:
-      return renderValue;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderReplaceValue:
       return renderReplaceValue;
-    case RenderCss:
-      return renderCss;
+    case RenderUid:
+      return renderUid;
+    case RenderValue:
+      return renderValue;
     default:
       throw new Error('unknown renderer');
   }
@@ -2760,8 +2743,8 @@ const applyRender = (oldState, newState, diffResult) => {
 
 const render2 = (uid, diffResult) => {
   const {
-    oldState,
-    newState
+    newState,
+    oldState
   } = get(uid);
   set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
@@ -2774,29 +2757,29 @@ const resize = async (state, dimensions) => {
 
 const saveState = state => {
   const {
-    width,
-    value,
-    replacement,
     matchCase,
     matchWholeWord,
+    replaceExpanded,
+    replacement,
     useRegularExpression,
-    replaceExpanded
+    value,
+    width
   } = state;
   return {
-    width,
-    value,
-    replacement,
     matchCase,
     matchWholeWord,
+    replaceExpanded,
+    replacement,
     useRegularExpression,
-    replaceExpanded
+    value,
+    width
   };
 };
 
 const commandMap = {
+  'FindWidget.close': wrapCommand(close$1),
   'FindWidget.create': create,
   'FindWidget.diff2': diff2,
-  'FindWidget.close': wrapCommand(close$1),
   'FindWidget.dispose': dispose,
   'FindWidget.focusCloseButton': wrapCommand(focusCloseButton),
   'FindWidget.focusElement': wrapCommand(focusElement),
@@ -2814,12 +2797,14 @@ const commandMap = {
   'FindWidget.handleBlur': wrapCommand(handleBlur),
   'FindWidget.handleClickButton': wrapCommand(handleClickButton),
   'FindWidget.handleClickClose': wrapCommand(handleClickClose),
+  'FindWidget.handleFocus': wrapCommand(handleFindFocus),
   'FindWidget.handleInput': wrapCommand(handleInput),
   'FindWidget.handleReplaceFocus': wrapCommand(handleReplaceFocus),
   'FindWidget.handleReplaceInput': wrapCommand(handleReplaceInput),
   'FindWidget.handleResizerPointerDown': wrapCommand(handleResizerPointerDown),
   'FindWidget.handleResizerPointerMove': wrapCommand(handleResizerPointerMove),
   'FindWidget.handleResizerPointerUp': wrapCommand(handleResizerPointerUp),
+  'FindWidget.handleToggleReplaceFocus': wrapCommand(handleToggleReplaceFocus),
   'FindWidget.loadContent': wrapCommand(loadContent),
   'FindWidget.preventDefaultBrowserFind': wrapCommand(preventDefaultBrowserFind),
   'FindWidget.render2': render2,
@@ -2829,10 +2814,10 @@ const commandMap = {
   'FindWidget.saveState': wrapGetter(saveState),
   'FindWidget.terminate': terminate,
   'FindWidget.toggleMatchCase': wrapCommand(toggleMatchCase),
-  'FindWidget.toggleReplace': wrapCommand(toggleReplace$1),
-  'FindWidget.toggleUseRegularExpression': wrapCommand(toggleUseRegularExpression),
+  'FindWidget.toggleMatchWholeWord': wrapCommand(toggleMatchWholeWord),
   'FindWidget.togglePreserveCase': wrapCommand(togglePreserveCase),
-  'FindWidget.toggleMatchWholeWord': wrapCommand(toggleMatchWholeWord)
+  'FindWidget.toggleReplace': wrapCommand(toggleReplace$1),
+  'FindWidget.toggleUseRegularExpression': wrapCommand(toggleUseRegularExpression)
 };
 
 const listen = async () => {