Редактор Quill не добавляет атрибут выравнивания изображения ⇐ Javascript

[Anonymous]

У меня есть экземпляр редактора quill внутри компонента vue. Вроде все работало нормально, пока не решило больше не работать. Я заметил проблему в ветке, где внес довольно много изменений в компонент, но понял, что даже в мастере (в состоянии до каких-либо моих изменений) проблема существует. Проблема, с которой я столкнулся, заключается в том, что после добавления изображения я изменяю его размер, выравниваю по центру, в редакторе все выглядит хорошо, но при отправке в json контента нет дельта-элемента с атрибутом align.

Вот как я настраиваю этот экземпляр quill:

Код: Выделить всё

Quill.register('modules/imageDropAndPaste', QuillImageDropAndPaste);
Quill.register('modules/blotFormatter', BlotFormatter);

const custom = ref(['link', 'image', 'video']);
if (props.customToolbar) {
custom.value = ['link', 'video'];
}
const toolbarOptions = [
[{ header: [1, 2, 3, 4, false] }],
[{ size: ['small', false, 'large', 'huge'] }],
['bold', 'underline', 'italic', 'strike'],
[{ align: [] }],
[{ list: 'bullet' }],
[{ list: 'ordered' }],
[{ color: ['#715192', '#52B99E', '#F45E54', '#009BDF', '#FFB81D', '#FE5F8A', '#36558E', '#F4F4F4', '#8D8C8C', '#464646', '#A282C3', '#A3E3D2', '#FFB2AD', '#A3D8E3'] }, { background: ['#715192', '#52B99E', '#F45E54', '#009BDF', '#FFB81D', '#FE5F8A', '#36558E', '#F4F4F4', '#8D8C8C', '#464646', '#A282C3', '#A3E3D2', '#FFB2AD', '#A3D8E3'] }],
['blockquote', 'code-block'],
[{ script: 'sub' }, { script: 'super' }],
custom.value
];

const commentToolbar = [
['bold', 'underline', 'italic'],
[{ list: 'bullet' }],
[{ color: ['#715192', '#52B99E', '#F45E54', '#009BDF', '#FFB81D', '#FE5F8A', '#36558E', '#F4F4F4', '#8D8C8C', '#464646', '#A282C3', '#A3E3D2', '#FFB2AD', '#A3D8E3'] }, { background: ['#715192', '#52B99E', '#F45E54', '#009BDF', '#FFB81D', '#FE5F8A', '#36558E', '#F4F4F4', '#8D8C8C', '#464646', '#A282C3', '#A3E3D2', '#FFB2AD', '#A3D8E3'] }],
['link']
];

const editor = ref(null);
let quill = null;

const setupQuill = () => {
const modules = {
toolbar: { container: props.comment ? commentToolbar : toolbarOptions },
imageDropAndPaste: {}
};

if (!props.readOnly) {
modules.blotFormatter = {};
}

quill = new Quill(editor.value, {
modules,
theme: 'snow',
readOnly: props.readOnly,
placeholder: props.placeholder
});

quill.on('text-change', () => {
emit('update:modelValue', JSON.stringify(quill.getContents()));
});

if (props.twoWayBinding) {
watch(() => props.modelValue, (newVal) => {
if (!quill) return;
const current = JSON.stringify(quill.getContents());

if (newVal && newVal !== current) {
quill.setContents(JSON.parse(newVal));
}
});
}

quill.getModule('toolbar').addHandler('image', () => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = async () => {
const file = input.files[0];
if (file) {
const previewUrl = URL.createObjectURL(file);

const range = quill.getSelection();
quill.insertEmbed(range.index, 'image', previewUrl, 'user');

//some more logic here
}
};
});

if (props.modelValue) {
quill.setContents(JSON.parse(props.modelValue));
}
};

onMounted(() => {
const BaseImage = Quill.import('formats/image');

class ImageBlot extends BaseImage {
static sanitize(url) {
if (url.startsWith('blob:')) return url;
return super.sanitize(url);
}
}

Quill.register(ImageBlot, true);
if (editor.value) {
setupQuill();
}
});

Насколько я понимаю, чтобы Quill правильно прочитал положение изображения, его необходимо установить на уровне блока (и вот как оно выглядело до того, как возникла проблема), примерно так:

Код: Выделить всё

{ insert: {image: "url"} }
{ attributes: { align: "center" }, insert: "\n"  }

А у меня выглядит вот так:

Код: Выделить всё

[
{
"attributes": {
"height": "375.6024516480523",
"width": "465"
},
"insert": {
"image": "url"
}
},
{
"insert": "\n"
}
]

Он вставляет новую строку без атрибута align.
chatgpt предположил, что проблема может заключаться в том, что модули несовместимы с моей версией quill:

Код: Выделить всё

 "quill": "^2.0.2",
"quill-blot-formatter": "^1.0.5",
"quill-image-drop-and-paste": "^1.3.0",

Это справедливо, но раньше это работало, зависимость не обновлялась. Вчера та же установка работала, сегодня решила нет .

Подробнее здесь: https://stackoverflow.com/questions/798 ... -attribute