Merge pull request #77 from janniks/cleanup-imageoptions

Cleanup options api

Author: janniks

docs/README.md

@@ -18,6 +18,7 @@ The `NotionRenderer` component offers a few properties
 - [`embedAllow`](#embedAllow) – default: `"fullscreen"`
 - [`fullPage`](#fullPage) – default: `false`
 - [`hideList`](#hideList) – default: `[]`
+- [`imageOptions`](#imageOptions) – default: `undefined`
 - [`mapImageUrl`](#mapImageUrl) – default: `defaultMapImageUrl()`
 - [`mapPageUrl`](#mapPageUrl) – default: `defaultMapPageUrl()`
 - [`pageLinkOptions`](#pageLinkOptions) – default: `undefined`
@@ -50,6 +51,23 @@ The default allows embeds to enter fullscreen.
 
 – a list of Notion blocks (e.g. `"callout"`) that should not be rendered.
 
+### `imageOptions`: Object
+
+– are used to override default image rendering.
+`imageOptions` is an `Object` that requires a `component` parameter.
+The `src` attribute is optional and defaults to `src`.
+Any additional key value pairs are spread onto the component as element attributes.
+
+e.g. to use `nuxt-img` components instead of HTML `img` elements
+
+```js
+imageOptions: {
+  component: "nuxt-img",
+  "some-attribute": "vue-notion-attr",
+  // src: 'src', // (default) can be overridden to customize the key of the `src` attribute
+}
+```
+
 ### `mapImageUrl`: Function
 
 – a function that receives `(imageUrl: String, block: Object)` and returns a `url: String` that should be used during rendering.
@@ -74,7 +92,8 @@ mapPageUrl(pageId = "") {
 ### `pageLinkOptions`: Object
 
 – are used to override links to other Notion pages with custom Vue components.
-`pageLinkOptions` is an `Object` that requires a `component` and a `href` parameter.
+`pageLinkOptions` is an `Object` that requires a `component` parameter.
+The `href` attribute is optional and defaults to `href`.
 
 e.g., to use `NuxtLink` components instead of HTML `a` elements
 
@@ -89,17 +108,6 @@ 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.
@@ -201,7 +209,7 @@ There are a few required steps to allow Nuxt to work with vue-notion
 // nuxt.config.js
 export default {
   // ...
-  buildModules: ["vue-notion/nuxt"],
+  buildModules: ["vue-notion/nuxt"]
 };
 ```
 

src/blocks/helpers/image.vue

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

src/lib/blockable.js

@@ -7,16 +7,16 @@ export const blockProps = {
   embedAllow: { type: String, default: "fullscreen" },
   fullPage: { type: Boolean, default: false },
   hideList: { type: Array, default: () => [] },
+  imageOptions: Object,
+  katex: { type: Boolean, default: false },
   level: { type: Number, default: 0 },
   mapImageUrl: Function,
   mapPageUrl: Function,
   pageLinkOptions: Object,
-  imageOptions: Object,
   pageLinkTarget: { type: String, default: "_self" },
   prism: { type: Boolean, default: false },
-  katex: { type: Boolean, default: false },
   textLinkTarget: { type: String, default: "_blank" },
-  todo: { type: Boolean, default: false },
+  todo: { type: Boolean, default: false }
 };
 
 export const blockComputed = {
@@ -29,16 +29,19 @@ export const blockComputed = {
       embedAllow: this.embedAllow,
       fullPage: this.fullPage,
       hideList: this.hideList,
+      imageOptions: this.imageOptions,
+      katex: this.katex,
       level: this.level,
       mapImageUrl: this.mapImageUrl,
       mapPageUrl: this.mapPageUrl,
       pageLinkOptions: this.pageLinkOptions,
-      imageOptions: this.imageOptions,
       prism: this.prism,
-      katex: this.katex,
-      todo: this.todo,
+      todo: this.todo
     };
   },
+  alt() {
+    return this.caption?.[0][0];
+  },
   block() {
     const id = this.contentId || Object.keys(this.blockMap)[0];
     return this.blockMap[id];
@@ -58,7 +61,7 @@ export const blockComputed = {
       block_color: this.format?.block_color,
       bookmark_icon: this.format?.bookmark_icon,
       bookmark_cover: this.format?.bookmark_cover,
-      display_source: this.format?.display_source,
+      display_source: this.format?.display_source
     };
   },
   icon() {
@@ -76,6 +79,9 @@ export const blockComputed = {
   description() {
     return this.properties?.description;
   },
+  src() {
+    return this.mapImageUrl(this.properties?.source[0][0], this.block);
+  },
   title() {
     return this.properties?.title;
   },
@@ -90,7 +96,7 @@ export const blockComputed = {
   },
   parent() {
     return this.blockMap[this.value?.parent_id];
-  },
+  }
 };
 
 export default {
@@ -111,8 +117,8 @@ export default {
     },
     pageLinkProps(id) {
       return {
-        [this.pageLinkOptions.href]: this.mapPageUrl(id),
+        [this.pageLinkOptions?.href || "href"]: this.mapPageUrl(id)
       };
-    },
-  },
+    }
+  }
 };