anyproto/anytype-ts
1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-08 05:57:02 +09:00
Code Activity

JS-7060: add svg support

Browse source
This commit is contained in:
Andrew Simachev 2025-05-26 19:20:00 +02:00
parent 819ef5c4c5
commit 2dca3d35b7
No known key found for this signature in database
GPG key ID: 1DFE44B21443F0EF
3 changed files with 29 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

16
dist/embed/iframe.html vendored
View file

@ -189,6 +189,8 @@
if (cachedHtml !== html) {
root.html(html);
cachedHtml = html;
renderLinks();
};
};
@ -244,6 +246,8 @@
};
root.html(data.div);
renderLinks();
resize();
}
});
@ -261,14 +265,18 @@
success: (data) => {
root.html(data);
root.find('a').off('click').on('click', function (e) {
e.preventDefault();
window.parent.postMessage({ type: 'openUrl', url: $(this).attr('href'), blockId }, '*');
});
renderLinks();
}
});
};
function renderLinks () {
root.find('a').off('click').on('click', function (e) {
e.preventDefault();
window.parent.postMessage({ type: 'openUrl', url: $(this).attr('href'), blockId }, '*');
});
};
function getEnvironmentContent (processor) {
const libs = [];

22
src/ts/component/block/embed.tsx
View file

@ -615,7 +615,7 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp
const onLoad = () => {
const iw = (iframe[0] as HTMLIFrameElement).contentWindow;
const sanitizeParam: any = {
ADD_TAGS: [ 'iframe' ],
ADD_TAGS: [ 'iframe', 'div', 'a' ],
ADD_ATTR: [
'frameborder', 'title', 'allow', 'allowfullscreen', 'loading', 'referrerpolicy',
],
@ -669,6 +669,8 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp
};
if (block.isEmbedDrawio()) {
sanitizeParam.ADD_TAGS.push('svg', 'a', 'foreignObject', 'switch');
allowScript = !!text.match(/https:\/\/(?:viewer|embed|app)\.diagrams\.net\/\?[^"\s>]*/);
};
@ -680,7 +682,7 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp
if (U.Embed.allowJs(processor)) {
data.js = text;
} else {
data.html = this.sanitize(text, allowScript);
data.html = DOMPurify.sanitize(text, sanitizeParam);
};
iw.postMessage(data, '*');
@ -940,22 +942,6 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp
return Math.min(1, Math.max(0, w / rect.width));
};
sanitize (text: string, allowScript: boolean): string {
const param: any = {
ADD_TAGS: [ 'iframe' ],
ADD_ATTR: [
'frameborder', 'title', 'allow', 'allowfullscreen', 'loading', 'referrerpolicy',
],
};
if (allowScript) {
param.FORCE_BODY = true;
param.ADD_TAGS.push('script');
};
return DOMPurify.sanitize(text, param);
};
resize () {
const { block } = this.props;
const { processor } = block.content;

22
src/ts/lib/util/embed.ts
View file

@ -84,7 +84,7 @@ class UtilEmbed {
};
getDrawioHtml (content: string): string {
return `<iframe src="${content}" ${IFRAME_PARAM}></iframe>`;
return content.match(/^<svg/) ? content : `<iframe src="${content}" ${IFRAME_PARAM}></iframe>`;
};
getImageHtml (content: string): string {
@ -235,14 +235,17 @@ class UtilEmbed {
};
case I.EmbedProcessor.Drawio: {
const u = new URL(url);
const allowedHosts = ['viewer.diagrams.net', 'embed.diagrams.net', 'app.diagrams.net', 'draw.io'];
if (allowedHosts.includes(u.hostname)) {
// Edit mode cannot be opened at this time
u.searchParams.delete('edit');
url = u.toString();
};
try {
const u = new URL(url);
const allowedHosts = [ 'viewer.diagrams.net', 'embed.diagrams.net', 'app.diagrams.net', 'draw.io' ];
if (allowedHosts.includes(u.hostname)) {
// Edit mode cannot be opened at this time
u.searchParams.delete('edit');
url = u.toString();
};
} catch (e) { /**/ };
break;
};
@ -395,6 +398,7 @@ class UtilEmbed {
I.EmbedProcessor.Kroki,
I.EmbedProcessor.Chart,
I.EmbedProcessor.Image,
I.EmbedProcessor.Drawio,
].includes(p);
};