@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/shared/data-display/SCodeEditor.vue

@@ -1,453 +0,0 @@
-<template>
-  <Codemirror
-    v-bind="ownedAttrs.bindings()"
-    class="s-code-editor"
-    :data-variant="validatedVariant"
-    :data-viewport="validatedViewport"
-    :data-line-numbers="resolvedCapabilities.lineNumbers ? 'visible' : 'hidden'"
-    :model-value="validatedModelValue"
-    :autofocus="validatedAutofocus"
-    :indent-with-tab="resolvedCapabilities.indentation.keyBehavior === 'indent'"
-    :tab-size="resolvedCapabilities.indentation.tabSize"
-    :extensions="resolvedExtensions"
-    @ready="onReady"
-    @update:model-value="onUpdate"
-  />
-  <div
-    v-if="validatedDiagnostics.length > 0"
-    :id="diagnosticsOwnerId"
-    class="s-code-editor__diagnostics"
-    role="status"
-    aria-live="polite"
-    aria-atomic="true"
-  >
-    <ul>
-      <li v-for="diagnostic in validatedDiagnostics" :key="diagnostic.id">
-        {{ diagnostic.message }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, ref, shallowRef, useId, watch } from 'vue'
-import { Codemirror } from 'vue-codemirror'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { EditorSelection, EditorState, type Extension } from '@codemirror/state'
-import { lintGutter, setDiagnostics, type Diagnostic as CodeMirrorDiagnostic } from '@codemirror/lint'
-import { EditorView, lineNumbers, placeholder as codeMirrorPlaceholder } from '@codemirror/view'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import { useRuntimeTheme } from '../../../internal/runtimeTheme'
-import {
-  validateBoolean,
-  validateBoundedInteger,
-  validateDomId,
-  validateNonEmptyString,
-} from '../../../internal/runtimeContract'
-import { useTrustedCodeEditorExtensions } from '../../../internal/codeEditorExtensions'
-import {
-  CODE_EDITOR_VARIANTS,
-  CODE_EDITOR_VIEWPORTS,
-  type CodeEditorCapabilitiesContract,
-  type CodeEditorLanguageContract,
-  validateCodeEditorCapabilities,
-  validateCodeEditorLanguage,
-  validateCodeEditorVariant,
-  validateCodeEditorViewport,
-} from '../../../internal/codeEditorContract'
-import { getCodeMirrorLanguageExtension, resolveCodeLanguageKey } from '../codeLanguages'
-import {
-  type SCodeEditorDiagnostic,
-  type SCodeEditorDiagnosticId,
-  type SCodeEditorApi,
-  type SCodeEditorRange,
-  type SCodeEditorSelectionRange,
-  type SCodeEditorSelectionSnapshot,
-  type SCodeEditorViewState,
-  validateCodeEditorDiagnostics,
-  validateCodeEditorRange,
-  validateCodeEditorViewState,
-} from './codeEditor'
-
-defineOptions({ inheritAttrs: false })
-
-export type SCodeEditorViewport = typeof CODE_EDITOR_VIEWPORTS[number]
-export type SCodeEditorVariant = typeof CODE_EDITOR_VARIANTS[number]
-/** Явный язык либо детектирование из обязательного filePath. / Explicit language or detection from a required filePath. */
-export type SCodeEditorLanguage = CodeEditorLanguageContract
-/** Явные возможности leaf-редактора. / Explicit capabilities of the leaf editor. */
-export type SCodeEditorCapabilities = CodeEditorCapabilitiesContract
-
-/** Exact-координаты документа для cursor activity. / Exact document coordinates emitted for cursor activity. */
-export interface SCodeEditorCursorActivity {
-  pos: number
-  line: number
-  column: number
-  lineFrom: number
-  lineTo: number
-  lineText: string
-}
-
-/** Public readiness snapshot без раскрытия third-party EditorView. / Public readiness snapshot without exposing the third-party EditorView instance. */
-export interface SCodeEditorReadyPayload {
-  documentLength: number
-  viewport: SCodeEditorViewport
-  variant: SCodeEditorVariant
-  locked: boolean
-}
-
-/** Подтверждённое применение selection и источник вызова. / Confirmed selection application and its initiating API. */
-export interface SCodeEditorSelectionAppliedPayload {
-  position: number
-  source: 'controlled' | 'imperative'
-}
-
-type AccessibleName =
-  | { ariaLabel: string; ariaLabelledby?: never }
-  | { ariaLabel?: never; ariaLabelledby: string }
-
-/** Public SCodeEditor contract; размер задаёт только semantic viewport. / Public SCodeEditor contract; sizing is expressed only by semantic viewport. */
-export type Props = AccessibleName & {
-  modelValue: string
-  language: SCodeEditorLanguage
-  capabilities: SCodeEditorCapabilities
-  readOnly?: boolean
-  disabled?: boolean
-  autofocus?: boolean
-  placeholder?: string
-  viewport?: SCodeEditorViewport
-  variant?: SCodeEditorVariant
-  nextSelectionPos?: number | null
-  /** Controlled diagnostics expressed only through serializable UI-kit ranges. */
-  diagnostics?: readonly SCodeEditorDiagnostic<SCodeEditorDiagnosticId>[]
-  /** DOM id supplemental status/diagnostic owner. / DOM id of a supplemental status/diagnostic owner. */
-  ariaDescribedby?: string
-  /** Помечает editor content невалидным без владения presentation диагностики. / Marks the editor content as invalid without owning diagnostic presentation. */
-  invalid?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  readOnly: false,
-  disabled: false,
-  autofocus: false,
-  placeholder: undefined,
-  viewport: 'content',
-  variant: 'code',
-  nextSelectionPos: null,
-  diagnostics: () => [],
-  ariaDescribedby: undefined,
-  invalid: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'cursor-activity': [payload: SCodeEditorCursorActivity]
-  'selection-change': [payload: SCodeEditorSelectionRange]
-  'view-state-change': [payload: SCodeEditorViewState]
-  'selection-applied': [payload: SCodeEditorSelectionAppliedPayload]
-  ready: [payload: SCodeEditorReadyPayload]
-}>()
-
-const ownedAttrs = useOwnedAttrs({ component: 'SCodeEditor', owner: 'CodeMirror root adapter' })
-useInteractiveLeafRegistration({ owner: 'SCodeEditor' })
-
-const runtimeTheme = useRuntimeTheme()
-const trustedChannel = useTrustedCodeEditorExtensions()
-const editorView = shallowRef<EditorView | null>(null)
-const pendingControlledSelection = ref<number | null>(null)
-const diagnosticsOwnerId = `s-code-editor-diagnostics-${useId()}`
-let scrollOwner: HTMLElement | null = null
-let lastSelection: SCodeEditorSelectionRange | null = null
-let lastViewState: SCodeEditorViewState | null = null
-
-const validatedModelValue = computed(() => {
-  if (typeof props.modelValue === 'string') return props.modelValue
-  throw new TypeError('SCodeEditor: modelValue должен быть строкой. / SCodeEditor: modelValue must be a string.')
-})
-
-const validatedViewport = computed<SCodeEditorViewport>(() => validateCodeEditorViewport('SCodeEditor', props.viewport))
-const validatedVariant = computed<SCodeEditorVariant>(() => validateCodeEditorVariant('SCodeEditor', props.variant))
-const validatedAutofocus = computed(() => validateBoolean('SCodeEditor', 'autofocus', props.autofocus))
-const validatedReadOnly = computed(() => validateBoolean('SCodeEditor', 'readOnly', props.readOnly))
-const validatedDisabled = computed(() => validateBoolean('SCodeEditor', 'disabled', props.disabled))
-const validatedInvalid = computed(() => validateBoolean('SCodeEditor', 'invalid', props.invalid))
-const isLocked = computed(() => validatedReadOnly.value || validatedDisabled.value)
-const validatedDiagnostics = computed(() => validateCodeEditorDiagnostics(
-  'SCodeEditor',
-  props.diagnostics,
-  validatedModelValue.value.length,
-))
-
-const resolvedLanguage = computed((): SCodeEditorLanguage => {
-  const language = validateCodeEditorLanguage('SCodeEditor', props.language)
-  const extension = getCodeMirrorLanguageExtension(language)
-  const languageKey = resolveCodeLanguageKey(language)
-  if (!extension && languageKey !== 'plaintext' && languageKey !== 'text') {
-    const coordinate = language.mode === 'explicit'
-      ? `language.id ${JSON.stringify(language.id)}`
-      : `language.filePath ${JSON.stringify(language.filePath)}`
-    throw new RangeError(`SCodeEditor: ${coordinate} не поддерживается. / SCodeEditor: ${coordinate} is not supported.`)
-  }
-  return language
-})
-
-const resolvedCapabilities = computed((): SCodeEditorCapabilities =>
-  validateCodeEditorCapabilities('SCodeEditor', props.capabilities))
-
-const contentAttributes = computed((): Record<string, string> => {
-  if (props.ariaLabel !== undefined && props.ariaLabelledby !== undefined) {
-    throw new TypeError('SCodeEditor: задайте только ariaLabel или ariaLabelledby. / SCodeEditor: provide only ariaLabel or ariaLabelledby.')
-  }
-  const attributes: Record<string, string> = {}
-  if (props.ariaLabel !== undefined) {
-    attributes['aria-label'] = validateNonEmptyString('SCodeEditor', 'ariaLabel', props.ariaLabel)
-  } else if (props.ariaLabelledby !== undefined) {
-    attributes['aria-labelledby'] = validateDomId('SCodeEditor', 'ariaLabelledby', props.ariaLabelledby)
-  } else {
-    throw new TypeError('SCodeEditor: требуется ariaLabel или ariaLabelledby. / SCodeEditor: ariaLabel or ariaLabelledby is required.')
-  }
-  attributes.tabindex = validatedDisabled.value ? '-1' : '0'
-  const describedBy = props.ariaDescribedby === undefined
-    ? []
-    : [validateDomId('SCodeEditor', 'ariaDescribedby', props.ariaDescribedby)]
-  if (validatedDiagnostics.value.length > 0) describedBy.push(diagnosticsOwnerId)
-  if (describedBy.length > 0) attributes['aria-describedby'] = describedBy.join(' ')
-  if (validatedInvalid.value) attributes['aria-invalid'] = 'true'
-  if (validatedReadOnly.value) attributes['aria-readonly'] = 'true'
-  if (validatedDisabled.value) attributes['aria-disabled'] = 'true'
-  return attributes
-})
-
-const resolvedExtensions = computed<Extension[]>(() => {
-  const capabilities = resolvedCapabilities.value
-  const language = resolvedLanguage.value
-  const result: Extension[] = [...(trustedChannel?.extensions.value ?? [])]
-  if (validatedViewport.value === 'document') {
-    result.push(EditorView.theme({
-      '&.cm-editor': {
-        height: 'auto',
-        maxHeight: 'none',
-        overflow: 'visible',
-      },
-      '.cm-scroller': {
-        height: 'auto',
-        overflow: 'visible',
-      },
-    }))
-    result.push(EditorView.lineWrapping)
-  }
-  const languageExtension = getCodeMirrorLanguageExtension(language)
-  if (languageExtension) result.push(languageExtension)
-  if (runtimeTheme.value.mode === 'dark') result.push(oneDark)
-  if (capabilities.lineNumbers) result.push(lineNumbers())
-  if (validatedDiagnostics.value.length > 0) result.push(lintGutter())
-  if (props.placeholder !== undefined) result.push(codeMirrorPlaceholder(validateNonEmptyString('SCodeEditor', 'placeholder', props.placeholder)))
-  result.push(EditorState.readOnly.of(isLocked.value))
-  result.push(EditorView.editable.of(!isLocked.value))
-  result.push(EditorView.contentAttributes.of(contentAttributes.value))
-  if (capabilities.keyInterceptor && !isLocked.value) {
-    result.push(EditorView.domEventHandlers({ keydown: (event) => {
-      const handled = capabilities.keyInterceptor?.(event)
-      if (!validateBoolean('SCodeEditor', 'capabilities.keyInterceptor return value', handled)) return false
-      event.preventDefault()
-      return true
-    } }))
-  }
-  result.push(EditorView.updateListener.of((update) => {
-    editorView.value = update.view
-    if (update.selectionSet || update.docChanged) emitSelectionAndViewState(update.view)
-    if ((isLocked.value && capabilities.cursorActivity !== 'always') || (!update.selectionSet && !update.docChanged)) return
-    const pos = update.state.selection.main.head
-    const line = update.state.doc.lineAt(pos)
-    emit('cursor-activity', {
-      pos,
-      line: line.number,
-      column: pos - line.from + 1,
-      lineFrom: line.from,
-      lineTo: line.to,
-      lineText: update.state.doc.sliceString(line.from, line.to),
-    })
-  }))
-  return result
-})
-
-const validateSelectionPosition = (position: unknown, documentLength: number, coordinate: string): number =>
-  validateBoundedInteger('SCodeEditor', coordinate, position, { minimum: 0, maximum: documentLength })
-
-const dispatchSelection = (position: number, source: SCodeEditorSelectionAppliedPayload['source']): void => {
-  const view = editorView.value
-  if (!view) throw new Error('SCodeEditor: editor не готов; дождитесь ready. / SCodeEditor: editor is not ready; wait for ready.')
-  const validated = validateSelectionPosition(position, view.state.doc.length, `${source} selection position`)
-  view.dispatch({ selection: EditorSelection.single(validated), scrollIntoView: true })
-  view.focus()
-  emit('selection-applied', { position: validated, source })
-}
-
-const requireEditorView = (): EditorView => {
-  const view = editorView.value
-  if (!view) throw new Error('SCodeEditor: editor не готов; дождитесь ready. / SCodeEditor: editor is not ready; wait for ready.')
-  return view
-}
-
-const freezeSelection = (view: EditorView): SCodeEditorSelectionRange => {
-  const range = view.state.selection.main
-  return Object.freeze({
-    anchor: range.anchor,
-    head: range.head,
-    from: range.from,
-    to: range.to,
-    empty: range.empty,
-  })
-}
-
-const captureViewStateFrom = (view: EditorView): SCodeEditorViewState => Object.freeze({
-  selection: freezeSelection(view),
-  scrollTop: view.scrollDOM.scrollTop,
-  scrollLeft: view.scrollDOM.scrollLeft,
-})
-
-const selectionsEqual = (
-  left: SCodeEditorSelectionRange | null,
-  right: SCodeEditorSelectionRange,
-): boolean => left !== null
-  && left.anchor === right.anchor
-  && left.head === right.head
-  && left.from === right.from
-  && left.to === right.to
-  && left.empty === right.empty
-
-const viewStatesEqual = (left: SCodeEditorViewState | null, right: SCodeEditorViewState): boolean =>
-  left !== null
-  && selectionsEqual(left.selection, right.selection)
-  && left.scrollTop === right.scrollTop
-  && left.scrollLeft === right.scrollLeft
-
-const emitSelectionAndViewState = (view: EditorView): void => {
-  const selection = freezeSelection(view)
-  if (!selectionsEqual(lastSelection, selection)) {
-    lastSelection = selection
-    emit('selection-change', selection)
-  }
-  const viewState = captureViewStateFrom(view)
-  if (!viewStatesEqual(lastViewState, viewState)) {
-    lastViewState = viewState
-    emit('view-state-change', viewState)
-  }
-}
-
-const emitScrollViewState = (): void => {
-  const view = editorView.value
-  if (!view) return
-  const viewState = captureViewStateFrom(view)
-  if (viewStatesEqual(lastViewState, viewState)) return
-  lastViewState = viewState
-  emit('view-state-change', viewState)
-}
-
-const detachScrollOwner = (): void => {
-  scrollOwner?.removeEventListener('scroll', emitScrollViewState)
-  scrollOwner = null
-}
-
-const attachScrollOwner = (view: EditorView): void => {
-  detachScrollOwner()
-  scrollOwner = view.scrollDOM
-  scrollOwner.addEventListener('scroll', emitScrollViewState, { passive: true })
-}
-
-const toCodeMirrorDiagnostics = (
-  diagnostics: readonly SCodeEditorDiagnostic<SCodeEditorDiagnosticId>[],
-): readonly CodeMirrorDiagnostic[] => diagnostics.map((diagnostic) => ({
-  from: diagnostic.from,
-  to: diagnostic.to,
-  severity: diagnostic.severity,
-  message: diagnostic.message,
-  ...(diagnostic.source === undefined ? {} : { source: diagnostic.source }),
-}))
-
-const syncDiagnostics = (view: EditorView): void => {
-  const diagnostics = validateCodeEditorDiagnostics('SCodeEditor', props.diagnostics, view.state.doc.length)
-  view.dispatch(setDiagnostics(view.state, toCodeMirrorDiagnostics(diagnostics)))
-}
-
-const onUpdate = (value: string): void => {
-  if (typeof value !== 'string') {
-    throw new TypeError('SCodeEditor: CodeMirror update payload должен быть строкой. / SCodeEditor: CodeMirror update payload must be a string.')
-  }
-  if (!isLocked.value) emit('update:modelValue', value)
-}
-
-const onReady = (payload: unknown): void => {
-  if (typeof payload !== 'object' || payload === null || !('view' in payload) || !((payload as { view?: unknown }).view instanceof EditorView)) {
-    throw new TypeError('SCodeEditor: CodeMirror ready payload должен содержать EditorView. / SCodeEditor: CodeMirror ready payload must contain EditorView.')
-  }
-  editorView.value = (payload as { view: EditorView }).view
-  attachScrollOwner(editorView.value)
-  syncDiagnostics(editorView.value)
-  const readyPayload: SCodeEditorReadyPayload = {
-    documentLength: editorView.value.state.doc.length,
-    viewport: validatedViewport.value,
-    variant: validatedVariant.value,
-    locked: isLocked.value,
-  }
-  emit('ready', readyPayload)
-  if (pendingControlledSelection.value !== null) {
-    const position = pendingControlledSelection.value
-    pendingControlledSelection.value = null
-    dispatchSelection(position, 'controlled')
-  }
-}
-
-watch(() => props.nextSelectionPos, (position) => {
-  if (position === null || position === undefined) return
-  if (!Number.isInteger(position)) {
-    throw new TypeError(`SCodeEditor: nextSelectionPos должен быть целым числом; получено ${String(position)}. / SCodeEditor: nextSelectionPos must be an integer; received ${String(position)}.`)
-  }
-  if (!editorView.value) {
-    pendingControlledSelection.value = position
-    return
-  }
-  dispatchSelection(position, 'controlled')
-}, { immediate: true })
-
-watch(validatedDiagnostics, () => {
-  if (editorView.value) syncDiagnostics(editorView.value)
-})
-
-onBeforeUnmount(() => {
-  detachScrollOwner()
-  editorView.value = null
-  lastSelection = null
-  lastViewState = null
-})
-
-defineExpose<SCodeEditorApi>({
-  applySelection: (position: number) => dispatchSelection(position, 'imperative'),
-  revealRange: (range: SCodeEditorRange) => {
-    const view = requireEditorView()
-    const validated = validateCodeEditorRange('SCodeEditor', 'revealRange', range, view.state.doc.length)
-    const effect = EditorView.scrollIntoView(EditorSelection.range(validated.from, validated.to), { y: 'nearest' })
-    view.dispatch({ effects: effect })
-  },
-  getSelection: (): SCodeEditorSelectionSnapshot => {
-    const view = requireEditorView()
-    const selection = freezeSelection(view)
-    return Object.freeze({ ...selection, text: view.state.doc.sliceString(selection.from, selection.to) })
-  },
-  captureViewState: (): SCodeEditorViewState => captureViewStateFrom(requireEditorView()),
-  applyViewState: (viewState: SCodeEditorViewState) => {
-    const view = requireEditorView()
-    const validated = validateCodeEditorViewState('SCodeEditor', viewState, view.state.doc.length)
-    view.dispatch({ selection: EditorSelection.range(validated.selection.anchor, validated.selection.head) })
-    view.scrollDOM.scrollTop = validated.scrollTop
-    view.scrollDOM.scrollLeft = validated.scrollLeft
-    emitSelectionAndViewState(view)
-  },
-  focus: () => {
-    requireEditorView().focus()
-  },
-})
-</script>
-
-<style lang="postcss" src="./SCodeEditor.css" scoped></style>