rename indentWithTab -> tabKey, fix tab with autocomplete

neo4j · Dec 8, 2022 · b5ca4c5 · b5ca4c5
1 parent 78deeb0
commit b5ca4c5
Show file tree

Hide file tree

Showing 13 changed files with 202 additions and 173 deletions.
diff --git a/.changeset/giant-eagles-repair.md 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
@@ -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 &amp; relationship types &amp; 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
 
 <br>
 
-<a name="editorapi.setindentwithtab"></a>
-
-#### EditorApi.setIndentWithTab() method
-
-Set whether pressing the tab key affects editor indentation
-
-<b>Signature:</b>
-
-```typescript
-setIndentWithTab(indentWithTab?: boolean): void;
-```
-<b>Parameters:</b>
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  indentWithTab | boolean | <i>(Optional)</i> |
-
-<b>Returns:</b>
-
-void
-
-<br>
-
 <a name="editorapi.setlinenumberformatter"></a>
 
 #### EditorApi.setLineNumberFormatter() method
@@ -1344,6 +1321,29 @@ void
 
 <br>
 
+<a name="editorapi.settabkey"></a>
+
+#### EditorApi.setTabKey() method
+
+Set whether the tab key is enabled
+
+<b>Signature:</b>
+
+```typescript
+setTabKey(tabKey?: boolean): void;
+```
+<b>Parameters:</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  tabKey | boolean | <i>(Optional)</i> |
+
+<b>Returns:</b>
+
+void
+
+<br>
+
 <a name="editorapi.settheme"></a>
 
 #### EditorApi.setTheme() method
@@ -1438,7 +1438,6 @@ export interface EditorOptions
 |  [autocompleteTriggerStrings?](#editoroptions.autocompletetriggerstrings) | string\[\] | \[".",":","\[\]","()","<!-- -->{<!-- -->}<!-- -->","\[","(","<!-- -->{<!-- -->","$"\] | <i>(Optional)</i> The keys that when typed will automatically open the autocomplete menu |
 |  [autofocus?](#editoroptions.autofocus) | boolean | true | <i>(Optional)</i> Whether the editor should be auto focused on first creation |
 |  [history?](#editoroptions.history) | boolean | true | <i>(Optional)</i> Whether the editor maintains an undo/redo history |
-|  [indentWithTab?](#editoroptions.indentwithtab) | boolean | true | <i>(Optional)</i> Whether pressing the tab key affects editor indentation |
 |  [lineNumberFormatter?](#editoroptions.linenumberformatter) | [LineNumberFormatter](#linenumberformatter) | (line, lineCount) =<!-- -->&gt; lineCount === 1 ? "$" : line + ""; | <i>(Optional)</i> The formatter for the line numbers of the editor |
 |  [lineNumbers?](#editoroptions.linenumbers) | boolean | true | <i>(Optional)</i> Whether line numbers are shown to the left of the editor ui |
 |  [lineWrapping?](#editoroptions.linewrapping) | boolean | false | <i>(Optional)</i> Whether the editor wraps lines vs using a horizontal scrollbar |
@@ -1451,6 +1450,7 @@ export interface EditorOptions
 |  [readOnly?](#editoroptions.readonly) | boolean | false | <i>(Optional)</i> Whether the editor is read only or the user can edit the editor's value |
 |  [readOnlyCursor?](#editoroptions.readonlycursor) | boolean | false | <i>(Optional)</i> Whether to show the cursor when the editor readOnly is true |
 |  [schema?](#editoroptions.schema) | [EditorSupportSchema](./neo4j-cypher_editor-support.md#editorsupportschema) | undefined | <i>(Optional)</i> The schema making the editor aware of things such as node labels &amp; relationship types &amp; procedures in the current graph database |
+|  [tabKey?](#editoroptions.tabkey) | boolean | true | <i>(Optional)</i> Whether the tab key is enabled |
 |  [theme?](#editoroptions.theme) | [Theme](#theme) | "light" | <i>(Optional)</i> Whether to use the light or dark theme for the editor |
 |  [tooltipAbsolute?](#editoroptions.tooltipabsolute) | boolean | false | <i>(Optional)</i> Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds) |
 |  [value?](#editoroptions.value) | string | "" | <i>(Optional)</i> The initial editor value |
@@ -1559,23 +1559,6 @@ true
 
 <br>
 
-<a name="editoroptions.indentwithtab"></a>
-
-#### EditorOptions.indentWithTab property
-
-Whether pressing the tab key affects editor indentation
-
-<b>Signature:</b>
-
-```typescript
-indentWithTab?: boolean;
-```
-<b>Default Value:</b>
-
-true
-
-<br>
-
 <a name="editoroptions.linenumberformatter"></a>
 
 #### EditorOptions.lineNumberFormatter property
@@ -1780,6 +1763,23 @@ undefined
 
 <br>
 
+<a name="editoroptions.tabkey"></a>
+
+#### EditorOptions.tabKey property
+
+Whether the tab key is enabled
+
+<b>Signature:</b>
+
+```typescript
+tabKey?: boolean;
+```
+<b>Default Value:</b>
+
+true
+
+<br>
+
 <a name="editoroptions.theme"></a>
 
 #### EditorOptions.theme property

diff --git 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 |  | <i>(Optional)</i> A css class name to be added to the root editor dom element |
 |  [focusedClassName?](#cyphereditorprops.focusedclassname) | string |  | <i>(Optional)</i> A css class name to be added to the root editor dom element when it is focused |
 |  [history?](#cyphereditorprops.history) | boolean | true | <i>(Optional)</i> Whether the editor maintains an undo/redo history |
-|  [indentWithTab?](#cyphereditorprops.indentwithtab) | boolean | true | <i>(Optional)</i> Whether pressing the tab key affects editor indentation |
 |  [lineNumberFormatter?](#cyphereditorprops.linenumberformatter) | [LineNumberFormatter](./neo4j-cypher_codemirror.md#linenumberformatter) | (line, lineCount) =<!-- -->&gt; lineCount === 1 ? "$" : line + ""; | <i>(Optional)</i> The formatter for the line numbers of the editor |
 |  [lineNumbers?](#cyphereditorprops.linenumbers) | boolean | true | <i>(Optional)</i> Whether line numbers are shown to the left of the editor ui |
 |  [lineWrapping?](#cyphereditorprops.linewrapping) | boolean | false | <i>(Optional)</i> Whether the editor wraps lines vs using a horizontal scrollbar |
@@ -105,6 +104,7 @@ export interface CypherEditorProps
 |  [readOnly?](#cyphereditorprops.readonly) | boolean | false | <i>(Optional)</i> Whether the editor is read only or the user can edit the editor's value |
 |  [readOnlyCursor?](#cyphereditorprops.readonlycursor) | boolean | false | <i>(Optional)</i> Whether to show the cursor when the editor readOnly is true |
 |  [schema?](#cyphereditorprops.schema) | [EditorSupportSchema](./neo4j-cypher_editor-support.md#editorsupportschema) |  | <i>(Optional)</i> The schema making the editor aware of things such as node labels &amp; relationship types &amp; procedures in the current graph database |
+|  [tabKey?](#cyphereditorprops.tabkey) | boolean | true | <i>(Optional)</i> Whether the tab key is enabled |
 |  [theme?](#cyphereditorprops.theme) | [Theme](./neo4j-cypher_codemirror.md#theme) | "light" | <i>(Optional)</i> Whether to use the light or dark theme for the editor |
 |  [tooltipAbsolute?](#cyphereditorprops.tooltipabsolute) | boolean | false | <i>(Optional)</i> Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds) |
 |  [value?](#cyphereditorprops.value) | string | "" | <i>(Optional)</i> The editor text value |
@@ -262,23 +262,6 @@ true
 
 <br>
 
-<a name="cyphereditorprops.indentwithtab"></a>
-
-#### CypherEditorProps.indentWithTab property
-
-Whether pressing the tab key affects editor indentation
-
-<b>Signature:</b>
-
-```typescript
-indentWithTab?: boolean;
-```
-<b>Default Value:</b>
-
-true
-
-<br>
-
 <a name="cyphereditorprops.linenumberformatter"></a>
 
 #### CypherEditorProps.lineNumberFormatter property
@@ -552,6 +535,23 @@ schema?: EditorSupportSchema;
 
 <br>
 
+<a name="cyphereditorprops.tabkey"></a>
+
+#### CypherEditorProps.tabKey property
+
+Whether the tab key is enabled
+
+<b>Signature:</b>
+
+```typescript
+tabKey?: boolean;
+```
+<b>Default Value:</b>
+
+true
+
+<br>
+
 <a name="cyphereditorprops.theme"></a>
 
 #### CypherEditorProps.theme property

diff --git 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 |  | <i>(Optional)</i> A css class name to be added to the root editor dom element |
 |  [focusedClassName?](#cyphereditorprops.focusedclassname) | string |  | <i>(Optional)</i> A css class name to be added to the root editor dom element when it is focused |
 |  [history?](#cyphereditorprops.history) | boolean | true | <i>(Optional)</i> Whether the editor maintains an undo/redo history |
-|  [indentWithTab?](#cyphereditorprops.indentwithtab) | boolean | true | <i>(Optional)</i> Whether pressing the tab key affects editor indentation |
 |  [lineNumberFormatter?](#cyphereditorprops.linenumberformatter) | [LineNumberFormatter](./neo4j-cypher_codemirror.md#linenumberformatter) | (line, lineCount) =<!-- -->&gt; lineCount === 1 ? "$" : line + ""; | <i>(Optional)</i> The formatter for the line numbers of the editor |
 |  [lineNumbers?](#cyphereditorprops.linenumbers) | boolean | true | <i>(Optional)</i> Whether line numbers are shown to the left of the editor ui |
 |  [lineWrapping?](#cyphereditorprops.linewrapping) | boolean | false | <i>(Optional)</i> Whether the editor wraps lines vs using a horizontal scrollbar |
@@ -106,6 +105,7 @@ export interface CypherEditorProps
 |  [readOnly?](#cyphereditorprops.readonly) | boolean | false | <i>(Optional)</i> Whether the editor is read only or the user can edit the editor's value |
 |  [readOnlyCursor?](#cyphereditorprops.readonlycursor) | boolean | false | <i>(Optional)</i> Whether to show the cursor when the editor readOnly is true |
 |  [schema?](#cyphereditorprops.schema) | [EditorSupportSchema](./neo4j-cypher_editor-support.md#editorsupportschema) |  | <i>(Optional)</i> The schema making the editor aware of things such as node labels &amp; relationship types &amp; procedures in the current graph database |
+|  [tabKey?](#cyphereditorprops.tabkey) | boolean | true | <i>(Optional)</i> Whether the tab key is enabled |
 |  [theme?](#cyphereditorprops.theme) | [Theme](./neo4j-cypher_codemirror.md#theme) | "light" | <i>(Optional)</i> Whether to use the light or dark theme for the editor |
 |  [tooltipAbsolute?](#cyphereditorprops.tooltipabsolute) | boolean | false | <i>(Optional)</i> Whether or not the tooltips use simple absolute position styling (vs trying to stay within bounds) |
 |  [value?](#cyphereditorprops.value) | string | "" | <i>(Optional)</i> The editor text value |
@@ -263,23 +263,6 @@ true
 
 <br>
 
-<a name="cyphereditorprops.indentwithtab"></a>
-
-#### CypherEditorProps.indentWithTab property
-
-Whether pressing the tab key affects editor indentation
-
-<b>Signature:</b>
-
-```typescript
-indentWithTab?: boolean;
-```
-<b>Default Value:</b>
-
-true
-
-<br>
-
 <a name="cyphereditorprops.linenumberformatter"></a>
 
 #### CypherEditorProps.lineNumberFormatter property
@@ -553,6 +536,23 @@ schema?: EditorSupportSchema;
 
 <br>
 
+<a name="cyphereditorprops.tabkey"></a>
+
+#### CypherEditorProps.tabKey property
+
+Whether the tab key is enabled
+
+<b>Signature:</b>
+
+```typescript
+tabKey?: boolean;
+```
+<b>Default Value:</b>
+
+true
+
+<br>
+
 <a name="cyphereditorprops.theme"></a>
 
 #### CypherEditorProps.theme property

diff --git 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,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'><circle cx='20' cy='20' r='19' stroke='black' stroke-width='1' fill='white'></circle><text x='50%' y='50%' text-anchor='middle' dy='.35em' font-size='28' font-family='Monaco' fill='%23268bd2'>V</text></svg>");
 }
+
+.cm-tooltip-autocomplete {
+    margin-top: 4px;
+}
diff --git 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
    *