import { defineComponent, reactive, ref, Ref, watch, PropType, } from 'vue'; import { model, SbToolbar, SbButton, SbBlock, IBlockData, OnUpdateSelfCb, } from '@schlechtenburg/core'; import { IParagraphData } from '@schlechtenburg/paragraph'; import { getDefaultData, IImageData, } from './util'; import './style.scss'; export default defineComponent({ name: 'sb-image-edit', model, props: { onUpdate: { type: (null as unknown) as PropType>, default: () => {}, }, data: { type: (null as unknown) as PropType, default: getDefaultData, }, }, setup(props) { const localData = reactive({ src: props.data.src, alt: props.data.alt, description: props.data.description, }); const fileInput: Ref = ref(null); watch(() => props.data, () => { localData.src = props.data.src; localData.alt = props.data.alt; localData.description = props.data.description; }); const selectImage = () => { if (fileInput.value) { fileInput.value.click(); } }; const onImageSelect = () => { if (fileInput.value && fileInput.value.files && fileInput.value.files.length) { const reader = new FileReader(); reader.addEventListener('load', () => { const src = reader?.result?.toString(); if (!src) { throw new Error('Couldn\'t load image src'); } props.onUpdate({ src, alt: props.data.alt, description: props.data.description, }); }); reader.readAsDataURL(fileInput.value.files[0]); } }; const onDescriptionUpdate = (description: IBlockData) => { props.onUpdate({ ...props.data, description, }); }; return () => (
{localData.src ? Select Image : null} {localData.src ? <> {localData.alt} ) => onDescriptionUpdate(updated)} /> : Select Image }
); }, });