importManager added fixed #300, #304, #305, #312

nhn · Jan 2, 2020 · 084be67 · 084be67
1 parent 437ec4b
commit 084be67
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 62 deletions.
diff --git a/apps/core/demo/demo.html b/apps/core/demo/demo.html
@@ -56,15 +56,6 @@
                 $form[0].submit();
                 //callback으로 url전달
                 //callback('이미지URL');
-            },
-            'addImageBlobHook': function(blob, callback) {
-                var reader = new FileReader();
-
-                reader.onload = function(event){
-                    callback(event.target.result);
-                };
-
-                reader.readAsDataURL(blob);
             }
         }
     });

diff --git a/apps/core/src/js/editor.js b/apps/core/src/js/editor.js
@@ -12,6 +12,7 @@ var MarkdownEditor = require('./markdownEditor'),
     EventManager = require('./eventManager'),
     CommandManager = require('./commandManager'),
     extManager = require('./extManager'),
+    ImportManager = require('./importManager'),
     Convertor = require('./convertor');
 
 //markdown commands
@@ -77,6 +78,8 @@ function NeonEditor(options) {
 
     this.eventManager = new EventManager();
 
+    this.importManager = new ImportManager(this.eventManager);
+
     this.commandManager = new CommandManager(this);
     this.convertor = new Convertor(this.eventManager);
 
@@ -119,8 +122,6 @@ function NeonEditor(options) {
         self.eventManager.emit('load', self);
     });
 
-    this._initImportEvent();
-
     __nedInstance.push(this);
 }
 
@@ -149,50 +150,6 @@ NeonEditor.prototype._initDefaultCommands = function() {
     this.commandManager.addCommand(wwTask);
 };
 
-NeonEditor.prototype._initImportEvent = function() {
-    var self = this;
-
-    this.eventManager.listen('paste', function(ev) {
-        var items, blob, i, itemLen;
-
-        items = ev.data.clipboardData && ev.data.clipboardData.items;
-
-        if (items) {
-            itemLen = items.length;
-
-            for (i = 0; i < itemLen; i += 1) {
-                if (items[i].type.indexOf('image') !== -1) {
-                    blob = items[i].getAsFile();
-
-                    self.eventManager.emit('addImageBlobHook', blob, function(url) {
-                        self.eventManager.emit('command', 'AddImage', {imageUrl: url, altText: blob.name || 'image'});
-                    });
-                }
-            }
-        }
-    });
-
-    this.eventManager.listen('drop', function(ev) {
-        var items, blob, i, itemLen;
-
-        items = ev.data.dataTransfer && ev.data.dataTransfer.files;
-
-        if (items) {
-            itemLen = items.length;
-
-            for (i = 0; i < itemLen; i += 1) {
-                if (items[i].type.indexOf('image') !== -1) {
-                    blob = items[i];
-
-                    self.eventManager.emit('addImageBlobHook', blob, function(url) {
-                        self.eventManager.emit('command', 'AddImage', {imageUrl: url, altText: blob.name || 'image'});
-                    });
-                }
-            }
-        }
-    });
-};
-
 /**
  * 프리뷰가 보여지는 방식을 변경한다
  * @param {string} style 스타일 이름 tab, vertical

diff --git a/apps/core/src/js/importManager.js b/apps/core/src/js/importManager.js
@@ -0,0 +1,78 @@
+/**
+ * @fileoverview Implement Module for managing import external data such as image
+ * @author Sungho Kim(sungho-kim@nhnent.com) FE Development Team/NHN Ent.
+ */
+
+'use strict';
+
+var util = ne.util;
+
+/**
+ * ImportManager
+ * @exports ImportManager
+ * @constructor
+ * @class
+ * @param {EventManager} eventManager eventManager
+ */
+function ImportManager(eventManager) {
+    this.eventManager = eventManager;
+
+    this._initDropEvent();
+    this._initPasteEvent();
+    this._initDefaultImporter();
+}
+
+ImportManager.prototype._initDropEvent = function() {
+    var self = this;
+
+    this.eventManager.listen('drop', function(ev) {
+        var items = ev.data.dataTransfer && ev.data.dataTransfer.files;
+        self._forEachItems(items);
+    });
+};
+
+ImportManager.prototype._initPasteEvent = function() {
+    var self = this;
+
+    this.eventManager.listen('paste', function(ev) {
+        var items = ev.data.clipboardData && ev.data.clipboardData.items;
+        self._forEachItems(items);
+    });
+};
+
+ImportManager.prototype._initDefaultImporter = function() {
+    this.eventManager.listen('addImageBlobHook', function(blob, callback) {
+        var reader = new FileReader();
+
+        reader.onload = function(event) {
+            callback(event.target.result);
+        };
+
+        reader.readAsDataURL(blob);
+    });
+};
+
+ImportManager.prototype._emitAddImageBlobHook = function(item) {
+    var self = this,
+        blob = item.name ? item : item.getAsFile(); //Blob or File
+
+    console.log('dd');
+
+    this.eventManager.emit('addImageBlobHook', blob, function(url) {
+        self.eventManager.emit('command', 'AddImage', {imageUrl: url, altText: blob.name || 'image'});
+    });
+};
+
+ImportManager.prototype._forEachItems = function(items) {
+    var self = this;
+
+    if (items) {
+        util.forEachArray(items, function(item) {
+            if (item.type.indexOf('image') !== -1) {
+                self._emitAddImageBlobHook(item);
+            }
+        });
+    }
+};
+
+module.exports = ImportManager;
diff --git a/apps/core/src/js/markdownEditor.js b/apps/core/src/js/markdownEditor.js
@@ -77,6 +77,8 @@ MarkdownEditor.prototype._initEvent = function() {
     });
 
     this.cm.on('drop', function(cm, eventData) {
+        eventData.preventDefault();
+
         self.eventManager.emit('drop', {
             source: 'markdown',
             data: eventData

diff --git a/apps/core/src/js/wysiwygEditor.js b/apps/core/src/js/wysiwygEditor.js
@@ -199,13 +199,6 @@ WysiwygEditor.prototype._initSquireEvent = function() {
             source: 'wysiwyg'
         });
     });
-
-    this.getEditor().addEventListener('paste', function(clipboardEvent) {
-        self.eventManager.emit('paste', {
-            source: 'wysiwyg',
-            clipboardEvent: clipboardEvent
-        });
-    });
 };
 
 WysiwygEditor.prototype._keyEventHandler = function(event) {