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,V"); } + +.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 *