package-lock.json

@@ -1746,17 +1746,6 @@
           "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1783,34 +1772,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1832,13 +1793,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1903,16 +1857,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1929,21 +1873,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.5",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
-          "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/mini-css-extract-plugin": "^0.9.1",
-            "chalk": "^3.0.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^1.2.3",
-            "merge-source-map": "^1.1.0",
-            "source-map": "^0.6.1"
-          }
         }
       }
     },
@@ -10985,6 +10914,86 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.5.tgz",
+      "integrity": "sha512-ciWfzNefqWlmzKznCWY9hl+fPP4KlQ0A9MtHbJ/8DpyY+dAM8gDrjufIdxwTgC4szE4EZC3A6ip/BbrqM84GqA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/mini-css-extract-plugin": "^0.9.1",
+        "chalk": "^3.0.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^1.2.3",
+        "merge-source-map": "^1.1.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -1,7 +1,8 @@
 {
   "name": "block-renderer",
   "description": "Content renderer for JSON blocks from Editor.js",
-  "version": "0.1.3",
+  "version": "0.1.0",
+  "private": true,
   "author": "KingOfDog <info@kingofdog.de>",
   "repository": {
     "type": "git",

src/assets/svg/custom.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
-  <path d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"/>
-</svg>

src/assets/svg/standard.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
-  <g fill="#A8ACB8" fill-rule="evenodd">
-    <path fill-rule="nonzero" d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"/>
-    <path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z"/>
-  </g>
-</svg>

src/components/AttachesBlock.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="attaches-block">
-    <div
-      :data-extension="data.file.extension"
-      :style="{ color: color }"
-      class="attaches-block-file-icon"
-    >
-      <svg>
-        <use
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          v-bind:xlink:href="color ? customIcon : standardIcon"
-        />
-      </svg>
-    </div>
-    <div class="attaches-block-file-info">
-      <p class="attaches-block-title">{{ data.file.name }}</p>
-      <p class="attaches-block-size">{{ data.file.size | byteFormatter }}</p>
-    </div>
-    <a :href="data.file.url" class="attaches-block-file download-button"></a>
-  </div>
-</template>
-
-<script>
-import byteFormatter from "../filters/byteFormatter";
-
-const extensions = {
-  doc: "#3e74da",
-  docx: "#3e74da",
-  odt: "#3e74da",
-  pdf: "#d47373",
-  rtf: "#656ecd",
-  tex: "#5a5a5b",
-  txt: "#5a5a5b",
-  pptx: "#e07066",
-  ppt: "#e07066",
-  mp3: "#eab456",
-  mp4: "#f676a6",
-  xls: "#3f9e64",
-  html: "#2988f0",
-  htm: "#2988f0",
-  png: "#f676a6",
-  jpg: "#f67676",
-  jpeg: "#f67676",
-  gif: "#f6af76",
-  zip: "#4f566f",
-  rar: "#4f566f",
-  exe: "#e26f6f",
-  svg: "#bf5252",
-  key: "#e07066",
-  sketch: "#df821c",
-  ai: "#df821c",
-  psd: "#388ae5",
-  dmg: "#e26f6f",
-  json: "#2988f0",
-  csv: "#3f9e64"
-};
-
-export default {
-  filters: {
-    byteFormatter
-  },
-  props: ["data"],
-  data() {
-    return {
-      standardIcon: require("@/assets/svg/standard.svg"),
-      customIcon: require("@/assets/svg/custom.svg")
-    };
-  },
-  computed: {
-    color() {
-      return extensions[this.data.file.extension];
-    }
-  }
-};
-</script>
-
-<style scoped>
-.attaches-block-file-icon::before {
-  content: attr(data-extension);
-}
-</style>

src/components/BlockContentRenderer.vue

@@ -10,33 +10,29 @@
 </template>
 
 <script>
-import AttachesBlock from "./AttachesBlock";
 import EmbedBlock from "./EmbedBlock";
 import HeaderBlock from "./HeaderBlock";
 import ImageBlock from "./ImageBlock";
-import LinkBlock from "./LinkBlock";
 import ListBlock from "./ListBlock";
 import ParagraphBlock from "./ParagraphBlock";
 import QuoteBlock from "./QuoteBlock";
 import WarningBlock from "./WarningBlock";
 
 const componentTypes = {
-  attaches: AttachesBlock,
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,
-  link: LinkBlock,
   list: ListBlock,
   paragraph: ParagraphBlock,
   quote: QuoteBlock,
-  warning: WarningBlock
+  warning: WarningBlock,
 };
 
 export default {
   props: ["content"],
   data() {
     return {
-      blocks: []
+      blocks: [],
     };
   },
   mounted() {
@@ -49,20 +45,20 @@ export default {
       if (!this.content.blocks) {
         return;
       }
-      this.blocks = this.content.blocks.map(block => ({
+      this.blocks = this.content.blocks.map((block) => ({
         component: componentTypes[block.type],
         type: block.type,
-        data: block.data
+        data: block.data,
       }));
-    }
+    },
   },
   watch: {
     content() {
       if (this.content) {
         this.prepareBlocks();
       }
-    }
+    },
-  }
+  },
 };
 </script>
 

src/components/LinkBlock.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="link-block">
-    <div class="link-block-meta">
-      <div class="link-block-title">{{data.meta.title}}</div>
-      <p class="link-block-description">{{data.meta.description}}</p>
-      <div class="link-block-anchor">{{domain}}</div>
-    </div>
-
-    <div class="link-block-image" :style="{ 'background-image': data.meta.image.url }"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["data"],
-  computed: {
-    domain() {
-      return this.data.link.replace(/(https|http):\/\//, "").split(/[/?#]/)[0];
-    }
-  }
-};
-</script>

src/filters/byteFormatter.js

@@ -1,30 +0,0 @@
-module.exports = function(size) {
-  var result;
-
-  switch (true) {
-    case size === null || size === "" || isNaN(size):
-      result = "-";
-      break;
-
-    case size >= 0 && size < 1024:
-      result = size + " B";
-      break;
-
-    case size >= 1024 && size < Math.pow(1024, 2):
-      result = Math.round((size / 1024) * 100) / 100 + " KiB";
-      break;
-
-    case size >= Math.pow(1024, 2) && size < Math.pow(1024, 3):
-      result = Math.round((size / Math.pow(1024, 2)) * 100) / 100 + " MiB";
-      break;
-
-    case size >= Math.pow(1024, 3) && size < Math.pow(1024, 4):
-      result = Math.round((size / Math.pow(1024, 3)) * 100) / 100 + " GiB";
-      break;
-
-    default:
-      result = Math.round((size / Math.pow(1024, 4)) * 100) / 100 + " TiB";
-  }
-
-  return result;
-};