Fixed backspace cursor position (#2365)

* fixed backspace cursor position

* changes file

* removed comment
This commit is contained in:
Martavis Parker 2021-10-04 17:26:21 -07:00 committed by GitHub
parent c93a53675d
commit b1d4b26cfa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 39 deletions

View file

@ -0,0 +1 @@
- Fixed cursor position after using the backspace key

View file

@ -1,13 +1,14 @@
import React, { useCallback, useRef } from "react";
import AceEditor from "react-ace";
import ReactAce from "react-ace/lib/ace";
import { Ace } from "ace-builds";
import { IAceEditor } from "react-ace/lib/types";
import classnames from "classnames";
import "ace-builds/src-noconflict/mode-sql";
import "ace-builds/src-noconflict/ext-linking";
import "ace-builds/src-noconflict/ext-language_tools";
import { noop } from "lodash";
import { IAceEditor } from "react-ace/lib/types";
import "./mode";
import "./theme";
@ -47,6 +48,47 @@ const FleetAce = ({
handleSubmit = noop,
}: IFleetAceProps) => {
const editorRef = useRef<ReactAce>(null);
const wrapperClass = classnames(wrapperClassName, {
[`${baseClass}__wrapper--error`]: !!error,
});
const fixCursorPosition = (
startPosition: Ace.Point | undefined,
offset: number
) => {
if (startPosition) {
const newColumn = startPosition.column + offset;
editorRef.current?.editor.moveCursorTo(startPosition.row, newColumn);
}
};
const fixHotkeys = (editor: IAceEditor) => {
editor.commands.removeCommand("gotoline");
editor.commands.removeCommand("find");
onLoad && onLoad(editor);
};
const handleDelete = (deleteCommand: string) => {
let cursorOffset = 0;
const currentText = editorRef.current?.editor.getValue();
const selectedText = editorRef.current?.editor.getSelectedText();
const selectedStartPosition = editorRef.current?.editor
.getSelection()
.getCursor();
if (selectedText) {
const remainingText = currentText?.replace(selectedText, "");
if (typeof remainingText !== "undefined") {
onChange && onChange(remainingText);
editorRef.current?.editor.clearSelection();
}
} else {
cursorOffset = -1;
editorRef.current?.editor.execCommand(deleteCommand);
}
fixCursorPosition(selectedStartPosition, cursorOffset);
};
const renderLabel = useCallback(() => {
const labelText = error || label;
@ -71,44 +113,6 @@ const FleetAce = ({
return false;
};
const wrapperClass = classnames(wrapperClassName, {
[`${baseClass}__wrapper--error`]: !!error,
});
const handleDelete = (deleteCommand: string) => {
const currentText = editorRef.current?.editor.getValue();
const selectedText = editorRef.current?.editor.getSelectedText();
const selectedStartPosition = editorRef.current?.editor
.getSelection()
.getCursor();
if (selectedText) {
const remainingText = currentText?.replace(selectedText, "");
if (typeof remainingText !== "undefined") {
onChange && onChange(remainingText);
editorRef.current?.editor.clearSelection();
}
} else {
editorRef.current?.editor.execCommand(deleteCommand);
}
// not sure why adding zero works smh
if (selectedStartPosition && selectedStartPosition.column) {
const newColumn = selectedStartPosition?.column + 0;
selectedStartPosition &&
editorRef.current?.editor.moveCursorTo(
selectedStartPosition.row,
newColumn
);
}
};
const fixHotkeys = (editor: IAceEditor) => {
editor.commands.removeCommand("gotoline");
editor.commands.removeCommand("find");
onLoad && onLoad(editor);
};
return (
<div className={wrapperClass}>
{renderLabel()}