fix focus bug and add insert function button

Author: noamzaks

CHANGELOG.md

@@ -10,6 +10,7 @@ The default keyboard shortcuts have changed, it is recommended to reset to the d
 
 ### Added
 
+- A new command and button for inserting function calls easier.
 - More TyX commands for working with TyX itself: `fileNewFromTemplate`, `fileClose`, `openSettings` and `openDocumentSettings`.
 - A hint for the command which will be executed when clicking some command button is now shown in the status bar.
 
@@ -20,6 +21,7 @@ The default keyboard shortcuts have changed, it is recommended to reset to the d
 ### Fixed
 
 - Various issues regarding closing a file.
+- Commands continue to work when switching between the main editor and nested editors.
 
 ## [0.2.9] - 2025-10-08
 

docs/commands.rst

@@ -108,10 +108,14 @@ Insert Function Call
 
 Insert a function call node with the given function (and optionally initial parameter values or inline customization).
 
+If no parameters are passed, a modal is used to pick the function.
+
 Example: ``insertFunctionCall footnote``
 
 Example: ``insertFunctionCall ["h", [{"type": "length", "value": "10", "unit": "pt"}]]``
 
+Example: ``insertFunctionCall``
+
 
 Toggle Math Inline
 ^^^^^^^^^^^^^^^^^^
@@ -262,13 +266,15 @@ Previews the current file as a PDF.
 
 Example: ``filePreview``
 
+
 Open Settings
 ~~~~~~~~~~~~~
 
 Opens the app settings modal.
 
 Example: ``openSettings``
 
+
 Open Document Settings
 ~~~~~~~~~~~~~~~~~~~~~~
 

src/components/CommandActionIcon.tsx

@@ -1,11 +1,11 @@
-import { ActionIcon, ActionIconProps } from "@mantine/core"
+import { ActionIcon, ActionIconProps, Tooltip } from "@mantine/core"
 import { executeCommandSequence } from "../commands"
 import { setLocalStorage } from "../utilities/hooks"
 
 const CommandActionIcon = (
-  props: ActionIconProps & { component?: any; command: string },
+  props: ActionIconProps & { component?: any; command: string; label?: string },
 ) => {
-  return (
+  const icon = (
     <ActionIcon
       onMouseEnter={() => setLocalStorage("Hover Command", props.command)}
       onMouseLeave={() => setLocalStorage("Hover Command", null)}
@@ -17,6 +17,12 @@ const CommandActionIcon = (
       {...props}
     />
   )
+
+  if (props.label) {
+    return <Tooltip label={props.label}>{icon}</Tooltip>
+  }
+
+  return icon
 }
 
 export default CommandActionIcon

src/components/plugins/CurrentEditorPlugin.tsx

@@ -1,4 +1,5 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { COMMAND_PRIORITY_HIGH, FOCUS_COMMAND } from "lexical"
 import { useEffect } from "react"
 
 const CurrentEditorPlugin = () => {
@@ -14,6 +15,18 @@ const CurrentEditorPlugin = () => {
     }
   }, [editor])
 
+  useEffect(() => {
+    return editor.registerCommand(
+      FOCUS_COMMAND,
+      () => {
+        window.currentEditor = editor
+
+        return false
+      },
+      COMMAND_PRIORITY_HIGH,
+    )
+  }, [editor])
+
   return null
 }
 

src/components/plugins/FunctionCallPlugin.tsx

@@ -5,9 +5,9 @@ import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
 import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer"
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
-import { Button, TextInput } from "@mantine/core"
+import { Autocomplete, Button } from "@mantine/core"
 import { modals } from "@mantine/modals"
-import { IconDeviceFloppy, IconFunction } from "@tabler/icons-react"
+import { IconDeviceFloppy, IconFunction, IconPlus } from "@tabler/icons-react"
 import {
   $createNodeSelection,
   $getNodeByKey,
@@ -17,10 +17,12 @@ import {
   LexicalEditor,
   NodeKey,
 } from "lexical"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
+import { executeCommandSequence } from "../../commands"
 import { stringifyFunction } from "../../compilers/lexical2typst"
 import { getFunctions } from "../../functions"
 import { TyXValue } from "../../models"
+import { backupEditorSelection, restoreEditorSelection } from "../../utilities"
 import TyXValueEditor from "../TyXValueEditor"
 import CurrentEditorPlugin from "./CurrentEditorPlugin"
 import {
@@ -77,17 +79,18 @@ export const FunctionCallEditModal = ({
     modals.closeAll()
   }
 
-  const functions = getFunctions()
+  const functions = useMemo(() => getFunctions(), [])
 
   return (
     <>
-      <TextInput
+      <Autocomplete
         autoCapitalize="off"
         autoCorrect="off"
         label="Function"
         leftSection={<IconFunction />}
         value={name}
-        onChange={(e) => setName(e.currentTarget.value)}
+        onChange={setName}
+        data={Object.keys(functions).sort()}
       />
       {functions[name]?.positional?.map(
         (parameterDescription, positionIndex) => (
@@ -233,13 +236,58 @@ export const FunctionCallEditor = ({
   )
 }
 
+export const InsertFunctionCallModal = () => {
+  const [name, setName] = useState("")
+
+  const functions = useMemo(() => getFunctions(), [])
+
+  const insert = () => {
+    restoreEditorSelection()
+    executeCommandSequence(`insertFunctionCall ${name}`)
+    modals.closeAll()
+  }
+
+  return (
+    <>
+      <Autocomplete
+        data-autofocus
+        autoCapitalize="off"
+        autoCorrect="off"
+        label="Function"
+        leftSection={<IconFunction />}
+        value={name}
+        onChange={setName}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault()
+            insert()
+          }
+        }}
+        data={Object.keys(functions).sort()}
+      />
+      <Button mt="xs" fullWidth leftSection={<IconPlus />} onClick={insert}>
+        Insert
+      </Button>
+    </>
+  )
+}
+
 const FunctionCallPlugin = () => {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
     return editor.registerCommand(
       INSERT_FUNCTION_CALL_COMMAND,
       (payload) => {
+        if (payload === undefined) {
+          backupEditorSelection()
+          modals.open({
+            title: "Insert Function Call",
+            children: <InsertFunctionCallModal />,
+          })
+          return true
+        }
+
         const node =
           typeof payload === "string"
             ? $createFunctionCallNode(payload, undefined, undefined)

src/components/plugins/ToolbarPlugin.tsx

@@ -32,6 +32,7 @@ import {
   IconDeviceFloppy,
   IconEye,
   IconFileCode,
+  IconFunction,
   IconH1,
   IconH2,
   IconH3,
@@ -65,7 +66,6 @@ import {
   $isElementNode,
   $isNodeSelection,
   $isRangeSelection,
-  $setSelection,
   BaseSelection,
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
@@ -97,7 +97,11 @@ import {
   getSelectedNode,
 } from "../../resources/playground"
 import { getSettings } from "../../settings"
-import { showSuccessMessage } from "../../utilities"
+import {
+  getEditorSelection,
+  setEditorSelection,
+  showSuccessMessage,
+} from "../../utilities"
 import { useLocalStorage } from "../../utilities/hooks"
 import CommandActionIcon from "../CommandActionIcon"
 import { OPEN_LINK_POPUP_COMMAND } from "./tyxCommands"
@@ -139,6 +143,7 @@ const ToolbarControl = React.forwardRef<
     if (command) {
       return (
         <CommandActionIcon
+          label={label}
           className="toolbar-control"
           size={30}
           variant={active ? undefined : "default"}
@@ -350,6 +355,9 @@ const InsertControls = () => {
       <ToolbarControl label="Insert image" onClick={insertImage}>
         <IconPhoto />
       </ToolbarControl>
+      <ToolbarControl label="Insert function" command="insertFunctionCall">
+        <IconFunction />
+      </ToolbarControl>
       <ToolbarControl label="Insert Typst code" command="insertTypstCode">
         <IconCodeAsterisk />
       </ToolbarControl>
@@ -535,20 +543,16 @@ const LinkControls = () => {
   const ref = useRef<HTMLInputElement>(null)
 
   const save = () => {
-    window.currentEditor?.update(() => {
-      $setSelection(selection?.clone() ?? null)
-    })
+    setEditorSelection(selection)
     executeCommandSequence(`toggleLink ${ref.current!.value}`)
     setOpened(false)
   }
 
   const changeOpened = (opened: boolean) => {
     if (!opened) {
-      window.currentEditor?.update(() => {
-        $setSelection(selection?.clone() ?? null)
-      })
+      setEditorSelection(selection)
     } else {
-      setSelection(window.currentEditor?.read(() => $getSelection()) ?? null)
+      setSelection(getEditorSelection())
     }
     setOpened(opened)
   }

src/components/plugins/functionCall.ts

@@ -19,6 +19,7 @@ import { TyXRootNode, TyXValue } from "../../models"
 import { FunctionCallEditor } from "./FunctionCallPlugin"
 
 export const INSERT_FUNCTION_CALL_COMMAND: LexicalCommand<
+  | undefined
   | string
   | [string, TyXValue[] | undefined, Record<string, TyXValue> | undefined]
 > = createCommand()

src/components/plugins/tyxCommands.ts

@@ -15,3 +15,5 @@ export const FILE_PREVIEW_COMMAND: LexicalCommand<void> = createCommand()
 export const OPEN_SETTINGS_COMMAND: LexicalCommand<void> = createCommand()
 export const OPEN_DOCUMENT_SETTINGS_COMMAND: LexicalCommand<void> =
   createCommand()
+
+export const INSERT_FUNCTION: LexicalCommand<void> = createCommand()

src/shortcuts.ts

@@ -47,6 +47,7 @@ export const DEFAULT_KEYBOARD_SHORTCUTS: [string, string][] = [
   ["mod+l", "insertTypstCode"],
   ["mod+m", "insertMath true"],
   ["mod+shift+m", "toggleMathInline"],
+  ["mod+shift+f", "insertFunctionCall"],
   ["mod+k", "openLinkPopup"],
   ["mod+;", "openSettings"],
   ["mod+shift+;", "openDocumentSettings"],

src/utilities/index.tsx

@@ -6,6 +6,7 @@ import { modals } from "@mantine/modals"
 import { notifications } from "@mantine/notifications"
 import { IconCheck, IconExclamationMark } from "@tabler/icons-react"
 import i18n from "i18next"
+import { $getSelection, $setSelection, BaseSelection } from "lexical"
 import { TyXDocument } from "../models"
 import { getLocalStorage } from "./hooks"
 
@@ -67,3 +68,23 @@ export const getCurrentDocument = () => {
   const currentDocument = getLocalStorage<number>("Current Document")
   return openDocuments[currentDocument]
 }
+
+export const setEditorSelection = (selection: BaseSelection | null) => {
+  window.currentEditor?.update(() => {
+    $setSelection(selection?.clone() ?? null)
+  })
+}
+
+export const getEditorSelection = () => {
+  return window.currentEditor?.read(() => $getSelection()) ?? null
+}
+
+let savedEditorSelection: BaseSelection | null
+
+export const backupEditorSelection = () => {
+  savedEditorSelection = getEditorSelection()
+}
+
+export const restoreEditorSelection = () => {
+  setEditorSelection(savedEditorSelection)
+}