import { onBeforeMount, computed, defineComponent, reactive, ref, } from 'vue'; import { SbMain, IBlockData, SbMode } from '@schlechtenburg/core'; import SbLayout from '@schlechtenburg/layout'; import SbHeading from '@schlechtenburg/heading'; import SbParagraph from '@schlechtenburg/paragraph'; import SbImage from '@schlechtenburg/image'; import exampleData from './example-data'; import './ExampleEditor.scss'; export default defineComponent({ name: 'ExampleEditor', setup() { const activeTab = ref('edit'); const block: IBlockData = reactive({ ...exampleData }); const displayedElement = computed(() => { switch (activeTab.value) { case SbMode.Edit: return ) => { block.data = newBlock.data; }} availableBlocks={[ SbLayout, SbHeading, SbImage, SbParagraph, ]} key="edit" mode={SbMode.Edit} />; case SbMode.Display: return ; case 'data': return
{ JSON.stringify(block, null, 2) }
; } }); return () => { return

Try it yourself

{displayedElement.value}
; }; }, });