Stuff

docs/assets/display.313a414e.js

@@ -1,2 +0,0 @@
-var e=Object.assign;import{d as n,m as t,q as a,a as s,n as l}from"./index.03405139.js";var i=n({name:"sb-missing-block",model:t,props:e(e({},a),{name:String,data:{type:null,default:null},eventUpdate:{type:Function,default:()=>{}},eventAppendBlock:{type:Function,default:()=>{}},eventRemoveBlock:{type:Function,default:()=>{}}}),setup:e=>()=>s("div",{class:"sb-missing-block"},[l("Missing block: "),e.name])});export default i;
-//# sourceMappingURL=display.313a414e.js.map

docs/assets/display.313a414e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.313a414e.js","sources":["../../packages/core/lib/components/MissingBlock/display.tsx"],"sourcesContent":["import { defineComponent, PropType } from 'vue';\nimport {\n  model,\n  blockProps,\n} from '../../block-helpers';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-missing-block',\n\n  model,\n\n  props: {\n    ...blockProps,\n    name: String,\n    data: {\n      type: (null as unknown) as PropType<any>,\n      default: null,\n    },\n    eventUpdate: { type: Function, default: () => {} },\n    eventAppendBlock: { type: Function, default: () => {} },\n    eventRemoveBlock: { type: Function, default: () => {} },\n  },\n\n  setup(props) {\n    return () => (\n      <div class=\"sb-missing-block\">Missing block: {props.name}</div>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","props","__assign","blockProps","String","data","type","default","eventUpdate","Function","eventAppendBlock","eventRemoveBlock","setup"],"mappings":"8FAQeA,EAAgB,CAC7BC,KAAM,mBAENC,MAAAA,EAEAC,MAAOC,OACFC,GADE,CAELJ,KAAMK,OACNC,KAAM,CACJC,KAAO,KACPC,QAAS,MAEXC,YAAa,CAAEF,KAAMG,SAAUF,QAAS,QACxCG,iBAAkB,CAAEJ,KAAMG,SAAUF,QAAS,QAC7CI,iBAAkB,CAAEL,KAAMG,SAAUF,QAAS,UAG/CK,MAAMX,GACG,mBACM,0CAAmCA,EAAMF"}

docs/assets/display.8f520b74.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.8f520b74.js","sources":["../../packages/layout/lib/display.tsx"],"sourcesContent":["import {\n  defineComponent,\n  computed,\n  PropType,\n} from 'vue';\nimport {\n  model,\n  SbBlock,\n} from '@schlechtenburg/core';\nimport {\n  LayoutData,\n  getDefaultData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-layout-display',\n\n  model,\n\n  props: {\n    data: {\n      type: (null as unknown) as PropType<LayoutData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const classes = computed(() => ({\n      'sb-layout': true,\n      [`sb-layout_${props.data.orientation}`]: true,\n    }));\n\n    return () => (\n      <div class={classes.value}>\n        {...props.data.children.map((child) => (\n          <SbBlock\n            key={child.id}\n            block={child}\n          />\n        ))}\n      </div>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","props","data","type","default","getDefaultData","setup","classes","computed","orientation","value","children","map","child","id"],"mappings":"uGAgBA,MAAeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAO,KACPC,QAASC,IAIbC,MAAML,SACEM,EAAUC,GAAS,KAAO,cACjB,GACX,aAAYP,EAAMC,KAAKO,gBAAgB,YAGpC,mBACOF,EAAQG,WACdT,EAAMC,KAAKS,SAASC,iBAEfC,EAAMC,SACJD"}

docs/assets/display.b255f2dc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.b255f2dc.js","sources":["../../packages/image/lib/display.tsx"],"sourcesContent":["import { defineComponent, PropType } from 'vue';\nimport {\n  model,\n  SbBlock,\n} from '@schlechtenburg/core';\nimport {\n  getDefaultData,\n  ImageData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-image-display',\n\n  model,\n\n  props: {\n    data: {\n      type: (null as unknown) as PropType<ImageData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    return () => <figure class=\"sb-image\">\n        <img\n          class=\"sb-image__content\"\n          src={props.data.src}\n          alt={props.data.alt}\n        />\n        <SbBlock block={props.data.description} />\n      </figure>;\n  },\n});\n"],"names":["defineComponent","name","model","props","data","type","default","getDefaultData","setup","src","alt","description"],"mappings":"gGAYA,MAAeA,EAAgB,CAC7BC,KAAM,mBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAO,KACPC,QAASC,IAIbC,MAAML,GACG,sBAAoB,4BAEf,wBACDA,EAAMC,KAAKK,QACXN,EAAMC,KAAKM,sBAEFP,EAAMC,KAAKO"}

docs/assets/display.fbd8b4d1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.fbd8b4d1.js","sources":["../../packages/paragraph/lib/display.tsx"],"sourcesContent":["import {\n  defineComponent,\n  computed,\n  PropType,\n} from 'vue';\nimport {\n  model,\n} from '@schlechtenburg/core';\nimport {\n  getDefaultData,\n  ParagraphData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-paragraph-display',\n\n  model,\n\n  props: {\n    data: {\n      type: Object as PropType<ParagraphData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const classes = computed(() => ({\n      'sb-paragraph': true,\n      [`sb-paragraph_align-${props.data.align}`]: true,\n    }));\n\n    return () => <p\n      class={classes.value}\n      {...{\n        innerHTML: props.data.value,\n      }}\n    ></p>;\n  },\n});\n"],"names":["defineComponent","name","model","props","data","type","Object","default","getDefaultData","setup","classes","computed","align","value","innerHTML"],"mappings":"uGAeA,MAAeA,EAAgB,CAC7BC,KAAM,uBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAMC,OACNC,QAASC,IAIbC,MAAMN,SACEO,EAAUC,GAAS,KAAO,iBACd,GACd,sBAAqBR,EAAMC,KAAKQ,UAAU,YAGvC,mBACEF,EAAQG,QAEbC,UAAWX,EAAMC,KAAKS"}

docs/assets/edit.4ad603c7.js

@@ -1,2 +0,0 @@
-var a=Object.assign;import{d as t,m as e,p as l,r as s,k as n,w as i,a as d,S as r,b as o,n as c,F as u,e as p}from"./index.03405139.js";/* empty css              */var f=t({name:"sb-image-edit",model:e,props:{onUpdate:{type:Function,default:()=>{}},data:{type:null,default:l}},setup(t){const e=s({src:t.data.src,alt:t.data.alt,description:t.data.description}),l=n(null);i((()=>t.data),(()=>{e.src=t.data.src,e.alt=t.data.alt,e.description=t.data.description}));const f=()=>{l.value&&l.value.click()},v=()=>{if(l.value&&l.value.files&&l.value.files.length){const a=new FileReader;a.addEventListener("load",(()=>{var e;const l=null==(e=null==a?void 0:a.result)?void 0:e.toString();if(!l)throw new Error("Couldn't load image src");t.onUpdate({src:l,alt:t.data.alt,description:t.data.description})})),a.readAsDataURL(l.value.files[0])}};return()=>d("figure",{class:"sb-image"},[d(r,null,{default:()=>[e.src?d(o,{onClick:f},{default:()=>[c("Select Image")]}):null,d("input",{type:"file",ref:l,style:"display: none;",onInput:v},null)]}),e.src?d(u,null,[d("img",{src:e.src,alt:e.alt,class:"sb-image__content"},null),d(p,{block:e.description,onUpdate:e=>{return l=e,void t.onUpdate(a(a({},t.data),{description:l}));var l}},null)]):d(o,{onClick:f},{default:()=>[c("Select Image")]})])}});export default f;
-//# sourceMappingURL=edit.4ad603c7.js.map

docs/assets/edit.4ad603c7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"edit.4ad603c7.js","sources":["../../packages/image/lib/edit.tsx"],"sourcesContent":["import {\n  defineComponent,\n  reactive,\n  ref,\n  Ref,\n  watch,\n  PropType,\n} from 'vue';\nimport {\n  model,\n  SbToolbar,\n  SbButton,\n  SbBlock,\n  BlockData,\n} from '@schlechtenburg/core';\nimport { ParagraphData } from '@schlechtenburg/paragraph';\nimport {\n  getDefaultData,\n  ImageData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-image-edit',\n\n  model,\n\n  props: {\n    onUpdate: { type: Function, default: () => {} },\n    data: {\n      type: (null as unknown) as PropType<ImageData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const localData = reactive({\n      src: props.data.src,\n      alt: props.data.alt,\n      description: props.data.description,\n    });\n\n    const fileInput: Ref<null|HTMLInputElement> = ref(null);\n\n    watch(() => props.data, () => {\n      localData.src = props.data.src;\n      localData.alt = props.data.alt;\n      localData.description = props.data.description;\n    });\n\n    const selectImage = () => {\n      if (fileInput.value) {\n        fileInput.value.click();\n      }\n    };\n\n    const onImageSelect = () => {\n      if (fileInput.value && fileInput.value.files && fileInput.value.files.length) {\n        const reader = new FileReader();\n        reader.addEventListener('load', () => {\n          const src = reader?.result?.toString();\n          if (!src) {\n            throw new Error('Couldn\\'t load image src');\n          }\n\n          props.onUpdate({\n            src,\n            alt: props.data.alt,\n            description: props.data.description,\n          });\n        });\n\n        reader.readAsDataURL(fileInput.value.files[0]);\n      }\n    };\n\n    const onDescriptionUpdate = (description: BlockData<ParagraphData>) => {\n      props.onUpdate({\n        ...props.data,\n        description,\n      });\n    };\n\n    return () => (\n      <figure class=\"sb-image\">\n        <SbToolbar>\n          {localData.src\n            ? <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>\n            : null}\n          <input\n            type=\"file\"\n            ref={fileInput}\n            style=\"display: none;\"\n            onInput={onImageSelect}\n          />\n        </SbToolbar>\n        {localData.src\n          ? <>\n              <img\n                src={localData.src}\n                alt={localData.alt}\n                class=\"sb-image__content\"\n              />\n              <SbBlock\n                block={localData.description}\n                onUpdate={(updated: BlockData<ParagraphData>) => onDescriptionUpdate(updated)}\n              />\n            </>\n          : <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>\n        }\n      </figure>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","props","onUpdate","type","Function","default","data","getDefaultData","setup","localData","reactive","src","alt","description","fileInput","ref","selectImage","value","click","onImageSelect","files","length","reader","FileReader","addEventListener","result","toString","Error","readAsDataURL","onClick","onDescriptionUpdate","updated","__assign"],"mappings":"qKAuBA,MAAeA,EAAgB,CAC7BC,KAAM,gBAENC,MAAAA,EAEAC,MAAO,CACLC,SAAU,CAAEC,KAAMC,SAAUC,QAAS,QACrCC,KAAM,CACJH,KAAO,KACPE,QAASE,IAIbC,MAAMP,SACEQ,EAAYC,EAAS,CACzBC,IAAKV,EAAMK,KAAKK,IAChBC,IAAKX,EAAMK,KAAKM,IAChBC,YAAaZ,EAAMK,KAAKO,cAGpBC,EAAwCC,EAAI,SAE5C,IAAMd,EAAMK,OAAM,OACZK,IAAMV,EAAMK,KAAKK,MACjBC,IAAMX,EAAMK,KAAKM,MACjBC,YAAcZ,EAAMK,KAAKO,qBAG/BG,EAAc,KACdF,EAAUG,SACFA,MAAMC,SAIdC,EAAgB,QAChBL,EAAUG,OAASH,EAAUG,MAAMG,OAASN,EAAUG,MAAMG,MAAMC,OAAQ,OACtEC,EAAS,IAAIC,aACZC,iBAAiB,QAAQ,iBACxBb,EAAMW,0BAAQG,iBAAQC,eACvBf,QACG,IAAIgB,MAAM,6BAGZzB,SAAS,CACbS,IAAAA,EACAC,IAAKX,EAAMK,KAAKM,IAChBC,YAAaZ,EAAMK,KAAKO,mBAIrBe,cAAcd,EAAUG,MAAMG,MAAM,YAWxC,sBACS,oCAETX,EAAUE,SACSkB,QAASb,sCACzB,qBAEG,WACAF,QACC,yBACGK,YAGZV,EAAUE,2BAGEF,EAAUE,QACVF,EAAUG,UACT,sCAGCH,EAAUI,yBACgCiB,SAAoBC,SA5BzE7B,SAAS8B,OACV/B,EAAMK,MADI,CAEbO,YAAAA,KAHyBA,qBAgCLgB,QAASb"}

docs/assets/edit.585777ee.js

@@ -1,2 +0,0 @@
-var e=Object.assign;import{d as n,m as i,g as t,u as l,r as a,w as d,c as r,a as c,S as o,b as h,e as s,f as p,h as u,i as v}from"./index.03405139.js";/* empty css              */var f=n({name:"sb-layout-edit",model:i,props:{onUpdate:{type:Function,default:()=>{}},data:{type:null,default:t}},setup(n){const{activate:i}=l(),t=a({orientation:n.data.orientation,children:[...n.data.children]});d((()=>n.data),(()=>{t.orientation=n.data.orientation,t.children=[...n.data.children]}));const f=r((()=>({"sb-layout":!0,[`sb-layout_${t.orientation}`]:!0}))),m=()=>{n.onUpdate({orientation:"vertical"===t.orientation?"horizontal":"vertical"})},U=e=>{t.children=[...t.children,e],n.onUpdate({children:[...t.children]}),i(e.id)},b=(e,l)=>{t.children=[...t.children.slice(0,e+1),l,...t.children.slice(e+1)],n.onUpdate({children:[...t.children]}),i(l.id)},y=e=>{t.children=[...t.children.slice(0,e),...t.children.slice(e+1)],n.onUpdate({children:[...t.children]});const l=Math.max(e-1,0);i(t.children[l].id)},k=e=>{const n=Math.max(Math.min(t.children.length-1,e),0);i(t.children[n].id)};return()=>c("div",{class:f.value},[c(o,null,{default:()=>[c(h,{type:"button",onClick:m},{default:()=>[t.orientation]})]}),...t.children.map(((i,l)=>c(s,p({key:i.id},{"data-order":l,block:i,onUpdate:l=>((i,l)=>{const a=t.children.indexOf(i);-1!==a&&n.onUpdate({children:[...t.children.slice(0,a),e(e({},i),l),...t.children.slice(a+1)]})})(i,l),onRemoveSelf:()=>y(l),onPrependBlock:e=>b(l-1,e),onAppendBlock:e=>b(l,e),onActivatePrevious:()=>k(l-1),onActivateNext:()=>k(l+1)}),{"context-toolbar":()=>c(u,{onMoveBackward:()=>(e=>{if(0===e)return;const i=t.children[e],l=t.children[e-1];t.children=[...t.children.slice(0,e-1),i,l,...t.children.slice(e+1)],n.onUpdate({children:[...t.children]})})(l),onMoveForward:()=>(e=>{if(e===t.children.length-1)return;const i=t.children[e],l=t.children[e+1];t.children=[...t.children.slice(0,e),l,i,...t.children.slice(e+2)],n.onUpdate({children:[...t.children]})})(l),onRemove:()=>y(l),orientation:t.orientation},null)}))),c(v,{onInsertBlock:U},null)])}});export default f;
-//# sourceMappingURL=edit.585777ee.js.map

docs/assets/edit.bd5075df.js

@@ -1,2 +0,0 @@
-export default{};
-//# sourceMappingURL=edit.bd5075df.js.map

docs/assets/edit.bd5075df.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"edit.bd5075df.js","sources":["../../packages/heading/lib/edit.tsx"],"sourcesContent":["export default {};\n"],"names":[],"mappings":"cAAe"}

package.json

@@ -2,23 +2,8 @@
   "name": "schlechtenburg",
   "version": "0.0.0",
   "license": "GPL-3.0-or-later",
-  "scripts": {
+  "scripts": {},
-    "dev": "concurrently 'vuedx-typecheck --no-pretty --watch ./src' 'vite'",
-    "build": "vuedx-typecheck --no-pretty ./src && vite build"
-  },
-  "dependencies": {
-    "lodash-es": "^4.17.21",
-    "vue": "^3.0.7"
-  },
   "devDependencies": {
-    "@vitejs/plugin-vue-jsx": "^1.1.2",
+    "lerna": "^3.22.1"
-    "@vue/compiler-sfc": "^3.0.7",
-    "@vuedx/typecheck": "^0.6.3",
-    "@vuedx/typescript-plugin-vue": "^0.6.3",
-    "concurrently": "^6.0.0",
-    "lerna": "^3.22.1",
-    "sass": "^1.32.8",
-    "typescript": "^4.2.3",
-    "vite": "^2.0.5"
   }
 }

packages/core/lib/components/BlockPicker.scss

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

packages/core/lib/components/BlockPicker.tsx

@@ -7,7 +7,7 @@ import { useDynamicBlocks } from '../use-dynamic-blocks';
 import { BlockDefinition } from '../types';
 
 import { SbButton } from './Button';
-import { SbModal } from './Modal';
+import { SbContextMenu } from './ContextMenu';
 
 import './BlockPicker.scss';
 
@@ -18,8 +18,7 @@ export const SbBlockPicker = defineComponent({
     onPickedBlock: { type: Function, default: () => {} },
   },
 
-  setup(props) {
+  setup(props, context) {
-    const open = ref(false);
     const { customBlocks } = useDynamicBlocks();
 
     const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
@@ -35,32 +34,24 @@ export const SbBlockPicker = defineComponent({
 
     return () => (
       <div class="sb-block-picker">
+        <SbContextMenu
+          class="sb-tree-block-select"
+          v-slots={{
+            context: (slotContext) => context.slots.context
+              ? context.slots.context(slotContext)
+              : <SbButton {...{ onClick: slotContext.toggle }}>Insert a block</SbButton>,
+            default: ({ close }: { close: Function }) => blockList.value.map((block: BlockDefinition<any>) => (
             <SbButton
-          class="sb-block-picker__add-button"
               {...{
                 type: 'button',
-            onClick: ($event: MouseEvent) => {
+                onClick: () => {
-              open.value = true;
+                  selectBlock(block);
-              $event.stopPropagation();
+                  close();
                 },
               }}
-        >+</SbButton>
+            >{block.name}</SbButton>)),
-        <SbModal
-          open={open.value}
-          onClose={() => {
-            open.value = false;
           }}
-          {...{ onClick: ($event: MouseEvent) => $event.stopPropagation() }}
+        ></SbContextMenu>
-        >
-          {...blockList.value.map((block: BlockDefinition<any>) => (
-            <SbButton
-              {...{
-                type: 'button',
-                onClick: () => selectBlock(block),
-              }}
-            >{block.name}</SbButton>
-          ))}
-        </SbModal>
       </div>
     );
   },

packages/core/lib/components/BlockPlaceholder.scss

@@ -7,4 +7,12 @@
     background-color: var(--grey-1);
     width: 100%;
   }
+
+  .sb-block-picker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  }
 }

packages/core/lib/components/GlobalInsert.scss

@@ -0,0 +1,2 @@
+.sb-global-insert {
+}

packages/core/lib/components/GlobalInsert.tsx

@@ -0,0 +1,32 @@
+import { defineComponent } from 'vue';
+import { TreeNode } from '../types';
+import { useBlockTree } from '../use-block-tree';
+import { useActivation } from '../use-activation';
+
+import { SbBlockPicker } from './BlockPicker';
+import { SbButton } from './Button';
+
+import './GlobalInsert.scss';
+
+export const SbGlobalInsert = defineComponent({
+  name: 'sb-global-insert',
+
+  setup() {
+    const { blockTree } = useBlockTree();
+    const {
+      activate,
+      activeBlockId,
+    } = useActivation();
+
+    return () => (
+      blockTree.value
+        ?  <SbBlockPicker
+          class="sb-global-insert"
+          v-slots={{
+            default: ({ toggle }: { toggle: Function }) => <SbButton {...{ onClick: toggle }}>+</SbButton>,
+          }}
+        />
+        : ''
+    );
+  },
+});

packages/core/lib/components/MainMenu.scss

@@ -1,2 +1,3 @@
 .sb-main-menu {
+  display: flex;
 }

packages/core/lib/components/MainMenu.tsx

@@ -4,6 +4,7 @@ import {
 } from 'vue';
 import { BlockData } from '../types';
 import { SbTreeBlockSelect } from './TreeBlockSelect';
+import { SbGlobalInsert } from './GlobalInsert';
 
 import './MainMenu.scss';
 
@@ -21,6 +22,7 @@ export const SbMainMenu = defineComponent({
     return () => (
       <div class="sb-main-menu">
         <SbTreeBlockSelect />
+        <SbGlobalInsert />
       </div>
     );
   },

packages/core/lib/components/Schlechtenburg.tsx

@@ -27,7 +27,7 @@ import { SbMainMenu } from './MainMenu';
 import { SbBlockToolbar } from './BlockToolbar';
 import { SbBlock } from './Block';
 
-import './Main.scss';
+import './Schlechtenburg.scss';
 
 export const SbMain = defineComponent({
   name: 'sb-main',

packages/core/lib/index.ts

@@ -9,7 +9,7 @@ export * from './use-resize-observer';
 
 export * from './directives/activation-cover.js';
 
-export * from './components/Main';
+export * from './components/Schlechtenburg';
 export * from './components/Block';
 export * from './components/BlockPicker';
 export * from './components/BlockOrdering';

packages/docs/README.md

@@ -0,0 +1,11 @@
+# `@schlechtenburg/docs`
+
+> TODO: description
+
+## Usage
+
+```
+const docs = require('@schlechtenburg/docs');
+
+// TODO: DEMONSTRATE API
+```

packages/docs/__tests__/docs.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const docs = require('..');
+
+describe('@schlechtenburg/docs', () => {
+    it('needs tests');
+});

packages/docs/docs/assets/display.29fe9284.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty,t=Object.prototype.hasOwnProperty,a=Object.getOwnPropertySymbols,n=Object.prototype.propertyIsEnumerable,o=(t,a,n)=>a in t?e(t,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[a]=n,r=(e,r)=>{for(var l in r||(r={}))t.call(r,l)&&o(e,l,r[l]);if(a)for(var l of a(r))n.call(r,l)&&o(e,l,r[l]);return e};import{d as l,m as p,q as s,a as i,n as c}from"./index.87211b72.js";var u=l({name:"sb-missing-block",model:p,props:r(r({},s),{name:String,data:{type:null,default:null},eventUpdate:{type:Function,default:()=>{}},eventAppendBlock:{type:Function,default:()=>{}},eventRemoveBlock:{type:Function,default:()=>{}}}),setup:e=>()=>i("div",{class:"sb-missing-block"},[c("Missing block: "),e.name])});export default u;
+//# sourceMappingURL=display.29fe9284.js.map

packages/docs/docs/assets/display.29fe9284.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.29fe9284.js","sources":["../../../core/lib/components/MissingBlock/display.tsx"],"sourcesContent":["import { defineComponent, PropType } from 'vue';\nimport {\n  model,\n  blockProps,\n} from '../../block-helpers';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-missing-block',\n\n  model,\n\n  props: {\n    ...blockProps,\n    name: String,\n    data: {\n      type: (null as unknown) as PropType<any>,\n      default: null,\n    },\n    eventUpdate: { type: Function, default: () => {} },\n    eventAppendBlock: { type: Function, default: () => {} },\n    eventRemoveBlock: { type: Function, default: () => {} },\n  },\n\n  setup(props) {\n    return () => (\n      <div class=\"sb-missing-block\">Missing block: {props.name}</div>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","props","__assign","blockProps","String","data","type","default","eventUpdate","Function","eventAppendBlock","eventRemoveBlock","setup"],"mappings":"uZAQeA,EAAgB,CAC7BC,KAAM,mBAENC,MAAAA,EAEAC,MAAOC,OACFC,GADE,CAELJ,KAAMK,OACNC,KAAM,CACJC,KAAO,KACPC,QAAS,MAEXC,YAAa,CAAEF,KAAMG,SAAUF,QAAS,QACxCG,iBAAkB,CAAEJ,KAAMG,SAAUF,QAAS,QAC7CI,iBAAkB,CAAEL,KAAMG,SAAUF,QAAS,UAG/CK,MAAMX,GACG,mBACM,0CAAmCA,EAAMF"}

packages/docs/docs/assets/display.38f829d6.js

@@ -1,2 +1,2 @@
-import{d as a,m as s,p as e,a as t,e as l}from"./index.03405139.js";/* empty css              */var d=a({name:"sb-image-display",model:s,props:{data:{type:null,default:e}},setup:a=>()=>t("figure",{class:"sb-image"},[t("img",{class:"sb-image__content",src:a.data.src,alt:a.data.alt},null),t(l,{block:a.data.description},null)])});export default d;
+import{d as a,m as s,p as e,a as t,e as l}from"./index.87211b72.js";/* empty css              */var d=a({name:"sb-image-display",model:s,props:{data:{type:null,default:e}},setup:a=>()=>t("figure",{class:"sb-image"},[t("img",{class:"sb-image__content",src:a.data.src,alt:a.data.alt},null),t(l,{block:a.data.description},null)])});export default d;
-//# sourceMappingURL=display.b255f2dc.js.map
+//# sourceMappingURL=display.38f829d6.js.map

packages/docs/docs/assets/display.38f829d6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.38f829d6.js","sources":["../../../image/lib/display.tsx"],"sourcesContent":["import { defineComponent, PropType } from 'vue';\nimport {\n  model,\n  SbBlock,\n} from '@schlechtenburg/core';\nimport {\n  getDefaultData,\n  ImageData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-image-display',\n\n  model,\n\n  props: {\n    data: {\n      type: (null as unknown) as PropType<ImageData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    return () => <figure class=\"sb-image\">\n        <img\n          class=\"sb-image__content\"\n          src={props.data.src}\n          alt={props.data.alt}\n        />\n        <SbBlock block={props.data.description} />\n      </figure>;\n  },\n});\n"],"names":["defineComponent","name","model","props","data","type","default","getDefaultData","setup","src","alt","description"],"mappings":"gGAYA,MAAeA,EAAgB,CAC7BC,KAAM,mBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAO,KACPC,QAASC,IAIbC,MAAML,GACG,sBAAoB,4BAEf,wBACDA,EAAMC,KAAKK,QACXN,EAAMC,KAAKM,sBAEFP,EAAMC,KAAKO"}

packages/docs/docs/assets/display.3e29429a.js

@@ -1,2 +1,2 @@
-import{d as a,m as s,g as t,c as l,a as e,e as o}from"./index.03405139.js";/* empty css              */var d=a({name:"sb-layout-display",model:s,props:{data:{type:null,default:t}},setup(a){const s=l((()=>({"sb-layout":!0,[`sb-layout_${a.data.orientation}`]:!0})));return()=>e("div",{class:s.value},[...a.data.children.map((a=>e(o,{key:a.id,block:a},null)))])}});export default d;
+import{d as a,m as s,g as t,c as l,a as e,e as o}from"./index.87211b72.js";/* empty css              */var d=a({name:"sb-layout-display",model:s,props:{data:{type:null,default:t}},setup(a){const s=l((()=>({"sb-layout":!0,[`sb-layout_${a.data.orientation}`]:!0})));return()=>e("div",{class:s.value},[...a.data.children.map((a=>e(o,{key:a.id,block:a},null)))])}});export default d;
-//# sourceMappingURL=display.8f520b74.js.map
+//# sourceMappingURL=display.3e29429a.js.map

packages/docs/docs/assets/display.3e29429a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.3e29429a.js","sources":["../../../layout/lib/display.tsx"],"sourcesContent":["import {\n  defineComponent,\n  computed,\n  PropType,\n} from 'vue';\nimport {\n  model,\n  SbBlock,\n} from '@schlechtenburg/core';\nimport {\n  LayoutData,\n  getDefaultData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-layout-display',\n\n  model,\n\n  props: {\n    data: {\n      type: (null as unknown) as PropType<LayoutData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const classes = computed(() => ({\n      'sb-layout': true,\n      [`sb-layout_${props.data.orientation}`]: true,\n    }));\n\n    return () => (\n      <div class={classes.value}>\n        {...props.data.children.map((child) => (\n          <SbBlock\n            key={child.id}\n            block={child}\n          />\n        ))}\n      </div>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","props","data","type","default","getDefaultData","setup","classes","computed","orientation","value","children","map","child","id"],"mappings":"uGAgBA,MAAeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAO,KACPC,QAASC,IAIbC,MAAML,SACEM,EAAUC,GAAS,KAAO,cACjB,GACX,aAAYP,EAAMC,KAAKO,gBAAgB,YAGpC,mBACOF,EAAQG,WACdT,EAAMC,KAAKS,SAASC,iBAEfC,EAAMC,SACJD"}

packages/docs/docs/assets/display.fddb0311.js

@@ -1,2 +1,2 @@
-import{d as a,m as s,j as p,c as r,a as e,f as t}from"./index.03405139.js";/* empty css              */var l=a({name:"sb-paragraph-display",model:s,props:{data:{type:Object,default:p}},setup(a){const s=r((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${a.data.align}`]:!0})));return()=>e("p",t({class:s.value},{innerHTML:a.data.value}),null)}});export default l;
+import{d as a,m as s,j as p,c as r,a as e,f as t}from"./index.87211b72.js";/* empty css              */var l=a({name:"sb-paragraph-display",model:s,props:{data:{type:Object,default:p}},setup(a){const s=r((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${a.data.align}`]:!0})));return()=>e("p",t({class:s.value},{innerHTML:a.data.value}),null)}});export default l;
-//# sourceMappingURL=display.fbd8b4d1.js.map
+//# sourceMappingURL=display.fddb0311.js.map

packages/docs/docs/assets/display.fddb0311.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.fddb0311.js","sources":["../../../paragraph/lib/display.tsx"],"sourcesContent":["import {\n  defineComponent,\n  computed,\n  PropType,\n} from 'vue';\nimport {\n  model,\n} from '@schlechtenburg/core';\nimport {\n  getDefaultData,\n  ParagraphData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-paragraph-display',\n\n  model,\n\n  props: {\n    data: {\n      type: Object as PropType<ParagraphData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const classes = computed(() => ({\n      'sb-paragraph': true,\n      [`sb-paragraph_align-${props.data.align}`]: true,\n    }));\n\n    return () => <p\n      class={classes.value}\n      {...{\n        innerHTML: props.data.value,\n      }}\n    ></p>;\n  },\n});\n"],"names":["defineComponent","name","model","props","data","type","Object","default","getDefaultData","setup","classes","computed","align","value","innerHTML"],"mappings":"uGAeA,MAAeA,EAAgB,CAC7BC,KAAM,uBAENC,MAAAA,EAEAC,MAAO,CACLC,KAAM,CACJC,KAAMC,OACNC,QAASC,IAIbC,MAAMN,SACEO,EAAUC,GAAS,KAAO,iBACd,GACd,sBAAqBR,EAAMC,KAAKQ,UAAU,YAGvC,mBACEF,EAAQG,QAEbC,UAAWX,EAAMC,KAAKS"}

packages/docs/docs/assets/edit.1b0f33cf.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty,n=Object.prototype.hasOwnProperty,i=Object.getOwnPropertySymbols,t=Object.prototype.propertyIsEnumerable,r=(n,i,t)=>i in n?e(n,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[i]=t,l=(e,l)=>{for(var a in l||(l={}))n.call(l,a)&&r(e,a,l[a]);if(i)for(var a of i(l))t.call(l,a)&&r(e,a,l[a]);return e};import{d as a,m as o,g as c,u as d,r as h,w as s,c as p,a as u,S as f,b,e as v,f as m,h as y,i as U}from"./index.87211b72.js";/* empty css              */var k=a({name:"sb-layout-edit",model:o,props:{onUpdate:{type:Function,default:()=>{}},data:{type:null,default:c}},setup(e){const{activate:n}=d(),i=h({orientation:e.data.orientation,children:[...e.data.children]});s((()=>e.data),(()=>{i.orientation=e.data.orientation,i.children=[...e.data.children]}));const t=p((()=>({"sb-layout":!0,[`sb-layout_${i.orientation}`]:!0}))),r=()=>{e.onUpdate({orientation:"vertical"===i.orientation?"horizontal":"vertical"})},a=t=>{i.children=[...i.children,t],e.onUpdate({children:[...i.children]}),n(t.id)},o=(t,r)=>{i.children=[...i.children.slice(0,t+1),r,...i.children.slice(t+1)],e.onUpdate({children:[...i.children]}),n(r.id)},c=t=>{i.children=[...i.children.slice(0,t),...i.children.slice(t+1)],e.onUpdate({children:[...i.children]});const r=Math.max(t-1,0);n(i.children[r].id)},k=e=>{const t=Math.max(Math.min(i.children.length-1,e),0);n(i.children[t].id)};return()=>u("div",{class:t.value},[u(f,null,{default:()=>[u(b,{type:"button",onClick:r},{default:()=>[i.orientation]})]}),...i.children.map(((n,t)=>u(v,m({key:n.id},{"data-order":t,block:n,onUpdate:t=>((n,t)=>{const r=i.children.indexOf(n);-1!==r&&e.onUpdate({children:[...i.children.slice(0,r),l(l({},n),t),...i.children.slice(r+1)]})})(n,t),onRemoveSelf:()=>c(t),onPrependBlock:e=>o(t-1,e),onAppendBlock:e=>o(t,e),onActivatePrevious:()=>k(t-1),onActivateNext:()=>k(t+1)}),{"context-toolbar":()=>u(y,{onMoveBackward:()=>(n=>{if(0===n)return;const t=i.children[n],r=i.children[n-1];i.children=[...i.children.slice(0,n-1),t,r,...i.children.slice(n+1)],e.onUpdate({children:[...i.children]})})(t),onMoveForward:()=>(n=>{if(n===i.children.length-1)return;const t=i.children[n],r=i.children[n+1];i.children=[...i.children.slice(0,n),r,t,...i.children.slice(n+2)],e.onUpdate({children:[...i.children]})})(t),onRemove:()=>c(t),orientation:i.orientation},null)}))),u(U,{onInsertBlock:a},null)])}});export default k;
+//# sourceMappingURL=edit.1b0f33cf.js.map

packages/docs/docs/assets/edit.3e0c191e.js

@@ -0,0 +1,2 @@
+export default{};
+//# sourceMappingURL=edit.3e0c191e.js.map

packages/docs/docs/assets/edit.3e0c191e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.3e0c191e.js","sources":["../../../heading/lib/edit.tsx"],"sourcesContent":["export default {};\n"],"names":[],"mappings":"cAAe"}

packages/docs/docs/assets/edit.a95f3ab1.js

@@ -0,0 +1,2 @@
+var a=Object.defineProperty,e=Object.prototype.hasOwnProperty,t=Object.getOwnPropertySymbols,l=Object.prototype.propertyIsEnumerable,r=(e,t,l)=>t in e?a(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,n=(a,n)=>{for(var s in n||(n={}))e.call(n,s)&&r(a,s,n[s]);if(t)for(var s of t(n))l.call(n,s)&&r(a,s,n[s]);return a};import{d as s,m as o,p as i,r as d,k as c,w as u,a as p,S as f,b as v,n as m,F as b,e as y}from"./index.87211b72.js";/* empty css              */var g=s({name:"sb-image-edit",model:o,props:{onUpdate:{type:Function,default:()=>{}},data:{type:null,default:i}},setup(a){const e=d({src:a.data.src,alt:a.data.alt,description:a.data.description}),t=c(null);u((()=>a.data),(()=>{e.src=a.data.src,e.alt=a.data.alt,e.description=a.data.description}));const l=()=>{t.value&&t.value.click()},r=()=>{if(t.value&&t.value.files&&t.value.files.length){const e=new FileReader;e.addEventListener("load",(()=>{var t;const l=null==(t=null==e?void 0:e.result)?void 0:t.toString();if(!l)throw new Error("Couldn't load image src");a.onUpdate({src:l,alt:a.data.alt,description:a.data.description})})),e.readAsDataURL(t.value.files[0])}};return()=>p("figure",{class:"sb-image"},[p(f,null,{default:()=>[e.src?p(v,{onClick:l},{default:()=>[m("Select Image")]}):null,p("input",{type:"file",ref:t,style:"display: none;",onInput:r},null)]}),e.src?p(b,null,[p("img",{src:e.src,alt:e.alt,class:"sb-image__content"},null),p(y,{block:e.description,onUpdate:e=>{return t=e,void a.onUpdate(n(n({},a.data),{description:t}));var t}},null)]):p(v,{onClick:l},{default:()=>[m("Select Image")]})])}});export default g;
+//# sourceMappingURL=edit.a95f3ab1.js.map

packages/docs/docs/assets/edit.a95f3ab1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.a95f3ab1.js","sources":["../../../image/lib/edit.tsx"],"sourcesContent":["import {\n  defineComponent,\n  reactive,\n  ref,\n  Ref,\n  watch,\n  PropType,\n} from 'vue';\nimport {\n  model,\n  SbToolbar,\n  SbButton,\n  SbBlock,\n  BlockData,\n} from '@schlechtenburg/core';\nimport { ParagraphData } from '@schlechtenburg/paragraph';\nimport {\n  getDefaultData,\n  ImageData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n  name: 'sb-image-edit',\n\n  model,\n\n  props: {\n    onUpdate: { type: Function, default: () => {} },\n    data: {\n      type: (null as unknown) as PropType<ImageData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const localData = reactive({\n      src: props.data.src,\n      alt: props.data.alt,\n      description: props.data.description,\n    });\n\n    const fileInput: Ref<null|HTMLInputElement> = ref(null);\n\n    watch(() => props.data, () => {\n      localData.src = props.data.src;\n      localData.alt = props.data.alt;\n      localData.description = props.data.description;\n    });\n\n    const selectImage = () => {\n      if (fileInput.value) {\n        fileInput.value.click();\n      }\n    };\n\n    const onImageSelect = () => {\n      if (fileInput.value && fileInput.value.files && fileInput.value.files.length) {\n        const reader = new FileReader();\n        reader.addEventListener('load', () => {\n          const src = reader?.result?.toString();\n          if (!src) {\n            throw new Error('Couldn\\'t load image src');\n          }\n\n          props.onUpdate({\n            src,\n            alt: props.data.alt,\n            description: props.data.description,\n          });\n        });\n\n        reader.readAsDataURL(fileInput.value.files[0]);\n      }\n    };\n\n    const onDescriptionUpdate = (description: BlockData<ParagraphData>) => {\n      props.onUpdate({\n        ...props.data,\n        description,\n      });\n    };\n\n    return () => (\n      <figure class=\"sb-image\">\n        <SbToolbar>\n          {localData.src\n            ? <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>\n            : null}\n          <input\n            type=\"file\"\n            ref={fileInput}\n            style=\"display: none;\"\n            onInput={onImageSelect}\n          />\n        </SbToolbar>\n        {localData.src\n          ? <>\n              <img\n                src={localData.src}\n                alt={localData.alt}\n                class=\"sb-image__content\"\n              />\n              <SbBlock\n                block={localData.description}\n                onUpdate={(updated: BlockData<ParagraphData>) => onDescriptionUpdate(updated)}\n              />\n            </>\n          : <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>\n        }\n      </figure>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","props","onUpdate","type","Function","default","data","getDefaultData","setup","localData","reactive","src","alt","description","fileInput","ref","selectImage","value","click","onImageSelect","files","length","reader","FileReader","addEventListener","result","toString","Error","readAsDataURL","onClick","onDescriptionUpdate","updated","__assign"],"mappings":"8dAuBA,MAAeA,EAAgB,CAC7BC,KAAM,gBAENC,MAAAA,EAEAC,MAAO,CACLC,SAAU,CAAEC,KAAMC,SAAUC,QAAS,QACrCC,KAAM,CACJH,KAAO,KACPE,QAASE,IAIbC,MAAMP,SACEQ,EAAYC,EAAS,CACzBC,IAAKV,EAAMK,KAAKK,IAChBC,IAAKX,EAAMK,KAAKM,IAChBC,YAAaZ,EAAMK,KAAKO,cAGpBC,EAAwCC,EAAI,SAE5C,IAAMd,EAAMK,OAAM,OACZK,IAAMV,EAAMK,KAAKK,MACjBC,IAAMX,EAAMK,KAAKM,MACjBC,YAAcZ,EAAMK,KAAKO,qBAG/BG,EAAc,KACdF,EAAUG,SACFA,MAAMC,SAIdC,EAAgB,QAChBL,EAAUG,OAASH,EAAUG,MAAMG,OAASN,EAAUG,MAAMG,MAAMC,OAAQ,OACtEC,EAAS,IAAIC,aACZC,iBAAiB,QAAQ,iBACxBb,EAAMW,0BAAQG,iBAAQC,eACvBf,QACG,IAAIgB,MAAM,6BAGZzB,SAAS,CACbS,IAAAA,EACAC,IAAKX,EAAMK,KAAKM,IAChBC,YAAaZ,EAAMK,KAAKO,mBAIrBe,cAAcd,EAAUG,MAAMG,MAAM,YAWxC,sBACS,oCAETX,EAAUE,SACSkB,QAASb,sCACzB,qBAEG,WACAF,QACC,yBACGK,YAGZV,EAAUE,2BAGEF,EAAUE,QACVF,EAAUG,UACT,sCAGCH,EAAUI,yBACgCiB,SAAoBC,SA5BzE7B,SAAS8B,OACV/B,EAAMK,MADI,CAEbO,YAAAA,KAHyBA,qBAgCLgB,QAASb"}

packages/docs/docs/assets/edit.eff76979.js

@@ -1,2 +1,2 @@
-import{d as a,m as e,j as n,r as l,k as t,u as o,o as u,w as i,c as s,a as r,S as d,l as p,n as v}from"./index.03405139.js";/* empty css              */var c=a({name:"sb-paragraph-edit",model:e,props:{blockId:{type:String,required:!0},data:{type:null,default:n},onUpdate:{type:Function,default:()=>{}},onAppendBlock:{type:Function,default:()=>{}},onRemoveSelf:{type:Function,default:()=>{}},onActivateNext:{type:Function,default:()=>{}},onActivatePrevious:{type:Function,default:()=>{}}},setup(a){const e=l({value:a.data.value,align:a.data.align,focused:!1}),c=t(null),{isActive:f,activate:g}=o(a.blockId),y=()=>{c.value&&f.value&&c.value.focus()};u((()=>{y(),c.value&&(c.value.innerHTML=e.value)})),i(f,y),i((()=>a.data),(()=>{e.value=a.data.value,e.align=a.data.align,c.value&&(c.value.innerHTML=e.value)}));const h=a=>{e.value=a.target.innerHTML},b=s((()=>({"sb-paragraph":!0,"sb-paragraph_focused":e.focused,[`sb-paragraph_align-${e.align}`]:!0}))),k=n=>{a.onUpdate({value:e.value,align:n.target.value})},m=()=>{e.focused=!0,g()},A=()=>{e.focused=!1,a.onUpdate({value:e.value,align:e.align})},w=e=>{if("Enter"===e.key&&!e.shiftKey){const l=""+ +new Date;a.onAppendBlock({id:l,name:"sb-paragraph",data:n()}),g(l),e.preventDefault()}},F=n=>{var l;"Backspace"===n.key&&""===e.value&&a.onRemoveSelf();const t=window.getSelection(),o=null==t?void 0:t.focusNode,u=Array.from((null==(l=null==c?void 0:c.value)?void 0:l.childNodes)||[]),i=o?u.indexOf(o):-1;if(o===c.value||0===i||i===u.length-1)switch(n.key){case"ArrowDown":a.onActivateNext();break;case"ArrowUp":a.onActivatePrevious()}};return()=>r("div",{class:b.value},[r(d,null,{default:()=>[r(p,{value:e.align,onChange:k},{default:()=>[r("option",null,[v("left")]),r("option",null,[v("center")]),r("option",null,[v("right")])]})]}),r("p",{class:"sb-paragraph__input",ref:c,contenteditable:!0,onInput:h,onFocus:m,onBlur:A,onKeydown:w,onKeyup:F},null)])}});export default c;
+import{d as a,m as e,j as n,r as l,k as t,u as o,o as u,w as i,c as s,a as r,S as d,l as p,n as v}from"./index.87211b72.js";/* empty css              */var c=a({name:"sb-paragraph-edit",model:e,props:{blockId:{type:String,required:!0},data:{type:null,default:n},onUpdate:{type:Function,default:()=>{}},onAppendBlock:{type:Function,default:()=>{}},onRemoveSelf:{type:Function,default:()=>{}},onActivateNext:{type:Function,default:()=>{}},onActivatePrevious:{type:Function,default:()=>{}}},setup(a){const e=l({value:a.data.value,align:a.data.align,focused:!1}),c=t(null),{isActive:f,activate:g}=o(a.blockId),y=()=>{c.value&&f.value&&c.value.focus()};u((()=>{y(),c.value&&(c.value.innerHTML=e.value)})),i(f,y),i((()=>a.data),(()=>{e.value=a.data.value,e.align=a.data.align,c.value&&(c.value.innerHTML=e.value)}));const b=a=>{e.value=a.target.innerHTML},h=s((()=>({"sb-paragraph":!0,"sb-paragraph_focused":e.focused,[`sb-paragraph_align-${e.align}`]:!0}))),k=n=>{a.onUpdate({value:e.value,align:n.target.value})},m=()=>{e.focused=!0,g()},A=()=>{e.focused=!1,a.onUpdate({value:e.value,align:e.align})},w=e=>{if("Enter"===e.key&&!e.shiftKey){const l=""+ +new Date;a.onAppendBlock({id:l,name:"sb-paragraph",data:n()}),g(l),e.preventDefault()}},F=n=>{var l;"Backspace"===n.key&&""===e.value&&a.onRemoveSelf();const t=window.getSelection(),o=null==t?void 0:t.focusNode,u=Array.from((null==(l=null==c?void 0:c.value)?void 0:l.childNodes)||[]),i=o?u.indexOf(o):-1;if(o===c.value||0===i||i===u.length-1)switch(n.key){case"ArrowDown":a.onActivateNext();break;case"ArrowUp":a.onActivatePrevious()}};return()=>r("div",{class:h.value},[r(d,null,{default:()=>[r(p,{value:e.align,onChange:k},{default:()=>[r("option",null,[v("left")]),r("option",null,[v("center")]),r("option",null,[v("right")])]})]}),r("p",{class:"sb-paragraph__input",ref:c,contenteditable:!0,onInput:b,onFocus:m,onBlur:A,onKeydown:w,onKeyup:F},null)])}});export default c;
-//# sourceMappingURL=edit.348d280f.js.map
+//# sourceMappingURL=edit.eff76979.js.map

packages/docs/docs/index.html

@@ -5,7 +5,7 @@
   <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.03405139.js"></script>
+<script type="module" crossorigin src="./assets/index.87211b72.js"></script>
   <link rel="stylesheet" href="./assets/index.62d1366f.css">
 </head>
 <body>

packages/docs/index.html

@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
+  <script type="module" src="/lib/main.ts"></script>
 </body>
 </html>

packages/docs/lib/App.tsx

@@ -6,12 +6,12 @@ import {
   ref,
 } from 'vue';
 
-import { SbMain, BlockData, SbMode } from '../packages/core/lib';
+import { SbMain, BlockData, SbMode } from '@schlechtenburg/core';
 
-import SbLayout from '../packages/layout/lib';
+import SbLayout from '@schlechtenburg/layout';
-import SbHeading from '../packages/heading/lib';
+import SbHeading from '@schlechtenburg/heading';
-import SbParagraph from '../packages/paragraph/lib';
+import SbParagraph from '@schlechtenburg/paragraph';
-import SbImage from '../packages/image/lib';
+import SbImage from '@schlechtenburg/image';
 
 import './App.scss';
 

packages/docs/lib/docs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = docs;
+
+function docs() {
+    // TODO
+}

packages/docs/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@schlechtenburg/docs",
+  "version": "0.0.0",
+  "description": "> TODO: description",
+  "author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/docs.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
+  },
+  "scripts": {
+    "dev": "concurrently 'vuedx-typecheck --no-pretty --watch ./lib' 'vite'",
+    "build": "vuedx-typecheck --no-pretty ./lib && vite build"
+  },
+  "dependencies": {
+    "@schlechtenburg/core": "^0.0.0",
+    "@schlechtenburg/heading": "^0.0.0",
+    "@schlechtenburg/image": "^0.0.0",
+    "@schlechtenburg/layout": "^0.0.0",
+    "@schlechtenburg/paragraph": "^0.0.0",
+    "lodash-es": "^4.17.21",
+    "vue": "^3.0.7"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue-jsx": "^1.1.2",
+    "@vue/compiler-sfc": "^3.0.7",
+    "@vuedx/typecheck": "^0.6.3",
+    "@vuedx/typescript-plugin-vue": "^0.6.3",
+    "concurrently": "^6.0.0",
+    "sass": "^1.32.8",
+    "typescript": "^4.2.3",
+    "vite": "^2.0.5"
+  }
+}