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

import { defineComponent } from 'vue';
import { SbButton, SbMode } from '@schlechtenburg/core';

export default defineComponent({
  async setup() {
    const { page } = usePage();

    const {
      mode,
      edit,
      cancel,
      save,
    } = useEditor();

    return () => (
      <div class="ex-page-toolbar">
        { mode.value === SbMode.View
          ? <SbButton
            type="button"
            onClick={() => edit(page.value?.attributes?.block!)}
          >Edit</SbButton>
          : <>
            <SbButton
              type="button"
              onClick={() => cancel()}
            >Cancel</SbButton>
            <SbButton
              type="button"
              onClick={() => save()}
            >Save</SbButton>
          </>}
      </div>
    );
  },
});