Additional checking to register component only once (#5)

* Add check if component already registered * Ugly hack to fix select all. TODO: recheck selection node * Handle paste event * Avoid using prototype extentions in wysiwyg * Avoid prototype extentions for editor * Avoid using prototype extentions * Ember as global * Update action-link-modal.js * Rename imports for Ember
indexiatech · Aug 11, 2016 · fc4e9ec · fc4e9ec
1 parent bfc762d
commit fc4e9ec
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 77 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -2,6 +2,7 @@
   "predef": [
     "document",
     "window",
+    "Ember",
     "-Promise"
   ],
   "browser": true,

diff --git a/addon/action-format.js b/addon/action-format.js
@@ -1,8 +1,8 @@
-import Em from 'ember';
+import Ember from 'ember';
 import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
-var computed = Em.computed;
+var computed = Ember.computed;
 
-export default Em.Component.extend(WithConfigMixin, {
+export default Ember.Component.extend(WithConfigMixin, {
   tagName: 'a',
   classNameBindings: ['styleClasses', 'activeClasses'],
   styleClasses: (function() {
@@ -46,4 +46,4 @@ export default Em.Component.extend(WithConfigMixin, {
       return this.get('wysiwyg').trigger('update_actions');
     }
   }
-});
+});
diff --git a/addon/action-group.js b/addon/action-group.js
@@ -1,14 +1,14 @@
-import Em from 'ember';
+import Ember from 'ember';
 import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
-var computed = Em.computed;
+var computed = Ember.computed;
 
 /**
  * ActionGroup component
  *
  * @class ActionGroup
  */
 
-export default Em.Component.extend(WithConfigMixin, {
+export default Ember.Component.extend(WithConfigMixin, {
   classNameBindings: ['styleClasses'],
   styleClasses: (function() {
     var _ref;
@@ -22,4 +22,4 @@ export default Em.Component.extend(WithConfigMixin, {
   unregister: (function() {
     return this.get('toolbar').removeGroup(this);
   }).on('willDestroyElement')
-});
+});
diff --git a/addon/action-link-modal.js b/addon/action-link-modal.js
@@ -1,13 +1,18 @@
-import Em from 'ember';
+import Ember from 'ember';
+
+const {
+  on,
+  Component
+} = Ember;
 
 /**
  * ActionGroup component
  *
  * @class ActionGroup
  */
 
-export default Em.Component.extend({
-  registerInParent: (function() {
+export default Component.extend({
+  registerInParent: on('didInsertElement', function() {
     this.set('parentView.model', this);
-  }).on('didInsertElement')
-});
+  })
+});
diff --git a/addon/action-link.js b/addon/action-link.js
@@ -1,26 +1,29 @@
-import Em from 'ember';
+import Ember from 'ember';
 import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
 import Modal from 'ember-idx-modal/modal';
-var computed = Em.computed;
+var computed = Ember.computed;
+var COMPONENT_NAME = 'view:em-wysiwyg-action-link-modal';
 
-export default Em.Component.extend(WithConfigMixin, {
+export default Ember.Component.extend(WithConfigMixin, {
   tagName: 'a',
   classNameBindings: ['styleClasses', 'activeClasses'],
   linkHref: '',
   initModal: (function() {
     var container = this.get('container');
-    container.register('view:em-wysiwyg-action-link-modal', Modal.extend({
-      layoutName: 'components/em-wysiwyg-action-link-modal',
-      configName: 'bs',
-      _parentView: this,
-      linkHref: computed.alias('parentView.linkHref'),
-      actions: {
-        addLink: function() {
-          this.get('parentView').send('addLink');
+    if(!container.lookupFactory(COMPONENT_NAME)) {
+      container._registry.register(COMPONENT_NAME, Modal.extend({
+        layoutName: 'components/em-wysiwyg-action-link-modal',
+        configName: 'bs',
+        _parentView: this,
+        linkHref: computed.alias('parentView.linkHref'),
+        actions: {
+          addLink: function() {
+            this.get('parentView').send('addLink');
+          }
         }
-      }
-    }));
-    this.set('modal', container.lookup('view:em-wysiwyg-action-link-modal'));
+      }));
+    }
+    this.set('modal', container.lookup(COMPONENT_NAME));
     return this.get('modal').append();
   }).on('init'),
   styleClasses: (function() {
@@ -61,7 +64,7 @@ export default Em.Component.extend(WithConfigMixin, {
           container = container.parentNode;
         }
         if (container.nodeName === "A") {
-          _this.set('linkHref', Em.$(container).attr('href'));
+          _this.set('linkHref', Ember.$(container).attr('href'));
           return _this.set('active', true);
         } else {
           _this.set('linkHref', '');
@@ -70,4 +73,4 @@ export default Em.Component.extend(WithConfigMixin, {
       };
     })(this));
   }).on('init')
-});
+});
diff --git a/addon/action-text-html-toggler.js b/addon/action-text-html-toggler.js
@@ -1,8 +1,8 @@
-import Em from 'ember';
+import Ember from 'ember';
 import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
-var computed = Em.computed;
+var computed = Ember.computed;
 
-export default Em.Component.extend(WithConfigMixin, {
+export default Ember.Component.extend(WithConfigMixin, {
   tagName: 'a',
   layoutName: 'components/em-wysiwyg-action',
   classNameBindings: ['styleClasses', 'activeClasses'],
@@ -33,4 +33,4 @@ export default Em.Component.extend(WithConfigMixin, {
       this.set('wysiwyg.editor-textarea.display', 'block');
     }
   }
-});
+});
diff --git a/addon/action.js b/addon/action.js
@@ -1,8 +1,8 @@
-import Em from 'ember';
+import Ember from 'ember';
 import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
-var computed = Em.computed;
+var computed = Ember.computed;
 
-export default Em.Component.extend(WithConfigMixin, {
+export default Ember.Component.extend(WithConfigMixin, {
   tagName: 'a',
   classNameBindings: ['styleClasses', 'activeClasses'],
   styleClasses: (function() {
@@ -35,4 +35,4 @@ export default Em.Component.extend(WithConfigMixin, {
       };
     })(this));
   }).on('init')
-});
+});
diff --git a/addon/editor-textarea.js b/addon/editor-textarea.js
@@ -1,8 +1,8 @@
-import Em from 'ember';
-var computed = Em.computed;
+import Ember from 'ember';
+var computed = Ember.computed;
 import StyleBindingsMixin from 'ember-idx-utils/mixin/style-bindings';
 
-export default Em.TextArea.extend(StyleBindingsMixin, {
+export default Ember.TextArea.extend(StyleBindingsMixin, {
     styleBindings: ['display', 'width', 'border'],
     width: '100%',
     border: 'none;',

diff --git a/addon/editor.js b/addon/editor.js
@@ -1,14 +1,14 @@
-import Em from 'ember';
+import Ember from 'ember';
 import StyleBindingsMixin from 'ember-idx-utils/mixin/style-bindings';
 
-export default Em.Component.extend(StyleBindingsMixin, {
+export default Ember.Component.extend(StyleBindingsMixin, {
   styleBindings: ['marginTop:margin-top', 'background', 'display'],
   attributeBindings: ['contenteditable'],
   contenteditable: 'true',
   marginTop: 10,
   background: 'white',
   display: 'block',
-  wysiwyg: Em.computed.alias('parentView'),
+  wysiwyg: Ember.computed.alias('parentView'),
   updateToolbar: function(e) {
     return this.get('wysiwyg').trigger('update_actions');
   },
@@ -37,6 +37,12 @@ export default Em.Component.extend(StyleBindingsMixin, {
   restoreSelection: function() {
     var e, selection;
     selection = window.getSelection();
+    var selectionStr = selection.toString();
+    var contentStr = this.$().text();
+    if(selectionStr === contentStr) {
+      return selection;
+    }
+
     if (this.get('selectionRange')) {
       try {
         selection.removeAllRanges();
@@ -55,10 +61,10 @@ export default Em.Component.extend(StyleBindingsMixin, {
     }
     return this.saveSelection();
   },
-  register: (function() {
+  register: Ember.on('didInsertElement', function() {
     return this.get('wysiwyg').setEditor(this);
-  }).on('didInsertElement'),
-  unregister: (function() {
+  }),
+  unregister: Ember.on('willDestroyElement', function() {
     return this.get('wysiwyg').setEditor(void 0);
-  }).on('willDestroyElement')
-});
+  })
+});
diff --git a/addon/toolbar.js b/addon/toolbar.js
@@ -1,32 +1,35 @@
-import Em from 'ember';
+import Ember from 'ember';
 import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
 
-var computed = Em.computed;
+const {
+  on,
+  computed
+} = Ember;
 
 /**
  * Toolbar component
  *
  * @class Toolbar
  */
-export default Em.Component.extend(WithConfigMixin, {
+export default Ember.Component.extend(WithConfigMixin, {
   classNameBindings: ['styleClasses'],
-  styleClasses: (function() {
+  styleClasses: computed(function() {
     var _ref;
     return (_ref = this.get('config.wysiwyg.toolbarClasses')) != null ? _ref.join(" ") : void 0;
-  }).property(),
+  }),
   groups: void 0,
-  initGroups: (function() {
-    return this.set('groups', Em.ArrayProxy.create({
+  initGroups: on('init', function() {
+    return this.set('groups', Ember.ArrayProxy.create({
       content: []
     }));
-  }).on('init'),
+  }),
   wysiwyg: computed.alias('parentView'),
-  register: (function() {
+  register: on('didInsertElement', function() {
     return this.get('wysiwyg').addToolbar(this);
-  }).on('didInsertElement'),
-  unregister: (function() {
+  }),
+  unregister: on('willDestroyElement', function() {
     return this.get('wysiwyg').removeToolbar(this);
-  }).on('willDestroyElement'),
+  }),
   addGroup: function(g) {
     return this.get('groups').addObject(g);
   },

diff --git a/addon/wysiwyg.js b/addon/wysiwyg.js
@@ -1,4 +1,4 @@
-import Em from 'ember';
+import Ember from 'ember';
 import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
 
 /**
@@ -7,12 +7,12 @@ import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
  * @class Wysiwyg
  */
 
-export default Em.Component.extend(WithConfigMixin, {
+export default Ember.Component.extend(WithConfigMixin, {
   classNameBindings: ['styleClasses'],
-  styleClasses: (function() {
+  styleClasses: Ember.computed(function() {
     var _ref;
     return (_ref = this.get('config.wysiwyg.classes')) != null ? _ref.join(" ") : void 0;
-  }).property(),
+  }),
 
   /**
    * A list of {{#crossLink "Toolbar"}}toolbar{{/crossLink}} instances.
@@ -23,19 +23,19 @@ export default Em.Component.extend(WithConfigMixin, {
    * The editor view
    */
   editor: void 0,
-  initToolbars: (function() {
-    return this.set('toolbars', Em.ArrayProxy.create({
+  initToolbars: Ember.on('init', function() {
+    return this.set('toolbars', Ember.ArrayProxy.create({
       content: []
     }));
-  }).on('init'),
+  }),
 
-  initEditorContent: (function() {
+  initEditorContent: Ember.observer('editor', function() {
     if (this.get('editor')) {
-      return Em.run.once(this, (function() {
+      return Ember.run.once(this, (function() {
         return this.get('editor').$().html(this.get('as_html'));
       }));
     }
-  }).observes('editor'),
+  }),
 
   /**
    * Add the given `Toolbar` instance.
@@ -55,9 +55,13 @@ export default Em.Component.extend(WithConfigMixin, {
    * Set the editor instance
    */
   setEditor: function(editor) {
+    if (editor && editor.element) {
+      editor.element.addEventListener('paste', () => Ember.run.scheduleOnce('afterRender', this, this.asHtmlUpdater));
+    }
     return this.set('editor', editor);
   },
-  asHtmlUpdater: (function() {
+
+  asHtmlUpdater: Ember.on('update_actions', function() {
     return this.set('as_html', this.get('editor').$().html().replace(/(<br>|\s|<div><br><\/div>|&nbsp;)*$/, ''));
-  }).on('update_actions')
+  })
 });
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "ember-cli": "0.1.4",
     "ember-cli-content-security-policy": "0.3.0",
     "ember-cli-dependency-checker": "0.0.6",
-    "ember-cli-esnext": "0.1.1",
     "ember-cli-ic-ajax": "0.1.1",
     "ember-cli-inject-live-reload": "^1.3.0",
     "ember-cli-qunit": "0.1.2",
@@ -43,7 +42,9 @@
     "configPath": "tests/dummy/config"
   },
   "dependencies": {
-    "ember-idx-utils": "^0.2.2",
-    "ember-idx-modal": "^0.1.3"
+    "broccoli-babel-transpiler": "^5.4.5",
+    "ember-cli-babel": "^5.1.5",
+    "ember-idx-modal": "^0.1.3",
+    "ember-idx-utils": "^0.2.2"
   }
 }
diff --git a/tests/dummy/app/initializers/hightlightjs.js b/tests/dummy/app/initializers/hightlightjs.js
@@ -1,12 +1,14 @@
 import Em from 'ember';
-import Config from 'ember-idx-utils/config';
+import UtilsConfig from 'ember-idx-utils/config';
 /*global hljs*/
 
+var Config;
+
 export default {
   name: 'hightlightjs',
   initialize: function() {
     //In real app we don't need this coz the initializer of modal will be merged into the app and will run automatically
-    Em.Config = Config = Config.create();
+    Em.Config = Config = UtilsConfig.create();
     var defaultConfig = Config.getConfig('bs');
 
     if (!defaultConfig) {