Tool code (#67)

* Add error background

* Add tool code
Fix switch block and insert block for new system with div wrappers

* Remove unneccessary appendChild

* Fix css in tool code

codex-editor.js

@@ -950,7 +950,7 @@ cEditor.content = {
         }
 
         /** Add redactor block classname to new block */
-        newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
+        // newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
 
         /** Store block type */
         newBlock.dataset.type = newBlockType;
@@ -977,13 +977,9 @@ cEditor.content = {
     */
     insertBlock : function(newBlockContent, blockType) {
 
-        var workingBlock = cEditor.content.currentNode,
-            newBlock = cEditor.draw.block('DIV');
+        var workingBlock = cEditor.content.currentNode;
 
-        newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
-        newBlock.dataset.type = blockType;
-
-        newBlock.appendChild(newBlockContent);
+        var newBlock = cEditor.content.composeNewBlock(newBlockContent, blockType);
 
         if (workingBlock) {
 
@@ -1089,16 +1085,20 @@ cEditor.content = {
     * @param {Element} newNode
     * @param {Element} blockType
     */
-    switchBlock : function(nodeToReplace, newNode, blockType){
+    switchBlock : function(blockToReplace, newBlock, blockType){
+
+        var oldBlockEditable = blockToReplace.querySelector('[contenteditable]');
 
         /** Saving content */
-        newNode.innerHTML = nodeToReplace.innerHTML;
+        newBlock.innerHTML = oldBlockEditable.innerHTML;
+
+        var newBlockComposed = cEditor.content.composeNewBlock(newBlock, blockType);
 
         /** Replacing */
-        cEditor.content.replaceBlock(nodeToReplace, newNode, blockType);
+        cEditor.content.replaceBlock(blockToReplace, newBlockComposed, blockType);
 
         /** Add event listeners */
-        cEditor.ui.addBlockHandlers(newNode);
+        cEditor.ui.addBlockHandlers(newBlock);
 
     },
 
@@ -1177,6 +1177,19 @@ cEditor.content = {
         }
 
         return block;
+    },
+
+    composeNewBlock : function (block, blockType) {
+
+        newBlock = cEditor.draw.block('DIV');
+
+        newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME);
+        newBlock.dataset.type = blockType;
+
+        newBlock.appendChild(block);
+
+        return newBlock;
+
     }
 
 };
@@ -1439,21 +1452,21 @@ cEditor.toolbar = {
             tool             = cEditor.tools[cEditor.toolbar.current],
             workingNode      = cEditor.content.currentNode,
             appendCallback,
-            newBlock;
+            newBlockContent;
 
         /** Make block from plugin */
-        newBlock = tool.make();
+        newBlockContent = tool.make();
 
         /** Can replace? */
         if (REPLACEBLE_TOOLS.indexOf(tool.type) != -1 && workingNode) {
 
             /** Replace current block */
-            cEditor.content.switchBlock(workingNode, newBlock, tool.type);
+            cEditor.content.switchBlock(workingNode, newBlockContent, tool.type);
 
         } else {
 
             /** Insert new Block from plugin */
-            cEditor.content.insertBlock(newBlock, tool.type);
+            cEditor.content.insertBlock(newBlockContent, tool.type);
 
         }
 

editor.css

@@ -166,13 +166,7 @@
 .ce_redactor li{
     margin: 5px 0;
 }
-.ce_redactor code{
-    display: block;
-    font-family: 'monospace', 'monaco', 'consolas', 'courier';
-    line-height: 1.5em;
-    background: #f8f8fd !important;
-    color: #4a8bd1;
-}
+
 
 
 .ce_redactor .ce_block{

example.html

@@ -21,8 +21,6 @@
         }
     </style>
 
-    <link rel="stylesheet" href="plugins/ceditor-tool-link/ceditor-tool-link.css" />
-    <link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
     <link rel="stylesheet" href="plugins/images/plugin.css" />
 
 </head>
@@ -272,5 +270,12 @@
 </script>
 
 <script src="plugins/ceditor-tool-link/ceditor-tool-link.js"></script>
+<link rel="stylesheet" href="plugins/ceditor-tool-link/ceditor-tool-link.css" />
+
+<script src="plugins/ceditor-tool-code/ceditor-tool-code.js"></script>
+<link rel="stylesheet" href="plugins/ceditor-tool-code/ceditor-tool-code.css" />
+
 <script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
+<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
+
 <script src="plugins/images/plugin.js"></script>

plugins/ceditor-tool-code/ceditor-tool-code.css

@@ -0,0 +1,7 @@
+.tool-code {
+    display: block;
+    font-family: 'monospace', 'monaco', 'consolas', 'courier';
+    line-height: 1.5em;
+    background: #f8f8fd !important;
+    color: #4a8bd1;
+}

plugins/ceditor-tool-code/ceditor-tool-code.js

@@ -0,0 +1,70 @@
+/**
+ * Code Plugin\
+ * Creates code tag and adds content to this tag
+ */
+var codeTool = {
+
+    baseClass : "tool-code",
+
+    /**
+     * Make initial header block
+     * @param {object} JSON with block data
+     * @return {Element} element to append
+     */
+    make : function (data) {
+
+        var tag = document.createElement('code');
+
+        tag.classList += codeTool.baseClass;
+
+        if (data && data.text) {
+            tag.innerHTML = data.text;
+        }
+
+        tag.contentEditable = true;
+
+        return tag;
+
+    },
+
+    /**
+     * Method to render HTML block from JSON
+     */
+    render : function (data) {
+
+        return codeTool.make(data);
+
+    },
+
+    /**
+     * Method to extract JSON data from HTML block
+     */
+    save : function (block){
+
+        var data = {
+            text : null
+        };
+
+        data.text = blockData.textContent;
+
+        return data;
+
+    },
+
+};
+
+/**
+ * Now plugin is ready.
+ * Add it to redactor tools
+ */
+cEditor.tools.code = {
+
+    type           : 'code',
+    iconClassname  : 'ce-icon-code',
+    make           : codeTool.make,
+    appendCallback : null,
+    settings       : null,
+    render         : codeTool.render,
+    save           : codeTool.save
+
+};