Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
72 changes: 71 additions & 1 deletion src/extensions/yfm/ImgSize/ImagePaste/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,15 @@ import type {FileUploadHandler} from '../../../../utils';
import {clipboardUtils} from '../../../behavior/Clipboard';
import {DataTransferType} from '../../../behavior/Clipboard/utils';
import {ImageAttr, ImgSizeAttr, imageType} from '../../../specs';
import {type CreateImageNodeOptions, isImageNode} from '../utils';
import {
type CreateImageNodeOptions,
checkSvg,
findImageNode,
getImageSize,
getImageSizeNew,
isImageNode,
loadImageFromUrl,
} from '../utils';

import {ImagesUploadProcess} from './upload';

Expand Down Expand Up @@ -82,15 +90,77 @@ export const ImagePaste: ExtensionAuto<ImagePasteOptions> = (builder, opts) => {

e.preventDefault();

const isSvg = checkSvg(imageUrl);

const trackingId = `img-${Math.random().toString(36).slice(2)}`;

const imageNode = imageType(view.state.schema).create({
src: imageUrl,
alt: title,
id: trackingId,
});

const tr = view.state.tr.replaceSelectionWith(imageNode);
view.dispatch(tr.scrollIntoView());
logger.event({event: 'paste-url-as-image'});

loadImageFromUrl(imageUrl)
.then((img) =>
opts?.enableNewImageSizeCalculation || isSvg
? getImageSizeNew(img)
: getImageSize(img),
)
.then(
(sizes: {
[ImgSizeAttr.Height]?: string;
[ImgSizeAttr.Width]?: string;
}) => {
const currentState = view.state;

const imageResult = findImageNode(
currentState.doc,
trackingId,
);

if (imageResult === null) {
logger.error({
event: 'img-node-not-found',
trackingId,
});
return;
}

const {pos: targetPos} = imageResult;

const updateTr = currentState.tr
.setNodeAttribute(
targetPos,
ImgSizeAttr.Height,
sizes.height,
)
.setNodeAttribute(
targetPos,
ImgSizeAttr.Width,
sizes.width,
)
.setNodeAttribute(targetPos, 'id', null);

view.dispatch(updateTr);

logger.event({
event: 'img-dimensions-updated',
position: targetPos,
sizes,
});
},
)
.catch((error) => {
logger.error({
event: 'img-dimensions-load-failed',
error: error.message,
});
});

return true;
}

Expand Down
1 change: 1 addition & 0 deletions src/extensions/yfm/ImgSize/ImgSizeSpecs/const.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export const ImgSizeAttr = {
Width: ImsizeAttr.Width,
Height: ImsizeAttr.Height,
Loading: 'loading',
Id: 'id',
} as const;
4 changes: 4 additions & 0 deletions src/extensions/yfm/ImgSize/ImgSizeSpecs/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type ImsizeTypedAttributes = {
[ImgSizeAttr.Width]: string | null;
[ImgSizeAttr.Height]: string | null;
[ImgSizeAttr.Loading]: string | null;
[ImgSizeAttr.Id]: string | null;
};

export {ImgSizeAttr};
Expand All @@ -40,6 +41,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
[ImgSizeAttr.Height]: {default: null},
[ImgSizeAttr.Width]: {default: null},
[ImgSizeAttr.Loading]: {default: null},
[ImgSizeAttr.Id]: {default: null},
},
placeholder: placeholderContent ? {content: placeholderContent} : opts.placeholder,
group: 'inline',
Expand All @@ -60,6 +62,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
),
[ImgSizeAttr.Height]: isNumber(height) ? height : null,
[ImgSizeAttr.Width]: isNumber(width) ? height : null,
[ImgSizeAttr.Id]: (dom as Element).getAttribute(ImgSizeAttr.Id),
};
},
},
Expand All @@ -79,6 +82,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
[ImgSizeAttr.Width]: tok.attrGet(ImgSizeAttr.Width),
[ImgSizeAttr.Loading]: tok.attrGet(ImgSizeAttr.Loading),
[ImgSizeAttr.Alt]: tok.children?.[0]?.content || null,
[ImgSizeAttr.Id]: tok.attrGet(ImgSizeAttr.Id),
}),
},
},
Expand Down
28 changes: 28 additions & 0 deletions src/extensions/yfm/ImgSize/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const createImageNode =
[ImgSizeAttr.Src]: result.url,
[ImgSizeAttr.Alt]: result.name ?? file.name,
};

if (opts.needDimensions) {
try {
const sizes = await loadImage(file).then(
Expand All @@ -49,6 +50,15 @@ export async function loadImage(imgFile: File) {
});
}

export async function loadImageFromUrl(url: string): Promise<HTMLImageElement> {
return new Promise<HTMLImageElement>((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = (_e, _s, _l, _c, error) => reject(error);
img.src = url;
});
}

export function getImageSize(img: HTMLImageElement): {[ImgSizeAttr.Height]?: string} {
return {height: String(Math.min(IMG_MAX_HEIGHT, img.height))};
}
Expand All @@ -64,3 +74,21 @@ export function getImageSizeNew({width, height}: HTMLImageElement): {
});
return {width: String(size.width), height: String(size.height)};
}

export function checkSvg(imageUrl?: string) {
return imageUrl && (/\.svg($|\?|#)/i.test(imageUrl) || imageUrl.startsWith('data:image/svg'));
}

export function findImageNode(doc: Node, id: string): {node: Node; pos: number} | null {
let result: {node: Node; pos: number} | null = null;

doc.descendants((node, pos) => {
if (isImageNode(node) && node.attrs.id === id) {
result = {node, pos};
return false;
}
return true;
});

return result;
}
Loading