Update for lazy loading images

dist/block-renderer.common.js

@@ -331,6 +331,49 @@ module.exports = function (R, S) {
 
 
 
+/***/ }),
+
+/***/ "159b":
+/***/ (function(module, exports, __webpack_require__) {
+
+var global = __webpack_require__("da84");
+var DOMIterables = __webpack_require__("fdbc");
+var forEach = __webpack_require__("17c2");
+var createNonEnumerableProperty = __webpack_require__("9112");
+
+for (var COLLECTION_NAME in DOMIterables) {
+  var Collection = global[COLLECTION_NAME];
+  var CollectionPrototype = Collection && Collection.prototype;
+  // some Chrome versions have non-configurable methods on DOMTokenList
+  if (CollectionPrototype && CollectionPrototype.forEach !== forEach) try {
+    createNonEnumerableProperty(CollectionPrototype, 'forEach', forEach);
+  } catch (error) {
+    CollectionPrototype.forEach = forEach;
+  }
+}
+
+
+/***/ }),
+
+/***/ "17c2":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var $forEach = __webpack_require__("b727").forEach;
+var arrayMethodIsStrict = __webpack_require__("a640");
+var arrayMethodUsesToLength = __webpack_require__("ae40");
+
+var STRICT_METHOD = arrayMethodIsStrict('forEach');
+var USES_TO_LENGTH = arrayMethodUsesToLength('forEach');
+
+// `Array.prototype.forEach` method implementation
+// https://tc39.github.io/ecma262/#sec-array.prototype.foreach
+module.exports = (!STRICT_METHOD || !USES_TO_LENGTH) ? function forEach(callbackfn /* , thisArg */) {
+  return $forEach(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);
+} : [].forEach;
+
+
 /***/ }),
 
 /***/ "18a5":
@@ -17845,6 +17888,23 @@ var katex_renderToHTMLTree = function renderToHTMLTree(expression, options) {
 /******/ ])["default"];
 });
 
+/***/ }),
+
+/***/ "4160":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__("23e7");
+var forEach = __webpack_require__("17c2");
+
+// `Array.prototype.forEach` method
+// https://tc39.github.io/ecma262/#sec-array.prototype.foreach
+$({ target: 'Array', proto: true, forced: [].forEach != forEach }, {
+  forEach: forEach
+});
+
+
 /***/ }),
 
 /***/ "428f":
@@ -18473,6 +18533,24 @@ module.exports = !fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "8418":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var toPrimitive = __webpack_require__("c04e");
+var definePropertyModule = __webpack_require__("9bf2");
+var createPropertyDescriptor = __webpack_require__("5c6c");
+
+module.exports = function (object, key, value) {
+  var propertyKey = toPrimitive(key);
+  if (propertyKey in object) definePropertyModule.f(object, propertyKey, createPropertyDescriptor(0, value));
+  else object[propertyKey] = value;
+};
+
+
 /***/ }),
 
 /***/ "857a":
@@ -18795,6 +18873,74 @@ $({ target: 'String', proto: true, forced: forcedStringHTMLMethod('link') }, {
 });
 
 
+/***/ }),
+
+/***/ "99af":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__("23e7");
+var fails = __webpack_require__("d039");
+var isArray = __webpack_require__("e8b5");
+var isObject = __webpack_require__("861d");
+var toObject = __webpack_require__("7b0b");
+var toLength = __webpack_require__("50c4");
+var createProperty = __webpack_require__("8418");
+var arraySpeciesCreate = __webpack_require__("65f0");
+var arrayMethodHasSpeciesSupport = __webpack_require__("1dde");
+var wellKnownSymbol = __webpack_require__("b622");
+var V8_VERSION = __webpack_require__("2d00");
+
+var IS_CONCAT_SPREADABLE = wellKnownSymbol('isConcatSpreadable');
+var MAX_SAFE_INTEGER = 0x1FFFFFFFFFFFFF;
+var MAXIMUM_ALLOWED_INDEX_EXCEEDED = 'Maximum allowed index exceeded';
+
+// We can't use this feature detection in V8 since it causes
+// deoptimization and serious performance degradation
+// https://github.com/zloirock/core-js/issues/679
+var IS_CONCAT_SPREADABLE_SUPPORT = V8_VERSION >= 51 || !fails(function () {
+  var array = [];
+  array[IS_CONCAT_SPREADABLE] = false;
+  return array.concat()[0] !== array;
+});
+
+var SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('concat');
+
+var isConcatSpreadable = function (O) {
+  if (!isObject(O)) return false;
+  var spreadable = O[IS_CONCAT_SPREADABLE];
+  return spreadable !== undefined ? !!spreadable : isArray(O);
+};
+
+var FORCED = !IS_CONCAT_SPREADABLE_SUPPORT || !SPECIES_SUPPORT;
+
+// `Array.prototype.concat` method
+// https://tc39.github.io/ecma262/#sec-array.prototype.concat
+// with adding support of @@isConcatSpreadable and @@species
+$({ target: 'Array', proto: true, forced: FORCED }, {
+  concat: function concat(arg) { // eslint-disable-line no-unused-vars
+    var O = toObject(this);
+    var A = arraySpeciesCreate(O, 0);
+    var n = 0;
+    var i, k, length, len, E;
+    for (i = -1, length = arguments.length; i < length; i++) {
+      E = i === -1 ? O : arguments[i];
+      if (isConcatSpreadable(E)) {
+        len = toLength(E.length);
+        if (n + len > MAX_SAFE_INTEGER) throw TypeError(MAXIMUM_ALLOWED_INDEX_EXCEEDED);
+        for (k = 0; k < len; k++, n++) if (k in E) createProperty(A, n, E[k]);
+      } else {
+        if (n >= MAX_SAFE_INTEGER) throw TypeError(MAXIMUM_ALLOWED_INDEX_EXCEEDED);
+        createProperty(A, n++, E);
+      }
+    }
+    A.length = n;
+    return A;
+  }
+});
+
+
 /***/ }),
 
 /***/ "9bf2":
@@ -18853,6 +18999,24 @@ exports.BROKEN_CARET = fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "a640":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var fails = __webpack_require__("d039");
+
+module.exports = function (METHOD_NAME, argument) {
+  var method = [][METHOD_NAME];
+  return !!method && fails(function () {
+    // eslint-disable-next-line no-useless-call,no-throw-literal
+    method.call(null, argument || function () { throw 1; }, 1);
+  });
+};
+
+
 /***/ }),
 
 /***/ "a691":
@@ -19495,6 +19659,7 @@ module.exports = function (key) {
 __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
+__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ install; });
 __webpack_require__.d(__webpack_exports__, "BlockContentRenderer", function() { return /* reexport */ BlockContentRenderer; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
@@ -19521,12 +19686,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// 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/BlockContentRenderer.vue?vue&type=template&id=7265d2b8&
+// 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/BlockContentRenderer.vue?vue&type=template&id=94edc506&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.blocks),function(block,index){return _c(block.component,{key:index,tag:"component",attrs:{"data":block.data}})}),1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=7265d2b8&
+// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=94edc506&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
@@ -19874,14 +20039,65 @@ var HeaderBlock_component = normalizeComponent(
 )
 
 /* harmony default export */ var HeaderBlock = (HeaderBlock_component.exports);
-// 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/ImageBlock.vue?vue&type=template&id=681bb202&
+// 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/ImageBlock.vue?vue&type=template&id=a3549484&
-var ImageBlockvue_type_template_id_681bb202_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('figure',[_c('img',{attrs:{"src":_vm.data.file.url}}),_c('figcaption',{domProps:{"innerHTML":_vm._s(_vm.data.caption)}})])}
+var ImageBlockvue_type_template_id_a3549484_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('figure',[_c('img',{directives:[{name:"lazyload",rawName:"v-lazyload"}],attrs:{"src":_vm.lowQualityUrl,"data-src":_vm.highQualityUrl}}),_c('figcaption',{domProps:{"innerHTML":_vm._s(_vm.data.caption)}})])}
-var ImageBlockvue_type_template_id_681bb202_staticRenderFns = []
+var ImageBlockvue_type_template_id_a3549484_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/ImageBlock.vue?vue&type=template&id=681bb202&
+// CONCATENATED MODULE: ./src/components/ImageBlock.vue?vue&type=template&id=a3549484&
 
+// 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.array.for-each.js
+var es_array_for_each = __webpack_require__("4160");
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.for-each.js
+var web_dom_collections_for_each = __webpack_require__("159b");
+
+// CONCATENATED MODULE: ./src/directives/lazy-load-image.js
+
+
+/* harmony default export */ var lazy_load_image = ({
+  inserted: function inserted(el) {
+    function loadImage() {
+      var image = new Image();
+      image.src = el.dataset.src;
+
+      image.onload = function () {
+        el.src = el.dataset.src;
+      };
+    }
+
+    function handleIntersect(entries, observer) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) {
+          return;
+        }
+
+        loadImage();
+        observer.unobserve(el);
+      });
+    }
+
+    function createObserver() {
+      var options = {
+        root: null,
+        threshold: '0'
+      };
+      var observer = new IntersectionObserver(handleIntersect, options);
+      observer.observe(el);
+    }
+
+    if (!window.IntersectionObserver) {
+      loadImage();
+    } else {
+      createObserver();
+    }
+  }
+});
 // 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/ImageBlock.vue?vue&type=script&lang=js&
+
 //
 //
 //
@@ -19890,8 +20106,27 @@ var ImageBlockvue_type_template_id_681bb202_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+//
+
 /* harmony default export */ var ImageBlockvue_type_script_lang_js_ = ({
-  props: ["data"]
+  directives: {
+    lazyload: lazy_load_image
+  },
+  props: ["data"],
+  computed: {
+    lowQualityUrl: function lowQualityUrl() {
+      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id, "?type=jpg&w=100&b=50");
+    },
+    highQualityUrl: function highQualityUrl() {
+      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id, "?w=1200");
+    }
+  },
+  mounted: function mounted() {
+    console.log("Hallo", this.$baseFileUrl);
+  }
 });
 // CONCATENATED MODULE: ./src/components/ImageBlock.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_ImageBlockvue_type_script_lang_js_ = (ImageBlockvue_type_script_lang_js_); 
@@ -19905,8 +20140,8 @@ var ImageBlockvue_type_template_id_681bb202_staticRenderFns = []
 
 var ImageBlock_component = normalizeComponent(
   components_ImageBlockvue_type_script_lang_js_,
-  ImageBlockvue_type_template_id_681bb202_render,
+  ImageBlockvue_type_template_id_a3549484_render,
-  ImageBlockvue_type_template_id_681bb202_staticRenderFns,
+  ImageBlockvue_type_template_id_a3549484_staticRenderFns,
   false,
   null,
   null,
@@ -20221,7 +20456,7 @@ var componentTypes = {
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,
-  link: LinkBlock,
+  linkEmbed: LinkBlock,
   list: ListBlock,
   math: MathBlock,
   paragraph: ParagraphBlock,
@@ -20287,6 +20522,10 @@ var BlockContentRenderer_component = normalizeComponent(
 /* harmony default export */ var BlockContentRenderer = (BlockContentRenderer_component.exports);
 // CONCATENATED MODULE: ./src/main.js
 
+function install(Vue) {
+  console.log("Ill be executed hopefully");
+  Vue.protoype.$baseFileUrl = "";
+}
 /* harmony default export */ var main = (BlockContentRenderer);
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
@@ -20310,6 +20549,48 @@ module.exports = function (it) {
 };
 
 
+/***/ }),
+
+/***/ "fdbc":
+/***/ (function(module, exports) {
+
+// iterable DOM collections
+// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
+module.exports = {
+  CSSRuleList: 0,
+  CSSStyleDeclaration: 0,
+  CSSValueList: 0,
+  ClientRectList: 0,
+  DOMRectList: 0,
+  DOMStringList: 0,
+  DOMTokenList: 1,
+  DataTransferItemList: 0,
+  FileList: 0,
+  HTMLAllCollection: 0,
+  HTMLCollection: 0,
+  HTMLFormElement: 0,
+  HTMLSelectElement: 0,
+  MediaList: 0,
+  MimeTypeArray: 0,
+  NamedNodeMap: 0,
+  NodeList: 1,
+  PaintRequestList: 0,
+  Plugin: 0,
+  PluginArray: 0,
+  SVGLengthList: 0,
+  SVGNumberList: 0,
+  SVGPathSegList: 0,
+  SVGPointList: 0,
+  SVGStringList: 0,
+  SVGTransformList: 0,
+  SourceBufferList: 0,
+  StyleSheetList: 0,
+  TextTrackCueList: 0,
+  TextTrackList: 0,
+  TouchList: 0
+};
+
+
 /***/ }),
 
 /***/ "fdbf":

dist/block-renderer.umd.js

@@ -340,6 +340,49 @@ module.exports = function (R, S) {
 
 
 
+/***/ }),
+
+/***/ "159b":
+/***/ (function(module, exports, __webpack_require__) {
+
+var global = __webpack_require__("da84");
+var DOMIterables = __webpack_require__("fdbc");
+var forEach = __webpack_require__("17c2");
+var createNonEnumerableProperty = __webpack_require__("9112");
+
+for (var COLLECTION_NAME in DOMIterables) {
+  var Collection = global[COLLECTION_NAME];
+  var CollectionPrototype = Collection && Collection.prototype;
+  // some Chrome versions have non-configurable methods on DOMTokenList
+  if (CollectionPrototype && CollectionPrototype.forEach !== forEach) try {
+    createNonEnumerableProperty(CollectionPrototype, 'forEach', forEach);
+  } catch (error) {
+    CollectionPrototype.forEach = forEach;
+  }
+}
+
+
+/***/ }),
+
+/***/ "17c2":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var $forEach = __webpack_require__("b727").forEach;
+var arrayMethodIsStrict = __webpack_require__("a640");
+var arrayMethodUsesToLength = __webpack_require__("ae40");
+
+var STRICT_METHOD = arrayMethodIsStrict('forEach');
+var USES_TO_LENGTH = arrayMethodUsesToLength('forEach');
+
+// `Array.prototype.forEach` method implementation
+// https://tc39.github.io/ecma262/#sec-array.prototype.foreach
+module.exports = (!STRICT_METHOD || !USES_TO_LENGTH) ? function forEach(callbackfn /* , thisArg */) {
+  return $forEach(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);
+} : [].forEach;
+
+
 /***/ }),
 
 /***/ "18a5":
@@ -17854,6 +17897,23 @@ var katex_renderToHTMLTree = function renderToHTMLTree(expression, options) {
 /******/ ])["default"];
 });
 
+/***/ }),
+
+/***/ "4160":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__("23e7");
+var forEach = __webpack_require__("17c2");
+
+// `Array.prototype.forEach` method
+// https://tc39.github.io/ecma262/#sec-array.prototype.foreach
+$({ target: 'Array', proto: true, forced: [].forEach != forEach }, {
+  forEach: forEach
+});
+
+
 /***/ }),
 
 /***/ "428f":
@@ -18482,6 +18542,24 @@ module.exports = !fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "8418":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var toPrimitive = __webpack_require__("c04e");
+var definePropertyModule = __webpack_require__("9bf2");
+var createPropertyDescriptor = __webpack_require__("5c6c");
+
+module.exports = function (object, key, value) {
+  var propertyKey = toPrimitive(key);
+  if (propertyKey in object) definePropertyModule.f(object, propertyKey, createPropertyDescriptor(0, value));
+  else object[propertyKey] = value;
+};
+
+
 /***/ }),
 
 /***/ "857a":
@@ -18804,6 +18882,74 @@ $({ target: 'String', proto: true, forced: forcedStringHTMLMethod('link') }, {
 });
 
 
+/***/ }),
+
+/***/ "99af":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__("23e7");
+var fails = __webpack_require__("d039");
+var isArray = __webpack_require__("e8b5");
+var isObject = __webpack_require__("861d");
+var toObject = __webpack_require__("7b0b");
+var toLength = __webpack_require__("50c4");
+var createProperty = __webpack_require__("8418");
+var arraySpeciesCreate = __webpack_require__("65f0");
+var arrayMethodHasSpeciesSupport = __webpack_require__("1dde");
+var wellKnownSymbol = __webpack_require__("b622");
+var V8_VERSION = __webpack_require__("2d00");
+
+var IS_CONCAT_SPREADABLE = wellKnownSymbol('isConcatSpreadable');
+var MAX_SAFE_INTEGER = 0x1FFFFFFFFFFFFF;
+var MAXIMUM_ALLOWED_INDEX_EXCEEDED = 'Maximum allowed index exceeded';
+
+// We can't use this feature detection in V8 since it causes
+// deoptimization and serious performance degradation
+// https://github.com/zloirock/core-js/issues/679
+var IS_CONCAT_SPREADABLE_SUPPORT = V8_VERSION >= 51 || !fails(function () {
+  var array = [];
+  array[IS_CONCAT_SPREADABLE] = false;
+  return array.concat()[0] !== array;
+});
+
+var SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('concat');
+
+var isConcatSpreadable = function (O) {
+  if (!isObject(O)) return false;
+  var spreadable = O[IS_CONCAT_SPREADABLE];
+  return spreadable !== undefined ? !!spreadable : isArray(O);
+};
+
+var FORCED = !IS_CONCAT_SPREADABLE_SUPPORT || !SPECIES_SUPPORT;
+
+// `Array.prototype.concat` method
+// https://tc39.github.io/ecma262/#sec-array.prototype.concat
+// with adding support of @@isConcatSpreadable and @@species
+$({ target: 'Array', proto: true, forced: FORCED }, {
+  concat: function concat(arg) { // eslint-disable-line no-unused-vars
+    var O = toObject(this);
+    var A = arraySpeciesCreate(O, 0);
+    var n = 0;
+    var i, k, length, len, E;
+    for (i = -1, length = arguments.length; i < length; i++) {
+      E = i === -1 ? O : arguments[i];
+      if (isConcatSpreadable(E)) {
+        len = toLength(E.length);
+        if (n + len > MAX_SAFE_INTEGER) throw TypeError(MAXIMUM_ALLOWED_INDEX_EXCEEDED);
+        for (k = 0; k < len; k++, n++) if (k in E) createProperty(A, n, E[k]);
+      } else {
+        if (n >= MAX_SAFE_INTEGER) throw TypeError(MAXIMUM_ALLOWED_INDEX_EXCEEDED);
+        createProperty(A, n++, E);
+      }
+    }
+    A.length = n;
+    return A;
+  }
+});
+
+
 /***/ }),
 
 /***/ "9bf2":
@@ -18862,6 +19008,24 @@ exports.BROKEN_CARET = fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "a640":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var fails = __webpack_require__("d039");
+
+module.exports = function (METHOD_NAME, argument) {
+  var method = [][METHOD_NAME];
+  return !!method && fails(function () {
+    // eslint-disable-next-line no-useless-call,no-throw-literal
+    method.call(null, argument || function () { throw 1; }, 1);
+  });
+};
+
+
 /***/ }),
 
 /***/ "a691":
@@ -19504,6 +19668,7 @@ module.exports = function (key) {
 __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
+__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ install; });
 __webpack_require__.d(__webpack_exports__, "BlockContentRenderer", function() { return /* reexport */ BlockContentRenderer; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
@@ -19530,12 +19695,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// 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/BlockContentRenderer.vue?vue&type=template&id=7265d2b8&
+// 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/BlockContentRenderer.vue?vue&type=template&id=94edc506&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.blocks),function(block,index){return _c(block.component,{key:index,tag:"component",attrs:{"data":block.data}})}),1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=7265d2b8&
+// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=94edc506&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
@@ -19883,14 +20048,65 @@ var HeaderBlock_component = normalizeComponent(
 )
 
 /* harmony default export */ var HeaderBlock = (HeaderBlock_component.exports);
-// 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/ImageBlock.vue?vue&type=template&id=681bb202&
+// 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/ImageBlock.vue?vue&type=template&id=a3549484&
-var ImageBlockvue_type_template_id_681bb202_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('figure',[_c('img',{attrs:{"src":_vm.data.file.url}}),_c('figcaption',{domProps:{"innerHTML":_vm._s(_vm.data.caption)}})])}
+var ImageBlockvue_type_template_id_a3549484_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('figure',[_c('img',{directives:[{name:"lazyload",rawName:"v-lazyload"}],attrs:{"src":_vm.lowQualityUrl,"data-src":_vm.highQualityUrl}}),_c('figcaption',{domProps:{"innerHTML":_vm._s(_vm.data.caption)}})])}
-var ImageBlockvue_type_template_id_681bb202_staticRenderFns = []
+var ImageBlockvue_type_template_id_a3549484_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/ImageBlock.vue?vue&type=template&id=681bb202&
+// CONCATENATED MODULE: ./src/components/ImageBlock.vue?vue&type=template&id=a3549484&
 
+// 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.array.for-each.js
+var es_array_for_each = __webpack_require__("4160");
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.for-each.js
+var web_dom_collections_for_each = __webpack_require__("159b");
+
+// CONCATENATED MODULE: ./src/directives/lazy-load-image.js
+
+
+/* harmony default export */ var lazy_load_image = ({
+  inserted: function inserted(el) {
+    function loadImage() {
+      var image = new Image();
+      image.src = el.dataset.src;
+
+      image.onload = function () {
+        el.src = el.dataset.src;
+      };
+    }
+
+    function handleIntersect(entries, observer) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) {
+          return;
+        }
+
+        loadImage();
+        observer.unobserve(el);
+      });
+    }
+
+    function createObserver() {
+      var options = {
+        root: null,
+        threshold: '0'
+      };
+      var observer = new IntersectionObserver(handleIntersect, options);
+      observer.observe(el);
+    }
+
+    if (!window.IntersectionObserver) {
+      loadImage();
+    } else {
+      createObserver();
+    }
+  }
+});
 // 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/ImageBlock.vue?vue&type=script&lang=js&
+
 //
 //
 //
@@ -19899,8 +20115,27 @@ var ImageBlockvue_type_template_id_681bb202_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+//
+
 /* harmony default export */ var ImageBlockvue_type_script_lang_js_ = ({
-  props: ["data"]
+  directives: {
+    lazyload: lazy_load_image
+  },
+  props: ["data"],
+  computed: {
+    lowQualityUrl: function lowQualityUrl() {
+      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id, "?type=jpg&w=100&b=50");
+    },
+    highQualityUrl: function highQualityUrl() {
+      return "".concat(this.$baseFileUrl, "/").concat(this.data.file.id, "?w=1200");
+    }
+  },
+  mounted: function mounted() {
+    console.log("Hallo", this.$baseFileUrl);
+  }
 });
 // CONCATENATED MODULE: ./src/components/ImageBlock.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_ImageBlockvue_type_script_lang_js_ = (ImageBlockvue_type_script_lang_js_); 
@@ -19914,8 +20149,8 @@ var ImageBlockvue_type_template_id_681bb202_staticRenderFns = []
 
 var ImageBlock_component = normalizeComponent(
   components_ImageBlockvue_type_script_lang_js_,
-  ImageBlockvue_type_template_id_681bb202_render,
+  ImageBlockvue_type_template_id_a3549484_render,
-  ImageBlockvue_type_template_id_681bb202_staticRenderFns,
+  ImageBlockvue_type_template_id_a3549484_staticRenderFns,
   false,
   null,
   null,
@@ -20230,7 +20465,7 @@ var componentTypes = {
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,
-  link: LinkBlock,
+  linkEmbed: LinkBlock,
   list: ListBlock,
   math: MathBlock,
   paragraph: ParagraphBlock,
@@ -20296,6 +20531,10 @@ var BlockContentRenderer_component = normalizeComponent(
 /* harmony default export */ var BlockContentRenderer = (BlockContentRenderer_component.exports);
 // CONCATENATED MODULE: ./src/main.js
 
+function install(Vue) {
+  console.log("Ill be executed hopefully");
+  Vue.protoype.$baseFileUrl = "";
+}
 /* harmony default export */ var main = (BlockContentRenderer);
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
@@ -20319,6 +20558,48 @@ module.exports = function (it) {
 };
 
 
+/***/ }),
+
+/***/ "fdbc":
+/***/ (function(module, exports) {
+
+// iterable DOM collections
+// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
+module.exports = {
+  CSSRuleList: 0,
+  CSSStyleDeclaration: 0,
+  CSSValueList: 0,
+  ClientRectList: 0,
+  DOMRectList: 0,
+  DOMStringList: 0,
+  DOMTokenList: 1,
+  DataTransferItemList: 0,
+  FileList: 0,
+  HTMLAllCollection: 0,
+  HTMLCollection: 0,
+  HTMLFormElement: 0,
+  HTMLSelectElement: 0,
+  MediaList: 0,
+  MimeTypeArray: 0,
+  NamedNodeMap: 0,
+  NodeList: 1,
+  PaintRequestList: 0,
+  Plugin: 0,
+  PluginArray: 0,
+  SVGLengthList: 0,
+  SVGNumberList: 0,
+  SVGPathSegList: 0,
+  SVGPointList: 0,
+  SVGStringList: 0,
+  SVGTransformList: 0,
+  SourceBufferList: 0,
+  StyleSheetList: 0,
+  TextTrackCueList: 0,
+  TextTrackList: 0,
+  TouchList: 0
+};
+
+
 /***/ }),
 
 /***/ "fdbf":

package.json

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

src/components/BlockContentRenderer.vue

@@ -28,7 +28,7 @@ const componentTypes = {
   embed: EmbedBlock,
   header: HeaderBlock,
   image: ImageBlock,
-  link: LinkBlock,
+  linkEmbed: LinkBlock,
   list: ListBlock,
   math: MathBlock,
   paragraph: ParagraphBlock,

src/components/ImageBlock.vue

@@ -1,13 +1,33 @@
 <template>
   <figure>
-    <img :src="data.file.url" />
+    <img
+      v-lazyload
+      :src="lowQualityUrl"
+      :data-src="highQualityUrl"
+    />
 
     <figcaption v-html="data.caption"></figcaption>
   </figure>
 </template>
 
 <script>
+import LazyLoadImage from "@/directives/lazy-load-image";
+
 export default {
-  props: ["data"]
+  directives: {
+    lazyload: LazyLoadImage
+  },
+  props: ["data"],
+  computed: {
+    lowQualityUrl() {
+      return `${this.$baseFileUrl}/${this.data.file.id}?type=jpg&w=100&b=50`;
+    },
+    highQualityUrl() {
+      return `${this.$baseFileUrl}/${this.data.file.id}?w=1200`;
+    }
+  },
+  mounted() {
+    console.log("Hallo", this.$baseFileUrl);
+  }
 };
 </script>

src/directives/lazy-load-image.js

@@ -0,0 +1,38 @@
+export default {
+  inserted: (el) => {
+    function loadImage() {
+      const image = new Image();
+      image.src = el.dataset.src;
+      image.onload = () => {
+        el.src = el.dataset.src;
+      };
+    }
+
+    function handleIntersect(entries, observer) {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+
+        loadImage();
+        observer.unobserve(el);
+      });
+    }
+
+    function createObserver() {
+      const options = {
+        root: null,
+        threshold: '0',
+      };
+
+      const observer = new IntersectionObserver(handleIntersect, options);
+      observer.observe(el);
+    }
+
+    if (!window.IntersectionObserver) {
+      loadImage();
+    } else {
+      createObserver();
+    }
+  },
+};

src/main.js

@@ -1,6 +1,9 @@
-import BlockContentRenderer from './components/BlockContentRenderer.vue';
+import BlockContentRenderer from "./components/BlockContentRenderer.vue";
+
+export function install(Vue) {
+  console.log("Ill be executed hopefully");
+  Vue.protoype.$baseFileUrl = "";
+}
 
 export default BlockContentRenderer;
-export {
+export { BlockContentRenderer };
-    BlockContentRenderer
-};