Home > @neo4j-cypher/react-codemirror
This package provides a React Cypher Editor component
The props for this component are defined by the CypherEditorProps interface
Here's some example code using the props:
const props = { autocomplete: false };
<CypherEditor {...props} />| Class | Description |
|---|---|
| CypherEditor | Cypher Editor React Component |
Cypher Editor React Component
Signature:
export default class CypherEditor extends React.Component<
CypherEditorProps,
any
> Extends: React.Component< CypherEditorProps, any >
| Interface | Description |
|---|---|
| CypherEditorProps | Interface for React Cypher Editor component props |
Interface for React Cypher Editor component props
Signature:
export interface CypherEditorProps | Property | Type | Default | Description |
|---|---|---|---|
| autocomplete? | boolean | true |
(Optional) Whether the autocomplete feature is enabled |
| autocompleteCloseOnBlur? | boolean | true |
(Optional) Whether the autocomplete auto closes whenever the editor loses focus |
| autocompleteOpen? | boolean | false |
(Optional) Whether the autocomplete panel is open |
| autocompleteTriggerStrings? | string[] | [".",":","[]","()","{}","[","(","{","$"] | (Optional) The keys that when typed will automatically open the autocomplete menu |
| autofocus? | boolean | true | (Optional) Whether the editor should be auto focused on first creation |
| autofocusProps? | AutofocusProp[] | ["position", "readOnly", "value"] | (Optional) setting any of these props will trigger the editor gaining focus |
| bracketMatching? | boolean | true | (Optional) Whether to show matching brackets in the editor view |
| className? | string | (Optional) A css class name to be added to the root editor dom element | |
| clearHistoryProps? | AutofocusProp[] | ["cypherLanguage"] | (Optional) Setting any of these props will trigger the editor to clear its undo/redo history |
| closeBrackets? | boolean | true | (Optional) Whether to automatically close brackets or wrap selected text with quotes on quote press |
| cursorWide? | boolean | true | (Optional) Whether the wide cursor should be shown |
| cypherLanguage? | boolean | true | (Optional) Whether or not cypher language extensions are enabled |
| focusedClassName? | string | (Optional) A css class name to be added to the root editor dom element when it is focused | |
| history? | boolean | true | (Optional) Whether the editor maintains an undo/redo history |
| indentUnit? | string | " " | (Optional) The indent text to use when tabKey is enabled |
| lineNumberFormatter? | LineNumberFormatter | (line, lineCount) => lineCount === 1 ? "$" : line + ""; | (Optional) The formatter for the line numbers of the editor |
| lineNumbers? | boolean | true | (Optional) Whether line numbers are shown to the left of the editor ui |
| lineWrapping? | boolean | false | (Optional) Whether the editor wraps lines vs using a horizontal scrollbar |
| lint? | boolean | false | (Optional) Whether the editor should display lint errors to the user |
| onAutocompleteChanged? | AutocompleteChangedListener | (Optional) A listener for when the editor autocompletion state changes | |
| onEditorCreated? | EditorCreatedListener | (Optional) A listener for when the editor api gets created | |
| onFocusChanged? | FocusChangedListener | (Optional) A listener for when the editor focus changes | |
| onKeyDown? | KeyListener | (Optional) A listener for when the user performs a key down in the editor | |
| onKeyUp? | KeyListener | (Optional) A listener for when the user performs a key up in the editor | |
| onLineNumberClick? | LineNumberClickListener | (Optional) A listener for when the user clicks an editor line number | |
| onPositionChanged? | PositionChangedListener | (Optional) A listener for when the editor cursor position changes | |
| onScrollChanged? | ScrollChangedListener | (Optional) A listener for when the editor scroll position changes | |
| onSearchChanged? | SearchChangedListener | (Optional) A listener for when the editor search state changes | |
| onSelectionChanged? | SelectionChangedListener | (Optional) A listener for when the editor text selection changes | |
| onValueChanged? | ValueChangedListener | (Optional) A listener for when the editor value changes | |
| parseOnSetValue? | boolean | true | (Optional) Whether to run the cypher language parser immediately after every call to set the value |
| placeholder? | string | (Optional) The text to be shown to the user when the editor value is empty | |
| position? | PositionAny | (Optional) The editor cursor position | |
| postExtensions? | Extension[] | undefined | (Optional) The codemirror 6 extensions that should be added to the editor after the cypher language support extensions. |
| preExtensions? | Extension[] | undefined | (Optional) The codemirror 6 extensions that should be added to the editor before the cypher language support extensions. |
| readOnly? | boolean | false | (Optional) Whether the editor is read only or the user can edit the editor's value |
| readOnlyCursor? | boolean | false | (Optional) Whether to show the cursor when the editor readOnly is true |
| schema? | EditorSupportSchema | (Optional) The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database | |
| search? | boolean | true | (Optional) Whether search is enabled |
| searchMatches? | number | 0 | (Optional) The max number of search matches to be included with search changed callbacks |
| searchOpen? | boolean | false |
(Optional) Whether the search panel is open |
| searchText? | string | "" | (Optional) The search text for the search panel |
| searchTop? | boolean | false | (Optional) Whether search is shown at the top of the editor window |
| selection? | EditorSelection | undefined | (Optional) The editor text selection |
| style? | React.CSSProperties | (Optional) a style prop to be applied to the root editor dom element | |
| tabKey? | boolean | true | (Optional) Whether the tab key is enabled |
| theme? | Theme | "light" | (Optional) Whether to use the light or dark theme for the editor |
| tooltipAbsolute? | boolean | true | (Optional) Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds) |
| value? | string | "" | (Optional) The editor text value |
Whether the autocomplete feature is enabled
Signature:
autocomplete?: boolean;Default Value:
true
Whether the autocomplete auto closes whenever the editor loses focus
Signature:
autocompleteCloseOnBlur?: boolean;Default Value:
true
Whether the autocomplete panel is open
Signature:
autocompleteOpen?: boolean;Remarks:
Changing this can be used to manually control the autocomplete open state
Default Value:
false
The keys that when typed will automatically open the autocomplete menu
Signature:
autocompleteTriggerStrings?: string[];Default Value:
[".",":","[]","()","{}","[","(","{","$"]
Whether the editor should be auto focused on first creation
Signature:
autofocus?: boolean;Default Value:
true
setting any of these props will trigger the editor gaining focus
Signature:
autofocusProps?: AutofocusProp[];Default Value:
["position", "readOnly", "value"]
Whether to show matching brackets in the editor view
Signature:
bracketMatching?: boolean;Default Value:
true
A css class name to be added to the root editor dom element
Signature:
className?: string;Setting any of these props will trigger the editor to clear its undo/redo history
Signature:
clearHistoryProps?: AutofocusProp[];Default Value:
["cypherLanguage"]
Whether to automatically close brackets or wrap selected text with quotes on quote press
Signature:
closeBrackets?: boolean;Default Value:
true
Whether the wide cursor should be shown
Signature:
cursorWide?: boolean;Default Value:
true
Whether or not cypher language extensions are enabled
Signature:
cypherLanguage?: boolean;Default Value:
true
A css class name to be added to the root editor dom element when it is focused
Signature:
focusedClassName?: string;Whether the editor maintains an undo/redo history
Signature:
history?: boolean;Default Value:
true
The indent text to use when tabKey is enabled
Signature:
indentUnit?: string;Default Value:
" "
The formatter for the line numbers of the editor
Signature:
lineNumberFormatter?: LineNumberFormatter;Default Value:
(line, lineCount) => lineCount === 1 ? "$" : line + "";
Whether line numbers are shown to the left of the editor ui
Signature:
lineNumbers?: boolean;Default Value:
true
Whether the editor wraps lines vs using a horizontal scrollbar
Signature:
lineWrapping?: boolean;Default Value:
false
Whether the editor should display lint errors to the user
Signature:
lint?: boolean;Default Value:
false
A listener for when the editor autocompletion state changes
Signature:
onAutocompleteChanged?: AutocompleteChangedListener;A listener for when the editor api gets created
Signature:
onEditorCreated?: EditorCreatedListener;A listener for when the editor focus changes
Signature:
onFocusChanged?: FocusChangedListener;A listener for when the user performs a key down in the editor
Signature:
onKeyDown?: KeyListener;A listener for when the user performs a key up in the editor
Signature:
onKeyUp?: KeyListener;A listener for when the user clicks an editor line number
Signature:
onLineNumberClick?: LineNumberClickListener;A listener for when the editor cursor position changes
Signature:
onPositionChanged?: PositionChangedListener;A listener for when the editor scroll position changes
Signature:
onScrollChanged?: ScrollChangedListener;A listener for when the editor search state changes
Signature:
onSearchChanged?: SearchChangedListener;A listener for when the editor text selection changes
Signature:
onSelectionChanged?: SelectionChangedListener;A listener for when the editor value changes
Signature:
onValueChanged?: ValueChangedListener;Whether to run the cypher language parser immediately after every call to set the value
Signature:
parseOnSetValue?: boolean;Default Value:
true
The text to be shown to the user when the editor value is empty
Signature:
placeholder?: string;The editor cursor position
Signature:
position?: PositionAny;The codemirror 6 extensions that should be added to the editor after the cypher language support extensions.
Signature:
postExtensions?: Extension[];Default Value:
undefined
The codemirror 6 extensions that should be added to the editor before the cypher language support extensions.
Signature:
preExtensions?: Extension[];Default Value:
undefined
Whether the editor is read only or the user can edit the editor's value
Signature:
readOnly?: boolean;Default Value:
false
Whether to show the cursor when the editor readOnly is true
Signature:
readOnlyCursor?: boolean;Default Value:
false
The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database
Signature:
schema?: EditorSupportSchema;Whether search is enabled
Signature:
search?: boolean;Default Value:
true
The max number of search matches to be included with search changed callbacks
Signature:
searchMatches?: number;Remarks:
Must be between 0 and 1000, 0 means no searching for matches (better for performance)
Default Value:
0
Whether the search panel is open
Signature:
searchOpen?: boolean;Remarks:
Changing this can be used to manually control the search open state
Default Value:
false
The search text for the search panel
Signature:
searchText?: string;Remarks:
Changing this can be used to manually control the search panel text
Default Value:
""
Whether search is shown at the top of the editor window
Signature:
searchTop?: boolean;Default Value:
false
The editor text selection
Signature:
selection?: EditorSelection;Default Value:
undefined
a style prop to be applied to the root editor dom element
Signature:
style?: React.CSSProperties;Whether the tab key is enabled
Signature:
tabKey?: boolean;Default Value:
true
Whether to use the light or dark theme for the editor
Signature:
theme?: Theme;Default Value:
"light"
Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds)
Signature:
tooltipAbsolute?: boolean;Default Value:
true
The editor text value
Signature:
value?: string;Default Value:
""