91 lines
1.6 KiB
TypeScript
91 lines
1.6 KiB
TypeScript
|
import {
|
||
|
defineComponent,
|
||
|
reactive,
|
||
|
ref,
|
||
|
onMounted,
|
||
|
} from '@vue/composition-api';
|
||
|
import {
|
||
|
model,
|
||
|
treeElementProps,
|
||
|
useTree,
|
||
|
} 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>
|
||
|
);
|
||
|
},
|
||
|
});
|