starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-18 23:19:39 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Preserve Editor State (#151)

Browse Source
This commit is contained in:
Gregory Schier
2024-12-31 07:31:43 -08:00
committed by GitHub
parent 31f2bff0f6
commit 135c366e32
33 changed files with 295 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src-web/components/core/Input.tsx
View File

@@ -1,6 +1,6 @@
import classNames from 'classnames';
import type { EditorView } from 'codemirror';
import type { HTMLAttributes, ReactNode } from 'react';
import type { ReactNode } from 'react';
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import type { EditorProps } from './Editor/Editor';
@@ -8,44 +8,41 @@ import { Editor } from './Editor/Editor';
import { IconButton } from './IconButton';
import { HStack } from './Stacks';
export type InputProps = Omit<
HTMLAttributes<HTMLInputElement>,
'onChange' | 'onFocus' | 'onKeyDown' | 'onPaste'
> &
Pick<
EditorProps,
| 'language'
| 'useTemplating'
| 'autocomplete'
| 'forceUpdateKey'
| 'autoFocus'
| 'autoSelect'
| 'autocompleteVariables'
| 'onKeyDown'
| 'readOnly'
> & {
name?: string;
type?: 'text' | 'password';
label: ReactNode;
hideLabel?: boolean;
labelPosition?: 'top' | 'left';
labelClassName?: string;
containerClassName?: string;
onChange?: (value: string) => void;
onFocus?: () => void;
onBlur?: () => void;
onPaste?: (value: string) => void;
onPasteOverwrite?: (value: string) => void;
defaultValue?: string;
leftSlot?: ReactNode;
rightSlot?: ReactNode;
size?: 'xs' | 'sm' | 'md' | 'auto';
className?: string;
placeholder?: string;
validate?: boolean | ((v: string) => boolean);
require?: boolean;
wrapLines?: boolean;
};
export type InputProps = Pick<
EditorProps,
| 'language'
| 'useTemplating'
| 'autocomplete'
| 'forceUpdateKey'
| 'autoFocus'
| 'autoSelect'
| 'autocompleteVariables'
| 'onKeyDown'
| 'readOnly'
> & {
name?: string;
type?: 'text' | 'password';
label: ReactNode;
hideLabel?: boolean;
labelPosition?: 'top' | 'left';
labelClassName?: string;
containerClassName?: string;
onChange?: (value: string) => void;
onFocus?: () => void;
onBlur?: () => void;
onPaste?: (value: string) => void;
onPasteOverwrite?: (value: string) => void;
defaultValue?: string;
leftSlot?: ReactNode;
rightSlot?: ReactNode;
size?: 'xs' | 'sm' | 'md' | 'auto';
className?: string;
placeholder?: string;
validate?: boolean | ((v: string) => boolean);
require?: boolean;
wrapLines?: boolean;
stateKey: EditorProps['stateKey'];
};
export const Input = forwardRef<EditorView | undefined, InputProps>(function Input(
{
@@ -71,6 +68,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
type = 'text',
validate,
readOnly,
stateKey,
...props
}: InputProps,
ref,
@@ -172,6 +170,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
ref={ref}
id={id}
singleLine
stateKey={stateKey}
wrapLines={wrapLines}
onKeyDown={handleKeyDown}
type={type === 'password' && !obscured ? 'text' : type}