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

56 lines
1.2 KiB
TypeScript

import debounce from 'lodash/debounce';
import {
defineComponent,
watch,
reactive,
} from 'vue';
import { useBlockSizing } from '../use-resize-observer';
import './Toolbar.scss';
/**
* Toolbar in the schlechtenburg theme
* @sbui
*/
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()}
>
{
/**
* The toolbar contents
* @slot default
*/
context.slots.default?.()
}
</div>
);
},
});