tinymce / tinymce

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
https://www.tiny.cloud
Other
15.06k stars 2.24k forks source link

Can't Set Dimensions of Custom Image Upload #8838

Open machineghost opened 1 year ago

machineghost commented 1 year ago

What is the current behavior? Describe the bug

Inside my file_picker_callback I upload the file to my server, and the server returns the new location of the file, as well as its dimensions:

const file_picker_callback = async (callback, value, meta) => {
  // Not featured: code to get the image from the form data
  const response = await fetch(uploadUrl, { body: formData, method: 'post' });
  const { height, width, location } = await response.json();

When I then invoke the callback function with the new image location and those dimensions:

  callback(`/images/${location}`, { height, width, title: file.name });

the image part works (ie. the "Source" field gets populated with the new location), but the dimension info gets lost: the "width" and "height" fields are not populated.

It seems like the most logical way to provide these values is through that second callback argument, but if there is some other way, I couldn't find it in the documentation.

Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tiny.cloud or similar.

Since this involves uploading images to a server, and I can't provide a minimal demo server, this isn't possible. However, it should do the same thing when invoking any file_picker_callback with width/height in the second argument.

What is the expected behavior?

The width and height fields should be populated with the provided dimensions.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

This is the first version of TinyMCE I have ever used, so I don't know about previous versions. My package.json entry for the library is:

"@tinymce/tinymce-react": "^4.3.0",

Final Note

If I'm not just missing existing functionality, and this functionality actually doesn't exist, I'd be happy to submit a PR ... if a maintainer is interested in accepting it.

machineghost commented 1 year ago

I found this line of DialogUpdateTest:

callback('https://www.google.com/logos/google.jpg', { width: '200' });

It certainly seemed to suggest that I should be able to pass the width, so I tried changing my code to:

callback(`/images/${location}`, { height: height + '', width: width + '', title: file.name });

and ... it worked! So it seems like the only actual bugs here are:

  1. When given a numeric width/height, the code discards it (instead it should simply coerce the values into strings)
  2. None of this is documented

Again, I'd be happy to file a PR correcting those two.

tiny-stale-bot commented 5 months ago

This issue is stale because it has been open 365 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 30 days.

machineghost commented 5 months ago

Again, I'd be happy to file a PR correcting those two.