fix: update decorator order, add overrides

janniks · Jul 26, 2024 · d1ba7c0
1 parent 78975af
commit d1ba7c0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -16,6 +16,7 @@ The `NotionRenderer` component offers a few properties
 - [`blockMap`](#blockMap) – required
 - [`blockOverrides`](#blockOverrides) – default: `{}`
 - [`contentId`](#contentId) – default: `undefined`
+- [`decoratorOverrides`](#decoratorOverrides) – default: `{}`
 - [`embedAllow`](#embedAllow) – default: `"fullscreen"`
 - [`fullPage`](#fullPage) – default: `false`
 - [`hideList`](#hideList) – default: `[]`
@@ -52,6 +53,11 @@ blockOverrides: {
 If this is `undefined` the _first_ block is rendered.
 _Usually the first block contains the rest of the page._
 
+### `decoratorOverrides`: Object
+
+– the Notion text decorators that should be overriden by custom registered Vue components.
+A key-value pair Object of Notion decorator names to Vue component names.
+
 ### `embedAllow`: String
 
 – the [`allow` feature policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow) for embedded `<iframe>`s (e.g. YouTube videos).
@@ -223,7 +229,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"],
 };
 ```
 

diff --git a/src/blocks/decorator.vue b/src/blocks/decorator.vue
@@ -1,19 +1,24 @@
 <template>
   <component
-    v-if="isPageLink && hasPageLinkOptions"
+    v-if="decoratorOverrides.hasOwnProperty(decoratorKey)"
+    :is="decoratorOverrides[decoratorKey]"
+    v-bind="pass"
+  />
+  <NotionMention
+    v-else-if="isPageLink && decoratorKey === 'lm'"
+    :mention="decoratorValue"
+    v-bind="pass"
+  />
+  <component
+    v-else-if="isPageLink && hasPageLinkOptions"
     class="notion-link"
     v-bind="pageLinkProps(decoratorValue)"
     :is="pageLinkOptions.component"
   >
     {{ pageLinkTitle }}
   </component>
-  <NotionMention
-    v-else-if="isPageLink && decoratorKey === 'lm'"
-    :mention="decoratorValue"
-    v-bind="pass"
-  />
   <a
-    v-else-if="isPageLink"
+    v-else-if="isPageLink && typeof decoratorValue === 'string'"
     class="notion-link"
     :target="pageLinkTarget"
     :href="mapPageUrl(decoratorValue)"
@@ -77,6 +82,10 @@ import NotionMention from "@/blocks/helpers/mention";
 export default {
   extends: Blockable,
   name: "NotionDecorator",
+  mounted() {
+    console.log(this);
+    console.log(this.content);
+  },
   props: { ...blockProps, content: Array },
   components: { NotionMention },
   computed: {

diff --git a/src/lib/blockable.js b/src/lib/blockable.js
@@ -5,6 +5,7 @@ export const blockProps = {
   blockOverrides: { type: Object, default: () => ({}) },
   contentId: { type: String, required: false },
   contentIndex: { type: Number, default: 0 },
+  decoratorOverrides: { type: Object, default: () => ({}) },
   embedAllow: { type: String, default: "fullscreen" },
   fullPage: { type: Boolean, default: false },
   hideList: { type: Array, default: () => [] },
@@ -17,7 +18,7 @@ export const blockProps = {
   pageLinkTarget: { type: String, default: "_self" },
   prism: { type: Boolean, default: false },
   textLinkTarget: { type: String, default: "_blank" },
-  todo: { type: Boolean, default: false }
+  todo: { type: Boolean, default: false },
 };
 
 export const blockComputed = {
@@ -28,6 +29,7 @@ export const blockComputed = {
       blockOverrides: this.blockOverrides,
       contentId: this.contentId,
       contentIndex: this.contentIndex,
+      decoratorOverrides: this.decoratorOverrides,
       embedAllow: this.embedAllow,
       fullPage: this.fullPage,
       hideList: this.hideList,
@@ -38,7 +40,7 @@ export const blockComputed = {
       mapPageUrl: this.mapPageUrl,
       pageLinkOptions: this.pageLinkOptions,
       prism: this.prism,
-      todo: this.todo
+      todo: this.todo,
     };
   },
   alt() {
@@ -63,7 +65,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() {
@@ -98,7 +100,7 @@ export const blockComputed = {
   },
   parent() {
     return this.blockMap[this.value?.parent_id];
-  }
+  },
 };
 
 export const Blockable = {
@@ -119,8 +121,8 @@ export const Blockable = {
     },
     pageLinkProps(id) {
       return {
-        [this.pageLinkOptions?.href || "href"]: this.mapPageUrl(id)