Updated some stuff

packages/core/lib/App.tsx

@@ -1,8 +1,9 @@
 import { defineComponent, reactive, ref } from 'vue';
 import Schlechtenburg from '/@components/Schlechtenburg';
-import { Block, SbMode } from '/@components/TreeElement';
+import { Block } from '/@/blocks';
+import { SbMode } from '/@/mode';
 
-import initialData from './initial-data.json';
+import initialData from './initial-data';
 
 import './App.scss';
 
@@ -11,38 +12,40 @@ export default defineComponent({
 
   setup() {
     const activeTab = ref('edit');
-    const block = reactive(initialData) as Block;
+    const block: Block<any> = reactive(initialData);
 
     return () => (
       <div id="app">
         <select
           value={activeTab.value}
-          onchange={($event: Event) => { activeTab.value = ($event.target as HTMLSelectElement).value; }}
+          onChange={($event: Event) => { activeTab.value = ($event.target as HTMLSelectElement).value; }}
         >
           <option>edit</option>
           <option>display</option>
-          <option>json</option>
+          <option>data</option>
         </select>
 
-        <Schlechtenburg
+        {(() => {
-          v-show={activeTab.value === 'edit'}
+          switch (activeTab.value) {
+            case SbMode.Edit:
+              return <Schlechtenburg
                 block={block}
-          eventUpdate={(newBlock: Block) => {
+                eventUpdate={(newBlock: Block<any>) => {
-            block.name = newBlock.name;
-            block.blockId = newBlock.blockId;
                   block.data = newBlock.data;
                 }}
-        />
+                key="edit"
-
+                mode="edit"
-        <Schlechtenburg
+              />;
-          v-show={activeTab.value === 'display'}
+            case SbMode.Edit:
+              return <Schlechtenburg
                 block={block}
-          mode={SbMode.Display}
+                key="display"
-        />
+                mode="display"
-
+              />;
-        <pre v-show={activeTab.value === 'json'}>
+            case 'data':
-          <code>{JSON.stringify(block, null, 2)}</code>
+              return <pre><code>{JSON.stringify(block, null, 2)}</code></pre>;
-        </pre>
+          }
+        })()}
       </div>
     );
   },

packages/core/lib/blocks.ts

@@ -0,0 +1,34 @@
+import { Component } from 'vue';
+
+export interface BlockDefinition {
+  name: string;
+  getDefaultData: any;
+  edit: Component;
+  display: Component;
+}
+
+export interface BlockLibraryDefinition {
+  [name: string]: BlockDefinition;
+}
+
+export interface BlockProps<T> {
+  blockId: string;
+  data: T;
+}
+
+export interface Block<T> extends BlockProps<T> {
+  name: string;
+}
+
+export const model = {
+  prop: 'block',
+  event: 'update',
+};
+
+export const blockProps = {
+  blockId: {
+    type: String,
+    default: () => `${+(new Date())}`,
+  },
+  data: { type: Object, default: () => ({}) },
+};

packages/core/lib/components/Schlechtenburg.tsx

@@ -8,16 +8,14 @@ import {
 } from 'vue';
 import {
   model,
-  ActiveBlock,
   Block,
-  SbMode,
-  Mode,
-  EditorDimensions,
   BlockDefinition,
   BlockLibraryDefinition,
-  BlockLibrary,
+} from '/@/blocks';
-  useResizeObserver,
+import { Mode, SbMode } from '/@/mode';
-} from '/@components/TreeElement';
+import { BlockLibrary } from '/@/use-dynamic-blocks';
+import { EditorDimensions, useResizeObserver } from '/@/use-resize-observer';
+import { ActiveBlock } from '/@/use-activation';
 
 import SbBlock from '/@internal/Block';
 
@@ -30,8 +28,8 @@ import './Schlechtenburg.scss';
 
 export interface SchlechtenburgProps {
   customBlocks: BlockDefinition[];
-  eventUpdate: (b: Block) => void;
+  eventUpdate: (b: Block<any>) => void;
-  block: Block;
+  block: Block<any>;
   mode: SbMode;
 }
 
@@ -42,18 +40,18 @@ export default defineComponent({
 
   props: {
     customBlocks: { type: Array as PropType<BlockDefinition[]>, default: () => [] },
-    block: { type: Object as PropType<Block>, required: true },
+    block: { type: Object as PropType<Block<any>>, required: true },
     eventUpdate: { type: Function, default: () => {} },
     mode: {
-      type: String as SbMode,
+      type: String as PropType<SbMode>,
-      validator(value: string) {
+      validator(value: any) {
         return Object.values(SbMode).includes(value);
       },
       default: SbMode.Edit,
     },
   },
 
-  setup(props: SchlechtenburgProps) {
+  setup(props) {
     const el: Ref<null|HTMLElement> = ref(null);
     useResizeObserver(el, EditorDimensions);
 
@@ -69,10 +67,7 @@ export default defineComponent({
       'sb-paragraph': SbParagraph,
       'sb-heading': SbHeading,
       ...props.customBlocks.reduce(
-        (
+        (blocks: {[name: string]: Block<any>}, block: Block<any>) => ({ ...blocks, [block.name]: block }),
-          blocks,
-          block,
-        ) => ({ ...blocks, [block.name]: block }),
         {},
       ),
     });

packages/core/lib/components/TreeElement.ts

@@ -1,130 +0,0 @@
-import {
-  Ref,
-  ref,
-  inject,
-  reactive,
-  computed,
-  watch,
-  provide,
-} from 'vue';
-
-export interface BlockDefinition {
-  name: string;
-  getDefaultData: any;
-  edit: () => Promise<any>;
-  display: () => Promise<any>;
-}
-
-export interface BlockLibraryDefinition {
-  [name: string]: BlockDefinition;
-}
-
-export interface BlockData { [name: string]: any }
-
-export interface Block {
-  name: string;
-  blockId: string;
-  data: BlockData;
-}
-
-export interface BlockProps {
-  blockId: string;
-  data: { [key: string]: any};
-}
-
-export const model = {
-  prop: 'block',
-  event: 'update',
-};
-
-export const blockProps = {
-  blockId: { type: String, required: true },
-  data: { type: Object, default: () => ({}) },
-};
-
-export enum SbMode {
-  Edit = 'edit',
-  Display = 'display',
-}
-export const Mode = Symbol('Schlechtenburg mode');
-export const BlockLibrary = Symbol('Schlechtenburg block library');
-export function useDynamicBlocks() {
-  const mode = inject(Mode, ref(SbMode.Edit));
-  const customBlocks: BlockLibraryDefinition = inject(BlockLibrary, reactive({}));
-  const getBlock = (name: string) => customBlocks[name][mode.value];
-
-  return {
-    mode,
-    customBlocks,
-    getBlock,
-  };
-}
-
-interface BlockRect {
-  height: number;
-  width: number;
-  left: number;
-  top: number;
-}
-
-export const BlockDimensions = Symbol('Schlechtenburg block dimensions');
-export const EditorDimensions = Symbol('Schlechtenburg editor dimensions');
-export function useResizeObserver(el: Ref<null|HTMLElement>, symbol: symbol) {
-  const dimensions: Ref<null|BlockRect> = ref(null);
-  provide(symbol, dimensions);
-  const triggerSizeCalculation = () => {
-    if (!el.value) {
-      return;
-    }
-
-    const clientRect = el.value.getBoundingClientRect();
-    dimensions.value = {
-      width: clientRect.width,
-      height: clientRect.height,
-      left: el.value.offsetLeft,
-      top: el.value.offsetTop,
-    };
-  };
-
-  const resizeObserver = new ResizeObserver(triggerSizeCalculation);
-  const mutationObserver = new MutationObserver(triggerSizeCalculation);
-
-  watch(el, () => {
-    if (!el.value) {
-      return;
-    }
-    resizeObserver.observe(el.value);
-    mutationObserver.observe(el.value, { attributes: true, childList: false, subtree: false });
-  });
-
-  return { triggerSizeCalculation, dimensions };
-}
-
-export function useBlockSizing() {
-  const editorDimensions: Ref<BlockRect|null> = inject(EditorDimensions, ref(null));
-  const blockDimensions: Ref<BlockRect|null> = inject(BlockDimensions, ref(null));
-
-  return { editorDimensions, blockDimensions };
-}
-
-export const ActiveBlock = Symbol('Schlechtenburg active block');
-export function useActivation(currentBlockId: string) {
-  const activeBlockId: Ref<string|null> = inject(ActiveBlock, ref(null));
-  const isActive = computed(() => activeBlockId.value === currentBlockId);
-  const activate = (blockId?: string|null) => {
-    activeBlockId.value = blockId !== undefined ? blockId : currentBlockId;
-  };
-  const requestActivation = () => {
-    if (activeBlockId.value) {
-      return;
-    }
-
-    activate();
-  };
-
-  return {
-    isActive,
-    activate,
-    requestActivation,
-  };
-}

packages/core/lib/components/internal/Block.tsx

@@ -6,14 +6,11 @@ import {
   ref,
   Ref,
 } from 'vue';
-import {
+import { Block } from '/@/blocks';
-  Block,
+import { SbMode } from '/@/mode';
-  useDynamicBlocks,
+import { useResizeObserver, BlockDimensions } from '/@/use-resize-observer';
-  useActivation,
+import { useActivation } from '/@/use-activation';
-  SbMode,
+import { useDynamicBlocks } from '/@/use-dynamic-blocks';
-  BlockDimensions,
-  useResizeObserver,
-} from '/@components/TreeElement';
 
 import SbBlockOrdering from './BlockOrdering';
 
@@ -22,7 +19,7 @@ import './Block.scss';
 interface BlockProps {
   block: Block;
   eventUpdate: (b?: Block) => void;
-  eventInsertBlock: (b?: Block) => void;
+  eventPrependBlock: (b?: Block) => void;
   eventAppendBlock: (b?: Block) => void;
   eventRemoveBlock: () => void;
   eventMoveUp: () => void;
@@ -43,7 +40,7 @@ export default defineComponent({
       default: null,
     },
     eventUpdate: { type: Function, default: () => {} },
-    eventInsertBlock: { type: Function, default: () => {} },
+    eventPrependBlock: { type: Function, default: () => {} },
     eventAppendBlock: { type: Function, default: () => {} },
     eventRemoveBlock: { type: Function, default: () => {} },
     eventMoveUp: { type: Function, default: () => {} },
@@ -88,31 +85,19 @@ export default defineComponent({
       class={classes.value}
     >
       <div class="sb-block__edit-cover"></div>
-      {props.sortable
+      {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
-        ? <SbBlockOrdering
-          eventMoveUp={props.eventMoveUp}
-          eventMoveDown={props.eventMoveDown}
-          eventRemoveBlock={props.eventRemoveBlock}
-          sortable={props.sortable}
-        />
-        : null}
       <BlockComponent
         data={props.block.data}
-        block-id={props.block.blockId}
+        blockId={props.block.blockId}
         eventUpdate={onChildUpdate}
-        eventInsertBlock={props.eventInsertBlock}
+        eventPrependBlock={props.eventPrependBlock}
         eventAppendBlock={props.eventAppendBlock}
         eventRemoveBlock={props.eventRemoveBlock}
-        {...{
+        onClick={($event: MouseEvent) => {
-          attrs: context.attrs,
-          nativeOn: {
-            click: ($event: MouseEvent) => {
           $event.stopPropagation();
           activate();
-            },
-            ...context.listeners,
-          },
         }}
+        {...context.attrs}
       />
     </div>;
   },

packages/core/lib/components/internal/BlockOrdering.tsx

@@ -3,17 +3,15 @@ import {
   watch,
   reactive,
   computed,
-  defineAsyncComponent,
+  defineComponent,
 } from 'vue';
-import {
+import { useBlockSizing } from '/@/use-resize-observer';
-  useBlockSizing,
-} from '/@components/TreeElement';
 
 import SbButton from './Button';
 
 import './BlockOrdering.scss';
 
-export default defineAsyncComponent({
+export default defineComponent({
   name: 'sb-block-ordering',
 
   props: {

packages/core/lib/components/internal/BlockPicker.tsx

@@ -6,10 +6,10 @@ import {
 import {
   useDynamicBlocks,
   BlockDefinition,
-} from '../TreeElement';
+} from '/@/use-dynamic-blocks';
 
-import SbButton from './Button';
+import SbButton from '/@internal/Button';
-import SbModal from './Modal';
+import SbModal from '/@internal/Modal';
 
 import './BlockPicker.scss';
 

packages/core/lib/components/internal/BlockPlaceholder.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
-import { BlockDefinition } from '../TreeElement';
+import { BlockDefinition } from '/@/blocks';
-import BlockPicker from './BlockPicker';
+import BlockPicker from '/@internal/BlockPicker';
 
 import './BlockPlaceholder.scss';
 
@@ -11,11 +11,7 @@ export default defineComponent({
     return () => (
       <div class="sb-block-placeholder">
         <BlockPicker
-          {...{
+          onPickedBlock={(block: BlockDefinition) => context.emit('insert-block', block)}
-            on: {
-              'picked-block': (block: BlockDefinition) => context.emit('insert-block', block),
-            },
-          }}
         />
       </div>
     );

packages/core/lib/components/internal/Button.tsx

@@ -9,10 +9,9 @@ export default defineComponent({
   setup(props, context) {
     return () => (
       <button
-        class="sb-button"
         {...{
-          attrs: context.attrs,
+          ...context.attrs,
-          on: context.listeners,
+          class: (context.attrs.class || '') + ' sb-button',
         }}
       >
         {context.slots.default()}

packages/core/lib/components/internal/Select.tsx

@@ -11,10 +11,7 @@ export default defineComponent({
       <div class="sb-select">
         <select
           class="sb-select__input"
-          {...{
+          {...context.attrs}
-            attrs: context.attrs,
-            on: context.listeners,
-          }}
         >
           {context.slots.default()}
         </select>

packages/core/lib/components/internal/Toolbar.tsx

@@ -4,14 +4,14 @@ import {
   watch,
   reactive,
 } from 'vue';
-import { useBlockSizing } from '/@components/TreeElement';
+import { useBlockSizing } from '/@/use-resize-observer';
 
 import './Toolbar.scss';
 
 export default defineComponent({
   name: 'sb-toolbar',
 
-  setup(props, context) {
+  setup(_, context) {
     const styles = reactive({
       bottom: '',
       left: '',
@@ -38,7 +38,7 @@ export default defineComponent({
         style={styles}
         onClick={($event: MouseEvent) => $event.stopPropagation()}
       >
-        {context.slots.default()}
+        {context.slots?.default?.()}
       </div>
     );
   },

packages/core/lib/components/user/Image/display.tsx

@@ -1,8 +1,10 @@
-import { defineAsyncComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
   model,
   blockProps,
-} from '/@components/TreeElement';
+} from '/@/blocks';
+
+import SbBlock from '/@internal/block';
 
 import {
   getDefaultData,
@@ -12,7 +14,7 @@ import {
 
 import './style.scss';
 
-export default defineAsyncComponent({
+export default defineComponent({
   name: 'sb-image-display',
 
   model,
@@ -26,12 +28,13 @@ export default defineAsyncComponent({
   },
 
   setup(props: ImageProps) {
-    console.log('img display', props.data);
+    return () => <figure class="sb-image">
-
+        <img
-    return () => <img
+          class="sb-image__content"
-      class="sb-image"
           src={props.data.src}
           alt={props.data.alt}
-    />;
+        />
+        <SbBlock block={props.data.description} />
+      </figure>;
   },
 });

packages/core/lib/components/user/Image/edit.tsx

@@ -1,5 +1,5 @@
 import {
-  defineAsyncComponent,
+  defineComponent,
   reactive,
   ref,
   Ref,
@@ -9,10 +9,11 @@ import {
 import {
   model,
   blockProps,
-} from '/@components/TreeElement';
+} from '/@/blocks';
 
 import SbToolbar from '/@internal/Toolbar';
 import SbButton from '/@internal/Button';
+import SbBlock from '/@internal/Block';
 
 import {
   getDefaultData,
@@ -22,7 +23,7 @@ import {
 
 import './style.scss';
 
-export default defineAsyncComponent({
+export default defineComponent({
   name: 'sb-image-edit',
 
   model,
@@ -40,6 +41,7 @@ export default defineAsyncComponent({
     const localData = reactive({
       src: props.data.src,
       alt: props.data.alt,
+      description: props.data.description,
     });
 
     const fileInput: Ref<null|HTMLInputElement> = ref(null);
@@ -47,6 +49,7 @@ export default defineAsyncComponent({
     watch(() => props.data, () => {
       localData.src = props.data.src;
       localData.alt = props.data.alt;
+      localData.description = props.data.description;
     });
 
     const selectImage = () => {
@@ -62,6 +65,7 @@ export default defineAsyncComponent({
           props.eventUpdate({
             src: reader.result,
             alt: props.data.alt,
+            description: props.data.description,
           });
         });
 
@@ -69,23 +73,40 @@ export default defineAsyncComponent({
       }
     };
 
+    const onDescriptionUpdate = (description) => {
+      props.eventUpdate({
+        ...props.data,
+        description,
+      });
+    };
+
     return () => (
-      <div class="sb-image">
+      <figure class="sb-image">
         <SbToolbar>
           {localData.src
             ? <SbButton onClick={selectImage}>Change Image</SbButton>
             : null}
           <input
             type="file"
-            ref="fileInput"
+            ref={fileInput}
             style="display: none;"
             onInput={onImageSelect}
           />
         </SbToolbar>
         {localData.src
-          ? <img src={localData.src} alt={localData.alt} />
+          ? <>
+              <img
+                src={localData.src}
+                alt={localData.alt}
+                class="sb-image__content"
+              />
+              <SbBlock
+                block={localData.description}
+                eventUpdate={(updated: Block) => onDescriptionUpdate(updated)}
+              />
+            </>
           : <SbButton onClick={selectImage}>Select Image</SbButton>}
-      </div>
+      </figure>
     );
   },
 });

packages/core/lib/components/user/Image/style.scss

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

packages/core/lib/components/user/Image/util.ts

@@ -1,8 +1,13 @@
-import { BlockData, BlockProps } from '/@components/TreeElement';
+import {
+  ParagraphData,
+  getDefaultData as getDefaultParagraphData
+} from '/@user/Paragraph/util';
+import { BlockData, BlockProps } from '/@/blocks';
 
 export interface ImageData {
   src: string;
   alt: string;
+  description: ParagraphData;
 }
 
 export interface ImageProps extends BlockProps {
@@ -13,4 +18,5 @@ export interface ImageProps extends BlockProps {
 export const getDefaultData: () => ImageData = () => ({
   src: '',
   alt: '',
+  description: getDefaultParagraphData(),
 });

packages/core/lib/components/user/Layout/display.tsx

@@ -6,7 +6,7 @@ import {
 import {
   model,
   blockProps,
-} from '/@components/TreeElement';
+} from '/@/blocks';
 
 import SbBlock from '/@internal/Block';
 
@@ -37,8 +37,6 @@ export default defineComponent({
       [`sb-layout_${props.data.orientation}`]: true,
     }));
 
-    console.log('layout display', props.data);
-
     return () => (
       <div class={classes.value}>
         {...props.data.children.map((child) => (

packages/core/lib/components/user/Layout/edit.tsx

@@ -7,15 +7,16 @@ import {
 } from 'vue';
 import {
   model,
-  useActivation,
   Block,
   blockProps,
-} from '/@components/TreeElement';
+} from '/@/blocks';
+import { useActivation } from '/@/use-activation';
 
 import SbBlock from '/@internal/Block';
 import SbButton from '/@internal/Button';
 import SbToolbar from '/@internal/Toolbar';
 import SbBlockPlaceholder from '/@internal/BlockPlaceholder';
+import SbBlockOrdering from '/@internal/BlockOrdering';
 
 import {
   LayoutData,
@@ -58,6 +59,7 @@ export default defineComponent({
     }));
 
     const toggleOrientation = () => {
+      console.log('toggle');
       props.eventUpdate({
         orientation: localData.orientation === 'vertical' ? 'horizontal' : 'vertical',
       });
@@ -144,18 +146,12 @@ export default defineComponent({
       props.eventUpdate({ children: [...localData.children] });
     };
 
-    console.log('Rendering edit');
-
     return () => (
       <div class={classes.value}>
-        <SbToolbar slot="toolbar">
+        <SbToolbar>
           <SbButton
             type="button"
-            {...{
+            onClick={toggleOrientation}
-              nativeOn: {
-                click: toggleOrientation,
-              },
-            }}
           >{localData.orientation}</SbButton>
         </SbToolbar>
 
@@ -165,23 +161,23 @@ export default defineComponent({
             data-order={index}
             block={child}
             eventUpdate={(updated: Block) => onChildUpdate(child, updated)}
-            eventInsertBlock={(block: Block) => insertBlock(index, block)}
+            eventPrependBlock={(block: Block) => insertBlock(index - 1, block)}
-            eventAppendBlock={appendBlock}
+            eventAppendBlock={(block: Block) => insertBlock(index, block)}
-            eventRemoveBlock={() => removeBlock(index)}
+            removable
+          >
+            {{
+              'context-toolbar': () =>
+                <SbBlockOrdering
                   eventMoveUp={() => moveUp(index)}
                   eventMoveDown={() => moveDown(index)}
-            sortable={localData.orientation}
+                  eventRemoveBlock={() => removeBlock(index)}
-            removable
+                  sortable={props.sortable}
-          />
+                />,
+            }}
+          </SbBlock>
         ))}
 
-        <SbBlockPlaceholder
+        <SbBlockPlaceholder onInsertBlock={appendBlock} />
-          {...{
-            on: {
-              'insert-block': appendBlock,
-            },
-          }}
-        />
       </div>
     );
   },

packages/core/lib/components/user/Layout/style.scss

@@ -1,6 +1,5 @@
 .sb-layout {
   display: flex;
-  flex-basis: 100%;
 
   &_vertical {
     flex-direction: column;
@@ -10,7 +9,13 @@
     flex-direction: row;
   }
 
+  &__item {
+    position: relative;
+  }
+
   > * {
-    flex-basis: 100%;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
   }
 }

packages/core/lib/components/user/Layout/util.ts

@@ -2,7 +2,7 @@ import {
   BlockProps,
   Block,
   BlockData,
-} from '/@components/TreeElement';
+} from '/@/blocks';
 
 export interface LayoutData {
   orientation: string;

packages/core/lib/components/user/Paragraph/display.tsx

@@ -1,5 +1,5 @@
 import {
-  defineAsyncComponent,
+  defineComponent,
   computed,
   PropType,
 } from 'vue';
@@ -7,7 +7,7 @@ import {
   model,
   blockProps,
   BlockProps,
-} from '/@components/TreeElement';
+} from '/@/blocks';
 
 import {
   getDefaultData,
@@ -20,7 +20,7 @@ interface ParagraphProps extends BlockProps {
   data: ParagraphData;
 }
 
-export default defineAsyncComponent({
+export default defineComponent({
   name: 'sb-paragraph-display',
 
   model,
@@ -39,12 +39,10 @@ export default defineAsyncComponent({
       [`sb-paragraph_align-${props.data.align}`]: true,
     }));
 
-    console.log('p display', props.data);
-
     return () => <p
       class={classes.value}
       {...{
-        domProps: { innerHTML: props.data.value },
+        innerHTML: props.data.value,
       }}
     ></p>;
   },

packages/core/lib/components/user/Paragraph/edit.tsx

@@ -1,5 +1,5 @@
 import {
-  defineAsyncComponent,
+  defineComponent,
   reactive,
   computed,
   ref,
@@ -13,8 +13,8 @@ import {
   blockProps,
   BlockProps,
   BlockData,
-  useActivation,
+} from '/@/blocks';
-} from '/@components/TreeElement';
+import { useActivation } from '/@/use-activation';
 
 import SbToolbar from '/@internal/Toolbar';
 import SbSelect from '/@internal/Select';
@@ -29,11 +29,11 @@ import './style.scss';
 interface ParagraphProps extends BlockProps {
   data: ParagraphData;
   eventUpdate: (b?: ParagraphData) => void;
-  eventInsertBlock: (b?: BlockData) => void;
+  eventAppendBlock: (b?: BlockData) => void;
   eventRemoveBlock: () => void;
 }
 
-export default defineAsyncComponent({
+export default defineComponent({
   name: 'sb-paragraph-edit',
 
   model,
@@ -45,7 +45,7 @@ export default defineAsyncComponent({
       default: getDefaultData,
     },
     eventUpdate: { type: Function, default: () => {} },
-    eventInsertBlock: { type: Function, default: () => {} },
+    eventAppendBlock: { type: Function, default: () => {} },
     eventRemoveBlock: { type: Function, default: () => {} },
   },
 
@@ -118,9 +118,9 @@ export default defineAsyncComponent({
     };
 
     const onKeydown = ($event: KeyboardEvent) => {
-      if ($event.key === 'Enter' && !$event.shiftKey) {
+      if (props.eventAppendBlock && $event.key === 'Enter' && !$event.shiftKey) {
         const blockId = `${+(new Date())}`;
-        props.eventInsertBlock({
+        props.eventAppendBlock({
           blockId,
           name: 'sb-paragraph',
           data: getDefaultData(),
@@ -133,7 +133,7 @@ export default defineAsyncComponent({
     };
 
     const onKeyup = ($event: KeyboardEvent) => {
-      if ($event.key === 'Backspace' && localData.value === '') {
+      if (props.eventRemoveBlock && $event.key === 'Backspace' && localData.value === '') {
         props.eventRemoveBlock();
       }
     };
@@ -163,4 +163,4 @@ export default defineAsyncComponent({
       </div>
     );
   },
-};
+});

packages/core/lib/mode.ts

@@ -0,0 +1,5 @@
+export enum SbMode {
+  Edit = 'edit',
+  Display = 'display',
+}
+export const Mode = Symbol('Schlechtenburg mode');

packages/core/lib/shims-app.d.ts

@@ -1,44 +0,0 @@
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

packages/core/lib/shims-vue.d.ts

@@ -1,5 +1,5 @@
-declare module '*.vue' {
+declare module "*.vue" {
-  import Vue from 'vue';
+  import { defineComponent } from "vue";
-
+  const Component: ReturnType<typeof defineComponent>;
-  export default Vue;
+  export default Component;
 }

packages/core/lib/store.ts

@@ -1,36 +0,0 @@
-/* eslint no-param-reassign: 0 */
-import { GetterTree, MutationTree, ActionTree } from 'vuex';
-
-interface State {
-  activeBlockId: number|null;
-}
-
-const state: State = {
-  activeBlockId: null,
-};
-
-const getters = {
-  activeBlockId: (s) => s.activeBlockId,
-} as GetterTree<State, any>;
-
-const actions = {
-  setActiveBlock({ commit }, id) {
-    commit('setActiveBlock', id);
-  },
-} as ActionTree<State, any>;
-
-const mutations = {
-  setActiveBlock(s, id) {
-    s.activeBlockId = id;
-  },
-} as MutationTree<State>;
-
-const SchlechtenburgModule = {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions,
-};
-
-export default SchlechtenburgModule;

packages/core/lib/use-activation.ts

@@ -0,0 +1,28 @@
+import {
+  Ref,
+  ref,
+  inject,
+  computed,
+} from 'vue';
+
+export const ActiveBlock = Symbol('Schlechtenburg active block');
+export function useActivation(currentBlockId: string) {
+  const activeBlockId: Ref<string|null> = inject(ActiveBlock, ref(null));
+  const isActive = computed(() => activeBlockId.value === currentBlockId);
+  const activate = (blockId?: string|null) => {
+    activeBlockId.value = blockId !== undefined ? blockId : currentBlockId;
+  };
+  const requestActivation = () => {
+    if (activeBlockId.value) {
+      return;
+    }
+
+    activate();
+  };
+
+  return {
+    isActive,
+    activate,
+    requestActivation,
+  };
+}

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

@@ -0,0 +1,20 @@
+import {
+  ref,
+  inject,
+  reactive,
+} from 'vue';
+import { BlockLibraryDefinition } from '/@/blocks';
+import { Mode, SbMode } from '/@/mode';
+
+export const BlockLibrary = Symbol('Schlechtenburg block library');
+export function useDynamicBlocks() {
+  const mode = inject(Mode, ref(SbMode.Edit));
+  const customBlocks: BlockLibraryDefinition = inject(BlockLibrary, reactive({}));
+  const getBlock = (name: string) => customBlocks[name][mode.value];
+
+  return {
+    mode,
+    customBlocks,
+    getBlock,
+  };
+}

packages/core/lib/use-resize-observer.ts

@@ -0,0 +1,54 @@
+import {
+  Ref,
+  ref,
+  inject,
+  watch,
+  provide,
+} from 'vue';
+
+interface BlockRect {
+  height: number;
+  width: number;
+  left: number;
+  top: number;
+}
+
+export const BlockDimensions = Symbol('Schlechtenburg block dimensions');
+export const EditorDimensions = Symbol('Schlechtenburg editor dimensions');
+export function useResizeObserver(el: Ref<null|HTMLElement>, symbol: symbol) {
+  const dimensions: Ref<null|BlockRect> = ref(null);
+  provide(symbol, dimensions);
+  const triggerSizeCalculation = () => {
+    if (!el.value) {
+      return;
+    }
+
+    const clientRect = el.value.getBoundingClientRect();
+    dimensions.value = {
+      width: clientRect.width,
+      height: clientRect.height,
+      left: el.value.offsetLeft,
+      top: el.value.offsetTop,
+    };
+  };
+
+  const resizeObserver = new ResizeObserver(triggerSizeCalculation);
+  const mutationObserver = new MutationObserver(triggerSizeCalculation);
+
+  watch(el, () => {
+    if (!el.value) {
+      return;
+    }
+    resizeObserver.observe(el.value);
+    mutationObserver.observe(el.value, { attributes: true, childList: false, subtree: false });
+  });
+
+  return { triggerSizeCalculation, dimensions };
+}
+
+export function useBlockSizing() {
+  const editorDimensions: Ref<BlockRect|null> = inject(EditorDimensions, ref(null));
+  const blockDimensions: Ref<BlockRect|null> = inject(BlockDimensions, ref(null));
+
+  return { editorDimensions, blockDimensions };
+}

packages/core/lib/vue-app-env.d.ts

@@ -0,0 +1,64 @@
+declare namespace NodeJS {
+  interface Process{
+    env: ProcessEnv
+  }
+  interface ProcessEnv {
+    /**
+     * By default, there are two modes in Vite:
+     *
+     * * `development` is used by vite and vite serve
+     * * `production` is used by vite build
+     *
+     * You can overwrite the default mode used for a command by passing the --mode option flag.
+     *
+     */
+    readonly NODE_ENV: 'development' | 'production'
+  }
+}
+
+declare var process: NodeJS.Process
+
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.webp' {
+    const src: string
+    export default src
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}

packages/core/tsconfig.json

@@ -7,7 +7,15 @@
     "jsx": "preserve",
     "sourceMap": true,
     "lib": [ "esnext", "dom" ],
-    "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }]
+    "plugins": [ { "name": "@vuedx/typescript-plugin-vue" } ],
+    "resolveJsonModule": true,
+//    "noErrorTruncation": true,
+    "paths": {
+      "/@/*": [ "./lib/*" ],
+      "/@components/*": [ "./lib/components/*" ],
+      "/@internal/*": [ "./lib/components/internal/*" ],
+      "/@user/*": [ "./lib/components/user/*" ]
+    }
   },
   "include": [ "lib/**/*.ts", "lib/**/*.d.ts", "lib/**/*.tsx", "lib/**/*.vue" ]
 }