Merge pull request #74 from eliasparis/custom-image-options

feat: opens the door for custom image attrs or component through props

Author: janniks

docs/README.md

@@ -89,6 +89,17 @@ pageLinkOptions: {
 
 – the [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) of links referencing other pages (skipped for pages with `pageLinkeOptions`)
 
+### `imageOptions`: Object
+
+– this Object can be use to specify a custom Vue component you want to use to render pictures. Any other key in this object will spread as element attributes
+
+```js
+imageOptions: {
+  component: "LazyLoadImage",
+  attribute: "vue-notion-attr"
+}
+```
+
 ### `prism`: Boolean
 
 – whether or not syntax-highlighting using Prims.js should be activated.

src/blocks/helpers/image.vue

@@ -1,24 +1,32 @@
 <template>
   <div v-if="f.block_aspect_ratio" :style="style">
-    <img class="notion-image-inset" :alt="alt || 'Notion image'" :src="src" />
+    <component v-if="hasImageComponent" :is="imageOptions.component" class="notion-image-inset" :alt="alt || 'Notion image'" :src="src" v-bind="attrs"/>
+    <img v-else class="notion-image-inset" :alt="alt || 'Notion image'" :src="src" v-bind="attrs" />
   </div>
-  <img v-else :alt="caption" :src="src" />
+  <component v-else-if="hasImageComponent" :is="imageOptions.component" :alt="alt || 'Notion image'" :src="src" v-bind="attrs" />
+  <img v-else :alt="caption" :src="src" v-bind="attrs" />
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import Blockable from "@/lib/blockable";
 
 export default {
   extends: Blockable,
   name: "NotionImage",
   computed: {
-    ...blockComputed,
     alt() {
       return this.caption?.[0][0];
     },
     src() {
       return this.mapImageUrl(this.properties?.source[0][0], this.block);
     },
+    attrs() {
+      const {component, ...attrs} = this.imageOptions || {}
+      return attrs;  
+    },
+    hasImageComponent() {
+      return !!this.imageOptions?.component;
+    },
     style() {
       const aspectRatio =
         this.f.block_aspect_ratio || this.f.block_height / this.f.block_width;

src/components/notion-renderer.vue

@@ -33,6 +33,7 @@ export default {
     mapImageUrl: { type: Function, default: defaultMapImageUrl },
     mapPageUrl: { type: Function, default: defaultMapPageUrl },
     pageLinkOptions: Object,
+    imageOptions: Object,
     prism: { type: Boolean, default: false },
     todo: { type: Boolean, default: false },
   },

src/lib/blockable.js

@@ -11,6 +11,7 @@ export const blockProps = {
   mapImageUrl: Function,
   mapPageUrl: Function,
   pageLinkOptions: Object,
+  imageOptions: Object,
   pageLinkTarget: { type: String, default: "_self" },
   prism: { type: Boolean, default: false },
   katex: { type: Boolean, default: false },
@@ -32,6 +33,7 @@ export const blockComputed = {
       mapImageUrl: this.mapImageUrl,
       mapPageUrl: this.mapPageUrl,
       pageLinkOptions: this.pageLinkOptions,
+      imageOptions: this.imageOptions,
       prism: this.prism,
       katex: this.katex,
       todo: this.todo,