opnform-host-nginx/client/components/pages/notion/useNotionBlock.js

108 lines
2.1 KiB
JavaScript

import { computed } from 'vue'
export default function useNotionBlock (props) {
const block = computed(() => {
const id = props.contentId || Object.keys(props.blockMap)[0]
return props.blockMap[id]
})
const value = computed(() => {
return block.value?.value
})
const format = computed(() => {
return value.value?.format
})
const icon = computed(() => {
return format.value?.page_icon || ''
})
const width = computed(() => {
return format.value?.block_width
})
const properties = computed(() => {
return value.value?.properties
})
const caption = computed(() => {
return properties.value?.caption
})
const description = computed(() => {
return properties.value?.description
})
const src = computed(() => {
return mapImageUrl(properties.value?.source[0][0], block.value)
})
const title = computed(() => {
return properties.value?.title
})
const alt = computed(() => {
return caption.value?.[0][0]
})
const type = computed(() => {
return value.value?.type
})
const visible = computed(() => {
return !props.hideList.includes(type.value)
})
const hasPageLinkOptions = computed(() => {
return props.pageLinkOptions?.component && props.pageLinkOptions?.href
})
const parent = computed(() => {
return props.blockMap[value.value?.parent_id]
})
const innerJson = computed(() => {
if (type.value !== 'code') return
if (properties.value.language.flat('Infinity').join('') !== 'JSON') {
return
}
try {
return JSON.parse(
title.value.flat(Infinity).join('').replace(/\n/g, '').replace(/\t/g, '').trim()
)
} catch (error) {
console.error('Failed to parse JSON',
error,
title.value.flat(Infinity).join('').replace(/\n/g, '').replace(/\t/g, '').trim()
)
return
}
})
function mapImageUrl (source) {
// Implement your mapImageUrl logic here
return source
}
return {
icon,
width,
properties,
caption,
description,
src,
title,
alt,
block,
value,
format,
type,
visible,
hasPageLinkOptions,
parent,
innerJson
}
}