Merge pull request #86 from janniks/add-sync-block

Add sync block

Author: janniks

dev/serve.js

@@ -2,8 +2,10 @@ import Vue from "vue";
 import Dev from "./serve.vue";
 
 import VueKatex from "vue-katex";
+import { NotionRenderer } from "@/entry";
 
 Vue.use(VueKatex);
+Vue.component("NotionRenderer", NotionRenderer);
 
 Vue.config.productionTip = false;
 

dev/serve.vue

@@ -22,6 +22,7 @@ export default {
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
     // equation tester: 2a1d5226d68246deba627012081693f9
+    // sync tester: c10e1556bec44f23a20f71497b3d98c4
     // table tester: bd1de400a8b349dc824f4f00e61d0797
     // todo tester: 235057194b954a60ace89c052a65d102
     this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");

src/blocks/sync-pointer.vue

@@ -0,0 +1,22 @@
+<template>
+  <NotionRenderer
+    v-bind="pass"
+    :blockMap="blockMap"
+    :contentId="referencePointerId"
+  />
+</template>
+
+<script>
+import { Blockable, blockComputed } from "@/lib/blockable";
+
+export default {
+  extends: Blockable,
+  name: "NotionSyncPointer",
+  computed: {
+    ...blockComputed,
+    referencePointerId() {
+      return this.format?.transclusion_reference_pointer?.id;
+    },
+  },
+};
+</script>

src/components/block.vue

@@ -40,6 +40,16 @@
     v-bind="pass"
   />
   <NotionTable v-else-if="isType('table')" v-bind="pass"><slot /></NotionTable>
+  <NotionSyncPointer
+    v-else-if="isRendererRegistered && isType('transclusion_reference')"
+    v-bind="pass"
+  />
+  <div
+    v-else-if="isRendererRegistered && isType('transclusion_container')"
+    class="notion-sync-block"
+  >
+    <slot />
+  </div>
   <NotionTableRow v-else-if="isType('table_row')" v-bind="pass" />
   <hr v-else-if="isType('divider')" class="notion-hr" />
   <div v-else-if="todo && visible">
@@ -51,7 +61,9 @@
 </template>
 
 <script>
-import { Blockable } from "@/lib/blockable";
+import Vue from "vue";
+
+import { Blockable, blockComputed } from "@/lib/blockable";
 
 import NotionBookmark from "@/blocks/bookmark";
 import NotionCallout from "@/blocks/callout";
@@ -63,6 +75,7 @@ import NotionHeader from "@/blocks/header";
 import NotionList from "@/blocks/list";
 import NotionPage from "@/blocks/page";
 import NotionQuote from "@/blocks/quote";
+import NotionSyncPointer from "@/blocks/sync-pointer";
 import NotionTable from "@/blocks/table";
 import NotionTableRow from "@/blocks/table-row";
 import NotionText from "@/blocks/text";
@@ -78,16 +91,24 @@ export default {
     NotionCode,
     NotionColumn,
     NotionEquation,
+    NotionEquation,
     NotionFigure,
     NotionHeader,
     NotionList,
     NotionPage,
     NotionQuote,
+    NotionSyncPointer,
     NotionTable,
     NotionTableRow,
     NotionText,
     NotionTodo,
     NotionToggle,
   },
+  computed: {
+    ...blockComputed,
+    isRendererRegistered() {
+      return "NotionRenderer" in Vue?.options?.components;
+    },
+  },
 };
 </script>