Further reduce scope of minimal reproduction

docs/assets/edit.06d6473f.js

@@ -0,0 +1,2 @@
+import{d as a,g as r,r as e,a as l,o as s,c as p,b as n}from"./index.84f4ccb4.js";import"./vendor.8be2b941.js";var t=a({name:"sb-paragraph-edit",props:{blockId:{type:String,required:!0},data:{type:null,default:r}},setup(a){const r=e({value:a.data.value,align:a.data.align}),t=l(null);s((()=>{t.value&&(t.value.innerHTML=r.value)}));const u=p((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${r.align}`]:!0})));return()=>n("div",{class:u.value},[n("p",{class:"sb-paragraph__input",ref:t},null)])}});export default t;
+//# sourceMappingURL=edit.06d6473f.js.map

docs/assets/edit.06d6473f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.06d6473f.js","sources":["../../packages/paragraph/lib/edit.tsx"],"sourcesContent":["import {\n  defineComponent,\n  reactive,\n  computed,\n  ref,\n  onMounted,\n} from 'vue';\nimport { getDefaultData } from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-paragraph-edit',\n\n  props: {\n    blockId: { type: String, required: true },\n    data: {\n      type: null,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const localData = reactive({\n      value: props.data.value,\n      align: props.data.align,\n    });\n\n    const inputEl = ref(null);\n    onMounted(() => {\n      if (inputEl.value) {\n        inputEl.value.innerHTML = localData.value;\n      }\n    });\n\n    const classes = computed(() => ({\n      'sb-paragraph': true,\n      [`sb-paragraph_align-${localData.align}`]: true,\n    }));\n\n    return () => (\n      <div class={classes.value}>\n        <p\n          class=\"sb-paragraph__input\"\n          ref={inputEl}\n        ></p>\n      </div>\n    );\n  },\n});\n"],"names":["defineComponent","name","props","blockId","type","String","required","data","default","getDefaultData","setup","localData","reactive","value","align","inputEl","ref","innerHTML","classes","computed"],"mappings":"qHAWeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAO,CACLC,QAAS,CAAEC,KAAMC,OAAQC,UAAU,GACnCC,KAAM,CACJH,KAAM,KACNI,QAASC,IAIbC,MAAMR,SACES,EAAYC,EAAS,CACzBC,MAAOX,EAAMK,KAAKM,MAClBC,MAAOZ,EAAMK,KAAKO,QAGdC,EAAUC,EAAI,SACV,KACJD,EAAQF,UACFA,MAAMI,UAAYN,EAAUE,gBAIlCK,EAAUC,GAAS,KAAO,iBACd,GACd,sBAAqBR,EAAUG,UAAU,YAGtC,mBACOI,EAAQL,qBAEV,0BACDE"}

docs/assets/edit.2536c400.js

@@ -1,2 +0,0 @@
-import{d as a,g as e,r,a as s,o as l,c as p,b as t}from"./index.863ba482.js";import"./vendor.41d82814.js";var n=a({name:"sb-paragraph-edit",model:{prop:"block",event:"update"},props:{blockId:{type:String,required:!0},data:{type:null,default:e}},setup(a){const e=r({value:a.data.value,align:a.data.align,focused:!1}),n=s(null);l((()=>{n.value&&(n.value.innerHTML=e.value)}));const d=p((()=>({"sb-paragraph":!0,"sb-paragraph_focused":e.focused,[`sb-paragraph_align-${e.align}`]:!0})));return()=>t("div",{class:d.value},[t("p",{class:"sb-paragraph__input",ref:n,contenteditable:!0},null)])}});export default n;
-//# sourceMappingURL=edit.2536c400.js.map

docs/assets/edit.2536c400.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"edit.2536c400.js","sources":["../../packages/paragraph/lib/edit.tsx"],"sourcesContent":["import {\n  defineComponent,\n  reactive,\n  computed,\n  ref,\n  Ref,\n  onMounted,\n  PropType,\n} from 'vue';\nimport {\n  getDefaultData,\n  ParagraphData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-paragraph-edit',\n\n  model: {\n    prop: 'block',\n    event: 'update',\n  },\n\n  props: {\n    blockId: { type: String, required: true },\n    data: {\n      type: (null as unknown) as PropType<ParagraphData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const localData = (reactive({\n      value: props.data.value,\n      align: props.data.align,\n      focused: false,\n    }) as unknown) as {\n      value: string;\n      align: string;\n      focused: boolean;\n    };\n\n    const inputEl: Ref<null|HTMLElement> = ref(null);\n    onMounted(() => {\n      if (inputEl.value) {\n        inputEl.value.innerHTML = localData.value;\n      }\n    });\n\n    const classes = computed(() => ({\n      'sb-paragraph': true,\n      'sb-paragraph_focused': localData.focused,\n      [`sb-paragraph_align-${localData.align}`]: true,\n    }));\n\n    return () => (\n      <div class={classes.value}>\n        <p\n          class=\"sb-paragraph__input\"\n          ref={inputEl}\n          contenteditable\n        ></p>\n      </div>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","prop","event","props","blockId","type","String","required","data","default","getDefaultData","setup","localData","reactive","value","align","focused","inputEl","ref","innerHTML","classes","computed"],"mappings":"gHAgBeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAO,CACLC,KAAM,QACNC,MAAO,UAGTC,MAAO,CACLC,QAAS,CAAEC,KAAMC,OAAQC,UAAU,GACnCC,KAAM,CACJH,KAAO,KACPI,QAASC,IAIbC,MAAMR,SACES,EAAaC,EAAS,CAC1BC,MAAOX,EAAMK,KAAKM,MAClBC,MAAOZ,EAAMK,KAAKO,MAClBC,SAAS,IAOLC,EAAiCC,EAAI,SACjC,KACJD,EAAQH,UACFA,MAAMK,UAAYP,EAAUE,gBAIlCM,EAAUC,GAAS,KAAO,iBACd,yBACQT,EAAUI,SAChC,sBAAqBJ,EAAUG,UAAU,YAGtC,mBACOK,EAAQN,qBAEV,0BACDG"}

docs/index.html

@@ -5,8 +5,8 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vite App</title>
-<script type="module" crossorigin src="./assets/index.863ba482.js"></script>
-  <link rel="modulepreload" href="./assets/vendor.41d82814.js">
+<script type="module" crossorigin src="./assets/index.84f4ccb4.js"></script>
+  <link rel="modulepreload" href="./assets/vendor.8be2b941.js">
   <link rel="stylesheet" href="./assets/index.e3cfcab8.css">
 </head>
 <body>

packages/core/lib/components/Block.tsx

@@ -1,12 +1,10 @@
 import {
   defineComponent,
-  computed,
-  PropType,
+  inject,
+  reactive,
   ref,
-  Ref,
 } from 'vue';
-import { BlockData } from '../types';
-import { useDynamicBlocks } from '../use-dynamic-blocks';
+import { SymBlockLibrary } from '../use-dynamic-blocks';
 
 import './Block.scss';
 
@@ -15,22 +13,22 @@ export const SbBlock = defineComponent({
 
   props: {
     block: {
-      type: (null as unknown) as PropType<BlockData<any>>,
+      type: Object,
       required: true,
     },
   },
 
   setup(props, context) {
-    const el: Ref<null|HTMLElement> = ref(null);
-    const { getBlock } = useDynamicBlocks();
-    const classes = computed(() => ({ 'sb-block': true }));
+    const el = ref(null);
+    const customBlocks = inject(SymBlockLibrary, reactive({}));
+    const getBlock = (name) => customBlocks[name];
 
     return () => {
-      const BlockComponent = getBlock(props.block.name)?.component as any;
+      const BlockComponent = getBlock(props.block.name)?.component || <span>Missing block {name}</span>;
 
       return <div
         ref={el}
-        class={classes.value}
+        class="sb-block"
       >
         <BlockComponent
           data={props.block.data}

packages/core/lib/components/Main.tsx

@@ -2,14 +2,7 @@ import {
   defineComponent,
   provide,
   shallowReactive,
-  ref,
-  PropType,
 } from 'vue';
-import {
-  BlockData,
-  BlockDefinition,
-  BlockLibrary,
-} from '../types';
 import { SymBlockLibrary} from '../use-dynamic-blocks';
 
 import { SbBlock } from './Block';
@@ -26,20 +19,20 @@ export const SbMain = defineComponent({
 
   props: {
     customBlocks: {
-      type: Array as PropType<BlockDefinition<any>[]>,
+      type: Array,
       default: () => [],
     },
     block: {
-      type: Object as PropType<BlockData<any>>,
+      type: Object,
       required: true,
     },
     onUpdate: { type: Function, default: () => {} },
   },
 
-  setup(props: any) { // TODO: why does the typing of props not work here?
-    const blockLibrary: BlockLibrary = shallowReactive({
+  setup(props) {
+    const blockLibrary = shallowReactive({
       ...props.customBlocks.reduce(
-        (blocks: BlockLibrary, block: BlockDefinition<any>) => ({ ...blocks, [block.name]: block }),
+        (blocks, block) => ({ ...blocks, [block.name]: block }),
         {},
       ),
     });
@@ -48,10 +41,7 @@ export const SbMain = defineComponent({
 
     return () => (
       <div class="sb-main">
-        <SbBlock
-          block={props.block}
-          onUpdate={props.onUpdate}
-        />
+        <SbBlock block={props.block} />
       </div>
     );
   },

packages/core/lib/index.ts

@@ -1,5 +1,3 @@
-export * from './types';
-
 export * from './use-dynamic-blocks';
 
 export * from './components/Main';

packages/core/lib/types.ts

@@ -1,36 +0,0 @@
-import { Component } from 'vue';
-
-export interface TreeNode {
-  id: string;
-  name: string;
-  icon?: string;
-  children: TreeNode[];
-}
-
-export interface BlockData<T> {
-  id: string;
-  name: string;
-  data: T;
-}
-
-export interface BlockProps<T> {
-  blockId: string;
-  data?: T,
-  onUpdate?: (b?: BlockData<T>) => void;
-  onPrependBlock?: (b?: BlockData<T>) => void;
-  onAppendBlock?: (b?: BlockData<T>) => void;
-  onRemoveSelf?: () => void;
-  onActivateNext?: () => void;
-  onActivatePrevious?: () => void;
-}
-
-export interface BlockDefinition<T> {
-  name: string;
-  icon?: string;
-  getDefaultData: T;
-  component: Component<BlockProps<T>>;
-}
-
-export interface BlockLibrary {
-  [name: string]: BlockDefinition<any>;
-}

packages/core/lib/use-dynamic-blocks.ts

@@ -1,16 +1 @@
-import {
-  inject,
-  reactive,
-} from 'vue';
-import { BlockLibrary } from './types';
-
 export const SymBlockLibrary = Symbol('Schlechtenburg block library');
-export function useDynamicBlocks() {
-  const customBlocks: BlockLibrary = inject(SymBlockLibrary, reactive({}));
-  const getBlock = (name: string) => customBlocks[name];
-
-  return {
-    customBlocks,
-    getBlock,
-  };
-}

packages/paragraph/lib/edit.tsx

@@ -3,45 +3,30 @@ import {
   reactive,
   computed,
   ref,
-  Ref,
   onMounted,
-  PropType,
 } from 'vue';
-import {
-  getDefaultData,
-  ParagraphData,
-} from './util';
+import { getDefaultData } from './util';
 
 import './style.scss';
 
 export default defineComponent({
   name: 'sb-paragraph-edit',
 
-  model: {
-    prop: 'block',
-    event: 'update',
-  },
-
   props: {
     blockId: { type: String, required: true },
     data: {
-      type: (null as unknown) as PropType<ParagraphData>,
+      type: null,
       default: getDefaultData,
     },
   },
 
   setup(props) {
-    const localData = (reactive({
+    const localData = reactive({
       value: props.data.value,
       align: props.data.align,
-      focused: false,
-    }) as unknown) as {
-      value: string;
-      align: string;
-      focused: boolean;
-    };
+    });
 
-    const inputEl: Ref<null|HTMLElement> = ref(null);
+    const inputEl = ref(null);
     onMounted(() => {
       if (inputEl.value) {
         inputEl.value.innerHTML = localData.value;
@@ -50,7 +35,6 @@ export default defineComponent({
 
     const classes = computed(() => ({
       'sb-paragraph': true,
-      'sb-paragraph_focused': localData.focused,
       [`sb-paragraph_align-${localData.align}`]: true,
     }));
 
@@ -59,7 +43,6 @@ export default defineComponent({
         <p
           class="sb-paragraph__input"
           ref={inputEl}
-          contenteditable
         ></p>
       </div>
     );