@pgcorp/ui-kit 0.10.0 → 0.10.2

package/src/components/shared/controls/STextarea.vue

@@ -1,670 +0,0 @@
-<template>
-  <SField
-    :control-id="textareaId"
-    :label="label"
-    :required="required"
-    :help-text="helpText"
-    :error-message="errorMessage"
-    :invalid="invalid"
-    :disabled="disabled"
-    :readonly="readonly"
-    :fill="validatedAppearance === 'ghost' ? 'container' : 'content'"
-  >
-    <template #default="field">
-      <textarea
-        v-bind="{ ...ownedAttrs.bindings(), ...resolveFieldBindings(field) }"
-        :id="textareaId"
-        ref="textareaRef"
-        class="s-textarea"
-        :data-appearance="validatedAppearance"
-        :data-size="validatedSize"
-        :data-monospace="monospace || undefined"
-        :data-auto-resize="resizeContract.mode === 'content' || undefined"
-        :data-max-rows="validatedMaxRows"
-        :data-min-height="validatedMinHeight"
-        :data-max-height="validatedMaxHeight"
-        :data-invalid="field.invalid || undefined"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :disabled="field.disabled"
-        :readonly="field.readonly"
-        :required="field.required"
-        :aria-invalid="field.invalid || undefined"
-        :aria-required="field.required || undefined"
-        :aria-readonly="field.readonly || undefined"
-        :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
-        :aria-controls="validatedSuggestions?.controls"
-        :aria-activedescendant="validatedSuggestions?.activeDescendant"
-        :aria-autocomplete="validatedSuggestions?.autocomplete"
-        :aria-haspopup="validatedSuggestions?.popupRole"
-        :rows="validatedRows"
-        @input="handleInput"
-        @keydown="handleKeydown"
-        @keyup="handleKeyup"
-        @click="handleClick"
-        @select="handleSelectionChange"
-        @paste="emit('paste', $event)"
-        @compositionstart="handleCompositionStart"
-        @compositionupdate="handleCompositionUpdate"
-        @compositionend="handleCompositionEnd"
-      />
-    </template>
-  </SField>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
-import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { resolveFieldSurfaceBindings, type FieldSurfaceBindings } from '../../../internal/fieldSurface'
-import {
-  resolveOptionalDomId,
-  validateBoolean,
-  validateBoundedNumber,
-  validateBoundedInteger,
-  validateDomId,
-  validateExactString,
-} from '../../../internal/runtimeContract'
-import SField from './SField.vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-/** Визуальная интеграция native textarea с SField. / Native textarea visual integration with SField. */
-export type STextareaAppearance = 'default' | 'ghost'
-export type STextareaSize = 'sm' | 'md' | 'lg'
-export type STextareaSelectionDirection = 'forward' | 'backward' | 'none'
-export type STextareaAutocomplete = 'list' | 'both' | 'inline' | 'none'
-export type STextareaSuggestionPopupRole = 'listbox' | 'grid' | 'tree' | 'dialog'
-
-/** Полный native selection contract без сведения диапазона к одному cursor. */
-export interface STextareaSelection {
-  start: number
-  end: number
-  direction: STextareaSelectionDirection
-}
-
-/** Связь multiline textbox с consumer-owned suggestion popup без недопустимого role="combobox" на textarea. */
-export interface STextareaSuggestions {
-  controls: string
-  activeDescendant?: string
-  autocomplete?: STextareaAutocomplete
-  popupRole?: STextareaSuggestionPopupRole
-}
-
-export interface STextareaState {
-  text: string
-  cursor: number
-  selection: STextareaSelection
-  composing: boolean
-}
-
-export interface STextareaReplaceOptions {
-  selection?: STextareaSelection
-  selectionMode?: SelectionMode
-  focus?: boolean
-}
-
-interface STextareaHistorySnapshot {
-  text: string
-  selection: STextareaSelection
-}
-
-interface STextareaReplacementHistoryEntry {
-  before: STextareaHistorySnapshot
-  after: STextareaHistorySnapshot
-}
-
-/**
- * Дискриминированный resize contract: fixed не имеет maxRows, content может быть bounded или unbounded.
- * Discriminated resize contract: fixed has no maxRows; content can be bounded or unbounded.
- */
-export type STextareaResizeContract =
-  | { mode: 'fixed'; autoResize: false }
-  | {
-    mode: 'content'
-    autoResize: true
-    maxRows?: number
-    minHeight?: number
-    maxHeight?: number
-  }
-
-const TEXTAREA_APPEARANCES = ['default', 'ghost'] as const satisfies readonly STextareaAppearance[]
-const TEXTAREA_SIZES = ['sm', 'md', 'lg'] as const satisfies readonly STextareaSize[]
-const TEXTAREA_ROWS_DOMAIN = { minimum: 1, maximum: 100 } as const
-const TEXTAREA_HEIGHT_DOMAIN = { minimum: 1, maximum: 4096 } as const
-const TEXTAREA_AUTOCOMPLETE = ['list', 'both', 'inline', 'none'] as const satisfies readonly STextareaAutocomplete[]
-const TEXTAREA_SUGGESTION_POPUP_ROLES = ['listbox', 'grid', 'tree', 'dialog'] as const satisfies readonly STextareaSuggestionPopupRole[]
-const TEXTAREA_SELECTION_DIRECTIONS = ['forward', 'backward', 'none'] as const satisfies readonly STextareaSelectionDirection[]
-const TEXTAREA_SELECTION_MODES = ['select', 'start', 'end', 'preserve'] as const satisfies readonly SelectionMode[]
-const PROGRAMMATIC_HISTORY_LIMIT = 100
-
-export interface Props {
-  modelValue: string | null
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  required?: boolean
-  invalid?: boolean
-  errorMessage?: string
-  helpText?: string
-  id?: string
-  rows?: number
-  size?: STextareaSize
-  autoResize?: boolean
-  maxRows?: number
-  minHeight?: number
-  maxHeight?: number
-  suggestions?: STextareaSuggestions
-  appearance?: STextareaAppearance
-  monospace?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  label: undefined,
-  placeholder: undefined,
-  disabled: false,
-  readonly: false,
-  required: false,
-  invalid: false,
-  errorMessage: undefined,
-  helpText: undefined,
-  id: undefined,
-  rows: 3,
-  size: 'md',
-  autoResize: false,
-  maxRows: undefined,
-  minHeight: undefined,
-  maxHeight: undefined,
-  suggestions: undefined,
-  appearance: 'default',
-  monospace: false,
-})
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: string): void
-  (event: 'keydown', keyboardEvent: KeyboardEvent): void
-  (event: 'keyup', keyboardEvent: KeyboardEvent): void
-  (event: 'click', mouseEvent: MouseEvent): void
-  (event: 'paste', clipboardEvent: ClipboardEvent): void
-  (event: 'compositionstart', compositionEvent: CompositionEvent): void
-  (event: 'compositionupdate', compositionEvent: CompositionEvent): void
-  (event: 'compositionend', compositionEvent: CompositionEvent): void
-  (event: 'selection-change', selection: STextareaSelection): void
-  (event: 'state-change', state: STextareaState): void
-}>()
-
-const ownedAttrs = useOwnedAttrs({ component: 'STextarea', owner: 'native textarea' })
-useInteractiveLeafRegistration({ owner: 'STextarea' })
-const generatedTextareaId = useId()
-const textareaId = computed(() => resolveOptionalDomId(
-  'STextarea',
-  'id',
-  props.id,
-  `s-textarea-${generatedTextareaId}`,
-))
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
-const composing = ref(false)
-let resizeObserver: ResizeObserver | null = null
-let observedResizeOwner: HTMLElement | null = null
-let observedWidth: number | null = null
-let resizeFrame: number | null = null
-let applyingProgrammaticReplacement = false
-const replacementUndoStack: STextareaReplacementHistoryEntry[] = []
-const replacementRedoStack: STextareaReplacementHistoryEntry[] = []
-const validatedAppearance = computed<STextareaAppearance>(() => validateExactString(
-  'STextarea',
-  'appearance',
-  props.appearance,
-  TEXTAREA_APPEARANCES,
-))
-const validatedSize = computed<STextareaSize>(() => validateExactString(
-  'STextarea',
-  'size',
-  props.size,
-  TEXTAREA_SIZES,
-))
-const validatedRows = computed(() => validateBoundedInteger(
-  'STextarea',
-  'rows',
-  props.rows,
-  TEXTAREA_ROWS_DOMAIN,
-))
-const validatedMaxRows = computed(() => props.maxRows === undefined
-  ? undefined
-  : validateBoundedInteger('STextarea', 'maxRows', props.maxRows, TEXTAREA_ROWS_DOMAIN))
-const validatedMinHeight = computed(() => props.minHeight === undefined
-  ? undefined
-  : validateBoundedNumber('STextarea', 'minHeight', props.minHeight, TEXTAREA_HEIGHT_DOMAIN))
-const validatedMaxHeight = computed(() => props.maxHeight === undefined
-  ? undefined
-  : validateBoundedNumber('STextarea', 'maxHeight', props.maxHeight, TEXTAREA_HEIGHT_DOMAIN))
-const validatedSuggestions = computed<STextareaSuggestions | undefined>(() => {
-  if (props.suggestions === undefined) return undefined
-  if (props.suggestions === null || typeof props.suggestions !== 'object' || Array.isArray(props.suggestions)) {
-    throw new TypeError('STextarea: suggestions должен быть объектом. / STextarea: suggestions must be an object.')
-  }
-  const activeDescendant = props.suggestions.activeDescendant === undefined
-    ? undefined
-    : validateDomId('STextarea', 'suggestions.activeDescendant', props.suggestions.activeDescendant)
-  return {
-    controls: validateDomId('STextarea', 'suggestions.controls', props.suggestions.controls),
-    activeDescendant,
-    autocomplete: validateExactString(
-      'STextarea',
-      'suggestions.autocomplete',
-      props.suggestions.autocomplete ?? 'list',
-      TEXTAREA_AUTOCOMPLETE,
-    ),
-    popupRole: validateExactString(
-      'STextarea',
-      'suggestions.popupRole',
-      props.suggestions.popupRole ?? 'listbox',
-      TEXTAREA_SUGGESTION_POPUP_ROLES,
-    ),
-  }
-})
-const resizeContract = computed<STextareaResizeContract>(() => {
-  const autoResize = validateBoolean('STextarea', 'autoResize', props.autoResize)
-  const maxRows = validatedMaxRows.value
-  const minHeight = validatedMinHeight.value
-  const maxHeight = validatedMaxHeight.value
-  if (!autoResize && maxRows !== undefined && minHeight === undefined && maxHeight === undefined) {
-    throw new TypeError(
-      `STextarea: maxRows применяется только при autoResize=true; получено autoResize=false, maxRows=${maxRows}. `
-      + `/ STextarea: maxRows applies only when autoResize=true; received autoResize=false, maxRows=${maxRows}.`,
-    )
-  }
-  if (!autoResize && (minHeight !== undefined || maxHeight !== undefined)) {
-    throw new TypeError(
-      'STextarea: maxRows/minHeight/maxHeight применяются только при autoResize=true. '
-      + '/ STextarea: maxRows/minHeight/maxHeight apply only when autoResize=true.',
-    )
-  }
-  if (maxRows !== undefined && maxHeight !== undefined) {
-    throw new TypeError(
-      'STextarea: maxRows и maxHeight являются альтернативными ограничителями; укажите один. '
-      + '/ STextarea: maxRows and maxHeight are alternative bounds; provide one.',
-    )
-  }
-  if (minHeight !== undefined && maxHeight !== undefined && maxHeight < minHeight) {
-    throw new TypeError(
-      `STextarea: maxHeight не может быть меньше minHeight; получено minHeight=${minHeight}, maxHeight=${maxHeight}. `
-      + `/ STextarea: maxHeight cannot be below minHeight; received minHeight=${minHeight}, maxHeight=${maxHeight}.`,
-    )
-  }
-  if (maxRows !== undefined && maxRows < validatedRows.value) {
-    throw new TypeError(
-      `STextarea: maxRows не может быть меньше rows; получено rows=${validatedRows.value}, maxRows=${maxRows}. `
-      + `/ STextarea: maxRows cannot be less than rows; received rows=${validatedRows.value}, maxRows=${maxRows}.`,
-    )
-  }
-  if (!autoResize) return { mode: 'fixed', autoResize: false }
-  return {
-    mode: 'content',
-    autoResize: true,
-    ...(maxRows === undefined ? {} : { maxRows }),
-    ...(minHeight === undefined ? {} : { minHeight }),
-    ...(maxHeight === undefined ? {} : { maxHeight }),
-  }
-})
-
-function resolveFieldBindings(field: {
-  invalid: boolean
-  disabled: boolean
-  readonly: boolean
-}): FieldSurfaceBindings {
-  return resolveFieldSurfaceBindings('STextarea', {
-    kind: 'textarea',
-    appearance: validatedAppearance.value === 'default' ? 'field' : 'ghost',
-    invalid: field.invalid,
-    disabled: field.disabled,
-    readonly: field.readonly,
-  })
-}
-
-function readSelection(target: HTMLTextAreaElement, coordinate: string): STextareaSelection {
-  const start = validateSelectionOffset(target.selectionStart, target.value.length, `${coordinate} selectionStart`)
-  const end = validateSelectionOffset(target.selectionEnd, target.value.length, `${coordinate} selectionEnd`)
-  if (end < start) {
-    throw new RangeError(`STextarea: ${coordinate} selectionEnd=${end} is below selectionStart=${start}.`)
-  }
-  return {
-    start,
-    end,
-    direction: validateExactString(
-      'STextarea',
-      `${coordinate} selectionDirection`,
-      target.selectionDirection ?? 'none',
-      TEXTAREA_SELECTION_DIRECTIONS,
-    ),
-  }
-}
-
-function emitState(target: HTMLTextAreaElement): void {
-  const selection = readSelection(target, 'state-change')
-  emit('state-change', {
-    text: target.value,
-    cursor: selection.start,
-    selection,
-    composing: composing.value,
-  })
-}
-
-function handleInput(event: Event): void {
-  const target = event.target as HTMLTextAreaElement
-  const inputType = event instanceof InputEvent ? event.inputType : ''
-  if (!applyingProgrammaticReplacement && inputType !== 'historyUndo' && inputType !== 'historyRedo') {
-    replacementRedoStack.splice(0)
-  }
-  emit('update:modelValue', target.value)
-  emitState(target)
-  void nextTick(scheduleResize)
-}
-
-function snapshotTextarea(target: HTMLTextAreaElement, coordinate: string): STextareaHistorySnapshot {
-  return {
-    text: target.value,
-    selection: readSelection(target, coordinate),
-  }
-}
-
-function restoreHistorySnapshot(target: HTMLTextAreaElement, snapshot: STextareaHistorySnapshot): void {
-  target.value = snapshot.text
-  target.focus()
-  target.setSelectionRange(
-    snapshot.selection.start,
-    snapshot.selection.end,
-    snapshot.selection.direction,
-  )
-  emit('update:modelValue', snapshot.text)
-  emit('selection-change', snapshot.selection)
-  emitState(target)
-  void nextTick(scheduleResize)
-}
-
-function matchesHistorySnapshot(target: HTMLTextAreaElement, snapshot: STextareaHistorySnapshot): boolean {
-  return target.value === snapshot.text
-}
-
-function handleProgrammaticHistory(event: KeyboardEvent, target: HTMLTextAreaElement): boolean {
-  if (event.altKey || !(event.metaKey || event.ctrlKey)) return false
-  const key = event.key.toLowerCase()
-  const undoRequested = key === 'z' && !event.shiftKey
-  const redoRequested = (key === 'z' && event.shiftKey) || (key === 'y' && !event.shiftKey)
-  if (!undoRequested && !redoRequested) return false
-
-  const source = undoRequested ? replacementUndoStack : replacementRedoStack
-  const entry = source[source.length - 1]
-  const expected = undoRequested ? entry?.after : entry?.before
-  if (!entry || !expected || !matchesHistorySnapshot(target, expected)) return false
-
-  event.preventDefault()
-  source.pop()
-  if (undoRequested) {
-    replacementRedoStack.push(entry)
-    restoreHistorySnapshot(target, entry.before)
-  } else {
-    replacementUndoStack.push(entry)
-    restoreHistorySnapshot(target, entry.after)
-  }
-  return true
-}
-
-function handleKeydown(event: KeyboardEvent): void {
-  emit('keydown', event)
-  if (event.defaultPrevented || composing.value || props.disabled || props.readonly) return
-  handleProgrammaticHistory(event, event.currentTarget as HTMLTextAreaElement)
-}
-
-function handleKeyup(event: KeyboardEvent): void {
-  emit('keyup', event)
-  emitState(event.currentTarget as HTMLTextAreaElement)
-}
-
-function handleClick(event: MouseEvent): void {
-  emit('click', event)
-  emitState(event.currentTarget as HTMLTextAreaElement)
-}
-
-function handleSelectionChange(event: Event): void {
-  const target = event.currentTarget as HTMLTextAreaElement
-  const selection = readSelection(target, 'selection-change')
-  emit('selection-change', selection)
-  emitState(target)
-}
-
-function handleCompositionStart(event: CompositionEvent): void {
-  composing.value = true
-  emit('compositionstart', event)
-  emitState(event.currentTarget as HTMLTextAreaElement)
-}
-
-function handleCompositionUpdate(event: CompositionEvent): void {
-  emit('compositionupdate', event)
-  emitState(event.currentTarget as HTMLTextAreaElement)
-}
-
-function handleCompositionEnd(event: CompositionEvent): void {
-  composing.value = false
-  emit('compositionend', event)
-  emitState(event.currentTarget as HTMLTextAreaElement)
-  scheduleResize()
-}
-
-function resize(): void {
-  const textarea = textareaRef.value
-  const contract = resizeContract.value
-  if (contract.mode === 'fixed' || !textarea || textarea.scrollHeight === 0) return
-
-  const style = window.getComputedStyle(textarea)
-  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.5
-  const paddingTop = Number.parseFloat(style.paddingTop) || 0
-  const paddingBottom = Number.parseFloat(style.paddingBottom) || 0
-  const rowMinimumHeight = validatedRows.value * lineHeight + paddingTop + paddingBottom
-  const minimumHeight = contract.minHeight ?? rowMinimumHeight
-  const maximumHeight = contract.maxHeight ?? (contract.maxRows !== undefined
-    ? contract.maxRows * lineHeight + paddingTop + paddingBottom
-    : 0)
-  if (maximumHeight > 0 && maximumHeight < minimumHeight) {
-    throw new RangeError(
-      `STextarea: вычисленный maxHeight=${maximumHeight} меньше minimumHeight=${minimumHeight}. `
-      + `/ STextarea: resolved maxHeight=${maximumHeight} is below minimumHeight=${minimumHeight}.`,
-    )
-  }
-
-  if (props.disabled || props.modelValue === null || props.modelValue.length === 0) {
-    textarea.style.height = `${minimumHeight}px`
-    textarea.style.overflowY = 'hidden'
-    return
-  }
-
-  textarea.style.height = 'auto'
-  const contentHeight = textarea.scrollHeight
-  if (maximumHeight > 0 && contentHeight > maximumHeight) {
-    textarea.style.height = `${maximumHeight}px`
-    textarea.style.overflowY = 'auto'
-    return
-  }
-
-  textarea.style.height = `${Math.max(minimumHeight, contentHeight)}px`
-  textarea.style.overflowY = 'hidden'
-}
-
-function scheduleResize(): void {
-  if (resizeFrame !== null || resizeContract.value.mode === 'fixed') return
-  resizeFrame = window.requestAnimationFrame(() => {
-    resizeFrame = null
-    resize()
-  })
-}
-
-function focus(): void {
-  textareaRef.value?.focus()
-}
-
-function requireTextarea(coordinate: string): HTMLTextAreaElement {
-  const textarea = textareaRef.value
-  if (!textarea) {
-    throw new Error(
-      `STextarea: textarea не готова для ${coordinate}; дождитесь mount. `
-      + `/ STextarea: textarea is not ready for ${coordinate}; wait for mount.`,
-    )
-  }
-  return textarea
-}
-
-function validateSelectionOffset(offset: unknown, textLength: number, coordinate: string): number {
-  return validateBoundedInteger('STextarea', coordinate, offset, { minimum: 0, maximum: textLength })
-}
-
-function getSelectionOffset(): number {
-  const textarea = requireTextarea('getSelectionOffset')
-  return validateSelectionOffset(textarea.selectionStart, textarea.value.length, 'getSelectionOffset')
-}
-
-function getSelection(): STextareaSelection {
-  return readSelection(requireTextarea('getSelection'), 'getSelection')
-}
-
-function validateSelection(selection: STextareaSelection, textLength: number, coordinate: string): STextareaSelection {
-  if (selection === null || typeof selection !== 'object' || Array.isArray(selection)) {
-    throw new TypeError(`STextarea: ${coordinate} должен быть selection object. / STextarea: ${coordinate} must be a selection object.`)
-  }
-  const start = validateSelectionOffset(selection.start, textLength, `${coordinate}.start`)
-  const end = validateSelectionOffset(selection.end, textLength, `${coordinate}.end`)
-  if (end < start) {
-    throw new RangeError(`STextarea: ${coordinate}.end=${end} меньше ${coordinate}.start=${start}.`)
-  }
-  return {
-    start,
-    end,
-    direction: validateExactString(
-      'STextarea',
-      `${coordinate}.direction`,
-      selection.direction,
-      TEXTAREA_SELECTION_DIRECTIONS,
-    ),
-  }
-}
-
-function setSelection(selection: STextareaSelection, focusOwner = true): void {
-  const textarea = requireTextarea('setSelection')
-  const validated = validateSelection(selection, textarea.value.length, 'setSelection')
-  if (focusOwner) textarea.focus()
-  textarea.setSelectionRange(validated.start, validated.end, validated.direction)
-  emit('selection-change', validated)
-  emitState(textarea)
-}
-
-function setSelectionOffset(offset: number): void {
-  const textarea = requireTextarea('setSelectionOffset')
-  const nextOffset = validateSelectionOffset(offset, textarea.value.length, 'setSelectionOffset')
-  textarea.focus()
-  textarea.setSelectionRange(nextOffset, nextOffset)
-}
-
-function replaceSelection(text: string, options: STextareaReplaceOptions = {}): STextareaState {
-  const textarea = requireTextarea('replaceSelection')
-  if (props.disabled || props.readonly) {
-    throw new Error('STextarea: replaceSelection недоступен для disabled/readonly поля. / STextarea: replaceSelection is unavailable for a disabled/readonly field.')
-  }
-  if (composing.value) {
-    throw new Error('STextarea: replaceSelection недоступен во время IME composition. / STextarea: replaceSelection is unavailable during IME composition.')
-  }
-  if (typeof text !== 'string') {
-    throw new TypeError('STextarea: replaceSelection text должен быть строкой. / STextarea: replaceSelection text must be a string.')
-  }
-  const selection = options.selection === undefined
-    ? readSelection(textarea, 'replaceSelection')
-    : validateSelection(options.selection, textarea.value.length, 'replaceSelection.selection')
-  const selectionMode = validateExactString(
-    'STextarea',
-    'replaceSelection.selectionMode',
-    options.selectionMode ?? 'end',
-    TEXTAREA_SELECTION_MODES,
-  )
-  if (options.focus ?? true) textarea.focus()
-  const before = snapshotTextarea(textarea, 'replaceSelection before')
-  textarea.setRangeText(text, selection.start, selection.end, selectionMode)
-  const after = snapshotTextarea(textarea, 'replaceSelection after')
-  replacementUndoStack.push({ before, after })
-  if (replacementUndoStack.length > PROGRAMMATIC_HISTORY_LIMIT) replacementUndoStack.shift()
-  replacementRedoStack.splice(0)
-  applyingProgrammaticReplacement = true
-  try {
-    textarea.dispatchEvent(new InputEvent('input', {
-      bubbles: true,
-      composed: true,
-      data: text,
-      inputType: 'insertReplacementText',
-    }))
-  } finally {
-    applyingProgrammaticReplacement = false
-  }
-  emit('selection-change', after.selection)
-  const nextSelection = after.selection
-  return {
-    text: textarea.value,
-    cursor: nextSelection.start,
-    selection: nextSelection,
-    composing: composing.value,
-  }
-}
-
-function insertSoftLineBreak(): void {
-  if (props.disabled || props.readonly) return
-  replaceSelection('\n')
-}
-
-defineExpose({
-  focus,
-  getSelection,
-  getSelectionOffset,
-  insertSoftLineBreak,
-  replaceSelection,
-  resize,
-  setSelection,
-  setSelectionOffset,
-})
-
-onMounted(() => {
-  resize()
-  const textarea = textareaRef.value
-  observedResizeOwner = textarea?.parentElement ?? null
-  if (typeof ResizeObserver === 'undefined' || !observedResizeOwner) return
-  resizeObserver = new ResizeObserver((entries) => {
-    const ownerEntry = entries.find((entry) => entry.target === observedResizeOwner)
-    if (!ownerEntry) return
-    const width = ownerEntry.contentRect.width
-    if (width === observedWidth) return
-    observedWidth = width
-    scheduleResize()
-  })
-  resizeObserver.observe(observedResizeOwner)
-})
-watch(
-  () => [props.modelValue, props.disabled, props.rows, props.maxRows, props.minHeight, props.maxHeight] as const,
-  () => { void nextTick(scheduleResize) },
-)
-watch(() => props.modelValue, (modelValue) => {
-  const textarea = textareaRef.value
-  if (textarea && textarea.value !== (modelValue ?? '')) {
-    replacementUndoStack.splice(0)
-    replacementRedoStack.splice(0)
-  }
-})
-onBeforeUnmount(() => {
-  if (resizeFrame !== null) window.cancelAnimationFrame(resizeFrame)
-  resizeObserver?.disconnect()
-  resizeObserver = null
-  observedResizeOwner = null
-  replacementUndoStack.splice(0)
-  replacementRedoStack.splice(0)
-})
-</script>
-
-<style lang="postcss" src="./STextarea.css"></style>