Skip to content

Commit

Permalink
feat: add property to specify the selection behavior when the value i…
Browse files Browse the repository at this point in the history 
…s updated
  • Loading branch information
Soc Sieng committed Sep 26, 2020
1 parent d5ca719 commit 02b8e7a
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 16 deletions.
31 changes: 16 additions & 15 deletions README.md
View file
Expand Up @@ -54,21 +54,22 @@ npm install ace-custom-element

## Supported properties

| Property | Attribute | Type | Default value | Description |
| :------------------------ | :--------------------------- | :----------- | :-------------------------------------------- | :------------------------------------------------------- |
| `editor` | - | `Ace.Editor` | - | A reference to the ace editor. |
| `value` | `value` | `string` | `""` | Editor text value. |
| `mode` | `mode` | `string` | `ace/mode/javascript` | Editor mode. |
| `theme` | `theme` | `string` | `ace/theme/eclipse` | Editor theme. |
| `tabSize` | `tab-size` | `number` | `2` | Editor tab size. |
| `readonly` | `readonly` | `boolean` | `false` | Places editor in readonly mode. |
| `softTabs` | `soft-tabs` | `boolean` | `false` | Sets editor to use soft tabs. |
| `wrap` | `wrap` | `boolean` | `false` | Sets editor to wrap text. |
| `hideActiveLineHighlight` | `hide-active-line-highlight` | `boolean` | `false` | Hides highlight for the current line. |
| `hideGutter` | `hide-gutter` | `boolean` | `false` | Hides the editor gutter. |
| `hideGutterLineHighlight` | `hide-gutter-line-highlight` | `boolean` | `false` | Hides gutter highlight for the current line. |
| `hidePrintMargin` | `hide-print-margin` | `boolean` | `false` | Hides the print margin (vertical ruler). |
| `basePath` | `base-path` | `string` | `ace/` folder relative to module import path. | Specifies the location to load additional ACE resources. |
| Property | Attribute | Type | Default value | Description |
| :------------------------ | :--------------------------- | :-------------------------------- | :-------------------------------------------- | :----------------------------------------------------------------- |
| `editor` | - | `Ace.Editor` | - | A reference to the ace editor. |
| `value` | `value` | `string` | `""` | Editor text value. |
| `mode` | `mode` | `string` | `ace/mode/javascript` | Editor mode. |
| `theme` | `theme` | `string` | `ace/theme/eclipse` | Editor theme. |
| `tabSize` | `tab-size` | `number` | `2` | Editor tab size. |
| `readonly` | `readonly` | `boolean` | `false` | Places editor in readonly mode. |
| `softTabs` | `soft-tabs` | `boolean` | `false` | Sets editor to use soft tabs. |
| `wrap` | `wrap` | `boolean` | `false` | Sets editor to wrap text. |
| `wrap` | `wrap` | `boolean` | `false` | Sets editor to wrap text. |
| `valueUpdateMode` | `value-update-mode` | `"start"`, `"end"`, or `"select"` | `"select"` | Specifies the selection behavior after the value has been updated. |
| `hideGutter` | `hide-gutter` | `boolean` | `false` | Hides the editor gutter. |
| `hideGutterLineHighlight` | `hide-gutter-line-highlight` | `boolean` | `false` | Hides gutter highlight for the current line. |
| `hidePrintMargin` | `hide-print-margin` | `boolean` | `false` | Hides the print margin (vertical ruler). |
| `basePath` | `base-path` | `string` | `ace/` folder relative to module import path. | Specifies the location to load additional ACE resources. |

## Supported events

Expand Down
17 changes: 16 additions & 1 deletion src/AceEditor.ts
View file
Expand Up @@ -6,6 +6,18 @@ import { name as editorName, version as editorVersion } from '../package.json';
import { Ace } from 'ace-builds';
import { debounce } from './lib/debounce';

enum ValueUpdateMode {
start = 'start',
end = 'end',
select = 'select',
}

function getValueUpdateNumber(mode?: ValueUpdateMode): number {
if (mode === ValueUpdateMode.start) return -1;
if (mode === ValueUpdateMode.end) return 1;
return 0;
}

/**
* Custom element Ace code editor
*/
Expand Down Expand Up @@ -45,6 +57,9 @@ class AceEditor extends HTMLElement {
@NotifyBooleanAttribute()
wrap?: boolean;

@NotifyAttribute()
valueUpdateMode?: ValueUpdateMode;

@NotifyBooleanAttribute()
hideActiveLineHighlight?: boolean;

Expand Down Expand Up @@ -97,7 +112,7 @@ class AceEditor extends HTMLElement {

const text = editor.getValue() || '';
if (text !== this.value) {
editor.setValue(this.value || '');
editor.setValue(this.value || '', getValueUpdateNumber(this.valueUpdateMode));
}

editor.getSession().setTabSize(this.tabSize || 2);
Expand Down

0 comments on commit 02b8e7a

Please sign in to comment.