schlechtenburg/packages/core/lib/components/Main.tsx

159 lines
3.9 KiB
TypeScript

import {
defineComponent,
provide,
shallowReactive,
shallowRef,
ref,
watch,
computed,
Transition,
PropType,
Ref,
} from 'vue';
import {
IBlockData,
IBlockDefinition,
IBlockLibrary,
ITreeNode,
OnUpdateBlockCb,
IFormattingTool,
IFormattingToolLibrary,
} from '../types';
import { model } from '../block-helpers';
import { SymMode, 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 { SymRootElement } from '../use-root-element';
import {
SbFormattingToolbar,
SymFormattingToolLibrary,
SymFormattingToolbarClients,
SymFormattingToolbarActiveClient,
} from '../rich-text';
import { SbMainMenu } from './MainMenu';
import { SbBlock } from './Block';
export interface ISbMainProps {
availableBlocks: IBlockDefinition<any>[];
availableFormattingTools: IFormattingTool[];
block: IBlockData<any>;
eventUpdate: OnUpdateBlockCb;
mode: SbMode;
}
import './Main.scss';
export const SbMain = defineComponent({
name: 'sb-main',
model,
props: {
availableBlocks: {
type: Array as PropType<IBlockDefinition<any>[]>,
default: () => [],
},
availableFormattingTools: {
type: Array as PropType<IFormattingTool[]>,
default: () => [],
},
block: {
type: Object as PropType<IBlockData<any>>,
required: true,
},
/**
* Called when the block should be updated.
*/
eventUpdate: {
type: (null as unknown) as PropType<OnUpdateBlockCb>,
default: () => {},
},
mode: {
type: String as PropType<SbMode>,
validator(value: any) {
return Object.values(SbMode).includes(value);
},
default: SbMode.Edit,
},
},
setup(props: ISbMainProps) {
const el: Ref<null|HTMLElement> = ref(null);
useResizeObserver(el, SymEditorDimensions);
provide(SymRootElement, el);
const inlineClients = shallowRef([]);
provide(SymFormattingToolbarClients, inlineClients);
provide(SymFormattingToolbarActiveClient, ref(null));
const mode = ref(props.mode);
provide(SymMode, mode);
watch(() => props.mode, (newMode) => {
mode.value = newMode;
});
const classes = computed(() => ({
'sb-main': true,
[`sb-main_${mode.value}`]: true,
}));
const activeBlock = ref(null);
provide(SymActiveBlock, activeBlock);
const blockTree: Ref<ITreeNode|null> = ref(null);
provide(SymBlockTree, blockTree);
provide(SymBlockTreeRegister, (block: ITreeNode) => { blockTree.value = block; });
provide(SymBlockTreeUnregister, () => { blockTree.value = null; });
const blockLibrary: IBlockLibrary = shallowReactive({
...props.availableBlocks.reduce(
(blocks: IBlockLibrary, block: IBlockDefinition<any>) => ({ ...blocks, [block.name]: block }),
{},
),
});
provide(SymBlockLibrary, blockLibrary);
const inlineToolLibrary: IFormattingToolLibrary = shallowReactive({
...props.availableFormattingTools.reduce(
(tools: IFormattingToolLibrary, tool: IFormattingTool) => ({ ...tools, [tool.name]: tool }),
{},
),
});
provide(SymFormattingToolLibrary, inlineToolLibrary);
return () => (
<div
class={classes.value}
ref={el}
>
<Transition
name="sb-main--menu"
mode="out-in"
>
{mode.value === SbMode.Edit
? <SbMainMenu
block={props.block}
class="sb-main--menu"
/>
: null}
</Transition>
<SbBlock
class="sb-main--block"
block={props.block}
eventUpdate={props.eventUpdate}
/>
<SbFormattingToolbar />
</div>
);
},
});