Commit e4f75fce authored by dmacfarlane's avatar dmacfarlane
Browse files

NPM package updates.

parent 76883b8e

.npmignore

0 → 100644
+18 −0
Original line number Diff line number Diff line 
.idea

typings

node_modules

jspm_packages

link-checker-results.txt

**/*npm-debug.log.*

app/**.js

app/**.js.map

_test-output

_temp



!**/*e2e-spec.js

!karma*.js

!protractor*.js

!wallaby.js



**/*.sh

**/.DS_Store

README.md

+8 −3
Original line number Diff line number Diff line
@@ -9,14 +9,18 @@ and content editable fields. Not fully browser tested and comes without warranty 


To install and start the demo application:



    git clone https://github.com/dmacfarlane/ng2-mentions.git

    cd ng2-mentions

    npm install

    npm start



### Usage



Copy the mention folder into your own application.

Copy the mention folder into your own application, or install the package as a dependency using:



Add the dependancies to your index.html:

    npm install --save ng2-mentions



Add the CSS and JS dependencies your index.html:



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script src="ext/textarea-caret-position.js"></script>
@@ -32,7 +36,8 @@ Where `items` is a string array of the items to suggest. For example: 
#### TODO:



- Remove debug (always)

- Menu clicks not working in content editable

- Improve NPM package structure

- Fix menu clicks not working in content editable

- Configurable prefix

- Configurable limit on number of items shown via config

- Load items via http (config for number of chars before search)

app/app.component.ts

+1 −1
Original line number Diff line number Diff line 
import {Component} from 'angular2/core';

import {Mention} from './mention/mention';

import {Mention} from '../mention/mention';

import {COMMON_NAMES} from './common-names';

import {TinyMCE} from './tinymce.component';

app/tinymce.component.ts

+8 −16
Original line number Diff line number Diff line 
import {Component, ElementRef, NgZone} from 'angular2/core';

import {Input, Output, Inject} from 'angular2/core';

import {ViewChild} from 'angular2/core';

import {Mention} from './mention/mention';

import {Component, ElementRef, NgZone, Input, ViewChild} from 'angular2/core';

import {Mention} from '../mention/mention';

import {COMMON_NAMES} from './common-names';



declare var tinymce: any;



/**

 * Angular 2 Mentions.

 * https://github.com/dmacfarlane/ng2-mentions

 *

 * Example usage with TinyMCE.

 */

@Component({

    selector: 'tinymce',

    template: `
@@ -17,7 +21,6 @@ declare var tinymce: any; 
    </div>`,

    directives: [Mention]

})



export class TinyMCE {

  @Input() htmlContent;

  @ViewChild('mention') mention;
@@ -26,7 +29,6 @@ export class TinyMCE { 
  constructor(private _elementRef: ElementRef) {

    this.zone = new NgZone({enableLongStackTrace: false});

  }



  ngAfterViewInit()

  {

    tinymce.init({
@@ -44,15 +46,12 @@ export class TinyMCE { 
      }

    );

  }



  tinySetup(ed) {

    let comp = this;

    let mention = this.mention;



    ed.on('keydown', function(e) {

      let frame = <any>window.frames[ed.iframeElement.id];

      let contentEditable = frame.contentDocument.getElementById('tinymce');

      //comp.update(e, contentEditable);

      comp.zone.run(() => {

        comp.mention.keyHandler(e, contentEditable);

      });
@@ -61,11 +60,4 @@ export class TinyMCE { 
      mention.setIframe(ed.iframeElement);

    });

  }



  // update(ev, el){

  //   this.zone.run(() => {

  //     this.mention.keyHandler(ev, el);

  //   });

  // }



}

index.html

+1 −1
Original line number Diff line number Diff line
@@ -40,7 +40,7 @@ 
          }

        }

      });

      System.import('build/main')

      System.import('build/app/main')

            .then(null, console.error.bind(console));

    </script>

    <style>