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>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|