Implement custom undo and redo functionality and robust text insertion in Textarea

- in `packages/ui/src/components/editor/common/Textarea/Textarea.tsx`, undo (cmd+z) works incorrectly. implement like in the prompt field.

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        ├── Textarea
                        │   └── Textarea.tsx
                        └── prompts
                            ├── PromptField
                            │   ├── PromptField.module.scss
                            │   ├── PromptField.stories.tsx
                            │   ├── PromptField.tsx
                            │   ├── components
                            │   │   ├── Tooltip.module.scss
                            │   │   ├── Tooltip.tsx
                            │   │   └── index.ts
                            │   ├── hooks
                            │   │   ├── use-drag-drop.ts
                            │   │   ├── use-dropdown.ts
                            │   │   ├── use-ghost-text.ts
                            │   │   ├── use-handlers
                            │   │   │   ├── handle-copy.ts
                            │   │   │   ├── handle-cut.ts
                            │   │   │   ├── handle-input-change.ts
                            │   │   │   ├── handle-input-click.ts
                            │   │   │   ├── handle-paste.ts
                            │   │   │   ├── handle-submit.ts
                            │   │   │   ├── index.ts
                            │   │   │   └── utils.ts
                            │   │   └── use-keyboard-shortcuts.ts
                            │   └── index.ts
                            ├── Template
                            │   ├── Template.module.scss
                            │   ├── Template.tsx
                            │   └── index.ts
                            └── shared
                                └── symbols
                                    ├── caret.ts
                                    ├── get-highlighted-text.tsx
                                    ├── index.ts
                                    ├── position-mapping.ts
                                    ├── prompt-symbols.module.scss
                                    ├── reconstruct-raw-value.ts
                                    └── use-symbol-deletion.ts

Author: robertpiosik

packages/ui/src/components/editor/common/Textarea/Textarea.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import cn from 'classnames'
 import styles from './Textarea.module.scss'
+import {
+  get_caret_position_from_div,
+  set_caret_position_for_div
+} from '../prompts/shared/symbols'
 
 type Props = {
   id?: string
@@ -22,6 +26,29 @@ type Props = {
 export const Textarea = React.forwardRef<HTMLDivElement, Props>(
   (props, ref) => {
     const internal_ref = React.useRef<HTMLDivElement | null>(null)
+    const [undo_stack, set_undo_stack] = React.useState<
+      { value: string; caret_pos: number }[]
+    >([])
+    const [redo_stack, set_redo_stack] = React.useState<
+      { value: string; caret_pos: number }[]
+    >([])
+    const caret_pos_ref = React.useRef(0)
+
+    React.useEffect(() => {
+      const on_selection_change = () => {
+        if (
+          document.activeElement === internal_ref.current &&
+          internal_ref.current
+        ) {
+          caret_pos_ref.current = get_caret_position_from_div(
+            internal_ref.current
+          )
+        }
+      }
+      document.addEventListener('selectionchange', on_selection_change)
+      return () =>
+        document.removeEventListener('selectionchange', on_selection_change)
+    }, [])
 
     const set_ref = React.useCallback(
       (node: HTMLDivElement | null) => {
@@ -56,11 +83,72 @@ export const Textarea = React.forwardRef<HTMLDivElement, Props>(
       }
     }, [props.autofocus])
 
+    const update_value = (new_value: string) => {
+      if (new_value === props.value) return
+      set_undo_stack((prev) => [
+        ...prev,
+        { value: props.value || '', caret_pos: caret_pos_ref.current }
+      ])
+      set_redo_stack([])
+      props.on_change(new_value)
+    }
+
     const handle_input = (e: React.FormEvent<HTMLDivElement>) => {
-      props.on_change(e.currentTarget.textContent || '')
+      update_value(e.currentTarget.textContent || '')
     }
 
     const handle_key_down = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (
+        (e.ctrlKey || e.metaKey) &&
+        !e.shiftKey &&
+        e.key.toLowerCase() == 'z'
+      ) {
+        e.preventDefault()
+        if (undo_stack.length > 0) {
+          const prev_entry = undo_stack[undo_stack.length - 1]
+          set_undo_stack((prev) => prev.slice(0, -1))
+          set_redo_stack((prev) => [
+            ...prev,
+            { value: props.value || '', caret_pos: caret_pos_ref.current }
+          ])
+          props.on_change(prev_entry.value)
+          setTimeout(() => {
+            if (internal_ref.current) {
+              set_caret_position_for_div(
+                internal_ref.current,
+                prev_entry.caret_pos
+              )
+            }
+          }, 0)
+        }
+        return
+      }
+
+      if (
+        ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() == 'y') ||
+        ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() == 'z')
+      ) {
+        e.preventDefault()
+        if (redo_stack.length > 0) {
+          const next_entry = redo_stack[redo_stack.length - 1]
+          set_redo_stack((prev) => prev.slice(0, -1))
+          set_undo_stack((prev) => [
+            ...prev,
+            { value: props.value || '', caret_pos: caret_pos_ref.current }
+          ])
+          props.on_change(next_entry.value)
+          setTimeout(() => {
+            if (internal_ref.current) {
+              set_caret_position_for_div(
+                internal_ref.current,
+                next_entry.caret_pos
+              )
+            }
+          }, 0)
+        }
+        return
+      }
+
       if (
         (e.key == 'Escape' ||
           (e.key == 'Enter' && (props.blur_on_enter ?? true))) &&
@@ -70,15 +158,35 @@ export const Textarea = React.forwardRef<HTMLDivElement, Props>(
         e.currentTarget.blur()
       } else if (e.key === 'Enter') {
         e.preventDefault()
-        document.execCommand('insertText', false, '\n')
+        const selection = window.getSelection()
+        if (selection && selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0)
+          range.deleteContents()
+          const text_node = document.createTextNode('\n')
+          range.insertNode(text_node)
+          range.collapse(false)
+          selection.removeAllRanges()
+          selection.addRange(range)
+          update_value(e.currentTarget.textContent || '')
+        }
       }
       props.on_key_down?.(e)
     }
 
     const handle_paste = (e: React.ClipboardEvent<HTMLDivElement>) => {
       e.preventDefault()
       const text = e.clipboardData.getData('text/plain')
-      document.execCommand('insertText', false, text)
+      const selection = window.getSelection()
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        range.deleteContents()
+        const text_node = document.createTextNode(text)
+        range.insertNode(text_node)
+        range.collapse(false)
+        selection.removeAllRanges()
+        selection.addRange(range)
+        update_value(e.currentTarget.textContent || '')
+      }
     }
 
     const handle_focus = (e: React.FocusEvent<HTMLDivElement>) => {
@@ -102,7 +210,11 @@ export const Textarea = React.forwardRef<HTMLDivElement, Props>(
       >
         {props.action_icon && props.on_action_click && (
           <div
-            className={cn(styles.action, 'codicon', `codicon-${props.action_icon}`)}
+            className={cn(
+              styles.action,
+              'codicon',
+              `codicon-${props.action_icon}`
+            )}
             title={props.action_title}
             onMouseDown={(e) => e.preventDefault()}
             onClick={(e) => {