import { defineComponent, reactive, ref, Ref, onMounted, watch, PropType, } from '@vue/composition-api'; import { model, blockProps, useActivation, } from '@components/TreeElement'; import { getDefaultData, ParagraphData, ParagraphProps, } from './util.ts'; import SbToolbar from '@internal/Toolbar'; import './style.scss'; export default defineComponent({ name: 'sb-paragraph-edit', model, props: { ...blockProps, data: { type: (null as unknown) as PropType, default: getDefaultData, }, }, setup(props: ParagraphProps, context) { const localData = reactive({ value: props.data.value, focused: false, }); const inputEl: Ref = ref(null); const { isActive, activate } = useActivation(props.blockId); onMounted(() => { if (inputEl.value) { inputEl.value.innerHTML = localData.value; if (isActive) { inputEl.value.focus(); } } }); watch(() => props.data, () => { localData.value = props.data.value; if (inputEl.value) { inputEl.value.innerHTML = localData.value; } }); const onTextUpdate = ($event: InputEvent) => { localData.value = $event.target.innerHTML; }; const classes = reactive({ 'sb-paragraph': true, 'sb-paragraph_focused': localData.focused, }); const onFocus = () => { localData.focused = true; }; const onBlur = () => { localData.focused = false; context.emit('update', { value: localData.value, }); activate(null); }; const onKeypress = ($event: KeyboardEvent) => { if ($event.key === 'Enter') { const blockId = +(new Date()); context.emit('insert-block', { blockId, name: 'sb-paragraph', data: getDefaultData(), }); activate(blockId); $event.preventDefault(); } }; return { classes, localData, onTextUpdate, onFocus, onBlur, onKeypress, inputEl, }; }, render() { console.log('render paragraph'); return (
Paragraph editing

); }, });