28 toggle with heading bug

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;
 }