Version 1.2.13: definition lists and horizontal lines

.gitignore

@@ -6,6 +6,7 @@ plugins/disqus
 plugins/download
 plugins/finalwords
 plugins/joblistings
+plugins/landingpage
 plugins/mail
 plugins/textadds
 plugins/version

cache/lastCache.txt

@@ -1 +1 @@
-1555084348
+1556956478

content/00-Welcome/03-Markdown-Test.md → content/00-Welcome/04-Markdown-Test.md

@@ -237,6 +237,8 @@ the family Rosaceae.
 Orange
 :   The fruit of an evergreen tree of the genus Citrus.
 
+
+
 ## Tables
 
 ````

content/index.md

@@ -1,4 +1,4 @@
 # Typemill
 
-*Typemill is a user-friendly and lightweight open source CMS for publishing text-works like prosa, lyrics, manuals, documentations, studies and more. Just download and start.*
+*Typemill is a user-friendly and lightweight open source CMS for publishing text-works like prose, lyrics, manuals, documentations, studies and more. Just download and start.*
 

plugins/math/math.yaml

@@ -1,5 +1,5 @@
 name: Math
-version: 1.0.0
+version: 1.0.1
 description: Adds support for katex and mathjax.
 author: Sebastian Schürmanns
 homepage: https://mathjax.org/

system/Controllers/ContentApiController.php

@@ -597,9 +597,9 @@ class ContentApiController extends ContentController
 			$contentArray 	= $parsedown->text($block);
 
 			/* parse markdown-content-array to content-string */
-			$content[$key]	= $parsedown->markup($contentArray, $relurl);
+			$content[$key]	= ['id' => $key, 'html' => $parsedown->markup($contentArray, $relurl)];
 		}
-				
+
 		return $response->withJson(array('data' => $content, 'errors' => false));
 	}
 
@@ -658,7 +658,7 @@ class ContentApiController extends ContentController
 		{
 			# set the id of the markdown-block (it will be one more than the actual array, so count is perfect) 
 			$id = count($pageMarkdown);
-						
+
 			# add the new markdown block to the page content
 			$pageMarkdown[] = $blockMarkdown;			
 		}
@@ -703,7 +703,7 @@ class ContentApiController extends ContentController
 		/* parse markdown-content-array to content-string */
 		$blockHTML		= $parsedown->markup($blockArray, $relurl);
 
-		return $response->withJson(array('content' => $blockHTML, 'markdown' => $blockMarkdown, 'id' => $id, 'errors' => false));
+		return $response->withJson(array('content' => [ 'id' => $id, 'html' => $blockHTML ] , 'markdown' => $blockMarkdown, 'id' => $id, 'errors' => false));
 	}
 	
 	public function updateBlock(Request $request, Response $response, $args)
@@ -739,8 +739,8 @@ class ContentApiController extends ContentController
         $blockMarkdown = str_replace(array("\r\n", "\r"), "\n", $blockMarkdown);
 
         # remove surrounding line breaks
-        $blockMarkdown = trim($blockMarkdown, "\n");		
-		
+        $blockMarkdown = trim($blockMarkdown, "\n");
+
 		if($pageMarkdown == '')
 		{
 			$pageMarkdown = [];
@@ -779,7 +779,7 @@ class ContentApiController extends ContentController
 			$pageMarkdown[$this->params['block_id']] = $blockMarkdown;
 			$id = $this->params['block_id'];
 		}
-	
+
 		# encode the content into json
 		$pageJson = json_encode($pageMarkdown);
 
@@ -816,7 +816,7 @@ class ContentApiController extends ContentController
 		/* parse markdown-content-array to content-string */
 		$blockHTML		= $parsedown->markup($blockArray, $relurl);
 
-		return $response->withJson(array('content' => $blockHTML, 'markdown' => $blockMarkdown, 'id' => $id, 'errors' => false));
+		return $response->withJson(array('content' => ['id' => $id, 'html' => $blockHTML], 'markdown' => $blockMarkdown, 'id' => $id, 'errors' => false));
 	}
 	
 	public function moveBlock(Request $request, Response $response, $args)
@@ -889,11 +889,25 @@ class ContentApiController extends ContentController
 		{
 			return $response->withJson(['errors' => ['message' => 'Could not write to file. Please check if the file is writable']], 404);
 		}
-	
+
+		# needed for ToC links
+		$relurl = '/tm/content/' . $this->settings['editor'] . '/' . $this->item->urlRel;
+
+		# generate html array
+		$pageHTML = [];
+		foreach($pageMarkdown as $key => $markdownBlock)
+		{
+			/* parse markdown-file to content-array */
+			$contentArray 	= $parsedown->text($markdownBlock);
+
+			/* parse markdown-content-array to content-string */
+			$pageHTML[$key]	= ['id' => $key, 'html' => $parsedown->markup($contentArray, $relurl)];
+		}
+
 		# if it is the title, then delete the "# " if it exists
 		$pageMarkdown[0] = trim($pageMarkdown[0], "# ");
 
-		return $response->withJson(array('markdown' => $pageMarkdown, 'errors' => false));
+		return $response->withJson(array('markdown' => $pageMarkdown,  'html' => $pageHTML, 'errors' => false));
 	}
 
 	public function deleteBlock(Request $request, Response $response, $args)

system/Extensions/ParsedownExtension.php

@@ -479,39 +479,45 @@ class ParsedownExtension extends \ParsedownExtra
 		
 		# flag if codeblock is on or off.
 		$codeBlockOn = false;
-		
+        
+        # holds the content of a definition list
+        $definitionList = "";
+
+        # flag if definition-list is on or off.
+        $definitionListOn = false;
+
 		foreach($blocks as $block)
 		{
-			// remove empty lines
+			# remove empty lines
 			if (chop($block) === '') continue;
 			
-			// if the block starts with a fenced code
+			# if the block starts with a fenced code
 			if(substr($block,0,2) == '``')
 			{
-				// and if we are in an open code-block
+				# and if we are in an open code-block
 				if($codeBlockOn)
 				{
-					// it must be the end of the codeblock, so add it to the codeblock
+					# it must be the end of the codeblock, so add it to the codeblock
 					$block = $codeBlock . "\n" . $block;
 					
-					// reset codeblock-value and close the codeblock.
+					# reset codeblock-value and close the codeblock.
 					$codeBlock = '';
 					$codeBlockOn = false;
 				}
 				else
 				{
-					// it must be the start of the codeblock.
+					# it must be the start of the codeblock.
 					$codeBlockOn = true;
 				}
 			}
 			if($codeBlockOn)
 			{
-				// if the codeblock is complete
+				# if the codeblock is complete
 				if($this->isComplete($block))
 				{
 					$block = $codeBlock . "\n" . $block;
 
-					// reset codeblock-value and close the codeblock.
+					# reset codeblock-value and close the codeblock.
 					$codeBlock = '';
 					$codeBlockOn = false;
 				}
@@ -520,8 +526,23 @@ class ParsedownExtension extends \ParsedownExtra
 					$codeBlock .= "\n" . $block;
 					continue;
 				}
-			}
-			
+            }
+            
+            # handle definition lists
+            $checkDL = preg_split('/\r\n|\r|\n/',$block);
+            if(isset($checkDL[1]) && substr($checkDL[1],0,2) == ': ')
+            {
+                $definitionList .= $block . "\n\n";
+                $definitionListOn = true;
+                continue; 
+            }
+            elseif($definitionListOn)
+            {
+                $cleanBlocks[] = $definitionList;
+                $definitionList = "";
+                $definitionListOn = false;
+            }
+            
 			$block = trim($block, "\n");
 						
 			$cleanBlocks[] = $block;

system/Settings.php

@@ -6,20 +6,20 @@ class Settings
 {	
 	public static function loadSettings()
 	{
-		$settings 			= self::getDefaultSettings();
+		$defaultSettings 	= self::getDefaultSettings();
 		$userSettings 		= self::getUserSettings();
-						
-		$imgSettings 		= isset($settings['images']) ? $settings['images'] : [];
 		
+		$settings 			= array_merge($defaultSettings, $userSettings);
+
 		if($userSettings)
-		{
-			$settings 			= array_merge($settings, $userSettings);
-			$settings['setup'] 	= false;
+		{ 
+			$settings['setup'] 	= false; 
 		}
 		
-		$settings['images']		= isset($userSettings['images']) ? array_merge($imgSettings, $userSettings['images']) : $imgSettings;
+		$settings['images']		= isset($userSettings['images']) ? array_merge($defaultSettings['images'], $userSettings['images']) : $defaultSettings['images'];
 		$settings['themePath'] 	= $settings['rootPath'] . $settings['themeFolder'] . DIRECTORY_SEPARATOR . $settings['theme'];
-
+		$settings['version']	= $defaultSettings['version'];
+		
 		return array('settings' => $settings);
 	}
 	
@@ -99,48 +99,4 @@ class Settings
 			$yaml->updateYaml('settings', 'settings.yaml', $settings);					
 		}
 	}
-	
-	/*
-	public static function removePluginSettings($pluginName)
-	{
-		$userSettings 	= self::getUserSettings();
-		
-		if($userSettings && isset($userSettings['plugins'][$pluginName]))
-		{
-			$yaml = new Models\WriteYaml();
-			
-			# delete the plugin from settings
-			unset($userSettings['plugins'][$pluginName]);
-			
-			# write settings to yaml
-			$yaml->updateYaml('settings', 'settings.yaml', $userSettings);			
-		}
-		
-		return $userSettings;
-	}
-	
-	public static function addPluginSettings($pluginName)
-	{
-		$userSettings 	= self::getUserSettings();
-		
-		if($userSettings)
-		{
-			$yaml = new Models\WriteYaml();
-			
-			$pluginSettings = self::getObjectSettings('plugins', $pluginName);
-			if(isset($pluginSettings['settings']))
-			{
-				$userSettings['plugins'][$pluginName] = $pluginSettings['settings'];
-			}
-			
-			$userSettings['plugins'][$pluginName]['active'] = false;
-			
-			# write settings to yaml
-			$yaml->updateYaml('settings', 'settings.yaml', $userSettings);
-
-			return $userSettings;
-		}
-		return false;
-	}
-	*/
 }

system/author/css/fontello/LICENSE.txt

@@ -10,13 +10,22 @@ Font license info
    Homepage:  http://fortawesome.github.com/Font-Awesome/
 
 
-## Entypo
+## Modern Pictograms
 
-   Copyright (C) 2012 by Daniel Bruce
+   Copyright (c) 2012 by John Caserta. All rights reserved.
+
+   Author:    John Caserta
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://thedesignoffice.org/project/modern-pictograms/
+
+
+## Typicons
+
+   (c) Stephen Hutchings 2012
 
-   Author:    Daniel Bruce
+   Author:    Stephen Hutchings
    License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://www.entypo.com
+   Homepage:  http://typicons.com/
 
 
 ## MFG Labs

system/author/css/fontello/config.json

@@ -6,12 +6,6 @@
   "units_per_em": 1000,
   "ascent": 850,
   "glyphs": [
-    {
-      "uid": "8663320a860b00f26e94d3d15c9ba99a",
-      "css": "clock",
-      "code": 59393,
-      "src": "entypo"
-    },
     {
       "uid": "381da2c2f7fd51f8de877c044d7f439d",
       "css": "picture",
@@ -21,63 +15,69 @@
     {
       "uid": "5211af474d3a9848f67f945e2ccaf143",
       "css": "cancel",
-      "code": 59394,
+      "code": 59393,
       "src": "fontawesome"
     },
     {
       "uid": "44e04715aecbca7f266a17d5a7863c68",
       "css": "plus",
-      "code": 59395,
+      "code": 59394,
       "src": "fontawesome"
     },
     {
       "uid": "d7271d490b71df4311e32cdacae8b331",
       "css": "home",
-      "code": 59396,
+      "code": 59395,
       "src": "fontawesome"
     },
     {
       "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
       "css": "link",
-      "code": 59397,
+      "code": 59396,
       "src": "fontawesome"
     },
     {
-      "uid": "e15f0d620a7897e2035c18c80142f6d9",
-      "css": "link-ext",
-      "code": 61582,
+      "uid": "e99461abfef3923546da8d745372c995",
+      "css": "cog",
+      "code": 59397,
       "src": "fontawesome"
     },
     {
-      "uid": "ab95e1351ebaec5850101097cbf7097f",
-      "css": "quote-left",
-      "code": 61709,
+      "uid": "a8cb1c217f02b073db3670c061cc54d2",
+      "css": "italic",
+      "code": 59398,
       "src": "fontawesome"
     },
     {
-      "uid": "7034e4d22866af82bef811f52fb1ba46",
-      "css": "code",
-      "code": 61729,
+      "uid": "02cca871bb69da75e8ee286b7055832c",
+      "css": "bold",
+      "code": 59399,
       "src": "fontawesome"
     },
     {
-      "uid": "5408be43f7c42bccee419c6be53fdef5",
-      "css": "doc-text",
-      "code": 61686,
+      "uid": "8b9e6a8dd8f67f7c003ed8e7e5ee0857",
+      "css": "off",
+      "code": 59400,
       "src": "fontawesome"
     },
     {
-      "uid": "b091a8bd0fdade174951f17d936f51e4",
-      "css": "folder-empty",
-      "code": 61716,
+      "uid": "872d9516df93eb6b776cc4d94bd97dac",
+      "css": "video",
+      "code": 59401,
       "src": "fontawesome"
     },
     {
-      "uid": "e99461abfef3923546da8d745372c995",
-      "css": "cog",
-      "code": 59398,
+      "uid": "47a1f80457068fbeab69fdb83d7d0817",
+      "css": "youtube-play",
+      "code": 61802,
       "src": "fontawesome"
     },
+    {
+      "uid": "c5fd68d8253e605e7a78a0c75255b692",
+      "css": "math",
+      "code": 61466,
+      "src": "mfglabs"
+    },
     {
       "uid": "6605ee6441bf499ffa3c63d3c7409471",
       "css": "move",
@@ -85,88 +85,112 @@
       "src": "fontawesome"
     },
     {
-      "uid": "c5845105a87df2ee1999826d90622f6a",
-      "css": "paragraph",
-      "code": 61917,
+      "uid": "e15f0d620a7897e2035c18c80142f6d9",
+      "css": "link-ext",
+      "code": 61582,
       "src": "fontawesome"
     },
     {
-      "uid": "0c708edd8fae2376b3370aa56d40cf9e",
-      "css": "header",
-      "code": 61916,
+      "uid": "a2a74f5e7b7d9ba054897d8c795a326a",
+      "css": "list-bullet",
+      "code": 61642,
       "src": "fontawesome"
     },
     {
-      "uid": "f9cbf7508cd04145ade2800169959eef",
-      "css": "font",
-      "code": 59399,
+      "uid": "f6766a8b042c2453a4e153af03294383",
+      "css": "list-numbered",
+      "code": 61643,
       "src": "fontawesome"
     },
     {
-      "uid": "a8cb1c217f02b073db3670c061cc54d2",
-      "css": "italic",
-      "code": 59400,
+      "uid": "d4a4a38a40b728f46dad1de4ac950231",
+      "css": "underline",
+      "code": 61645,
       "src": "fontawesome"
     },
     {
-      "uid": "02cca871bb69da75e8ee286b7055832c",
-      "css": "bold",
-      "code": 59401,
+      "uid": "8fb55fd696d9a0f58f3b27c1d8633750",
+      "css": "table",
+      "code": 61646,
       "src": "fontawesome"
     },
     {
-      "uid": "4e88371fb8857dacc1f66afe6314e426",
-      "css": "superscript",
-      "code": 61739,
+      "uid": "5408be43f7c42bccee419c6be53fdef5",
+      "css": "doc-text",
+      "code": 61686,
       "src": "fontawesome"
     },
     {
-      "uid": "d4a4a38a40b728f46dad1de4ac950231",
-      "css": "underline",
-      "code": 61645,
+      "uid": "ab95e1351ebaec5850101097cbf7097f",
+      "css": "quote-left",
+      "code": 61709,
       "src": "fontawesome"
     },
     {
-      "uid": "f6766a8b042c2453a4e153af03294383",
-      "css": "list-numbered",
-      "code": 61643,
+      "uid": "b091a8bd0fdade174951f17d936f51e4",
+      "css": "folder-empty",
+      "code": 61716,
       "src": "fontawesome"
     },
     {
-      "uid": "a2a74f5e7b7d9ba054897d8c795a326a",
-      "css": "list-bullet",
-      "code": 61642,
+      "uid": "7034e4d22866af82bef811f52fb1ba46",
+      "css": "code",
+      "code": 61729,
       "src": "fontawesome"
     },
     {
-      "uid": "8fb55fd696d9a0f58f3b27c1d8633750",
-      "css": "table",
-      "code": 61646,
+      "uid": "4e88371fb8857dacc1f66afe6314e426",
+      "css": "superscript",
+      "code": 61739,
       "src": "fontawesome"
     },
     {
-      "uid": "8b9e6a8dd8f67f7c003ed8e7e5ee0857",
-      "css": "off",
+      "uid": "0c708edd8fae2376b3370aa56d40cf9e",
+      "css": "header",
+      "code": 61916,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c5845105a87df2ee1999826d90622f6a",
+      "css": "paragraph",
+      "code": 61917,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "eeec3208c90b7b48e804919d0d2d4a41",
+      "css": "upload",
       "code": 59402,
       "src": "fontawesome"
     },
     {
-      "uid": "872d9516df93eb6b776cc4d94bd97dac",
-      "css": "video",
+      "uid": "861ab06e455e2de3232ebef67d60d708",
+      "css": "minus",
       "code": 59403,
       "src": "fontawesome"
     },
     {
-      "uid": "47a1f80457068fbeab69fdb83d7d0817",
-      "css": "youtube-play",
-      "code": 61802,
+      "uid": "2qh229aneb95ds2afi7dbdsxz9jrbhcl",
+      "css": "colon",
+      "code": 59404,
+      "src": "modernpics"
+    },
+    {
+      "uid": "c819c6225685bae2eed1b8da13e629fa",
+      "css": "list-alt",
+      "code": 59406,
       "src": "fontawesome"
     },
     {
-      "uid": "c5fd68d8253e605e7a78a0c75255b692",
-      "css": "math",
-      "code": 61466,
-      "src": "mfglabs"
+      "uid": "d2d6ab0dd4fb9365b1d5756380484bbb",
+      "css": "pi",
+      "code": 59405,
+      "src": "typicons"
+    },
+    {
+      "uid": "d3b3f17bc3eb7cd809a07bbd4d178bee",
+      "css": "resize-vertical",
+      "code": 59407,
+      "src": "fontawesome"
     }
   ]
 }

system/author/css/fontello/css/fontello-codes.css

@@ -1,16 +1,20 @@
 
 .icon-picture:before { content: '\e800'; } /* '' */
-.icon-clock:before { content: '\e801'; } /* '' */
-.icon-cancel:before { content: '\e802'; } /* '' */
-.icon-plus:before { content: '\e803'; } /* '' */
-.icon-home:before { content: '\e804'; } /* '' */
-.icon-link:before { content: '\e805'; } /* '' */
-.icon-cog:before { content: '\e806'; } /* '' */
-.icon-font:before { content: '\e807'; } /* '' */
-.icon-italic:before { content: '\e808'; } /* '' */
-.icon-bold:before { content: '\e809'; } /* '' */
-.icon-off:before { content: '\e80a'; } /* '' */
-.icon-video:before { content: '\e80b'; } /* '' */
+.icon-cancel:before { content: '\e801'; } /* '' */
+.icon-plus:before { content: '\e802'; } /* '' */
+.icon-home:before { content: '\e803'; } /* '' */
+.icon-link:before { content: '\e804'; } /* '' */
+.icon-cog:before { content: '\e805'; } /* '' */
+.icon-italic:before { content: '\e806'; } /* '' */
+.icon-bold:before { content: '\e807'; } /* '' */
+.icon-off:before { content: '\e808'; } /* '' */
+.icon-video:before { content: '\e809'; } /* '' */
+.icon-upload:before { content: '\e80a'; } /* '' */
+.icon-minus:before { content: '\e80b'; } /* '' */
+.icon-colon:before { content: '\e80c'; } /* '' */
+.icon-pi:before { content: '\e80d'; } /* '' */
+.icon-list-alt:before { content: '\e80e'; } /* '' */
+.icon-resize-vertical:before { content: '\e80f'; } /* '' */
 .icon-math:before { content: '\f01a'; } /* '' */
 .icon-move:before { content: '\f047'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */

system/author/css/fontello/css/fontello-ie7-codes.css

@@ -1,16 +1,20 @@
 
 .icon-picture { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-clock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-font { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-italic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-bold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-italic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-bold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-colon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-pi { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-list-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-resize-vertical { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-math { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

system/author/css/fontello/css/fontello-ie7.css

@@ -11,17 +11,21 @@
 }
  
 .icon-picture { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-clock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-font { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-italic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-bold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-italic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-bold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-colon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-pi { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-list-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-resize-vertical { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-math { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

system/author/css/fontello/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?18427545');
-  src: url('../font/fontello.eot?18427545#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?18427545') format('woff2'),
-       url('../font/fontello.woff?18427545') format('woff'),
-       url('../font/fontello.ttf?18427545') format('truetype'),
-       url('../font/fontello.svg?18427545#fontello') format('svg');
+  src: url('../font/fontello.eot?30081562');
+  src: url('../font/fontello.eot?30081562#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?30081562') format('woff2'),
+       url('../font/fontello.woff?30081562') format('woff'),
+       url('../font/fontello.ttf?30081562') format('truetype'),
+       url('../font/fontello.svg?30081562#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?18427545#fontello') format('svg');
+    src: url('../font/fontello.svg?30081562#fontello') format('svg');
   }
 }
 */
@@ -56,17 +56,21 @@
 }
  
 .icon-picture:before { content: '\e800'; } /* '' */
-.icon-clock:before { content: '\e801'; } /* '' */
-.icon-cancel:before { content: '\e802'; } /* '' */
-.icon-plus:before { content: '\e803'; } /* '' */
-.icon-home:before { content: '\e804'; } /* '' */
-.icon-link:before { content: '\e805'; } /* '' */
-.icon-cog:before { content: '\e806'; } /* '' */
-.icon-font:before { content: '\e807'; } /* '' */
-.icon-italic:before { content: '\e808'; } /* '' */
-.icon-bold:before { content: '\e809'; } /* '' */
-.icon-off:before { content: '\e80a'; } /* '' */
-.icon-video:before { content: '\e80b'; } /* '' */
+.icon-cancel:before { content: '\e801'; } /* '' */
+.icon-plus:before { content: '\e802'; } /* '' */
+.icon-home:before { content: '\e803'; } /* '' */
+.icon-link:before { content: '\e804'; } /* '' */
+.icon-cog:before { content: '\e805'; } /* '' */
+.icon-italic:before { content: '\e806'; } /* '' */
+.icon-bold:before { content: '\e807'; } /* '' */
+.icon-off:before { content: '\e808'; } /* '' */
+.icon-video:before { content: '\e809'; } /* '' */
+.icon-upload:before { content: '\e80a'; } /* '' */
+.icon-minus:before { content: '\e80b'; } /* '' */
+.icon-colon:before { content: '\e80c'; } /* '' */
+.icon-pi:before { content: '\e80d'; } /* '' */
+.icon-list-alt:before { content: '\e80e'; } /* '' */
+.icon-resize-vertical:before { content: '\e80f'; } /* '' */
 .icon-math:before { content: '\f01a'; } /* '' */
 .icon-move:before { content: '\f047'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */

system/author/css/fontello/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?32679445');
-      src: url('./font/fontello.eot?32679445#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?32679445') format('woff'),
-           url('./font/fontello.ttf?32679445') format('truetype'),
-           url('./font/fontello.svg?32679445#fontello') format('svg');
+      src: url('./font/fontello.eot?59871380');
+      src: url('./font/fontello.eot?59871380#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?59871380') format('woff'),
+           url('./font/fontello.ttf?59871380') format('truetype'),
+           url('./font/fontello.svg?59871380#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -299,21 +299,27 @@ body {
     <div class="container" id="icons">
       <div class="row">
         <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-picture">&#xe800;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe800</span></div>
-        <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-clock">&#xe801;</i> <span class="i-name">icon-clock</span><span class="i-code">0xe801</span></div>
-        <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-cancel">&#xe802;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe802</span></div>
-        <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-plus">&#xe803;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe803</span></div>
+        <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-cancel">&#xe801;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe801</span></div>
+        <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-plus">&#xe802;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe802</span></div>
+        <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-home">&#xe803;</i> <span class="i-name">icon-home</span><span class="i-code">0xe803</span></div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-home">&#xe804;</i> <span class="i-name">icon-home</span><span class="i-code">0xe804</span></div>
-        <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-link">&#xe805;</i> <span class="i-name">icon-link</span><span class="i-code">0xe805</span></div>
-        <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-cog">&#xe806;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe806</span></div>
-        <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-font">&#xe807;</i> <span class="i-name">icon-font</span><span class="i-code">0xe807</span></div>
+        <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-link">&#xe804;</i> <span class="i-name">icon-link</span><span class="i-code">0xe804</span></div>
+        <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-cog">&#xe805;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe805</span></div>
+        <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-italic">&#xe806;</i> <span class="i-name">icon-italic</span><span class="i-code">0xe806</span></div>
+        <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-bold">&#xe807;</i> <span class="i-name">icon-bold</span><span class="i-code">0xe807</span></div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-italic">&#xe808;</i> <span class="i-name">icon-italic</span><span class="i-code">0xe808</span></div>
-        <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-bold">&#xe809;</i> <span class="i-name">icon-bold</span><span class="i-code">0xe809</span></div>
-        <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-off">&#xe80a;</i> <span class="i-name">icon-off</span><span class="i-code">0xe80a</span></div>
-        <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-video">&#xe80b;</i> <span class="i-name">icon-video</span><span class="i-code">0xe80b</span></div>
+        <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-off">&#xe808;</i> <span class="i-name">icon-off</span><span class="i-code">0xe808</span></div>
+        <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-video">&#xe809;</i> <span class="i-name">icon-video</span><span class="i-code">0xe809</span></div>
+        <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-upload">&#xe80a;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe80a</span></div>
+        <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-minus">&#xe80b;</i> <span class="i-name">icon-minus</span><span class="i-code">0xe80b</span></div>
+      </div>
+      <div class="row">
+        <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-colon">&#xe80c;</i> <span class="i-name">icon-colon</span><span class="i-code">0xe80c</span></div>
+        <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-pi">&#xe80d;</i> <span class="i-name">icon-pi</span><span class="i-code">0xe80d</span></div>
+        <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-list-alt">&#xe80e;</i> <span class="i-name">icon-list-alt</span><span class="i-code">0xe80e</span></div>
+        <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-resize-vertical">&#xe80f;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe80f</span></div>
       </div>
       <div class="row">
         <div class="the-icons span3" title="Code: 0xf01a"><i class="demo-icon icon-math">&#xf01a;</i> <span class="i-name">icon-math</span><span class="i-code">0xf01a</span></div>

system/author/css/fontello/font/fontello.svg

@@ -8,27 +8,35 @@
 <missing-glyph horiz-adv-x="1000" />
 <glyph glyph-name="picture" unicode="&#xe800;" d="M357 529q0-45-31-76t-76-32-76 32-31 76 31 76 76 31 76-31 31-76z m572-215v-250h-786v107l178 179 90-89 285 285z m53 393h-893q-7 0-12-5t-6-13v-678q0-7 6-13t12-5h893q7 0 13 5t5 13v678q0 8-5 13t-13 5z m89-18v-678q0-37-26-63t-63-27h-893q-36 0-63 27t-26 63v678q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
 
-<glyph glyph-name="clock" unicode="&#xe801;" d="M460 810q190 0 325-135t135-325-135-325-325-135-325 135-135 325 135 325 325 135z m0-820q150 0 255 106t105 254q0 150-105 255t-255 105q-148 0-254-105t-106-255q0-148 106-254t254-106z m36 620l0-244 150-150-50-50-170 170 0 274 70 0z" horiz-adv-x="920" />
+<glyph glyph-name="cancel" unicode="&#xe801;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
 
-<glyph glyph-name="cancel" unicode="&#xe802;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
+<glyph glyph-name="plus" unicode="&#xe802;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
 
-<glyph glyph-name="plus" unicode="&#xe803;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
+<glyph glyph-name="home" unicode="&#xe803;" d="M786 296v-267q0-15-11-25t-25-11h-214v214h-143v-214h-214q-15 0-25 11t-11 25v267q0 1 0 2t0 2l321 264 321-264q1-1 1-4z m124 39l-34-41q-5-5-12-6h-2q-7 0-12 3l-386 322-386-322q-7-4-13-3-7 1-12 6l-35 41q-4 6-3 13t6 12l401 334q18 15 42 15t43-15l136-113v108q0 8 5 13t13 5h107q8 0 13-5t5-13v-227l122-102q6-4 6-12t-4-13z" horiz-adv-x="928.6" />
 
-<glyph glyph-name="home" unicode="&#xe804;" d="M786 296v-267q0-15-11-25t-25-11h-214v214h-143v-214h-214q-15 0-25 11t-11 25v267q0 1 0 2t0 2l321 264 321-264q1-1 1-4z m124 39l-34-41q-5-5-12-6h-2q-7 0-12 3l-386 322-386-322q-7-4-13-3-7 1-12 6l-35 41q-4 6-3 13t6 12l401 334q18 15 42 15t43-15l136-113v108q0 8 5 13t13 5h107q8 0 13-5t5-13v-227l122-102q6-4 6-12t-4-13z" horiz-adv-x="928.6" />
+<glyph glyph-name="link" unicode="&#xe804;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
 
-<glyph glyph-name="link" unicode="&#xe805;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
+<glyph glyph-name="cog" unicode="&#xe805;" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 16 20 16h124q7 0 13-5t7-12l15-103q28-9 51-20l79 59q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-12 0-7-4-13-9-12-29-37t-30-40q15-28 23-54l102-16q7-1 12-7t4-13z" horiz-adv-x="857.1" />
 
-<glyph glyph-name="cog" unicode="&#xe806;" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 16 20 16h124q7 0 13-5t7-12l15-103q28-9 51-20l79 59q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-12 0-7-4-13-9-12-29-37t-30-40q15-28 23-54l102-16q7-1 12-7t4-13z" horiz-adv-x="857.1" />
+<glyph glyph-name="italic" unicode="&#xe806;" d="M0-78l10 48q12 4 34 9t40 11 33 13q16 19 23 56 1 4 35 162t63 303 29 165v14q-13 8-30 11t-39 4-32 3l10 58q19-1 67-4t84-4 67-1q27 0 55 1t68 4 54 4q-2-22-10-50-17-6-57-16t-60-19q-5-10-8-23t-5-23-4-25-4-24q-15-82-49-234t-43-198q-1-5-7-32t-11-51-9-46-4-32l1-10q9-3 103-18-2-24-9-55-6 0-18-1t-18-1q-16 0-49 6t-48 6q-77 1-115 1-28 0-79-5t-68-7z" horiz-adv-x="571.4" />
 
-<glyph glyph-name="font" unicode="&#xe807;" d="M405 538l-95-251q18 0 76-1t89-1q11 0 32 1-48 141-102 252z m-405-617l1 44q13 4 31 7t32 6 28 8 25 17 17 28l132 344 156 404h72q4-8 6-12l114-268q19-43 60-144t63-153q9-19 33-80t40-94q11-26 19-32 11-9 49-17t47-11q4-22 4-32 0-3-1-8t0-7q-35 0-106 5t-107 4q-42 0-120-4t-99-4q0 24 2 43l73 16q1 0 7 1t9 2 8 3 9 4 6 4 5 6 1 8q0 9-17 54t-40 99-24 56l-251 1q-14-32-43-109t-28-91q0-12 8-21t24-14 27-7 32-5 23-2q1-11 1-32 0-5-1-16-33 0-98 6t-97 6q-5 0-15-3t-12-2q-45-8-105-8z" horiz-adv-x="928.6" />
+<glyph glyph-name="bold" unicode="&#xe807;" d="M310 1q41-18 78-18 210 0 210 187 0 64-23 101-15 24-34 41t-38 26-45 14-47 6-53 1q-40 0-56-6 0-29 0-88t-1-88q0-5 0-38t0-54 2-47 7-37z m-8 417q23-4 61-4 46 0 80 7t61 25 42 50 14 79q0 39-16 68t-45 46-60 24-69 8q-28 0-73-7 0-28 3-84t2-85q0-15 0-45t-1-44q0-26 1-38z m-302-497l1 53q9 2 48 9t59 15q4 7 7 15t4 19 4 18 1 21 0 19v36q0 548-12 572-2 5-12 8t-25 6-28 4-27 3-17 2l-2 46q55 1 190 6t208 6q13 0 38-1t38 0q39 0 76-7t72-24 60-39 41-59 16-76q0-29-9-54t-22-40-36-32-41-25-47-22q86-20 144-75t57-138q0-56-20-101t-52-72-77-48-91-27-98-8q-25 0-74 2t-74 1q-59 0-171-6t-129-7z" horiz-adv-x="785.7" />
 
-<glyph glyph-name="italic" unicode="&#xe808;" d="M0-78l10 48q12 4 34 9t40 11 33 13q16 19 23 56 1 4 35 162t63 303 29 165v14q-13 8-30 11t-39 4-32 3l10 58q19-1 67-4t84-4 67-1q27 0 55 1t68 4 54 4q-2-22-10-50-17-6-57-16t-60-19q-5-10-8-23t-5-23-4-25-4-24q-15-82-49-234t-43-198q-1-5-7-32t-11-51-9-46-4-32l1-10q9-3 103-18-2-24-9-55-6 0-18-1t-18-1q-16 0-49 6t-48 6q-77 1-115 1-28 0-79-5t-68-7z" horiz-adv-x="571.4" />
+<glyph glyph-name="off" unicode="&#xe808;" d="M857 350q0-87-34-166t-91-137-137-92-166-34-167 34-136 92-92 137-34 166q0 102 45 191t126 151q24 18 54 14t46-28q18-23 14-53t-28-47q-54-41-84-101t-30-127q0-58 23-111t61-91 91-61 111-23 110 23 92 61 61 91 22 111q0 68-30 127t-84 101q-23 18-28 47t14 53q17 24 47 28t53-14q81-61 126-151t45-191z m-357 429v-358q0-29-21-50t-50-21-51 21-21 50v358q0 29 21 50t51 21 50-21 21-50z" horiz-adv-x="857.1" />
 
-<glyph glyph-name="bold" unicode="&#xe809;" d="M310 1q41-18 78-18 210 0 210 187 0 64-23 101-15 24-34 41t-38 26-45 14-47 6-53 1q-40 0-56-6 0-29 0-88t-1-88q0-5 0-38t0-54 2-47 7-37z m-8 417q23-4 61-4 46 0 80 7t61 25 42 50 14 79q0 39-16 68t-45 46-60 24-69 8q-28 0-73-7 0-28 3-84t2-85q0-15 0-45t-1-44q0-26 1-38z m-302-497l1 53q9 2 48 9t59 15q4 7 7 15t4 19 4 18 1 21 0 19v36q0 548-12 572-2 5-12 8t-25 6-28 4-27 3-17 2l-2 46q55 1 190 6t208 6q13 0 38-1t38 0q39 0 76-7t72-24 60-39 41-59 16-76q0-29-9-54t-22-40-36-32-41-25-47-22q86-20 144-75t57-138q0-56-20-101t-52-72-77-48-91-27-98-8q-25 0-74 2t-74 1q-59 0-171-6t-129-7z" horiz-adv-x="785.7" />
+<glyph glyph-name="video" unicode="&#xe809;" d="M214-43v72q0 14-10 25t-25 10h-72q-14 0-25-10t-11-25v-72q0-14 11-25t25-11h72q14 0 25 11t10 25z m0 214v72q0 14-10 25t-25 11h-72q-14 0-25-11t-11-25v-72q0-14 11-25t25-10h72q14 0 25 10t10 25z m0 215v71q0 15-10 25t-25 11h-72q-14 0-25-11t-11-25v-71q0-15 11-25t25-11h72q14 0 25 11t10 25z m572-429v286q0 14-11 25t-25 11h-429q-14 0-25-11t-10-25v-286q0-14 10-25t25-11h429q15 0 25 11t11 25z m-572 643v71q0 15-10 26t-25 10h-72q-14 0-25-10t-11-26v-71q0-14 11-25t25-11h72q14 0 25 11t10 25z m786-643v72q0 14-11 25t-25 10h-71q-15 0-25-10t-11-25v-72q0-14 11-25t25-11h71q15 0 25 11t11 25z m-214 429v285q0 15-11 26t-25 10h-429q-14 0-25-10t-10-26v-285q0-15 10-25t25-11h429q15 0 25 11t11 25z m214-215v72q0 14-11 25t-25 11h-71q-15 0-25-11t-11-25v-72q0-14 11-25t25-10h71q15 0 25 10t11 25z m0 215v71q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-71q0-15 11-25t25-11h71q15 0 25 11t11 25z m0 214v71q0 15-11 26t-25 10h-71q-15 0-25-10t-11-26v-71q0-14 11-25t25-11h71q15 0 25 11t11 25z m71 89v-750q0-37-26-63t-63-26h-893q-36 0-63 26t-26 63v750q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
 
-<glyph glyph-name="off" unicode="&#xe80a;" d="M857 350q0-87-34-166t-91-137-137-92-166-34-167 34-136 92-92 137-34 166q0 102 45 191t126 151q24 18 54 14t46-28q18-23 14-53t-28-47q-54-41-84-101t-30-127q0-58 23-111t61-91 91-61 111-23 110 23 92 61 61 91 22 111q0 68-30 127t-84 101q-23 18-28 47t14 53q17 24 47 28t53-14q81-61 126-151t45-191z m-357 429v-358q0-29-21-50t-50-21-51 21-21 50v358q0 29 21 50t51 21 50-21 21-50z" horiz-adv-x="857.1" />
+<glyph glyph-name="upload" unicode="&#xe80a;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
 
-<glyph glyph-name="video" unicode="&#xe80b;" d="M214-43v72q0 14-10 25t-25 10h-72q-14 0-25-10t-11-25v-72q0-14 11-25t25-11h72q14 0 25 11t10 25z m0 214v72q0 14-10 25t-25 11h-72q-14 0-25-11t-11-25v-72q0-14 11-25t25-10h72q14 0 25 10t10 25z m0 215v71q0 15-10 25t-25 11h-72q-14 0-25-11t-11-25v-71q0-15 11-25t25-11h72q14 0 25 11t10 25z m572-429v286q0 14-11 25t-25 11h-429q-14 0-25-11t-10-25v-286q0-14 10-25t25-11h429q15 0 25 11t11 25z m-572 643v71q0 15-10 26t-25 10h-72q-14 0-25-10t-11-26v-71q0-14 11-25t25-11h72q14 0 25 11t10 25z m786-643v72q0 14-11 25t-25 10h-71q-15 0-25-10t-11-25v-72q0-14 11-25t25-11h71q15 0 25 11t11 25z m-214 429v285q0 15-11 26t-25 10h-429q-14 0-25-10t-10-26v-285q0-15 10-25t25-11h429q15 0 25 11t11 25z m214-215v72q0 14-11 25t-25 11h-71q-15 0-25-11t-11-25v-72q0-14 11-25t25-10h71q15 0 25 10t11 25z m0 215v71q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-71q0-15 11-25t25-11h71q15 0 25 11t11 25z m0 214v71q0 15-11 26t-25 10h-71q-15 0-25-10t-11-26v-71q0-14 11-25t25-11h71q15 0 25 11t11 25z m71 89v-750q0-37-26-63t-63-26h-893q-36 0-63 26t-26 63v750q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
+<glyph glyph-name="minus" unicode="&#xe80b;" d="M786 439v-107q0-22-16-38t-38-15h-678q-23 0-38 15t-16 38v107q0 23 16 38t38 16h678q23 0 38-16t16-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="colon" unicode="&#xe80c;" d="M0 526c0 53 43 97 98 97 53 0 97-44 97-97 0-55-44-98-97-98-55 0-98 43-98 98z m0-352c0 54 43 98 98 98 53 0 97-44 97-98 0-55-44-97-97-97-55 0-98 42-98 97z" horiz-adv-x="195" />
+
+<glyph glyph-name="pi" unicode="&#xe80d;" d="M714 557q15-15 15-37t-15-37q-58-58-141-74l0-292q0-22-15-37t-37-16-37 16-15 37l0 292q-84 16-141 74-30 30-68 41l0-407q0-22-15-37t-36-16-37 16-16 37l0 407q-37-11-67-41-15-15-37-15t-37 15-15 37 15 37q80 80 193 80t193-80q50-50 120-50t119 50q15 15 37 15t37-15z" horiz-adv-x="729" />
+
+<glyph glyph-name="list-alt" unicode="&#xe80e;" d="M214 189v-35q0-8-5-13t-13-5h-35q-7 0-13 5t-5 13v35q0 8 5 13t13 5h35q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-5h-35q-7 0-13 5t-5 12v36q0 7 5 13t13 5h35q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-6h-35q-7 0-13 6t-5 12v36q0 7 5 13t13 5h35q8 0 13-5t5-13z m643-286v-35q0-8-5-13t-13-5h-535q-8 0-13 5t-5 13v35q0 8 5 13t13 5h535q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-5h-535q-8 0-13 5t-5 12v36q0 7 5 13t13 5h535q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-6h-535q-8 0-13 6t-5 12v36q0 7 5 13t13 5h535q8 0 13-5t5-13z m72-393v464q0 8-6 13t-12 5h-822q-7 0-12-5t-6-13v-464q0-7 6-12t12-6h822q7 0 12 6t6 12z m71 607v-607q0-37-26-63t-63-26h-822q-36 0-63 26t-26 63v607q0 37 26 63t63 27h822q37 0 63-27t26-63z" horiz-adv-x="1000" />
+
+<glyph glyph-name="resize-vertical" unicode="&#xe80f;" d="M393 671q0-14-11-25t-25-10h-71v-572h71q15 0 25-10t11-25-11-25l-143-143q-10-11-25-11t-25 11l-143 143q-10 10-10 25t10 25 25 10h72v572h-72q-14 0-25 10t-10 25 10 26l143 142q11 11 25 11t25-11l143-142q11-11 11-26z" horiz-adv-x="428.6" />
 
 <glyph glyph-name="math" unicode="&#xf01a;" d="M0 472q0 31 24 54t57 22h215l164-249 89 519h306q34 0 58-22t24-54-24-55-58-22h-170l-136-784-343 516h-125q-33 0-57 22t-24 53z" horiz-adv-x="937.5" />
 

system/author/css/style.css

@@ -1440,13 +1440,17 @@ label .help, .label .help{
 	position: relative;
 }
 .editactive .sideaction button, 
-.blox-wrapper:hover button{
+.blox-wrapper:hover button.add,
+.blox-wrapper:hover button.delete{
 	background-color: #f9f8f6;
 	color: #666;
 }
 .sideaction:hover ~ .background-helper {
     background-color: #f9f8f6;
 }
+.editactive .background-helper{
+	background-color: transparent!important;
+}
 .blox-wrapper button.add:hover{
 	background: #66b0a3;
 	color: #fff;
@@ -1471,10 +1475,48 @@ label .help, .label .help{
 	box-shadow: none;
 	outline: none;
 }
-.blox-editor input.mdcontent{
-	font-size: 1.4em;
+.blox-editor input.mdcontent.h2,.blox-editor input.mdcontent.h3,.blox-editor input.mdcontent.h4,.blox-editor input.mdcontent.h5,.blox-editor input.mdcontent.h6{
+	padding-left: 35px;
+}
+.blox-editor input.mdcontent.h2{
+	font-size: 1.6em;
+	font-weight: 700;
+}
+.blox-editor input.mdcontent.h3{
+	font-size: 1.3em;
+	font-weight: 700;
+}
+.blox-editor input.mdcontent.h4{
+	font-size: 1.1em;
+	font-weight: 700;
+}
+.blox-editor input.mdcontent.h5{
+	font-size: 1em;
+	font-weight: 700;
+}
+.blox-editor input.mdcontent.h6{
+	font-size: 1em;
+	font-weight: 300;
+	font-style: italic;
+}
+button.hdown{
+	position: absolute;
+	padding: 8px;
+	top: 1px;
+	bottom: 1px;
+	left: 0px;
+	font-size: 1em;
 	font-weight: 700;
+	background: #f9f8f6;
+	border: 0px solid #fff;
+	border-right: 1px solid #fff;
+	color: #66b0a3;
 }
+button.hdown:hover,button.hdown:focus,button.hdown:active{
+	color: #f9f8f6;
+	background: #66b0a3; 
+}
+
 .blox-editor .contenttype {
 	position: absolute;
 	top: 15px;
@@ -1707,7 +1749,71 @@ button.format-item.close:hover{
 	content: ":";
 }
 .blox dd{
-	width: 80%
+	padding-left: 40px;
+}
+.definitionList{
+	background: #f9f8f6;
+}
+.definitionRow{
+	width: 100%;
+	display: block;
+	padding: 20px 20px 0 20px;
+	box-sizing: border-box;
+}
+.definitionRow .icon-colon{
+	display: inline-block;
+	margin-top: 15px;
+}
+input.definitionTerm{
+	width: 29%;
+	display: inline-block;
+	vertical-align: top;
+	background: #fff;
+}
+textarea.definitionDescription{
+	width: 60%;
+	display: inline-block;
+	vertical-align: top;
+	background: #fff;
+}
+button.addDL,
+button.delDL{
+	display: inline-block;
+	vertical-align: top;
+	font-weight: 300;
+	font-size: 0.8em;
+	height: 20px;
+	line-height: 20px;
+	border: 0px;
+	background: transparent;
+}
+button.addDL i,
+button.delDL i{
+	width: 20px;
+	border-radius: 1px;
+	text-align: center;
+	color:#f9f8f6;
+	padding: 2px 0 0;
+	line-height: 20px;
+	height: 20px;
+}
+button.addDL{
+	margin: 20px;
+}
+button.addDL i{
+	background: #70c1b3;
+}
+button.addDL i:hover{
+	background:#66b0a3;
+}
+button.delDL i{
+	background: #e0474c;
+}
+button.delDL i:hover{
+	background: #cc4146;
+}
+i.icon-resize-vertical{
+	color: #ddd;
 }
 .blox ul, .blox ol{ 
 	padding-left: 0px;
@@ -1736,13 +1842,11 @@ button.format-item.close:hover{
 	margin-left: 50px;
 }
 .dropbox{
-//	position: relative;
 	min-height: 70px;
 	background: #f9f8f6;
 	padding: 0px;
 	box-sizing: border-box;
-	margin-bottom: 10px;
-	box-shadow: 0 0 2px #000; 
+	margin-bottom: 10px; 
 }
 .dropbox p{
 	position: relative;

system/author/editor/editor-blox-orig.twig

@@ -1,54 +0,0 @@
-{% extends 'layouts/layoutBlox.twig' %}
-{% block title %}Visual Content Editor{% endblock %}
-
-{% block content %}
-	
-	<div class="formWrapper">
-		
-		<section id="blox">
-			
-			<div class="blox-body">
-			
-				<content-block class="title" :body="false">
-					<div class="blox title" @click.prevent="setData( $event )" data-id="0" id="blox-0">{{ title }}</div>
-				</content-block>
-
-				<div id="sortblox">
-				
-					{% for id, block in content %}
-						<content-block :body="true">
-							<div class="blox" @click.prevent="setData( $event )" data-id="{{ id }}" id="blox-{{id}}">{{block}}</div>
-						</content-block>
-					{% endfor %}
-
-					<content-block :body="true" v-for="newBlock in newBlocks"><div class="blox" @click.prevent="setData( $event )" :data-id="newBlock.id" :id="newBlock.blockId" v-html="newBlock.content"></div></content-block>
-				
-				</div>
-				
-				<div class="format-bar">
-					<content-block :body="false">
-						<button class="format-item" @click.prevent="setData( $event, 'markdown-component' )" data-id="99999" id="blox-99999"><i class="icon-paragraph"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'headline-component' )" data-id="99999" id="blox-99999"><i class="icon-header"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'ulist-component' )" data-id="99999" id="blox-99999"><i class="icon-list-bullet"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'olist-component' )" data-id="99999" id="blox-99999"><i class="icon-list-numbered"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'image-component' )" data-id="99999" id="blox-99999"><i class="icon-picture"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'video-component' )" data-id="99999" id="blox-99999"><i class="icon-youtube-play"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'table-component' )" data-id="99999" id="blox-99999"><i class="icon-table"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'quote-component' )" data-id="99999" id="blox-99999"><i class="icon-quote-left"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'code-component' )" data-id="99999" id="blox-99999"><i class="icon-code"></i></button>
-				<!--	<button class="format-item" @click.prevent="setData( $event, 'math-component' )" data-id="99999" id="blox-99999"><i class="icon-math"></i></button>  -->
-					</content-block>
-				</div>
-				
-			</div>
-			
-		</section>
-
-		{% include 'editor/publish-controller.twig' %}
-				
-		<input id="path" type="hidden" value="{{ item.urlRel }}" required readonly />
-		{{ csrf_field() | raw }}
-		
-	</div>
-	
-{% endblock %}

system/author/editor/editor-blox.twig

@@ -9,7 +9,7 @@
 			
 			<div class="blox-body">
 			
-				<transition name="fade">
+				<transition name="fade" v-cloak>
 					<div v-if="bloxOverlay" class="blox-overlay"></div>
 				</transition>
 				
@@ -24,24 +24,28 @@
 				</div>
 				
 				<content-block class="title" :body="false">
-					<div class="blox title" @click.prevent="setData( $event )" data-id="0" id="blox-0" v-if="title" v-html="title"></div>
+					<div class="blox title" @click.prevent="setData( $event )" data-id="0" id="blox-0" v-if="title" v-html="title.html"></div>
 				</content-block>
 				
 				<div id="sortblox" v-cloak>
-					<content-block :body="true" v-for="(block,index) in html" v-if="index !== 0">
-						<div v-if="block" class="blox" @click.prevent="setData( $event )" :data-id="index" :id="'blox-' + index" v-html="block"></div>
-						<div v-else class="format-bar blox" @click.prevent="clearData( $event )" :data-id="index" :id="'blox-' + index">
-							<button class="format-item" @click.prevent="setData( $event, 'markdown-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-paragraph"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'headline-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-header"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'ulist-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-list-bullet"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'olist-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-list-numbered"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'image-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-picture"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'video-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-youtube-play"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'table-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-table"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'quote-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-quote-left"></i></button>
-							<button class="format-item" @click.prevent="setData( $event, 'code-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-code"></i></button>
-						</div>
-					</content-block>
+					<draggable v-model="html" @start="onStart" @end="moveBlock" :disabled="sortdisabled" :animation="150">
+						<content-block :body="true" v-for="(block, index) in html" v-if="index !== 0">
+							<div v-if="block" class="blox" :key="block.id" @click.prevent="setData( $event )" :data-id="index" :id="'blox-' + index" v-html="block.html"></div>
+							<div v-else class="format-bar blox" @click.prevent="clearData( $event )" :data-id="index" :id="'blox-' + index">
+								<button class="format-item" @click.prevent="setData( $event, 'markdown-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-paragraph"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'headline-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-header"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'ulist-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-list-bullet"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'olist-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-list-numbered"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'image-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-picture"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'video-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-youtube-play"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'table-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-table"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'quote-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-quote-left"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'definition-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-colon"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'hr-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-minus"></i></button>
+								<button class="format-item" @click.prevent="setData( $event, 'code-component' )" :data-id="index" :id="'blox-' + index"><i class="icon-code"></i></button>
+							</div>
+						</content-block>
+					</draggable>
 				</div>
 	
 				<div class="format-bar">
@@ -54,6 +58,8 @@
 						<button class="format-item" @click.prevent="setData( $event, 'video-component' )" data-id="99999" id="blox-99999"><i class="icon-youtube-play"></i></button>
 						<button class="format-item" @click.prevent="setData( $event, 'table-component' )" data-id="99999" id="blox-99999"><i class="icon-table"></i></button>
 						<button class="format-item" @click.prevent="setData( $event, 'quote-component' )" data-id="99999" id="blox-99999"><i class="icon-quote-left"></i></button>
+						<button class="format-item" @click.prevent="setData( $event, 'definition-component' )" data-id="99999" id="blox-99999"><i class="icon-colon"></i></button>
+						<button class="format-item" @click.prevent="setData( $event, 'hr-component' )" data-id="99999" id="blox-99999"><i class="icon-minus"></i></button>
 						<button class="format-item" @click.prevent="setData( $event, 'code-component' )" data-id="99999" id="blox-99999"><i class="icon-code"></i></button>
 				<!--	<button class="format-item" @click.prevent="setData( $event, 'math-component' )" data-id="99999" id="blox-99999"><i class="icon-math"></i></button>  -->
 					</content-block>

system/author/js/vue-blox-inline.js

@@ -1,1312 +0,0 @@
-const eventBus = new Vue();
-
-const contentComponent = Vue.component('content-block', {
-	props: ['body', 'load'],
-	template: '<div ref="bloxcomponent" class="blox-editor">' +
-				'<div class="blox-wrapper" :class="{ editactive: edit }">' +
-				 '<div class="sideaction" v-if="body">' + 
-				  '<button class="add" :disabled="disabled" title="add content-block" @click.prevent="showFormats($event)"><i class="icon-plus"></i></button>' +
-				  '<button class="delete" :disabled="disabled" title="delete content-block" @click.prevent="deleteBlock($event)"><i class="icon-cancel"></i></button>' +
-				 '</div>' + 
-				 '<div class="background-helper" @keyup.enter="submitBlock" @click="getData">' +
-				  '<div class="component" ref="component">' +
-				   '<transition name="fade-editor">' +
-				    '<component :disabled="disabled" :compmarkdown="compmarkdown" @updatedMarkdown="updateMarkdown" :is="componentType"></component>' +
-				   '</transition>' +
-				   '<div class="blox-buttons" v-if="edit">' + 
-				    '<button class="edit" :disabled="disabled" @click.prevent="saveBlock">save</button>' +
-				    '<button class="cancel" :disabled="disabled" @click.prevent="switchToPreviewMode">cancel</button>' +
-				   '</div>' + 
-				  '</div>' + 
-				  '<div :class="preview" ref="preview"><slot name="default"></slot></div>' + 
-				 '</div>' +
-				'</div>' + 
-				'<div v-if="load" class="loadoverlay"><span class="load"></span></div>' +
-			  '</div>',	
-	data: function () {
-		return {
-			preview: 'visible',
-			edit: false,
-			compmarkdown: '',
-			componentType: '',
-			disabled: false,
-			load: false,
-			showformat: false,
-		}
-	},
-	mounted: function()
-	{
-		eventBus.$on('closeComponents', this.closeComponents);
-	},
-	methods: {
-		showFormats: function(event)
-		{
-			this.switchToPreviewMode();
-			this.showformat = true;
-		},
-		hideFormats: function(event)
-		{
-			this.showformat = false;
-		},
-		addBlock: function(event,blocktype)
-		{
-			this.showformat = false;
-						
-			/* we have to get from dom because block-data might not be set when user clicked on add button before opened the component */
-			var bloxeditor = event.target.closest('.blox-editor');
-			var bloxid = bloxeditor.getElementsByClassName('blox')[0].dataset.id;
-			
-			/* add kind of content you like */
-			var defaults = {
-				'paragraph': 'New paragraph',
-				'headline': '## New headline',
-				'ulist': '* New list',
-				'olist': '1. New list',
-				'image': '![Alternative Text]()',
-				'video': 'New video',
-				'table': '|head|head|\n|---|---|\n|cell|cell|',
-				'quote': '> New quote',
-				'code': '````\b New code\b````'
-			};
-						
-			/* store the content with id here */
-			this.compmarkdown = defaults[blocktype];
-			this.$root.$data.blockId = bloxid;
-			this.$root.$data.newblock = true;
-			this.saveBlock();
-		},
-		updateMarkdown: function($event)
-		{
-			this.compmarkdown = $event;
-			this.$nextTick(function () {
-				this.$refs.preview.style.minHeight = this.$refs.component.offsetHeight + 'px';
-			});			
-		},
-		switchToEditMode: function()
-		{
-			if(this.edit){ return; }
-			eventBus.$emit('closeComponents');
-			self = this;
-			self.$root.$data.freeze = true; 						/* freeze the data */
-			self.$root.sortable.option("disabled",true);			/* disable sorting */
-			this.preview = 'hidden'; 								/* hide the html-preview */
-			this.edit = true;										/* show the edit-mode */
-			this.compmarkdown = self.$root.$data.blockMarkdown;		/* get markdown data */
-			this.componentType = self.$root.$data.blockType;		/* get block-type of element */
-			if(this.componentType == 'image-component')
-			{
-				setTimeout(function(){ 
-					self.$nextTick(function () 
-					{
-						self.$refs.preview.style.minHeight = self.$refs.component.offsetHeight + 'px';
-					});
-				}, 200);				
-			}
-			else
-			{
-				this.$nextTick(function () 
-				{
-					this.$refs.preview.style.minHeight = self.$refs.component.offsetHeight + 'px';
-				});				
-			}
-		},
-		closeComponents: function()
-		{
-			this.preview = 'visible';
-			this.edit = false;
-			this.componentType = false;
-			if(this.$refs.preview)
-			{
-				this.$refs.preview.style.minHeight = "auto";
-			}
-		},
-		switchToPreviewMode: function()
-		{
-			self = this;
-			self.$root.$data.freeze = false;						/* activate the data again */
-			self.$root.sortable.option("disabled",false);			/* activate sorting again */
-			this.preview = 'visible';								/* show the html-preview */
-			this.edit = false;										/* hide the edit mode */
-			this.compmarkdown = '';									/* clear markdown content */
-			this.componentType = false;								/* delete the component type */
-			self.$root.$data.blockType = false;
-			self.$root.$data.blockMarkdown = false;
-			self.$root.$data.file = false;
-			publishController.errors.message = false;				/* delete all error messages */
-			this.$refs.preview.style.minHeight = "auto";
-		},
-		freezePage: function()
-		{
-			this.disabled = 'disabled';
-			this.load = true;
-			publishController.errors.message = false;
-			publishController.publishDisabled = true;
-			var self = this;
-			self.$root.$data.freeze = true;
-		},
-		activatePage: function()
-		{
-			this.disabled = false;
-			this.load = false;
-			publishController.publishDisabled = false;
-		},
-		getData: function()
-		{
-			self = this;
-			if(self.$root.$data.blockType != '')
-			{
-				this.switchToEditMode();
-			}
-		},
- 		submitBlock: function(){
-			var emptyline = /^\s*$(?:\r\n?|\n)/gm;
-			if(this.componentType == "code-component"){ }
-			else if(this.componentType == "ulist-component" || this.componentType == "olist-component")
-			{
-				var listend = (this.componentType == "ulist-component") ? '* \n' : '1. \n';
-				var liststyle = (this.componentType == "ulist-component") ? '* ' : '1. ';
-				
-				if(this.compmarkdown.endsWith(listend))
-				{
-					this.compmarkdown = this.compmarkdown.replace(listend, '');
-					this.saveBlock();
-				}
-				else
-				{
-					var mdtextarea 		= document.getElementsByTagName('textarea');
-					var start 			= mdtextarea[0].selectionStart;
-					var end 			= mdtextarea[0].selectionEnd;
-					
-					this.compmarkdown 	= this.compmarkdown.substr(0, end) + liststyle + this.compmarkdown.substr(end);
-
-					mdtextarea[0].focus();
-					if(mdtextarea[0].setSelectionRange)
-					{
-						setTimeout(function(){
-							var spacer = (this.componentType == "ulist-component") ? 2 : 3;
-							mdtextarea[0].setSelectionRange(end+spacer, end+spacer);
-						}, 1);
-					}
-				}
-			}
-			else if(this.compmarkdown.search(emptyline) > -1)
-			{
-				var checkempty = this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"");
-				if(checkempty == '')
-				{
-					this.switchToPreviewMode();
-				}
-				else
-				{
-					this.saveBlock();
-				}
-			}
-		},
-		saveBlock: function()
-		{			
-			if(this.compmarkdown == undefined || this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"") == '')
-			{
-				this.switchToPreviewMode();	
-			}
-			else
-			{
-				this.freezePage();
-
-				var self = this;
-				
-				var compmarkdown = this.compmarkdown.split('\n\n').join('\n');
-				var params = {
-					'url':				document.getElementById("path").value,
-					'markdown':			compmarkdown,
-					'block_id':			self.$root.$data.blockId,
-					'csrf_name': 		document.getElementById("csrf_name").value,
-					'csrf_value':		document.getElementById("csrf_value").value,
-				};
-
-				if(this.componentType == 'image-component' && self.$root.$data.file)
-				{
-					var url = self.$root.$data.root + '/api/v1/image';
-					var method 	= 'PUT';
-				}
-				else if(this.componentType == 'video-component')
-				{
-					var url = self.$root.$data.root + '/api/v1/video';
-					var method = 'POST';
-				}
-				else if(self.$root.$data.newblock || self.$root.$data.blockId == 99999)
-				{
-					var url = self.$root.$data.root + '/api/v1/block';
-					var method = 'POST';
-				}
-				else
-				{
-					var url = self.$root.$data.root + '/api/v1/block';
-					var method 	= 'PUT';
-				}
-				
-				sendJson(function(response, httpStatus)
-				{
-					if(httpStatus == 400)
-					{
-						self.activatePage();
-						publishController.errors.message = "Looks like you are logged out. Please login and try again.";
-					}
-					else if(response)					
-					{
-						self.activatePage();
-
-						var result = JSON.parse(response);
-									
-						if(result.errors)
-						{
-							publishController.errors.message = result.errors.message;
-						}
-						else
-						{
-							self.switchToPreviewMode();
-							
-							if(self.$root.$data.blockId == 99999)
-							{
-								self.$root.$data.markdown.push(result.markdown);
-								self.$root.$data.html.push(result.content);
-								
-								self.$root.$data.blockMarkdown = '';
-								self.$root.$data.blockType = 'markdown-component';
-								self.getData();
-								var textbox = document.querySelectorAll('textarea')[0];
-								if(textbox){ textbox.style.height = "70px"; }
-							}
-							else if(self.$root.$data.newblock)
-							{
-								self.$root.$data.html.splice(result.id,0,result.content);
-								self.$root.$data.markdown.splice(result.id,0,result.markdown);								
-								
-								self.$root.$data.newblock = false;
-								self.$root.$data.blockMarkdown = '';
-								self.$root.$data.blockType = '';								
-							}
-							else
-							{
-								self.$root.$data.markdown[result.id] = result.markdown;
-
-								self.$root.$data.html[result.id] = result.content;
-								document.getElementById('blox-'+result.id).innerHTML = result.content;
-								
-								self.$root.$data.blockMarkdown = '';
-								self.$root.$data.blockType = '';
-							}
-						}
-					}
-					else if(httpStatus != 200)
-					{
-						self.activatePage();
-						publishController.errors.message = "Sorry, something went wrong. Please refresh the page and try again.";
-					}					
-				}, method, url, params);
-			}
-		},
-		deleteBlock: function(event)
-		{	
-			this.freezePage();
-			
-			var bloxeditor = event.target.closest('.blox-editor');
-			
-			var bloxid = bloxeditor.getElementsByClassName('blox')[0].dataset.id;
-			// bloxeditor.firstChild.id = "delete-"+bloxid;
-
-			var self = this;
-			
-			var url = self.$root.$data.root + '/api/v1/block';
-			
-			var params = {
-				'url':				document.getElementById("path").value,
-				'block_id':			bloxid,
-				'csrf_name': 		document.getElementById("csrf_name").value,
-				'csrf_value':		document.getElementById("csrf_value").value,
-			};
-			
-			var method 	= 'DELETE';
-			
-			sendJson(function(response, httpStatus)
-			{
-				if(httpStatus == 400)
-				{
-					self.activatePage();
-				}
-				if(response)
-				{
-					self.activatePage();
-					
-					var result = JSON.parse(response);
-
-					if(result.errors)
-					{
-						publishController.errors.message = result.errors;
-					}
-					else
-					{	
-						self.switchToPreviewMode();
-						
-						self.$root.$data.html.splice(bloxid,1);
-						self.$root.$data.markdown.splice(bloxid,1);						
-						self.$root.$data.blockMarkdown = '';
-						self.$root.$data.blockType = '';
-					}
-				}
-			}, method, url, params);
-		},
-	},
-})
-
-const formatComponent = Vue.component('format-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<transition name="fade">' +
-			      '<div class="formatbuttons" v-if="showformat">' +
-					'<button class="format-item disabled" disabled>add new block:</button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'paragraph\')" ><i class="icon-paragraph"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'headline\')"><i class="icon-header"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'ulist\')"><i class="icon-list-bullet"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'olist\')"><i class="icon-list-numbered"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'image\')"><i class="icon-picture"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'video\')"><i class="icon-youtube-play"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'table\')"><i class="icon-table"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'quote\')"><i class="icon-quote-left"></i></button>' +
-					'<button class="format-item" @click.prevent="addBlock($event, \'code\')"><i class="icon-code"></i></button>' +
-					'<button class="format-item close" @click.prevent="hideFormats()">close</button>' +
-			      '</div>' +
-				'</transition>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		autosize(document.querySelectorAll('textarea'));
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const titleComponent = Vue.component('title-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div><input type="text" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown"></div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		autosize(document.querySelectorAll('textarea'));
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const markdownComponent = Vue.component('markdown-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-paragraph"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown"></textarea>' + 
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		autosize(document.querySelectorAll('textarea'));
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const codeComponent = Vue.component('code-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
-				'<div class="contenttype"><i class="icon-code"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="codeblock" :disabled="disabled" @input="createmarkdown"></textarea>' + 
-				'</div>',
-	data: function(){
-		return {
-			codeblock: ''
-		}
-	},
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(this.compmarkdown)
-		{
-			var codeblock = this.compmarkdown.replace("````\n", "");
-			codeblock = codeblock.replace("```\n", "");
-			codeblock = codeblock.replace("\n````", "");
-			codeblock = codeblock.replace("\n```", "");
-			codeblock = codeblock.replace("\n\n", "\n");
-			this.codeblock = codeblock;
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});	
-	},
-	methods: {
-		createmarkdown: function(event)
-		{
-			this.codeblock = event.target.value;
-			var codeblock = '````\n' + event.target.value + '\n````';
-			this.updatemarkdown(codeblock);
-		},
-		updatemarkdown: function(codeblock)
-		{
-			this.$emit('updatedMarkdown', codeblock);
-		},
-	},
-})
-
-const quoteComponent = Vue.component('quote-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
-				'<div class="contenttype"><i class="icon-quote-left"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="quote" :disabled="disabled" @input="createmarkdown"></textarea>' + 
-				'</div>',
-	data: function(){
-		return {
-			quote: ''
-		}
-	},
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(this.compmarkdown)
-		{
-			var quote = this.compmarkdown.replace("> ", "");
-			quote = this.compmarkdown.replace(">", "");
-			this.quote = quote;
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});	
-	},
-	methods: {
-		createmarkdown: function(event)
-		{
-			this.quote = event.target.value;
-			var quote = '> ' + event.target.value;
-			this.updatemarkdown(quote);
-		},
-		updatemarkdown: function(quote)
-		{
-			this.$emit('updatedMarkdown', quote);
-		},
-	},
-})
-
-const ulistComponent = Vue.component('ulist-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-list-bullet"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown"></textarea>' + 
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(!this.compmarkdown)
-		{
-			this.compmarkdown = '* ';
-		}
-		else
-		{
-			var lines = this.compmarkdown.split("\n");
-			var length = lines.length
-			var md = '';
-
-			for(i = 0; i < length; i++)
-			{
-				var clean = lines[i];
-				clean = clean.replace(/^- /, '* ');
-				clean = clean.replace(/^\+ /, '* ');
-				if(i == length-1)
-				{
-					md += clean;
-				}
-				else
-				{
-					md += clean + '\n';
-				}
-			}
-			this.compmarkdown = md;
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});	
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const olistComponent = Vue.component('olist-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-list-numbered"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown"></textarea>' + 
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(!this.compmarkdown)
-		{
-			this.compmarkdown = '1. ';
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const headlineComponent = Vue.component('headline-component', { 
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-header"></i></div>' +
-				'<input class="mdcontent" type="text" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(!this.compmarkdown)
-		{
-			this.compmarkdown = '## ';
-		}
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const tableComponent = Vue.component('table-component', { 
-	props: ['compmarkdown', 'disabled'],
-	data: function(){
-		return {
-			table: [
-				['0', '1', '2'],
-				['1', 'Head', 'Head'],
-				['2', 'cell', 'cell'],
-				['3', 'cell', 'cell'],
-			],
-			editable: 'editable',
-			noteditable: 'noteditable',
-			cellcontent: '',
-			columnbar: false,
-			rowbar: false,
-			tablekey: 1,
-		}
-	},
-	template: '<div ref="table" :key="tablekey">' + 
-				'<div class="contenttype"><i class="icon-table"></i></div>' +
-				'<table ref="markdown">' +
-					'<colgroup>' +
-						'<col v-for="col in table[0]">' +
-					'</colgroup>' +
-					'<tbody>' +
-						'<tr v-for="(row, rowindex) in table">' +
-							'<td v-if="rowindex === 0" v-for="(value,colindex) in row" contenteditable="false" class="noteditable" @click="switchcolumnbar(value)">{{value}} ' +
-							  '<div v-if="columnbar === value" class="columnaction">' + 
-							     '<div class="actionline" @click="addrightcolumn(value)">add right column</div>' +
-								 '<div class="actionline" @click="addleftcolumn(value)">add left column</div>' +
-								 '<div class="actionline" @click="deletecolumn(value)">delete column</div>' +
-							  '</div>' +
-							'</td>' +
-							'<th v-if="rowindex === 1" v-for="(value,colindex) in row" :contenteditable="colindex !== 0 ? true : false" @click="switchrowbar(value)" @blur="updatedata($event,colindex,rowindex)" :class="colindex !== 0 ? editable : noteditable">' + 
-							 '<div v-if="colindex === 0 && rowbar === value" class="rowaction">' + 
-							     '<div class="actionline" @click="addaboverow(value)">add row above</div>' +
-								 '<div class="actionline" @click="addbelowrow(value)">add row below</div>' +
-								 '<div class="actionline" @click="deleterow(value)">delete row</div>' +
-							  '</div>' + 
-							'{{value}}</th>' +
-							'<td v-if="rowindex > 1" v-for="(value,colindex) in row" :contenteditable="colindex !== 0 ? true : false" @click="switchrowbar(value)" @blur="updatedata($event,colindex,rowindex)" :class="colindex !== 0 ? editable : noteditable">' + 
-							 '<div v-if="colindex === 0 && rowbar === value" class="rowaction">' + 
-							     '<div class="actionline" @click="addaboverow(value)">add row above</div>' +
-								 '<div class="actionline" @click="addbelowrow(value)">add row below</div>' +
-								 '<div class="actionline" @click="deleterow(value)">delete row</div>' +
-							  '</div>' +
-							'{{ value }}</td>' +
-						'</tr>' +
-					'</tbody>' +
-				'</table>' +
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(this.compmarkdown)
-		{
-			var table = [];
-			var lines = this.compmarkdown.split("\n");
-			var length = lines.length
-			var c = 1;
-			
-			for(i = 0; i < length; i++)
-			{
-				if(i == 1){ continue }
-				
-				var line = lines[i].trim();
-				var row = line.split("|").map(function(cell){
-					return cell.trim();
-				});
-				if(row[0] == ''){ row.shift() }
-				if(row[row.length-1] == ''){ row.pop() }
-				if(i == 0)
-				{
-					var rlength = row.length;
-					var row0 = [];
-					for(y = 0; y <= rlength; y++) { row0.push(y) }
-					table.push(row0);
-				}
-				row.splice(0,0,c);
-				c++;
-				table.push(row);
-			}
-			this.table = table;
-		}
-	},
-	methods: {
-		updatedata: function(event,col,row)
-		{
-			this.table[row][col] = event.target.innerText;			
-			this.markdowntable();
-		},
-		switchcolumnbar(value)
-		{
-			this.rowbar = false;
-			(this.columnbar == value || value == 0) ? this.columnbar = false : this.columnbar = value;
-		},
-		switchrowbar(value)
-		{
-			this.columnbar = false;
-			(this.rowbar == value || value == 0 || value == 1 )? this.rowbar = false : this.rowbar = value;
-		},
-		addaboverow: function(index)
-		{
-			var row = [];
-			var cols = this.table[0].length;
-			for(var i = 0; i < cols; i++){ row.push("new"); }
-			this.table.splice(index,0,row);
-			this.reindexrows();
-		},
-		addbelowrow: function(index)
-		{
-			var row = [];
-			var cols = this.table[0].length;
-			for(var i = 0; i < cols; i++){ row.push("new"); }
-			this.table.splice(index+1,0,row);
-			this.reindexrows();
-		},
-		deleterow: function(index)
-		{
-			this.table.splice(index,1);
-			this.reindexrows();
-		},
-		addrightcolumn: function(index)
-		{
-			var tableLength = this.table.length;
-			for (var i = 0; i < tableLength; i++)
-			{
-				this.table[i].splice(index+1,0,"new");
-			}
-			this.reindexcolumns();
-		},
-		addleftcolumn: function(index)
-		{
-			var tableLength = this.table.length;
-			for (var i = 0; i < tableLength; i++)
-			{
-				this.table[i].splice(index,0,"new");
-			}
-			this.reindexcolumns();
-		},
-		deletecolumn: function(index)
-		{
-			var tableLength = this.table.length;
-			for (var i = 0; i < tableLength; i++)
-			{
-				this.table[i].splice(index,1);
-			}
-			this.reindexcolumns();
-		},
-		reindexrows: function()
-		{
-			var tableRows = this.table.length;
-			for (var i = 0; i < tableRows; i++)
-			{
-				Vue.set(this.table[i], 0, i);
-			}
-			this.tablekey +=1;
-			this.markdowntable();
-		},
-		reindexcolumns: function()
-		{
-			var tableColumns = this.table[0].length;
-			for (var i = 0; i < tableColumns; i++)
-			{
-				Vue.set(this.table[0], i, i);
-			}
-			this.tablekey +=1;
-			this.markdowntable();
-		},
-		markdowntable: function()
-		{
-			var markdown = '';
-			var separator = '\n|';
-			var rows = this.table.length;
-			var cols = this.table[0].length;
-			
-			for(var i = 0; i < cols; i++)
-			{
-				if(i == 0){ continue; }
-				separator += '---|';
-			}
-			
-			for(var i = 0; i < rows; i++)
-			{
-				var row = this.table[i];
-
-				if(i == 0){ continue; }
-				
-				for(var y = 0; y < cols; y++)
-				{					
-					if(y == 0){ continue; }
-					
-					var value = row[y].trim();
-					
-					if(y == 1)
-					{
-						markdown += '\n| ' + value + ' | ';
-					}
-					else
-					{
-						markdown += value + ' | ';
-					}
-				}
-				if(i == 1) { markdown = markdown + separator; }
-			}
-			this.$emit('updatedMarkdown', markdown);
-		},
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const videoComponent = Vue.component('video-component', {
-	props: ['compmarkdown', 'disabled', 'load'],
-	template: '<div class="video dropbox">' +
-				'<div class="contenttype"><i class="icon-youtube-play"></i></div>' +
-				'<label for="video">Link to video: </label><input type="url" ref="markdown" placeholder="https://www.youtube.com/watch?v=" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
-				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
-				'</div>',
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const imageComponent = Vue.component('image-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div class="dropbox">' +
-				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +
-				'<input type="file" name="image" accept="image/*" class="input-file" @change="onFileChange( $event )" /> ' +
-				'<p>drag a picture or click to select</p>' +
-				'<div class="contenttype"><i class="icon-picture"></i></div>' +	
-				'<img class="uploadPreview" :src="imgpreview" />' +
-				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
-				'<div class="imgmeta" v-if="imgmeta">' +
-				'<label for="imgalt">Alt-Text: </label><input name="imgalt" type="text" placeholder="alt" @input="createmarkdown" v-model="imgalt" max="100" />' +
-				'<label for="imgtitle">Title: </label><input name="imgtitle" type="text" placeholder="title" v-model="imgtitle" @input="createmarkdown" max="64" />' +
-				'<label for="imgcaption">Caption: </label><input title="imgcaption" type="text" placeholder="caption" v-model="imgcaption" @input="createmarkdown" max="140" />' +
-				'<label for="imgurl">Link: </label><input title="imgurl" type="url" placeholder="url" v-model="imglink" @input="createmarkdown" />' +
-				'<label for="imgclass">Class: </label><select title="imgclass" v-model="imgclass" @change="createmarkdown"><option value="center">Center</option><option value="left">Left</option><option value="right">Right</option><option value="youtube">Youtube</option><option value="vimeo">Vimeo</option></select>' +
-				'<input title="imgid" type="hidden" placeholder="id" v-model="imgid" @input="createmarkdown" max="140" />' +
-				'</div></div>',
-	data: function(){
-		return {
-			maxsize: 5, // megabyte
-			imgpreview: false,
-			load: false,
-			imgmeta: false,
-			imgalt: '',
-			imgtitle: '',
-			imgcaption: '',
-			imglink: '',
-			imgclass: 'center',
-			imgid: '',
-			imgfile: 'imgplchldr',
-		}
-	},
-	mounted: function(){
-		
-		this.$refs.markdown.focus();
-
-		if(this.compmarkdown)
-		{
-			this.imgmeta = true;
-			
-			var imgmarkdown = this.compmarkdown;
-									
-			var imgcaption = imgmarkdown.match(/\*.*?\*/);
-			if(imgcaption){
-				this.imgcaption = imgcaption[0].slice(1,-1);
-				imgmarkdown = imgmarkdown.replace(this.imgcaption,'');
-				imgmarkdown = imgmarkdown.replace(/\r?\n|\r/g,'');
-			}
-			
-			if(this.compmarkdown[0] == '[')
-			{
-				var imglink = this.compmarkdown.match(/\(.*?\)/g);
-				if(imglink[1])
-				{
-					this.imglink = imglink[1].slice(1,-1);
-					imgmarkdown = imgmarkdown.replace(imglink[1],'');
-					imgmarkdown = imgmarkdown.slice(1, -1);
-				}
-			}
-
-			var imgtitle = imgmarkdown.match(/\".*?\"/);
-			if(imgtitle)
-			{
-				this.imgtitle = imgtitle[0].slice(1,-1);
-				imgmarkdown = imgmarkdown.replace(imgtitle[0], '');
-			}
-			
-			var imgalt = imgmarkdown.match(/\[.*?\]/);
-			if(imgalt)
-			{
-				this.imgalt = imgalt[0].slice(1,-1);
-			}
-
-			var imgattr = imgmarkdown.match(/\{.*?\}/);
-			if(imgattr)
-			{
-				imgattr = imgattr[0].slice(1,-1);
-				imgattr = imgattr.split(' ');
-				for (var i = 0; i < imgattr.length; i++)
-				{
-					if(imgattr[i].charAt(0) == '.')
-					{
-						this.imgclass = imgattr[i].slice(1);
-					}
-					else if(imgattr[i].charAt(0)  == '#')
-					{
-						this.imgid = imgattr[i].slice(1);
-					}
-				}
-			}
-
-			var imgpreview = imgmarkdown.match(/\(.*?\)/);
-			if(imgpreview)
-			{
-				this.imgpreview = imgpreview[0].slice(1,-1);
-				this.imgfile = this.imgpreview;
-			}
-			console.info(this.imgpreview);
-			console.info(this.imgfile);
-		}
-	},
-	methods: {
-		isChecked: function(classname)
-		{
-			if(this.imgclass == classname)
-			{
-				return ' checked';
-			}
-		},
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-		createmarkdown: function()
-		{
-			var errors = false;
-			
-			if(this.imgalt.length < 101)
-			{
-				imgmarkdown = '![' + this.imgalt + ']';
-			}
-			else
-			{
-				errors = 'Maximum size of image alt-text is 100 characters';
-				imgmarkdown = '![]';
-			}
-			
-			if(this.imgtitle != '')
-			{
-				if(this.imgtitle.length < 101)
-				{
-					imgmarkdown = imgmarkdown + '(' + this.imgfile + ' "' + this.imgtitle + '")';
-				}
-				else
-				{
-					errors = 'Maximum size of image title is 100 characters';
-				}
-			}
-			else
-			{
-				imgmarkdown = imgmarkdown + '(' + this.imgfile + ')';		
-			}
-			
-			var imgattr = '';
-			if(this.imgid != '')
-			{
-				if(this.imgid.length < 100)
-				{
-					imgattr = imgattr + '#' + this.imgid + ' '; 
-				}
-				else
-				{
-					errors = 'Maximum size of image id is 100 characters';
-				}
-			}
-			if(this.imgclass != '')
-			{
-				if(this.imgclass.length < 100)
-				{
-					imgattr = imgattr + '.' + this.imgclass; 
-				}
-				else
-				{
-					errors = 'Maximum size of image class is 100 characters';
-				}
-			}
-			if(this.imgid != '' || this.imgclass != '')
-			{
-				imgmarkdown = imgmarkdown + '{' + imgattr + '}';
-			}
-			
-			if(this.imglink != '')
-			{
-				if(this.imglink.length < 101)
-				{
-					imgmarkdown = '[' + imgmarkdown + '](' + this.imglink + ')';
-				}
-				else
-				{
-					errors = 'Maximum size of image link is 100 characters';
-				}
-			}
-						
-			if(this.imgcaption != '')
-			{
-				if(this.imgcaption.length < 140)
-				{
-					imgmarkdown = imgmarkdown + '\n*' + this.imgcaption + '*'; 
-				}
-				else
-				{
-					errors = 'Maximum size of image caption is 140 characters';
-				}
-			}
-						
-			if(errors)
-			{
-				this.$parent.freezePage();
-				publishController.errors.message = errors;
-			}
-			else
-			{
-				publishController.errors.message = false;
-				this.$parent.activatePage();
-				this.$emit('updatedMarkdown', imgmarkdown);
-			}
-		},
-		onFileChange: function( e )
-		{
-			if(e.target.files.length > 0)
-			{
-				let imageFile = e.target.files[0];
-				let size = imageFile.size / 1024 / 1024;
-				
-				if (!imageFile.type.match('image.*'))
-				{
-					publishController.errors.message = "Only images are allowed.";
-				} 
-				else if (size > this.maxsize)
-				{
-					publishController.errors.message = "The maximal size of images is " + this.maxsize + " MB";
-				}
-				else
-				{
-					self = this;					
-					this.$parent.freezePage();
-					this.$root.$data.file = true;
-					this.load = true;
-					
-					let reader = new FileReader();
-					reader.readAsDataURL(imageFile);
-					reader.onload = function(e) {
-						self.imgpreview = e.target.result;
-						self.$emit('updatedMarkdown', '![](imgplchldr)');
-						
-						
-						/* load image to server */
-						var url = self.$root.$data.root + '/api/v1/image';
-						
-						var params = {
-							'url':				document.getElementById("path").value,
-							'image':			e.target.result,
-							'csrf_name': 		document.getElementById("csrf_name").value,
-							'csrf_value':		document.getElementById("csrf_value").value,
-						};
-									
-						var method 	= 'POST';
-						
-						sendJson(function(response, httpStatus)
-						{							
-							if(httpStatus == 400)
-							{
-								self.$parent.activatePage();
-							}
-							if(response)
-							{
-								self.$parent.activatePage();
-								self.load = false;
-								
-								var result = JSON.parse(response);
-
-								if(result.errors)
-								{
-									publishController.errors.message = result.errors;
-								}
-								else
-								{
-									self.imgmeta = true;
-								}
-							}
-						}, method, url, params);						
-					}
-				}
-			}
-		}
-	}
-})
-
-let editor = new Vue({
-    delimiters: ['${', '}'],
-	el: '#blox',
-	components: {
-		'content-component': contentComponent,
-		'markdown-component': markdownComponent,
-		'title-component': titleComponent,
-		'headline-component': headlineComponent,
-		'image-component': imageComponent,
-		'code-component': codeComponent,
-		'quote-component': quoteComponent,
-		'ulist-component': ulistComponent,
-		'olist-component': olistComponent,
-		'table-component': tableComponent,
-	},
-	data: {
-		root: document.getElementById("main").dataset.url,
-		html: false,
-		title: false,
-		markdown: false,
-		blockId: false,
-		blockType: false,
-		blockMarkdown: false,
-		file: false,
-		freeze: false,
-		newBlocks: [],
-		addblock: false,
-		draftDisabled: true,
-	},
-	mounted: function(){
-
-		publishController.visual = true;
-
-		var self = this;		
-		
-		var url = this.root + '/api/v1/article/html';
-		
-		var params = {
-			'url':				document.getElementById("path").value,
-			'csrf_name': 		document.getElementById("csrf_name").value,
-			'csrf_value':		document.getElementById("csrf_value").value,
-		};
-		
-		var method 	= 'POST';
-
-		sendJson(function(response, httpStatus)
-		{
-			if(httpStatus == 400)
-			{
-			}
-			if(response)
-			{
-				var result = JSON.parse(response);
-				
-				if(result.errors)
-				{
-					self.errors.title = result.errors;
-				}
-				else
-				{
-					var contenthtml = result.data;
-					self.title = contenthtml[0];
-					self.html = contenthtml;
-					var initialcontent = document.getElementById("initial-content");
-					initialcontent.parentNode.removeChild(initialcontent);
-				}
-			}
-		}, method, url, params);
-		
-		var url = this.root + '/api/v1/article/markdown';
-		
-		sendJson(function(response, httpStatus)
-		{
-			if(httpStatus == 400)
-			{
-			}
-			if(response)
-			{
-				var result = JSON.parse(response);
-				
-				if(result.errors)
-				{
-					self.errors.title = result.errors;
-				}
-				else
-				{
-					self.markdown = result.data;
-				}
-			}
-		}, method, url, params);
-		
-		self.sortable = new Sortable(sortblox, {
-			animation: 150,
-			onEnd: function (evt) {
-				var params = {
-					'url':			document.getElementById("path").value,
-					'old_index': 	evt.oldIndex,
-					'new_index':	evt.newIndex,
-					'csrf_name': 	document.getElementById("csrf_name").value,
-					'csrf_value':	document.getElementById("csrf_value").value,
-				};
-				self.moveBlock(params);
-			},
-		});
-	},
-	methods: {
-		setData: function(event, blocktype, body)
-		{
-			this.blockId = event.currentTarget.dataset.id;
-			/* this.blockType = blocktype; */
-			this.blockMarkdown = this.markdown[this.blockId];
-			if(blocktype)
-			{
-				this.blockType = blocktype;
-			}
-			else if(this.blockId == 0)
-			{ 
-				this.blockType = "title-component"
-			}
-			else 
-			{
-				this.blockType = this.determineBlockType(this.blockMarkdown);
-			}
-		},
-		hideModal: function()
-		{
-			this.addblock = false;
-		},
-		determineBlockType: function(block)
-		{			
-			if(block.match(/^\d+\./)){ return "olist-component" }
-			
-			var lines = block.split("\n");
-			if(lines.length > 2 && lines[0].indexOf('|') != -1 && /[\-\|: ]{3,}$/.test(lines[1]))
-			{
-				return "table-component";
-			}
-			
-			var firstChar = block[0];
-			var secondChar = block[1];
-			var thirdChar = block[2];
-			
-			switch(firstChar){
-				case ">":
-					return "quote-component";
-					break;
-				case "#":
-					return "headline-component";
-					break;
-				case "!":
-					if(secondChar == "[") { return "image-component" }
-					break;
-				case "[":
-					if(secondChar == "!" && thirdChar == "[") { return "image-component" } else { return "markdown-component" }
-					break;
-				case "`":
-					if(secondChar == "`" && thirdChar == "`") { return "code-component" } else { return "markdown-component" }
-					break;
-				case "*":
-				case "-":
-				case "+":
-					if(secondChar == " "){ return "ulist-component" } else { return "markdown-component" }
-					break;
-				default:
-					return 'markdown-component';
-			}
-		},
-		moveBlock: function(params)
-		{
-			publishController.errors.message = false;
-
-			var url = this.root + '/api/v1/moveblock';
-		
-			var self = this;			
-			
-			var method 	= 'PUT';
-			
-			sendJson(function(response, httpStatus)
-			{
-				if(httpStatus == 400)
-				{
-				}
-				if(response)
-				{
-				
-					var result = JSON.parse(response);
-
-					if(result.errors)
-					{
-						publishController.errors.message = result.errors;
-						publishController.publishDisabled = false;
-					}
-					else
-					{
-						var blox = document.getElementsByClassName("blox");
-						var length = blox.length;
-						for (var i = 0; i < length; i++ ) {
-							blox[i].id = "blox-" + i;
-							blox[i].dataset.id = i;
-						}
-
-						self.freeze = false;
-						self.markdown = result.markdown;
-						self.blockMarkdown = '';
-						self.blockType = '';
-
-						publishController.publishDisabled = false;
-						publishController.publishResult = "";
-					}
-				}
-			}, method, url, params);			
-		},
-	}
-});

system/author/js/vue-blox-orig.js

@@ -1,1228 +0,0 @@
-const eventBus = new Vue();
-
-const contentComponent = Vue.component('content-block', {
-	props: ['body', 'load'],
-	template: '<div ref="bloxcomponent" class="blox-editor">' +
-				'<div :class="{ editactive: edit }">' +
-				 '<div @keyup.enter="submitBlock" @click="getData">' +
-				  '<div class="component" ref="component">' +
-				   '<transition name="fade-editor">' +
-				    '<component :disabled="disabled" :compmarkdown="compmarkdown" @updatedMarkdown="updateMarkdown" :is="componentType"></component>' +
-				   '</transition>' +
-				   '<div class="blox-buttons" v-if="edit">' + 
-				    '<button class="edit" :disabled="disabled" @click.prevent="saveBlock">save</button>' +
-				    '<button class="cancel" :disabled="disabled" @click.prevent="switchToPreviewMode">cancel</button>' +
-				   '</div>' +
-				  '</div>' +
-				  '<div :class="preview" ref="preview"><slot></slot></div>' + 
-				 '</div>' +
-				 '<div class="sideadd" v-if="body">' + 
-				  '<button class="add" :disabled="disabled" title="add content-block" @click.prevent="addBlock($event)"><i class="icon-plus"></i></button>' +
-				 '</div>' + 
-				 '<div class="sideaction" v-if="body">' + 
-				  '<button class="delete" :disabled="disabled" title="delete content-block" @click.prevent="deleteBlock($event)"><i class="icon-cancel"></i></button>' +
-				 '</div>' + 
-				'</div>' + 
-				'<div v-if="load" class="loadoverlay"><span class="load"></span></div>' +
-			  '</div>',	
-	data: function () {
-		return {
-			preview: 'visible',
-			edit: false,
-			compmarkdown: '',
-			componentType: '',
-			disabled: false,
-			load: false
-		}
-	},
-	mounted: function()
-	{
-		eventBus.$on('closeComponents', this.closeComponents);
-	},
-	methods: {
-		addBlock: function($event)
-		{
-			self = this;
-			console.info($event);
-			var result = {content: '<p>asf</p>', markdown: 'asf', blockId: 'blox-new', id: 'new', errors: 'false'};
-			self.$root.$data.markdown.push(result.markdown);
-			self.$root.$data.newBlocks.push(result);
-			
-			this.$nextTick(function () {
-				var newcontent = document.getElementById("blox-new");
-				var newblock = newcontent.closest('.blox-editor');
-				console.info(newblock);
-			});
-			/*
-			self.$root.$data.blockMarkdown = '';
-			self.$root.$data.blockType = 'markdown-component';
-			// self.getData();
-			var textbox = document.querySelectorAll('textarea')[0];
-			if(textbox){ textbox.style.height = "70px"; }
-			*/
-		},
-		updateMarkdown: function($event)
-		{
-			this.compmarkdown = $event;
-			this.$nextTick(function () {
-				this.$refs.preview.style.minHeight = this.$refs.component.offsetHeight + 'px';
-			});			
-		},
-		switchToEditMode: function()
-		{
-			if(this.edit){ return; }
-			eventBus.$emit('closeComponents');
-			self = this;
-			self.$root.$data.freeze = true; 						/* freeze the data */
-			self.$root.sortable.option("disabled",true);			/* disable sorting */
-			this.preview = 'hidden'; 								/* hide the html-preview */
-			this.edit = true;										/* show the edit-mode */
-			this.compmarkdown = self.$root.$data.blockMarkdown;		/* get markdown data */
-			this.componentType = self.$root.$data.blockType;		/* get block-type of element */
-			if(this.componentType == 'image-component')
-			{
-				setTimeout(function(){ 
-					self.$nextTick(function () 
-					{
-						self.$refs.preview.style.minHeight = self.$refs.component.offsetHeight + 'px';
-					});
-				}, 200);				
-			}
-			else
-			{
-				this.$nextTick(function () 
-				{
-					this.$refs.preview.style.minHeight = self.$refs.component.offsetHeight + 'px';
-				});				
-			}
-		},
-		closeComponents: function()
-		{
-			this.preview = 'visible';
-			this.edit = false;
-			this.componentType = false;
-			this.$refs.preview.style.minHeight = "auto";			
-		},
-		switchToPreviewMode: function()
-		{
-			self = this;
-			self.$root.$data.freeze = false;						/* activate the data again */
-			self.$root.sortable.option("disabled",false);			/* activate sorting again */
-			this.preview = 'visible';								/* show the html-preview */
-			this.edit = false;										/* hide the edit mode */
-			this.compmarkdown = '';									/* clear markdown content */
-			this.componentType = false;								/* delete the component type */
-			self.$root.$data.blockType = false;
-			self.$root.$data.blockMarkdown = false;
-			self.$root.$data.file = false;
-			publishController.errors.message = false;				/* delete all error messages */
-			this.$refs.preview.style.minHeight = "auto";
-		},
-		freezePage: function()
-		{
-			this.disabled = 'disabled';
-			this.load = true;
-			publishController.errors.message = false;
-			publishController.publishDisabled = true;
-			var self = this;
-			self.$root.$data.freeze = true;
-		},
-		activatePage: function()
-		{
-			this.disabled = false;
-			this.load = false;
-			publishController.publishDisabled = false;
-		},
-		getData: function()
-		{
-			self = this;
-			if(self.$root.$data.blockType != '')
-			{
-				this.switchToEditMode();
-			}
-		},
- 		submitBlock: function(){
-			var emptyline = /^\s*$(?:\r\n?|\n)/gm;
-			if(this.componentType == "code-component"){ }
-			else if(this.componentType == "ulist-component" || this.componentType == "olist-component")
-			{
-				var listend = (this.componentType == "ulist-component") ? '* \n' : '1. \n';
-				var liststyle = (this.componentType == "ulist-component") ? '* ' : '1. ';
-				
-				if(this.compmarkdown.endsWith(listend))
-				{
-					this.compmarkdown = this.compmarkdown.replace(listend, '');
-					this.saveBlock();
-				}
-				else
-				{
-					var mdtextarea 		= document.getElementsByTagName('textarea');
-					var start 			= mdtextarea[0].selectionStart;
-					var end 			= mdtextarea[0].selectionEnd;
-					
-					this.compmarkdown 	= this.compmarkdown.substr(0, end) + liststyle + this.compmarkdown.substr(end);
-
-					mdtextarea[0].focus();
-					if(mdtextarea[0].setSelectionRange)
-					{
-						setTimeout(function(){
-							var spacer = (this.componentType == "ulist-component") ? 2 : 3;
-							mdtextarea[0].setSelectionRange(end+spacer, end+spacer);
-						}, 1);
-					}
-				}
-			}
-			else if(this.compmarkdown.search(emptyline) > -1)
-			{
-				var checkempty = this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"");
-				if(checkempty == '')
-				{
-					this.switchToPreviewMode();
-				}
-				else
-				{
-					this.saveBlock();
-				}
-			}
-		},
-		saveBlock: function()
-		{			
-			if(this.compmarkdown == undefined || this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"") == '')
-			{
-				this.switchToPreviewMode();	
-			}
-			else
-			{
-				this.freezePage();
-
-				var self = this;
-				
-				if(this.componentType == 'image-component' && self.$root.$data.file)
-				{
-					var url = self.$root.$data.root + '/api/v1/image';
-					var method 	= 'PUT';
-				}
-				else if(this.componentType == 'video-component')
-				{
-					var url = self.$root.$data.root + '/api/v1/video';
-					var method = 'POST';
-				}
-				else
-				{
-					var url = self.$root.$data.root + '/api/v1/block';
-					var method 	= 'PUT';
-				}
-				
-				var compmarkdown = this.compmarkdown.split('\n\n').join('\n');
-				var params = {
-					'url':				document.getElementById("path").value,
-					'markdown':			compmarkdown,
-					'block_id':			self.$root.$data.blockId,
-					'csrf_name': 		document.getElementById("csrf_name").value,
-					'csrf_value':		document.getElementById("csrf_value").value,
-				};
-
-				sendJson(function(response, httpStatus)
-				{
-					if(httpStatus == 400)
-					{
-						self.activatePage();
-						publishController.errors.message = "Looks like you are logged out. Please login and try again.";
-					}
-					else if(response)					
-					{
-						self.activatePage();
-
-						var result = JSON.parse(response);
-										
-						if(result.errors)
-						{
-							publishController.errors.message = result.errors.message;
-						}
-						else
-						{
-							self.switchToPreviewMode();
-							
-							if(self.$root.$data.blockId == 99999)
-							{
-								self.$root.$data.markdown.push(result.markdown);
-								self.$root.$data.newBlocks.push(result);
-								
-								self.$root.$data.blockMarkdown = '';
-								self.$root.$data.blockType = 'markdown-component';
-								self.getData();
-								var textbox = document.querySelectorAll('textarea')[0];
-								if(textbox){ textbox.style.height = "70px"; }
-							}
-							else
-							{
-								var htmlid = "blox-" + self.$root.$data.blockId;
-								var html = document.getElementById(htmlid);
-								html.innerHTML = result.content;
-								
-								self.$root.$data.markdown[self.$root.$data.blockId] = result.markdown;
-								self.$root.$data.blockMarkdown = '';
-								self.$root.$data.blockType = '';
-							}
-						}
-					}
-					else if(httpStatus != 200)
-					{
-						self.activatePage();
-						publishController.errors.message = "Sorry, something went wrong. Please refresh the page and try again.";
-					}					
-				}, method, url, params);
-			}
-		},
-		deleteBlock: function(event)
-		{	
-			this.freezePage();
-			
-			var bloxeditor = event.target.closest('.blox-editor');
-			
-			var bloxid = bloxeditor.getElementsByClassName('blox')[0].dataset.id;
-			bloxeditor.firstChild.id = "delete-"+bloxid;
-
-			var self = this;
-			
-			var url = self.$root.$data.root + '/api/v1/block';
-			
-			var params = {
-				'url':				document.getElementById("path").value,
-				'block_id':			bloxid,
-				'csrf_name': 		document.getElementById("csrf_name").value,
-				'csrf_value':		document.getElementById("csrf_value").value,
-			};
-			
-			var method 	= 'DELETE';
-			
-			sendJson(function(response, httpStatus)
-			{
-				if(httpStatus == 400)
-				{
-					self.activatePage();
-				}
-				if(response)
-				{
-					self.activatePage();
-					
-					var result = JSON.parse(response);
-
-					if(result.errors)
-					{
-						publishController.errors.message = result.errors;
-					}
-					else
-					{	
-						self.switchToPreviewMode();
-						
-						var deleteblock = document.getElementById("delete-"+bloxid);
-						deleteblock.parentElement.remove(deleteblock);
-						
-						var blox = document.getElementsByClassName("blox");
-						var length = blox.length;
-						for (var i = 0; i < length; i++ ) {
-							blox[i].id = "blox-" + i;
-							blox[i].dataset.id = i;
-						}
-
-						self.$root.$data.markdown = result.markdown;						
-						self.$root.$data.blockMarkdown = '';
-						self.$root.$data.blockType = '';
-					}
-				}
-			}, method, url, params);
-		},
-	},
-})
-
-const titleComponent = Vue.component('title-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div><input type="text" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown"></div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		autosize(document.querySelectorAll('textarea'));
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const markdownComponent = Vue.component('markdown-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-paragraph"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown"></textarea>' + 
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		autosize(document.querySelectorAll('textarea'));
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const codeComponent = Vue.component('code-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
-				'<div class="contenttype"><i class="icon-code"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="codeblock" :disabled="disabled" @input="createmarkdown"></textarea>' + 
-				'</div>',
-	data: function(){
-		return {
-			codeblock: ''
-		}
-	},
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(this.compmarkdown)
-		{
-			var codeblock = this.compmarkdown.replace("````\n", "");
-			codeblock = codeblock.replace("```\n", "");
-			codeblock = codeblock.replace("\n````", "");
-			codeblock = codeblock.replace("\n```", "");
-			codeblock = codeblock.replace("\n\n", "\n");
-			this.codeblock = codeblock;
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});	
-	},
-	methods: {
-		createmarkdown: function(event)
-		{
-			this.codeblock = event.target.value;
-			var codeblock = '````\n' + event.target.value + '\n````';
-			this.updatemarkdown(codeblock);
-		},
-		updatemarkdown: function(codeblock)
-		{
-			this.$emit('updatedMarkdown', codeblock);
-		},
-	},
-})
-
-const quoteComponent = Vue.component('quote-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
-				'<div class="contenttype"><i class="icon-quote-left"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="quote" :disabled="disabled" @input="createmarkdown"></textarea>' + 
-				'</div>',
-	data: function(){
-		return {
-			quote: ''
-		}
-	},
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(this.compmarkdown)
-		{
-			var quote = this.compmarkdown.replace("> ", "");
-			quote = this.compmarkdown.replace(">", "");
-			this.quote = quote;
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});	
-	},
-	methods: {
-		createmarkdown: function(event)
-		{
-			this.quote = event.target.value;
-			var quote = '> ' + event.target.value;
-			this.updatemarkdown(quote);
-		},
-		updatemarkdown: function(quote)
-		{
-			this.$emit('updatedMarkdown', quote);
-		},
-	},
-})
-
-const ulistComponent = Vue.component('ulist-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-list-bullet"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown"></textarea>' + 
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(!this.compmarkdown)
-		{
-			this.compmarkdown = '* ';
-		}
-		else
-		{
-			var lines = this.compmarkdown.split("\n");
-			var length = lines.length
-			var md = '';
-
-			for(i = 0; i < length; i++)
-			{
-				var clean = lines[i];
-				clean = clean.replace(/^- /, '* ');
-				clean = clean.replace(/^\+ /, '* ');
-				if(i == length-1)
-				{
-					md += clean;
-				}
-				else
-				{
-					md += clean + '\n';
-				}
-			}
-			this.compmarkdown = md;
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});	
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const olistComponent = Vue.component('olist-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-list-numbered"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown"></textarea>' + 
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(!this.compmarkdown)
-		{
-			this.compmarkdown = '1. ';
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const headlineComponent = Vue.component('headline-component', { 
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-header"></i></div>' +
-				'<input class="mdcontent" type="text" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(!this.compmarkdown)
-		{
-			this.compmarkdown = '## ';
-		}
-	},
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const tableComponent = Vue.component('table-component', { 
-	props: ['compmarkdown', 'disabled'],
-	data: function(){
-		return {
-			table: [
-				['0', '1', '2'],
-				['1', 'Head', 'Head'],
-				['2', 'cell', 'cell'],
-				['3', 'cell', 'cell'],
-			],
-			editable: 'editable',
-			noteditable: 'noteditable',
-			cellcontent: '',
-			columnbar: false,
-			rowbar: false,
-			tablekey: 1,
-		}
-	},
-	template: '<div ref="table" :key="tablekey">' + 
-				'<div class="contenttype"><i class="icon-table"></i></div>' +
-				'<table ref="markdown">' +
-					'<colgroup>' +
-						'<col v-for="col in table[0]">' +
-					'</colgroup>' +
-					'<tbody>' +
-						'<tr v-for="(row, rowindex) in table">' +
-							'<td v-if="rowindex === 0" v-for="(value,colindex) in row" contenteditable="false" class="noteditable" @click="switchcolumnbar(value)">{{value}} ' +
-							  '<div v-if="columnbar === value" class="columnaction">' + 
-							     '<div class="actionline" @click="addrightcolumn(value)">add right column</div>' +
-								 '<div class="actionline" @click="addleftcolumn(value)">add left column</div>' +
-								 '<div class="actionline" @click="deletecolumn(value)">delete column</div>' +
-							  '</div>' +
-							'</td>' +
-							'<th v-if="rowindex === 1" v-for="(value,colindex) in row" :contenteditable="colindex !== 0 ? true : false" @click="switchrowbar(value)" @blur="updatedata($event,colindex,rowindex)" :class="colindex !== 0 ? editable : noteditable">' + 
-							 '<div v-if="colindex === 0 && rowbar === value" class="rowaction">' + 
-							     '<div class="actionline" @click="addaboverow(value)">add row above</div>' +
-								 '<div class="actionline" @click="addbelowrow(value)">add row below</div>' +
-								 '<div class="actionline" @click="deleterow(value)">delete row</div>' +
-							  '</div>' + 
-							'{{value}}</th>' +
-							'<td v-if="rowindex > 1" v-for="(value,colindex) in row" :contenteditable="colindex !== 0 ? true : false" @click="switchrowbar(value)" @blur="updatedata($event,colindex,rowindex)" :class="colindex !== 0 ? editable : noteditable">' + 
-							 '<div v-if="colindex === 0 && rowbar === value" class="rowaction">' + 
-							     '<div class="actionline" @click="addaboverow(value)">add row above</div>' +
-								 '<div class="actionline" @click="addbelowrow(value)">add row below</div>' +
-								 '<div class="actionline" @click="deleterow(value)">delete row</div>' +
-							  '</div>' +
-							'{{ value }}</td>' +
-						'</tr>' +
-					'</tbody>' +
-				'</table>' +
-				'</div>',
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(this.compmarkdown)
-		{
-			var table = [];
-			var lines = this.compmarkdown.split("\n");
-			var length = lines.length
-			var c = 1;
-			
-			for(i = 0; i < length; i++)
-			{
-				if(i == 1){ continue }
-				
-				var line = lines[i].trim();
-				var row = line.split("|").map(function(cell){
-					return cell.trim();
-				});
-				if(row[0] == ''){ row.shift() }
-				if(row[row.length-1] == ''){ row.pop() }
-				if(i == 0)
-				{
-					var rlength = row.length;
-					var row0 = [];
-					for(y = 0; y <= rlength; y++) { row0.push(y) }
-					table.push(row0);
-				}
-				row.splice(0,0,c);
-				c++;
-				table.push(row);
-			}
-			this.table = table;
-		}
-	},
-	methods: {
-		updatedata: function(event,col,row)
-		{
-			this.table[row][col] = event.target.innerText;			
-			this.markdowntable();
-		},
-		switchcolumnbar(value)
-		{
-			this.rowbar = false;
-			(this.columnbar == value || value == 0) ? this.columnbar = false : this.columnbar = value;
-		},
-		switchrowbar(value)
-		{
-			this.columnbar = false;
-			(this.rowbar == value || value == 0 || value == 1 )? this.rowbar = false : this.rowbar = value;
-		},
-		addaboverow: function(index)
-		{
-			var row = [];
-			var cols = this.table[0].length;
-			for(var i = 0; i < cols; i++){ row.push("new"); }
-			this.table.splice(index,0,row);
-			this.reindexrows();
-		},
-		addbelowrow: function(index)
-		{
-			var row = [];
-			var cols = this.table[0].length;
-			for(var i = 0; i < cols; i++){ row.push("new"); }
-			this.table.splice(index+1,0,row);
-			this.reindexrows();
-		},
-		deleterow: function(index)
-		{
-			this.table.splice(index,1);
-			this.reindexrows();
-		},
-		addrightcolumn: function(index)
-		{
-			var tableLength = this.table.length;
-			for (var i = 0; i < tableLength; i++)
-			{
-				this.table[i].splice(index+1,0,"new");
-			}
-			this.reindexcolumns();
-		},
-		addleftcolumn: function(index)
-		{
-			var tableLength = this.table.length;
-			for (var i = 0; i < tableLength; i++)
-			{
-				this.table[i].splice(index,0,"new");
-			}
-			this.reindexcolumns();
-		},
-		deletecolumn: function(index)
-		{
-			var tableLength = this.table.length;
-			for (var i = 0; i < tableLength; i++)
-			{
-				this.table[i].splice(index,1);
-			}
-			this.reindexcolumns();
-		},
-		reindexrows: function()
-		{
-			var tableRows = this.table.length;
-			for (var i = 0; i < tableRows; i++)
-			{
-				Vue.set(this.table[i], 0, i);
-			}
-			this.tablekey +=1;
-			this.markdowntable();
-		},
-		reindexcolumns: function()
-		{
-			var tableColumns = this.table[0].length;
-			for (var i = 0; i < tableColumns; i++)
-			{
-				Vue.set(this.table[0], i, i);
-			}
-			this.tablekey +=1;
-			this.markdowntable();
-		},
-		markdowntable: function()
-		{
-			var markdown = '';
-			var separator = '\n|';
-			var rows = this.table.length;
-			var cols = this.table[0].length;
-			
-			for(var i = 0; i < cols; i++)
-			{
-				if(i == 0){ continue; }
-				separator += '---|';
-			}
-			
-			for(var i = 0; i < rows; i++)
-			{
-				var row = this.table[i];
-
-				if(i == 0){ continue; }
-				
-				for(var y = 0; y < cols; y++)
-				{					
-					if(y == 0){ continue; }
-					
-					var value = row[y].trim();
-					
-					if(y == 1)
-					{
-						markdown += '\n| ' + value + ' | ';
-					}
-					else
-					{
-						markdown += value + ' | ';
-					}
-				}
-				if(i == 1) { markdown = markdown + separator; }
-			}
-			this.$emit('updatedMarkdown', markdown);
-		},
-		updatemarkdown: function(event)
-		{
-			/* generate markdown here ??? */
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const videoComponent = Vue.component('video-component', {
-	props: ['compmarkdown', 'disabled', 'load'],
-	template: '<div class="video dropbox">' +
-				'<div class="contenttype"><i class="icon-youtube-play"></i></div>' +
-				'<label for="video">Link to video: </label><input type="url" ref="markdown" placeholder="https://www.youtube.com/watch?v=" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
-				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
-				'</div>',
-	methods: {
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-	},
-})
-
-const imageComponent = Vue.component('image-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div class="dropbox">' +
-				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +
-				'<input type="file" name="image" accept="image/*" class="input-file" @change="onFileChange( $event )" /> ' +
-				'<p>drag a picture or click to select</p>' +
-				'<div class="contenttype"><i class="icon-picture"></i></div>' +	
-				'<img class="uploadPreview" :src="imgpreview" />' +
-				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
-				'<div class="imgmeta" v-if="imgmeta">' +
-				'<label for="imgalt">Alt-Text: </label><input name="imgalt" type="text" placeholder="alt" @input="createmarkdown" v-model="imgalt" max="100" />' +
-				'<label for="imgtitle">Title: </label><input name="imgtitle" type="text" placeholder="title" v-model="imgtitle" @input="createmarkdown" max="64" />' +
-				'<label for="imgcaption">Caption: </label><input title="imgcaption" type="text" placeholder="caption" v-model="imgcaption" @input="createmarkdown" max="140" />' +
-				'<label for="imgurl">Link: </label><input title="imgurl" type="url" placeholder="url" v-model="imglink" @input="createmarkdown" />' +
-				'<label for="imgclass">Class: </label><select title="imgclass" v-model="imgclass" @change="createmarkdown"><option value="center">Center</option><option value="left">Left</option><option value="right">Right</option><option value="youtube">Youtube</option><option value="vimeo">Vimeo</option></select>' +
-				'<input title="imgid" type="hidden" placeholder="id" v-model="imgid" @input="createmarkdown" max="140" />' +
-				'</div></div>',
-	data: function(){
-		return {
-			maxsize: 5, // megabyte
-			imgpreview: false,
-			load: false,
-			imgmeta: false,
-			imgalt: '',
-			imgtitle: '',
-			imgcaption: '',
-			imglink: '',
-			imgclass: 'center',
-			imgid: '',
-			imgfile: 'imgplchldr',
-		}
-	},
-	mounted: function(){
-		
-		this.$refs.markdown.focus();
-
-		if(this.compmarkdown)
-		{
-			this.imgmeta = true;
-			
-			var imgmarkdown = this.compmarkdown;
-									
-			var imgcaption = imgmarkdown.match(/\*.*?\*/);
-			if(imgcaption){
-				this.imgcaption = imgcaption[0].slice(1,-1);
-				imgmarkdown = imgmarkdown.replace(this.imgcaption,'');
-				imgmarkdown = imgmarkdown.replace(/\r?\n|\r/g,'');
-			}
-			
-			if(this.compmarkdown[0] == '[')
-			{
-				var imglink = this.compmarkdown.match(/\(.*?\)/g);
-				if(imglink[1])
-				{
-					this.imglink = imglink[1].slice(1,-1);
-					imgmarkdown = imgmarkdown.replace(imglink[1],'');
-					imgmarkdown = imgmarkdown.slice(1, -1);
-				}
-			}
-
-			var imgtitle = imgmarkdown.match(/\".*?\"/);
-			if(imgtitle)
-			{
-				this.imgtitle = imgtitle[0].slice(1,-1);
-				imgmarkdown = imgmarkdown.replace(imgtitle[0], '');
-			}
-			
-			var imgalt = imgmarkdown.match(/\[.*?\]/);
-			if(imgalt)
-			{
-				this.imgalt = imgalt[0].slice(1,-1);
-			}
-
-			var imgattr = imgmarkdown.match(/\{.*?\}/);
-			if(imgattr)
-			{
-				imgattr = imgattr[0].slice(1,-1);
-				imgattr = imgattr.split(' ');
-				for (var i = 0; i < imgattr.length; i++)
-				{
-					if(imgattr[i].charAt(0) == '.')
-					{
-						this.imgclass = imgattr[i].slice(1);
-					}
-					else if(imgattr[i].charAt(0)  == '#')
-					{
-						this.imgid = imgattr[i].slice(1);
-					}
-				}
-			}
-
-			var imgpreview = imgmarkdown.match(/\(.*?\)/);
-			if(imgpreview)
-			{
-				this.imgpreview = imgpreview[0].slice(1,-1);
-				this.imgfile = this.imgpreview;
-			}
-		}
-	},
-	methods: {
-		isChecked: function(classname)
-		{
-			if(this.imgclass == classname)
-			{
-				return ' checked';
-			}
-		},
-		updatemarkdown: function(event)
-		{
-			this.$emit('updatedMarkdown', event.target.value);
-		},
-		createmarkdown: function()
-		{
-			var errors = false;
-			
-			if(this.imgalt.length < 101)
-			{
-				imgmarkdown = '![' + this.imgalt + ']';
-			}
-			else
-			{
-				errors = 'Maximum size of image alt-text is 100 characters';
-				imgmarkdown = '![]';
-			}
-			
-			if(this.imgtitle != '')
-			{
-				if(this.imgtitle.length < 101)
-				{
-					imgmarkdown = imgmarkdown + '(' + this.imgfile + ' "' + this.imgtitle + '")';
-				}
-				else
-				{
-					errors = 'Maximum size of image title is 100 characters';
-				}
-			}
-			else
-			{
-				imgmarkdown = imgmarkdown + '(' + this.imgfile + ')';		
-			}
-			
-			var imgattr = '';
-			if(this.imgid != '')
-			{
-				if(this.imgid.length < 100)
-				{
-					imgattr = imgattr + '#' + this.imgid + ' '; 
-				}
-				else
-				{
-					errors = 'Maximum size of image id is 100 characters';
-				}
-			}
-			if(this.imgclass != '')
-			{
-				if(this.imgclass.length < 100)
-				{
-					imgattr = imgattr + '.' + this.imgclass; 
-				}
-				else
-				{
-					errors = 'Maximum size of image class is 100 characters';
-				}
-			}
-			if(this.imgid != '' || this.imgclass != '')
-			{
-				imgmarkdown = imgmarkdown + '{' + imgattr + '}';
-			}
-			
-			if(this.imglink != '')
-			{
-				if(this.imglink.length < 101)
-				{
-					imgmarkdown = '[' + imgmarkdown + '](' + this.imglink + ')';
-				}
-				else
-				{
-					errors = 'Maximum size of image link is 100 characters';
-				}
-			}
-						
-			if(this.imgcaption != '')
-			{
-				if(this.imgcaption.length < 140)
-				{
-					imgmarkdown = imgmarkdown + '\n*' + this.imgcaption + '*'; 
-				}
-				else
-				{
-					errors = 'Maximum size of image caption is 140 characters';
-				}
-			}
-						
-			if(errors)
-			{
-				this.$parent.freezePage();
-				publishController.errors.message = errors;
-			}
-			else
-			{
-				publishController.errors.message = false;
-				this.$parent.activatePage();
-				this.$emit('updatedMarkdown', imgmarkdown);
-			}
-		},
-		onFileChange: function( e )
-		{
-			if(e.target.files.length > 0)
-			{
-				let imageFile = e.target.files[0];
-				let size = imageFile.size / 1024 / 1024;
-				
-				if (!imageFile.type.match('image.*'))
-				{
-					publishController.errors.message = "Only images are allowed.";
-				} 
-				else if (size > this.maxsize)
-				{
-					publishController.errors.message = "The maximal size of images is " + this.maxsize + " MB";
-				}
-				else
-				{
-					self = this;					
-					this.$parent.freezePage();
-					this.$root.$data.file = true;
-					this.load = true;
-					
-					let reader = new FileReader();
-					reader.readAsDataURL(imageFile);
-					reader.onload = function(e) {
-						self.imgpreview = e.target.result;
-						self.$emit('updatedMarkdown', '![](imgplchldr)');
-						
-						
-						/* load image to server */
-						var url = self.$root.$data.root + '/api/v1/image';
-						
-						var params = {
-							'url':				document.getElementById("path").value,
-							'image':			e.target.result,
-							'csrf_name': 		document.getElementById("csrf_name").value,
-							'csrf_value':		document.getElementById("csrf_value").value,
-						};
-									
-						var method 	= 'POST';
-						
-						sendJson(function(response, httpStatus)
-						{							
-							if(httpStatus == 400)
-							{
-								self.$parent.activatePage();
-							}
-							if(response)
-							{
-								self.$parent.activatePage();
-								self.load = false;
-								
-								var result = JSON.parse(response);
-
-								if(result.errors)
-								{
-									publishController.errors.message = result.errors;
-								}
-								else
-								{
-									self.imgmeta = true;
-								}
-							}
-						}, method, url, params);						
-					}
-				}
-			}
-		}
-	}
-})
-
-let editor = new Vue({
-    delimiters: ['${', '}'],
-	el: '#blox',
-	components: {
-		'content-component': contentComponent,
-		'markdown-component': markdownComponent,
-		'title-component': titleComponent,
-		'headline-component': headlineComponent,
-		'image-component': imageComponent,
-		'code-component': codeComponent,
-		'quote-component': quoteComponent,
-		'ulist-component': ulistComponent,
-		'olist-component': olistComponent,
-		'table-component': tableComponent,
-	},
-	data: {
-		root: document.getElementById("main").dataset.url,
-		markdown: false,
-		blockId: false,
-		blockType: false,
-		blockMarkdown: '',
-		file: false,
-		freeze: false,
-		newBlocks: [],
-		draftDisabled: true,
-	},
-	mounted: function(){
-
-		console.info(publishController);
-		publishController.visual = true;
-		
-		var url = this.root + '/api/v1/article/markdown';
-		
-		var params = {
-			'url':				document.getElementById("path").value,
-			'csrf_name': 		document.getElementById("csrf_name").value,
-			'csrf_value':		document.getElementById("csrf_value").value,
-		};
-		
-		var method 	= 'POST';
-
-		var self = this;		
-		
-		sendJson(function(response, httpStatus)
-		{
-			if(httpStatus == 400)
-			{
-			}
-			if(response)
-			{
-				var result = JSON.parse(response);
-				
-				if(result.errors)
-				{
-					self.errors.title = result.errors;
-				}
-				else
-				{
-					self.markdown = result.data;
-				}
-			}
-		}, method, url, params);
-		
-		self.sortable = new Sortable(sortblox, {
-			animation: 150,
-			onEnd: function (evt) {
-				var params = {
-					'url':			document.getElementById("path").value,
-					'old_index': 	evt.oldIndex,
-					'new_index':	evt.newIndex,
-					'csrf_name': 	document.getElementById("csrf_name").value,
-					'csrf_value':	document.getElementById("csrf_value").value,
-				};
-				self.moveBlock(params);
-			},
-		});
-	},
-	methods: {
-		setData: function(event, blocktype, body)
-		{
-			this.blockId = event.currentTarget.dataset.id;
-			/* this.blockType = blocktype; */
-			this.blockMarkdown = this.markdown[this.blockId];
-			if(blocktype)
-			{
-				this.blockType = blocktype;
-			}
-			else if(this.blockId == 0)
-			{ 
-				this.blockType = "title-component"
-			} 
-			else 
-			{
-				this.blockType = this.determineBlockType(this.blockMarkdown);
-			}
-		},
-		determineBlockType: function(block)
-		{
-			if(block.match(/^\d+\./)){ return "olist-component" }
-			
-			var lines = block.split("\n");
-			if(lines.length > 2 && lines[0].indexOf('|') != -1 && /[\-\|: ]{3,}$/.test(lines[1]))
-			{
-				return "table-component";
-			}
-			
-			var firstChar = block[0];
-			var secondChar = block[1];
-			var thirdChar = block[2];
-			
-			switch(firstChar){
-				case ">":
-					return "quote-component";
-					break;
-				case "#":
-					return "headline-component";
-					break;
-				case "!":
-					if(secondChar == "[") { return "image-component" }
-					break;
-				case "[":
-					if(secondChar == "!" && thirdChar == "[") { return "image-component" } else { return "markdown-component" }
-					break;
-				case "`":
-					if(secondChar == "`" && thirdChar == "`") { return "code-component" } else { return "markdown-component" }
-					break;
-				case "*":
-				case "-":
-				case "+":
-					if(secondChar == " "){ return "ulist-component" } else { return "markdown-component" }
-					break;
-				default:
-					return 'markdown-component';
-			}
-		},
-		moveBlock: function(params)
-		{
-			publishController.errors.message = false;
-
-			var url = this.root + '/api/v1/moveblock';
-		
-			var self = this;			
-			
-			var method 	= 'PUT';
-			
-			sendJson(function(response, httpStatus)
-			{
-				if(httpStatus == 400)
-				{
-				}
-				if(response)
-				{
-				
-					var result = JSON.parse(response);
-
-					if(result.errors)
-					{
-						publishController.errors.message = result.errors;
-						publishController.publishDisabled = false;
-					}
-					else
-					{
-						var blox = document.getElementsByClassName("blox");
-						var length = blox.length;
-						for (var i = 0; i < length; i++ ) {
-							blox[i].id = "blox-" + i;
-							blox[i].dataset.id = i;
-						}
-
-						self.freeze = false;
-						self.markdown = result.markdown;
-						self.blockMarkdown = '';
-						self.blockType = '';
-
-						publishController.publishDisabled = false;
-						publishController.publishResult = "";
-					}
-				}
-			}, method, url, params);			
-		},
-	}
-});

system/author/js/vue-blox.js

@@ -56,7 +56,7 @@ const contentComponent = Vue.component('content-block', {
 			this.$root.$data.bloxOverlay = true;
 			this.$root.$data.newblock = true;
 			this.newblock = 'newblock';
-			self.$root.sortable.option("disabled", true);
+			self.$root.$data.sortdisabled = true;
 		},
 		closeNewBlock: function($event)
 		{
@@ -68,10 +68,10 @@ const contentComponent = Vue.component('content-block', {
 			this.$root.$data.bloxOverlay = false;
 			this.$root.$data.newblock = false;
 			this.newblock = false;
-			self.$root.sortable.option("disabled", false); 
+			self.$root.$data.sortdisabled = false; 
 
 			this.$root.$data.html.splice(bloxid,1);
-			this.$root.$data.markdown.splice(bloxid,1);			
+			this.$root.$data.markdown.splice(bloxid,1);
 		},
 		updateMarkdown: function($event)
 		{
@@ -86,7 +86,7 @@ const contentComponent = Vue.component('content-block', {
 			eventBus.$emit('closeComponents');
 			self = this;
 			self.$root.$data.freeze = true; 						/* freeze the data */
-			self.$root.sortable.option("disabled",true);			/* disable sorting */
+		  self.$root.$data.sortdisabled = true;			/* disable sorting */
 			this.preview = 'hidden'; 								/* hide the html-preview */
 			this.edit = true;										/* show the edit-mode */
 			this.compmarkdown = self.$root.$data.blockMarkdown;		/* get markdown data */
@@ -98,7 +98,7 @@ const contentComponent = Vue.component('content-block', {
 					{
 						self.$refs.preview.style.minHeight = self.$refs.component.offsetHeight + 'px';
 					});
-				}, 200);				
+				}, 200);
 			}
 			else
 			{
@@ -122,7 +122,7 @@ const contentComponent = Vue.component('content-block', {
 		{
 			self = this;
 			self.$root.$data.freeze = false;						/* activate the data again */
-			self.$root.sortable.option("disabled",false);			/* activate sorting again */
+			self.$root.sortdisabled = false;			/* activate sorting again */
 			this.preview = 'visible';								/* show the html-preview */
 			this.edit = false;										/* hide the edit mode */
 			this.compmarkdown = '';									/* clear markdown content */
@@ -201,7 +201,7 @@ const contentComponent = Vue.component('content-block', {
 			}
 		},
 		saveBlock: function()
-		{			
+		{
 			if(this.compmarkdown == undefined || this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"") == '')
 			{
 				this.switchToPreviewMode();	
@@ -212,7 +212,12 @@ const contentComponent = Vue.component('content-block', {
 
 				var self = this;
 				
-				var compmarkdown = this.compmarkdown.split('\n\n').join('\n');
+/*				if(this.componentType != 'definition-component')
+				{
+					var compmarkdown = this.compmarkdown.split('\n\n').join('\n');
+				}
+*/				var compmarkdown = this.compmarkdown;
+
 				var params = {
 					'url':				document.getElementById("path").value,
 					'markdown':			compmarkdown,
@@ -276,7 +281,7 @@ const contentComponent = Vue.component('content-block', {
 							}
 							else if(self.$root.$data.newblock)
 							{
-								self.$root.$data.html[result.id] = result.content;
+								self.$root.$data.html.splice(result.id,1,result.content);
 								self.$root.$data.markdown[result.id] = result.markdown;								
 
 								self.$root.$data.blockMarkdown = '';
@@ -288,9 +293,11 @@ const contentComponent = Vue.component('content-block', {
 							else
 							{
 								self.$root.$data.markdown[result.id] = result.markdown;
+								self.$root.$data.html.splice(result.id,1,result.content);
 
-								self.$root.$data.html[result.id] = result.content;
-								document.getElementById('blox-'+result.id).innerHTML = result.content;
+								if(result.id == 0){ self.$root.$data.title = result.content; }
+								
+								// document.getElementById('blox-'+result.id).innerHTML = result.content;
 								
 								self.$root.$data.blockMarkdown = '';
 								self.$root.$data.blockType = '';
@@ -306,14 +313,13 @@ const contentComponent = Vue.component('content-block', {
 			}
 		},
 		deleteBlock: function(event)
-		{	
+		{
 			this.freezePage();
 			
 			var bloxeditor = event.target.closest('.blox-editor');
 			
 			var bloxid = bloxeditor.getElementsByClassName('blox')[0].dataset.id;
-			/* bloxeditor.firstChild.id = "delete-"+bloxid; */
-							
+	
 			var self = this;
 				
 			var url = self.$root.$data.root + '/api/v1/block';
@@ -346,14 +352,13 @@ const contentComponent = Vue.component('content-block', {
 					else
 					{	
 						self.switchToPreviewMode();
-							
 						self.$root.$data.html.splice(bloxid,1);
 						self.$root.$data.markdown.splice(bloxid,1);
 						self.$root.$data.blockMarkdown = '';
 						self.$root.$data.blockType = '';
 					}
 				}
-			}, method, url, params);				
+			}, method, url, params);
 		},
 	},
 })
@@ -391,6 +396,25 @@ const markdownComponent = Vue.component('markdown-component', {
 	},
 })
 
+const hrComponent = Vue.component('hr-component', {
+	props: ['compmarkdown', 'disabled'],
+	template: '<div>' + 
+				'<div class="contenttype"><i class="icon-paragraph"></i></div>' +
+				'<textarea class="mdcontent" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">---</textarea>' +
+				'</div>',
+	mounted: function(){
+		this.$refs.markdown.focus();
+		autosize(document.querySelectorAll('textarea'));
+		this.$emit('updatedMarkdown', '---');
+	},
+	methods: {
+		updatemarkdown: function(event)
+		{
+			this.$emit('updatedMarkdown', event.target.value);
+		},
+	},
+})
+
 const codeComponent = Vue.component('code-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
@@ -544,19 +568,74 @@ const headlineComponent = Vue.component('headline-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
 				'<div class="contenttype"><i class="icon-header"></i></div>' +
-				'<input class="mdcontent" type="text" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
+				'<button class="hdown" @click.prevent="headlinedown" v-html="level"></button>' +
+				'<input class="mdcontent" :class="hlevel" type="text" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
 				'</div>',
+	data: function(){
+			return {
+				level: '',
+				hlevel: '',
+			}
+		},
 	mounted: function(){
 		this.$refs.markdown.focus();
 		if(!this.compmarkdown)
 		{
 			this.compmarkdown = '## ';
+			this.level = '2';
+			this.hlevel = 'h2';
+		}
+		else
+		{
+			this.level = this.getHeadlineLevel(this.compmarkdown);
+			this.hlevel = 'h' + this.level;
 		}
 	},
 	methods: {
 		updatemarkdown: function(event)
 		{
-			this.$emit('updatedMarkdown', event.target.value);
+			var headline = event.target.value;
+			this.level = this.getHeadlineLevel(headline);
+			if(this.level > 6)
+			{
+				headline = '######' + headline.substr(this.level);
+				this.level = 6;
+				this.compmarkdown = headline;
+			}
+			else if(this.level < 2)
+			{
+				headline = '##' + headline.substr(this.level);
+				this.level = 2;
+				this.compmarkdown = headline;
+			}
+			this.hlevel = 'h' + this.level;
+			this.$emit('updatedMarkdown', headline);
+		},
+		headlinedown: function()
+		{
+			this.level = this.getHeadlineLevel(this.compmarkdown);
+			if(this.level < 6)
+			{
+				this.compmarkdown = this.compmarkdown.substr(0, this.level) + '#' + this.compmarkdown.substr(this.level);
+				this.level = this.level+1;
+				this.hlevel = 'h' + this.level;	
+			}
+			else
+			{
+				this.compmarkdown = '##' + this.compmarkdown.substr(this.level);
+				this.level = 2;
+				this.hlevel = 'h2';				
+			}
+			this.$emit('updatedMarkdown', this.compmarkdown);
+		},
+		getHeadlineLevel: function(str)
+		{
+			var count = 0;
+			for(var i = 0; i < str.length; i++){
+				if(str[i] != '#'){ return count }
+				count++;
+			}
+		  return count;
 		},
 	},
 })
@@ -774,6 +853,90 @@ const tableComponent = Vue.component('table-component', {
 	},
 })
 
+const definitionComponent = Vue.component('definition-component', {
+	props: ['compmarkdown', 'disabled', 'load'],
+	data: function(){
+		return {
+			definitionList: [],
+		}
+	},
+	template: '<div class="definitionList">' +
+				'<div class="contenttype"><i class="icon-colon"></i></div>' +
+				'<draggable v-model="definitionList" :animation="150" @end="moveDefinition">' +
+  			  '<div class="definitionRow" v-for="(definition, dindex) in definitionList" :key="definition.id">' +
+						'<i class="icon-resize-vertical"></i>' +
+						'<input type="text" class="definitionTerm" placeholder="term" :value="definition.term" :disabled="disabled" @input="updateterm($event,dindex)" @blur="updateMarkdown">' +
+		  		  '<i class="icon-colon"></i>' + 
+	  			  '<textarea class="definitionDescription" placeholder="description" v-html="definition.description" :disabled="disabled" @input="updatedescription($event, dindex)" @blur="updateMarkdown"></textarea>' +
+					  '<button class="delDL" @click.prevent="deleteDefinition(dindex)"><i class="icon-minus"></i></button>' +
+				  '</div>' +
+				'</draggable>' +
+				'<button class="addDL" @click.prevent="addDefinition()"><i class="icon-plus"></i> add definition</button>' +
+				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
+				'</div>',
+	mounted: function(){
+		if(this.compmarkdown)
+		{
+			var definitionList = this.compmarkdown.replace("\r\n", "\n");
+			definitionList = definitionList.replace("\r", "\n");
+			definitionList = definitionList.split("\n\n");
+
+			for(var i=0; i < definitionList.length; i++)
+			{
+				var definition = definitionList[i].split("\n");
+				
+				var term = definition[0];
+				var description = definition[1];
+				var id = i;
+
+				if(description && description.substring(0, 2) == ": ")
+				{
+					this.definitionList.push({'term': term ,'description': description.substring(2), 'id': id});
+				}
+			}
+		}
+		else
+		{
+			this.definitionList.push({'term': '', 'description': '', 'id': 0});
+		}
+	},
+	methods: {
+		updateterm: function(event, dindex)
+		{
+			this.definitionList[dindex].term = event.target.value;
+		},
+		updatedescription: function(event, dindex)
+		{
+			this.definitionList[dindex].description = event.target.value;
+		},
+		addDefinition: function()
+		{
+			var id = this.definitionList.length;
+			this.definitionList.push({'term': '', 'description': '', 'id': id});
+			this.updateMarkdown();
+		},
+		deleteDefinition: function(dindex)
+		{
+			this.definitionList.splice(dindex,1);
+			this.updateMarkdown();
+		},
+		moveDefinition: function(evt)
+		{
+			this.updateMarkdown();
+		},
+		updateMarkdown: function()
+		{
+			var length = this.definitionList.length;
+			var markdown = '';
+			for(i = 0; i < length; i++)
+			{
+				markdown = markdown + this.definitionList[i].term + "\n: " + this.definitionList[i].description + "\n\n";
+			}
+			this.$emit('updatedMarkdown', markdown);
+		},
+	},
+})
+
 const videoComponent = Vue.component('video-component', {
 	props: ['compmarkdown', 'disabled', 'load'],
 	template: '<div class="video dropbox">' +
@@ -886,8 +1049,6 @@ const imageComponent = Vue.component('image-component', {
 				this.imgpreview = imgpreview[0].slice(1,-1);
 				this.imgfile = this.imgpreview;
 			}
-			console.info(this.imgpreview);
-			console.info(this.imgfile);
 		}
 	},
 	methods: {
@@ -1073,6 +1234,7 @@ let editor = new Vue({
 	components: {
 		'content-component': contentComponent,
 		'markdown-component': markdownComponent,
+		'hr-component': hrComponent,
 		'title-component': titleComponent,
 		'headline-component': headlineComponent,
 		'image-component': imageComponent,
@@ -1081,6 +1243,7 @@ let editor = new Vue({
 		'ulist-component': ulistComponent,
 		'olist-component': olistComponent,
 		'table-component': tableComponent,
+		'definition-component': definitionComponent,
 	},
 	data: {
 		root: document.getElementById("main").dataset.url,
@@ -1096,6 +1259,7 @@ let editor = new Vue({
 		addblock: false,
 		draftDisabled: true,
 		bloxOverlay: false,
+		sortdisabled: false,
 	},
 	mounted: function(){
 
@@ -1146,6 +1310,7 @@ let editor = new Vue({
 			}
 			if(response)
 			{
+
 				var result = JSON.parse(response);
 				
 				if(result.errors)
@@ -1158,28 +1323,62 @@ let editor = new Vue({
 				}
 			}
 		}, method, url, params);
-		
-		self.sortable = new Sortable(sortblox, {
-			animation: 150,
-			onEnd: function (evt) {
-				var params = {
-					'url':			document.getElementById("path").value,
-					'old_index': 	evt.oldIndex,
-					'new_index':	evt.newIndex,
-					'csrf_name': 	document.getElementById("csrf_name").value,
-					'csrf_value':	document.getElementById("csrf_value").value,
-				};
-				self.moveBlock(params);
-			},
-		});
 	},
 	methods: {
+		onStart: function(evt)
+		{
+		},
+		moveBlock: function(evt)
+		{
+			var params = {
+				'url':			document.getElementById("path").value,
+				'old_index': 	evt.oldIndex,
+				'new_index':	evt.newIndex,
+				'csrf_name': 	document.getElementById("csrf_name").value,
+				'csrf_value':	document.getElementById("csrf_value").value,
+			};
+			publishController.errors.message = false;
+
+			var url = this.root + '/api/v1/moveblock';
+			var self = this;
+			
+			var method 	= 'PUT';
+			
+			sendJson(function(response, httpStatus)
+			{
+				if(httpStatus == 400)
+				{
+				}
+				if(response)
+				{
+				
+					var result = JSON.parse(response);
+
+					if(result.errors)
+					{
+						publishController.errors.message = result.errors;
+						publishController.publishDisabled = false;
+					}
+					else
+					{
+
+						self.freeze = false;
+
+						self.markdown = result.markdown;
+						self.blockMarkdown = '';
+						self.blockType = '';
+
+						publishController.publishDisabled = false;
+						publishController.publishResult = "";
+					}
+				}
+			}, method, url, params);
+		},
 		setData: function(event, blocktype, body)
 		{
+			// change this, not needed anymore.
 			this.blockId = event.currentTarget.dataset.id;
-			/* this.blockType = blocktype; */
 			this.blockMarkdown = this.markdown[this.blockId];
-			console.info(this.blockId);
 			if(blocktype)
 			{
 				this.blockType = blocktype;
@@ -1207,7 +1406,11 @@ let editor = new Vue({
 			if(block.match(/^\d+\./)){ return "olist-component" }
 			
 			var lines = block.split("\n");
-			if(lines.length > 2 && lines[0].indexOf('|') != -1 && /[\-\|: ]{3,}$/.test(lines[1]))
+			if(lines.length > 1 && lines[1].substr(0,2) == ': ')
+			{
+				return "definition-component";
+			}
+			else if(lines.length > 2 && lines[0].indexOf('|') != -1 && /[\-\|: ]{3,}$/.test(lines[1]))
 			{
 				return "table-component";
 			}
@@ -1241,50 +1444,5 @@ let editor = new Vue({
 					return 'markdown-component';
 			}
 		},
-		moveBlock: function(params)
-		{
-			publishController.errors.message = false;
-
-			var url = this.root + '/api/v1/moveblock';
-		
-			var self = this;			
-			
-			var method 	= 'PUT';
-			
-			sendJson(function(response, httpStatus)
-			{
-				if(httpStatus == 400)
-				{
-				}
-				if(response)
-				{
-				
-					var result = JSON.parse(response);
-
-					if(result.errors)
-					{
-						publishController.errors.message = result.errors;
-						publishController.publishDisabled = false;
-					}
-					else
-					{
-						var blox = document.getElementsByClassName("blox");
-						var length = blox.length;
-						for (var i = 0; i < length; i++ ) {
-							blox[i].id = "blox-" + i;
-							blox[i].dataset.id = i;
-						}
-
-						self.freeze = false;
-						self.markdown = result.markdown;
-						self.blockMarkdown = '';
-						self.blockType = '';
-
-						publishController.publishDisabled = false;
-						publishController.publishResult = "";
-					}
-				}
-			}, method, url, params);			
-		},
 	}
 });

system/author/layouts/layoutBlox.twig

@@ -39,7 +39,7 @@
 		<script src="{{ base_url }}/system/author/js/vue.min.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/autosize.min.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/sortable.min.js?20190412"></script>
-		<script src="{{ base_url }}/system/author/js/vuedraggable.min.js?20190412"></script>
+		<script src="{{ base_url }}/system/author/js/vuedraggable.umd.min.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/author.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/vue-publishcontroller.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/vue-blox.js?20190412"></script>

system/author/layouts/layoutEditor.twig

@@ -39,7 +39,7 @@
 		<script src="{{ base_url }}/system/author/js/vue.min.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/autosize.min.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/sortable.min.js?20190412"></script>
-		<script src="{{ base_url }}/system/author/js/vuedraggable.min.js?20190412"></script>
+		<script src="{{ base_url }}/system/author/js/vuedraggable.umd.min.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/author.js?20190412"></script>
 		<script src="{{ base_url }}/system/author/js/vue-publishcontroller.js?20190412"></script>		
 		<script src="{{ base_url }}/system/author/js/vue-editor.js?20190412"></script>