mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 06:33:55 +08:00
2ae913f45e
`escape` from `pretty-text/sanitizer` is a re-export of the same
function defined in `discourse-common`. Updating the import paths
across the codebase to use the `discourse-common` import path.
`escape` is a rather simple function that can be accomplished with
a regular expression in `discourse-common`.
On the other hand, the remaining parts in `pretty-text/sanitizer`
has a lot of code, PLUS it depend on the rather heavy "xss" NPM
library.
Currently, most of the consumers of `pretty-text/sanitizer` are of
the `{ escape }` varient. This is resolved by this PR.
The remaining usages are either:
1. via/through `PrettyText` which is essentially gated behind
loading the markdown-it bundle, OR
2. via `sanitize` from `discourse/lib/text`
I believe we may ultimately be able to move all the usages to behind
the markdown-it bundle (or, equivilantly, set up another lazy bundle
for `sanitize`) and be able to shed the sanitization code and the
"xss" library from the initial page load.
`discourse/lib/text` also defines a `sanitizeAsync` which is gated
behind loading the markdown-it bundle.
Looking through the usages of `sanitize`, I believe most of these
can be safely switched to use `sanitizeAsync`, in that they are
already in an asynchrnous path that handles a server response. Most
of them are actually rendering a piece of server-generated HTML
message as flash message, so I am not sure there really is value in
sanitizing (we should be able to trust our own server?), but in any
case, code-wise, they should already be able to absorb the async
just fine.
I am not sure if `sanitize` and `sanitizeAsync` are actually API
compatible – they both take `options` but I think those `options` do
pretty different things. This is somethign for another person to
investigate down the road in another PR.
According to `all-the-plugins`, `discourse-graphviz` also import
from this location, so perhaps we should PR to update. That being
said, it doesn't really hurt anything to keep the alias around for
a while.
87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import escape from "discourse-common/lib/escape";
|
|
import { getURLWithCDN } from "discourse-common/lib/get-url";
|
|
import { helperContext } from "discourse-common/lib/helpers";
|
|
import { deepMerge } from "discourse-common/lib/object";
|
|
|
|
let allowedSizes = null;
|
|
|
|
export function translateSize(size) {
|
|
switch (size) {
|
|
case "tiny":
|
|
return 24;
|
|
case "small":
|
|
return 24;
|
|
case "medium":
|
|
return 48;
|
|
case "large":
|
|
return 48;
|
|
case "extra_large":
|
|
return 96;
|
|
case "huge":
|
|
return 144;
|
|
}
|
|
return size;
|
|
}
|
|
|
|
export function getRawSize(size) {
|
|
const pixelRatio = window.devicePixelRatio || 1;
|
|
let rawSize = 1;
|
|
if (pixelRatio > 1.1 && pixelRatio < 2.1) {
|
|
rawSize = 2;
|
|
} else if (pixelRatio >= 2.1) {
|
|
rawSize = 3;
|
|
}
|
|
return size * rawSize;
|
|
}
|
|
|
|
export function getRawAvatarSize(size) {
|
|
allowedSizes ??= helperContext()
|
|
.siteSettings["avatar_sizes"].split("|")
|
|
.map((s) => parseInt(s, 10))
|
|
.sort((a, b) => a - b);
|
|
|
|
size = getRawSize(size);
|
|
|
|
for (let i = 0; i < allowedSizes.length; i++) {
|
|
if (allowedSizes[i] >= size) {
|
|
return allowedSizes[i];
|
|
}
|
|
}
|
|
|
|
return allowedSizes[allowedSizes.length - 1];
|
|
}
|
|
|
|
export function avatarUrl(template, size, { customGetURL } = {}) {
|
|
if (!template) {
|
|
return "";
|
|
}
|
|
const rawSize = getRawAvatarSize(translateSize(size));
|
|
const templatedPath = template.replace(/\{size\}/g, rawSize);
|
|
return (customGetURL || getURLWithCDN)(templatedPath);
|
|
}
|
|
|
|
export function avatarImg(options, customGetURL) {
|
|
const size = translateSize(options.size);
|
|
let url = avatarUrl(options.avatarTemplate, size, { customGetURL });
|
|
|
|
// We won't render an invalid url
|
|
if (!url) {
|
|
return "";
|
|
}
|
|
|
|
const classes =
|
|
"avatar" + (options.extraClasses ? " " + options.extraClasses : "");
|
|
|
|
let title = "";
|
|
if (options.title) {
|
|
const escaped = escape(options.title || "");
|
|
title = ` title='${escaped}'`;
|
|
}
|
|
|
|
return `<img loading='lazy' alt='' width='${size}' height='${size}' src='${url}' class='${classes}'${title}>`;
|
|
}
|
|
|
|
export function tinyAvatar(avatarTemplate, options) {
|
|
return avatarImg(deepMerge({ avatarTemplate, size: "tiny" }, options));
|
|
}
|