Test

README.md

@@ -1,15 +1,18 @@
 # This is a HTML code editor.
 This is a customize MediumEditor with the additional features than other Edit.
 User can generate all html contents by using special pattern.
-
-- How to create img elements 
+Live URL: https://medium-editor-3379b.firebaseapp.com
+- How to create img and video elements 
 
-    [![title](image_path)]
+    ```[![image caption](image_path)]```
+
+    ```[@[video caption](video url)]```
 
     Example: 
+      ```[![Houses](http://sfeizigroup.com/wp-content/uploads/2017/05/slide-5.jpg)]```
       [![Houses](http://sfeizigroup.com/wp-content/uploads/2017/05/slide-5.jpg)]
 
-  ![url parse](./asserts/img/a.png)
+      ```[@[video caption](video url)]```
 
 ## Main features
 
@@ -28,4 +31,4 @@ User can generate all html contents by using special pattern.
 $ cd vikids_editor
 
 $ npm install
-
+

app.js

@@ -0,0 +1,13 @@
+let express = require('express')
+let path = require('path')
+
+let app = express()
+const port = 3000;
+app.use(express.static(path.join(__dirname, '/')));
+
+
+app.get('/', (req, res) => {
+  res.sendFile('index.html', {root: __dirname })
+})
+
+app.listen(port, () => { console.log('You app running on', port) })

assests/js/custom.js

@@ -8,6 +8,6 @@ var editor = new MediumEditor('.editable', {
 
 $(function () {
   $('.editable').mediumInsert({
-      editor: editor
+      editor: editor,
   });
 });

assests/js/lib/embed/core.js

@@ -42,7 +42,8 @@
         this.$el = $(el);
         this.templates = window.MediumInsert.Templates;
         this.extend = new Extend();
-        this.targetEl = ''
+        this.targetEl = '',
+        this.ctTime = null;
 
         if (options) {
             // Fix #142
@@ -113,6 +114,7 @@
         this.$el
             .on('dragover drop', function (e) {
                 e.preventDefault();
+                $.proxy(that, 'dragDropAction')(e)
             })
             .on('keyup click', $.proxy(this, 'toggleButtons'))
             .on('selectstart mousedown', '.medium-insert, .medium-insert-buttons', $.proxy(this, 'disableSelection'))
@@ -297,6 +299,10 @@
             that.$el[addonName](options);
             that.options.addons[addon] = that.$el.data('plugin_' + addonName).options;
         });
+
+        this.$el.append(this.templates['src/js/templates/images-fileupload.hbs']());
+        this.$el.find('input:file').hide();
+        this.$el.data('plugin_' + pluginName + ucfirst('images'))['add'](true);
     };
 
     /**
@@ -521,7 +527,6 @@
      */
 
     Core.prototype.toggleAddons = function () {
-        console.log('insert new medias (core->toglleAddons)')
         if (this.$el.find('.medium-insert-buttons').attr('data-active-addon') === 'images') {
             this.$el.find('.medium-insert-buttons').find('button[data-addon="images"]').click();
             return;
@@ -552,13 +557,35 @@
      */
 
     Core.prototype.addonAction = function (e) {
-        console.log('select any media type here', e.currentTarget)
         var $a = $(e.currentTarget),
             addon = $a.data('addon'),
             action = $a.data('action');
         this.$el.data('plugin_' + pluginName + ucfirst(addon))[action]();
     };
 
+
+    /**
+     * Call drag-drop's action
+     *
+     * @param {Event} e
+     * @return {void}
+     */
+
+    Core.prototype.dragDropAction = function (e) {
+
+        const targetElement = e.target;
+        if(e.type === 'drop') {
+            this.$el.find('.medium-insert-active').removeClass('medium-insert-active');
+            this.$el.find('.medium-insert-embeds-active').removeClass('medium-insert-embeds-active');
+            e.target.click();
+
+            const newMediaDiv = document.createElement("div")
+            newMediaDiv.className = 'medium-insert-active'
+            targetElement.after(newMediaDiv);            
+        }
+    };
+
+
     /**
      * Move caret at the beginning of the empty paragraph
      *
@@ -702,11 +729,10 @@
      */
 
     Core.prototype.embedMedia = function(data, that, result) {
-        console.log('Validate Response successflully ===>', result, data)
-
         if(result === 'success' && data.type === 'img') {
             that.createEmptyMediaDiv(data, "medium-insert-active")
-            that.$el.data('plugin_' + pluginName + ucfirst('images'))['uploadAdd'](data, {});
+
+            that.$el.data('plugin_' + pluginName + ucfirst('images'))['showImageByURL'](data);
         }
 
         if(result === 'success' && data.type === 'mov') {
@@ -811,9 +837,6 @@
             const altText = matches[2]
             const filePath = matches[3];
 
-            console.log('template validate')
-            console.log(`PatternType => ${mediaType}, AltText => ${altText}, FilePath => ${filePath}`)
-
             // check if the current file is valid media file
             const fileURLValidate= this.checkMediaUrlParse(mediaType, filePath)
             if (fileURLValidate) {
@@ -841,20 +864,80 @@
         })();
     };
 
+    Core.prototype.getCursorPosition = function (element) {
+        element = element || document.querySelector('.editable')
+        var caretOffset = 0;
+        var preCaretRange = '';
+        var doc = element.ownerDocument || element.document;
+        var win = doc.defaultView || doc.parentWindow;
+        var sel;
+        if (typeof win.getSelection != "undefined") {
+            sel = win.getSelection();
+            if (sel.rangeCount > 0) {
+                var range = win.getSelection().getRangeAt(0);
+                preCaretRange = range.cloneRange();
+                preCaretRange.selectNodeContents(element);
+                preCaretRange.setEnd(range.endContainer, range.endOffset);
+                caretOffset = preCaretRange.toString().length;
+            }
+        } else if ( (sel = doc.selection) && sel.type != "Control") {
+            var textRange = sel.createRange();
+            var preCaretTextRange = doc.body.createTextRange();
+            preCaretTextRange.moveToElementText(element);
+            preCaretTextRange.setEndPoint("EndToEnd", textRange);
+            caretOffset = preCaretTextRange.text.length;
+        }
+
+        return {point: caretOffset, text: preCaretRange.toString()}
+    }
+
+    Core.prototype.getAllTextnodes = function (el) {
+        el = el || document.querySelector('.editable')
+        var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
+        while(n=walk.nextNode()) a.push(n);
+        return a;
+    }
+
+    Core.prototype.getCursorData = function (el, position){
+        el = el || document.querySelector('.editable')
+        var node, nodes = this.getAllTextnodes(el);
+        for(var n = 0; n < nodes.length; n++) {
+            if (position > nodes[n].nodeValue.length && nodes[n+1]) {
+                // remove amount from the position, go to next node
+                position -= nodes[n].nodeValue.length;
+            } else {
+                node = nodes[n];
+                break;
+            }
+        }
+        // you'll need the node and the position (offset) to set the caret
+        return { node: node, position: position };
+    }
+
+    Core.prototype.setCursorPosition = function (d) {
+        var sel = window.getSelection(),
+        range = document.createRange();
+        range.setStart(d.node, d.position);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+
+    Core.prototype.checkInputMediaToolbar = function () {
+        const cPoint = this.getCursorPosition();
+        const cPointDetail = this.getCursorData(null, cPoint.point);
+
+        // cPointDetail.node.parentElement.replaceChild('<h2>New heading</h2>');
+
+    }
+
     Core.prototype.checkCustomPattern = function () {
         var an = window.getSelection().anchorNode;
         this.targetEl = $(an.parentElement);
 
-
-        // var $place1 = this.$el.find('.medium-insert-images');
-        // var $place2 = this.$el.find('.medium-insert-embeds-active');
-        // console.log(this.$el)
-        // console.log($place1)
-        // console.log($place2)
-
+        this.checkInputMediaToolbar();
         // Parsed element data || false
         const templateValidate = this.checkTemplateValidate();  
-        console.log('template validate', templateValidate)
         if (templateValidate) {
             const mediaTyepe = templateValidate.type;
             const mediaPath = templateValidate.url;
@@ -869,23 +952,17 @@
 
         }
     }
-
-    Core.prototype.simulateKeydown = function (el, keycode, isCtrl, isAlt, isShift) {
-        var e = new KeyboardEvent( "keydown", { bubbles:true, cancelable:true, char:String.fromCharCode(keycode), key:String.fromCharCode(keycode), shiftKey:isShift, ctrlKey:isCtrl, altKey:isAlt } );
-        Object.defineProperty(e, 'keyCode', {get : function() { return this.keyCodeVal; } });     
-        e.keyCodeVal = keycode;
-        el.dispatchEvent(e);
-    }
-
+
     Core.prototype.capturePattern = function () {
-        if(ctTime) {
-            window.clearTimeout(ctTime)
-            ctTime = null
-        } else {
-            ctTime = window.setTimeout(() => {
+        if(this.ctTime) {
+            window.clearTimeout(this.ctTime)
+            this.ctTime = null
+        } 
+
+        this.ctTime = window.setTimeout(() => {
             this.checkCustomPattern();
-            }, 100);
-        }
+        }, 500);
+
     }
 
     /** Plugin initialization */

assests/js/lib/embed/embeds.js

@@ -26,7 +26,7 @@
                 label: '<span class="fa fa-align-right"></span>'
                 // added: function ($el) {},
                 // removed: function ($el) {}
-            }
+            },
         },
         actions: {
             remove: {
@@ -42,6 +42,11 @@
         parseOnPaste: false
     };
 
+
+    function ucfirst(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
     /**
      * Embeds object
      *
@@ -56,7 +61,6 @@
 
     function Embeds(el, options) {
 
-        console.log('emped ===>  @@@@@@@@@@@@@@')
         this.el = el;
         this.$el = $(el);
         this.templates = window.MediumInsert.Templates;
@@ -177,7 +181,6 @@
      */
 
     Embeds.prototype.add = function () {
-        console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@')
         var $place = this.$el.find('.medium-insert-active');
 
         // Fix #132
@@ -267,9 +270,6 @@
      */
 
     Embeds.prototype.processLink = function (e) {
-        // console.log(this.core.capturePattern)
-        console.log('------------   Embded ProcessLink    ---------------')
-
         var $place = this.$el.find('.medium-insert-embeds-active'),
             url;
 
@@ -331,7 +331,6 @@
     Embeds.prototype.oembed = function (url, pasted, altText) {
         console.log('Embded->Oembed 335 ===>', url, pasted)
         var that = this;
-
         $.support.cors = true;
 
         $.ajax({
@@ -344,14 +343,15 @@
             },
             success: function (data) {
                 var html = data && data.html;
-                console.log('response data ===>', html)
 
                 if (that.options.storeMeta) {
                     html += '<div class="medium-insert-embeds-meta"><script type="text/json">' + JSON.stringify(data) + '</script></div>';
                 }
 
-                if (data && !html && data.type === 'photo' && data.url) {
+                if (data && data.type.match(/(photo|rich)/) && data.url) {
+                    that.$el.data('plugin_' + pluginName + ucfirst('images'))['showImageByURL']({type: 'image', url: data.url}, {});
                     html = '<img src="' + data.url + '" alt="">';
+                    return;
                 }
 
                 if (!html) {
@@ -432,10 +432,12 @@
      */
 
     Embeds.prototype.embed = function (html, pastedUrl, altText) {
-            var $place = this.$el.find('.medium-insert-embeds-active'),
+            var $place = this.$el.find('.medium-insert-embeds-active').length? this.$el.find('.medium-insert-embeds-active') : this.$el.find('.medium-insert-active'),
             $div, that;
             that = this;
 
+        $place.attr('class', 'medium-insert-embeds-active');
+
         if (!html) {
             alert('Incorrect URL format specified');
             return false;
@@ -461,7 +463,6 @@
                 $place.after(this.templates['src/js/templates/embeds-wrapper.hbs']({
                     html: html
                 }));
-
                 $place.text($place.text().replace(pastedUrl, ''));
             } else {
                 if(altText) {
@@ -728,7 +729,7 @@
 
         $lis.find('button').each(function () {
             var className = 'medium-insert-embeds-' + $(this).data('action');
-
+            console.log(className)
             if ($(this).hasClass('medium-editor-button-active')) {
                 $embed.addClass(className);