schlechtenburg/src/components/user/Paragraph.tsx

91 lines
1.6 KiB
TypeScript
Raw Normal View History

2020-05-20 14:21:08 +00:00
import {
defineComponent,
reactive,
ref,
onMounted,
} from '@vue/composition-api';
import {
model,
treeElementProps,
2020-05-20 17:12:51 +00:00
useDynamicComponents,
2020-05-20 14:21:08 +00:00
} from '@components/TreeElement';
import SbBlock from '@internal/Block';
import SbToolbar from '@internal/Toolbar';
import './Paragraph.scss';
export default defineComponent({
name: 'sb-paragraph',
model,
props: {
...treeElementProps,
},
setup(props, context) {
const { localTree } = useTree(props);
const onTextUpdate = ($event: InputEvent) => {
localTree.value = $event.target.innerHTML;
};
const focused = ref(false);
const classes = reactive({
'sb-paragraph': true,
'sb-paragraph_focused': focused,
});
const onFocus = () => {
console.log('focus');
focused.value = true;
};
const onBlur = () => {
console.log('blur');
focused.value = false;
context.emit('tree', {
value: localTree.value.value,
});
};
const inputEl = ref(null);
onMounted(() => {
console.log(inputEl);
inputEl.value.innerHTML = localTree.value;
});
return {
classes,
localTree,
onTextUpdate,
focused,
onFocus,
onBlur,
inputEl,
};
},
render() {
return (
<SbBlock>
<SbToolbar>Paragraph editing</SbToolbar>
<p
class={this.classes}
ref="inputEl"
contenteditable
{...{
on: {
input: this.onTextUpdate,
focus: this.onFocus,
blur: this.onBlur,
},
}}
></p>
</SbBlock>
);
},
});