Improved display mode

src/App.tsx

@@ -6,6 +6,8 @@ import {
 import Schlechtenburg from '@components/Schlechtenburg';
 import { Block } from './components/TreeElement';
 
+import initialData from './initial-data.json';
+
 import './App.scss';
 
 export default defineComponent({
@@ -13,14 +15,7 @@ export default defineComponent({
 
   setup() {
     const activeTab = ref('edit');
-    const block = reactive({
+    const block = reactive(initialData) as Block;
-      name: 'sb-layout',
-      blockId: `${+(new Date())}`,
-      data: {
-        orientation: 'vertical',
-        children: [],
-      },
-    }) as Block;
 
     return () => (
       <div id="app">

src/components/internal/Block.tsx

@@ -7,6 +7,7 @@ import {
   Block,
   useDynamicBlocks,
   useActivation,
+  SbMode,
 } from '@components/TreeElement';
 
 import './Block.scss';
@@ -33,7 +34,7 @@ export default defineComponent({
 
   setup(props: BlockProps, context) {
     const { isActive, activate } = useActivation(props.block.blockId);
-    const { getBlock } = useDynamicBlocks();
+    const { mode, getBlock } = useDynamicBlocks();
     const classes = computed(() => ({
       'sb-block': true,
       'sb-block_active': isActive.value,
@@ -51,6 +52,15 @@ export default defineComponent({
 
     const BlockComponent = getBlock(props.block.name) as any;
 
+    if (mode.value === SbMode.Display) {
+      return () => (
+        <BlockComponent
+          data={props.block.data}
+          block-id={props.block.blockId}
+        />
+      );
+    }
+
     return () => (<div class={classes.value}>
       <div class="sb-block__edit-cover"></div>
       <div class="sb-block__mover"></div>

src/components/internal/Modal.scss

@@ -2,6 +2,7 @@
   &__overlay {
     background-color: var(--grey-3-t);
     position: fixed;
+    z-index: 10;
     top: 0;
     left: 0;
     bottom: 0;

src/components/user/Image/display.tsx

@@ -1,18 +1,9 @@
-import {
+import { defineComponent, PropType } from '@vue/composition-api';
-  defineComponent,
-  reactive,
-  ref,
-  Ref,
-  watch,
-  PropType,
-} from '@vue/composition-api';
 import {
   model,
   blockProps,
 } from '@components/TreeElement';
 
-import SbToolbar from '@internal/Toolbar';
-
 import {
   getDefaultData,
   ImageData,
@@ -34,60 +25,11 @@ export default defineComponent({
     },
   },
 
-  setup(props: ImageProps, context) {
+  setup(props: ImageProps) {
-    const localData = reactive({
+    return () => <img
-      src: props.data.src,
+      class="sb-image"
-      alt: props.data.alt,
+      src={props.data.src}
-    });
+      alt={props.data.alt}
-
+    />;
-
-    const fileInput: Ref<null|HTMLInputElement> = ref(null);
-
-    watch(() => props.data, () => {
-      localData.src = props.data.src;
-      localData.alt = props.data.alt;
-    });
-
-    const selectImage = () => {
-      if (fileInput.value) {
-        fileInput.value.click();
-      }
-    };
-
-    const onImageSelect = () => {
-      if (fileInput.value && fileInput.value.files && fileInput.value.files.length) {
-        context.emit('update', {
-          src: window.URL.createObjectURL(fileInput.value.files[0]),
-        });
-      }
-    };
-
-    return () => (
-      <div class="sb-image">
-        <SbToolbar>
-          Image Edit
-          <input
-            type="file"
-            ref="fileInput"
-            style="display: none;"
-            {...{
-              on: {
-                input: onImageSelect,
-              },
-            }}
-          />
-        </SbToolbar>
-        {localData.src
-          ? <img src={localData.src} alt={localData.alt} />
-          : <button
-            {...{
-              on: {
-                click: selectImage,
-              },
-            }}
-          >Select Image</button>
-        }
-      </div>
-    );
   },
 });

src/components/user/Image/edit.tsx

@@ -28,18 +28,20 @@ export default defineComponent({
 
   props: {
     ...blockProps,
+    eventUpdate: { type: Function, default: () => {} },
     data: {
       type: (null as unknown) as PropType<ImageData>,
       default: getDefaultData,
     },
   },
 
-  setup(props: ImageProps, context) {
+  setup(props: ImageProps) {
     const localData = reactive({
       src: props.data.src,
       alt: props.data.alt,
     });
 
+    console.log(props);
 
     const fileInput: Ref<null|HTMLInputElement> = ref(null);
 
@@ -56,9 +58,15 @@ export default defineComponent({
 
     const onImageSelect = () => {
       if (fileInput.value && fileInput.value.files && fileInput.value.files.length) {
-        context.emit('update', {
+        const reader = new FileReader();
-          src: window.URL.createObjectURL(fileInput.value.files[0]),
+        reader.addEventListener('load', () => {
+          props.eventUpdate({
+            src: reader.result,
+            alt: props.data.alt,
+          });
         });
+
+        reader.readAsDataURL(fileInput.value.files[0]);
       }
     };
 

src/components/user/Image/index.ts

@@ -4,5 +4,5 @@ export default {
   name: 'sb-image',
   getDefaultData,
   edit: () => import('./edit'),
-  display: () => import('./edit'),
+  display: () => import('./display'),
 };

src/components/user/Image/style.scss

@@ -1,4 +1,9 @@
 .sb-image {
   max-width: 100%;
   max-height: 100%;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }

src/components/user/Image/util.ts

@@ -1,4 +1,4 @@
-import { BlockProps } from '@components/TreeElement';
+import { BlockData, BlockProps } from '@components/TreeElement';
 
 export interface ImageData {
   src: string;
@@ -7,6 +7,7 @@ export interface ImageData {
 
 export interface ImageProps extends BlockProps {
   data: ImageData;
+  eventUpdate: (b?: BlockData) => void;
 }
 
 export const getDefaultData: () => ImageData = () => ({

src/components/user/Layout/display.tsx

@@ -1,20 +1,14 @@
 import {
-  reactive,
   computed,
   defineComponent,
-  watch,
   PropType,
 } from '@vue/composition-api';
 import {
   model,
   blockProps,
-  useActivation,
-  BlockData,
 } from '@components/TreeElement';
 
 import SbBlock from '@internal/Block';
-import SbToolbar from '@internal/Toolbar';
-import SbBlockPlaceholder from '@internal/BlockPlaceholder';
 
 import {
   LayoutData,
@@ -37,7 +31,7 @@ export default defineComponent({
     },
   },
 
-  setup(props: LayoutProps, context) {
+  setup(props: LayoutProps) {
     const classes = computed(() => ({
       'sb-layout': true,
       [`sb-layout_${props.data.orientation}`]: true,
@@ -45,7 +39,7 @@ export default defineComponent({
 
     return () => (
       <div class={classes.value}>
-        {...props.data.children.map((child, index) => (
+        {...props.data.children.map((child) => (
           <SbBlock
             key={child.blockId}
             block={child}

src/components/user/Paragraph/display.tsx

@@ -33,12 +33,17 @@ export default defineComponent({
     },
   },
 
-  setup(props: ParagraphProps, context) {
+  setup(props: ParagraphProps) {
     const classes = computed(() => ({
       'sb-paragraph': true,
       [`sb-paragraph_align-${props.data.align}`]: true,
     }));
 
-    return () => <p class={classes}>{props.data.value}</p>;
+    return () => <p
+      class={classes.value}
+      {...{
+        domProps: { innerHTML: props.data.value },
+      }}
+    ></p>;
   },
 });

src/components/user/Paragraph/edit.tsx

@@ -98,6 +98,7 @@ export default defineComponent({
 
     const onFocus = () => {
       localData.focused = true;
+      activate();
     };
 
     const onBlur = () => {

src/components/user/Paragraph/style.scss

@@ -7,8 +7,8 @@
   }
 
   &_align {
-    &-left { .sb-paragraph__input { text-align: left; } }
+    &-left { &, .sb-paragraph__input { text-align: left; } }
-    &-right {  .sb-paragraph__input { text-align: right; } }
+    &-right {  &, .sb-paragraph__input { text-align: right; } }
-    &-center {  .sb-paragraph__input { text-align: center; } }
+    &-center {  &, .sb-paragraph__input { text-align: center; } }
   }
 }

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
     "types": [