Merge remote-tracking branch 'refs/remotes/origin/master' into destroy-module

codex-editor.css

@@ -238,7 +238,7 @@
     display: flex;
 }
 
-.cdx-plugin-settings__item {
+.cdx-plugin-settings--horisontal .cdx-plugin-settings__item {
     flex: 1 0 auto;
     text-align: center;
 }
@@ -275,7 +275,8 @@
     border-bottom: 1px solid #e7e9f1;
 }
 
-.ce-settings__item i {
+.ce-settings__item i,
+.cdx-plugin-settings__item i {
     min-width: 16px;
     margin-right: 1.3em;
 }

example.html

@@ -121,14 +121,15 @@
                 iconClassname: 'ce-icon-list-bullet',
                 make: list.make,
                 appendCallback: null,
-                settings: list.makeSettings,
+                makeSettings: list.makeSettings,
                 render: list.render,
                 validate: list.validate,
                 save: list.save,
                 destroy: list.destroy,
                 displayInToolbox: true,
                 showInlineToolbar: true,
-                enableLineBreaks: true
+                enableLineBreaks: true,
+                allowedToPaste: true,
             },
             quote_styled: {
                 type: 'quote_styled',
@@ -202,20 +203,6 @@
                         text : 'Привет от CodeX'
                     }
                 },
-                {
-                    type : 'tweet',
-                    data : {
-                        "media" : true,
-                        "conversation" : false,
-                        "user" : null,
-                        "id" : 12312312312,
-                        "text" : null,
-                        "created_at" : null,
-                        "status_url" : 'ertertert',
-                        "caption" : null
-                    },
-                    cover : false
-                },
                 {
                     type : 'paragraph',
                     data : {

modules/callbacks.js

@@ -810,8 +810,8 @@ module.exports = (function (callbacks) {
         /** Prevent default behaviour */
         event.preventDefault();
 
-        /** Allow paste when event target is editable */
-        if (event.target.contentEditable != 'true') {
+        /** Allow paste when event target placed in Editable element */
+        if (!editor.content.getEditableParent(event.target)) {
 
             return;
 

modules/content.js

@@ -868,6 +868,23 @@ module.exports = (function (content) {
 
     };
 
+    /**
+    * Finds closest Contenteditable parent from Element
+    * @param {Element} node     element looking from
+    * @return {Element} node    contenteditable
+    */
+    content.getEditableParent = function (node) {
+
+        while (node && node.contentEditable != 'true') {
+
+            node = node.parentNode;
+
+        }
+
+        return node;
+
+    };
+
     return content;
 
 })({});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "index.js",
   "scripts": {

plugins/list/list.css

@@ -1,32 +1,11 @@
-.ce-list {
+.cdx-plugin-list {
     margin: 0;
     padding: .5em 0;
+    line-height: 1.7em;
 }
 
-.ce_plugin_list--settings{
-    white-space: nowrap;
-}
-
-.ce_plugin_list--select_button{
-    display: block;
-    color: #306ac7;
-    cursor: pointer;
-    line-height: 1.3em;
-}
-    .ce_plugin_list--select_button:not(:last-of-type){
-        margin-bottom: 0.9em;
-    }
-    .ce_plugin_list--select_button:hover{
-        color: #a1b4ec;
-    }
-/**
-* List style settigns icons
-*/
-.ce_plugin_list--select_button i{
-    margin-right: 1.3em;
-}
-
-.ce-list li{
+.cdx-plugin-list__li{
+    display: list-item;
     background: #fff;
     border: 1px solid #ebeef3;
     border-radius: 3px;
@@ -34,4 +13,24 @@
     padding: .5em;
     list-style-position: outside;
     margin-left: 1.1em;
-}
+}
+
+.cdx-plugin-list p {
+    margin: 0.6em 0;
+}
+
+.cdx-plugin-list p:first-of-type {
+    margin-top: 0;
+}
+
+.cdx-plugin-list p:last-of-type {
+    margin-bottom: 0;
+}
+
+/**
+* List style settigns icons
+*/
+.ce_plugin_list--select_button i{
+    margin-right: 1.3em;
+}
+

plugins/list/list.js

@@ -4,21 +4,29 @@
  */
 var list = (function(list_plugin) {
 
-    var baseClass = "tool-list";
-
-    var elementClasses = {
-        li  : "tool-list-li"
+    /**
+    * CSS class names
+    */
+    var elementClasses_ = {
+        pluginWrapper: 'cdx-plugin-list',
+        li:            'cdx-plugin-list__li',
+        settings:      'cdx-plugin-list__settings',
+        settingsItem:  'cdx-plugin-settings__item'
     };
 
+    var LIST_ITEM_TAG = 'LI';
+
     var ui = {
 
         make: function (blockType) {
 
-            var wrapper = this.block(blockType || 'UL', baseClass);
+            var wrapper = this.block(blockType || 'UL', elementClasses_.pluginWrapper);
 
-            wrapper.dataset.type = 'UL';
+            wrapper.dataset.type = blockType;
             wrapper.contentEditable = true;
 
+            wrapper.addEventListener('keydown', methods_.keyDown);
+
             return wrapper;
 
         },
@@ -36,20 +44,20 @@ var list = (function(list_plugin) {
         button: function (buttonType) {
 
             var types = {
-                    unordered: '<i class="ce-icon-list-bullet"></i>Обычный список',
-                    ordered: '<i class="ce-icon-list-numbered"></i>Нумерованный список'
+                    unordered: '<i class="ce-icon-list-bullet"></i>Обычный',
+                    ordered: '<i class="ce-icon-list-numbered"></i>Нумерованный'
                 },
-                button = document.createElement('SPAN');
+                button = document.createElement('DIV');
 
             button.innerHTML = types[buttonType];
 
-            button.className = 'ce_plugin_list--select_button';
+            button.classList.add(elementClasses_.settingsItem);
 
             return button;
         }
     };
 
-    var methods = {
+    var methods_ = {
 
         /**
          * Changes block type => OL or UL
@@ -64,53 +72,86 @@ var list = (function(list_plugin) {
 
             newEditable.dataset.type = blockType;
             newEditable.innerHTML = oldEditable.innerHTML;
-            newEditable.classList.add('ce-list');
+            newEditable.classList.add(elementClasses_.pluginWrapper);
 
             codex.editor.content.switchBlock(currentBlock, newEditable, 'list');
+        },
+        keyDown: function (e) {
+
+            var controlKeyPressed = e.ctrlKey || e.metaKey,
+                keyCodeForA = 65;
+
+            /**
+            * If CTRL+A (CMD+A) was pressed, we should select only one list item,
+            * not all <OL> or <UI>
+            */
+            if (controlKeyPressed && e.keyCode == keyCodeForA) {
+
+                e.preventDefault();
+
+                /**
+                * Select <LI> content
+                */
+                methods_.selectListItem();
+
+            }
+
+        },
+
+        /**
+        * Select all content of <LI> with caret
+        */
+        selectListItem : function () {
+
+            var selection = window.getSelection(),
+                currentSelectedNode = selection.anchorNode.parentNode,
+                range = new Range();
+
+            /**
+            * Search for <LI> element
+            */
+            while ( currentSelectedNode && currentSelectedNode.tagName != LIST_ITEM_TAG ) {
+
+                currentSelectedNode = currentSelectedNode.parentNode;
+
+            }
+
+            range.selectNodeContents(currentSelectedNode);
+
+            selection.removeAllRanges();
+            selection.addRange(range);
+
         }
     };
 
-    /**
-     * Make initial header block
-     * @param {object} JSON with block data
-     * @return {Element} element to append
-     */
-    list_plugin.make = function () {
-
-        var tag = ui.make(),
-            li  = ui.block("li", "tool-link-li");
-
-        var br = document.createElement("br");
-
-        li.appendChild(br);
-        tag.appendChild(li);
-
-        tag.classList.add('ce-list');
-
-        return tag;
-
-    };
-
     /**
      * Method to render HTML block from JSON
      */
     list_plugin.render = function (data) {
 
-        var type = data.type == 'ordered' ? 'OL' : 'UL',
-            tag  = ui.make(type);
+        var type = data && data.type == 'ordered' ? 'OL' : 'UL',
+            tag  = ui.make(type),
+            newLi;
 
-        tag.classList.add('ce-list');
+        if (data && data.items) {
 
-        data.items.forEach(function (element, index, array) {
+            data.items.forEach(function (element, index, array) {
 
-            var newLi = ui.block("li", listTool.elementClasses.li);
+                newLi = ui.block('li', elementClasses_.li);
 
-            newLi.innerHTML = element;
+                newLi.innerHTML = element;
+
+                tag.appendChild(newLi);
+
+            });
+
+        } else {
+
+            newLi = ui.block('li', elementClasses_.li);
 
-            tag.dataset.type = data.type;
             tag.appendChild(newLi);
 
-        });
+        }
 
         return tag;
 
@@ -119,7 +160,7 @@ var list = (function(list_plugin) {
     list_plugin.validate = function(data) {
 
         var items = data.items.every(function(item){
-            return item.trim() != '';
+            return item.trim() !== '';
         });
 
         if (!items)
@@ -150,24 +191,23 @@ var list = (function(list_plugin) {
 
     };
 
-    list_plugin.makeSettings = function(data) {
+    list_plugin.makeSettings = function () {
 
-        var holder  = document.createElement('DIV'),
-            selectTypeButton;
+        var holder  = document.createElement('DIV');
 
         /** Add holder classname */
-        holder.className = 'ce_plugin_list--settings';
+        holder.className = elementClasses_.settings;
 
         var orderedButton = ui.button("ordered"),
             unorderedButton = ui.button("unordered");
 
         orderedButton.addEventListener('click', function (event) {
-            methods.changeBlockStyle(event, 'OL');
+            methods_.changeBlockStyle(event, 'OL');
             codex.editor.toolbar.settings.close();
         });
 
         unorderedButton.addEventListener('click', function (event) {
-            methods.changeBlockStyle(event, 'UL');
+            methods_.changeBlockStyle(event, 'UL');
             codex.editor.toolbar.settings.close();
         });