Added fixes

src/components/internal/Block.scss

@@ -3,7 +3,7 @@
   display: flex;
   align-items: stretch;
   justify-items: stretch;
-  min-height: 50px;
+  height: auto;
 
   > * > .sb-toolbar {
     opacity: 0;
@@ -16,6 +16,7 @@
     > * > .sb-toolbar {
       opacity: 1;
       pointer-events: all;
+      outline: 1px solid var(--grey-2);
     }
   }
 }

src/components/internal/Block.tsx

@@ -17,6 +17,7 @@ interface BlockProps {
   eventUpdate: (b?: Block) => void;
   eventInsertBlock: (b?: Block) => void;
   eventAppendBlock: (b?: Block) => void;
+  eventRemoveBlock: () => void;
 }
 
 export default defineComponent({
@@ -30,6 +31,7 @@ export default defineComponent({
     eventUpdate: { type: Function, default: () => {} },
     eventInsertBlock: { type: Function, default: () => {} },
     eventAppendBlock: { type: Function, default: () => {} },
+    eventRemoveBlock: { type: Function, default: () => {} },
   },
 
   setup(props: BlockProps, context) {
@@ -51,7 +53,6 @@ export default defineComponent({
     };
 
     const BlockComponent = getBlock(props.block.name) as any;
-
     if (mode.value === SbMode.Display) {
       return () => (
         <BlockComponent
@@ -70,13 +71,16 @@ export default defineComponent({
         eventUpdate={onChildUpdate}
         eventInsertBlock={props.eventInsertBlock}
         eventAppendBlock={props.eventAppendBlock}
-        onClick={($event: MouseEvent) => {
-          $event.stopPropagation();
-          activate();
-        }}
+        eventRemoveBlock={props.eventRemoveBlock}
         {...{
           attrs: context.attrs,
-          on: context.listeners,
+          nativeOn: {
+            click: ($event: MouseEvent) => {
+              $event.stopPropagation();
+              activate();
+            },
+            ...context.listeners,
+          },
         }}
       />
     </div>);

src/components/internal/BlockPicker.scss

@@ -1,2 +1,11 @@
 .sb-block-picker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  &__add-button {
+    padding: 24px 32px;
+  }
 }

src/components/internal/BlockPicker.tsx

@@ -34,10 +34,9 @@ export default defineComponent({
     };
 
     return () => (
-      <div
-        class="sb-block-picker"
-      >
+      <div class="sb-block-picker">
         <SbButton
+          class="sb-block-picker__add-button"
           type="button"
           onClick={($event: MouseEvent) => {
             open.value = true;

src/components/user/Image/edit.tsx

@@ -12,6 +12,7 @@ import {
 } from '@components/TreeElement';
 
 import SbToolbar from '@internal/Toolbar';
+import SbButton from '@internal/Button';
 
 import {
   getDefaultData,
@@ -41,8 +42,6 @@ export default defineComponent({
       alt: props.data.alt,
     });
 
-    console.log(props);
-
     const fileInput: Ref<null|HTMLInputElement> = ref(null);
 
     watch(() => props.data, () => {
@@ -73,28 +72,19 @@ export default defineComponent({
     return () => (
       <div class="sb-image">
         <SbToolbar>
-          Image Edit
+          {localData.src
+            ? <SbButton onClick={selectImage}>Change Image</SbButton>
+            : null}
           <input
             type="file"
             ref="fileInput"
             style="display: none;"
-            {...{
-              on: {
-                input: onImageSelect,
-              },
-            }}
+            onInput={onImageSelect}
           />
         </SbToolbar>
         {localData.src
           ? <img src={localData.src} alt={localData.alt} />
-          : <button
-            {...{
-              on: {
-                click: selectImage,
-              },
-            }}
-          >Select Image</button>
-        }
+          : <SbButton onClick={selectImage}>Select Image</SbButton>}
       </div>
     );
   },

src/components/user/Image/style.scss

@@ -1,9 +1,10 @@
 .sb-image {
-  max-width: 100%;
-  max-height: 100%;
 
-  img {
-    max-width: 100%;
-    max-height: 100%;
+  @at-root {
+    & > img,
+    img#{&} {
+      width: 100%;
+      height: auto;
+    }
   }
 }

src/components/user/Layout/edit.tsx

@@ -65,6 +65,9 @@ export default defineComponent({
 
     const onChildUpdate = (child: Block, updated: Block) => {
       const index = localData.children.indexOf(child);
+      if (index === -1) {
+        return;
+      }
       props.eventUpdate({
         children: [
           ...localData.children.slice(0, index),
@@ -78,26 +81,35 @@ export default defineComponent({
     };
 
     const appendBlock = (block: Block) => {
-      props.eventUpdate({
-        children: [
+      localData.children = [
         ...localData.children,
         block,
-        ],
-      });
+      ];
+      props.eventUpdate({ children: [...localData.children] });
       activate(block.blockId);
     };
 
     const insertBlock = (index: number, block: Block) => {
-      props.eventUpdate({
-        children: [
+      localData.children = [
         ...localData.children.slice(0, index + 1),
         block,
         ...localData.children.slice(index + 1),
-        ],
-      });
+      ];
+      props.eventUpdate({ children: [...localData.children] });
       activate(block.blockId);
     };
 
+    const removeBlock = (index: number) => {
+      localData.children = [
+        ...localData.children.slice(0, index),
+        ...localData.children.slice(index + 1),
+      ];
+      props.eventUpdate({ children: [...localData.children] });
+
+      const newActiveIndex = Math.max(index - 1, 0);
+      activate(localData.children[newActiveIndex].blockId);
+    };
+
     return () => (
       <div class={classes.value}>
         <SbToolbar slot="toolbar">
@@ -118,6 +130,7 @@ export default defineComponent({
             eventUpdate={(updated: Block) => onChildUpdate(child, updated)}
             eventInsertBlock={(block: Block) => insertBlock(index, block)}
             eventAppendBlock={appendBlock}
+            eventRemoveBlock={() => removeBlock(index)}
           />
         ))}
 

src/components/user/Paragraph/edit.tsx

@@ -29,6 +29,7 @@ interface ParagraphProps extends BlockProps {
   data: ParagraphData;
   eventUpdate: (b?: ParagraphData) => void;
   eventInsertBlock: (b?: BlockData) => void;
+  eventRemoveBlock: () => void;
 }
 
 export default defineComponent({
@@ -44,6 +45,7 @@ export default defineComponent({
     },
     eventUpdate: { type: Function, default: () => {} },
     eventInsertBlock: { type: Function, default: () => {} },
+    eventRemoveBlock: { type: Function, default: () => {} },
   },
 
   setup(props: ParagraphProps) {
@@ -61,16 +63,21 @@ export default defineComponent({
 
     const { isActive, activate } = useActivation(props.blockId);
 
-    onMounted(() => {
-      if (inputEl.value) {
-        inputEl.value.innerHTML = localData.value;
-
-        if (isActive.value) {
+    const focusInput = () => {
+      if (inputEl.value && isActive.value) {
         inputEl.value.focus();
       }
+    };
+
+    onMounted(() => {
+      focusInput();
+      if (inputEl.value) {
+        inputEl.value.innerHTML = localData.value;
       }
     });
 
+    watch(isActive, focusInput);
+
     watch(() => props.data, () => {
       localData.value = props.data.value;
       localData.align = props.data.align;
@@ -110,8 +117,8 @@ export default defineComponent({
       activate(null);
     };
 
-    const onKeypress = ($event: KeyboardEvent) => {
-      if ($event.key === 'Enter') {
+    const onKeyup = ($event: KeyboardEvent) => {
+      if ($event.key === 'Enter' && !$event.shiftKey) {
         const blockId = `${+(new Date())}`;
         props.eventInsertBlock({
           blockId,
@@ -122,6 +129,8 @@ export default defineComponent({
         activate(blockId);
 
         $event.preventDefault();
+      } else if ($event.key === 'Backspace' && localData.value === '') {
+        props.eventRemoveBlock();
       }
     };
 
@@ -144,7 +153,7 @@ export default defineComponent({
           onInput={onTextUpdate}
           onFocus={onFocus}
           onBlur={onBlur}
-          onKeypress={onKeypress}
+          onKeyup={onKeyup}
         ></p>
       </div>
     );