schlechtenburg/packages/example-site/components/Page.tsx

55 lines
1.4 KiB
TypeScript

import { defineComponent } from 'vue';
import { SbMain, SbMode } from '@schlechtenburg/core';
import PageToolbar from '~~/components/PageToolbar';
import SbLayout from '@schlechtenburg/layout';
import SbHeading from '@schlechtenburg/heading';
import SbParagraph from '@schlechtenburg/paragraph';
import SbImage from '@schlechtenburg/image';
export default defineComponent({
async setup() {
const { me } = useMe();
const loggedIn = computed(() => !!me.value?.id);
const { currentPage } = useCurrentPage();
const block = computed(() => currentPage.value?.attributes?.block);
const {
mode,
draft,
updateDraft,
} = useEditor();
watchEffect(() => {
updateDraft(block.value!);
});
if (!block) {
console.error('No block!');
console.error('page', currentPage.value);
}
return () => (
<div class="ex-page">
{loggedIn.value ? <PageToolbar></PageToolbar> : null}
{draft.value
? <SbMain
class="ex-page"
mode={mode.value}
eventUpdate={(updatedBlock) => updateDraft(updatedBlock)}
block={draft.value}
availableBlocks={[
SbLayout,
SbHeading,
SbParagraph,
SbImage,
]}
/>
: <div class="ex-page ex-page_corrupt">Corrupt page: {currentPage.value?.attributes?.slug} ({currentPage.value?.id})</div>}
</div>
);
},
});