cover restoring and fetch function fixed

.gitignore

@@ -5,5 +5,4 @@ Thumbs.db
 /*.sublime-project
 /*.sublime-workspace
 
-node_modules/*
-plugins/*
+node_modules/*

example.html

@@ -13,15 +13,165 @@
 <script src="./codex-editor.js?v=10"></script>
 <link rel="stylesheet" href="./codex-editor.css?v=10">
 
+<link rel="stylesheet" href="codex-editor.css">
+
+<script src="plugins/paragraph/paragraph.js"></script>
+<link rel="stylesheet" href="plugins/paragraph/paragraph.css">
+
+<script src="plugins/header/header.js"></script>
+<link rel="stylesheet" href="plugins/header/header.css">
+
+<script src="plugins/code/code.js"></script>
+<link rel="stylesheet" href="plugins/code/code.css">
+
+<script src="plugins/link/link.js"></script>
+<link rel="stylesheet" href="plugins/link/link.css">
+
+<script src="plugins/quote/quote.js"></script>
+<link rel="stylesheet" href="plugins/quote/quote.css">
+
+<script src="plugins/list/list.js"></script>
+<link rel="stylesheet" href="plugins/list/list.css">
+
+<script src="plugins/image/image.js"></script>
+<link rel="stylesheet" href="plugins/image/image.css">
+
+<script src="plugins/instagram/instagram.js"></script>
+<link rel="stylesheet" href="plugins/instagram/instagram.css">
+
+<script src="plugins/twitter/twitter.js"></script>
+<link rel="stylesheet" href="plugins/twitter/twitter.css">
+
+<script src="plugins/paste/paste.js"></script>
+<link rel="stylesheet" href="plugins/paste/paste.css">
+
 <script>
  codex.start({
  textareaId : "codex_area",
+ tools : {
+ paragraph: {
+ type: 'paragraph',
+ iconClassname: 'ce-icon-paragraph',
+ make: paragraphTool.make,
+ appendCallback: null,
+ settings: null,
+ render: paragraphTool.render,
+ save: paragraphTool.save,
+ displayInToolbox: false,
+ enableLineBreaks: false,
+ allowedToPaste: true
+ },
+ paste: {
+ type: 'paste',
+ iconClassname: '',
+ prepare: pasteTool.prepare,
+ make: pasteTool.make,
+ appendCallback: null,
+ settings: null,
+ render: null,
+ save: pasteTool.save,
+ displayInToolbox: false,
+ enableLineBreaks: false,
+ callbacks: pasteTool.callbacks,
+ allowedToPaste: false
+ },
+ header: {
+ type: 'header',
+ iconClassname: 'ce-icon-header',
+ make: headerTool.make,
+ appendCallback: headerTool.appendCallback,
+ settings: headerTool.makeSettings(),
+ render: headerTool.render,
+ save: headerTool.save
+ },
+ code: {
+ type: 'code',
+ iconClassname: 'ce-icon-code',
+ make: codeTool.make,
+ appendCallback: null,
+ settings: null,
+ render: codeTool.render,
+ save: codeTool.save,
+ displayInToolbox: true,
+ enableLineBreaks: true
+ },
+ link: {
+ type: 'link',
+ iconClassname: 'ce-icon-link',
+ make: linkTool.makeNewBlock,
+ appendCallback: linkTool.appendCallback,
+ render: linkTool.render,
+ save: linkTool.save,
+ displayInToolbox: true,
+ enableLineBreaks: true
+ },
+ list: {
+ type: 'list',
+ iconClassname: 'ce-icon-list-bullet',
+ make: listTool.make,
+ appendCallback: null,
+ settings: listTool.makeSettings(),
+ render: listTool.render,
+ save: listTool.save,
+ displayInToolbox: true,
+ enableLineBreaks: true
+ },
+ quote: {
+ type: 'quote',
+ iconClassname: 'ce-icon-quote',
+ make: quoteTools.makeBlockToAppend,
+ appendCallback: null,
+ settings: quoteTools.makeSettings(),
+ render: quoteTools.render,
+ save: quoteTools.save,
+ displayInToolbox: true,
+ enableLineBreaks: true,
+ allowedToPaste: true
+ },
+ image: {
+ type: 'image',
+ iconClassname: 'ce-icon-picture',
+ make: ceImage.make,
+ appendCallback: ceImage.appendCallback,
+ settings: ceImage.makeSettings(),
+ render: ceImage.render,
+ save: ceImage.save,
+ isStretched: true,
+ displayInToolbox: true,
+ enableLineBreaks: false
+ },
+ instagram: {
+ type: 'instagram',
+ iconClassname: 'ce-icon-instagram',
+ prepare: instagramTool.prepare,
+ make: instagramTool.make,
+ appendCallback: null,
+ settings: null,
+ render: instagramTool.reneder,
+ save: instagramTool.save,
+ displayInToolbox: false,
+ enableLineBreaks: false,
+ allowedToPaste: false
+ },
+ twitter: {
+ type: 'twitter',
+ iconClassname: 'ce-icon-twitter',
+ prepare: twitterTool.prepare,
+ make: twitterTool.make,
+ appendCallback: null,
+ settings: null,
+ render: twitterTool.render,
+ save: twitterTool.save,
+ displayInToolbox: false,
+ enableLineBreaks: false,
+ allowedToPaste: false
+ }
+ },
  data : {
  items: [],
  count: 0
  }
  });
 </script>
 
-<link rel="stylesheet" href="codex-editor.css">
 </html>

modules/content.js

@@ -179,10 +179,15 @@ var content = (function(content) {
  var workingBlock = codex.content.currentNode,
  newBlockContent = blockData.block,
  blockType = blockData.type,
+ cover = blockData.cover,
  isStretched = blockData.stretched;
 
  var newBlock = codex.content.composeNewBlock(newBlockContent, blockType, isStretched);
 
+ if (cover === true) {
+ newBlock.classList.add(codex.ui.className.BLOCK_IN_FEED_MODE);
+ }
+
  if (workingBlock) {
 
  codex.core.insertAfter(workingBlock, newBlock);

modules/renderer.js

@@ -129,7 +129,8 @@ var renderer = (function(renderer) {
  renderer.createBlockFromData = function (blockData) {
 
  /** New parser */
- var pluginName = blockData.type;
+ var pluginName = blockData.type,
+ cover = blockData.cover;
 
  /** Get first key of object that stores plugin name */
  // for (var pluginName in blockData) break;
@@ -148,17 +149,15 @@ var renderer = (function(renderer) {
  /** New Parser */
  var block = codex.tools[pluginName].render(blockData.data);
 
- /** Fire the render method with data */
- // var block = codex.tools[pluginName].render(blockData[pluginName]);
-
  /** is first-level block stretched */
  var stretched = codex.tools[pluginName].isStretched || false;
 
  /** Retrun type and block */
  return {
  type : pluginName,
  block : block,
- stretched : stretched
+ stretched : stretched,
+ cover : cover
  };
 
  };

package.json

@@ -8,7 +8,9 @@
  },
  "author": "Codex Team",
  "license": "ISC",
- "dependencies": {},
+ "dependencies": {
+ "whatwg-fetch": "^2.0.1"
+ },
  "devDependencies": {
  "babel-core": "^6.21.0",
  "babel-loader": "^6.2.10",

plugins/code/code.css

@@ -0,0 +1,25 @@
+.ce-code {
+ display: block;
+ border: 1px solid #ebeef3;
+ border-radius: 3px;
+ background: #fdfdff !important;
+
+ margin: 1em 0 !important;
+ padding: .5em .8em;
+ box-sizing: border-box;
+ white-space: pre-wrap;
+
+ font-family: 'monospace', 'monaco', 'consolas', 'courier';
+ line-height: 1.5em;
+ color: #325179;
+ font-size: .8em;
+}
+
+
+/**
+* CodeX Editor styles overlay
+* @todo change for ce-tool-wrapper__code
+*/
+.ce_block[data-type="code"]{
+ padding: 1em 0 !important;
+}

plugins/code/code.js

@@ -0,0 +1,54 @@
+/**
+ * Code Plugin\
+ * Creates code tag and adds content to this tag
+ */
+var codeTool = {
+
+ baseClass : "ce-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.add(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 (blockContent){
+
+ var data = {
+ text : null,
+ };
+
+ data.text = blockContent.innerHTML;
+
+ return data;
+
+ }
+
+};