Merge pull request #17 from zernonia/2-add-linked-block

2 add linked block

Author: zernonia

package.json

@@ -74,7 +74,7 @@
     "typescript": "^4.4.4",
     "vite": "^2.8.6",
     "vite-plugin-dts": "^0.9.10",
-    "vue-tsc": "^0.29.8"
+    "vue-tsc": "^0.34.11"
   },
   "peerDependencies": {
     "fragment-for-vue": "^1.0.1",

src/blocks/sync-block.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="notion-sync-block"><slot /></div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "NotionSyncBlock",
+}
+</script>

src/blocks/sync-pointer-block.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
+import NotionRenderer from "@/components/notion-renderer.vue"
+
+const props = defineProps({ ...defineNotionProps })
+//@ts-ignore
+const { block, pass } = useNotionBlock(props)
+
+const referencePointerId = computed(
+  () => (block.value.value.format?.transclusion_reference_pointer?.id as string) ?? ""
+)
+</script>
+
+<template>
+  <NotionRenderer
+    v-bind="pass"
+    :key="referencePointerId"
+    :level="pass.level + 1"
+    :content-id="referencePointerId"
+  ></NotionRenderer>
+</template>
+
+<script lang="ts">
+export default {
+  name: "NotionSyncPointerBlock",
+}
+</script>

src/components/block.vue

@@ -17,6 +17,8 @@ import NotionText from "@/blocks/text.vue"
 import NotionTodo from "@/blocks/todo.vue"
 import NotionToggle from "@/blocks/toggle.vue"
 import NotionTableOfContents from "@/blocks/table-of-contents.vue"
+import NotionSyncBlock from "@/blocks/sync-block.vue"
+import NotionSyncPointerBlock from "@/blocks/sync-pointer-block.vue"
 
 const NotionCode = defineAsyncComponent(() => import("@/blocks/code.vue"))
 
@@ -57,5 +59,7 @@ if (!availableType.includes(type.value)) console.warn(`${type.value.toUpperCase(
   <NotionTable v-else-if="isType('table')" v-bind="pass"><slot /></NotionTable>
   <NotionTableRow v-else-if="isType('table_row')" v-bind="pass" />
   <NotionTableOfContents v-else-if="isType('table_of_contents')" v-bind="pass"></NotionTableOfContents>
+  <NotionSyncBlock v-else-if="isType('transclusion_container')"><slot /></NotionSyncBlock>
+  <NotionSyncPointerBlock v-else-if="isType('transclusion_reference')" v-bind="pass"></NotionSyncPointerBlock>
   <hr v-else-if="isType('divider')" class="notion-hr" />
 </template>

src/lib/blockable.ts

@@ -79,7 +79,7 @@ export const useNotionBlock = (props: Readonly<NotionBlockProps>) => {
     return props.blockMap[block.value?.value.parent_id]
   })
 
-  const isType = (t: any) => {
+  const isType = (t: string | string[]) => {
     if (Array.isArray(t)) {
       return visible.value && t.includes(type.value)
     }

src/lib/constant.ts

@@ -24,4 +24,6 @@ export const availableType = [
   "table_row",
   "divider",
   "table_of_contents",
+  "transclusion_container",
+  "transclusion_reference",
 ]

src/style.css

@@ -1032,6 +1032,7 @@ svg.notion-page-icon {
   align-items: center;
   box-sizing: border-box;
   margin: 4px 0;
+  align-items: flex-start;
   /* border: 1px solid var(--fg-color-0); */
 }