b12f/schlechtenburg
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request 'vue3' (#1) from vue3 into master

Browse source 
Reviewed-on: https://git.b12f.io/b12f/schlechtenburg/pulls/1
This commit is contained in:
Benjamin Bädorf 2020-12-30 23:15:45 +00:00
parent 28105f5315 798a549688
commit bc49cbfd30
109 changed files with 7144 additions and 12880 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
.eslintrc.js
View file

@ -1,30 +0,0 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/airbnb',
'@vue/typescript/recommended',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'@typescript-eslint/no-empty-function': 0,
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)',
],
env: {
jest: true,
},
},
],
};

29
.gitignore vendored
View file

@ -1,26 +1,5 @@
.DS_Store
node_modules node_modules
/dist .DS_Store
dist
/tests/e2e/reports/ dist-ssr
selenium-debug.log *.local
chromedriver.log
geckodriver.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

34
README.md
View file

@ -1,34 +1,8 @@
# schlechtenburg # Schlechtenburg
## Project setup Experimental WYSIWYG editor framework made with Vue 3 and TypeScript. It takes cues from both Wordpress' Gutenberg editor and CKEditor, though it tries to become a best of both worlds; a very lightweight, easily extensible core, written with modern components and the accompanying state management.
```
npm install
```
### Compiles and hot-reloads for development It inputs and outputs a tree of JSON-serializable data.
```
npm run serve
```
### Compiles and minifies for production Just a plaything for now.
```
npm run build
```
### Run your unit tests
```
npm run test:unit
```
### Run your end-to-end tests
```
npm run test:e2e
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

6
babel.config.js
View file

@ -1,6 +0,0 @@
module.exports = {
presets: [
'vca-jsx',
'@vue/cli-plugin-babel/preset',
],
};

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

3
jest.config.js
View file

@ -1,3 +0,0 @@
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
};

6
lerna.json Normal file
View file

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

17499
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

51
package.json
View file

@ -1,47 +1,22 @@
{ {
"name": "schlechtenburg", "name": "schlechtenburg",
"version": "0.1.0", "version": "0.0.0",
"private": true, "license": "GPL-3.0-or-later",
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite",
"build": "vue-cli-service build", "build": "vuedx-typecheck . && vite build"
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@vue/composition-api": "^0.5.0", "lodash-es": "^4.17.20",
"core-js": "^3.6.4", "vue": "^3.0.4"
"lodash-es": "^4.17.15",
"vue": "^2.6.11"
}, },
"devDependencies": { "devDependencies": {
"@types/jest": "^24.0.19", "@vue/compiler-sfc": "^3.0.4",
"@types/lodash-es": "^4.17.3", "@vuedx/typecheck": "^0.3.1-insiders-1606311019.0",
"@typescript-eslint/eslint-plugin": "^2.26.0", "@vuedx/typescript-plugin-vue": "^0.3.1-insiders-1606311019.0",
"@typescript-eslint/parser": "^2.26.0", "lerna": "^3.22.1",
"@vue/cli-plugin-babel": "~4.3.0", "sass": "^1.30.0",
"@vue/cli-plugin-e2e-nightwatch": "~4.3.0", "typescript": "^4.1.2",
"@vue/cli-plugin-eslint": "~4.3.0", "vite": "^1.0.0-rc.13"
"@vue/cli-plugin-typescript": "~4.3.0",
"@vue/cli-plugin-unit-jest": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "1.0.0-beta.31",
"babel-preset-vca-jsx": "^0.3.5",
"chromedriver": "^80.0.1",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"geckodriver": "^1.19.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.4.0"
},
"peerDependencies": {
"vuex": "^3.4.0"
} }
} }

11
packages/core/README.md Normal file
View file

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

7
packages/core/__tests__/core.test.js Normal file
View file

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

0
src/ResizeObserver.d.ts → packages/core/lib/ResizeObserver.d.ts vendored
View file

0
src/assets/logo.png → packages/core/lib/assets/logo.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

34
packages/core/lib/blocks.ts Normal file
View file

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

0
src/components/internal/Block.scss → packages/core/lib/components/Block.scss
View file

81
src/components/internal/Block.tsx → packages/core/lib/components/Block.tsx
View file

@ -1,28 +1,26 @@
import { import {
computed,
defineComponent, defineComponent,
computed,
watch, watch,
PropType, PropType,
ref, ref,
Ref, Ref,
} from '@vue/composition-api'; } from 'vue';
import { import { Block } from '../blocks';
Block, import { SbMode } from '../mode';
useDynamicBlocks, import { useResizeObserver, BlockDimensions } from '../use-resize-observer';
useActivation, import { useActivation } from '../use-activation';
SbMode, import { useDynamicBlocks } from '../use-dynamic-blocks';
BlockDimensions,
useResizeObserver,
} from '@components/TreeElement';
import SbBlockOrdering from './BlockOrdering'; import { SbBlockOrdering } from './BlockOrdering';
import SbMissingBlock from './BlockMissing/index';
import './Block.scss'; import './Block.scss';
interface BlockProps { interface BlockProps {
block: Block; block: Block;
eventUpdate: (b?: Block) => void; eventUpdate: (b?: Block) => void;
eventInsertBlock: (b?: Block) => void; eventPrependBlock: (b?: Block) => void;
eventAppendBlock: (b?: Block) => void; eventAppendBlock: (b?: Block) => void;
eventRemoveBlock: () => void; eventRemoveBlock: () => void;
eventMoveUp: () => void; eventMoveUp: () => void;
@ -30,7 +28,7 @@ interface BlockProps {
sortable: string; sortable: string;
} }
export default defineComponent({ export const SbBlock = defineComponent({
name: 'sb-block', name: 'sb-block',
props: { props: {
@ -43,7 +41,7 @@ export default defineComponent({
default: null, default: null,
}, },
eventUpdate: { type: Function, default: () => {} }, eventUpdate: { type: Function, default: () => {} },
eventInsertBlock: { type: Function, default: () => {} }, eventPrependBlock: { type: Function, default: () => {} },
eventAppendBlock: { type: Function, default: () => {} }, eventAppendBlock: { type: Function, default: () => {} },
eventRemoveBlock: { type: Function, default: () => {} }, eventRemoveBlock: { type: Function, default: () => {} },
eventMoveUp: { type: Function, default: () => {} }, eventMoveUp: { type: Function, default: () => {} },
@ -59,16 +57,6 @@ export default defineComponent({
'sb-block_active': isActive.value, 'sb-block_active': isActive.value,
})); }));
const BlockComponent = getBlock(props.block.name) as any;
if (mode.value === SbMode.Display) {
return () => (
<BlockComponent
data={props.block.data}
block-id={props.block.blockId}
/>
);
}
const { triggerSizeCalculation } = useResizeObserver(el, BlockDimensions); const { triggerSizeCalculation } = useResizeObserver(el, BlockDimensions);
watch(() => props.block.data, triggerSizeCalculation); watch(() => props.block.data, triggerSizeCalculation);
@ -82,37 +70,46 @@ export default defineComponent({
}); });
}; };
return () => <div return () => {
const BlockComponent = getBlock(props.block.name) as any;
if (!BlockComponent) {
const MissingBlock = SbMissingBlock[mode.value];
return <MissingBlock
name={props.block.name}
blockId={props.block.blockId}
/>;
}
if (mode.value === SbMode.Display) {
return () => (
<BlockComponent
data={props.block.data}
blockId={props.block.blockId}
/>
);
}
return <div
ref={el} ref={el}
class={classes.value} class={classes.value}
> >
<div class="sb-block__edit-cover"></div> <div class="sb-block__edit-cover"></div>
{props.sortable {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
? <SbBlockOrdering
eventMoveUp={props.eventMoveUp}
eventMoveDown={props.eventMoveDown}
eventRemoveBlock={props.eventRemoveBlock}
sortable={props.sortable}
/>
: null}
<BlockComponent <BlockComponent
data={props.block.data} data={props.block.data}
block-id={props.block.blockId} blockId={props.block.blockId}
eventUpdate={onChildUpdate} eventUpdate={onChildUpdate}
eventInsertBlock={props.eventInsertBlock} eventPrependBlock={props.eventPrependBlock}
eventAppendBlock={props.eventAppendBlock} eventAppendBlock={props.eventAppendBlock}
eventRemoveBlock={props.eventRemoveBlock} eventRemoveBlock={props.eventRemoveBlock}
{...{ onClick={($event: MouseEvent) => {
attrs: context.attrs,
nativeOn: {
click: ($event: MouseEvent) => {
$event.stopPropagation(); $event.stopPropagation();
activate(); activate();
},
...context.listeners,
},
}} }}
{...context.attrs}
/> />
</div>; </div>;
};
}, },
}); });

41
packages/core/lib/components/BlockMissing/display.tsx Normal file
View file

@ -0,0 +1,41 @@
import { defineComponent, PropType } from 'vue';
import {
model,
blockProps,
BlockProps,
} from '../../blocks';
import './style.scss';
interface MissingBlockProps extends BlockProps<any> {
eventUpdate: (b?: any) => void;
eventAppendBlock: (b?: any) => void;
eventRemoveBlock: () => void;
}
export default defineComponent({
name: 'sb-missing-block',
model,
props: {
name: String,
...blockProps,
data: {
type: (null as unknown) as PropType<any>,
default: null,
},
eventUpdate: { type: Function, default: () => {} },
eventAppendBlock: { type: Function, default: () => {} },
eventRemoveBlock: { type: Function, default: () => {} },
},
setup(props: MissingBlockProps) {
console.log(props, props.name, props.data, props.blockId);
return () => (
<div class="sb-missing-block">
Missing block: {props.name}
</div>
);
},
});

7
packages/core/lib/components/BlockMissing/index.ts Normal file
View file

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

3
packages/core/lib/components/BlockMissing/style.scss Normal file
View file

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

0
packages/core/lib/components/BlockMissing/util.ts Normal file
View file

0
src/components/internal/BlockOrdering.scss → packages/core/lib/components/BlockOrdering.scss
View file

14
src/components/internal/BlockOrdering.tsx → packages/core/lib/components/BlockOrdering.tsx
View file

@ -1,19 +1,17 @@
import debounce from 'lodash-es/debounce'; import { debounce } from 'lodash-es';
import { import {
defineComponent,
watch, watch,
reactive, reactive,
computed, computed,
} from '@vue/composition-api'; defineComponent,
import { } from 'vue';
useBlockSizing, import { useBlockSizing } from '../use-resize-observer';
} from '@components/TreeElement';
import SbButton from './Button'; import { SbButton } from './Button';
import './BlockOrdering.scss'; import './BlockOrdering.scss';
export default defineComponent({ export const SbBlockOrdering = defineComponent({
name: 'sb-block-ordering', name: 'sb-block-ordering',
props: { props: {

0
src/components/internal/BlockPicker.scss → packages/core/lib/components/BlockPicker.scss
View file

12
src/components/internal/BlockPicker.tsx → packages/core/lib/components/BlockPicker.tsx
View file

@ -1,19 +1,19 @@
import { import {
computed, computed,
defineComponent,
ref, ref,
} from '@vue/composition-api'; defineComponent,
} from 'vue';
import { import {
useDynamicBlocks, useDynamicBlocks,
BlockDefinition, BlockDefinition,
} from '../TreeElement'; } from '../use-dynamic-blocks';
import SbButton from './Button'; import { SbButton } from './Button';
import SbModal from './Modal'; import { SbModal } from './Modal';
import './BlockPicker.scss'; import './BlockPicker.scss';
export default defineComponent({ export const SbBlockPicker = defineComponent({
name: 'sb-block-picker', name: 'sb-block-picker',
props: {}, props: {},

0
src/components/internal/BlockPlaceholder.scss → packages/core/lib/components/BlockPlaceholder.scss
View file

20
packages/core/lib/components/BlockPlaceholder.tsx Normal file
View file

@ -0,0 +1,20 @@
import { defineComponent } from 'vue';
import { BlockDefinition } from '../blocks';
import { SbBlockPicker } from './BlockPicker';
import './BlockPlaceholder.scss';
export const SbBlockPlaceholder = defineComponent({
name: 'sb-block-placeholder',
setup(props, context) {
return () => (
<div class="sb-block-placeholder">
<SbBlockPicker
onPickedBlock={(block: BlockDefinition) => context.emit('insert-block', block)}
/>
</div>
);
},
});

0
src/components/internal/Button.scss → packages/core/lib/components/Button.scss
View file

9
src/components/internal/Button.tsx → packages/core/lib/components/Button.tsx
View file

@ -1,8 +1,8 @@
import { defineComponent } from '@vue/composition-api'; import { defineComponent } from 'vue';
import './Button.scss'; import './Button.scss';
export default defineComponent({ export const SbButton = defineComponent({
name: 'sb-button', name: 'sb-button',
inheritAttrs: false, inheritAttrs: false,
@ -10,10 +10,9 @@ export default defineComponent({
setup(props, context) { setup(props, context) {
return () => ( return () => (
<button <button
class="sb-button"
{...{ {...{
attrs: context.attrs, ...context.attrs,
on: context.listeners, class: (context.attrs.class || '') + ' sb-button',
}} }}
> >
{context.slots.default()} {context.slots.default()}

0
src/components/internal/Modal.scss → packages/core/lib/components/Modal.scss
View file

4
src/components/internal/Modal.tsx → packages/core/lib/components/Modal.tsx
View file

@ -1,7 +1,7 @@
import { import {
defineComponent, defineComponent,
computed, computed,
} from '@vue/composition-api'; } from 'vue';
import './Modal.scss'; import './Modal.scss';
@ -10,7 +10,7 @@ interface ModalProps {
eventClose: () => void; eventClose: () => void;
} }
export default defineComponent({ export const SbModal = defineComponent({
name: 'sb-modal', name: 'sb-modal',
props: { props: {

0
src/components/Schlechtenburg.scss → packages/core/lib/components/Schlechtenburg.scss
View file

57
src/components/Schlechtenburg.tsx → packages/core/lib/components/Schlechtenburg.tsx
View file

@ -1,56 +1,49 @@
import { import {
defineComponent, defineComponent,
provide, provide,
reactive, shallowReactive,
ref, ref,
watch,
PropType, PropType,
Ref, Ref,
watch, } from 'vue';
} from '@vue/composition-api';
import { import {
model, model,
ActiveBlock,
Block, Block,
SbMode,
Mode,
EditorDimensions,
BlockDefinition, BlockDefinition,
BlockLibraryDefinition, BlockLibraryDefinition,
BlockLibrary, } from '../blocks';
useResizeObserver, import { Mode, SbMode } from '../mode';
} from '@components/TreeElement'; import { BlockLibrary } from '../use-dynamic-blocks';
import { EditorDimensions, useResizeObserver } from '../use-resize-observer';
import { ActiveBlock } from '../use-activation';
import SbBlock from '@internal/Block'; import { SbBlock } from './Block';
import SbLayout from '@user/Layout/index';
import SbParagraph from '@user/Paragraph/index';
import SbImage from '@user/Image/index';
import SbHeading from '@user/Heading/index';
import './Schlechtenburg.scss'; import './Schlechtenburg.scss';
export interface SchlechtenburgProps { export interface SchlechtenburgProps {
customBlocks: BlockDefinition[]; customBlocks: BlockDefinition[];
eventUpdate: (b: Block) => void; eventUpdate: (b: Block<any>) => void;
block: Block; block: Block<any>;
mode: SbMode; mode: SbMode;
} }
export default defineComponent({ export const Schlechtenburg = defineComponent({
name: 'schlechtenburg-main', name: 'schlechtenburg-main',
model, model,
props: { props: {
customBlocks: { type: Array as PropType<BlockDefinition[]>, default: () => [] }, customBlocks: { type: Array as PropType<BlockDefinition[]>, default: () => [] },
block: { type: Object as PropType<Block>, required: true }, block: { type: Object as PropType<Block<any>>, required: true },
eventUpdate: { type: Function, default: () => {} }, eventUpdate: { type: Function, default: () => {} },
mode: { mode: {
type: String, type: String as PropType<SbMode>,
validator(value: string) { validator(value: any) {
return ['edit', 'display'].includes(value); return Object.values(SbMode).includes(value);
}, },
default: 'edit', default: SbMode.Edit,
}, },
}, },
@ -64,21 +57,19 @@ export default defineComponent({
const activeBlock = ref(null); const activeBlock = ref(null);
provide(ActiveBlock, activeBlock); provide(ActiveBlock, activeBlock);
const blockLibrary: BlockLibraryDefinition = reactive({ const blockLibrary: BlockLibraryDefinition = shallowReactive({
'sb-layout': SbLayout,
'sb-image': SbImage,
'sb-paragraph': SbParagraph,
'sb-heading': SbHeading,
...props.customBlocks.reduce( ...props.customBlocks.reduce(
( (blocks: {[name: string]: Block<any>}, block: Block<any>) => ({ ...blocks, [block.name]: block }),
blocks,
block,
) => ({ ...blocks, [block.name]: block }),
{}, {},
), ),
}); });
provide(BlockLibrary, blockLibrary); provide(BlockLibrary, blockLibrary);
watch(props.block, () => {
console.log('Update', props.block);
});
return () => ( return () => (
<div <div
class="sb-main" class="sb-main"

0
src/components/internal/Select.scss → packages/core/lib/components/Select.scss
View file

10
src/components/internal/Select.tsx → packages/core/lib/components/Select.tsx
View file

@ -1,8 +1,7 @@
import { defineComponent } from '@vue/composition-api'; import { defineComponent } from 'vue';
import './Select.scss'; import './Select.scss';
export default defineComponent({ export const SbSelect = defineComponent({
name: 'sb-select', name: 'sb-select',
inheritAttrs: false, inheritAttrs: false,
@ -12,10 +11,7 @@ export default defineComponent({
<div class="sb-select"> <div class="sb-select">
<select <select
class="sb-select__input" class="sb-select__input"
{...{ {...context.attrs}
attrs: context.attrs,
on: context.listeners,
}}
> >
{context.slots.default()} {context.slots.default()}
</select> </select>

0
src/components/internal/Toolbar.scss → packages/core/lib/components/Toolbar.scss
View file

12
src/components/internal/Toolbar.tsx → packages/core/lib/components/Toolbar.tsx
View file

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

0
src/directives/activation-cover.js → packages/core/lib/directives/activation-cover.js
View file

17
packages/core/lib/index.ts Normal file
View file

@ -0,0 +1,17 @@
export * from './mode';
export * from './blocks';
export * from './use-activation';
export * from './use-dynamic-blocks';
export * from './use-resize-observer';
export * from './directives/activation-cover.js';
export * from './components/Schlechtenburg';
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';

5
packages/core/lib/mode.ts Normal file
View file

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

1
packages/core/lib/shims-tsx.d.ts vendored Normal file
View file

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

5
packages/core/lib/shims-vue.d.ts vendored Normal file
View file

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

28
packages/core/lib/use-activation.ts Normal file
View file

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

20
packages/core/lib/use-dynamic-blocks.ts Normal file
View file

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

54
packages/core/lib/use-resize-observer.ts Normal file
View file

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

64
packages/core/lib/vue-app-env.d.ts vendored Normal file
View file

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

121
packages/core/package-lock.json generated Normal file
View file

@ -0,0 +1,121 @@
{
"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.12.11",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
},
"@babel/types": {
"version": "7.12.12",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
"requires": {
"@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"@vue/compiler-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
"requires": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
"@vue/shared": "3.0.4",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
"requires": {
"@vue/compiler-core": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/reactivity": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
"requires": {
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
"requires": {
"@vue/reactivity": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
"requires": {
"@vue/runtime-core": "3.0.4",
"@vue/shared": "3.0.4",
"csstype": "^2.6.8"
}
},
"@vue/shared": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
},
"csstype": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
},
"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.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"lodash-es": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
"integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
},
"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.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
"requires": {
"@vue/compiler-dom": "3.0.4",
"@vue/runtime-dom": "3.0.4",
"@vue/shared": "3.0.4"
}
}
}
}

27
packages/core/package.json Normal file
View file

@ -0,0 +1,27 @@
{
"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": {
"vue": "^3.0.4",
"lodash-es": "^4.17.20"
}
}

11
packages/heading/README.md Normal file
View file

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

7
packages/heading/__tests__/heading.test.js Normal file
View file

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

0
src/components/user/Heading/edit.tsx → packages/heading/lib/edit.tsx
View file

9
packages/heading/lib/index.ts Normal file
View file

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

0
src/components/user/Heading/util.ts → packages/heading/lib/util.ts
View file

116
packages/heading/package-lock.json generated Normal file
View file

@ -0,0 +1,116 @@
{
"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.12.11",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
},
"@babel/types": {
"version": "7.12.12",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
"requires": {
"@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"@vue/compiler-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
"requires": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
"@vue/shared": "3.0.4",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
"requires": {
"@vue/compiler-core": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/reactivity": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
"requires": {
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
"requires": {
"@vue/reactivity": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
"requires": {
"@vue/runtime-core": "3.0.4",
"@vue/shared": "3.0.4",
"csstype": "^2.6.8"
}
},
"@vue/shared": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
},
"csstype": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
},
"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.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"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.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
"requires": {
"@vue/compiler-dom": "3.0.4",
"@vue/runtime-dom": "3.0.4",
"@vue/shared": "3.0.4"
}
}
}
}

30
packages/heading/package.json Normal file
View file

@ -0,0 +1,30 @@
{
"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.4"
}
}

11
packages/image/README.md Normal file
View file

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

7
packages/image/__tests__/image.test.js Normal file
View file

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

14
src/components/user/Image/display.tsx → packages/image/lib/display.tsx
View file

@ -1,8 +1,9 @@
import { defineComponent, PropType } from '@vue/composition-api'; import { defineComponent, PropType } from 'vue';
import { import {
model, model,
blockProps, blockProps,
} from '@components/TreeElement'; SbBlock,
} from '@schlechtenburg/core';
import { import {
getDefaultData, getDefaultData,
@ -26,10 +27,13 @@ export default defineComponent({
}, },
setup(props: ImageProps) { setup(props: ImageProps) {
return () => <img return () => <figure class="sb-image">
class="sb-image" <img
class="sb-image__content"
src={props.data.src} src={props.data.src}
alt={props.data.alt} alt={props.data.alt}
/>; />
<SbBlock block={props.data.description} />
</figure>;
}, },
}); });

38
src/components/user/Image/edit.tsx → packages/image/lib/edit.tsx
View file

@ -5,14 +5,14 @@ import {
Ref, Ref,
watch, watch,
PropType, PropType,
} from '@vue/composition-api'; } from 'vue';
import { import {
model, model,
blockProps, blockProps,
} from '@components/TreeElement'; SbToolbar,
SbButton,
import SbToolbar from '@internal/Toolbar'; SbBlock
import SbButton from '@internal/Button'; } from '@schlechtenburg/core';
import { import {
getDefaultData, getDefaultData,
@ -40,6 +40,7 @@ export default defineComponent({
const localData = reactive({ const localData = reactive({
src: props.data.src, src: props.data.src,
alt: props.data.alt, alt: props.data.alt,
description: props.data.description,
}); });
const fileInput: Ref<null|HTMLInputElement> = ref(null); const fileInput: Ref<null|HTMLInputElement> = ref(null);
@ -47,6 +48,7 @@ export default defineComponent({
watch(() => props.data, () => { watch(() => props.data, () => {
localData.src = props.data.src; localData.src = props.data.src;
localData.alt = props.data.alt; localData.alt = props.data.alt;
localData.description = props.data.description;
}); });
const selectImage = () => { const selectImage = () => {
@ -62,6 +64,7 @@ export default defineComponent({
props.eventUpdate({ props.eventUpdate({
src: reader.result, src: reader.result,
alt: props.data.alt, alt: props.data.alt,
description: props.data.description,
}); });
}); });
@ -69,23 +72,40 @@ export default defineComponent({
} }
}; };
const onDescriptionUpdate = (description) => {
props.eventUpdate({
...props.data,
description,
});
};
return () => ( return () => (
<div class="sb-image"> <figure class="sb-image">
<SbToolbar> <SbToolbar>
{localData.src {localData.src
? <SbButton onClick={selectImage}>Change Image</SbButton> ? <SbButton onClick={selectImage}>Change Image</SbButton>
: null} : null}
<input <input
type="file" type="file"
ref="fileInput" ref={fileInput}
style="display: none;" style="display: none;"
onInput={onImageSelect} onInput={onImageSelect}
/> />
</SbToolbar> </SbToolbar>
{localData.src {localData.src
? <img src={localData.src} alt={localData.alt} /> ? <>
<img
src={localData.src}
alt={localData.alt}
class="sb-image__content"
/>
<SbBlock
block={localData.description}
eventUpdate={(updated: Block) => onDescriptionUpdate(updated)}
/>
</>
: <SbButton onClick={selectImage}>Select Image</SbButton>} : <SbButton onClick={selectImage}>Select Image</SbButton>}
</div> </figure>
); );
}, },
}); });

9
packages/image/lib/index.ts Normal file
View file

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

8
packages/image/lib/style.scss Normal file
View file

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

8
src/components/user/Image/util.ts → packages/image/lib/util.ts
View file

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

116
packages/image/package-lock.json generated Normal file
View file

@ -0,0 +1,116 @@
{
"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.12.11",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
},
"@babel/types": {
"version": "7.12.12",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
"requires": {
"@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"@vue/compiler-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
"requires": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
"@vue/shared": "3.0.4",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
"requires": {
"@vue/compiler-core": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/reactivity": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
"requires": {
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
"requires": {
"@vue/reactivity": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
"requires": {
"@vue/runtime-core": "3.0.4",
"@vue/shared": "3.0.4",
"csstype": "^2.6.8"
}
},
"@vue/shared": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
},
"csstype": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
},
"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.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"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.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
"requires": {
"@vue/compiler-dom": "3.0.4",
"@vue/runtime-dom": "3.0.4",
"@vue/shared": "3.0.4"
}
}
}
}

31
packages/image/package.json Normal file
View file

@ -0,0 +1,31 @@
{
"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.4"
}
}

11
packages/layout/README.md Normal file
View file

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

7
packages/layout/__tests__/layout.test.js Normal file
View file

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

9
src/components/user/Layout/display.tsx → packages/layout/lib/display.tsx
View file

@ -1,14 +1,13 @@
import { import {
computed,
defineComponent, defineComponent,
computed,
PropType, PropType,
} from '@vue/composition-api'; } from 'vue';
import { import {
model, model,
blockProps, blockProps,
} from '@components/TreeElement'; SbBlock,
} from '@schlechtenburg/core';
import SbBlock from '@internal/Block';
import { import {
LayoutData, LayoutData,

52
src/components/user/Layout/edit.tsx → packages/layout/lib/edit.tsx
View file

@ -1,21 +1,22 @@
import { import {
defineComponent,
reactive, reactive,
computed, computed,
defineComponent,
watch, watch,
PropType, PropType,
} from '@vue/composition-api'; } from 'vue';
import { import {
model, model,
useActivation,
Block, Block,
blockProps, blockProps,
} from '@components/TreeElement'; useActivation,
import SbBlock from '@internal/Block'; SbBlock,
import SbButton from '@internal/Button'; SbButton,
import SbToolbar from '@internal/Toolbar'; SbToolbar,
import SbBlockPlaceholder from '@internal/BlockPlaceholder'; SbBlockPlaceholder,
SbBlockOrdering,
} from '@schlechtenburg/core';
import { import {
LayoutData, LayoutData,
@ -58,6 +59,7 @@ export default defineComponent({
})); }));
const toggleOrientation = () => { const toggleOrientation = () => {
console.log('toggle');
props.eventUpdate({ props.eventUpdate({
orientation: localData.orientation === 'vertical' ? 'horizontal' : 'vertical', orientation: localData.orientation === 'vertical' ? 'horizontal' : 'vertical',
}); });
@ -146,14 +148,10 @@ export default defineComponent({
return () => ( return () => (
<div class={classes.value}> <div class={classes.value}>
<SbToolbar slot="toolbar"> <SbToolbar>
<SbButton <SbButton
type="button" type="button"
{...{ onClick={toggleOrientation}
nativeOn: {
click: toggleOrientation,
},
}}
>{localData.orientation}</SbButton> >{localData.orientation}</SbButton>
</SbToolbar> </SbToolbar>
@ -163,23 +161,23 @@ export default defineComponent({
data-order={index} data-order={index}
block={child} block={child}
eventUpdate={(updated: Block) => onChildUpdate(child, updated)} eventUpdate={(updated: Block) => onChildUpdate(child, updated)}
eventInsertBlock={(block: Block) => insertBlock(index, block)} eventPrependBlock={(block: Block) => insertBlock(index - 1, block)}
eventAppendBlock={appendBlock} eventAppendBlock={(block: Block) => insertBlock(index, block)}
eventRemoveBlock={() => removeBlock(index)} removable
>
{{
'context-toolbar': () =>
<SbBlockOrdering
eventMoveUp={() => moveUp(index)} eventMoveUp={() => moveUp(index)}
eventMoveDown={() => moveDown(index)} eventMoveDown={() => moveDown(index)}
sortable={localData.orientation} eventRemoveBlock={() => removeBlock(index)}
removable sortable={props.sortable}
/> />,
}}
</SbBlock>
))} ))}
<SbBlockPlaceholder <SbBlockPlaceholder onInsertBlock={appendBlock} />
{...{
on: {
'insert-block': appendBlock,
},
}}
/>
</div> </div>
); );
}, },

9
packages/layout/lib/index.ts Normal file
View file

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

9
src/components/user/Layout/style.scss → packages/layout/lib/style.scss
View file

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

2
src/components/user/Layout/util.ts → packages/layout/lib/util.ts
View file

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

116
packages/layout/package-lock.json generated Normal file
View file

@ -0,0 +1,116 @@
{
"name": "@schlechtenburg/layout",
"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.12.11",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
},
"@babel/types": {
"version": "7.12.12",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
"requires": {
"@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"@vue/compiler-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
"requires": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
"@vue/shared": "3.0.4",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
"requires": {
"@vue/compiler-core": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/reactivity": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
"requires": {
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
"requires": {
"@vue/reactivity": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
"requires": {
"@vue/runtime-core": "3.0.4",
"@vue/shared": "3.0.4",
"csstype": "^2.6.8"
}
},
"@vue/shared": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
},
"csstype": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
},
"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.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"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.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
"requires": {
"@vue/compiler-dom": "3.0.4",
"@vue/runtime-dom": "3.0.4",
"@vue/shared": "3.0.4"
}
}
}
}

30
packages/layout/package.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "@schlechtenburg/layout",
"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.4"
}
}

11
packages/paragraph/README.md Normal file
View file

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

7
packages/paragraph/__tests__/paragraph.test.js Normal file
View file

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

6
src/components/user/Paragraph/display.tsx → packages/paragraph/lib/display.tsx
View file

@ -2,12 +2,12 @@ import {
defineComponent, defineComponent,
computed, computed,
PropType, PropType,
} from '@vue/composition-api'; } from 'vue';
import { import {
model, model,
blockProps, blockProps,
BlockProps, BlockProps,
} from '@components/TreeElement'; } from '@schlechtenburg/core';
import { import {
getDefaultData, getDefaultData,
@ -42,7 +42,7 @@ export default defineComponent({
return () => <p return () => <p
class={classes.value} class={classes.value}
{...{ {...{
domProps: { innerHTML: props.data.value }, innerHTML: props.data.value,
}} }}
></p>; ></p>;
}, },

18
src/components/user/Paragraph/edit.tsx → packages/paragraph/lib/edit.tsx
View file

@ -7,17 +7,17 @@ import {
onMounted, onMounted,
watch, watch,
PropType, PropType,
} from '@vue/composition-api'; } from 'vue';
import { import {
model, model,
blockProps, blockProps,
BlockProps, BlockProps,
BlockData, BlockData,
useActivation, useActivation,
} from '@components/TreeElement';
import SbToolbar from '@internal/Toolbar'; SbToolbar,
import SbSelect from '@internal/Select'; SbSelect,
} from '@schlechtenburg/core';
import { import {
getDefaultData, getDefaultData,
@ -29,7 +29,7 @@ import './style.scss';
interface ParagraphProps extends BlockProps { interface ParagraphProps extends BlockProps {
data: ParagraphData; data: ParagraphData;
eventUpdate: (b?: ParagraphData) => void; eventUpdate: (b?: ParagraphData) => void;
eventInsertBlock: (b?: BlockData) => void; eventAppendBlock: (b?: BlockData) => void;
eventRemoveBlock: () => void; eventRemoveBlock: () => void;
} }
@ -45,7 +45,7 @@ export default defineComponent({
default: getDefaultData, default: getDefaultData,
}, },
eventUpdate: { type: Function, default: () => {} }, eventUpdate: { type: Function, default: () => {} },
eventInsertBlock: { type: Function, default: () => {} }, eventAppendBlock: { type: Function, default: () => {} },
eventRemoveBlock: { type: Function, default: () => {} }, eventRemoveBlock: { type: Function, default: () => {} },
}, },
@ -118,9 +118,9 @@ export default defineComponent({
}; };
const onKeydown = ($event: KeyboardEvent) => { const onKeydown = ($event: KeyboardEvent) => {
if ($event.key === 'Enter' && !$event.shiftKey) { if (props.eventAppendBlock && $event.key === 'Enter' && !$event.shiftKey) {
const blockId = `${+(new Date())}`; const blockId = `${+(new Date())}`;
props.eventInsertBlock({ props.eventAppendBlock({
blockId, blockId,
name: 'sb-paragraph', name: 'sb-paragraph',
data: getDefaultData(), data: getDefaultData(),
@ -133,7 +133,7 @@ export default defineComponent({
}; };
const onKeyup = ($event: KeyboardEvent) => { const onKeyup = ($event: KeyboardEvent) => {
if ($event.key === 'Backspace' && localData.value === '') { if (props.eventRemoveBlock && $event.key === 'Backspace' && localData.value === '') {
props.eventRemoveBlock(); props.eventRemoveBlock();
} }
}; };

11
packages/paragraph/lib/index.ts Normal file
View file

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

0
src/components/user/Paragraph/style.scss → packages/paragraph/lib/style.scss
View file

0
src/components/user/Paragraph/util.ts → packages/paragraph/lib/util.ts
View file

116
packages/paragraph/package-lock.json generated Normal file
View file

@ -0,0 +1,116 @@
{
"name": "@schlechtenburg/paragraph",
"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.12.11",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
},
"@babel/types": {
"version": "7.12.12",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
"requires": {
"@babel/helper-validator-identifier": "^7.12.11",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"@vue/compiler-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
"requires": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
"@vue/shared": "3.0.4",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
"requires": {
"@vue/compiler-core": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/reactivity": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
"requires": {
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-core": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
"requires": {
"@vue/reactivity": "3.0.4",
"@vue/shared": "3.0.4"
}
},
"@vue/runtime-dom": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
"requires": {
"@vue/runtime-core": "3.0.4",
"@vue/shared": "3.0.4",
"csstype": "^2.6.8"
}
},
"@vue/shared": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
},
"csstype": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
},
"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.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"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.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
"requires": {
"@vue/compiler-dom": "3.0.4",
"@vue/runtime-dom": "3.0.4",
"@vue/shared": "3.0.4"
}
}
}
}

30
packages/paragraph/package.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "@schlechtenburg/paragraph",
"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.4"
}
}

17
public/index.html
View file

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

20
src/initial-data.json → public/initial-data.json
View file

File diff suppressed because one or more lines are too long

96
src/App.tsx
View file

@ -1,12 +1,19 @@
import { import {
onBeforeMount,
computed,
defineComponent, defineComponent,
reactive, reactive,
ref, ref,
} from '@vue/composition-api'; } from 'vue';
import Schlechtenburg from '@components/Schlechtenburg';
import { Block } from './components/TreeElement';
import initialData from './initial-data.json'; import { Schlechtenburg, Block, SbMode } from '../packages/core/lib';
/*
import SbHeading from '../packages/heading/lib';
import SbParagraph from '../packages/paragraph/lib';
import SbImage from '../packages/image/lib';
*/
import SbLayout from '../packages/layout/lib';
import './App.scss'; import './App.scss';
@ -15,44 +22,65 @@ export default defineComponent({
setup() { setup() {
const activeTab = ref('edit'); const activeTab = ref('edit');
const block = reactive(initialData) as Block; const block: Block<any> = reactive({
name: 'none',
blockId: '0',
data: null,
});
return () => ( onBeforeMount(async () => {
<div id="app"> const res = await fetch('/initial-data.json');
const data = await res.json();
block.name = data.name;
block.blockId = data.blockId;
block.data = data.data;
});
const Example = computed(() => {
switch (activeTab.value) {
case SbMode.Edit:
return <Schlechtenburg
block={block}
eventUpdate={(newBlock: Block<any>) => {
block.data = newBlock.data;
}}
customBlocks={[
SbLayout,
/*
SbHeading,
SbImage,
SbParagraph,
*/
]}
key="edit"
mode="edit"
/>;
case SbMode.Edit:
return <Schlechtenburg
block={block}
key="display"
mode="display"
/>;
case 'data':
return <pre><code>{ JSON.stringify(block, null, 2) }</code></pre>;
}
});
return () => {
console.log('render App');
return <div id="app">
<select <select
value={activeTab.value} value={activeTab.value}
{...{ onChange={($event: Event) => {
on: {
change: ($event: Event) => {
activeTab.value = ($event.target as HTMLSelectElement).value; activeTab.value = ($event.target as HTMLSelectElement).value;
},
},
}} }}
> >
<option>edit</option> <option>edit</option>
<option>display</option> <option>display</option>
<option>json</option> <option>data</option>
</select> </select>
<Schlechtenburg <Example.value />
vShow={activeTab.value === 'edit'} </div>;
block={block} };
eventUpdate={(newBlock: Block) => {
block.name = newBlock.name;
block.blockId = newBlock.blockId;
block.data = newBlock.data;
}}
/>
<Schlechtenburg
vShow={activeTab.value === 'display'}
block={block}
mode="display"
/>
<pre vShow={activeTab.value === 'json'}>
<code>{JSON.stringify(block, null, 2)}</code>
</pre>
</div>
);
}, },
}); });

130
src/components/TreeElement.ts
View file

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

23
src/components/internal/BlockPlaceholder.tsx
View file

@ -1,23 +0,0 @@
import { defineComponent } from '@vue/composition-api';
import { BlockDefinition } from '../TreeElement';
import BlockPicker from './BlockPicker';
import './BlockPlaceholder.scss';
export default defineComponent({
name: 'sb-block-placeholder',
setup(props, context) {
return () => (
<div class="sb-block-placeholder">
<BlockPicker
{...{
on: {
'picked-block': (block: BlockDefinition) => context.emit('insert-block', block),
},
}}
/>
</div>
);
},
});

8
src/components/user/Heading/index.ts
View file

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

8
src/components/user/Image/index.ts
View file

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

10
src/components/user/Image/style.scss
View file

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

8
src/components/user/Layout/index.ts
View file

@ -1,8 +0,0 @@
import { getDefaultData } from './util';
export default {
name: 'sb-layout',
getDefaultData,
edit: () => import('./edit'),
display: () => import('./display'),
};

8
src/components/user/Paragraph/index.ts
View file

@ -1,8 +0,0 @@
import { getDefaultData } from './util';
export default {
name: 'sb-paragraph',
getDefaultData,
edit: () => import('./edit'),
display: () => import('./display'),
};

12
src/main.ts
View file

@ -1,13 +1,5 @@
import Vue from 'vue'; import { createApp } from 'vue'
import VueCompositionApi from '@vue/composition-api';
import App from './App'; import App from './App';
import './main.scss'; import './main.scss';
Vue.config.productionTip = false; createApp(App).mount('#app');
Vue.use(VueCompositionApi);
new Vue({
render: (h) => h(App),
}).$mount('#app');

44
src/shims-app.d.ts vendored
View file

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

18
src/shims-tsx.d.ts vendored
View file

@ -1,18 +0,0 @@
// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends ComponentRenderProxy {}
interface ElementAttributesProperty {
$props: any; // specify the property name to use
}
interface IntrinsicElements {
[elem: string]: any;
}
}
}

5
src/shims-vue.d.ts vendored
View file

@ -1,5 +0,0 @@
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}

36
src/store.ts
View file

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

6
tests/e2e/.eslintrc.js
View file

@ -1,6 +0,0 @@
module.exports = {
rules: {
'@typescript-eslint/no-var-requires': 'off',
'no-unused-expressions': 'off',
},
};

34
tests/e2e/custom-assertions/elementCount.js
View file

@ -1,34 +0,0 @@
/**
* A custom Nightwatch assertion. The assertion name is the filename.
*
* Example usage:
* browser.assert.elementCount(selector, count)
*
* For more information on custom assertions see:
* https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions
*
*
* @param {string|object} selectorOrObject
* @param {number} count
*/
exports.assertion = function elementCount(selectorOrObject, count) {
let selector;
// when called from a page object element or section
if (typeof selectorOrObject === 'object' && selectorOrObject.selector) {
// eslint-disable-next-line prefer-destructuring
selector = selectorOrObject.selector;
} else {
selector = selectorOrObject;
}
this.message = `Testing if element <${selector}> has count: ${count}`;
this.expected = count;
this.pass = (val) => val === count;
this.value = (res) => res.value;
function evaluator(_selector) {
return document.querySelectorAll(_selector).length;
}
this.command = (cb) => this.api.execute(evaluator, [selector], cb);
};

37
tests/e2e/custom-commands/customExecute.js
View file

@ -1,37 +0,0 @@
/**
* A very basic Nightwatch custom command. The command name is the filename and the
* exported "command" function is the command.
*
* Example usage:
* browser.customExecute(function() {
* console.log('Hello from the browser window')
* });
*
* For more information on writing custom commands see:
* https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
*
* @param {*} data
*/
exports.command = function command(data) {
// Other Nightwatch commands are available via "this"
// .execute() inject a snippet of JavaScript into the page for execution.
// the executed script is assumed to be synchronous.
//
// See https://nightwatchjs.org/api/execute.html for more info.
//
this.execute(
// The function argument is converted to a string and sent to the browser
(argData) => argData,
// The arguments for the function to be sent to the browser are specified in this array
[data],
(result) => {
// The "result" object contains the result of what we have sent back from the browser window
console.log('custom execute result:', result.value);
},
);
return this;
};

23
tests/e2e/custom-commands/openHomepage.js
View file

@ -1,23 +0,0 @@
/**
* A basic Nightwatch custom command
* which demonstrates usage of ES6 async/await instead of using callbacks.
* The command name is the filename and the exported "command" function is the command.
*
* Example usage:
* browser.openHomepage();
*
* For more information on writing custom commands see:
* https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
*
*/
module.exports = {
async command() {
// Other Nightwatch commands are available via "this"
// .init() simply calls .url() command with the value of the "launch_url" setting
this.init();
this.waitForElementVisible('#app');
const result = await this.elements('css selector', '#app ul');
this.assert.strictEqual(result.value.length, 3);
},
};

Some files were not shown because too many files have changed in this diff Show more