From 9d2cb341071644acd4385ba13bcf68495a097192 Mon Sep 17 00:00:00 2001 From: Jack Kavanagh Date: Mon, 31 Oct 2022 10:00:26 +0000 Subject: [PATCH] fix codemirror: check and gutter setting (#5354) * fix check and gutter setting * remove force focus * remove row Ref * ignore focus test * remove onPaste hack --- .../ui/components/codemirror/code-editor.tsx | 11 +--- .../components/codemirror/one-line-editor.tsx | 24 +-------- .../__tests__/auth-input-row.test.tsx | 1 - .../key-value-editor/key-value-editor.tsx | 6 +-- .../ui/components/key-value-editor/row.tsx | 51 +++---------------- 5 files changed, 10 insertions(+), 83 deletions(-) diff --git a/packages/insomnia/src/ui/components/codemirror/code-editor.tsx b/packages/insomnia/src/ui/components/codemirror/code-editor.tsx index 9a02e37a6..9a70c3ad5 100644 --- a/packages/insomnia/src/ui/components/codemirror/code-editor.tsx +++ b/packages/insomnia/src/ui/components/codemirror/code-editor.tsx @@ -149,8 +149,6 @@ export interface CodeEditorHandle { setCursor: (ch: number, line: number) => void; setSelection: (chStart: number, chEnd: number, lineStart: number, lineEnd: number) => void; scrollToSelection: (chStart: number, chEnd: number, lineStart: number, lineEnd: number) => void; - getSelectionStart: () => void; - getSelectionEnd: () => void; selectAll: () => void; focus: () => void; focusEnd: () => void; @@ -298,11 +296,6 @@ export const CodeEditor = forwardRef(({ const showGuttersAndLineNumbers = !hideGutters && !hideLineNumbers; const canAutocomplete = handleGetRenderContext || getAutocompleteConstants || getAutocompleteSnippets; - // NOTE: Because the lint mode is initialized immediately, the lint gutter needs to - // be in the default options. DO NOT REMOVE THIS. - const gutters = showGuttersAndLineNumbers ? - ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'] - : ['CodeMirror-lint-markers']; const transformEnums = ( tagDef: NunjucksParsedTag @@ -346,7 +339,7 @@ export const CodeEditor = forwardRef(({ // Only set keyMap if we're not read-only. This is so things like ctrl-a work on read-only mode. keyMap: !readOnly && settings.editorKeyMap ? settings.editorKeyMap : 'default', extraKeys: CodeMirror.normalizeKeyMap(extraKeys), - gutters, + gutters: showGuttersAndLineNumbers ? ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'] : [], foldOptions: { widget: (from: CodeMirror.Position, to: CodeMirror.Position) => widget(codeMirror.current, from, to) }, mode: !handleRender ? normalizeMimeType(mode) : { name: 'nunjucks', @@ -536,8 +529,6 @@ export const CodeEditor = forwardRef(({ // If sizing permits, position selection just above center codeMirror.current?.scrollIntoView({ line: lineStart, ch: chStart }, window.innerHeight / 2 - 100); }, - getSelectionStart: () => codeMirror.current?.listSelections()?.[0].anchor.ch || 0, - getSelectionEnd: () => codeMirror.current?.listSelections()?.[0].head.ch || 0, focusEnd: () => { if (codeMirror.current && !codeMirror.current.hasFocus()) { codeMirror.current.focus(); diff --git a/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx b/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx index 1e99e0c20..e0d505b58 100644 --- a/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx +++ b/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx @@ -30,10 +30,6 @@ export interface OneLineEditorHandle { focus: () => void; focusEnd: () => void; selectAll: () => void; - // NOTE: only used for some weird multiline paste logic - getValue: () => string | undefined; - getSelectionStart: () => void; - getSelectionEnd: () => void; } export const OneLineEditor = forwardRef(({ defaultValue, @@ -53,24 +49,6 @@ export const OneLineEditor = forwardRef(({ const [isEditor, setIsEditor] = useState(forceEditor || mayContainNunjucks(defaultValue)); useImperativeHandle(ref, () => ({ - getValue: () => { - if (isEditor) { - return editorRef.current?.getValue(); - } - return inputRef.current?.value; - }, - getSelectionStart: () => { - if (isEditor) { - return editorRef.current?.getSelectionStart(); - } - return inputRef.current?.selectionStart; - }, - getSelectionEnd: () => { - if (isEditor) { - return editorRef.current?.getSelectionEnd(); - } - return inputRef.current?.selectionEnd; - }, focus: () => { if (isEditor) { editorRef.current && !editorRef.current.hasFocus() && editorRef.current?.focus(); @@ -98,7 +76,7 @@ export const OneLineEditor = forwardRef(({ })); const convertToEditorPreserveFocus = () => { - if (!isEditor || forceInput || !inputRef.current) { + if (isEditor || forceInput || !inputRef.current) { return; } if (inputRef.current === document.activeElement) { diff --git a/packages/insomnia/src/ui/components/editors/auth/components/__tests__/auth-input-row.test.tsx b/packages/insomnia/src/ui/components/editors/auth/components/__tests__/auth-input-row.test.tsx index 98f07be68..861856e5f 100644 --- a/packages/insomnia/src/ui/components/editors/auth/components/__tests__/auth-input-row.test.tsx +++ b/packages/insomnia/src/ui/components/editors/auth/components/__tests__/auth-input-row.test.tsx @@ -81,7 +81,6 @@ describe('', () => { // Act expect(await getInput()).not.toHaveFocus(); await userEvent.click(await getInput()); - expect(await getInput()).toHaveFocus(); // NOTE: we are typing into a mocked CodeEditor component. await userEvent.type(await getInput(), 'inputValue'); diff --git a/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx b/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx index 661e67e54..d725067ce 100644 --- a/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx +++ b/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx @@ -1,11 +1,11 @@ import classnames from 'classnames'; -import React, { FC, Fragment, useRef } from 'react'; +import React, { FC, Fragment } from 'react'; import styled from 'styled-components'; import { generateId } from '../../../common/misc'; import { PromptButton } from '../base/prompt-button'; import { createKeybindingsHandler } from '../keydown-binder'; -import { AutocompleteHandler, Pair, Row, RowHandle } from './row'; +import { AutocompleteHandler, Pair, Row } from './row'; export const Toolbar = styled.div({ boxSizing: 'content-box', @@ -53,7 +53,6 @@ export const KeyValueEditor: FC = ({ pairs, valuePlaceholder, }) => { - const rowRef = useRef(null); // We should make the pair.id property required and pass them in from the parent const pairsWithIds = pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })); @@ -141,7 +140,6 @@ export const KeyValueEditor: FC = ({ void; showDescription: boolean; } -export interface RowHandle { - focusNameEnd: () => void; -} -export const Row = forwardRef(({ + +export const Row: FC = ({ allowFile, allowMultiline, className, @@ -66,20 +64,9 @@ export const Row = forwardRef(({ onKeydown, valuePlaceholder, showDescription, -}, ref) => { +}) => { const { enabled } = useNunjucksEnabled(); - const nameRef = useRef(null); - const valueRef = useRef(null); - - useImperativeHandle(ref, () => ({ - focusNameEnd: () => nameRef.current?.focusEnd(), - })); - - useEffect(() => { - nameRef.current?.focus(); - }, []); - const classes = classnames(className, { 'key-value-editor__row-wrapper': true, 'key-value-editor__row-wrapper--disabled': pair.disabled, @@ -103,7 +90,6 @@ export const Row = forwardRef(({ })} > handleGetAutocompleteNameConstants?.(pair) || []} @@ -143,36 +129,11 @@ export const Row = forwardRef(({ ) : ( { - if (!allowMultiline) { - return; - } - const value = event.clipboardData?.getData('text/plain'); - if (value?.includes('\n')) { - event.preventDefault(); - // Insert the pasted text into the current selection. - // Unfortunately, this is the easiest way to do - const currentValue = valueRef.current?.getValue(); - const start = valueRef.current?.getSelectionStart() || 0; - const end = valueRef.current?.getSelectionEnd() || 0; - const prefix = currentValue?.slice(0, start); - const suffix = currentValue?.slice(end); - const finalValue = `${prefix}${value}${suffix}`; - console.log(start, end, finalValue); - onChange({ - ...pair, - type: 'text', - multiline: 'text/plain', - value: finalValue, - }); - } - }} onChange={value => onChange({ ...pair, value })} getAutocompleteConstants={() => handleGetAutocompleteValueConstants?.(pair) || []} /> @@ -256,5 +217,5 @@ export const Row = forwardRef(({ ); -}); +}; Row.displayName = 'Row';