Small docs improvements

docs/.vitepress/config.ts

@@ -18,11 +18,10 @@ export default defineConfig({
         ]
       },
       {
-        text: 'Development',
+        text: 'Creating Blocks',
         items: [
-          { text: 'Introduction', link: '/' },
-          { text: 'Installation and usage', link: '/installation' },
-          { text: 'Getting Started', link: '/getting-started' },
+          { text: 'Basics', link: '/creating-blocks/' },
+          { text: 'Examples', link: '/creating-blocks/examples' },
         ]
       }
     ]

docs/creating-blocks/examples.md

@@ -0,0 +1,3 @@
+# Example blocks
+
+As Schlechtenburg is still in active development, it's good to check out the official blocks to see what they look like.

docs/creating-blocks/index.md

@@ -1 +1,23 @@
 # Creating blocks
+
+After you've been using Schlechtenburg for a short while, you'll probably end up wanting to create your own blocks.
+
+## The anatomy of a block
+
+In general, a block is a javascript object that implements the `IBlockDefinition<T>` interface.
+
+A functional block contains all of the following:
+
+1. A unique name. This will be used to assign JSON data to your specific block. It's good practice to prefix these so you don't run into conflicts with other blocks. Official Schlechtenburg block names are prefixed with `sb-`.
+2. A function that returns a JSON structure representing an "empty" or "default" instance of your block.
+3. A component for the edit mode.
+4. A component for the view mode.
+
+```ts
+export default {
+  name,
+  getDefaultData,
+  edit: defineAsyncComponent(() => import('./edit')),
+  view: defineAsyncComponent(() => import('./view')),
+} as IBlockDefinition<any>;
+```

docs/installation.md

@@ -6,6 +6,8 @@ meaning that v2.0.3 of one package is guaranteed to work with v2.0.3 of another
 Schlechtenburg is basically one Vue component, so if you're already using Vue you can import and use it directly.
 Otherwise, there's the standalone version that comes prepackaged with Vue.
 
+[Projects without Vue 3](#your-project-does-not-use-vue-3) | [Projects with Vue 3](#your-project-uses-vue-3)
+
 ## Your project does not use Vue 3
 
 ### Install npm packages

packages/core/lib/components/TreeBlockSelect.tsx

@@ -42,7 +42,7 @@ export const SbTreeBlockSelect = defineComponent({
 
 
     return () => (
-      console.log(blockTree.value) || blockTree.value
+      blockTree.value
         ?  <SbContextMenu
           class="sb-tree-block-select"
           v-slots={{

packages/core/lib/types.ts

@@ -30,7 +30,7 @@ export interface IBlockData<T> {
  * Callback type for sending full block updates. SbBlock takes this as a prop.
  *
  * ```
- * <SbBlock onUpdate={myFn as OnUpdateSelfCb}></SbBlock>
+ * <SbBlock eventUpdate={myFn as OnUpdateSelfCb}></SbBlock>
  * ```
  *
  * @see SbBlock
@@ -42,7 +42,7 @@ export type OnUpdateBlockCb = (updated: IBlockData<any>) => void;
  *
  * ```
  * props: {
- *   onUpdate: {
+ *   eventUpdate: {
  *     type: (null as unknown) as PropType<OnUpdateSelfCb<IYourComponentData>>,
  *     default: () => {},
  *   },
@@ -58,7 +58,7 @@ export type OnUpdateSelfCb<T> = (updated: Partial<T>) => void;
  *
  * ```
  * props: {
- *   onPrependBlock: {
+ *   eventPrependBlock: {
  *     type: (null as unknown) as PropType<OnPrependBlockCb<IComponentToBePrependedData>>,
  *     default: () => {},
  *   },
@@ -74,7 +74,7 @@ export type OnPrependBlockCb =  (block: IBlockData<any>) => void;
  *
  * ```
  * props: {
- *   onAppendBlock: {
+ *   eventAppendBlock: {
  *     type: (null as unknown) as PropType<OnAppendBlockCb<IComponentToBeAppendedData>>,
  *     default: () => {},
  *   },
@@ -90,7 +90,7 @@ export type OnAppendBlockCb =  (block: IBlockData<any>) => void;
  *
  * ```
  * props: {
- *   onRemoveSelf: {
+ *   eventRemoveSelf: {
  *     type: (null as unknown) as PropType<OnRemoveSelfCb>,
  *     default: () => {},
  *   },
@@ -106,32 +106,32 @@ export type OnRemoveSelfCb =  () => void;
  *
  * ```
  * props: {
- *   onActivatePrevious: {
+ *   eventActivatePrevious: {
  *     type: (null as unknown) as PropType<OnActivatePreviousCb>,
- *     default: () => {},
+ *     default: (_i:number) => {},
  *   },
  * }
  * ```
  *
  * @see SbBlock
  */
-export type OnActivatePreviousCb =  () => void;
+export type OnActivatePreviousCb =  (_i:number) => void;
 
 /**
  * Callback type for activating the next block.
  *
  * ```
  * props: {
- *   onActivateNext: {
+ *   eventActivateNext: {
  *     type: (null as unknown) as PropType<OnActivateNextCb>,
- *     default: () => {},
+ *     default: (_i:number) => {},
  *   },
  * }
  * ```
  *
  * @see SbBlock
  */
-export type OnActivateNextCb =  () => void;
+export type OnActivateNextCb =  (_i:number) => void;
 
 /**
  * Any Block that you create
@@ -141,12 +141,12 @@ export type OnActivateNextCb =  () => void;
 export interface IBlockProps<T> {
   blockId?: string;
   data?: T,
-  onUpdate?: OnUpdateSelfCb<T>;
-  onPrependBlock?: OnPrependBlockCb;
-  onAppendBlock?: OnAppendBlockCb;
-  onRemoveSelf?: OnRemoveSelfCb;
-  onActivateNext?: OnActivateNextCb;
-  onActivatePrevious?: OnActivatePreviousCb;
+  eventUpdate?: OnUpdateSelfCb<T>;
+  eventPrependBlock?: OnPrependBlockCb;
+  eventAppendBlock?: OnAppendBlockCb;
+  eventRemoveSelf?: OnRemoveSelfCb;
+  eventActivateNext?: OnActivateNextCb;
+  eventActivatePrevious?: OnActivatePreviousCb;
 }
 
 /**

packages/heading/lib/index.ts

@@ -1,4 +1,5 @@
 import { defineAsyncComponent } from 'vue';
+import { IBlockDefinition } from '@schlechtenburg/core';
 import { getDefaultData } from './util';
 
 export * from './util';
@@ -9,4 +10,4 @@ export default {
   getDefaultData,
   edit: defineAsyncComponent(() => import('./edit')),
   view: defineAsyncComponent(() => import('./view')),
-};
+} as IBlockDefinition;

packages/paragraph/lib/edit.tsx

@@ -47,12 +47,12 @@ export default defineComponent({
       default: () => {},
     },
     eventActivateNext: {
-      type: (null as unknown) as PropType<() => void>,
-      default: () => {},
+      type: (null as unknown) as PropType<(_i:number) => void>,
+      default: (_i:number) => {},
     },
     eventActivatePrevious: {
-      type: (null as unknown) as PropType<() => void>,
-      default: () => {},
+      type: (null as unknown) as PropType<(_i:number) => void>,
+      default: (_i:number) => {},
     },
   },
 
@@ -151,10 +151,10 @@ export default defineComponent({
       if (node === inputEl.value || index === 0 || index === childNodes.length -1) {
         switch ($event.key) {
           case 'ArrowDown':
-            props.eventActivateNext();
+            props.eventActivateNext(index);
             break;
           case 'ArrowUp':
-            props.eventActivatePrevious();
+            props.eventActivatePrevious(index);
             break;
         }
       }