schlechtenburg/docs/ExampleStandaloneEditor.tsx

52 lines
1.3 KiB
TypeScript
Raw Normal View History

2022-03-20 13:49:44 +00:00
import {
defineComponent,
onMounted,
} from 'vue';
import { startSchlechtenburg } from '@schlechtenburg/standalone';
import { 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: 'ExampleStandaloneEditor',
setup() {
const block = exampleData;
onMounted(async () => {
2022-03-21 21:26:52 +00:00
// getBlock could be used to access the block data inside the editor
2022-03-20 13:49:44 +00:00
const { getBlock } = await startSchlechtenburg(
'#example-editor',
{
// The input block data
block,
mode: SbMode.Edit,
// The list of available blocks in this editor instance
availableBlocks: [
SbLayout,
SbHeading,
SbParagraph,
SbImage,
],
// This callback will be alled any time the block data gets updated
onUpdate: (blockData) => {
2022-03-21 21:26:52 +00:00
console.log('got update', blockData);
2022-03-20 13:49:44 +00:00
}
},
)
});
return () => <div id="example-editor"></div>;
},
});