yabab-dev / ng2-codemirror Goto Github PK
View Code? Open in Web Editor NEWAngular2 CodeMirror component
License: MIT License
Angular2 CodeMirror component
License: MIT License
The definition files don't contain definitions for the CodemirrorModule, so attempting to use the module in a Typescript results in a compile error:
import {CodemirrorModule} from 'ng2-codemirror'
Error:(32, 9) TS2305: Module '"...../node_modules/ng2-codemirror/Codemirror"' has no exported member 'CodemirrorModule'.
As Angular 4 doesn't break compabilities, it should be compatible.
It isn't compatible because the package.json says it's only Angular 2 compatible.
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└─┬ [email protected]
└── [email protected]
npm WARN [email protected] requires a peer of @angular/core@^2.1.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/forms@^2.1.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/common@^2.1.0 but none was installed.
^ Console return from npm i --save ng2-codemirror
I am currently using mode "text/x-mysql", I'm wondering how can I add custom keyword (e.g. UPPER, LOWER, etc) which will be highlighted as syntax (SELECT, FROM, etc)
I have this config:
this.config = {
lineNumbers: true,
mode: 'text/x-mysql',
extraKeys: { "Ctrl-Space": "autocomplete" },
theme: 'eclipse',
hintOptions: {
tables: {
"table1": ["col_A", "col_B", "col_C"],
"table2": ["other_columns1", "other_columns2"]
}
}
};
Thanks.
Will this project be updated to work with Angular 5? I have not noticed any issues in our current use of this project with our Angular 5 app. Would just like to resolve the dependency warnings that are present when installing.
Thanks!
I am new in using codeMirror and I dont know if I am using it correctly
config : any
this.config = { lineNumbers: true, mode: 'text/x-sql' , fullScreen: true }
<codemirror [(ngModel)]="content" [config]="config">
Im a beginner and using codemirror in angular2 and want to add autocomplete to my editor. My config is set to javascript.
Any plan for angular 6 compatibility?
how can i set the cursor position after value is loaded?
When using Storybook we are getting the following error:
Unhandled Promise rejection: Importing CodemirrorModule which does not have a ɵmod property ; Zone: ; Task: Promise.then ; Value: Error: Importing CodemirrorModule which does not have a ɵmod property
If you don't want to track memory leak in your application, I suggest you stop using it. All subscriptions on the screenshot are not destroyed when the component is destroyed, so you get 4 leaked subscriptions on each codemirror init, which is causing the slow-down of the application after some time of using it.
This wrapper' quality is really poor, just look at the second and third screenshots with comments, those are useless. I'm not hating, but me and my team had to profile and refactor our big app and then we found that this wrapper leaks subscriptions, after we commented codemirror instances app is flying.
Hello,
I'm trying to change the theme or other configuration after create it (with buttons) but changing the object config, don't change anything on the component, I was looking, and there is nothing to notify codemirror to change it. How can i do that?
Thanks
Hi there,
I'm trying to get access to original Object that is passed while change
event. According to CodeMirrow documentation it supposed to return diff to current code value
"change" (instance: CodeMirror, changeObj: object)
Fires every time the content of the editor is changed. The changeObj is a {from, to, text, removed, origin} object containing information about the changes that occurred as second argument. from and to are the positions (in the pre-change coordinate system) where the change started and ended (for example, it might be {ch:0, line:18} if the position is at the beginning of line #19). text is an array of strings representing the text that replaced the changed range (split by line). removed is the text that used to be between from and to, which is overwritten by this change. This event is fired before the end of an operation, before the DOM updates happen.
However I get the applied results when I try to log $event.
app.component.html
<codemirror [(ngModel)]="content"
[config]="codeMirrorConfig"
(change)="onChange($event)">
</codemirror>
app.component.ts
onChange(event) {
console.log(event);
}
Result in console when I type 12345:
editor.component.ts:41 1
editor.component.ts:41 12
editor.component.ts:41 123
editor.component.ts:41 1234
editor.component.ts:41 12345
Thank you for your help in advance!
I have no idea to resolve it.
//angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/codemirror/lib/codemirror.css",
"../node_modules/codemirror/theme/monokai.css",
"../node_modules/codemirror/addon/fold/foldgutter.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/codemirror/lib/codemirror.js",
"../node_modules/codemirror/mode/javascript/javascript.js",
"../node_modules/codemirror/mode/clike/clike.js",
"../node_modules/codemirror/addon/fold/foldcode.js",
"../node_modules/codemirror/addon/fold/foldgutter.js",
"../node_modules/codemirror/addon/fold/brace-fold.js",
"../node_modules/codemirror/addon/fold/indent-fold.js",
"../node_modules/codemirror/addon/fold/comment-fold.js"
],
and an exception : cm.foldCode
//mycomponet
@ViewChild('editor') editor: any;
config = {
lineNumbers: true,
lineWrapping: true,
autofocus: true,
theme: 'monokai',
mode: 'javascript',
matchBrackets: true,
foldGutter: true,
extraKeys: {
"Ctrl-Q": function (cm) {
console.log(cm); //CodeMirror$1 {options: {…}, doc: Doc, display: Display, state: {…}, curOp: {…}, …}
cm.foldCode(cm.getCursor()); //here is an EXCEPTION: cm.foldCode is not a function
}
},
readOnly: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
};
Hello, I want to use keyword highlighting When I enter sql statement, configuration mode does not work?
<codemirror [(ngModel)]="code" [config]="codeConfiguration"></codemirror>
private code: string = "#ifndef flow_H\n#define flow_H\n\n#include <pthread.h>\n#include <semaphore.h>\n#include <time.h>\nsem_t sem_main_to_0;\nsem_t sem_0_to_1;\nsem_t sem_1_to_main;\nsem_t sem_periodic_1;\n\n\npthread_t threadPosix11_id, threadPosix12_id;\nstruct timespec ts;\t\t//struct defined in time.h, we use to control a timedwait semaphore\nstruct timespec ts0;\t\t//struct defined in time.h, we use to control a timedwait semaphore\nstruct timespec tsP;\t\t//struct defined in time.h, we use to control a timedwait semaphore\nstruct sched_param param;\n\nvoid *flow (void *id);\n\n//void *task_flow(void *id);\nvoid *threadPosix11 (void *id);\nvoid *threadPosix12 (void *id);\n\n#endif /* flow_H */\n"; private codeConfiguration: any = { indentWithTabs: false, lineNumbers: true, readOnly: 'nocursor', lineWrapping: true, matchBrackets: true, mode: 'text/x-c++src', viewportMargin: 200 };
angular-cli.json
"styles": [ "../node_modules/codemirror/lib/codemirror.css", "styles.scss" ], "scripts": [ "../node_modules/codemirror/lib/codemirror.js" ],
What is it missing?
I'm struggling here a bit. CodeMirror has a ton of methods defined on it that cannot be accessed via config. One thing CM does is intercept ctrl+s
action which means that whenever I try to register the hotkey using another module, the event, for some reason, doesn't bubble up.
So instead, I want to use the CodeMirror.commands
and register a save
method. Is there any way to get an instance of CodeMirror back after giving it a config so that these things can be accessed?
I've tried following the instructions and piecing together stuff on the forums and can't seem to get this to work. I'm running Angular 7.
My angular.json:
"styles": [
..
"node_modules/codemirror/lib/codemirror.css",
"node_modules/codemirror/theme/darcula.css"
],
"scripts": [
"node_modules/codemirror/lib/codemirror.js",
]
My feature module:
@NgModule({
imports: [
..
CodemirrorModule,
],
providers: [..],
exports: []
})
My component HTML:
<codemirror formControlName="template" [config]="batchTemplateCodeMirrorConfig" style="width: 100%" [ngClass]="form.get('template').errors && form.get('template').touched ? 'is-invalid' : ''"> </codemirror>
My component ts:
import 'codemirror/mode/javascript/javascript';
@Component({
..
})
export class CodeMirrorDemo implements OnInit, OnDestroy {
..
batchTemplateCodeMirrorConfig = {
value: 'let x=x+1',
theme: 'darcula.css',
lineNumbers: true,
mode: 'javascript' };
..
The line numbers display, but no theming comes through and the javascript mode isn't respected.
What am I missing? FWIW I tried including the javascript mode js in the angular.json, but I got a loading error in the Chrome console:
CodeMirror.defineMode is not a function
.. and it didn't work.
Hey this is just a question on how can I tweak Codemirror to pass it a list of keywords that I want to appear in the autocomplete list?
But then the autocomplete is not supposed to appear on the shortcut ctrl+space but as soon as the user types three consecutive letters. How can I listen to the events on the Codemirror instance and fire the autocomplete with the custom list of keywords?
Thanks in advance for any guidance you can provide me with.
Within my angular component, how do I go about accessing CodeMirror methods such as CodeMirror.Pos() - similar to whats found in anyword-hint.js?
When I change ngModel programmatically (rather than by typing in the editor), the scroll jumps back up to the top line. Any idea what's causing this? Is it expected behavior?
I cannot use this module with SSR / angular universal because it throws this error:
ReferenceError: navigator is not defined
at MYPROJECT/node_modules/codemirror/lib/codemirror.js:18:17
I tried to use blur, which is listed on http://codemirror.net/doc/manual.html#events to detect when the focus is lost on the codemirror object, but my function doesn't get called. Here's a sample:
<codemirror [(ngModel)]="code" name="code" [config]="config" (blur)="focusLost()">
focusLost() {
console.log("Focus lost")
}
But the blur event never fires. Is this not bubbled up through the component?
Thanks,
Brian
After i try to run
ng update @angular/cli @angular/core
I face problem below
packageGroup metadata of package @angular/cli is malformed. Ignoring.
packageGroup metadata of package @angular/cli is malformed.
packageGroup metadata of package @angular/cli is malformed. Ignoring.
packageGroup metadata of package @angular/cli is malformed. Ignoring.
packageGroup metadata of package @angular/cli is malformed.
packageGroup metadata of package @angular/cli is malformed. Ignoring.
packageGroup metadata of package @angular/cli is malformed. Ignoring.
Package "ng2-codemirror" has an incompatible peer dependency to "@angular/forms" (requires "^2.1.0 || ^4.0.0" (extended), would install "8.2.10").
Package "ng2-codemirror" has an incompatible peer dependency to "@angular/core" (requires "^2.1.0 || ^4.0.0" (extended), would install "8.2.10").
Package "ng2-codemirror" has an incompatible peer dependency to "@angular/common" (requires "^2.1.0 || ^4.0.0" (extended), would install "8.2.10").
Incompatible peer dependencies found. See above.
I am working in angular 4 with ng2 bs3 modal and add codemirror into my modal. my code is here:
Click Event
<a href="javascript:void(0)" class="btn btn-info pull-right btn-sm" (click)="defi(apidetail.detailinfo, apidetail.detailtype,i)">View all</a>
Modal
`<modal #modalDetail [backdrop]="'static'">
<table width="100%" class="table table-bordered" *ngIf="modalPopUp=='g'">
<tr *ngFor="let detail of definitionList">
<td style="width:200px; vertical-align:middle">{{detail.detailkey}}</td>
<td ><codemirror [(ngModel)]="detail.detailvalue" [config]="config" ></codemirror></td>
</tr>
</table>
from component.ts
this.config = { mode:'application/xml',theme: 'eclipse', lineNumbers: true, lineWrapping: true,readOnly: true,cursorBlinkRate: -1}; defi(data) { this.slimLoadingBarService.start(); this.definitionList = data; this.modalPopUp = 'g'; this.modalDetail.open('lg') this.slimLoadingBarService.complete(); }
from appmodule.ts
`import { CodemirrorModule } from 'ng2-codemirror';
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpModule,
Ng2Bs3ModalModule,
CodemirrorModule,
DndModule.forRoot(),
SlimLoadingBarModule.forRoot(),
]`
Add codemirror to peerDependencies
How can I use custom mode or extend existing one (e.q. javascript)?
Link to my question on stackoverflow:
http://stackoverflow.com/questions/40131996/how-to-define-custom-mode-in-ng2-codemirror
If I use it like this:
<codemirror [(ngModel)]="code"
(focus)="onFocus()"
(blur)="onBlur()"
[config]="config"
>
</codemirror>
I get the following error:
ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.Example 1: <input [(ngModel)]="person.firstName" name="first"> Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
Hello,
Could please help me with the issue I have with CodeMirror. I'm using it with Angular 4 application. I try to make LineNumbers work. Syntax highlight seems to work just fine. But lineNumbers do not appear. See attached screenshot. Console doesn't show any errors.
I've imported the following into package.json
:
"codemirror": "^5.27.4",
"ng2-codemirror": "^1.1.3",
.angular-cli.json
:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/codemirror/lib/codemirror.css",
"styles.css"
],
"scripts": [],
app.module.ts
import {CodemirrorModule} from "ng2-codemirror";
@NgModule({
imports: [
...
CodemirrorModule,
...
],
declarations: [ EditorComponent]
})
export class InterviewModule { }
editor.component.ts
import 'codemirror'
import 'codemirror/mode/javascript/javascript'
@Component({
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css'],
providers: [ MessageService ]
})
export class EditorComponent implements OnInit {
content: string = '';
codeMirrorConfig: {
lineNumbers: true,
lineWrapping: true,
mode: 'javascript'
};
}
editor.component.html
<codemirror [(ngModel)]="content"
[config]="codeMirrorConfig">
</codemirror>
Seems not compatible with angular-cli >=beta-22.
Seems to be link to an incompatibility with angular 2.2* and previous version.
Maybe just need to regenerate js with a recent version of angular2.
When FormControl is used instead of ngModel, the initial value is not passed to the Codemirror
Hi,
EDIT : I updated the plunker to include javascript
mode, there is no syntax highlight https://plnkr.co/edit/5aiqpxjCtVmVS4VCeKmC?p=preview
ng2-codemirror doesn't seem to consider the mode configuration. Everything work except the mode (I tried different modes such as 'javascript' or 'css'...). I'm using webpack so here is the index.ts
...
import 'codemirror';
import '../node_modules/codemirror/lib/codemirror.css';
import '../node_modules/codemirror/theme/mdn-like.css';
import '../node_modules/codemirror/mode/javascript/javascript.js';
import '../node_modules/codemirror/mode/css/css.js';
..
The module
...
import {CodemirrorModule} from 'ng2-codemirror';
import {CodeCreationComponent} from './code-creation/code-creation.component';
@NgModule({
imports: [
CodemirrorModule
],
declarations: [
CodeCreationComponent
]
})
export class CreationsModule {}
The component
import {Component} from '@angular/core';
import {ICreation} from '../../shared';
@Component({
selector: 'code-creation',
template: require('./code-creation.html')
})
export class CodeCreationComponent {
public crea: ICreation;
private baseConfig = {
lineNumbers: true,
theme: 'mdn-like',
mode: 'javascript'
};
private jsConfig = this.baseConfig;
private cssConfig = this.baseConfig;
constructor() {
this.cssConfig.mode = 'css';
}
}
And the template
<codemirror [(ngModel)]="crea.script" [config]="baseConfig"></codemirror>
<codemirror [(ngModel)]="crea.style" [config]="cssConfig"></codemirror>
I saw in the document that the markup textarea
generated by CodeMirror has no name
field nor id
field, I don't know if I have to worry about that.
I don't know whether it's a bug or by design, but I am getting double calback from ngModelChange
.
While experimenting with the codemirror element suggested usage, I took the banana out of the box, as in:
<codemirror #editor [ngModel]="code" (ngModelChange)="onChanged($event)" [config]="config"></codemirror>
onChanged($event){
console.log('onChanged', $event);
this.codeOut = $event;
}
and I am getting double console.log on every change (keystroke or paste).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.