Skip to content

Commit d54592d

Browse files
nzbinnzbin
committed
refactor: update docs and readme for diff-editor
1 parent 947fae2 commit d54592d

File tree

6 files changed

+150
-34
lines changed

6 files changed

+150
-34
lines changed

‎README.md‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,39 @@ npm install @acrodata/code-editor --save
2020

2121
## Usage
2222

23+
### Code Editor
24+
2325
```ts
2426
import { Component } from '@angular/core';
2527
import { FormsModule } from '@angular/forms';
2628
import { CodeEditor } from '@acrodata/code-editor';
2729

2830
@Component({
2931
selector: 'your-app',
30-
template: `<code-editor [(ngModel)]="value" />`,
32+
template: `<code-editor [(ngModel)]="code" />`,
3133
standalone: true,
3234
imports: [FormsModule, CodeEditor],
3335
})
3436
export class YourAppComponent {
35-
value = 'console.log("Hello world")';
37+
code = `console.log("Hello world")`;
38+
}
39+
```
40+
41+
### Diff Editor
42+
43+
```ts
44+
import { Component } from '@angular/core';
45+
import { DiffEditor } from '@acrodata/code-editor';
46+
47+
@Component({
48+
selector: 'your-app',
49+
template: `<diff-editor [(originalValue)]="originalCode" [(modifiedValue)]="modifiedCode" />`,
50+
standalone: true,
51+
imports: [DiffEditor],
52+
})
53+
export class YourAppComponent {
54+
originalCode = `bar`;
55+
modifiedCode = `foo`;
3656
}
3757
```
3858

‎projects/dev-app/src/app/home/home.component.html‎

Lines changed: 61 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,75 @@
11
<mat-sidenav-container>
22
<mat-sidenav-content>
33

4-
<mtx-split>
4+
<mtx-split direction="vertical">
55
<mtx-split-pane>
6-
<code-editor #editor
7-
[style.height]="options.height.value+options.height.unit"
8-
[(ngModel)]="code"
9-
(ngModelChange)="log($event)"
10-
[theme]="options.theme"
11-
[setup]="options.setup"
12-
[disabled]="options.disabled"
13-
[readonly]="options.readonly"
14-
[placeholder]="options.placeholder"
15-
[indentWithTab]="options.indentWithTab"
16-
[indentUnit]="options.indentUnit"
17-
[lineWrapping]="options.lineWrapping"
18-
[highlightWhitespace]="options.highlightWhitespace"
19-
[language]="options.language"
20-
[languages]="languages" />
21-
</mtx-split-pane>
226

7+
<mtx-split>
8+
<mtx-split-pane>
9+
<code-editor #editor
10+
[style.height]="options.height.value+options.height.unit"
11+
[(ngModel)]="code"
12+
(ngModelChange)="log($event)"
13+
[theme]="options.theme"
14+
[setup]="options.setup"
15+
[disabled]="options.disabled"
16+
[readonly]="options.readonly"
17+
[placeholder]="options.placeholder"
18+
[indentWithTab]="options.indentWithTab"
19+
[indentUnit]="options.indentUnit"
20+
[lineWrapping]="options.lineWrapping"
21+
[highlightWhitespace]="options.highlightWhitespace"
22+
[language]="options.language"
23+
[languages]="languages" />
24+
</mtx-split-pane>
25+
26+
<mtx-split-pane>
27+
<textarea [style.height]="options.height.value+options.height.unit"
28+
[(ngModel)]="code"></textarea>
29+
</mtx-split-pane>
30+
</mtx-split>
31+
32+
</mtx-split-pane>
2333
<mtx-split-pane>
24-
<pre>{{code}}</pre>
34+
35+
<mtx-split>
36+
<mtx-split-pane>
37+
<code-editor #editor
38+
[style.height]="options.height.value+options.height.unit"
39+
[value]="modifiedCode"
40+
[theme]="options.theme"
41+
[setup]="options.setup"
42+
[readonly]="options.readonly"
43+
[placeholder]="options.placeholder"
44+
[indentWithTab]="options.indentWithTab"
45+
[indentUnit]="options.indentUnit"
46+
[lineWrapping]="options.lineWrapping"
47+
[highlightWhitespace]="options.highlightWhitespace"
48+
[extensions]="unifiedExts" />
49+
50+
</mtx-split-pane>
51+
<mtx-split-pane>
52+
<diff-editor #editor
53+
[style.height]="options.height.value+options.height.unit"
54+
[originalValue]="originalCode"
55+
[modifiedValue]="modifiedCode"
56+
[orientation]="options2.orientation"
57+
[revertControls]="options2.revertControls"
58+
[highlightChanges]="options2.highlightChanges"
59+
[gutter]="options2.gutter" />
60+
61+
</mtx-split-pane>
62+
</mtx-split>
63+
2564
</mtx-split-pane>
2665
</mtx-split>
2766

2867
</mat-sidenav-content>
2968

3069
<mat-sidenav mode="side" position="end" opened>
31-
<gui-form [style.width.px]="300" [form]="form" [config]="config" [model]="options" />
70+
<h4>Code Editor</h4>
71+
<gui-form [config]="config" [model]="options" [form]="form" />
72+
<h4>Diff Editor</h4>
73+
<gui-form [config]="config2" [model]="options2" />
3274
</mat-sidenav>
3375
</mat-sidenav-container>

‎projects/dev-app/src/app/home/home.component.scss‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,19 @@
1111
border: 1px solid var(--mat-divider-color);
1212
}
1313

14-
pre {
15-
padding: 4px;
16-
margin: 0;
17-
line-height: 1.4;
14+
textarea {
15+
width: 100%;
16+
height: 100%;
17+
line-height: 1.38;
18+
background-color: transparent;
1819
}
1920

20-
.gui-form {
21-
padding: 12px 0;
21+
h4 {
22+
padding: 0 12px;
23+
margin: 16px 0 8px;
24+
}
2225

26+
.gui-form {
2327
.gui-field-label {
2428
width: 100px;
2529
}

‎projects/dev-app/src/app/home/home.component.ts‎

Lines changed: 55 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { MatSidenavModule } from '@angular/material/sidenav';
55
import { MtxSplitModule } from '@ng-matero/extensions/split';
66

7-
import { CodeEditor } from '@acrodata/code-editor';
7+
import { CodeEditor, DiffEditor } from '@acrodata/code-editor';
88
import { GuiFields, GuiForm } from '@acrodata/gui';
99
import { languages } from '@codemirror/language-data';
10+
import { unifiedMergeView } from '@codemirror/merge';
1011

1112
@Component({
1213
selector: 'app-home',
@@ -17,6 +18,7 @@ import { languages } from '@codemirror/language-data';
1718
MatSidenavModule,
1819
MtxSplitModule,
1920
CodeEditor,
21+
DiffEditor,
2022
GuiForm,
2123
],
2224
templateUrl: './home.component.html',
@@ -120,10 +122,6 @@ export class HomeComponent implements OnInit, AfterViewInit {
120122

121123
code = '';
122124

123-
log(e: any) {
124-
console.log(e);
125-
}
126-
127125
ngOnInit(): void {
128126
this.getLangSample('javascript');
129127
}
@@ -147,4 +145,56 @@ export class HomeComponent implements OnInit, AfterViewInit {
147145
}
148146
});
149147
}
148+
149+
log(e: any) {
150+
console.log(e);
151+
}
152+
153+
originalCode = `one
154+
two
155+
three
156+
four
157+
five`;
158+
modifiedCode = this.originalCode.replace(/t/g, 'T') + '\nSix';
159+
160+
unifiedExts = [
161+
unifiedMergeView({
162+
original: this.originalCode,
163+
}),
164+
];
165+
166+
config2: GuiFields = {
167+
orientation: {
168+
type: 'buttonToggle',
169+
name: 'Orientation',
170+
options: [
171+
{ label: 'a-b', value: 'a-b' },
172+
{ label: 'b-a', value: 'b-a' },
173+
],
174+
},
175+
revertControls: {
176+
type: 'buttonToggle',
177+
name: 'Revert controls',
178+
options: [
179+
{ label: 'a-to-b', value: 'a-to-b' },
180+
{ label: 'b-to-a', value: 'b-to-a' },
181+
{ label: 'none', value: '' },
182+
],
183+
},
184+
highlightChanges: {
185+
type: 'switch',
186+
name: 'Highlight changes',
187+
},
188+
gutter: {
189+
type: 'switch',
190+
name: 'Gutter',
191+
},
192+
};
193+
194+
options2: any = {
195+
orientation: 'a-b',
196+
revertControls: '',
197+
highlightChanges: true,
198+
gutter: true,
199+
};
150200
}

‎projects/dev-app/src/app/layout/layout.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<mat-toolbar>
2-
<span>Codemirror6 wrapper for Angular</span>
2+
<span>Codemirror 6 wrapper for Angular</span>
33
<span class="spacer"></span>
44
<a mat-icon-button href="https://github.com/acrodata/code-editor" target="_blank">
55
<svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg">

‎projects/dev-app/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Codemirror6 wrapper for Angular</title>
6+
<title>Codemirror 6 wrapper for Angular</title>
77
<base href="/">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="icon" type="image/x-icon" href="favicon.ico">

0 commit comments

Comments
 (0)