Start work on doc generation

notes.md

@@ -0,0 +1,4 @@
+## Events & type safety
+
+To maintain full type safety, we're not using events via $emit, instead relying on callback
+functions handed in by the parent.

packages/core/lib/components/Block.tsx

@@ -26,6 +26,10 @@ import SbMissingBlock from './MissingBlock';
 
 import './Block.scss';
 
+/**
+ * Displays a Schlechtenburg block either the mode of the schlechtenburg instance.
+ * You can use this to display child blocks inside your own blocks.
+ */
 export const SbBlock = defineComponent({
   name: 'sb-block',
 
@@ -34,34 +38,51 @@ export const SbBlock = defineComponent({
   },
 
   props: {
+    /**
+     * The state for the block.
+     */
     block: {
       type: (null as unknown) as PropType<IBlockData<any>>,
       required: true,
     },
-    sortable: {
+    /**
-      type: String,
+     * Called when the block should be updated.
-      default: null,
+     */
-    },
     onUpdate: {
       type: (null as unknown) as PropType<OnUpdateBlockCb>,
       default: () => {},
     },
+    /**
+     * Called when a sibling block should be inserted before the block
+     */
     onPrependBlock: {
       type: (null as unknown) as PropType<OnPrependBlockCb>,
       default: () => {},
     },
+    /**
+     * Called when a sibling block should be inserted after the block
+     */
     onAppendBlock: {
       type: (null as unknown) as PropType<OnAppendBlockCb>,
       default: () => {},
     },
+    /**
+     * Called when the block should be removed
+     */
     onRemoveSelf: {
       type: (null as unknown) as PropType<OnRemoveSelfCb>,
       default: () => {},
     },
+    /**
+     * Called when the previous sibling block should be activated
+     */
     onActivatePrevious: {
       type: (null as unknown) as PropType<OnActivatePreviousCb>,
       default: () => {},
     },
+    /**
+     * Called when the next sibling block should be activated
+     */
     onActivateNext: {
       type: (null as unknown) as PropType<OnActivateNextCb>,
       default: () => {},
@@ -120,7 +141,13 @@ export const SbBlock = defineComponent({
         class={classes.value}
         v-hover-cover
       >
-        {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
+        {
+          /**
+           * This is an alternative toolbar location that parent blocks can use to offer UI elements specific to child blocks.
+           * @slot context-toolbar
+           */
+          context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null
+        }
         <BlockComponent
           data={props.block.data}
           blockId={props.block.id}

packages/core/lib/components/BlockPicker.tsx

@@ -5,6 +5,7 @@ import {
 } from 'vue';
 import { useDynamicBlocks } from '../use-dynamic-blocks';
 import { IBlockDefinition } from '../types';
+import { generateBlockId } from '../block-helpers';
 
 import { SbButton } from './Button';
 import { SbContextMenu, IContextMenuSlotContext } from './ContextMenu';
@@ -29,7 +30,7 @@ export const SbBlockPicker = defineComponent({
       open.value = false;
       props.onPickedBlock({
         name: block.name,
-        id: `${+(new Date())}`,
+        id: generateBlockId(),
         data: block.getDefaultData(),
       });
     };

packages/core/lib/components/BlockPlaceholder.tsx

@@ -5,10 +5,18 @@ import { SbBlockPicker } from './BlockPicker';
 
 import './BlockPlaceholder.scss';
 
+/**
+ * A placeholder for a block.
+ * Displays a placeholder for a block, allowing the user to select a block to insert.
+ * @sbui
+ */
 export const SbBlockPlaceholder = defineComponent({
   name: 'sb-block-placeholder',
 
   props: {
+    /**
+     * Called when the user picked a block that should be inserted here.
+     */
     onInsertBlock: { type: Function, default: () => {} },
   },
 

packages/core/lib/components/Button.tsx

@@ -2,6 +2,10 @@ import { defineComponent } from 'vue';
 
 import './Button.scss';
 
+/**
+ * A button in the schlechtenburg theme
+ * @sbui
+ */
 export const SbButton = defineComponent({
   name: 'sb-button',
 
@@ -15,7 +19,13 @@ export const SbButton = defineComponent({
           class: (context.attrs.class || '') + ' sb-button',
         }}
       >
-        {context.slots.default?.()}
+        {
+          /**
+           * The button contents
+           * @slot default
+           */
+          context.slots.default?.()
+        }
       </button>
     );
   },

packages/core/lib/components/Select.tsx

@@ -1,6 +1,10 @@
 import { defineComponent } from 'vue';
 import './Select.scss';
 
+/**
+ * A select input in the schlechtenburg theme
+ * @sbui
+ */
 export const SbSelect = defineComponent({
   name: 'sb-select',
 
@@ -13,7 +17,13 @@ export const SbSelect = defineComponent({
           class="sb-select__input"
           {...context.attrs}
         >
-          {context.slots.default?.()}
+        {
+          /**
+           * The select options list
+           * @slot default
+           */
+          context.slots.default?.()
+        }
         </select>
       </div>
     );

packages/core/lib/components/Toolbar.tsx

@@ -8,6 +8,10 @@ import { useBlockSizing } from '../use-resize-observer';
 
 import './Toolbar.scss';
 
+/**
+ * Toolbar in the schlechtenburg theme
+ * @sbui
+ */
 export const SbToolbar = defineComponent({
   name: 'sb-toolbar',
 
@@ -38,7 +42,13 @@ export const SbToolbar = defineComponent({
         style={styles}
         onClick={($event: MouseEvent) => $event.stopPropagation()}
       >
-        {context.slots?.default?.()}
+        {
+          /**
+           * The toolbar contents
+           * @slot default
+           */
+          context.slots.default?.()
+        }
       </div>
     );
   },

packages/docgen/jsdoc.json

@@ -0,0 +1,17 @@
+{
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": ["jsdoc", "closure"]
+  },
+  "source": {
+    "include": ["./lib"],
+    "includePattern": ".(jsx|js|ts|tsx)$"
+  },
+  "sourceType": "module",
+  "plugins": [
+    "jsdoc-plugin-typescript"
+  ],
+  "typescript": {
+    "moduleRoot": "src"
+}
+}

packages/docgen/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@schlechtenburg/docgen",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "jsdoc": "^3.6.10",
+    "jsdoc-plugin-typescript": "^2.0.6",
+    "vue": "^3.2.31",
+    "vue-docgen-api": "^4.44.18"
+  },
+  "dependencies": {
+    "glob": "^7.2.0",
+    "glob-promise": "^4.2.2"
+  }
+}

packages/docgen/parse.mjs

@@ -0,0 +1,27 @@
+import { parse } from 'vue-docgen-api'
+import { join } from 'path'
+import glob from 'glob-promise'
+
+(async () => {
+  const files = (await Promise.all(process.argv.slice(2)
+    .map(
+      (path) => glob(path)
+        .then(
+          (found_paths) => found_paths
+            .map(found_path => join(process.cwd(), found_path))
+        )
+    )
+  )).flat();
+
+  const vueParsed = await Promise.all(files
+    .map(file => parse(file)
+      .catch((error) => {
+        // For now, ignore any errors
+        // console.log(error, file);
+        return null;
+      })
+    )
+  );
+  const vueFiltered = vueParsed.filter(p => p);
+  console.log(JSON.stringify(vueFiltered, null, 2));
+})();

packages/docs/lib/App.tsx

@@ -69,7 +69,7 @@ export default defineComponent({
     });
 
     return () => {
-      return <div class="app" id="app">
+      return <div class="app">
         <select
           class="app--mode"
           value={activeTab.value}

packages/docs/package-lock.json

@@ -590,6 +590,45 @@
 				"@vue/shared": "3.0.7"
 			}
 		},
+		"@vue/reactivity-transform": {
+			"version": "3.2.31",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz",
+			"integrity": "sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==",
+			"dev": true,
+			"requires": {
+				"@babel/parser": "^7.16.4",
+				"@vue/compiler-core": "3.2.31",
+				"@vue/shared": "3.2.31",
+				"estree-walker": "^2.0.2",
+				"magic-string": "^0.25.7"
+			},
+			"dependencies": {
+				"@babel/parser": {
+					"version": "7.17.3",
+					"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
+					"integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==",
+					"dev": true
+				},
+				"@vue/compiler-core": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.31.tgz",
+					"integrity": "sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==",
+					"dev": true,
+					"requires": {
+						"@babel/parser": "^7.16.4",
+						"@vue/shared": "3.2.31",
+						"estree-walker": "^2.0.2",
+						"source-map": "^0.6.1"
+					}
+				},
+				"@vue/shared": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
+					"integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+					"dev": true
+				}
+			}
+		},
 		"@vue/runtime-core": {
 			"version": "3.0.7",
 			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
@@ -857,6 +896,12 @@
 				"vscode-uri": "^2.1.2"
 			}
 		},
+		"acorn": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+			"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+			"dev": true
+		},
 		"agent-base": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -897,6 +942,44 @@
 				"picomatch": "^2.0.4"
 			}
 		},
+		"asap": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+			"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+			"dev": true
+		},
+		"assert-never": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
+			"integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==",
+			"dev": true
+		},
+		"ast-types": {
+			"version": "0.14.2",
+			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+			"integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+			"dev": true,
+			"requires": {
+				"tslib": "^2.0.1"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "2.3.1",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+					"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+					"dev": true
+				}
+			}
+		},
+		"babel-walk": {
+			"version": "3.0.0-canary-5",
+			"resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
+			"integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+			"dev": true,
+			"requires": {
+				"@babel/types": "^7.9.6"
+			}
+		},
 		"big.js": {
 			"version": "5.2.2",
 			"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -937,6 +1020,16 @@
 				"node-releases": "^1.1.70"
 			}
 		},
+		"call-bind": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+			"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+			"dev": true,
+			"requires": {
+				"function-bind": "^1.1.1",
+				"get-intrinsic": "^1.0.2"
+			}
+		},
 		"camelcase": {
 			"version": "6.2.0",
 			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
@@ -960,6 +1053,15 @@
 				"supports-color": "^5.3.0"
 			}
 		},
+		"character-parser": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+			"integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
+			"dev": true,
+			"requires": {
+				"is-regex": "^1.0.3"
+			}
+		},
 		"chokidar": {
 			"version": "3.5.1",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
@@ -1167,6 +1269,16 @@
 				"bluebird": "^3.7.2"
 			}
 		},
+		"constantinople": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
+			"integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
+			"dev": true,
+			"requires": {
+				"@babel/parser": "^7.6.0",
+				"@babel/types": "^7.6.1"
+			}
+		},
 		"convert-source-map": {
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -1214,6 +1326,12 @@
 				"ms": "2.1.2"
 			}
 		},
+		"doctypes": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+			"integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
+			"dev": true
+		},
 		"electron-to-chromium": {
 			"version": "1.3.693",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.693.tgz",
@@ -1259,6 +1377,12 @@
 			"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
 			"dev": true
 		},
+		"esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"dev": true
+		},
 		"estree-walker": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1330,6 +1454,17 @@
 			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
 			"dev": true
 		},
+		"get-intrinsic": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+			"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+			"dev": true,
+			"requires": {
+				"function-bind": "^1.1.1",
+				"has": "^1.0.3",
+				"has-symbols": "^1.0.1"
+			}
+		},
 		"glob-parent": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1360,6 +1495,21 @@
 			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
 			"dev": true
 		},
+		"has-symbols": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+			"dev": true
+		},
+		"has-tostringtag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+			"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+			"dev": true,
+			"requires": {
+				"has-symbols": "^1.0.2"
+			}
+		},
 		"hash-sum": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -1436,6 +1586,16 @@
 				"has": "^1.0.3"
 			}
 		},
+		"is-expression": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
+			"integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
+			"dev": true,
+			"requires": {
+				"acorn": "^7.1.1",
+				"object-assign": "^4.1.1"
+			}
+		},
 		"is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1463,6 +1623,28 @@
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
 			"dev": true
 		},
+		"is-promise": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+			"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+			"dev": true
+		},
+		"is-regex": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+			"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+			"dev": true,
+			"requires": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			}
+		},
+		"js-stringify": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+			"integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
+			"dev": true
+		},
 		"js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1490,6 +1672,16 @@
 				"minimist": "^1.2.5"
 			}
 		},
+		"jstransformer": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+			"integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
+			"dev": true,
+			"requires": {
+				"is-promise": "^2.0.0",
+				"promise": "^7.0.1"
+			}
+		},
 		"lines-and-columns": {
 			"version": "1.1.6",
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -1794,6 +1986,145 @@
 			"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
 			"dev": true
 		},
+		"promise": {
+			"version": "7.3.1",
+			"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+			"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+			"dev": true,
+			"requires": {
+				"asap": "~2.0.3"
+			}
+		},
+		"pseudomap": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+			"integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
+			"dev": true
+		},
+		"pug": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
+			"integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
+			"dev": true,
+			"requires": {
+				"pug-code-gen": "^3.0.2",
+				"pug-filters": "^4.0.0",
+				"pug-lexer": "^5.0.1",
+				"pug-linker": "^4.0.0",
+				"pug-load": "^3.0.0",
+				"pug-parser": "^6.0.0",
+				"pug-runtime": "^3.0.1",
+				"pug-strip-comments": "^2.0.0"
+			}
+		},
+		"pug-attrs": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
+			"integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+			"dev": true,
+			"requires": {
+				"constantinople": "^4.0.1",
+				"js-stringify": "^1.0.2",
+				"pug-runtime": "^3.0.0"
+			}
+		},
+		"pug-code-gen": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
+			"integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
+			"dev": true,
+			"requires": {
+				"constantinople": "^4.0.1",
+				"doctypes": "^1.1.0",
+				"js-stringify": "^1.0.2",
+				"pug-attrs": "^3.0.0",
+				"pug-error": "^2.0.0",
+				"pug-runtime": "^3.0.0",
+				"void-elements": "^3.1.0",
+				"with": "^7.0.0"
+			}
+		},
+		"pug-error": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
+			"integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==",
+			"dev": true
+		},
+		"pug-filters": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
+			"integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
+			"dev": true,
+			"requires": {
+				"constantinople": "^4.0.1",
+				"jstransformer": "1.0.0",
+				"pug-error": "^2.0.0",
+				"pug-walk": "^2.0.0",
+				"resolve": "^1.15.1"
+			}
+		},
+		"pug-lexer": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
+			"integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
+			"dev": true,
+			"requires": {
+				"character-parser": "^2.2.0",
+				"is-expression": "^4.0.0",
+				"pug-error": "^2.0.0"
+			}
+		},
+		"pug-linker": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
+			"integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
+			"dev": true,
+			"requires": {
+				"pug-error": "^2.0.0",
+				"pug-walk": "^2.0.0"
+			}
+		},
+		"pug-load": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
+			"integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
+			"dev": true,
+			"requires": {
+				"object-assign": "^4.1.1",
+				"pug-walk": "^2.0.0"
+			}
+		},
+		"pug-parser": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
+			"integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
+			"dev": true,
+			"requires": {
+				"pug-error": "^2.0.0",
+				"token-stream": "1.0.0"
+			}
+		},
+		"pug-runtime": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
+			"integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
+			"dev": true
+		},
+		"pug-strip-comments": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
+			"integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
+			"dev": true,
+			"requires": {
+				"pug-error": "^2.0.0"
+			}
+		},
+		"pug-walk": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
+			"integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
+			"dev": true
+		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1827,6 +2158,26 @@
 				"picomatch": "^2.2.1"
 			}
 		},
+		"recast": {
+			"version": "0.20.5",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.20.5.tgz",
+			"integrity": "sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ==",
+			"dev": true,
+			"requires": {
+				"ast-types": "0.14.2",
+				"esprima": "~4.0.0",
+				"source-map": "~0.6.1",
+				"tslib": "^2.0.1"
+			},
+			"dependencies": {
+				"tslib": {
+					"version": "2.3.1",
+					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+					"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+					"dev": true
+				}
+			}
+		},
 		"require-directory": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -2025,12 +2376,24 @@
 				"is-number": "^7.0.0"
 			}
 		},
+		"token-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
+			"integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=",
+			"dev": true
+		},
 		"tree-kill": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
 			"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
 			"dev": true
 		},
+		"ts-map": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/ts-map/-/ts-map-1.0.3.tgz",
+			"integrity": "sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==",
+			"dev": true
+		},
 		"tslib": {
 			"version": "1.14.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -2090,6 +2453,12 @@
 				"rollup": "^2.38.5"
 			}
 		},
+		"void-elements": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+			"integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
+			"dev": true
+		},
 		"vscode-languageserver-textdocument": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.1.tgz",
@@ -2118,6 +2487,150 @@
 				"@vue/shared": "3.0.7"
 			}
 		},
+		"vue-docgen-api": {
+			"version": "4.44.18",
+			"resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.44.18.tgz",
+			"integrity": "sha512-zZLa2TqCid97tIk98A30GnP5N46SfAsJW5p3z1PDYME0UTZWl6nKLcgQLtGfzXYT4bz+dV11cc6FumdGW0QTlA==",
+			"dev": true,
+			"requires": {
+				"@babel/parser": "^7.13.12",
+				"@babel/types": "^7.13.12",
+				"@vue/compiler-dom": "^3.2.0",
+				"@vue/compiler-sfc": "^3.2.0",
+				"ast-types": "0.14.2",
+				"hash-sum": "^1.0.2",
+				"lru-cache": "^4.1.5",
+				"pug": "^3.0.2",
+				"recast": "0.20.5",
+				"ts-map": "^1.0.3",
+				"vue-inbrowser-compiler-utils": "^4.44.17"
+			},
+			"dependencies": {
+				"@vue/compiler-core": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.31.tgz",
+					"integrity": "sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==",
+					"dev": true,
+					"requires": {
+						"@babel/parser": "^7.16.4",
+						"@vue/shared": "3.2.31",
+						"estree-walker": "^2.0.2",
+						"source-map": "^0.6.1"
+					},
+					"dependencies": {
+						"@babel/parser": {
+							"version": "7.17.3",
+							"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
+							"integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==",
+							"dev": true
+						}
+					}
+				},
+				"@vue/compiler-dom": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz",
+					"integrity": "sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==",
+					"dev": true,
+					"requires": {
+						"@vue/compiler-core": "3.2.31",
+						"@vue/shared": "3.2.31"
+					}
+				},
+				"@vue/compiler-sfc": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz",
+					"integrity": "sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==",
+					"dev": true,
+					"requires": {
+						"@babel/parser": "^7.16.4",
+						"@vue/compiler-core": "3.2.31",
+						"@vue/compiler-dom": "3.2.31",
+						"@vue/compiler-ssr": "3.2.31",
+						"@vue/reactivity-transform": "3.2.31",
+						"@vue/shared": "3.2.31",
+						"estree-walker": "^2.0.2",
+						"magic-string": "^0.25.7",
+						"postcss": "^8.1.10",
+						"source-map": "^0.6.1"
+					},
+					"dependencies": {
+						"@babel/parser": {
+							"version": "7.17.3",
+							"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
+							"integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==",
+							"dev": true
+						}
+					}
+				},
+				"@vue/compiler-ssr": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz",
+					"integrity": "sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==",
+					"dev": true,
+					"requires": {
+						"@vue/compiler-dom": "3.2.31",
+						"@vue/shared": "3.2.31"
+					}
+				},
+				"@vue/shared": {
+					"version": "3.2.31",
+					"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
+					"integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
+					"dev": true
+				},
+				"hash-sum": {
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+					"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+					"dev": true
+				},
+				"lru-cache": {
+					"version": "4.1.5",
+					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+					"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+					"dev": true,
+					"requires": {
+						"pseudomap": "^1.0.2",
+						"yallist": "^2.1.2"
+					}
+				},
+				"yallist": {
+					"version": "2.1.2",
+					"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+					"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+					"dev": true
+				}
+			}
+		},
+		"vue-inbrowser-compiler-utils": {
+			"version": "4.44.17",
+			"resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.44.17.tgz",
+			"integrity": "sha512-dvxumVgIzR4FXjAWYWIOnpD+6bW0dLkoAv43UShER8gVIhLFo9UEmbF31wD6YWJj94lUpbVIuWl2qc6axYNEAQ==",
+			"dev": true,
+			"requires": {
+				"camelcase": "^5.3.1"
+			},
+			"dependencies": {
+				"camelcase": {
+					"version": "5.3.1",
+					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+					"dev": true
+				}
+			}
+		},
+		"with": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
+			"integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+			"dev": true,
+			"requires": {
+				"@babel/parser": "^7.9.6",
+				"@babel/types": "^7.9.6",
+				"assert-never": "^1.2.1",
+				"babel-walk": "3.0.0-canary-5"
+			}
+		},
 		"wrap-ansi": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

packages/docs/package.json

@@ -42,6 +42,7 @@
     "concurrently": "^6.0.0",
     "sass": "^1.32.8",
     "typescript": "^4.2.3",
-    "vite": "^2.0.5"
+    "vite": "^2.0.5",
+    "vue-docgen-api": "^4.44.18"
   }
 }

packages/heading/lib/edit.tsx

@@ -18,6 +18,7 @@ import {
   OnRemoveSelfCb,
   OnActivateNextCb,
   OnActivatePreviousCb,
+  generateBlockId,
 } from '@schlechtenburg/core';
 import {
   getDefaultData,
@@ -142,7 +143,7 @@ export default defineComponent({
 
     const onKeydown = ($event: KeyboardEvent) => {
       if ($event.key === 'Enter' && !$event.shiftKey) {
-        const id = `${+(new Date())}`;
+        const id = generateBlockId();
         props.onAppendBlock({
           id,
           name: 'sb-paragraph',

packages/paragraph/lib/edit.tsx

@@ -13,6 +13,7 @@ import {
   useActivation,
   SbToolbar,
   SbSelect,
+  generateBlockId,
 } from '@schlechtenburg/core';
 import {
   getDefaultData,
@@ -124,7 +125,7 @@ export default defineComponent({
 
     const onKeydown = ($event: KeyboardEvent) => {
       if ($event.key === 'Enter' && !$event.shiftKey) {
-        const id = `${+(new Date())}`;
+        const id = generateBlockId();
         props.onAppendBlock({
           id,
           name: 'sb-paragraph',