No lerna

.drone.yml

@@ -1,29 +0,0 @@
-workspace:
-  path: /sb
-
-kind: pipeline
-type: docker
-name: default
-steps:
-  - name: build
-    image: node:12
-    commands:
-      - npm ci
-      - npm run build
-
-  - name: publish
-    when: 
-      branch:
-        - master
-    image: appleboy/drone-scp
-    settings:
-      host: web5svsvy.wh.hosting.zone
-      port: 2244
-      username:
-        from_secret: dev_ssh_user
-      key:
-        from_secret: dev_ssh_key
-      source: ./dist/*
-      target: /home/web5svsvy/html/schlechtenburg.b12f.io/
-      strip_components: 1
-      rm: true

docs/assets/Paragraph.784d4153.js

@@ -0,0 +1,2 @@
+import{d as a,g as l,r,a as e,o as s,c as p,b as n}from"./index.08715002.js";var t=a({name:"sb-paragraph-edit",props:{blockId:{type:String,required:!0},data:{type:null,default:l}},setup(a){const l=r({value:a.data.value,align:a.data.align}),t=e(null);s((()=>{t.value&&(t.value.innerHTML=l.value)}));const u=p((()=>({"sb-paragraph":!0,[`sb-paragraph_align-${l.align}`]:!0})));return()=>n("div",{class:u.value},[n("p",{class:"sb-paragraph__input",ref:t},null)])}});export default t;
+//# sourceMappingURL=Paragraph.784d4153.js.map

docs/assets/Paragraph.784d4153.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.784d4153.js","sources":["../../src/components/paragraph/Paragraph.tsx"],"sourcesContent":["import {\n  defineComponent,\n  reactive,\n  computed,\n  ref,\n  onMounted,\n} from 'vue';\nimport { getDefaultData } from './util';\n\nimport './Paragraph.scss';\n\nexport default defineComponent({\n  name: 'sb-paragraph-edit',\n\n  props: {\n    blockId: { type: String, required: true },\n    data: {\n      type: null,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const localData = reactive({\n      value: props.data.value,\n      align: props.data.align,\n    });\n\n    const inputEl = ref(null);\n    onMounted(() => {\n      if (inputEl.value) {\n        inputEl.value.innerHTML = localData.value;\n      }\n    });\n\n    const classes = computed(() => ({\n      'sb-paragraph': true,\n      [`sb-paragraph_align-${localData.align}`]: true,\n    }));\n\n    return () => (\n      <div class={classes.value}>\n        <p\n          class=\"sb-paragraph__input\"\n          ref={inputEl}\n        ></p>\n      </div>\n    );\n  },\n});\n"],"names":["defineComponent","name","props","blockId","type","String","required","data","default","getDefaultData","setup","localData","reactive","value","align","inputEl","ref","innerHTML","classes","computed"],"mappings":"mFAWeA,EAAgB,CAC7BC,KAAM,oBAENC,MAAO,CACLC,QAAS,CAAEC,KAAMC,OAAQC,UAAU,GACnCC,KAAM,CACJH,KAAM,KACNI,QAASC,IAIbC,MAAMR,SACES,EAAYC,EAAS,CACzBC,MAAOX,EAAMK,KAAKM,MAClBC,MAAOZ,EAAMK,KAAKO,QAGdC,EAAUC,EAAI,SACV,KACJD,EAAQF,UACFA,MAAMI,UAAYN,EAAUE,gBAIlCK,EAAUC,GAAS,KAAO,iBACd,GACd,sBAAqBR,EAAUG,UAAU,YAGtC,mBACOI,EAAQL,qBAEV,0BACDE"}

docs/assets/display.08a50fb3.css

@@ -1 +0,0 @@
-.sb-missing-block{flex-basis:100%}

docs/assets/display.54a23f84.js

@@ -1,2 +0,0 @@
-import{y as a,m as s,z as e,D as t,e as l}from"./index.a48301fd.js";/* empty css              */import"./vendor.a029424f.js";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.54a23f84.js.map

docs/assets/display.54a23f84.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.54a23f84.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":"6HAYA,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.82dfc9cb.js

@@ -1,2 +0,0 @@
-var e=Object.assign;import{G as t,m as a,H as n,I as s,J as l}from"./index.a48301fd.js";import"./vendor.a029424f.js";var o=t({name:"sb-missing-block",model:a,props:e(e({},n),{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 o;
-//# sourceMappingURL=display.82dfc9cb.js.map

docs/assets/display.82dfc9cb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.82dfc9cb.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":"2HAQeA,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.a9bb8ea2.js

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

docs/assets/display.a9bb8ea2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.a9bb8ea2.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":"oIAgBA,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.cf8b58ad.js

@@ -1,2 +0,0 @@
-import{j as a,m as s,k as r,q as p,s as e,x as t}from"./index.a48301fd.js";/* empty css              */import"./vendor.a029424f.js";var l=a({name:"sb-paragraph-display",model:s,props:{data:{type:Object,default:r}},setup(a){const s=p((()=>({"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.cf8b58ad.js.map

docs/assets/display.cf8b58ad.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"display.cf8b58ad.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":"oIAeA,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.79e9c821.js

@@ -1,2 +0,0 @@
-var a=Object.assign;import{y as t,m as e,z as l,A as s,B as n,C as i,D as d,S as r,b as o,E as c,F as u,e as p}from"./index.a48301fd.js";/* empty css              */import"./vendor.a029424f.js";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.79e9c821.js.map

docs/assets/edit.79e9c821.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"edit.79e9c821.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":"kMAuBA,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.85b1500c.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 o,S as c,b as h,e as s,f as p,h as u,i as v}from"./index.a48301fd.js";/* empty css              */import"./vendor.a029424f.js";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()=>o("div",{class:f.value},[o(c,null,{default:()=>[o(h,{type:"button",onClick:m},{default:()=>[t.orientation]})]}),...t.children.map(((i,l)=>o(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":()=>o(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)}))),o(v,{onInsertBlock:U},null)])}});export default f;
-//# sourceMappingURL=edit.85b1500c.js.map

docs/assets/edit.b0a76e09.js

@@ -1,2 +0,0 @@
-import{j as a,m as e,k as n,l as t,n as l,u as o,o as u,p as i,q as s,s as r,S as d,t as p,v}from"./index.a48301fd.js";/* empty css              */import"./vendor.a029424f.js";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=t({value:a.data.value,align:a.data.align,focused:!1}),c=l(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}))),m=n=>{a.onUpdate({value:e.value,align:n.target.value})},k=()=>{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 t=""+ +new Date;a.onAppendBlock({id:t,name:"sb-paragraph",data:n()}),g(t),e.preventDefault()}},F=n=>{var t;"Backspace"===n.key&&""===e.value&&a.onRemoveSelf();const l=window.getSelection(),o=null==l?void 0:l.focusNode,u=Array.from((null==(t=null==c?void 0:c.value)?void 0:t.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:m},{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:k,onBlur:A,onKeydown:w,onKeyup:F},null)])}});export default c;
-//# sourceMappingURL=edit.b0a76e09.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"}

docs/assets/index.62d1366f.css

@@ -1 +0,0 @@
-@charset "UTF-8";.sb-button{border:0;padding:8px 12px;background-color:var(--grey-0);border:1px solid var(--grey-2)}.sb-button:hover{border:1px solid var(--interact)}.sb-context{position:relative}.sb-context-menu{display:none;flex-direction:column;background:var(--grey-0);border:1px solid var(--grey-3);top:100%;left:0;margin:0;z-index:var(--z-context-menu);max-height:70vh;max-width:100vw;overflow:auto}.sb-context-menu[open]{display:flex}.sb-tree-block-select__list{list-style:none;margin:0;padding:0}.sb-tree-block-select__list_base{padding-right:1rem}.sb-tree-block-select__block{padding:0;margin:0;padding-left:1rem}.sb-tree-block-select__block-name{display:block;background:0 0;border:0;font:inherit;color:inherit;padding:.5rem 1rem;width:100%;text-align:left}.sb-tree-block-select__block_active>.sb-tree-block-select__block-name{outline:1px solid var(--interact)}.sb-block{display:flex;align-items:stretch;justify-items:stretch;height:auto}.sb-block>*>.sb-toolbar{opacity:0;pointer-events:none}.sb-block>.sb-block-ordering{opacity:0;pointer-events:none}.sb-block_active{outline:4px solid var(--interact)}.sb-block_active>*>.sb-toolbar{opacity:1;pointer-events:all;outline:1px solid var(--grey-2)}.sb-block_active>.sb-block-ordering{opacity:1;pointer-events:all}.sb-block_highlighted{outline:2px solid var(--interact)}.sb-main{position:relative;background-color:var(--bg);padding:50px 40px}.sb-modal__overlay{background-color:var(--grey-3-t);position:fixed;z-index:10;top:0;left:0;bottom:0;right:0;padding:10vh 10vw;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sb-modal__content{width:900px;max-width:100%;height:auto;max-height:100%;background-color:var(--grey-0);padding:24px 32px}.sb-modal_open .sb-modal__overlay{opacity:1;pointer-events:all}.sb-block-picker{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.sb-block-picker__add-button{padding:24px 32px}.sb-block-ordering{display:flex;position:absolute;flex-direction:column}.sb-block-placeholder{width:100%;position:relative;overflow:visible}.sb-block-placeholder__add{background-color:var(--grey-1);width:100%}.sb-toolbar{position:absolute;width:auto;height:auto}.sb-select{background-color:var(--grey-0);border:1px solid var(--grey-2);position:relative}.sb-select:hover{border:1px solid var(--interact)}.sb-select::after{position:absolute;content:"⯆";top:6px;height:100%;right:12px;pointer-events:none}.sb-select__input{background:0 0;appearance:none;border:0;padding:8px 32px 8px 12px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}*,::after,::before{box-sizing:border-box}html{--grey-0:white;--grey-1-t:rgba(0, 0, 0, 0.05);--grey-1:rgb(242, 242, 242);--grey-2-t:rgba(0, 0, 0, 0.1);--grey-2:rgb(230, 230, 230);--grey-3-t:rgba(0, 0, 0, 0.2);--grey-3:rgb(205, 205, 205);--grey-4-t:rgba(0, 0, 0, 0.4);--grey-4:rgb(155, 155, 155);--grey-5-t:rgba(0, 0, 0, 0.7);--grey-5:rgb(75, 75, 75);--black:rgba(0, 0, 0, 0.9);--bg:var(--grey-1);--fg:var(--black);--interact:#3f9cff;--z-context-menu:3000}body{margin:0;min-height:100vh}

docs/assets/index.e3cfcab8.css

@@ -0,0 +1 @@
+.sb-block{display:flex;align-items:stretch;justify-items:stretch;height:auto}.sb-block>*>.sb-toolbar{opacity:0;pointer-events:none}.sb-block>.sb-block-ordering{opacity:0;pointer-events:none}.sb-block_active{outline:4px solid var(--interact)}.sb-block_active>*>.sb-toolbar{opacity:1;pointer-events:all;outline:1px solid var(--grey-2)}.sb-block_active>.sb-block-ordering{opacity:1;pointer-events:all}.sb-block_highlighted{outline:2px solid var(--interact)}.sb-main{position:relative;background-color:var(--bg);padding:50px 40px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}*,::after,::before{box-sizing:border-box}html{--grey-0:white;--grey-1-t:rgba(0, 0, 0, 0.05);--grey-1:rgb(242, 242, 242);--grey-2-t:rgba(0, 0, 0, 0.1);--grey-2:rgb(230, 230, 230);--grey-3-t:rgba(0, 0, 0, 0.2);--grey-3:rgb(205, 205, 205);--grey-4-t:rgba(0, 0, 0, 0.4);--grey-4:rgb(155, 155, 155);--grey-5-t:rgba(0, 0, 0, 0.7);--grey-5:rgb(75, 75, 75);--black:rgba(0, 0, 0, 0.9);--bg:var(--grey-1);--fg:var(--black);--interact:#3f9cff;--z-context-menu:3000}body{margin:0;min-height:100vh}

docs/assets/style.b876754e.css

@@ -1 +0,0 @@
-.sb-layout{display:flex}.sb-layout_vertical{flex-direction:column}.sb-layout_horizontal{flex-direction:row}.sb-layout__item{position:relative}.sb-layout>*{flex-basis:auto;flex-grow:1;flex-shrink:1}

docs/assets/style.d3f26b5f.css

@@ -1 +0,0 @@
-.sb-image{margin:0}.sb-image__content{width:100%;height:auto}

docs/index.html

@@ -5,9 +5,8 @@
   <link rel="icon" href="./favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vite App</title>
-<script type="module" crossorigin src="./assets/index.a48301fd.js"></script>
-  <link rel="modulepreload" href="./assets/vendor.a029424f.js">
-  <link rel="stylesheet" href="./assets/index.62d1366f.css">
+<script type="module" crossorigin src="./assets/index.08715002.js"></script>
+  <link rel="stylesheet" href="./assets/index.e3cfcab8.css">
 </head>
 <body>
   <div id="app"></div>

lerna.json

@@ -1,6 +0,0 @@
-{
-  "packages": [
-    "packages/*"
-  ],
-  "version": "0.0.0"
-}

package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "license": "GPL-3.0-or-later",
   "scripts": {
-    "dev": "concurrently 'vuedx-typecheck --no-pretty --watch ./src' 'vite'",
-    "build": "vuedx-typecheck --no-pretty ./src && vite build"
+    "dev": "vite",
+    "build": "vite build"
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
@@ -13,12 +13,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",
-    "lerna": "^3.22.1",
     "sass": "^1.32.8",
-    "typescript": "^4.2.3",
     "vite": "^2.0.5"
   }
 }

packages/core/README.md

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

packages/core/__tests__/core.test.js

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

packages/core/lib/ResizeObserver.d.ts

@@ -1,242 +0,0 @@
-/**
- * The **ResizeObserver** interface reports changes to the dimensions of an
- * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)'s content
- * or border box, or the bounding box of an
- * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
- *
- * > **Note**: The content box is the box in which content can be placed,
- * > meaning the border box minus the padding and border width. The border box
- * > encompasses the content, padding, and border. See
- * > [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- * > for further explanation.
- *
- * `ResizeObserver` avoids infinite callback loops and cyclic dependencies that
- * are often created when resizing via a callback function. It does this by only
- * processing elements deeper in the DOM in subsequent frames. Implementations
- * should, if they follow the specification, invoke resize events before paint
- * and after layout.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
- */
-declare class ResizeObserver {
-  /**
-   * The **ResizeObserver** constructor creates a new `ResizeObserver` object,
-   * which can be used to report changes to the content or border box of an
-   * `Element` or the bounding box of an `SVGElement`.
-   *
-   * @example
-   * var ResizeObserver = new ResizeObserver(callback)
-   *
-   * @param callback
-   * The function called whenever an observed resize occurs. The function is
-   * called with two parameters:
-   * * **entries**
-   *   An array of
-   *   [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
-   *   objects that can be used to access the new dimensions of the element
-   *   after each change.
-   * * **observer**
-   *   A reference to the `ResizeObserver` itself, so it will definitely be
-   *   accessible from inside the callback, should you need it. This could be
-   *   used for example to automatically unobserve the observer when a certain
-   *   condition is reached, but you can omit it if you don't need it.
-   *
-   * The callback will generally follow a pattern along the lines of:
-   * ```js
-   * function(entries, observer) {
-   *   for (let entry of entries) {
-   *     // Do something to each entry
-   *     // and possibly something to the observer itself
-   *   }
-   * }
-   * ```
-   *
-   * The following snippet is taken from the
-   * [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html)
-   * ([see source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html))
-   * example:
-   * @example
-   * const resizeObserver = new ResizeObserver(entries => {
-   *   for (let entry of entries) {
-   *     if(entry.contentBoxSize) {
-   *       h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
-   *       pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
-   *     } else {
-   *       h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
-   *       pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
-   *     }
-   *   }
-   * });
-   *
-   * resizeObserver.observe(divElem);
-   */
-  constructor(callback: ResizeObserverCallback);
-
-  /**
-   * The **disconnect()** method of the
-   * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
-   * interface unobserves all observed
-   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
-   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
-   * targets.
-   */
-  disconnect: () => void;
-
-  /**
-   * The `observe()` method of the
-   * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
-   * interface starts observing the specified
-   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
-   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
-   *
-   * @example
-   * resizeObserver.observe(target, options);
-   *
-   * @param target
-   * A reference to an
-   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
-   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
-   * to be observed.
-   *
-   * @param options
-   * An options object allowing you to set options for the observation.
-   * Currently this only has one possible option that can be set.
-   */
-  observe: (target: Element, options?: ResizeObserverObserveOptions) => void;
-
-  /**
-   * The **unobserve()** method of the
-   * [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
-   * interface ends the observing of a specified
-   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
-   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
-   */
-  unobserve: (target: Element) => void;
-}
-
-interface ResizeObserverObserveOptions {
-  /**
-   * Sets which box model the observer will observe changes to. Possible values
-   * are `content-box` (the default), and `border-box`.
-   *
-   * @default "content-box"
-   */
-  box?: "content-box" | "border-box";
-}
-
-/**
- * The function called whenever an observed resize occurs. The function is
- * called with two parameters:
- *
- * @param entries
- * An array of
- * [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
- * objects that can be used to access the new dimensions of the element after
- * each change.
- *
- * @param observer
- * A reference to the `ResizeObserver` itself, so it will definitely be
- * accessible from inside the callback, should you need it. This could be used
- * for example to automatically unobserve the observer when a certain condition
- * is reached, but you can omit it if you don't need it.
- *
- * The callback will generally follow a pattern along the lines of:
- * @example
- * function(entries, observer) {
- *   for (let entry of entries) {
- *     // Do something to each entry
- *     // and possibly something to the observer itself
- *   }
- * }
- *
- * @example
- * const resizeObserver = new ResizeObserver(entries => {
- *   for (let entry of entries) {
- *     if(entry.contentBoxSize) {
- *       h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
- *       pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
- *     } else {
- *       h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
- *       pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
- *     }
- *   }
- * });
- *
- * resizeObserver.observe(divElem);
- */
-type ResizeObserverCallback = (
-  entries: ResizeObserverEntry[],
-  observer: ResizeObserver,
-) => void;
-
-/**
- * The **ResizeObserverEntry** interface represents the object passed to the
- * [ResizeObserver()](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver)
- * constructor's callback function, which allows you to access the new
- * dimensions of the
- * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
- * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
- * being observed.
- */
-interface ResizeObserverEntry {
-  /**
-   * An object containing the new border box size of the observed element when
-   * the callback is run.
-   */
-  readonly borderBoxSize: ResizeObserverEntryBoxSize;
-
-  /**
-   * An object containing the new content box size of the observed element when
-   * the callback is run.
-   */
-  readonly contentBoxSize: ResizeObserverEntryBoxSize;
-
-  /**
-   * A [DOMRectReadOnly](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly)
-   * object containing the new size of the observed element when the callback is
-   * run. Note that this is better supported than the above two properties, but
-   * it is left over from an earlier implementation of the Resize Observer API,
-   * is still included in the spec for web compat reasons, and may be deprecated
-   * in future versions.
-   */
-  // node_modules/typescript/lib/lib.dom.d.ts
-  readonly contentRect: DOMRectReadOnly;
-
-  /**
-   * A reference to the
-   * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or
-   * [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement)
-   * being observed.
-   */
-  readonly target: Element;
-}
-
-/**
- * The **borderBoxSize** read-only property of the
- * [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
- * interface returns an object containing the new border box size of the
- * observed element when the callback is run.
- */
-interface ResizeObserverEntryBoxSize {
-  /**
-   * The length of the observed element's border box in the block dimension. For
-   * boxes with a horizontal
-   * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
-   * this is the vertical dimension, or height; if the writing-mode is vertical,
-   * this is the horizontal dimension, or width.
-   */
-  blockSize: number;
-
-  /**
-   * The length of the observed element's border box in the inline dimension.
-   * For boxes with a horizontal
-   * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
-   * this is the horizontal dimension, or width; if the writing-mode is
-   * vertical, this is the vertical dimension, or height.
-   */
-  inlineSize: number;
-}
-
-interface Window {
-  ResizeObserver: typeof ResizeObserver;
-}

packages/core/lib/block-helpers.ts

@@ -1,15 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-
-export const generateBlockId = uuidv4;
-
-export const model = {
-  prop: 'block',
-  event: 'update',
-};
-
-export const blockProps = {
-  blockId: {
-    type: String,
-    default: generateBlockId,
-  },
-};

packages/core/lib/components/Block.tsx

@@ -1,114 +0,0 @@
-import {
-  defineComponent,
-  computed,
-  watch,
-  PropType,
-  ref,
-  Ref,
-} from 'vue';
-import { BlockData } from '../types';
-import { SbMode } from '../mode';
-import { useResizeObserver, SymBlockDimensions } from '../use-resize-observer';
-import { useActivation } from '../use-activation';
-import { useBlockTree } from '../use-block-tree';
-import { useDynamicBlocks } from '../use-dynamic-blocks';
-
-import SbMissingBlock from './MissingBlock';
-
-import './Block.scss';
-
-export const SbBlock = defineComponent({
-  name: 'sb-block',
-
-  props: {
-    block: {
-      type: (null as unknown) as PropType<BlockData<any>>,
-      required: true,
-    },
-    sortable: {
-      type: String,
-      default: null,
-    },
-    onUpdate: { type: Function, default: () => {} },
-    onPrependBlock: { type: Function, default: () => {} },
-    onAppendBlock: { type: Function, default: () => {} },
-    onRemoveSelf: { type: Function, default: () => {} },
-    onActivatePrevious: { type: Function, default: () => {} },
-    onActivateNext: { type: Function, default: () => {} },
-  },
-
-  setup(props, context) {
-    const el: Ref<null|HTMLElement> = ref(null);
-    const { mode, getBlock } = useDynamicBlocks();
-    const {
-      isActive,
-      activate,
-    } = useActivation(props.block.id);
-    const classes = computed(() => ({
-      'sb-block': true,
-      'sb-block_active': isActive.value,
-    }));
-
-    const { triggerSizeCalculation } = useResizeObserver(el, SymBlockDimensions);
-    watch(() => props.block.data, triggerSizeCalculation);
-
-    const { register } = useBlockTree();
-    register(props.block);
-    watch(props.block, () => { register(props.block); });
-
-    const onChildUpdate = (updated: {[key: string]: any}) => {
-      props.onUpdate({
-        ...props.block,
-        data: {
-          ...props.block.data,
-          ...updated,
-        },
-      });
-    };
-
-    return () => {
-      const BlockComponent = getBlock(props.block.name)?.[mode.value] as any;
-
-      if (!BlockComponent) {
-        const MissingBlock = SbMissingBlock[mode.value];
-        return <MissingBlock
-          name={props.block.name}
-          blockId={props.block.id}
-        />;
-      }
-
-      if (mode.value === SbMode.Display) {
-        return <BlockComponent
-          data={props.block.data}
-          blockId={props.block.id}
-        />;
-      }
-
-      return <div
-        ref={el}
-        class={classes.value}
-      >
-        <div class="sb-block__edit-cover"></div>
-        {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
-        <BlockComponent
-          data={props.block.data}
-          blockId={props.block.id}
-          onUpdate={onChildUpdate}
-          onPrependBlock={props.onPrependBlock}
-          onAppendBlock={props.onAppendBlock}
-          onRemoveSelf={props.onRemoveSelf}
-          onActivatePrevious={props.onActivatePrevious}
-          onActivateNext={props.onActivateNext}
-
-          {...{
-            onClick: ($event: MouseEvent) => {
-              $event.stopPropagation();
-              activate();
-            },
-            ...context.attrs,
-          }}
-        />
-      </div>;
-    };
-  },
-});

packages/core/lib/components/BlockOrdering.scss

@@ -1,5 +0,0 @@
-.sb-block-ordering {
-  display: flex;
-  position: absolute;
-  flex-direction: column;
-}

packages/core/lib/components/BlockOrdering.tsx

@@ -1,64 +0,0 @@
-import { debounce } from 'lodash-es';
-import {
-  watch,
-  reactive,
-  computed,
-  defineComponent,
-} from 'vue';
-import { useBlockSizing } from '../use-resize-observer';
-
-import { SbButton } from './Button';
-
-import './BlockOrdering.scss';
-
-export const SbBlockOrdering = defineComponent({
-  name: 'sb-block-ordering',
-
-  props: {
-    orientation: {
-      type: String,
-      default: null,
-    },
-    onRemove: { type: Function, default: () => {} },
-    onMoveBackward: { type: Function, default: () => {} },
-    onMoveForward: { type: Function, default: () => {} },
-  },
-
-  setup(props) {
-    const styles = reactive({
-      top: '',
-      right: '',
-    });
-
-    const classes = computed(() => ({
-      'sb-block-ordering': true,
-      [`sb-block-ordering_${props.orientation}`]: !!props.orientation,
-    }));
-
-    const { editorDimensions, blockDimensions } = useBlockSizing();
-    const resetStyles = debounce(() => {
-      if (!editorDimensions.value || !blockDimensions.value) {
-        return;
-      }
-
-      const right = editorDimensions.value.width - blockDimensions.value.left;
-      styles.top = `${blockDimensions.value.top}px`;
-      styles.right = `${right}px`;
-    });
-    watch(editorDimensions, resetStyles);
-    watch(blockDimensions, resetStyles);
-    watch(() => props.orientation, resetStyles);
-
-    return () => (
-      <div
-        class={classes.value}
-        style={styles}
-        onClick={($event: MouseEvent) => $event.stopPropagation()}
-      >
-        <SbButton {...{onClick: props.onMoveBackward}}>{props.orientation === 'vertical' ? '↑' : '←'}</SbButton>
-        <SbButton {...{onClick: props.onRemove}}>x</SbButton>
-        <SbButton {...{onClick: props.onMoveForward}}>{props.orientation === 'vertical' ? '↓' : '→'}</SbButton>
-      </div>
-    );
-  },
-});

packages/core/lib/components/BlockPicker.scss

@@ -1,11 +0,0 @@
-.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

@@ -1,67 +0,0 @@
-import {
-  computed,
-  ref,
-  defineComponent,
-} from 'vue';
-import { useDynamicBlocks } from '../use-dynamic-blocks';
-import { BlockDefinition } from '../types';
-
-import { SbButton } from './Button';
-import { SbModal } from './Modal';
-
-import './BlockPicker.scss';
-
-export const SbBlockPicker = defineComponent({
-  name: 'sb-block-picker',
-
-  props: {
-    onPickedBlock: { type: Function, default: () => {} },
-  },
-
-  setup(props) {
-    const open = ref(false);
-    const { customBlocks } = useDynamicBlocks();
-
-    const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
-
-    const selectBlock = (block: BlockDefinition<any>) => () => {
-      open.value = false;
-      props.onPickedBlock({
-        name: block.name,
-        id: `${+(new Date())}`,
-        data: block.getDefaultData(),
-      });
-    };
-
-    return () => (
-      <div class="sb-block-picker">
-        <SbButton
-          class="sb-block-picker__add-button"
-          {...{
-            type: 'button',
-            onClick: ($event: MouseEvent) => {
-              open.value = true;
-              $event.stopPropagation();
-            },
-          }}
-        >+</SbButton>
-        <SbModal
-          open={open.value}
-          onClose={() => {
-            open.value = false;
-          }}
-          {...{ onClick: ($event: MouseEvent) => $event.stopPropagation() }}
-        >
-          {...blockList.value.map((block: BlockDefinition<any>) => (
-            <SbButton
-              {...{
-                type: 'button',
-                onClick: () => selectBlock(block),
-              }}
-            >{block.name}</SbButton>
-          ))}
-        </SbModal>
-      </div>
-    );
-  },
-});

packages/core/lib/components/BlockPlaceholder.scss

@@ -1,10 +0,0 @@
-.sb-block-placeholder {
-  width: 100%;
-  position: relative;
-  overflow: visible;
-
-  &__add {
-    background-color: var(--grey-1);
-    width: 100%;
-  }
-}

packages/core/lib/components/BlockPlaceholder.tsx

@@ -1,24 +0,0 @@
-import { defineComponent } from 'vue';
-import { BlockData } from '../types';
-
-import { SbBlockPicker } from './BlockPicker';
-
-import './BlockPlaceholder.scss';
-
-export const SbBlockPlaceholder = defineComponent({
-  name: 'sb-block-placeholder',
-
-  props: {
-    onInsertBlock: { type: Function, default: () => {} },
-  },
-
-  setup(props) {
-    return () => (
-      <div class="sb-block-placeholder">
-        <SbBlockPicker
-          onPickedBlock={(block: BlockData<any>) => props.onInsertBlock(block)}
-        />
-      </div>
-    );
-  },
-});

packages/core/lib/components/BlockToolbar.tsx

@@ -1,13 +0,0 @@
-import { defineComponent } from 'vue';
-
-import './BlockToolbar.scss';
-
-export const SbBlockToolbar = defineComponent({
-  name: 'sb-block-toolbar',
-
-  setup() {
-    return () => (
-      <div class="sb-block-toolbar"></div>
-    );
-  },
-});

packages/core/lib/components/Button.scss

@@ -1,10 +0,0 @@
-.sb-button {
-  border: 0;
-  padding: 8px 12px;
-  background-color: var(--grey-0);
-  border: 1px solid var(--grey-2);
-
-  &:hover {
-    border: 1px solid var(--interact);
-  }
-}

packages/core/lib/components/Button.tsx

@@ -1,22 +0,0 @@
-import { defineComponent } from 'vue';
-
-import './Button.scss';
-
-export const SbButton = defineComponent({
-  name: 'sb-button',
-
-  inheritAttrs: false,
-
-  setup(_, context) {
-    return () => (
-      <button
-        {...{
-          ...context.attrs,
-          class: (context.attrs.class || '') + ' sb-button',
-        }}
-      >
-        {context.slots.default?.()}
-      </button>
-    );
-  },
-});

packages/core/lib/components/ContextMenu.scss

@@ -1,22 +0,0 @@
-.sb-context {
-  position: relative;
-}
-
-.sb-context-menu {
-  display: none;
-  flex-direction: column;
-  background: var(--grey-0);
-  border: 1px solid var(--grey-3);
-  top: 100%;
-  left: 0;
-  margin: 0;
-  z-index: var(--z-context-menu);
-
-  max-height: 70vh;
-  max-width: 100vw;
-  overflow: auto;
-
-  &[open] {
-    display: flex;
-  }
-}

packages/core/lib/components/ContextMenu.tsx

@@ -1,76 +0,0 @@
-import {
-  watch,
-  defineComponent,
-  ref,
-} from 'vue';
-import { SbButton } from './Button';
-
-import './ContextMenu.scss';
-
-export const SbContextMenu = defineComponent({
-  name: 'sb-context-menu',
-
-  props: {
-    onClose: { type: Function, default: () => {} },
-    onOpen: { type: Function, default: () => {} },
-  },
-
-  setup(props, context) {
-    const opened = ref(false);
-    const open = () => { opened.value = true; };
-    const close = () => { opened.value = false; };
-    const closeOnEscape = ($event: KeyboardEvent) => {
-      if ($event.key === 'Escape') {
-        close();
-      }
-    };
-    const toggle = () => { opened.value ? close() : open() };
-
-    watch(opened, (curr, prev) => {
-      if (curr === prev) {
-        return;
-      }
-
-      if (!curr) {
-        document.body.removeEventListener('click', close);
-        document.body.removeEventListener('keypress', closeOnEscape);
-        props.onClose();
-      } else {
-        setTimeout(() => {
-          document.body.addEventListener('click', close);
-          document.body.addEventListener('keypress', closeOnEscape);
-          props.onOpen();
-        });
-      }
-    });
-
-    return () => (
-      <div class="sb-context">
-        {
-          context.slots.context?.({
-            opened,
-            toggle,
-            close,
-            open,
-          }) || <SbButton {...{ onClick: toggle }}>Menu</SbButton>
-        }
-        <dialog
-          class="sb-context-menu"
-          open={opened.value ? true : undefined}
-          onClick={($event: Event) => {
-            // Make sure clicks inside do not autoclose this
-            $event.stopPropagation();
-          }}
-          {...{ onClose: close /* TODO: DialogHTMLAttributes needs an onClose handler type */ }}
-        >
-            {context.slots.default?.({
-              opened,
-              toggle,
-              close,
-              open,
-            }) || null}
-        </dialog>
-      </div>
-    );
-  },
-});

packages/core/lib/components/Main.tsx

@@ -1,100 +0,0 @@
-import {
-  defineComponent,
-  provide,
-  shallowReactive,
-  ref,
-  PropType,
-  Ref,
-} from 'vue';
-import {
-  BlockData,
-  BlockDefinition,
-  BlockLibrary,
-  TreeNode,
-} from '../types';
-import { model } from '../block-helpers';
-import { Mode, SbMode } from '../mode';
-import { SymBlockLibrary} from '../use-dynamic-blocks';
-import {
-  SymBlockTree,
-  SymBlockTreeRegister,
-  SymBlockTreeUnregister,
-} from '../use-block-tree';
-import { SymEditorDimensions, useResizeObserver } from '../use-resize-observer';
-import { SymActiveBlock } from '../use-activation';
-
-import { SbMainMenu } from './MainMenu';
-import { SbBlockToolbar } from './BlockToolbar';
-import { SbBlock } from './Block';
-
-import './Main.scss';
-
-export const SbMain = defineComponent({
-  name: 'sb-main',
-
-  model,
-
-  props: {
-    customBlocks: {
-      type: Array as PropType<BlockDefinition<any>[]>,
-      default: () => [],
-    },
-    block: {
-      type: Object as PropType<BlockData<any>>,
-      required: true,
-    },
-    onUpdate: { type: Function, default: () => {} },
-    mode: {
-      type: String as PropType<SbMode>,
-      validator(value: any) {
-        return Object.values(SbMode).includes(value);
-      },
-      default: SbMode.Edit,
-    },
-  },
-
-  setup(props: any) { // TODO: why does the typing of props not work here?
-    const el: Ref<null|HTMLElement> = ref(null);
-    useResizeObserver(el, SymEditorDimensions);
-
-    const mode = ref(props.mode);
-    provide(Mode, mode);
-
-    const activeBlock = ref(null);
-    provide(SymActiveBlock, activeBlock);
-
-    const blockTree: Ref<TreeNode|null> = ref(null);
-    provide(SymBlockTree, blockTree);
-    provide(SymBlockTreeRegister, (block: TreeNode) => { blockTree.value = block; });
-    provide(SymBlockTreeUnregister, () => { blockTree.value = null; });
-
-    const blockLibrary: BlockLibrary = shallowReactive({
-      ...props.customBlocks.reduce(
-        (blocks: BlockLibrary, block: BlockDefinition<any>) => ({ ...blocks, [block.name]: block }),
-        {},
-      ),
-    });
-
-    provide(SymBlockLibrary, blockLibrary);
-
-    return () => (
-      <div
-        class="sb-main"
-        ref={el}
-      >
-        {
-          mode.value === SbMode.Edit
-          ? <>
-            <SbMainMenu block={props.block} />
-            <SbBlockToolbar />
-          </>
-          : null
-        }
-        <SbBlock
-          block={props.block}
-          onUpdate={props.onUpdate}
-        />
-      </div>
-    );
-  },
-});

packages/core/lib/components/MainMenu.scss

@@ -1,2 +0,0 @@
-.sb-main-menu {
-}

packages/core/lib/components/MainMenu.tsx

@@ -1,27 +0,0 @@
-import {
-  defineComponent,
-  PropType,
-} from 'vue';
-import { BlockData } from '../types';
-import { SbTreeBlockSelect } from './TreeBlockSelect';
-
-import './MainMenu.scss';
-
-export const SbMainMenu = defineComponent({
-  name: 'sb-main-menu',
-
-  props: {
-    block: {
-      type: (null as unknown) as PropType<BlockData<any>>,
-      required: true,
-    },
-  },
-
-  setup() {
-    return () => (
-      <div class="sb-main-menu">
-        <SbTreeBlockSelect />
-      </div>
-    );
-  },
-});

packages/core/lib/components/MissingBlock/display.tsx

@@ -1,31 +0,0 @@
-import { defineComponent, PropType } from 'vue';
-import {
-  model,
-  blockProps,
-} from '../../block-helpers';
-
-import './style.scss';
-
-export default defineComponent({
-  name: 'sb-missing-block',
-
-  model,
-
-  props: {
-    ...blockProps,
-    name: String,
-    data: {
-      type: (null as unknown) as PropType<any>,
-      default: null,
-    },
-    eventUpdate: { type: Function, default: () => {} },
-    eventAppendBlock: { type: Function, default: () => {} },
-    eventRemoveBlock: { type: Function, default: () => {} },
-  },
-
-  setup(props) {
-    return () => (
-      <div class="sb-missing-block">Missing block: {props.name}</div>
-    );
-  },
-});

packages/core/lib/components/MissingBlock/index.ts

@@ -1,7 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-
-export default {
-  name: 'sb-missing-block',
-  edit: defineAsyncComponent(() => import('./display')),
-  display: defineAsyncComponent(() => import('./display')),
-};

packages/core/lib/components/MissingBlock/style.scss

@@ -1,3 +0,0 @@
-.sb-missing-block {
-  flex-basis: 100%;
-}

packages/core/lib/components/Modal.scss

@@ -1,32 +0,0 @@
-.sb-modal {
-  &__overlay {
-    background-color: var(--grey-3-t);
-    position: fixed;
-    z-index: 10;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    padding: 10vh 10vw;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  &__content {
-    width: 900px;
-    max-width: 100%;
-    height: auto;
-    max-height: 100%;
-    background-color: var(--grey-0);
-    padding: 24px 32px;
-  }
-
-  &_open #{&}__overlay {
-    opacity: 1;
-    pointer-events: all;
-  }
-}

packages/core/lib/components/Modal.tsx

@@ -1,41 +0,0 @@
-import {
-  defineComponent,
-  computed,
-} from 'vue';
-
-import './Modal.scss';
-
-export const SbModal = defineComponent({
-  name: 'sb-modal',
-
-  props: {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-    onClose: { type: Function, default: () => {} },
-  },
-
-  setup(props, context) {
-    const classes = computed(() => ({
-      'sb-modal': true,
-      'sb-modal_open': props.open,
-    }));
-
-    return () => (
-      <div class={classes.value}>
-        <div
-          class="sb-modal__overlay"
-          onClick={($event: MouseEvent) => {
-            $event.stopPropagation();
-            props.onClose();
-          }}
-        >
-          <div class="sb-modal__content">
-            {context.slots.default?.()}
-          </div>
-        </div>
-      </div>
-    );
-  },
-});

packages/core/lib/components/Select.scss

@@ -1,25 +0,0 @@
-.sb-select {
-  background-color: var(--grey-0);
-  border: 1px solid var(--grey-2);
-  position: relative;
-
-  &:hover {
-    border: 1px solid var(--interact);
-  }
-
-  &::after {
-    position: absolute;
-    content: '⯆';
-    top: 6px;
-    height: 100%;
-    right: 12px;
-    pointer-events: none;
-  }
-
-  &__input {
-    background: transparent;
-    appearance: none;
-    border: 0;
-    padding: 8px 32px 8px 12px;
-  }
-}

packages/core/lib/components/Select.tsx

@@ -1,21 +0,0 @@
-import { defineComponent } from 'vue';
-import './Select.scss';
-
-export const SbSelect = defineComponent({
-  name: 'sb-select',
-
-  inheritAttrs: false,
-
-  setup(_, context) {
-    return () => (
-      <div class="sb-select">
-        <select
-          class="sb-select__input"
-          {...context.attrs}
-        >
-          {context.slots.default?.()}
-        </select>
-      </div>
-    );
-  },
-});

packages/core/lib/components/Toolbar.scss

@@ -1,5 +0,0 @@
-.sb-toolbar {
-  position: absolute;
-  width: auto;
-  height: auto;
-}

packages/core/lib/components/Toolbar.tsx

@@ -1,45 +0,0 @@
-import { debounce } from 'lodash-es';
-import {
-  defineComponent,
-  watch,
-  reactive,
-} from 'vue';
-import { useBlockSizing } from '../use-resize-observer';
-
-import './Toolbar.scss';
-
-export const SbToolbar = defineComponent({
-  name: 'sb-toolbar',
-
-  setup(_, context) {
-    const styles = reactive({
-      bottom: '',
-      left: '',
-      maxWidth: '',
-    });
-
-    const { editorDimensions, blockDimensions } = useBlockSizing();
-    const resetStyles = debounce(() => {
-      if (!editorDimensions.value || !blockDimensions.value) {
-        return;
-      }
-
-      const bottom = editorDimensions.value.height - blockDimensions.value.top;
-      styles.bottom = `${bottom}px`;
-      styles.left = `${blockDimensions.value.left}px`;
-      styles.maxWidth = `${blockDimensions.value.width}px`;
-    });
-    watch(editorDimensions, resetStyles);
-    watch(blockDimensions, resetStyles);
-
-    return () => (
-      <div
-        class="sb-toolbar"
-        style={styles}
-        onClick={($event: MouseEvent) => $event.stopPropagation()}
-      >
-        {context.slots?.default?.()}
-      </div>
-    );
-  },
-});

packages/core/lib/components/TreeBlockSelect.scss

@@ -1,38 +0,0 @@
-.sb-tree-block-select {
-  &__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    &_base {
-      padding-right: 1rem;
-    }
-  }
-
-  &__node {
-  }
-
-  &__block {
-    padding: 0;
-    margin: 0;
-    padding-left: 1rem;
-
-    &-name {
-      display: block;
-      background: transparent;
-      border: 0;
-      font: inherit;
-      color: inherit;
-      padding: 0.5rem 1rem;
-      width: 100%;
-      text-align: left;
-    }
-
-
-    &_active {
-      & > .sb-tree-block-select__block-name {
-        outline: 1px solid var(--interact);
-      }
-    }
-  }
-}

packages/core/lib/components/TreeBlockSelect.tsx

@@ -1,57 +0,0 @@
-import { defineComponent } from 'vue';
-import { TreeNode } from '../types';
-import { useBlockTree } from '../use-block-tree';
-import { useActivation } from '../use-activation';
-
-import { SbContextMenu } from './ContextMenu';
-import { SbButton } from './Button';
-
-import './TreeBlockSelect.scss';
-
-export const SbTreeBlockSelect = defineComponent({
-  name: 'sb-main-menu',
-
-  setup() {
-    const { blockTree } = useBlockTree();
-    const {
-      activate,
-      activeBlockId,
-    } = useActivation();
-
-    const treeToHtml = (tree: TreeNode, close: Function) => <li
-      class={{
-        'sb-tree-block-select__block': true,
-        'sb-tree-block-select__block_active': activeBlockId.value === tree.id,
-      }}
-    >
-      <button
-        class="sb-tree-block-select__block-name"
-        onClick={() => {
-          activate(tree.id);
-          close();
-        }}
-        onMouseenter={() => activate(tree.id)}
-      >{tree.name}</button>
-      {tree.children?.length
-        ? <ul class="sb-tree-block-select__list">
-          {tree.children?.map((child: TreeNode) => treeToHtml(child, close))}
-        </ul>
-          : null
-      }
-    </li>;
-
-    return () => (
-      blockTree.value
-        ?  <SbContextMenu
-          class="sb-tree-block-select"
-          v-slots={{
-            context: ({ toggle }: { toggle: Function }) => <SbButton {...{ onClick: toggle }}>Tree</SbButton>,
-            default: ({ close }: { close: Function }) => <ul
-              class="sb-tree-block-select__list sb-tree-block-select__list_base"
-            >{treeToHtml(blockTree.value as TreeNode, close)}</ul>,
-          }}
-        />
-        : ''
-    );
-  },
-});

packages/core/lib/directives/activation-cover.js

@@ -1,3 +0,0 @@
-export default {
-
-};

packages/core/lib/index.ts

@@ -1,19 +0,0 @@
-export * from './mode';
-export * from './types';
-
-export * from './block-helpers';
-
-export * from './use-activation';
-export * from './use-dynamic-blocks';
-export * from './use-resize-observer';
-
-export * from './directives/activation-cover.js';
-
-export * from './components/Main';
-export * from './components/Block';
-export * from './components/BlockPicker';
-export * from './components/BlockOrdering';
-export * from './components/BlockPlaceholder';
-export * from './components/Toolbar';
-export * from './components/Button';
-export * from './components/Select';

packages/core/lib/mode.ts

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

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

@@ -1 +0,0 @@
-// file: shim-tsx.d.ts

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

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

packages/core/lib/types.d.ts

@@ -1,8 +0,0 @@
-/*
-import {HTMLAttributes} from "vue";
-
-interface DialogHTMLAttributes extends HTMLAttributes {
-  open?: boolean;
-  onClose?: Function;
-}
-*/

packages/core/lib/types.ts

@@ -1,37 +0,0 @@
-import { Component } from 'vue';
-
-export interface TreeNode {
-  id: string;
-  name: string;
-  icon?: string;
-  children: TreeNode[];
-}
-
-export interface BlockData<T> {
-  id: string;
-  name: string;
-  data: T;
-}
-
-export interface BlockProps<T> {
-  blockId: string;
-  data?: T,
-  onUpdate?: (b?: BlockData<T>) => void;
-  onPrependBlock?: (b?: BlockData<T>) => void;
-  onAppendBlock?: (b?: BlockData<T>) => void;
-  onRemoveSelf?: () => void;
-  onActivateNext?: () => void;
-  onActivatePrevious?: () => void;
-}
-
-export interface BlockDefinition<T> {
-  name: string;
-  icon?: string;
-  getDefaultData: T;
-  edit: Component<BlockProps<T>>;
-  display: Component<BlockProps<T>>;
-}
-
-export interface BlockLibrary {
-  [name: string]: BlockDefinition<any>;
-}

packages/core/lib/use-activation.ts

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

packages/core/lib/use-block-tree.ts

@@ -1,70 +0,0 @@
-import {
-  ref,
-  Ref,
-  reactive,
-  inject,
-  provide,
-  onUnmounted,
-} from 'vue';
-import {
-  TreeNode,
-  BlockData,
-} from './types';
-
-export const SymBlockTree= Symbol('Schlechtenburg block tree');
-export const SymBlockTreeRegister = Symbol('Schlechtenburg block tree register');
-export const SymBlockTreeUnregister = Symbol('Schlechtenburg block tree unregister');
-
-export function useBlockTree() {
-  const blockTree: Ref<TreeNode|null> = inject(SymBlockTree, ref(null));
-  const registerWithParent = inject(SymBlockTreeRegister, (_: TreeNode) => {});
-  const unregisterWithParent = inject(SymBlockTreeUnregister, (_: TreeNode) => {});
-
-  const self: TreeNode = reactive({
-    id: '',
-    name: '',
-    icon: '',
-    children: [],
-  });
-
-  // Provide a registration function to child blocks
-  provide(SymBlockTreeRegister, (block: TreeNode) => {
-    if (self.children.find((child: TreeNode) => child.id === block.id)) {
-      return;
-    }
-
-    self.children = [
-      ...self.children,
-      block,
-    ];
-  });
-
-  // Provide an unregistration function to child blocks
-  provide(SymBlockTreeUnregister, ({ id }: TreeNode) => {
-    self.children = self.children.filter((child: TreeNode) => child.id !== id);
-  });
-
-  const register = (block: BlockData<any>) => {
-    if (!block.id) {
-      throw new Error(`Cannot register a block without an id: ${JSON.stringify(block)}`);
-    }
-
-    self.id = block.id;
-    self.name = block.name;
-
-    // Register ourselves at the parent block
-    registerWithParent(self);
-  }
-
-  // Unregister from parent when we get destroyed
-  onUnmounted(() => {
-    if (self.id) {
-      unregisterWithParent(self);
-    }
-  });
-
-  return {
-    blockTree,
-    register,
-  };
-}

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

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

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

@@ -1,56 +0,0 @@
-/// <reference types="resize-observer-browser" />
-
-import {
-  Ref,
-  ref,
-  inject,
-  watch,
-  provide,
-} from 'vue';
-
-interface BlockRect {
-  height: number;
-  width: number;
-  left: number;
-  top: number;
-}
-
-export const SymBlockDimensions = Symbol('Schlechtenburg block dimensions');
-export const SymEditorDimensions = 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(SymEditorDimensions, ref(null));
-  const blockDimensions: Ref<BlockRect|null> = inject(SymBlockDimensions, ref(null));
-
-  return { editorDimensions, blockDimensions };
-}

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

@@ -1,64 +0,0 @@
-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/package-lock.json

@@ -1,153 +0,0 @@
-{
-	"name": "@schlechtenburg/core",
-	"version": "0.0.0",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"@babel/helper-validator-identifier": {
-			"version": "7.12.11",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
-		},
-		"@babel/parser": {
-			"version": "7.13.9",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
-			"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
-		},
-		"@babel/types": {
-			"version": "7.13.0",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
-			"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-			"requires": {
-				"@babel/helper-validator-identifier": "^7.12.11",
-				"lodash": "^4.17.19",
-				"to-fast-properties": "^2.0.0"
-			}
-		},
-		"@types/lodash": {
-			"version": "4.14.168",
-			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
-			"integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==",
-			"dev": true
-		},
-		"@types/lodash-es": {
-			"version": "4.17.4",
-			"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.4.tgz",
-			"integrity": "sha512-BBz79DCJbD2CVYZH67MBeHZRX++HF+5p8Mo5MzjZi64Wac39S3diedJYHZtScbRVf4DjZyN6LzA0SB0zy+HSSQ==",
-			"dev": true,
-			"requires": {
-				"@types/lodash": "*"
-			}
-		},
-		"@types/resize-observer-browser": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz",
-			"integrity": "sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ==",
-			"dev": true
-		},
-		"@types/uuid": {
-			"version": "8.3.0",
-			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
-			"integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
-			"dev": true
-		},
-		"@vue/compiler-core": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
-			"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
-			"requires": {
-				"@babel/parser": "^7.12.0",
-				"@babel/types": "^7.12.0",
-				"@vue/shared": "3.0.7",
-				"estree-walker": "^2.0.1",
-				"source-map": "^0.6.1"
-			}
-		},
-		"@vue/compiler-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
-			"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
-			"requires": {
-				"@vue/compiler-core": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/reactivity": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
-			"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
-			"requires": {
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-core": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
-			"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
-			"requires": {
-				"@vue/reactivity": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
-			"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
-			"requires": {
-				"@vue/runtime-core": "3.0.7",
-				"@vue/shared": "3.0.7",
-				"csstype": "^2.6.8"
-			}
-		},
-		"@vue/shared": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
-			"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
-		},
-		"csstype": {
-			"version": "2.6.16",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
-			"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
-		},
-		"estree-walker": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-		},
-		"lodash": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-		},
-		"lodash-es": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-		},
-		"source-map": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-		},
-		"to-fast-properties": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
-		},
-		"uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-		},
-		"vue": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
-			"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
-			"requires": {
-				"@vue/compiler-dom": "3.0.7",
-				"@vue/runtime-dom": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		}
-	}
-}

packages/core/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@schlechtenburg/core",
-  "version": "0.0.0",
-  "description": "> TODO: description",
-  "author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
-  "homepage": "",
-  "license": "GPL-3.0-or-later",
-  "main": "lib/index.ts",
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
-  },
-  "files": [
-    "lib"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
-  },
-  "dependencies": {
-    "lodash-es": "^4.17.21",
-    "uuid": "^8.3.2",
-    "vue": "^3.0.7"
-  },
-  "devDependencies": {
-    "@types/lodash-es": "^4.17.4",
-    "@types/resize-observer-browser": "^0.1.5",
-    "@types/uuid": "^8.3.0"
-  }
-}

packages/heading/README.md

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

packages/heading/__tests__/heading.test.js

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

packages/heading/lib/edit.tsx

@@ -1 +0,0 @@
-export default {};

packages/heading/lib/index.ts

@@ -1,12 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-import { getDefaultData } from './util';
-
-export * from './util';
-export const name = 'sb-heading';
-
-export default {
-  name,
-  getDefaultData,
-  edit: defineAsyncComponent(() => import('./edit')),
-  display: defineAsyncComponent(() => import('./edit')),
-};

packages/heading/lib/util.ts

@@ -1,2 +0,0 @@
-export const a = 1;
-export const getDefaultData = () => ({});

packages/heading/package-lock.json

@@ -1,116 +0,0 @@
-{
-	"name": "@schlechtenburg/heading",
-	"version": "0.0.0",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"@babel/helper-validator-identifier": {
-			"version": "7.12.11",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
-		},
-		"@babel/parser": {
-			"version": "7.13.9",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
-			"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
-		},
-		"@babel/types": {
-			"version": "7.13.0",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
-			"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-			"requires": {
-				"@babel/helper-validator-identifier": "^7.12.11",
-				"lodash": "^4.17.19",
-				"to-fast-properties": "^2.0.0"
-			}
-		},
-		"@vue/compiler-core": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
-			"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
-			"requires": {
-				"@babel/parser": "^7.12.0",
-				"@babel/types": "^7.12.0",
-				"@vue/shared": "3.0.7",
-				"estree-walker": "^2.0.1",
-				"source-map": "^0.6.1"
-			}
-		},
-		"@vue/compiler-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
-			"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
-			"requires": {
-				"@vue/compiler-core": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/reactivity": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
-			"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
-			"requires": {
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-core": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
-			"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
-			"requires": {
-				"@vue/reactivity": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
-			"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
-			"requires": {
-				"@vue/runtime-core": "3.0.7",
-				"@vue/shared": "3.0.7",
-				"csstype": "^2.6.8"
-			}
-		},
-		"@vue/shared": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
-			"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
-		},
-		"csstype": {
-			"version": "2.6.16",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
-			"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
-		},
-		"estree-walker": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-		},
-		"lodash": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-		},
-		"source-map": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-		},
-		"to-fast-properties": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
-		},
-		"vue": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
-			"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
-			"requires": {
-				"@vue/compiler-dom": "3.0.7",
-				"@vue/runtime-dom": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		}
-	}
-}

packages/heading/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "@schlechtenburg/heading",
-  "version": "0.0.0",
-  "description": "> TODO: description",
-  "author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
-  "homepage": "",
-  "license": "GPL-3.0-or-later",
-  "main": "lib/index.ts",
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
-  },
-  "files": [
-    "lib"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
-  },
-  "dependencies": {
-    "@schlechtenburg/core": "^0.0.0",
-    "vue": "^3.0.7"
-  }
-}

packages/image/README.md

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

packages/image/__tests__/image.test.js

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

packages/image/lib/display.tsx

@@ -1,35 +0,0 @@
-import { defineComponent, PropType } from 'vue';
-import {
-  model,
-  SbBlock,
-} from '@schlechtenburg/core';
-import {
-  getDefaultData,
-  ImageData,
-} from './util';
-
-import './style.scss';
-
-export default defineComponent({
-  name: 'sb-image-display',
-
-  model,
-
-  props: {
-    data: {
-      type: (null as unknown) as PropType<ImageData>,
-      default: getDefaultData,
-    },
-  },
-
-  setup(props) {
-    return () => <figure class="sb-image">
-        <img
-          class="sb-image__content"
-          src={props.data.src}
-          alt={props.data.alt}
-        />
-        <SbBlock block={props.data.description} />
-      </figure>;
-  },
-});

packages/image/lib/edit.tsx

@@ -1,115 +0,0 @@
-import {
-  defineComponent,
-  reactive,
-  ref,
-  Ref,
-  watch,
-  PropType,
-} from 'vue';
-import {
-  model,
-  SbToolbar,
-  SbButton,
-  SbBlock,
-  BlockData,
-} from '@schlechtenburg/core';
-import { ParagraphData } from '@schlechtenburg/paragraph';
-import {
-  getDefaultData,
-  ImageData,
-} from './util';
-
-import './style.scss';
-
-export default defineComponent({
-  name: 'sb-image-edit',
-
-  model,
-
-  props: {
-    onUpdate: { type: Function, default: () => {} },
-    data: {
-      type: (null as unknown) as PropType<ImageData>,
-      default: getDefaultData,
-    },
-  },
-
-  setup(props) {
-    const localData = reactive({
-      src: props.data.src,
-      alt: props.data.alt,
-      description: props.data.description,
-    });
-
-    const fileInput: Ref<null|HTMLInputElement> = ref(null);
-
-    watch(() => props.data, () => {
-      localData.src = props.data.src;
-      localData.alt = props.data.alt;
-      localData.description = props.data.description;
-    });
-
-    const selectImage = () => {
-      if (fileInput.value) {
-        fileInput.value.click();
-      }
-    };
-
-    const onImageSelect = () => {
-      if (fileInput.value && fileInput.value.files && fileInput.value.files.length) {
-        const reader = new FileReader();
-        reader.addEventListener('load', () => {
-          const src = reader?.result?.toString();
-          if (!src) {
-            throw new Error('Couldn\'t load image src');
-          }
-
-          props.onUpdate({
-            src,
-            alt: props.data.alt,
-            description: props.data.description,
-          });
-        });
-
-        reader.readAsDataURL(fileInput.value.files[0]);
-      }
-    };
-
-    const onDescriptionUpdate = (description: BlockData<ParagraphData>) => {
-      props.onUpdate({
-        ...props.data,
-        description,
-      });
-    };
-
-    return () => (
-      <figure class="sb-image">
-        <SbToolbar>
-          {localData.src
-            ? <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>
-            : null}
-          <input
-            type="file"
-            ref={fileInput}
-            style="display: none;"
-            onInput={onImageSelect}
-          />
-        </SbToolbar>
-        {localData.src
-          ? <>
-              <img
-                src={localData.src}
-                alt={localData.alt}
-                class="sb-image__content"
-              />
-              <SbBlock
-                block={localData.description}
-                onUpdate={(updated: BlockData<ParagraphData>) => onDescriptionUpdate(updated)}
-              />
-            </>
-          : <SbButton {...{ onClick: selectImage }}>Select Image</SbButton>
-        }
-      </figure>
-    );
-  },
-});

packages/image/lib/index.ts

@@ -1,12 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-import { getDefaultData } from './util';
-
-export * from './util';
-export const name = 'sb-image';
-
-export default {
-  name,
-  getDefaultData,
-  edit: defineAsyncComponent(() => import('./edit')),
-  display: defineAsyncComponent(() => import('./display')),
-};

packages/image/lib/style.scss

@@ -1,8 +0,0 @@
-.sb-image {
-  margin: 0;
-
-  &__content {
-    width: 100%;
-    height: auto;
-  }
-}

packages/image/lib/util.ts

@@ -1,25 +0,0 @@
-import {
-  BlockData,
-  generateBlockId,
-} from '@schlechtenburg/core';
-import {
-  name as paragraphName,
-  ParagraphData,
-  getDefaultData as getDefaultParagraphData
-} from '@schlechtenburg/paragraph';
-
-export interface ImageData {
-  src: string;
-  alt: string;
-  description: BlockData<ParagraphData>;
-}
-
-export const getDefaultData: () => ImageData = () => ({
-  src: '',
-  alt: '',
-  description: {
-    id: generateBlockId(),
-    name: paragraphName,
-    data: getDefaultParagraphData(),
-  },
-});

packages/image/package-lock.json

@@ -1,116 +0,0 @@
-{
-	"name": "@schlechtenburg/image",
-	"version": "0.0.0",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"@babel/helper-validator-identifier": {
-			"version": "7.12.11",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
-		},
-		"@babel/parser": {
-			"version": "7.13.9",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.9.tgz",
-			"integrity": "sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw=="
-		},
-		"@babel/types": {
-			"version": "7.13.0",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
-			"integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-			"requires": {
-				"@babel/helper-validator-identifier": "^7.12.11",
-				"lodash": "^4.17.19",
-				"to-fast-properties": "^2.0.0"
-			}
-		},
-		"@vue/compiler-core": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.7.tgz",
-			"integrity": "sha512-JFohgBXoyUc3mdeI2WxlhjQZ5fakfemJkZHX8Gu/nFbEg3+lKVUZmNKWmmnp9aOzJQZKoj77LjmFxiP+P+7lMQ==",
-			"requires": {
-				"@babel/parser": "^7.12.0",
-				"@babel/types": "^7.12.0",
-				"@vue/shared": "3.0.7",
-				"estree-walker": "^2.0.1",
-				"source-map": "^0.6.1"
-			}
-		},
-		"@vue/compiler-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz",
-			"integrity": "sha512-VnIH9EbWQm/Tkcp+8dCaNVsVvhm/vxCrIKWRkXY9215hTqOqQOvejT8IMjd2kc++nIsYMsdQk6H9qqBvoLe/Cw==",
-			"requires": {
-				"@vue/compiler-core": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/reactivity": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.7.tgz",
-			"integrity": "sha512-FotWcNNaKhqpFZrdgsUOZ1enlJ5lhTt01CNTtLSyK7jYFgZBTuw8vKsEutZKDYZ1XKotOfoeO8N3pZQqmM6Etw==",
-			"requires": {
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-core": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz",
-			"integrity": "sha512-DBAZAwVvdmMXuyd6/9qqj/kYr/GaLTmn1L2/QLxLwP+UfhIboiTSBc/tUUb8MRk7Bb98GzNeAWkkT6AfooS3dQ==",
-			"requires": {
-				"@vue/reactivity": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		},
-		"@vue/runtime-dom": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz",
-			"integrity": "sha512-Oij4ruOtnpQpCj+/Q3JPzgpTJ1Q7+N67pA53A8KVITEtxfvKL46NN6dhAZ5NGqwX6RWZpYqWQNewITeF0pHr8g==",
-			"requires": {
-				"@vue/runtime-core": "3.0.7",
-				"@vue/shared": "3.0.7",
-				"csstype": "^2.6.8"
-			}
-		},
-		"@vue/shared": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz",
-			"integrity": "sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg=="
-		},
-		"csstype": {
-			"version": "2.6.16",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.16.tgz",
-			"integrity": "sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q=="
-		},
-		"estree-walker": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-		},
-		"lodash": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-		},
-		"source-map": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-		},
-		"to-fast-properties": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
-		},
-		"vue": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz",
-			"integrity": "sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw==",
-			"requires": {
-				"@vue/compiler-dom": "3.0.7",
-				"@vue/runtime-dom": "3.0.7",
-				"@vue/shared": "3.0.7"
-			}
-		}
-	}
-}

packages/image/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "@schlechtenburg/image",
-  "version": "0.0.0",
-  "description": "> TODO: description",
-  "author": "Benjamin Bädorf <hello@benjaminbaedorf.eu>",
-  "homepage": "",
-  "license": "GPL-3.0-or-later",
-  "main": "lib/index.ts",
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
-  },
-  "files": [
-    "lib"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@git.b12f.io:b12f/schlechtenburg.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
-  },
-  "dependencies": {
-    "@schlechtenburg/core": "^0.0.0",
-    "@schlechtenburg/paragraph": "^0.0.0",
-    "vue": "^3.0.7"
-  }
-}

packages/layout/README.md

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

packages/layout/__tests__/layout.test.js

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