Skip to content

feat: use media route #588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kptdobe wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: use media route #588

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1ba38ca
feat: use media route
kptdobe Oct 2, 2025
adaa0e7
Merge branch 'main' into media
kptdobe Oct 2, 2025
8a147d5
feat: show dialog in case of error
kptdobe Oct 2, 2025
d2005ae
Merge branch 'main' into media
kptdobe Mar 4, 2026
6b534d0
chore: error handling
kptdobe Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 37 additions & 5 deletions blocks/edit/prose/plugins/imageDrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,21 @@ import { daFetch } from '../../../shared/utils.js';
const FPO_IMG_URL = '/blocks/edit/img/fpo.svg';
const SUPPORTED_FILES = ['image/svg+xml', 'image/png', 'image/jpeg', 'image/gif'];

async function renderError(message) {
await import('../../../shared/da-dialog/da-dialog.js');
const dialog = document.createElement('da-dialog');
dialog.title = 'Error';
dialog.message = message;
dialog.action = {
style: 'accent',
label: 'OK',
click: async () => { dialog.close(); },
};
const main = document.body.querySelector('main');
main.insertAdjacentElement('afterend', dialog);
dialog.showModal();
}

export default function imageDrop(schema) {
return new Plugin({
props: {
Expand All @@ -25,25 +40,42 @@ export default function imageDrop(schema) {
const { $from } = view.state.selection;

const details = getPathDetails();
const url = `${details.origin}/source${details.parent}/.${details.name}/${file.name}`;
const url = `${details.origin}/media${details.parent}/${file.name}`;

const formData = new FormData();
formData.append('data', file);
const opts = { method: 'PUT', body: formData };
const opts = { method: 'POST', body: formData };
const resp = await daFetch(url, opts);
if (!resp.ok) return;
if (!resp.ok) {
const fpoSelection = TextSelection.create(view.state.doc, $from.pos - 1, $from.pos);
const ts = view.state.tr.setSelection(fpoSelection);
view.dispatch(ts.deleteSelection().scrollIntoView());

if (resp.status === 413) {
renderError('Image size exceeds 20MB limit');
} else {
const json = await resp.json();
if (json.error) {
renderError(`Failed to upload image: ${json.error}`);
} else {
renderError(`Failed to upload image: ${json.message}`);
}
}

return;
}
const json = await resp.json();

// Create a doc image to pre-download the image before showing it.
const docImg = document.createElement('img');
docImg.addEventListener('load', () => {
const fpoSelection = TextSelection.create(view.state.doc, $from.pos - 1, $from.pos);
const ts = view.state.tr.setSelection(fpoSelection);
const img = schema.nodes.image.create({ src: json.source.contentUrl });
const img = schema.nodes.image.create({ src: json.uri });
const tr = ts.replaceSelectionWith(img).scrollIntoView();
view.dispatch(tr);
});
docImg.src = json.source.contentUrl;
docImg.src = json.uri;
});
},
},
Expand Down
Loading