Improve attaches block

dist/block-renderer.common.js

@@ -19122,6 +19122,35 @@ module.exports = function (METHOD_NAME) {
 };
 
 
+/***/ }),
+
+/***/ "b0c0":
+/***/ (function(module, exports, __webpack_require__) {
+
+var DESCRIPTORS = __webpack_require__("83ab");
+var defineProperty = __webpack_require__("9bf2").f;
+
+var FunctionPrototype = Function.prototype;
+var FunctionPrototypeToString = FunctionPrototype.toString;
+var nameRE = /^\s*function ([^ (]*)/;
+var NAME = 'name';
+
+// Function instances `.name` property
+// https://tc39.github.io/ecma262/#sec-function-instances-name
+if (DESCRIPTORS && !(NAME in FunctionPrototype)) {
+  defineProperty(FunctionPrototype, NAME, {
+    configurable: true,
+    get: function () {
+      try {
+        return FunctionPrototypeToString.call(this).match(nameRE)[1];
+      } catch (error) {
+        return '';
+      }
+    }
+  });
+}
+
+
 /***/ }),
 
 /***/ "b622":
@@ -19695,22 +19724,26 @@ var staticRenderFns = []
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AttachesBlock.vue?vue&type=template&id=d2793378&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AttachesBlock.vue?vue&type=template&id=f438d3d0&
-var AttachesBlockvue_type_template_id_d2793378_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"attaches-block"},[_c('div',{staticClass:"attaches-block-file-icon",style:({ color: _vm.color }),attrs:{"data-extension":_vm.data.file.extension}},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('svg',{attrs:{"width":"32","height":"40"}},[(_vm.color)?_c('path',{attrs:{"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"}}):_c('g',{attrs:{"fill":"#A8ACB8","fill-rule":"evenodd"}},[_c('path',{attrs:{"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"}}),_c('path',{attrs:{"d":"M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z"}})])])])]),_c('div',{staticClass:"attaches-block-file-info"},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('p',{staticClass:"attaches-block-title"},[_vm._v(_vm._s(_vm.data.file.name))])]),_c('p',{staticClass:"attaches-block-size"},[_vm._v(_vm._s(_vm._f("byteFormatter")(_vm.data.file.size)))])]),_c('a',{staticClass:"attaches-block-file-download-button",attrs:{"href":_vm.url,"target":"_blank"}},[_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","width":"17pt","height":"17pt","viewBox":"0 0 17 17"}},[_c('path',{attrs:{"d":"M9.457 8.945V2.848A.959.959 0 0 0 8.5 1.89a.959.959 0 0 0-.957.957v6.097L4.488 5.891a.952.952 0 0 0-1.351 0 .952.952 0 0 0 0 1.351l4.687 4.688a.955.955 0 0 0 1.352 0l4.687-4.688a.952.952 0 0 0 0-1.351.952.952 0 0 0-1.351 0zM3.59 14.937h9.82a.953.953 0 0 0 .953-.957.952.952 0 0 0-.953-.953H3.59a.952.952 0 0 0-.953.953c0 .532.425.957.953.957zm0 0","fill-rule":"evenodd"}})])])])}
+var AttachesBlockvue_type_template_id_f438d3d0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"attaches-block"},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('div',{staticClass:"attaches-block-file-icon",style:({ color: _vm.color }),attrs:{"data-extension":_vm.data.file.extension}},[_c('svg',{attrs:{"width":"32","height":"40"}},[(_vm.color)?_c('path',{attrs:{"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"}}):_c('g',{attrs:{"fill":"#A8ACB8","fill-rule":"evenodd"}},[_c('path',{attrs:{"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"}}),_c('path',{attrs:{"d":"M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z"}})])])])]),_c('div',{staticClass:"attaches-block-file-info"},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('p',{staticClass:"attaches-block-title"},[_vm._v(_vm._s(_vm.data.title))])]),_c('p',{staticClass:"attaches-block-size"},[_vm._v(_vm._s(_vm._f("byteFormatter")(_vm.data.file.size)))])]),_c('a',{staticClass:"attaches-block-file-download-button",attrs:{"href":_vm.url,"target":"_blank"}},[_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","width":"17pt","height":"17pt","viewBox":"0 0 17 17"}},[_c('path',{attrs:{"d":"M9.457 8.945V2.848A.959.959 0 0 0 8.5 1.89a.959.959 0 0 0-.957.957v6.097L4.488 5.891a.952.952 0 0 0-1.351 0 .952.952 0 0 0 0 1.351l4.687 4.688a.955.955 0 0 0 1.352 0l4.687-4.688a.952.952 0 0 0 0-1.351.952.952 0 0 0-1.351 0zM3.59 14.937h9.82a.953.953 0 0 0 .953-.957.952.952 0 0 0-.953-.953H3.59a.952.952 0 0 0-.953.953c0 .532.425.957.953.957zm0 0","fill-rule":"evenodd"}})])])])}
-var AttachesBlockvue_type_template_id_d2793378_staticRenderFns = []
+var AttachesBlockvue_type_template_id_f438d3d0_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/AttachesBlock.vue?vue&type=template&id=d2793378&
+// CONCATENATED MODULE: ./src/components/AttachesBlock.vue?vue&type=template&id=f438d3d0&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.concat.js
 var es_array_concat = __webpack_require__("99af");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.function.name.js
+var es_function_name = __webpack_require__("b0c0");
+
 // EXTERNAL MODULE: ./src/filters/byteFormatter.js
 var byteFormatter = __webpack_require__("573e");
 var byteFormatter_default = /*#__PURE__*/__webpack_require__.n(byteFormatter);
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AttachesBlock.vue?vue&type=script&lang=js&
 
+
 //
 //
 //
@@ -19812,10 +19845,10 @@ var extensions = {
   props: ["data"],
   computed: {
     color: function color() {
-      return extensions[this.data.file.extension];
+      return extensions[this.data.file.extension.toLowerCase()];
     },
     url: function url() {
-      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id);
+      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id, "?name=").concat(this.data.file.name);
     }
   }
 });
@@ -19931,8 +19964,8 @@ function normalizeComponent (
 
 var component = normalizeComponent(
   components_AttachesBlockvue_type_script_lang_js_,
-  AttachesBlockvue_type_template_id_d2793378_render,
+  AttachesBlockvue_type_template_id_f438d3d0_render,
-  AttachesBlockvue_type_template_id_d2793378_staticRenderFns,
+  AttachesBlockvue_type_template_id_f438d3d0_staticRenderFns,
   false,
   null,
   null,

dist/block-renderer.umd.js

@@ -19131,6 +19131,35 @@ module.exports = function (METHOD_NAME) {
 };
 
 
+/***/ }),
+
+/***/ "b0c0":
+/***/ (function(module, exports, __webpack_require__) {
+
+var DESCRIPTORS = __webpack_require__("83ab");
+var defineProperty = __webpack_require__("9bf2").f;
+
+var FunctionPrototype = Function.prototype;
+var FunctionPrototypeToString = FunctionPrototype.toString;
+var nameRE = /^\s*function ([^ (]*)/;
+var NAME = 'name';
+
+// Function instances `.name` property
+// https://tc39.github.io/ecma262/#sec-function-instances-name
+if (DESCRIPTORS && !(NAME in FunctionPrototype)) {
+  defineProperty(FunctionPrototype, NAME, {
+    configurable: true,
+    get: function () {
+      try {
+        return FunctionPrototypeToString.call(this).match(nameRE)[1];
+      } catch (error) {
+        return '';
+      }
+    }
+  });
+}
+
+
 /***/ }),
 
 /***/ "b622":
@@ -19704,22 +19733,26 @@ var staticRenderFns = []
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AttachesBlock.vue?vue&type=template&id=d2793378&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AttachesBlock.vue?vue&type=template&id=f438d3d0&
-var AttachesBlockvue_type_template_id_d2793378_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"attaches-block"},[_c('div',{staticClass:"attaches-block-file-icon",style:({ color: _vm.color }),attrs:{"data-extension":_vm.data.file.extension}},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('svg',{attrs:{"width":"32","height":"40"}},[(_vm.color)?_c('path',{attrs:{"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"}}):_c('g',{attrs:{"fill":"#A8ACB8","fill-rule":"evenodd"}},[_c('path',{attrs:{"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"}}),_c('path',{attrs:{"d":"M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z"}})])])])]),_c('div',{staticClass:"attaches-block-file-info"},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('p',{staticClass:"attaches-block-title"},[_vm._v(_vm._s(_vm.data.file.name))])]),_c('p',{staticClass:"attaches-block-size"},[_vm._v(_vm._s(_vm._f("byteFormatter")(_vm.data.file.size)))])]),_c('a',{staticClass:"attaches-block-file-download-button",attrs:{"href":_vm.url,"target":"_blank"}},[_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","width":"17pt","height":"17pt","viewBox":"0 0 17 17"}},[_c('path',{attrs:{"d":"M9.457 8.945V2.848A.959.959 0 0 0 8.5 1.89a.959.959 0 0 0-.957.957v6.097L4.488 5.891a.952.952 0 0 0-1.351 0 .952.952 0 0 0 0 1.351l4.687 4.688a.955.955 0 0 0 1.352 0l4.687-4.688a.952.952 0 0 0 0-1.351.952.952 0 0 0-1.351 0zM3.59 14.937h9.82a.953.953 0 0 0 .953-.957.952.952 0 0 0-.953-.953H3.59a.952.952 0 0 0-.953.953c0 .532.425.957.953.957zm0 0","fill-rule":"evenodd"}})])])])}
+var AttachesBlockvue_type_template_id_f438d3d0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"attaches-block"},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('div',{staticClass:"attaches-block-file-icon",style:({ color: _vm.color }),attrs:{"data-extension":_vm.data.file.extension}},[_c('svg',{attrs:{"width":"32","height":"40"}},[(_vm.color)?_c('path',{attrs:{"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"}}):_c('g',{attrs:{"fill":"#A8ACB8","fill-rule":"evenodd"}},[_c('path',{attrs:{"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"}}),_c('path',{attrs:{"d":"M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z"}})])])])]),_c('div',{staticClass:"attaches-block-file-info"},[_c('a',{attrs:{"href":_vm.url,"target":"blank"}},[_c('p',{staticClass:"attaches-block-title"},[_vm._v(_vm._s(_vm.data.title))])]),_c('p',{staticClass:"attaches-block-size"},[_vm._v(_vm._s(_vm._f("byteFormatter")(_vm.data.file.size)))])]),_c('a',{staticClass:"attaches-block-file-download-button",attrs:{"href":_vm.url,"target":"_blank"}},[_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","width":"17pt","height":"17pt","viewBox":"0 0 17 17"}},[_c('path',{attrs:{"d":"M9.457 8.945V2.848A.959.959 0 0 0 8.5 1.89a.959.959 0 0 0-.957.957v6.097L4.488 5.891a.952.952 0 0 0-1.351 0 .952.952 0 0 0 0 1.351l4.687 4.688a.955.955 0 0 0 1.352 0l4.687-4.688a.952.952 0 0 0 0-1.351.952.952 0 0 0-1.351 0zM3.59 14.937h9.82a.953.953 0 0 0 .953-.957.952.952 0 0 0-.953-.953H3.59a.952.952 0 0 0-.953.953c0 .532.425.957.953.957zm0 0","fill-rule":"evenodd"}})])])])}
-var AttachesBlockvue_type_template_id_d2793378_staticRenderFns = []
+var AttachesBlockvue_type_template_id_f438d3d0_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/AttachesBlock.vue?vue&type=template&id=d2793378&
+// CONCATENATED MODULE: ./src/components/AttachesBlock.vue?vue&type=template&id=f438d3d0&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.concat.js
 var es_array_concat = __webpack_require__("99af");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.function.name.js
+var es_function_name = __webpack_require__("b0c0");
+
 // EXTERNAL MODULE: ./src/filters/byteFormatter.js
 var byteFormatter = __webpack_require__("573e");
 var byteFormatter_default = /*#__PURE__*/__webpack_require__.n(byteFormatter);
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AttachesBlock.vue?vue&type=script&lang=js&
 
+
 //
 //
 //
@@ -19821,10 +19854,10 @@ var extensions = {
   props: ["data"],
   computed: {
     color: function color() {
-      return extensions[this.data.file.extension];
+      return extensions[this.data.file.extension.toLowerCase()];
     },
     url: function url() {
-      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id);
+      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id, "?name=").concat(this.data.file.name);
     }
   }
 });
@@ -19940,8 +19973,8 @@ function normalizeComponent (
 
 var component = normalizeComponent(
   components_AttachesBlockvue_type_script_lang_js_,
-  AttachesBlockvue_type_template_id_d2793378_render,
+  AttachesBlockvue_type_template_id_f438d3d0_render,
-  AttachesBlockvue_type_template_id_d2793378_staticRenderFns,
+  AttachesBlockvue_type_template_id_f438d3d0_staticRenderFns,
   false,
   null,
   null,

package.json

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

src/components/AttachesBlock.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="attaches-block">
-    <div
-      :data-extension="data.file.extension"
-      :style="{ color: color }"
-      class="attaches-block-file-icon"
-    >
     <a
       :href="url"
       target="blank"
+    >
+      <div
+        :data-extension="data.file.extension"
+        class="attaches-block-file-icon"
+        :style="{ color: color }"
       >
         <svg
           width="32"
@@ -29,14 +29,14 @@
             <path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z" />
           </g>
         </svg>
-      </a>
       </div>
+    </a>
     <div class="attaches-block-file-info">
       <a
         :href="url"
         target="blank"
       >
-        <p class="attaches-block-title">{{ data.file.name }}</p>
+        <p class="attaches-block-title">{{ data.title }}</p>
       </a>
       <p class="attaches-block-size">{{ data.file.size | byteFormatter }}</p>
     </div>
@@ -102,10 +102,10 @@ export default {
   props: ["data"],
   computed: {
     color() {
-      return extensions[this.data.file.extension];
+      return extensions[this.data.file.extension.toLowerCase()];
     },
     url() {
-      return `${this.$baseFileUrl}/${this.data.file.id}`;
+      return `${this.$baseFileUrl}/${this.data.file.id}?name=${this.data.file.name}`;
     }
   }
 };