mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-07 09:25:27 +00:00
Use tabWidth 4 without actual tabs.
This commit is contained in:
Paul
@@ -3,15 +3,15 @@ import { Suspense, lazy } from "preact/compat";
|
||||
const Renderer = lazy(() => import("./Renderer"));
|
||||
|
||||
export interface MarkdownProps {
|
||||
content?: string;
|
||||
disallowBigEmoji?: boolean;
|
||||
content?: string;
|
||||
disallowBigEmoji?: boolean;
|
||||
}
|
||||
|
||||
export default function Markdown(props: MarkdownProps) {
|
||||
return (
|
||||
// @ts-expect-error
|
||||
<Suspense fallback={props.content}>
|
||||
<Renderer {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
return (
|
||||
// @ts-expect-error
|
||||
<Suspense fallback={props.content}>
|
||||
<Renderer {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -26,167 +26,167 @@ import { MarkdownProps } from "./Markdown";
|
||||
|
||||
// TODO: global.d.ts file for defining globals
|
||||
declare global {
|
||||
interface Window {
|
||||
copycode: (element: HTMLDivElement) => void;
|
||||
}
|
||||
interface Window {
|
||||
copycode: (element: HTMLDivElement) => void;
|
||||
}
|
||||
}
|
||||
|
||||
// Handler for code block copy.
|
||||
if (typeof window !== "undefined") {
|
||||
window.copycode = function (element: HTMLDivElement) {
|
||||
try {
|
||||
let code = element.parentElement?.parentElement?.children[1];
|
||||
if (code) {
|
||||
navigator.clipboard.writeText(code.textContent?.trim() ?? "");
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
window.copycode = function (element: HTMLDivElement) {
|
||||
try {
|
||||
let code = element.parentElement?.parentElement?.children[1];
|
||||
if (code) {
|
||||
navigator.clipboard.writeText(code.textContent?.trim() ?? "");
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
}
|
||||
|
||||
export const md: MarkdownIt = MarkdownIt({
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
highlight: (str, lang) => {
|
||||
let v = Prism.languages[lang];
|
||||
if (v) {
|
||||
let out = Prism.highlight(str, v, lang);
|
||||
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
|
||||
}
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
highlight: (str, lang) => {
|
||||
let v = Prism.languages[lang];
|
||||
if (v) {
|
||||
let out = Prism.highlight(str, v, lang);
|
||||
return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
|
||||
}
|
||||
|
||||
return `<pre class="code"><code>${md.utils.escapeHtml(
|
||||
str,
|
||||
)}</code></pre>`;
|
||||
},
|
||||
return `<pre class="code"><code>${md.utils.escapeHtml(
|
||||
str,
|
||||
)}</code></pre>`;
|
||||
},
|
||||
})
|
||||
.disable("image")
|
||||
.use(MarkdownEmoji, { defs: emojiDictionary })
|
||||
.use(MarkdownSpoilers)
|
||||
.use(MarkdownSup)
|
||||
.use(MarkdownSub)
|
||||
.use(MarkdownKatex, {
|
||||
throwOnError: false,
|
||||
maxExpand: 0,
|
||||
});
|
||||
.disable("image")
|
||||
.use(MarkdownEmoji, { defs: emojiDictionary })
|
||||
.use(MarkdownSpoilers)
|
||||
.use(MarkdownSup)
|
||||
.use(MarkdownSub)
|
||||
.use(MarkdownKatex, {
|
||||
throwOnError: false,
|
||||
maxExpand: 0,
|
||||
});
|
||||
|
||||
// ? Force links to open _blank.
|
||||
// From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
|
||||
const defaultRender =
|
||||
md.renderer.rules.link_open ||
|
||||
function (tokens, idx, options, _env, self) {
|
||||
return self.renderToken(tokens, idx, options);
|
||||
};
|
||||
md.renderer.rules.link_open ||
|
||||
function (tokens, idx, options, _env, self) {
|
||||
return self.renderToken(tokens, idx, options);
|
||||
};
|
||||
|
||||
// TODO: global.d.ts file for defining globals
|
||||
declare global {
|
||||
interface Window {
|
||||
internalHandleURL: (element: HTMLAnchorElement) => void;
|
||||
}
|
||||
interface Window {
|
||||
internalHandleURL: (element: HTMLAnchorElement) => void;
|
||||
}
|
||||
}
|
||||
|
||||
// Handler for internal links, pushes events to React using magic.
|
||||
if (typeof window !== "undefined") {
|
||||
window.internalHandleURL = function (element: HTMLAnchorElement) {
|
||||
const url = new URL(element.href, location.href);
|
||||
const pathname = url.pathname;
|
||||
window.internalHandleURL = function (element: HTMLAnchorElement) {
|
||||
const url = new URL(element.href, location.href);
|
||||
const pathname = url.pathname;
|
||||
|
||||
if (pathname.startsWith("/@")) {
|
||||
internalEmit("Intermediate", "openProfile", pathname.substr(2));
|
||||
} else {
|
||||
internalEmit("Intermediate", "navigate", pathname);
|
||||
}
|
||||
};
|
||||
if (pathname.startsWith("/@")) {
|
||||
internalEmit("Intermediate", "openProfile", pathname.substr(2));
|
||||
} else {
|
||||
internalEmit("Intermediate", "navigate", pathname);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
|
||||
let internal;
|
||||
const hIndex = tokens[idx].attrIndex("href");
|
||||
if (hIndex >= 0) {
|
||||
try {
|
||||
// For internal links, we should use our own handler to use react-router history.
|
||||
// @ts-ignore
|
||||
const href = tokens[idx].attrs[hIndex][1];
|
||||
const url = new URL(href, location.href);
|
||||
let internal;
|
||||
const hIndex = tokens[idx].attrIndex("href");
|
||||
if (hIndex >= 0) {
|
||||
try {
|
||||
// For internal links, we should use our own handler to use react-router history.
|
||||
// @ts-ignore
|
||||
const href = tokens[idx].attrs[hIndex][1];
|
||||
const url = new URL(href, location.href);
|
||||
|
||||
if (url.hostname === location.hostname) {
|
||||
internal = true;
|
||||
// I'm sorry.
|
||||
tokens[idx].attrPush([
|
||||
"onclick",
|
||||
"internalHandleURL(this); return false",
|
||||
]);
|
||||
if (url.hostname === location.hostname) {
|
||||
internal = true;
|
||||
// I'm sorry.
|
||||
tokens[idx].attrPush([
|
||||
"onclick",
|
||||
"internalHandleURL(this); return false",
|
||||
]);
|
||||
|
||||
if (url.pathname.startsWith("/@")) {
|
||||
tokens[idx].attrPush(["data-type", "mention"]);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// Ignore the error, treat as normal link.
|
||||
}
|
||||
}
|
||||
if (url.pathname.startsWith("/@")) {
|
||||
tokens[idx].attrPush(["data-type", "mention"]);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// Ignore the error, treat as normal link.
|
||||
}
|
||||
}
|
||||
|
||||
if (!internal) {
|
||||
// Add target=_blank for external links.
|
||||
const aIndex = tokens[idx].attrIndex("target");
|
||||
if (!internal) {
|
||||
// Add target=_blank for external links.
|
||||
const aIndex = tokens[idx].attrIndex("target");
|
||||
|
||||
if (aIndex < 0) {
|
||||
tokens[idx].attrPush(["target", "_blank"]);
|
||||
} else {
|
||||
try {
|
||||
// @ts-ignore
|
||||
tokens[idx].attrs[aIndex][1] = "_blank";
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
if (aIndex < 0) {
|
||||
tokens[idx].attrPush(["target", "_blank"]);
|
||||
} else {
|
||||
try {
|
||||
// @ts-ignore
|
||||
tokens[idx].attrs[aIndex][1] = "_blank";
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
|
||||
return defaultRender(tokens, idx, options, env, self);
|
||||
return defaultRender(tokens, idx, options, env, self);
|
||||
};
|
||||
|
||||
md.renderer.rules.emoji = function (token, idx) {
|
||||
return generateEmoji(token[idx].content);
|
||||
return generateEmoji(token[idx].content);
|
||||
};
|
||||
|
||||
const RE_TWEMOJI = /:(\w+):/g;
|
||||
|
||||
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
|
||||
const client = useContext(AppContext);
|
||||
if (typeof content === "undefined") return null;
|
||||
if (content.length === 0) return null;
|
||||
const client = useContext(AppContext);
|
||||
if (typeof content === "undefined") return null;
|
||||
if (content.length === 0) return null;
|
||||
|
||||
// We replace the message with the mention at the time of render.
|
||||
// We don't care if the mention changes.
|
||||
let newContent = content.replace(
|
||||
RE_MENTIONS,
|
||||
(sub: string, ...args: any[]) => {
|
||||
const id = args[0],
|
||||
user = client.users.get(id);
|
||||
// We replace the message with the mention at the time of render.
|
||||
// We don't care if the mention changes.
|
||||
let newContent = content.replace(
|
||||
RE_MENTIONS,
|
||||
(sub: string, ...args: any[]) => {
|
||||
const id = args[0],
|
||||
user = client.users.get(id);
|
||||
|
||||
if (user) {
|
||||
return `[@${user.username}](/@${id})`;
|
||||
}
|
||||
if (user) {
|
||||
return `[@${user.username}](/@${id})`;
|
||||
}
|
||||
|
||||
return sub;
|
||||
},
|
||||
);
|
||||
return sub;
|
||||
},
|
||||
);
|
||||
|
||||
const useLargeEmojis = disallowBigEmoji
|
||||
? false
|
||||
: content.replace(RE_TWEMOJI, "").trim().length === 0;
|
||||
const useLargeEmojis = disallowBigEmoji
|
||||
? false
|
||||
: content.replace(RE_TWEMOJI, "").trim().length === 0;
|
||||
|
||||
return (
|
||||
<span
|
||||
className={styles.markdown}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: md.render(newContent),
|
||||
}}
|
||||
data-large-emojis={useLargeEmojis}
|
||||
onClick={(ev) => {
|
||||
if (ev.target) {
|
||||
let element = ev.currentTarget;
|
||||
if (element.classList.contains("spoiler")) {
|
||||
element.classList.add("shown");
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<span
|
||||
className={styles.markdown}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: md.render(newContent),
|
||||
}}
|
||||
data-large-emojis={useLargeEmojis}
|
||||
onClick={(ev) => {
|
||||
if (ev.target) {
|
||||
let element = ev.currentTarget;
|
||||
if (element.classList.contains("spoiler")) {
|
||||
element.classList.add("shown");
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user