diff --git a/.changeset/giant-eagles-repair.md b/.changeset/giant-eagles-repair.md
new file mode 100644
index 00000000..9b266970
--- /dev/null
+++ b/.changeset/giant-eagles-repair.md
@@ -0,0 +1,7 @@
+---
+"@neo4j-cypher/codemirror": patch
+"@neo4j-cypher/react-codemirror": patch
+"@neo4j-cypher/svelte-codemirror": patch
+---
+
+rename indentWithTab -> tabKey, fix tab with autocomplete
diff --git a/docs/generated/neo4j-cypher_codemirror.md b/docs/generated/neo4j-cypher_codemirror.md
index 9039681a..bbfda43d 100644
--- a/docs/generated/neo4j-cypher_codemirror.md
+++ b/docs/generated/neo4j-cypher_codemirror.md
@@ -466,7 +466,6 @@ editorSupport: CypherEditorSupport;
| [setAutocompleteOpen(autocompleteOpen)](#editorapi.setautocompleteopen) | Set whether or not the autocomplete menu is shown to the user |
| [setAutocompleteTriggerStrings(autocompleteTriggerStrings)](#editorapi.setautocompletetriggerstrings) | Set the keys that when typed will automatically open the autocomplete menu |
| [setHistory(history)](#editorapi.sethistory) | Set whether or not the editor maintains an undo/redo history |
-| [setIndentWithTab(indentWithTab)](#editorapi.setindentwithtab) | Set whether pressing the tab key affects editor indentation |
| [setLineNumberFormatter(lineNumberFormatter)](#editorapi.setlinenumberformatter) | Set the formatter for the line numbers of the editor |
| [setLineNumbers(lineNumbers)](#editorapi.setlinenumbers) | Set whether or not line numbers are shown to the left of the editor ui |
| [setLineWrapping(lineWrapping)](#editorapi.setlinewrapping) | Set whether or not the editor wraps lines vs using a horizontal scrollbar |
@@ -478,6 +477,7 @@ editorSupport: CypherEditorSupport;
| [setReadOnly(readOnly)](#editorapi.setreadonly) | Set whether the editor is read only or the user can edit the editor's value |
| [setReadOnlyCursor(readOnlyCursor)](#editorapi.setreadonlycursor) | Set whether to show the cursor when the editor readOnly is true |
| [setSchema(schema)](#editorapi.setschema) | Set the schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database |
+| [setTabKey(tabKey)](#editorapi.settabkey) | Set whether the tab key is enabled |
| [setTheme(theme)](#editorapi.settheme) | Set whether to use the light or dark theme for the editor |
| [setTooltipAbsolute(tooltipAbsolute)](#editorapi.settooltipabsolute) | Set whether or not the tooltips use simple absolute position styling (vs fixed and trying to stay within bounds) |
| [setValue(value, parseOnSetValue)](#editorapi.setvalue) | Set the editor value |
@@ -1066,29 +1066,6 @@ void
-
-
-#### EditorApi.setIndentWithTab() method
-
-Set whether pressing the tab key affects editor indentation
-
-Signature:
-
-```typescript
-setIndentWithTab(indentWithTab?: boolean): void;
-```
-Parameters:
-
-| Parameter | Type | Description |
-| --- | --- | --- |
-| indentWithTab | boolean | (Optional) |
-
-Returns:
-
-void
-
-
-
#### EditorApi.setLineNumberFormatter() method
@@ -1344,6 +1321,29 @@ void
+
+
+#### EditorApi.setTabKey() method
+
+Set whether the tab key is enabled
+
+Signature:
+
+```typescript
+setTabKey(tabKey?: boolean): void;
+```
+Parameters:
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| tabKey | boolean | (Optional) |
+
+Returns:
+
+void
+
+
+
#### EditorApi.setTheme() method
@@ -1438,7 +1438,6 @@ export interface EditorOptions
| [autocompleteTriggerStrings?](#editoroptions.autocompletetriggerstrings) | string\[\] | \[".",":","\[\]","()","{}","\[","(","{","$"\] | (Optional) The keys that when typed will automatically open the autocomplete menu |
| [autofocus?](#editoroptions.autofocus) | boolean | true | (Optional) Whether the editor should be auto focused on first creation |
| [history?](#editoroptions.history) | boolean | true | (Optional) Whether the editor maintains an undo/redo history |
-| [indentWithTab?](#editoroptions.indentwithtab) | boolean | true | (Optional) Whether pressing the tab key affects editor indentation |
| [lineNumberFormatter?](#editoroptions.linenumberformatter) | [LineNumberFormatter](#linenumberformatter) | (line, lineCount) => lineCount === 1 ? "$" : line + ""; | (Optional) The formatter for the line numbers of the editor |
| [lineNumbers?](#editoroptions.linenumbers) | boolean | true | (Optional) Whether line numbers are shown to the left of the editor ui |
| [lineWrapping?](#editoroptions.linewrapping) | boolean | false | (Optional) Whether the editor wraps lines vs using a horizontal scrollbar |
@@ -1451,6 +1450,7 @@ export interface EditorOptions
| [readOnly?](#editoroptions.readonly) | boolean | false | (Optional) Whether the editor is read only or the user can edit the editor's value |
| [readOnlyCursor?](#editoroptions.readonlycursor) | boolean | false | (Optional) Whether to show the cursor when the editor readOnly is true |
| [schema?](#editoroptions.schema) | [EditorSupportSchema](./neo4j-cypher_editor-support.md#editorsupportschema) | undefined | (Optional) The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database |
+| [tabKey?](#editoroptions.tabkey) | boolean | true | (Optional) Whether the tab key is enabled |
| [theme?](#editoroptions.theme) | [Theme](#theme) | "light" | (Optional) Whether to use the light or dark theme for the editor |
| [tooltipAbsolute?](#editoroptions.tooltipabsolute) | boolean | false | (Optional) Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds) |
| [value?](#editoroptions.value) | string | "" | (Optional) The initial editor value |
@@ -1559,23 +1559,6 @@ true
-
-
-#### EditorOptions.indentWithTab property
-
-Whether pressing the tab key affects editor indentation
-
-Signature:
-
-```typescript
-indentWithTab?: boolean;
-```
-Default Value:
-
-true
-
-
-
#### EditorOptions.lineNumberFormatter property
@@ -1780,6 +1763,23 @@ undefined
+
+
+#### EditorOptions.tabKey property
+
+Whether the tab key is enabled
+
+Signature:
+
+```typescript
+tabKey?: boolean;
+```
+Default Value:
+
+true
+
+
+
#### EditorOptions.theme property
diff --git a/docs/generated/neo4j-cypher_react-codemirror.md b/docs/generated/neo4j-cypher_react-codemirror.md
index 6ce214bd..7df10399 100644
--- a/docs/generated/neo4j-cypher_react-codemirror.md
+++ b/docs/generated/neo4j-cypher_react-codemirror.md
@@ -86,7 +86,6 @@ export interface CypherEditorProps
| [className?](#cyphereditorprops.classname) | string | | (Optional) A css class name to be added to the root editor dom element |
| [focusedClassName?](#cyphereditorprops.focusedclassname) | string | | (Optional) A css class name to be added to the root editor dom element when it is focused |
| [history?](#cyphereditorprops.history) | boolean | true | (Optional) Whether the editor maintains an undo/redo history |
-| [indentWithTab?](#cyphereditorprops.indentwithtab) | boolean | true | (Optional) Whether pressing the tab key affects editor indentation |
| [lineNumberFormatter?](#cyphereditorprops.linenumberformatter) | [LineNumberFormatter](./neo4j-cypher_codemirror.md#linenumberformatter) | (line, lineCount) => lineCount === 1 ? "$" : line + ""; | (Optional) The formatter for the line numbers of the editor |
| [lineNumbers?](#cyphereditorprops.linenumbers) | boolean | true | (Optional) Whether line numbers are shown to the left of the editor ui |
| [lineWrapping?](#cyphereditorprops.linewrapping) | boolean | false | (Optional) Whether the editor wraps lines vs using a horizontal scrollbar |
@@ -105,6 +104,7 @@ export interface CypherEditorProps
| [readOnly?](#cyphereditorprops.readonly) | boolean | false | (Optional) Whether the editor is read only or the user can edit the editor's value |
| [readOnlyCursor?](#cyphereditorprops.readonlycursor) | boolean | false | (Optional) Whether to show the cursor when the editor readOnly is true |
| [schema?](#cyphereditorprops.schema) | [EditorSupportSchema](./neo4j-cypher_editor-support.md#editorsupportschema) | | (Optional) The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database |
+| [tabKey?](#cyphereditorprops.tabkey) | boolean | true | (Optional) Whether the tab key is enabled |
| [theme?](#cyphereditorprops.theme) | [Theme](./neo4j-cypher_codemirror.md#theme) | "light" | (Optional) Whether to use the light or dark theme for the editor |
| [tooltipAbsolute?](#cyphereditorprops.tooltipabsolute) | boolean | false | (Optional) Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds) |
| [value?](#cyphereditorprops.value) | string | "" | (Optional) The editor text value |
@@ -262,23 +262,6 @@ true
-
-
-#### CypherEditorProps.indentWithTab property
-
-Whether pressing the tab key affects editor indentation
-
-Signature:
-
-```typescript
-indentWithTab?: boolean;
-```
-Default Value:
-
-true
-
-
-
#### CypherEditorProps.lineNumberFormatter property
@@ -552,6 +535,23 @@ schema?: EditorSupportSchema;
+
+
+#### CypherEditorProps.tabKey property
+
+Whether the tab key is enabled
+
+Signature:
+
+```typescript
+tabKey?: boolean;
+```
+Default Value:
+
+true
+
+
+
#### CypherEditorProps.theme property
diff --git a/docs/generated/neo4j-cypher_svelte-codemirror.md b/docs/generated/neo4j-cypher_svelte-codemirror.md
index 7b2ef240..ea8f7cf6 100644
--- a/docs/generated/neo4j-cypher_svelte-codemirror.md
+++ b/docs/generated/neo4j-cypher_svelte-codemirror.md
@@ -87,7 +87,6 @@ export interface CypherEditorProps
| [className?](#cyphereditorprops.classname) | string | | (Optional) A css class name to be added to the root editor dom element |
| [focusedClassName?](#cyphereditorprops.focusedclassname) | string | | (Optional) A css class name to be added to the root editor dom element when it is focused |
| [history?](#cyphereditorprops.history) | boolean | true | (Optional) Whether the editor maintains an undo/redo history |
-| [indentWithTab?](#cyphereditorprops.indentwithtab) | boolean | true | (Optional) Whether pressing the tab key affects editor indentation |
| [lineNumberFormatter?](#cyphereditorprops.linenumberformatter) | [LineNumberFormatter](./neo4j-cypher_codemirror.md#linenumberformatter) | (line, lineCount) => lineCount === 1 ? "$" : line + ""; | (Optional) The formatter for the line numbers of the editor |
| [lineNumbers?](#cyphereditorprops.linenumbers) | boolean | true | (Optional) Whether line numbers are shown to the left of the editor ui |
| [lineWrapping?](#cyphereditorprops.linewrapping) | boolean | false | (Optional) Whether the editor wraps lines vs using a horizontal scrollbar |
@@ -106,6 +105,7 @@ export interface CypherEditorProps
| [readOnly?](#cyphereditorprops.readonly) | boolean | false | (Optional) Whether the editor is read only or the user can edit the editor's value |
| [readOnlyCursor?](#cyphereditorprops.readonlycursor) | boolean | false | (Optional) Whether to show the cursor when the editor readOnly is true |
| [schema?](#cyphereditorprops.schema) | [EditorSupportSchema](./neo4j-cypher_editor-support.md#editorsupportschema) | | (Optional) The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database |
+| [tabKey?](#cyphereditorprops.tabkey) | boolean | true | (Optional) Whether the tab key is enabled |
| [theme?](#cyphereditorprops.theme) | [Theme](./neo4j-cypher_codemirror.md#theme) | "light" | (Optional) Whether to use the light or dark theme for the editor |
| [tooltipAbsolute?](#cyphereditorprops.tooltipabsolute) | boolean | false | (Optional) Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds) |
| [value?](#cyphereditorprops.value) | string | "" | (Optional) The editor text value |
@@ -263,23 +263,6 @@ true
-
-
-#### CypherEditorProps.indentWithTab property
-
-Whether pressing the tab key affects editor indentation
-
-Signature:
-
-```typescript
-indentWithTab?: boolean;
-```
-Default Value:
-
-true
-
-
-
#### CypherEditorProps.lineNumberFormatter property
@@ -553,6 +536,23 @@ schema?: EditorSupportSchema;
+
+
+#### CypherEditorProps.tabKey property
+
+Whether the tab key is enabled
+
+Signature:
+
+```typescript
+tabKey?: boolean;
+```
+Default Value:
+
+true
+
+
+
#### CypherEditorProps.theme property
diff --git a/packages/codemirror/css/cypher-codemirror.css b/packages/codemirror/css/cypher-codemirror.css
index 22968740..2b15b4f4 100644
--- a/packages/codemirror/css/cypher-codemirror.css
+++ b/packages/codemirror/css/cypher-codemirror.css
@@ -228,3 +228,7 @@ green #859900 2/2 green 64 #5f8700 60 -20 65 133 153 0 68 100 60
.cm-editor .cm-completionIcon-procedureOutput:after {
content: url("data:image/svg+xml;utf8,");
}
+
+.cm-tooltip-autocomplete {
+ margin-top: 4px;
+}
diff --git a/packages/codemirror/src/codemirror.d.ts b/packages/codemirror/src/codemirror.d.ts
index f5294de5..6531013b 100644
--- a/packages/codemirror/src/codemirror.d.ts
+++ b/packages/codemirror/src/codemirror.d.ts
@@ -265,10 +265,6 @@ export interface EditorApi {
* Set whether or not the editor maintains an undo/redo history
*/
setHistory(history?: boolean): void;
- /**
- * Set whether pressing the tab key affects editor indentation
- */
- setIndentWithTab(indentWithTab?: boolean): void;
/**
* Set the formatter for the line numbers of the editor
*/
@@ -307,6 +303,10 @@ export interface EditorApi {
* Set the schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database
*/
setSchema(schema?: EditorSupportSchema): void;
+ /**
+ * Set whether the tab key is enabled
+ */
+ setTabKey(tabKey?: boolean): void;
/**
* Set whether to use the light or dark theme for the editor
*/
@@ -454,12 +454,6 @@ export interface EditorOptions {
* @defaultValue true
*/
history?: boolean;
- /**
- * Whether pressing the tab key affects editor indentation
- *
- * @defaultValue true
- */
- indentWithTab?: boolean;
/**
* The formatter for the line numbers of the editor
*
@@ -520,6 +514,12 @@ export interface EditorOptions {
* @defaultValue undefined
*/
schema?: EditorSupportSchema;
+ /**
+ * Whether the tab key is enabled
+ *
+ * @defaultValue true
+ */
+ tabKey?: boolean;
/**
* Whether to use the light or dark theme for the editor
*
diff --git a/packages/codemirror/src/codemirror.js b/packages/codemirror/src/codemirror.js
index ca524d1c..6ab0af18 100644
--- a/packages/codemirror/src/codemirror.js
+++ b/packages/codemirror/src/codemirror.js
@@ -60,7 +60,7 @@ import {
getAutocompleteExtensions,
getLineWrappingExtensions,
getHistoryExtensions,
- getIndentWithTabExtensions,
+ getTabKeyExtensions,
getLintExtensions
} from "./cypher-extensions";
@@ -68,6 +68,18 @@ export * from "./cypher-codemirror-base";
export * from "./cypher-extensions";
+export const getDefaultOptions = () => ({ ...defaultOptions });
+
+export const withDefaultOptions = (options) => {
+ const combinedOptions = { ...defaultOptions };
+ for (let key of Object.keys(options)) {
+ if (options[key] !== undefined) {
+ combinedOptions[key] = options[key];
+ }
+ }
+ return combinedOptions;
+};
+
export const getExtensions = (
options = {},
{
@@ -78,8 +90,8 @@ export const getExtensions = (
showLinesConf = new Compartment(),
lineWrappingConf = new Compartment(),
historyConf = new Compartment(),
- indentWithTabConf = new Compartment(),
placeholderConf = new Compartment(),
+ tabKeyConf = new Compartment(),
themeConf = new Compartment(),
tooltipAbsoluteConf = new Compartment(),
onLineNumberClick = () => {},
@@ -88,12 +100,12 @@ export const getExtensions = (
onKeyDown = () => {}
} = {}
) => {
- const combinedOptions = { ...defaultOptions, ...options };
+ const combinedOptions = withDefaultOptions(options);
const {
autocomplete,
autocompleteCloseOnBlur,
history,
- indentWithTab,
+ tabKey,
lineNumberFormatter,
lineNumbers,
lineWrapping,
@@ -125,7 +137,7 @@ export const getExtensions = (
),
lineWrappingConf.of(getLineWrappingExtensions({ lineWrapping })),
historyConf.of(getHistoryExtensions({ history })),
- indentWithTabConf.of(getIndentWithTabExtensions({ indentWithTab })),
+ tabKeyConf.of(getTabKeyExtensions({ tabKey })),
readableConf.of(getReadableExtensions({ readOnly, readOnlyCursor })),
placeholderConf.of(getPlaceholderExtensions({ placeholder })),
syntaxCSS,
@@ -141,18 +153,6 @@ const defaultOptions = {
postExtensions: []
};
-export const getDefaultOptions = () => ({ ...defaultOptions });
-
-export const withDefaultOptions = (options) => {
- const combinedOptions = { ...defaultOptions };
- for (let key of Object.keys(options)) {
- if (options[key] !== undefined) {
- combinedOptions[key] = options[key];
- }
- }
- return combinedOptions;
-};
-
export function createCypherEditor(parentDOMElement, options = {}) {
const combinedOptions = withDefaultOptions(options);
const {
@@ -170,7 +170,6 @@ export function createCypherEditor(parentDOMElement, options = {}) {
autocompleteCloseOnBlur,
autocompleteTriggerStrings,
history,
- indentWithTab,
lineNumberFormatter,
lineNumbers,
lineWrapping,
@@ -178,6 +177,7 @@ export function createCypherEditor(parentDOMElement, options = {}) {
placeholder,
readOnly,
readOnlyCursor,
+ tabKey,
tooltipAbsolute
} = combinedOptions;
@@ -311,8 +311,8 @@ export function createCypherEditor(parentDOMElement, options = {}) {
const showLinesConf = new Compartment();
const lineWrappingConf = new Compartment();
const historyConf = new Compartment();
- const indentWithTabConf = new Compartment();
const placeholderConf = new Compartment();
+ const tabKeyConf = new Compartment();
const themeConf = new Compartment();
const tooltipAbsoluteConf = new Compartment();
const postConf = new Compartment();
@@ -324,12 +324,12 @@ export function createCypherEditor(parentDOMElement, options = {}) {
...getExtensions(combinedOptions, {
lintConf,
autocompleteConf,
+ tabKeyConf,
readableConf,
readOnlyConf,
showLinesConf,
lineWrappingConf,
historyConf,
- indentWithTabConf,
placeholderConf,
themeConf,
tooltipAbsoluteConf,
@@ -653,14 +653,10 @@ export function createCypherEditor(parentDOMElement, options = {}) {
}
};
- const setIndentWithTab = (
- newIndentWithTab = defaultOptions.indentWithTab
- ) => {
- indentWithTab = newIndentWithTab;
+ const setTabKey = (newTabKey = defaultOptions.tabKey) => {
+ tabKey = newTabKey;
editor.dispatch({
- effects: indentWithTabConf.reconfigure(
- getIndentWithTabExtensions({ indentWithTab })
- )
+ effects: tabKeyConf.reconfigure(getTabKeyExtensions({ tabKey }))
});
};
@@ -677,7 +673,6 @@ export function createCypherEditor(parentDOMElement, options = {}) {
setAutocompleteOpen,
setAutocompleteTriggerStrings,
setHistory,
- setIndentWithTab,
setLineNumberFormatter,
setLineNumbers,
setLineWrapping,
@@ -687,6 +682,7 @@ export function createCypherEditor(parentDOMElement, options = {}) {
setReadOnly,
setReadOnlyCursor,
setSchema,
+ setTabKey,
setTheme,
setTooltipAbsolute,
setValue,
diff --git a/packages/codemirror/src/cypher-codemirror-base.js b/packages/codemirror/src/cypher-codemirror-base.js
index 2ed6d7ca..121eb53e 100644
--- a/packages/codemirror/src/cypher-codemirror-base.js
+++ b/packages/codemirror/src/cypher-codemirror-base.js
@@ -49,7 +49,6 @@ export const defaultOptions = {
autofocus: true,
autofocusProps: ["position", "readOnly", "value"],
history: true,
- indentWithTab: true,
lineNumberFormatter: defaultLineNumberFormatter,
lineNumbers: true,
lineWrapping: false,
@@ -60,6 +59,7 @@ export const defaultOptions = {
readOnly: false,
readOnlyCursor: false,
schema: undefined,
+ tabKey: true,
theme: THEME_LIGHT,
tooltipAbsolute: false,
value: ""
@@ -72,7 +72,6 @@ export const reactiveOptionKeys = [
"autocompleteTriggerStrings",
// "autofocus",
"history",
- "indentWithTab",
"lineNumberFormatter",
"lineNumbers",
"lineWrapping",
@@ -82,6 +81,7 @@ export const reactiveOptionKeys = [
"readOnly",
"readOnlyCursor",
"schema",
+ "tabKey",
"theme",
"tooltipAbsolute",
// "parseOnSetValue",
diff --git a/packages/codemirror/src/cypher-extensions.js b/packages/codemirror/src/cypher-extensions.js
index c66bf58a..b14512f5 100644
--- a/packages/codemirror/src/cypher-extensions.js
+++ b/packages/codemirror/src/cypher-extensions.js
@@ -20,13 +20,16 @@
import {
autocompletion as autocompletionExtension,
- completionKeymap
+ completionKeymap,
+ completionStatus,
+ acceptCompletion
} from "@codemirror/autocomplete";
import {
history as historyExtension,
defaultKeymap,
historyKeymap,
- indentWithTab
+ indentMore,
+ indentLess
} from "@codemirror/commands";
import {
StreamLanguage,
@@ -261,7 +264,26 @@ const lightExtensions = [EditorView.theme(themeOverrides, { dark: false })];
export const historyExtensions = [historyExtension()];
-export const indentWithTabExtensions = [keymap.of([indentWithTab])];
+const runTab = (view, event) => {
+ const status = completionStatus(view.state);
+ if (status === null) {
+ indentMore(view);
+ } else if (status === "active") {
+ acceptCompletion(view);
+ event && event.preventDefault();
+ }
+};
+
+const shiftTab = (view, event) => {
+ const status = completionStatus(view.state);
+ if (status === null) {
+ indentLess(view);
+ }
+};
+
+export const tabKeyExtensions = [
+ keymap.of([{ key: "Tab", run: runTab, shift: shiftTab }])
+];
export const readableExtensions = [
drawSelectionExtension(),
@@ -300,6 +322,38 @@ export const useStickyAutocompleteExtensions = [
// GETTERS
+export const getAutocompleteExtensions = ({
+ readOnly,
+ autocomplete,
+ autocompleteCloseOnBlur
+}) =>
+ readOnly === false && autocomplete
+ ? !autocompleteCloseOnBlur
+ ? useStickyAutocompleteExtensions
+ : useAutocompleteExtensions
+ : [];
+
+export const getHistoryExtensions = ({ history }) =>
+ history ? historyExtensions : [];
+
+export const getLineNumbersExtensions = ({
+ lineNumbers,
+ lineNumberFormatter,
+ onLineNumberClick
+}) =>
+ lineNumbers
+ ? [cypherLineNumbers({ lineNumberFormatter, onLineNumberClick })]
+ : [];
+
+export const getLineWrappingExtensions = ({ lineWrapping }) =>
+ lineWrapping ? lineWrappingExtensions : [];
+
+export const getLintExtensions = ({ readOnly, lint }) =>
+ readOnly === false && lint ? useLintExtensions : useNoLintExtensions;
+
+export const getPlaceholderExtensions = ({ placeholder }) =>
+ placeholder !== undefined ? [placeholderExtension(placeholder)] : [];
+
export const getReadableExtensions = ({ readOnly, readOnlyCursor }) =>
!readOnly || readOnlyCursor ? readableExtensions : [];
@@ -310,8 +364,8 @@ export const getReadOnlyExtensions = ({ readOnly, readOnlyCursor }) =>
: readOnlyNoCursorExtensions
: [];
-export const getPlaceholderExtensions = ({ placeholder }) =>
- placeholder !== undefined ? [placeholderExtension(placeholder)] : [];
+export const getTabKeyExtensions = ({ tabKey }) =>
+ tabKey ? tabKeyExtensions : [];
export const getThemeExtensions = ({ theme }) =>
theme === THEME_DARK ? darkExtensions : lightExtensions;
@@ -320,35 +374,3 @@ export const getTooltipAbsoluteExtensions = ({ tooltipAbsolute }) =>
tooltipAbsolute
? [tooltips({ position: "absolute" })]
: [tooltips({ position: "fixed" })];
-
-export const getLineNumbersExtensions = ({
- lineNumbers,
- lineNumberFormatter,
- onLineNumberClick
-}) =>
- lineNumbers
- ? [cypherLineNumbers({ lineNumberFormatter, onLineNumberClick })]
- : [];
-
-export const getAutocompleteExtensions = ({
- readOnly,
- autocomplete,
- autocompleteCloseOnBlur
-}) =>
- readOnly === false && autocomplete
- ? !autocompleteCloseOnBlur
- ? useStickyAutocompleteExtensions
- : useAutocompleteExtensions
- : [];
-
-export const getLineWrappingExtensions = ({ lineWrapping }) =>
- lineWrapping ? lineWrappingExtensions : [];
-
-export const getHistoryExtensions = ({ history }) =>
- history ? historyExtensions : [];
-
-export const getIndentWithTabExtensions = ({ indentWithTab }) =>
- indentWithTab ? indentWithTabExtensions : [];
-
-export const getLintExtensions = ({ readOnly, lint }) =>
- readOnly === false && lint ? useLintExtensions : useNoLintExtensions;
diff --git a/packages/react-codemirror/src/CypherEditor.d.ts b/packages/react-codemirror/src/CypherEditor.d.ts
index f17795b6..c90ebaa8 100644
--- a/packages/react-codemirror/src/CypherEditor.d.ts
+++ b/packages/react-codemirror/src/CypherEditor.d.ts
@@ -66,12 +66,6 @@ export interface CypherEditorProps {
* @defaultValue true
*/
history?: boolean;
- /**
- * Whether pressing the tab key affects editor indentation
- *
- * @defaultValue true
- */
- indentWithTab?: boolean;
/**
* The formatter for the line numbers of the editor
*
@@ -126,6 +120,12 @@ export interface CypherEditorProps {
* The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database
*/
schema?: EditorSupportSchema;
+ /**
+ * Whether the tab key is enabled
+ *
+ * @defaultValue true
+ */
+ tabKey?: boolean;
/**
* Whether to use the light or dark theme for the editor
*
diff --git a/packages/react-codemirror/src/CypherEditor.js b/packages/react-codemirror/src/CypherEditor.js
index e0e0f2ba..e52d9413 100644
--- a/packages/react-codemirror/src/CypherEditor.js
+++ b/packages/react-codemirror/src/CypherEditor.js
@@ -84,7 +84,6 @@ class CypherEditor extends Component {
autocompleteTriggerStrings,
autofocus,
history,
- indentWithTab,
lineNumberFormatter,
lineNumbers,
lineWrapping,
@@ -94,6 +93,7 @@ class CypherEditor extends Component {
readOnly,
readOnlyCursor,
schema,
+ tabKey,
theme,
tooltipAbsolute,
parseOnSetValue,
@@ -110,7 +110,6 @@ class CypherEditor extends Component {
autocompleteTriggerStrings,
autofocus,
history,
- indentWithTab,
lineNumberFormatter,
lineNumbers,
lineWrapping,
@@ -120,6 +119,7 @@ class CypherEditor extends Component {
readOnly,
readOnlyCursor,
schema,
+ tabKey,
theme,
tooltipAbsolute,
parseOnSetValue,
diff --git a/packages/svelte-codemirror/src/CypherEditor.svelte b/packages/svelte-codemirror/src/CypherEditor.svelte
index 2627a3c1..89a0e78d 100644
--- a/packages/svelte-codemirror/src/CypherEditor.svelte
+++ b/packages/svelte-codemirror/src/CypherEditor.svelte
@@ -44,9 +44,6 @@
export let history = defaultOptions.history;
$: updateOption({ history });
- export let indentWithTab = defaultOptions.indentWithTab;
- $: updateOption({ indentWithTab });
-
export let lineNumberFormatter = defaultOptions.lineNumberFormatter;
$: updateOption({ lineNumberFormatter });
@@ -71,6 +68,9 @@
export let readOnlyCursor = defaultOptions.readOnlyCursor;
$: updateOption({ readOnlyCursor });
+ export let tabKey = defaultOptions.tabKey;
+ $: updateOption({ tabKey });
+
export let theme = defaultOptions.theme;
$: updateOption({ theme });
@@ -164,7 +164,6 @@
autocompleteTriggerStrings,
autofocus,
history,
- indentWithTab,
lineNumberFormatter,
lineNumbers,
lineWrapping,
@@ -174,6 +173,7 @@
readOnly,
readOnlyCursor,
schema,
+ tabKey,
theme,
tooltipAbsolute,
parseOnSetValue,
diff --git a/packages/svelte-codemirror/src/CypherEditor.svelte.d.ts b/packages/svelte-codemirror/src/CypherEditor.svelte.d.ts
index 21ab82a8..c341862b 100644
--- a/packages/svelte-codemirror/src/CypherEditor.svelte.d.ts
+++ b/packages/svelte-codemirror/src/CypherEditor.svelte.d.ts
@@ -67,12 +67,6 @@ export interface CypherEditorProps {
* @defaultValue true
*/
history?: boolean;
- /**
- * Whether pressing the tab key affects editor indentation
- *
- * @defaultValue true
- */
- indentWithTab?: boolean;
/**
* The formatter for the line numbers of the editor
*
@@ -127,6 +121,12 @@ export interface CypherEditorProps {
* The schema making the editor aware of things such as node labels & relationship types & procedures in the current graph database
*/
schema?: EditorSupportSchema;
+ /**
+ * Whether the tab key is enabled
+ *
+ * @defaultValue true
+ */
+ tabKey?: boolean;
/**
* Whether to use the light or dark theme for the editor
*