binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: escape markdown content for images (#6096)

Browse source
This commit is contained in:
Aaryan Khandelwal 2024-12-02 13:36:12 +05:30 • committed by GitHub
parent 5150c661ab
commit fc52936024
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

13
packages/editor/src/core/extensions/custom-image/custom-image.ts
View file

@ -1,11 +1,9 @@
import { Editor, mergeAttributes } from "@tiptap/core"; import { Editor, mergeAttributes } from "@tiptap/core";
import { Image } from "@tiptap/extension-image"; import { Image } from "@tiptap/extension-image";
import { MarkdownSerializerState } from "@tiptap/pm/markdown";
import { Node } from "@tiptap/pm/model";
import { ReactNodeViewRenderer } from "@tiptap/react"; import { ReactNodeViewRenderer } from "@tiptap/react";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
// extensions // extensions
import { CustomImageNode, ImageAttributes } from "@/extensions/custom-image"; import { CustomImageNode } from "@/extensions/custom-image";
// plugins // plugins
import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image"; import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image";
// types // types
@ -126,14 +124,9 @@ export const CustomImageExtension = (props: TFileHandler) => {
deletedImageSet: new Map<string, boolean>(), deletedImageSet: new Map<string, boolean>(),
uploadInProgress: false, uploadInProgress: false,
maxFileSize, maxFileSize,
// escape markdown for images
markdown: { markdown: {
serialize(state: MarkdownSerializerState, node: Node) { serialize() {},
const attrs = node.attrs as ImageAttributes;
const imageSource = state.esc(this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src);
const imageWidth = state.esc(attrs.width?.toString());
state.write(`<img src="${state.esc(imageSource)}" width="${imageWidth}" />`);
state.closeBlock(node);
},
}, },
}; };
}, },

13
packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
View file

@ -1,10 +1,8 @@
import { mergeAttributes } from "@tiptap/core"; import { mergeAttributes } from "@tiptap/core";
import { Image } from "@tiptap/extension-image"; import { Image } from "@tiptap/extension-image";
import { MarkdownSerializerState } from "@tiptap/pm/markdown";
import { Node } from "@tiptap/pm/model";
import { ReactNodeViewRenderer } from "@tiptap/react"; import { ReactNodeViewRenderer } from "@tiptap/react";
// components // components
import { CustomImageNode, ImageAttributes, UploadImageExtensionStorage } from "@/extensions/custom-image"; import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
// types // types
import { TFileHandler } from "@/types"; import { TFileHandler } from "@/types";
@ -54,14 +52,9 @@ export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAsset
addStorage() { addStorage() {
return { return {
fileMap: new Map(), fileMap: new Map(),
// escape markdown for images
markdown: { markdown: {
serialize(state: MarkdownSerializerState, node: Node) { serialize() {},
const attrs = node.attrs as ImageAttributes;
const imageSource = state.esc(this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src);
const imageWidth = state.esc(attrs.width?.toString());
state.write(`<img src="${state.esc(imageSource)}" width="${imageWidth}" />`);
state.closeBlock(node);
},
}, },
}; };
}, },