import { EditorState, Extension } from '@codemirror/state'; import { EditorView, KeyBinding, ViewUpdate } from '@codemirror/view'; import { type DbSchema } from '@neo4j-cypher/language-support'; import { Component } from 'react'; type DomEventHandlers = Parameters[0]; export interface CypherEditorProps { /** * The prompt to show on single line editors */ prompt?: string; /** * Custom keybindings to add to the editor. * See https://codemirror.net/6/docs/ref/#keymap.of */ extraKeybindings?: KeyBinding[]; /** * Callback on query execution, triggered via ctrl/cmd + Enter. * If provided, will enable "repl-mode", which turns on navigating editor history * * @param cmd - the editor value when ctrl/cmd + enter was pressed * @returns void */ onExecute?: (cmd: string) => void; /** * If true, pressing enter will add a new line to the editor and cmd/ctrl + enter will execute the query. * Otherwise pressing enter on a single line will execute the query. * * @default false */ newLineOnEnter?: boolean; /** * The editor history navigable via up/down arrow keys. Order newest to oldest. * Add to this list with the `onExecute` callback for REPL style history. */ history?: string[]; /** * When set to `true` the editor will use the background color of the parent element. * * @default false */ overrideThemeBackgroundColor?: boolean; /** * Whether the editor should take focus on mount. * Will move the cursor to the end of the query when provided with an initial value. * * @default false */ autofocus?: boolean; /** * Where to place the cursor in the query. Cannot be enabled at the same time than autofocus */ offset?: number; /** * Whether the editor should wrap lines. * * @default false */ lineWrap?: boolean; /** * Whether the editor should perform syntax validation. * * @default true */ lint?: boolean; /** * Whether the signature help tooltip should be shown below the text. * If false, it will be shown above. * * @default true */ showSignatureTooltipBelow?: boolean; /** * Internal feature flags for the editor. Don't use in production * */ featureFlags?: { consoleCommands?: boolean; }; /** * The schema to use for autocompletion and linting. * * @type {DbSchema} */ schema?: DbSchema; /** * The current value of the editor. */ value?: string; /** * Extra css classnames to add to the editor container. */ className?: string; /** * Set the built in theme or provide a custom theme. * * `light` / `dark` / `Extension` * @default light */ theme?: 'light' | 'dark' | Extension; /** * Callback when the editor value changes. * @param {string} value - the current editor value * @param {ViewUpdate} viewUpdate - the view update from codemirror */ onChange?(value: string, viewUpdate: ViewUpdate): void; /** * Map of event handlers to add to the editor. * * Note that the props are compared by reference, meaning object defined inline * will cause the editor to re-render (much like the style prop does in this example: *
* * Memoize the object if you want/need to avoid this. * * @example * // listen to blur events * console.log("blur event fired")}} /> */ domEventHandlers?: DomEventHandlers; /** * Placeholder text to display when the editor is empty. */ placeholder?: string; /** * Whether the editor should show line numbers. * * @default true */ lineNumbers?: boolean; /** * Whether the editor is read-only. * * @default false */ readonly?: boolean; /** * String value to assign to the aria-label attribute of the editor. */ ariaLabel?: string; /** * Whether keybindings for inserting indents with the Tab key should be disabled. * * true will not create keybindings for inserting indents. * false will create keybindings for inserting indents. * * @default false */ moveFocusOnTab?: boolean; } type CypherEditorState = { cypherSupportEnabled: boolean; }; export declare class CypherEditor extends Component { /** * The codemirror editor container. */ editorContainer: React.RefObject; /** * The codemirror editor state. */ editorState: React.MutableRefObject; /** * The codemirror editor view. */ editorView: React.MutableRefObject; private schemaRef; /** * Format Cypher query */ format(): void; /** * Focus the editor */ focus(): void; /** * Move the cursor to the supplied position. * For example, to move the cursor to the end of the editor, use `value.length` */ updateCursorPosition(position: number): void; /** * Externally set the editor value and focus the editor. */ setValueAndFocus(value?: string): void; static defaultProps: CypherEditorProps; private debouncedOnChange; componentDidMount(): void; componentDidUpdate(prevProps: CypherEditorProps): void; componentWillUnmount(): void; render(): React.ReactNode; } export {};