yabab-dev / ng2-codemirror Goto Github PK

Within my angular component, how do I go about accessing CodeMirror methods such as CodeMirror.Pos() - similar to whats found in anyword-hint.js?

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.

why my code can't highlight ?

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"]
  };

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}">

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'.

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

Hello, I want to use keyword highlighting When I enter sql statement, configuration mode does not work？

Im a beginner and using codemirror in angular2 and want to add autocomplete to my editor. My config is set to javascript.

https://plnkr.co/edit/5aiqpxjCtVmVS4VCeKmC?p=preview

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>

When FormControl is used instead of ngModel, the initial value is not passed to the Codemirror

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.

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.

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 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

how can i set the cursor position after value is loaded?

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.

Add codemirror to peerDependencies

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).

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.

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

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'm using ambiance theme and cm-s-ambiance class name is expected to be added but cm-s-cm-s-ambiance is added so style is broken.

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.

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.

Any plan for angular 6 compatibility?

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

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

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?

<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?

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 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'">

{{dialogTitle}}

<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(),

]`

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">

We're just calling function on emitting events.
We should forward necessary information like instance and event so they can be used in complex scenarios. For example the for the below functions, we should get the respective information.

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