Skip to content
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.

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

Paste/Insert Image according to the visible viewport #2126

Merged
merged 12 commits into from
Oct 6, 2023

Conversation

juliaroldi
Copy link
Contributor

@juliaroldi juliaroldi commented Oct 5, 2023

When insert or paste image, add max height/width to the image, so large images can be resized to the size of the editor.
adaptImageSize

/**
* Images inserted in the editor that needs to have their size adjusted
*/
readonly images?: ContentModelImage[];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make it required?

@@ -130,3 +132,16 @@ function handleDeletedEntities(
}
);
}

function handleImages(editor: IContentModelEditor, context: FormatWithContentModelContext) {
const viewport = editor.getVisibleViewport();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this line inside "if" since we don't need it if there is no image


function handleImages(editor: IContentModelEditor, context: FormatWithContentModelContext) {
const viewport = editor.getVisibleViewport();
if (viewport && context.images) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also check images.length > 0.

For empty array, no need to do anything

const viewport = editor.getVisibleViewport();
if (viewport && context.images) {
const { top, bottom, left, right } = viewport;
const maxWidth = right - left;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better have a minimum value such as 10, to avoid it to be 0 or negitve number

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const minMaxImageSize = 10;

maxWidth = Math.max(right-left, minMaxImageSize)

/**
* Images inserted in the editor that needs to have their size adjusted
*/
readonly images: ContentModelImage[];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest name it "newImages". Because we don't put existing images into it.

@juliaroldi juliaroldi merged commit 9b6b52b into master Oct 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants