Merge pull request #55 from janniks/add-custom-targets

Add custom link targets

Author: janniks

docs/README.md

@@ -15,12 +15,15 @@ The `NotionRenderer` component offers a few properties
 
 - [`blockMap`](#blockMap) – required
 - [`contentId`](#contentId) – default: `undefined`
-- [`embedAllow`](#embedAllow) – default: `fullscreen`
+- [`embedAllow`](#embedAllow) – default: `"fullscreen"`
 - [`fullPage`](#fullPage) – default: `false`
 - [`hideList`](#hideList) – default: `[]`
 - [`mapImageUrl`](#mapImageUrl) – default: `defaultMapImageUrl()`
 - [`mapPageUrl`](#mapPageUrl) – default: `defaultMapPageUrl()`
 - [`pageLinkOptions`](#pageLinkOptions) – default: `undefined`
+- [`pageLinkTarget`](#pageLinkTarget) – default: `"_self"`
+- [`prism`](#prism) – default: `false`
+- [`textLinkTarget`](#textLinkTarget) – default: `"_blank"`
 
 ### `blockMap`: Object
 
@@ -81,12 +84,20 @@ pageLinkOptions: {
 }
 ```
 
+### `pageLinkTarget`: String
+
+– 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`)
+
 ### `prism`: Boolean
 
 – whether or not syntax-highlighting using Prims.js should be activated.
 
 > Check the `docs#syntax-highlighting` section below for more details.
 
+### `textLinkTarget`: String
+
+– the [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) of links
+
 ## Syntax-Highlighting
 
 The following steps are required to add syntax-highlighting using Prism.js

src/blocks/decorator.vue

@@ -1,11 +1,19 @@
 <template>
+  <component
+    v-if="isPageLink && hasPageLinkOptions"
+    class="notion-page-link"
+    v-bind="pageLinkProps(decoratorValue)"
+    :is="pageLinkOptions.component"
+  >
+    {{ pageLinkTitle }}
+  </component>
   <a
-    v-if="isPageLink"
+    v-else-if="isPageLink"
     class="notion-link"
-    target="_blank"
-    :href="decoratorValue"
-    >{{ pageLinkTitle }}
-  </a>
+    :target="pageLinkTarget"
+    :href="mapPageUrl(decoratorValue)"
+    >{{ pageLinkTitle }}</a
+  >
   <span v-else-if="decorators.length === 0">{{ text }}</span>
   <span v-else-if="decoratorKey === 'h'" :class="'notion-' + decoratorValue"
     ><NotionDecorator :content="nextContent" v-bind="pass" />
@@ -25,7 +33,7 @@
   <a
     v-else-if="decoratorKey === 'a'"
     class="notion-link"
-    target="_blank"
+    :target="target"
     :href="decoratorValue"
   >
     <NotionDecorator :content="nextContent" v-bind="pass" />
@@ -74,9 +82,15 @@ export default {
     pageLinkTitle() {
       return (
         this.blockMap?.[this.decoratorValue]?.value?.properties
-          ?.title?.[0]?.[0] || "this"
+          ?.title?.[0]?.[0] || "link"
       );
     },
+    target() {
+      if (this.type === "page") {
+        return this.pageLinkTarget;
+      }
+      return this.textLinkTarget;
+    },
   },
 };
 </script>

src/blocks/page.vue

@@ -29,7 +29,7 @@
   <component
     v-else-if="hasPageLinkOptions"
     class="notion-page-link"
-    v-bind="pageLinkProps"
+    v-bind="pageLinkProps(value.id)"
     :is="pageLinkOptions.component"
   >
     <div class="notion-page-icon">
@@ -39,7 +39,12 @@
       <NotionTextRenderer :text="title" v-bind="pass" />
     </div>
   </component>
-  <a v-else class="notion-page-link" :href="mapPageUrl(value.id)">
+  <a
+    v-else
+    class="notion-page-link"
+    :target="pageLinkTarget"
+    :href="mapPageUrl(value.id)"
+  >
     <div class="notion-page-icon">
       <NotionPageIcon v-bind="pass" />
     </div>
@@ -66,12 +71,6 @@ export default {
         (1 - (this.format.page_cover_position || 0.5)) * 100;
       return { objectPosition: `center ${coverPosition}%` };
     },
-    hasPageLinkOptions() {
-      return this.pageLinkOptions?.component && this.pageLinkOptions?.href;
-    },
-    pageLinkProps() {
-      return { [this.pageLinkOptions.href]: this.mapPageUrl(this.value.id) };
-    },
   },
 };
 </script>

src/blocks/text.vue

@@ -1,12 +1,12 @@
 <template>
-  <p v-if="properties" :class="['notion-text', blockColorClass]">
+  <p v-if="properties" :class="['notion-text', blockColorClass()]">
     <NotionTextRenderer :text="title" v-bind="pass" />
   </p>
   <div v-else class="notion-blank">&nbsp;</div>
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import Blockable from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {

src/lib/blockable.js

@@ -10,7 +10,9 @@ export const blockProps = {
   mapImageUrl: Function,
   mapPageUrl: Function,
   pageLinkOptions: Object,
+  pageLinkTarget: { type: String, default: "_self" },
   prism: { type: Boolean, default: false },
+  textLinkTarget: { type: String, default: "_blank" },
   todo: { type: Boolean, default: false },
 };
 
@@ -77,6 +79,9 @@ export const blockComputed = {
   visible() {
     return !this.hideList.includes(this.type);
   },
+  hasPageLinkOptions() {
+    return this.pageLinkOptions?.component && this.pageLinkOptions?.href;
+  },
 };
 
 export default {
@@ -86,14 +91,19 @@ export default {
     getTextContent,
     isType(t) {
       if (Array.isArray(t)) {
-        return t.includes(this.type) && this.visible;
+        return this.visible && t.includes(this.type);
       }
 
-      return this.type === t && this.visible;
+      return this.visible && this.type === t;
     },
     blockColorClass(suffix = "") {
       const blockColor = this.format?.block_color;
       return blockColor ? `notion-${blockColor}${suffix}` : undefined;
     },
+    pageLinkProps(id) {
+      return {
+        [this.pageLinkOptions.href]: this.mapPageUrl(id),
+      };
+    },
   },
 };