starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-30 14:12:07 +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

4
src-web/components/core/BulkPairEditor.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useMemo } from 'react';
import {Editor} from "./Editor/Editor";
import { Editor } from './Editor/Editor';
import type { PairEditorProps } from './PairEditor';
type Props = PairEditorProps;
@@ -10,6 +10,7 @@ export function BulkPairEditor({
namePlaceholder,
valuePlaceholder,
forceUpdateKey,
stateKey,
}: Props) {
const pairsText = useMemo(() => {
return pairs
@@ -33,6 +34,7 @@ export function BulkPairEditor({
<Editor
useTemplating
autocompleteVariables
stateKey={`bulk_pair.${stateKey}`}
forceUpdateKey={forceUpdateKey}
placeholder={`${namePlaceholder ?? 'name'}: ${valuePlaceholder ?? 'value'}`}
defaultValue={pairsText}

2
src-web/components/core/Dropdown.tsx
View File

@@ -112,7 +112,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
close() {
handleClose();
},
}));
}), [handleClose, isOpen, setIsOpen]);
useHotKey(hotKeyAction ?? null, () => {
setDefaultSelectedIndex(0);

86
src-web/components/core/Editor/Editor.tsx
View File

@@ -1,5 +1,5 @@
import { defaultKeymap } from '@codemirror/commands';
import { forceParsing } from '@codemirror/language';
import { defaultKeymap, historyField } from '@codemirror/commands';
import { foldState, forceParsing } from '@codemirror/language';
import { Compartment, EditorState, type Extension } from '@codemirror/state';
import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
import type { EnvironmentVariable } from '@yaakapp-internal/models';
@@ -8,12 +8,12 @@ import classNames from 'classnames';
import { EditorView } from 'codemirror';
import type { MutableRefObject, ReactNode } from 'react';
import {
useEffect,
Children,
cloneElement,
forwardRef,
isValidElement,
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useRef,
@@ -71,6 +71,7 @@ export interface EditorProps {
extraExtensions?: Extension[];
actions?: ReactNode;
hideGutter?: boolean;
stateKey: string | null;
}
const emptyVariables: EnvironmentVariable[] = [];
@@ -102,6 +103,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
actions,
wrapLines,
hideGutter,
stateKey,
}: EditorProps,
ref,
) {
@@ -115,7 +117,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
}
const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
useImperativeHandle(ref, () => cm.current?.view);
useImperativeHandle(ref, () => cm.current?.view, []);
// Use ref so we can update the handler without re-initializing the editor
const handleChange = useRef<EditorProps['onChange']>(onChange);
@@ -289,7 +291,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
return;
}
let view: EditorView;
try {
const languageCompartment = new Compartment();
const langExt = getLanguageExtension({
@@ -303,32 +304,38 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
onClickMissingVariable,
onClickPathParameter,
});
const extensions = [
languageCompartment.of(langExt),
placeholderCompartment.current.of(
placeholderExt(placeholderElFromText(placeholder ?? '')),
),
wrapLinesCompartment.current.of(wrapLines ? [EditorView.lineWrapping] : []),
...getExtensions({
container,
readOnly,
singleLine,
hideGutter,
stateKey,
onChange: handleChange,
onPaste: handlePaste,
onPasteOverwrite: handlePasteOverwrite,
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
}),
...(extraExtensions ?? []),
];
const state = EditorState.create({
doc: `${defaultValue ?? ''}`,
extensions: [
languageCompartment.of(langExt),
placeholderCompartment.current.of(
placeholderExt(placeholderElFromText(placeholder ?? '')),
),
wrapLinesCompartment.current.of(wrapLines ? [EditorView.lineWrapping] : []),
...getExtensions({
container,
readOnly,
singleLine,
hideGutter,
onChange: handleChange,
onPaste: handlePaste,
onPasteOverwrite: handlePasteOverwrite,
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
}),
...(extraExtensions ?? []),
],
});
const cachedJsonState = getCachedEditorState(stateKey);
const state = cachedJsonState
? EditorState.fromJSON(
cachedJsonState,
{ extensions },
{ fold: foldState, history: historyField },
)
: EditorState.create({ doc: `${defaultValue ?? ''}`, extensions });
view = new EditorView({ state, parent: container });
const view = new EditorView({ state, parent: container });
// For large documents, the parser may parse the max number of lines and fail to add
// things like fold markers because of it.
@@ -459,6 +466,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
});
function getExtensions({
stateKey,
container,
readOnly,
singleLine,
@@ -470,6 +478,7 @@ function getExtensions({
onBlur,
onKeyDown,
}: Pick<EditorProps, 'singleLine' | 'readOnly' | 'hideGutter'> & {
stateKey: EditorProps['stateKey'];
container: HTMLDivElement | null;
onChange: MutableRefObject<EditorProps['onChange']>;
onPaste: MutableRefObject<EditorProps['onPaste']>;
@@ -519,6 +528,7 @@ function getExtensions({
EditorView.updateListener.of((update) => {
if (onChange && update.docChanged) {
onChange.current?.(update.state.doc.toString());
saveCachedEditorState(stateKey, update.state);
}
}),
];
@@ -529,3 +539,21 @@ const placeholderElFromText = (text: string) => {
el.innerHTML = text.replaceAll('\n', '<br/>');
return el;
};
function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
if (!stateKey || state == null) return;
const stateJson = state.toJSON({ history: historyField, folds: foldState });
sessionStorage.setItem(stateKey, JSON.stringify(stateJson));
}
function getCachedEditorState(stateKey: string | null) {
if (stateKey == null) return;
const serializedState = stateKey ? sessionStorage.getItem(stateKey) : null;
if (serializedState == null) return;
try {
return JSON.parse(serializedState);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (e) {
return null;
}
}

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}

110
src-web/components/core/PairEditor.tsx
View File

@@ -1,8 +1,9 @@
import { deepEqual } from '@tanstack/react-router';
import classNames from 'classnames';
import type { EditorView } from 'codemirror';
import {
Fragment,
forwardRef,
Fragment,
useCallback,
useEffect,
useImperativeHandle,
@@ -12,8 +13,8 @@ import {
} from 'react';
import type { XYCoord } from 'react-dnd';
import { useDrag, useDrop } from 'react-dnd';
import { v4 as uuid } from 'uuid';
import { usePrompt } from '../../hooks/usePrompt';
import { generateId } from '../../lib/generateId';
import { DropMarker } from '../DropMarker';
import { SelectFile } from '../SelectFile';
import { Checkbox } from './Checkbox';
@@ -31,21 +32,22 @@ export interface PairEditorRef {
}
export type PairEditorProps = {
pairs: Pair[];
onChange: (pairs: Pair[]) => void;
forceUpdateKey?: string;
allowFileValues?: boolean;
className?: string;
forceUpdateKey?: string;
nameAutocomplete?: GenericCompletionConfig;
nameAutocompleteVariables?: boolean;
namePlaceholder?: string;
nameValidate?: InputProps['validate'];
noScroll?: boolean;
onChange: (pairs: Pair[]) => void;
pairs: Pair[];
stateKey: InputProps['stateKey'];
valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
valueAutocompleteVariables?: boolean;
valuePlaceholder?: string;
valueType?: 'text' | 'password';
nameAutocomplete?: GenericCompletionConfig;
valueAutocomplete?: (name: string) => GenericCompletionConfig | undefined;
nameAutocompleteVariables?: boolean;
valueAutocompleteVariables?: boolean;
allowFileValues?: boolean;
nameValidate?: InputProps['validate'];
valueValidate?: InputProps['validate'];
noScroll?: boolean;
};
export type Pair = {
@@ -65,21 +67,22 @@ type PairContainer = {
export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function PairEditor(
{
stateKey,
allowFileValues,
className,
forceUpdateKey,
nameAutocomplete,
nameAutocompleteVariables,
namePlaceholder,
nameValidate,
valueType,
onChange,
noScroll,
onChange,
pairs: originalPairs,
valueAutocomplete,
valueAutocompleteVariables,
valuePlaceholder,
valueType,
valueValidate,
allowFileValues,
}: PairEditorProps,
ref,
) {
@@ -93,20 +96,28 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
return [...pairs, newPairContainer()];
});
useImperativeHandle(ref, () => ({
focusValue(index: number) {
const id = pairs[index]?.id ?? 'n/a';
setForceFocusValuePairId(id);
},
}));
useImperativeHandle(
ref,
() => ({
focusValue(index: number) {
const id = pairs[index]?.id ?? 'n/a';
setForceFocusValuePairId(id);
},
}),
[pairs],
);
useEffect(() => {
// Remove empty headers on initial render
// TODO: Make this not refresh the entire editor when forceUpdateKey changes, using some
// sort of diff method or deterministic IDs based on array index and update key
const nonEmpty = originalPairs.filter((h) => !(h.name === '' && h.value === ''));
const pairs = nonEmpty.map((pair) => newPairContainer(pair));
setPairs([...pairs, newPairContainer()]);
const nonEmpty = originalPairs.filter(
(h, i) => i !== originalPairs.length - 1 && !(h.name === '' && h.value === ''),
);
const newPairs = nonEmpty.map((pair) => newPairContainer(pair));
if (!deepEqual(pairs, newPairs)) {
setPairs(pairs);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [forceUpdateKey]);
@@ -211,28 +222,29 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
<Fragment key={p.id}>
{hoveredIndex === i && <DropMarker />}
<PairEditorRow
pairContainer={p}
className="py-1"
isLast={isLast}
allowFileValues={allowFileValues}
nameAutocompleteVariables={nameAutocompleteVariables}
valueAutocompleteVariables={valueAutocompleteVariables}
valueType={valueType}
className="py-1"
forceFocusNamePairId={forceFocusNamePairId}
forceFocusValuePairId={forceFocusValuePairId}
forceUpdateKey={forceUpdateKey}
index={i}
isLast={isLast}
nameAutocomplete={nameAutocomplete}
valueAutocomplete={valueAutocomplete}
nameAutocompleteVariables={nameAutocompleteVariables}
namePlaceholder={namePlaceholder}
valuePlaceholder={valuePlaceholder}
nameValidate={nameValidate}
valueValidate={valueValidate}
onChange={handleChange}
onFocus={handleFocus}
onDelete={handleDelete}
onEnd={handleEnd}
onFocus={handleFocus}
onMove={handleMove}
index={i}
pairContainer={p}
stateKey={stateKey}
valueAutocomplete={valueAutocomplete}
valueAutocompleteVariables={valueAutocompleteVariables}
valuePlaceholder={valuePlaceholder}
valueType={valueType}
valueValidate={valueValidate}
/>
</Fragment>
);
@@ -260,17 +272,18 @@ type PairEditorRowProps = {
index: number;
} & Pick<
PairEditorProps,
| 'nameAutocomplete'
| 'valueAutocomplete'
| 'nameAutocompleteVariables'
| 'valueAutocompleteVariables'
| 'valueType'
| 'namePlaceholder'
| 'valuePlaceholder'
| 'nameValidate'
| 'valueValidate'
| 'forceUpdateKey'
| 'allowFileValues'
| 'forceUpdateKey'
| 'nameAutocomplete'
| 'nameAutocompleteVariables'
| 'namePlaceholder'
| 'nameValidate'
| 'stateKey'
| 'valueAutocomplete'
| 'valueAutocompleteVariables'
| 'valuePlaceholder'
| 'valueType'
| 'valueValidate'
>;
function PairEditorRow({
@@ -279,8 +292,8 @@ function PairEditorRow({
forceFocusNamePairId,
forceFocusValuePairId,
forceUpdateKey,
isLast,
index,
isLast,
nameAutocomplete,
nameAutocompleteVariables,
namePlaceholder,
@@ -291,6 +304,7 @@ function PairEditorRow({
onFocus,
onMove,
pairContainer,
stateKey,
valueAutocomplete,
valueAutocompleteVariables,
valuePlaceholder,
@@ -434,6 +448,7 @@ function PairEditorRow({
ref={nameInputRef}
hideLabel
useTemplating
stateKey={`name.${pairContainer.id}.${stateKey}`}
wrapLines={false}
readOnly={pairContainer.pair.readOnlyName}
size="sm"
@@ -476,6 +491,7 @@ function PairEditorRow({
ref={valueInputRef}
hideLabel
useTemplating
stateKey={`value.${pairContainer.id}.${stateKey}`}
wrapLines={false}
size="sm"
containerClassName={classNames(isLast && 'border-dashed')}
@@ -575,7 +591,7 @@ function PairEditorRow({
}
const newPairContainer = (initialPair?: Pair): PairContainer => {
const id = initialPair?.id ?? uuid();
const id = initialPair?.id ?? generateId();
const pair = initialPair ?? { name: '', value: '', enabled: true, isFile: false };
return { id, pair };
};

19
src-web/components/core/PlainInput.tsx
View File

@@ -1,13 +1,14 @@
import classNames from 'classnames';
import type { HTMLAttributes } from 'react';
import type { HTMLAttributes, FocusEvent } from 'react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import { IconButton } from './IconButton';
import type { InputProps } from './Input';
import { HStack } from './Stacks';
export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type'> &
export type PlainInputProps = Omit<InputProps, 'wrapLines' | 'onKeyDown' | 'type' | 'stateKey'> &
Pick<HTMLAttributes<HTMLInputElement>, 'onKeyDownCapture'> & {
onFocusRaw?: HTMLAttributes<HTMLInputElement>['onFocus'];
type?: 'text' | 'password' | 'number';
step?: number;
};
@@ -33,7 +34,10 @@ export function PlainInput({
type = 'text',
validate,
autoSelect,
...props
placeholder,
autoFocus,
onKeyDownCapture,
onFocusRaw,
}: PlainInputProps) {
const [obscured, setObscured] = useStateWithDeps(type === 'password', [type]);
const [currentValue, setCurrentValue] = useState(defaultValue ?? '');
@@ -41,14 +45,15 @@ export function PlainInput({
const inputRef = useRef<HTMLInputElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const handleFocus = useCallback(() => {
const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {
onFocusRaw?.(e);
setFocused(true);
if (autoSelect) {
inputRef.current?.select();
textareaRef.current?.select();
}
onFocus?.();
}, [autoSelect, onFocus]);
}, [autoSelect, onFocus, onFocusRaw]);
const handleBlur = useCallback(() => {
setFocused(false);
@@ -135,7 +140,9 @@ export function PlainInput({
className={classNames(commonClassName, 'h-auto')}
onFocus={handleFocus}
onBlur={handleBlur}
{...props}
autoFocus={autoFocus}
placeholder={placeholder}
onKeyDownCapture={onKeyDownCapture}
/>
</HStack>
{type === 'password' && (