Merge pull request #32 from zernonia/28-toggle-with-heading-bug

28 toggle with heading bug

Author: zernonia

src/blocks/header.vue

@@ -1,26 +1,32 @@
 <script setup lang="ts">
-import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
-import NotionTextRenderer from "@/blocks/helpers/text-renderer.vue"
+import { useNotionBlock, defineNotionProps } from "@/lib/blockable";
+import NotionHeaderRenderer from "@/blocks/helpers/header-renderer.vue";
+import NotionRenderer from "@/components/notion-renderer.vue";
 
-const props = defineProps({ ...defineNotionProps })
+const props = defineProps({ ...defineNotionProps });
 //@ts-ignore
-const { type, title, pass, block } = useNotionBlock(props)
+const { type, title, pass, block, format } = useNotionBlock(props);
 </script>
 
 <script lang="ts">
 export default {
   name: "NotionHeader",
-}
+};
 </script>
 
 <template>
-  <h1 class="notion-h1" :id="block.value.id" v-if="type === 'header'">
-    <NotionTextRenderer :text="title" v-bind="pass" />
-  </h1>
-  <h2 class="notion-h2" :id="block.value.id" v-else-if="type === 'sub_header'">
-    <NotionTextRenderer :text="title" v-bind="pass" />
-  </h2>
-  <h3 class="notion-h3" :id="block.value.id" v-else-if="type === 'sub_sub_header'">
-    <NotionTextRenderer :text="title" v-bind="pass" />
-  </h3>
+  <details v-if="format?.toggleable" class="notion-toggle">
+    <summary><NotionHeaderRenderer class="notion-h" v-bind="pass"></NotionHeaderRenderer></summary>
+    <div>
+      <NotionRenderer
+        v-for="(contentId, contentIndex) in block.value.content"
+        v-bind="pass"
+        :key="contentId"
+        :level="pass.level + 1"
+        :content-id="contentId"
+        :content-index="contentIndex"
+      ></NotionRenderer>
+    </div>
+  </details>
+  <NotionHeaderRenderer v-else v-bind="pass"></NotionHeaderRenderer>
 </template>

src/blocks/helpers/header-renderer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useNotionBlock, defineNotionProps } from "@/lib/blockable";
+import NotionTextRenderer from "@/blocks/helpers/text-renderer.vue";
+
+const props = defineProps({ ...defineNotionProps });
+//@ts-ignore
+const { type, title, pass, block } = useNotionBlock(props);
+</script>
+
+<script lang="ts">
+export default {
+  name: "NotionHeaderRenderer",
+};
+</script>
+
+<template>
+  <h1 class="notion-h1" :id="block.value.id" v-if="type === 'header'">
+    <NotionTextRenderer :text="title" v-bind="pass" />
+  </h1>
+  <h2 class="notion-h2" :id="block.value.id" v-else-if="type === 'sub_header'">
+    <NotionTextRenderer :text="title" v-bind="pass" />
+  </h2>
+  <h3 class="notion-h3" :id="block.value.id" v-else-if="type === 'sub_sub_header'">
+    <NotionTextRenderer :text="title" v-bind="pass" />
+  </h3>
+</template>

src/blocks/helpers/page-icon.vue

@@ -1,37 +1,30 @@
 <script setup lang="ts">
-import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
-import { getTextContent } from "@/lib/utils"
-import DefaultPageIcon from "./default-page-icon.vue"
+import { useNotionBlock, defineNotionProps } from "@/lib/blockable";
+import { getTextContent } from "@/lib/utils";
+import DefaultPageIcon from "./default-page-icon.vue";
 
-const props = defineProps({ big: Boolean, ...defineNotionProps })
+const props = defineProps({ big: Boolean, ...defineNotionProps });
 //@ts-ignore
-const { icon, format, block, title } = useNotionBlock(props)
+const { icon, format, block, title } = useNotionBlock(props);
 </script>
 
 <script lang="ts">
 export default {
   name: "NotionPageIcon",
-}
+};
 </script>
 
 <template>
-  <img
-    v-if="icon?.includes('http')"
-    :class="[format.page_cover && 'notion-page-icon-offset', big ? 'notion-page-icon-cover' : 'notion-page-icon']"
-    :src="props.mapImageUrl(icon, block)"
-    :alt="title ? getTextContent(title) : 'Icon'"
-  />
-  <span
-    v-else-if="icon"
-    role="img"
-    :aria-label="icon"
-    :class="[
-      'notion-emoji',
-      format.page_cover && 'notion-page-icon-offset',
-      big ? 'notion-page-icon-cover' : 'notion-page-icon',
-    ]"
-  >
-    {{ icon }}
-  </span>
-  <DefaultPageIcon class="notion-page-icon" v-else-if="!big"></DefaultPageIcon>
+  <div :class="[format.page_cover && 'notion-page-icon-offset', big ? 'notion-page-icon-cover' : 'notion-page-icon']">
+    <img
+      v-if="icon?.includes('http')"
+      :src="props.mapImageUrl(icon, block)"
+      :alt="title ? getTextContent(title) : 'Icon'"
+      class="notion-page-icon"
+    />
+    <span v-else-if="icon" role="img" :aria-label="icon" class="notion-page-icon">
+      {{ icon }}
+    </span>
+    <DefaultPageIcon class="notion-page-icon" v-else-if="!big"></DefaultPageIcon>
+  </div>
 </template>

src/style.css

@@ -573,7 +573,7 @@
   max-height: 124px;
 }
 
-span.notion-page-icon-cover {
+.notion-page-icon-cover span {
   height: 78px;
   width: 78px;
   font-size: 78px;
@@ -582,18 +582,18 @@ span.notion-page-icon-cover {
   margin-left: 0px;
 }
 
-span.notion-page-icon-offset {
+.notion-page-icon-offset span {
   margin-top: -42px;
 }
 
-img.notion-page-icon-cover {
+.notion-page-icon-cover img {
   border-radius: 3px;
   width: 124px;
   height: 124px;
   margin: 8px;
 }
 
-img.notion-page-icon-offset {
+.notion-page-icon-offset img {
   margin-top: -80px;
 }