Skip to content

Commit cc7a8d5

Browse files
author
Maxime LUCE
committed
feat: add keybindings property to register custom keymap handler
1 parent 926d470 commit cc7a8d5

File tree

2 files changed

+26
-22
lines changed

2 files changed

+26
-22
lines changed

‎README.md‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -37,35 +37,36 @@ To use `svelte-codemirror-editor`, you need to import the package and use it as
3737

3838
## Properties
3939

40-
| Property | Type | Description | Default value |
41-
| ---------------------- | -------------------- | --------------------------------------------------------------------- | ------------- |
42-
| `value` | `string` | The value that will be displayed and edited in the CodeMirror editor. | `""` |
43-
| `class` | `ClassValue` | Class value to add additional css classes to CodeMirror editor. | `""` |
44-
| `lang` | `LanguageSupport` | The language extension that will parse and highlight the value. | `undefined` |
45-
| `theme` | `Extension` | The theme extension to customize the appearence of the editor. | `undefined` |
46-
| `extensions` | `Extension[]` | Additional extensions to inject in the editor. | `[]` |
47-
| `allowMultiSelect` | `boolean` | Whether to allow multi-selecting text. | `true` |
48-
| `useTab` | `boolean` | Whether to use the `Tab` shortcut to handle indentation. | `true` |
49-
| `tabSize` | `number` | The number of space of an indentation level. | `2` |
50-
| `editable` | `boolean` | Whether to make the editor editable or not. | `true` |
51-
| `readonly` | `boolean` | Whether to make the editor readonly or not. | `false` |
52-
| `lineWrapping` | `boolean` | Whether to wrap lines in the editor or not. | `false` |
53-
| `lineNumbers` | `boolean` | Whether to show line numbers or not. | `true` |
54-
| `highlight` | `object` | Hightlighting options. | `{}` |
40+
| Property | Type | Description | Default value |
41+
| ---------------------- | --------------------- | --------------------------------------------------------------------- | ------------- |
42+
| `value` | `string` | The value that will be displayed and edited in the CodeMirror editor. | `""` |
43+
| `class` | `ClassValue` | Class value to add additional css classes to CodeMirror editor. | `""` |
44+
| `lang` | `LanguageSupport` | The language extension that will parse and highlight the value. | `undefined` |
45+
| `theme` | `Extension` | The theme extension to customize the appearence of the editor. | `undefined` |
46+
| `extensions` | `Extension[]` | Additional extensions to inject in the editor. | `[]` |
47+
| `keybinding` | `KeyBinding[]` | Additional keybindings to register. | `[]` |
48+
| `allowMultiSelect` | `boolean` | Whether to allow multi-selecting text. | `true` |
49+
| `useTab` | `boolean` | Whether to use the `Tab` shortcut to handle indentation. | `true` |
50+
| `tabSize` | `number` | The number of space of an indentation level. | `2` |
51+
| `editable` | `boolean` | Whether to make the editor editable or not. | `true` |
52+
| `readonly` | `boolean` | Whether to make the editor readonly or not. | `false` |
53+
| `lineWrapping` | `boolean` | Whether to wrap lines in the editor or not. | `false` |
54+
| `lineNumbers` | `boolean` | Whether to show line numbers or not. | `true` |
55+
| `highlight` | `object` | Hightlighting options. | `{}` |
5556
| `history` | `boolean` \| `object` | Enable/Disable and/or configure history. | `true` |
5657
| `foldGutter` | `boolean` \| `object` | Enable/disable and/or configure fold gutter. | `true` |
5758
| `drawSelection` | `boolean` \| `object` | Enable/disable and/or configure draw selection. | `true` |
58-
| `dropCursor` | `boolean` | Whether to show the drop cursor. | `true` |
59-
| `indentOnInput` | `boolean` | Whether to indent on input. | `true` |
59+
| `dropCursor` | `boolean` | Whether to show the drop cursor. | `true` |
60+
| `indentOnInput` | `boolean` | Whether to indent on input. | `true` |
6061
| `syntaxHighlighting` | `boolean` \| `object` | Enable/disable and/or configure syntax highlighting. | `true` |
6162
| `bracketMatching` | `boolean` \| `object` | Enable/disable and/or configure bracket matching. | `true` |
62-
| `closeBrackets` | `boolean` | Whether to close brackets automatically. | `true` |
63+
| `closeBrackets` | `boolean` | Whether to close brackets automatically. | `true` |
6364
| `autocompletion` | `boolean` \| `object` | Enable/disable and/or configure autocompletion. | `true` |
6465
| `rectangularSelection` | `boolean` \| `object` | Enable/disable and/or configure rectangular selection. | `true` |
6566
| `crosshairCursor` | `boolean` \| `object` | Enable/disable and/or configure crosshair cursor. | `true` |
66-
| `placeholder` | `string` | The placeholder text or element to show when the editor is empty. | `undefined` |
67-
| `nodebounce` | `boolean` | Disable onchange debounce for value updates. (may impact performance) | `false` |
68-
| `styles` | `ThemeSpec` | In-place theme configuration. _See exemple below_. | `undefined` |
67+
| `placeholder` | `string` | The placeholder text or element to show when the editor is empty. | `undefined` |
68+
| `nodebounce` | `boolean` | Disable onchange debounce for value updates. (may impact performance) | `false` |
69+
| `styles` | `ThemeSpec` | In-place theme configuration. _See exemple below_. | `undefined` |
6970

7071
## Events
7172

‎src/lib/CodeMirror.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@
6868
6969
/** Additional extensions to inject in the editor.*/
7070
extensions?: Extension[];
71+
/** Additional keybindings to register. */
72+
keybindings?: KeyBinding[];
7173
/** In-place theme configuration. */
7274
styles?: ThemeSpec | null | undefined;
7375
@@ -141,6 +143,7 @@
141143
lang,
142144
theme,
143145
extensions = [],
146+
keybindings = [],
144147
allowMultiSelect = true,
145148
useTab = true,
146149
tabSize = 2,
@@ -274,7 +277,7 @@
274277
EditorState.allowMultipleSelections.of(allowMultiSelect),
275278
];
276279
277-
const key_bindings: KeyBinding[] = [...defaultKeymap, ...searchKeymap, ...lintKeymap];
280+
const key_bindings: KeyBinding[] = [...keybindings, ...defaultKeymap, ...searchKeymap, ...lintKeymap];
278281
279282
if (useTab) key_bindings.push(indentWithTab);
280283

0 commit comments

Comments
 (0)