Even smaller reproduction

docs/assets/edit.6974d338.js

@@ -1,2 +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
+import{d as a,g as r,r as e,a as l,o as s,c as p,b as n}from"./index.5f371c7e.js";import"./vendor.adf692d7.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.6974d338.js.map

docs/assets/edit.6974d338.js.map

@@ -1 +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"}
+{"version":3,"file":"edit.6974d338.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/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.84f4ccb4.js"></script>
-  <link rel="modulepreload" href="./assets/vendor.8be2b941.js">
+<script type="module" crossorigin src="./assets/index.5f371c7e.js"></script>
+  <link rel="modulepreload" href="./assets/vendor.adf692d7.js">
   <link rel="stylesheet" href="./assets/index.e3cfcab8.css">
 </head>
 <body>

packages/core/lib/components/Main.tsx

@@ -26,7 +26,6 @@ export const SbMain = defineComponent({
       type: Object,
       required: true,
     },
-    onUpdate: { type: Function, default: () => {} },
   },
 
   setup(props) {
@@ -39,10 +38,6 @@ export const SbMain = defineComponent({
 
     provide(SymBlockLibrary, blockLibrary);
 
-    return () => (
-      <div class="sb-main">
-        <SbBlock block={props.block} />
-      </div>
-    );
+    return () => <SbBlock block={props.block} />;
   },
 });

src/App.tsx

@@ -1,10 +1,9 @@
 import {
-  onBeforeMount,
   defineComponent,
   reactive,
 } from 'vue';
 
-import { SbMain, BlockData } from '../packages/core/lib';
+import { SbMain } from '../packages/core/lib';
 
 import SbParagraph from '../packages/paragraph/lib';
 
@@ -14,31 +13,19 @@ export default defineComponent({
   name: 'App',
 
   setup() {
-    const block: BlockData<any> = reactive({
-      name: 'none',
-      id: '0',
-      data: null,
+    const block = reactive({
+      "name": "sb-paragraph",
+      "id": "1590592112200",
+      "data": {
+        "value": "This is the first paragraph<br>",
+        "align": "left"
+      },
     });
 
-    onBeforeMount(async () => {
-      const res = await fetch('./initial-data.json');
-      const data = await res.json();
-      block.name = data.name;
-      block.id = data.id;
-      block.data = data.data;
-    });
-
-    return () => {
-      return <div id="app">
-          <SbMain
-            block={block}
-            onUpdate={(newBlock: BlockData<any>) => {
-              block.data = newBlock.data;
-            }}
-            customBlocks={[ SbParagraph ]}
-            key="edit"
-          />
-      </div>;
-    };
+    return () => <SbMain
+      block={block}
+      customBlocks={[ SbParagraph ]}
+      key="edit"
+    />;
   },
 });