schlechtenburg/src/components/user/Paragraph.tsx

126 lines
2.4 KiB
TypeScript
Raw Normal View History

2020-05-20 14:21:08 +00:00
import {
defineComponent,
reactive,
ref,
2020-05-24 15:33:25 +00:00
Ref,
2020-05-20 14:21:08 +00:00
onMounted,
2020-05-24 15:33:25 +00:00
watch,
2020-05-20 14:21:08 +00:00
} from '@vue/composition-api';
import {
model,
2020-05-24 15:33:25 +00:00
blockProps,
BlockProps,
useActivation,
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: {
2020-05-24 15:33:25 +00:00
...blockProps,
2020-05-20 14:21:08 +00:00
},
2020-05-24 15:33:25 +00:00
setup(props: BlockProps, context) {
const localData = reactive({
value: props.data.value,
focused: false,
});
const inputEl: Ref<null|HTMLElement> = 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;
}
});
2020-05-20 14:21:08 +00:00
const onTextUpdate = ($event: InputEvent) => {
2020-05-24 15:33:25 +00:00
localData.value = $event.target.innerHTML;
2020-05-20 14:21:08 +00:00
};
const classes = reactive({
'sb-paragraph': true,
2020-05-24 15:33:25 +00:00
'sb-paragraph_focused': localData.focused,
2020-05-20 14:21:08 +00:00
});
const onFocus = () => {
2020-05-24 15:33:25 +00:00
localData.focused = true;
2020-05-20 14:21:08 +00:00
};
2020-05-24 15:33:25 +00:00
2020-05-20 14:21:08 +00:00
const onBlur = () => {
2020-05-24 15:33:25 +00:00
localData.focused = false;
context.emit('update', {
value: localData.value,
2020-05-20 14:21:08 +00:00
});
2020-05-24 15:33:25 +00:00
activate(null);
2020-05-20 14:21:08 +00:00
};
2020-05-24 15:33:25 +00:00
const onKeypress = ($event: KeyboardEvent) => {
if ($event.key === 'Enter') {
const blockId = +(new Date());
context.emit('insert-block', {
blockId,
name: 'sb-paragraph',
data: { value: '' },
});
2020-05-20 14:21:08 +00:00
2020-05-24 15:33:25 +00:00
activate(blockId);
$event.preventDefault();
}
};
2020-05-20 14:21:08 +00:00
return {
classes,
2020-05-24 15:33:25 +00:00
localData,
2020-05-20 14:21:08 +00:00
onTextUpdate,
onFocus,
onBlur,
2020-05-24 15:33:25 +00:00
onKeypress,
2020-05-20 14:21:08 +00:00
inputEl,
};
},
render() {
2020-05-24 15:33:25 +00:00
console.log('render paragraph');
2020-05-20 14:21:08 +00:00
return (
2020-05-24 15:33:25 +00:00
<div class="sb-paragraph">
2020-05-20 14:21:08 +00:00
<SbToolbar>Paragraph editing</SbToolbar>
<p
class={this.classes}
ref="inputEl"
contenteditable
{...{
on: {
input: this.onTextUpdate,
focus: this.onFocus,
blur: this.onBlur,
2020-05-24 15:33:25 +00:00
keypress: this.onKeypress,
2020-05-20 14:21:08 +00:00
},
}}
></p>
2020-05-24 15:33:25 +00:00
</div>
2020-05-20 14:21:08 +00:00
);
},
});