schlechtenburg/packages/paragraph/lib/edit.tsx

174 lines
4 KiB
TypeScript
Raw Normal View History

2020-05-20 14:21:08 +00:00
import {
2020-12-30 01:32:46 +00:00
defineComponent,
2020-05-20 14:21:08 +00:00
reactive,
2020-05-24 20:39:14 +00:00
computed,
2020-05-20 14:21:08 +00:00
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-24 20:00:14 +00:00
PropType,
2020-12-27 21:32:43 +00:00
} from 'vue';
2020-05-20 14:21:08 +00:00
import {
model,
2020-12-30 13:34:23 +00:00
useActivation,
SbToolbar,
SbSelect,
} from '@schlechtenburg/core';
2020-05-24 20:00:14 +00:00
import {
getDefaultData,
2022-03-11 17:23:14 +00:00
IParagraphData,
2020-05-24 20:39:14 +00:00
} from './util';
2020-05-24 20:00:14 +00:00
import './style.scss';
2020-05-20 14:21:08 +00:00
2020-12-30 01:32:46 +00:00
export default defineComponent({
2020-05-24 20:00:14 +00:00
name: 'sb-paragraph-edit',
2020-05-20 14:21:08 +00:00
model,
props: {
2021-03-08 15:29:35 +00:00
blockId: { type: String, required: true },
2020-05-24 20:00:14 +00:00
data: {
2022-03-11 17:23:14 +00:00
type: (null as unknown) as PropType<IParagraphData>,
2020-05-24 20:00:14 +00:00
default: getDefaultData,
},
2021-02-22 18:13:37 +00:00
onUpdate: { type: Function, default: () => {} },
onAppendBlock: { type: Function, default: () => {} },
onRemoveSelf: { type: Function, default: () => {} },
onActivateNext: { type: Function, default: () => {} },
onActivatePrevious: { type: Function, default: () => {} },
2020-05-20 14:21:08 +00:00
},
2021-03-08 15:29:35 +00:00
setup(props) {
2020-05-25 21:10:21 +00:00
const localData = (reactive({
2020-05-24 15:33:25 +00:00
value: props.data.value,
2020-05-24 20:39:14 +00:00
align: props.data.align,
2020-05-24 15:33:25 +00:00
focused: false,
2020-05-27 15:06:14 +00:00
}) as unknown) as {
2020-05-25 21:10:21 +00:00
value: string;
align: string;
focused: boolean;
};
2020-05-24 20:39:14 +00:00
2020-05-24 15:33:25 +00:00
const inputEl: Ref<null|HTMLElement> = ref(null);
const { isActive, activate } = useActivation(props.blockId);
2020-05-27 18:36:46 +00:00
const focusInput = () => {
if (inputEl.value && isActive.value) {
inputEl.value.focus();
}
};
2020-05-24 15:33:25 +00:00
onMounted(() => {
2020-05-27 18:36:46 +00:00
focusInput();
2020-05-24 15:33:25 +00:00
if (inputEl.value) {
inputEl.value.innerHTML = localData.value;
}
});
2020-05-27 18:36:46 +00:00
watch(isActive, focusInput);
2020-05-24 15:33:25 +00:00
watch(() => props.data, () => {
localData.value = props.data.value;
2020-05-24 20:39:14 +00:00
localData.align = props.data.align;
2020-05-24 15:33:25 +00:00
if (inputEl.value) {
inputEl.value.innerHTML = localData.value;
}
});
2020-05-20 14:21:08 +00:00
2021-03-08 15:29:35 +00:00
const onTextUpdate = ($event: Event) => {
2020-05-25 21:10:21 +00:00
localData.value = ($event.target as HTMLElement).innerHTML;
2020-05-20 14:21:08 +00:00
};
2020-05-24 20:39:14 +00:00
const classes = computed(() => ({
2020-05-20 14:21:08 +00:00
'sb-paragraph': true,
2020-05-24 15:33:25 +00:00
'sb-paragraph_focused': localData.focused,
2020-05-24 20:39:14 +00:00
[`sb-paragraph_align-${localData.align}`]: true,
}));
2020-05-20 14:21:08 +00:00
2020-05-25 21:10:21 +00:00
const setAlignment = ($event: Event) => {
2021-02-22 18:13:37 +00:00
props.onUpdate({
2020-05-27 15:06:14 +00:00
value: localData.value,
align: ($event.target as HTMLSelectElement).value,
});
2020-05-25 21:10:21 +00:00
};
2020-05-20 14:21:08 +00:00
const onFocus = () => {
2020-05-24 15:33:25 +00:00
localData.focused = true;
2020-05-27 15:32:35 +00:00
activate();
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;
2021-02-22 18:13:37 +00:00
props.onUpdate({
2020-05-24 15:33:25 +00:00
value: localData.value,
2020-05-27 15:06:14 +00:00
align: localData.align,
2020-05-20 14:21:08 +00:00
});
};
2020-05-28 20:16:35 +00:00
const onKeydown = ($event: KeyboardEvent) => {
2021-02-22 18:13:37 +00:00
if ($event.key === 'Enter' && !$event.shiftKey) {
2021-03-07 17:47:28 +00:00
const id = `${+(new Date())}`;
2021-02-22 18:13:37 +00:00
props.onAppendBlock({
2021-03-07 17:47:28 +00:00
id,
2020-05-24 15:33:25 +00:00
name: 'sb-paragraph',
2020-05-24 20:00:14 +00:00
data: getDefaultData(),
2020-05-24 15:33:25 +00:00
});
2020-05-20 14:21:08 +00:00
2021-03-07 17:47:28 +00:00
activate(id);
2020-05-24 15:33:25 +00:00
$event.preventDefault();
2020-05-28 20:16:35 +00:00
}
};
const onKeyup = ($event: KeyboardEvent) => {
2021-02-22 18:13:37 +00:00
if ($event.key === 'Backspace' && localData.value === '') {
props.onRemoveSelf();
}
const selection = window.getSelection();
2021-03-08 15:29:35 +00:00
const node = selection?.focusNode;
const childNodes = Array.from(inputEl?.value?.childNodes || []);
const index = node ? childNodes.indexOf(node as ChildNode) : -1;
2021-02-22 18:13:37 +00:00
if (node === inputEl.value || index === 0 || index === childNodes.length -1) {
switch ($event.key) {
case 'ArrowDown':
props.onActivateNext();
break;
case 'ArrowUp':
props.onActivatePrevious();
break;
}
2020-05-24 15:33:25 +00:00
}
};
2020-05-20 14:21:08 +00:00
2020-05-25 21:10:21 +00:00
return () => (
<div class={classes.value}>
2020-05-24 20:39:14 +00:00
<SbToolbar>
2020-05-28 20:55:03 +00:00
<SbSelect
2021-03-08 15:29:35 +00:00
{...{
value: localData.align,
onChange: setAlignment,
}}
2020-05-25 21:10:21 +00:00
>
2020-05-24 20:39:14 +00:00
<option>left</option>
<option>center</option>
<option>right</option>
2020-05-28 20:55:03 +00:00
</SbSelect>
2020-05-24 20:39:14 +00:00
</SbToolbar>
2020-05-20 14:21:08 +00:00
<p
2020-05-25 21:10:21 +00:00
class="sb-paragraph__input"
ref={inputEl}
2020-05-20 14:21:08 +00:00
contenteditable
2020-05-27 15:06:14 +00:00
onInput={onTextUpdate}
onFocus={onFocus}
onBlur={onBlur}
2020-05-28 20:16:35 +00:00
onKeydown={onKeydown}
2020-05-27 18:36:46 +00:00
onKeyup={onKeyup}
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
);
},
2020-12-30 01:32:46 +00:00
});