import { defineComponent, reactive, computed, ref, Ref, onMounted, watch, PropType, } from 'vue'; import { model, blockProps, BlockProps, BlockData, useActivation, SbToolbar, SbSelect, } from '@schlechtenburg/core'; import { getDefaultData, ParagraphData, } from './util'; import './style.scss'; interface ParagraphProps extends BlockProps { data: ParagraphData; eventUpdate: (b?: ParagraphData) => void; eventAppendBlock: (b?: BlockData) => void; eventRemoveBlock: () => void; } export default defineComponent({ name: 'sb-paragraph-edit', model, props: { ...blockProps, data: { type: (null as unknown) as PropType, default: getDefaultData, }, eventUpdate: { type: Function, default: () => {} }, eventAppendBlock: { type: Function, default: () => {} }, eventRemoveBlock: { type: Function, default: () => {} }, }, setup(props: ParagraphProps) { const localData = (reactive({ value: props.data.value, align: props.data.align, focused: false, }) as unknown) as { value: string; align: string; focused: boolean; }; const inputEl: Ref = ref(null); const { isActive, activate } = useActivation(props.blockId); const focusInput = () => { if (inputEl.value && isActive.value) { inputEl.value.focus(); } }; onMounted(() => { focusInput(); if (inputEl.value) { inputEl.value.innerHTML = localData.value; } }); watch(isActive, focusInput); watch(() => props.data, () => { localData.value = props.data.value; localData.align = props.data.align; if (inputEl.value) { inputEl.value.innerHTML = localData.value; } }); const onTextUpdate = ($event: InputEvent) => { localData.value = ($event.target as HTMLElement).innerHTML; }; const classes = computed(() => ({ 'sb-paragraph': true, 'sb-paragraph_focused': localData.focused, [`sb-paragraph_align-${localData.align}`]: true, })); const setAlignment = ($event: Event) => { props.eventUpdate({ value: localData.value, align: ($event.target as HTMLSelectElement).value, }); }; const onFocus = () => { localData.focused = true; activate(); }; const onBlur = () => { localData.focused = false; props.eventUpdate({ value: localData.value, align: localData.align, }); }; const onKeydown = ($event: KeyboardEvent) => { if (props.eventAppendBlock && $event.key === 'Enter' && !$event.shiftKey) { const blockId = `${+(new Date())}`; props.eventAppendBlock({ blockId, name: 'sb-paragraph', data: getDefaultData(), }); activate(blockId); $event.preventDefault(); } }; const onKeyup = ($event: KeyboardEvent) => { if (props.eventRemoveBlock && $event.key === 'Backspace' && localData.value === '') { props.eventRemoveBlock(); } }; return () => (

); }, });