mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 22:50:59 -05:00
merge: remote-tracking branch 'origin/master' into feat/emojis
This commit is contained in:
Paul Makles
commit
445e9537d4
18 changed files with 1868 additions and 623 deletions
23
package.json
23
package.json
|
|
@ -73,7 +73,7 @@
|
|||
"@hcaptcha/react-hcaptcha": "^0.3.6",
|
||||
"@insertish/vite-plugin-babel-macros": "^1.0.5",
|
||||
"@preact/preset-vite": "^2.0.0",
|
||||
"@revoltchat/ui": "1.0.69",
|
||||
"@revoltchat/ui": "1.0.70",
|
||||
"@rollup/plugin-replace": "^2.4.2",
|
||||
"@styled-icons/boxicons-logos": "^10.38.0",
|
||||
"@styled-icons/boxicons-regular": "^10.38.0",
|
||||
|
|
@ -86,7 +86,6 @@
|
|||
"@types/lodash": "^4",
|
||||
"@types/lodash.defaultsdeep": "^4.6.6",
|
||||
"@types/lodash.isequal": "^4.5.5",
|
||||
"@types/markdown-it": "^12.0.2",
|
||||
"@types/node": "^15.12.4",
|
||||
"@types/preact-i18n": "^2.3.0",
|
||||
"@types/prismjs": "^1.16.5",
|
||||
|
|
@ -116,8 +115,7 @@
|
|||
"lodash.defaultsdeep": "^4.6.1",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"long": "^5.2.0",
|
||||
"markdown-it": "^12.0.6",
|
||||
"markdown-it-emoji": "^2.0.0",
|
||||
"mdast-util-to-hast": "^12.1.2",
|
||||
"mediasoup-client": "npm:@insertish/mediasoup-client@3.6.36-esnext",
|
||||
"mobx": "^6.6.0",
|
||||
"mobx-react-lite": "3.4.0",
|
||||
|
|
@ -135,7 +133,15 @@
|
|||
"react-router-dom": "^5.2.0",
|
||||
"react-scroll": "^1.8.2",
|
||||
"react-virtuoso": "^2.12.0",
|
||||
"revolt.js": "6.0.4",
|
||||
"rehype-katex": "^6.0.2",
|
||||
"rehype-prism": "^2.1.3",
|
||||
"rehype-react": "^7.1.1",
|
||||
"remark-breaks": "^3.0.2",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-math": "^5.1.1",
|
||||
"remark-parse": "^10.0.1",
|
||||
"remark-rehype": "^10.1.0",
|
||||
"revolt.js": "6.0.5",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.35.1",
|
||||
"semver": "^7.3.7",
|
||||
|
|
@ -147,6 +153,8 @@
|
|||
"styled-components": "^5.3.0",
|
||||
"typescript": "^4.4.2",
|
||||
"ulid": "^2.3.0",
|
||||
"unified": "^10.1.2",
|
||||
"unist-util-visit": "^4.1.0",
|
||||
"use-resize-observer": "^7.0.0",
|
||||
"vite-plugin-pwa": "^0.11.13",
|
||||
"workbox-precaching": "^6.1.5"
|
||||
|
|
@ -156,8 +164,5 @@
|
|||
"repository": "https://github.com/revoltchat/revite.git",
|
||||
"author": "Paul <paulmakles@gmail.com>",
|
||||
"license": "MIT",
|
||||
"packageManager": "yarn@3.2.0",
|
||||
"resolutions": {
|
||||
"@revoltchat/ui": "portal:../components"
|
||||
}
|
||||
"packageManager": "yarn@3.2.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { emojiDictionary } from "../../assets/emojis";
|
||||
|
||||
export type EmojiPack = "mutant" | "twemoji" | "noto" | "openmoji";
|
||||
|
||||
let EMOJI_PACK: EmojiPack = "mutant";
|
||||
|
|
@ -40,7 +42,7 @@ function toCodePoint(rune: string) {
|
|||
.join("-");
|
||||
}
|
||||
|
||||
function parseEmoji(emoji: string) {
|
||||
export function parseEmoji(emoji: string) {
|
||||
if (emoji.startsWith("custom:")) {
|
||||
return `https://dl.insrt.uk/projects/revolt/emotes/${emoji.substring(
|
||||
7,
|
||||
|
|
|
|||
|
|
@ -1,220 +0,0 @@
|
|||
.markdown {
|
||||
user-select: text;
|
||||
|
||||
:global(.emoji) {
|
||||
object-fit: contain;
|
||||
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
margin: 0 0.05em 0 0.1em;
|
||||
vertical-align: -0.2em;
|
||||
}
|
||||
|
||||
&[data-large-emojis="true"] :global(.emoji) {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1px;
|
||||
margin-right: 2px;
|
||||
vertical-align: -0.3em;
|
||||
}
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&[data-type="mention"] {
|
||||
padding: 0 6px;
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
background: var(--secondary-background);
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ul,
|
||||
ol,
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 2px 0;
|
||||
padding: 2px 0;
|
||||
background: var(--hover);
|
||||
border-radius: var(--border-radius);
|
||||
border-inline-start: 4px solid var(--tertiary-background);
|
||||
|
||||
> * {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1em;
|
||||
overflow-x: scroll;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--block) !important;
|
||||
}
|
||||
|
||||
p > code {
|
||||
padding: 1px 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
color: white;
|
||||
font-size: 90%;
|
||||
background: var(--block);
|
||||
border-radius: var(--border-radius);
|
||||
font-family: var(--monospace-font), monospace;
|
||||
border-radius: 3px;
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-right: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 6px;
|
||||
border: 1px solid var(--tertiary-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.katex-block) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
:global(.spoiler) {
|
||||
padding: 0 2px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: transparent;
|
||||
background: #151515;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
> * {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:global(.shown) {
|
||||
cursor: auto;
|
||||
user-select: all;
|
||||
color: var(--foreground);
|
||||
background: var(--secondary-background);
|
||||
|
||||
> * {
|
||||
opacity: 1;
|
||||
pointer-events: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.code) {
|
||||
font-family: var(--monospace-font), monospace;
|
||||
|
||||
:global(.lang) {
|
||||
width: fit-content;
|
||||
padding-bottom: 8px;
|
||||
|
||||
div {
|
||||
color: #111;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
background: var(--accent);
|
||||
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 2px #787676;
|
||||
border-radius: calc(var(--border-radius) / 3);
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 1px #787676;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label:before {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: "a";
|
||||
font-size: 10px;
|
||||
margin-right: 6px;
|
||||
line-height: 12px;
|
||||
background: white;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
input[type="checkbox"][checked="true"] + label:before {
|
||||
content: "✓";
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label {
|
||||
line-height: 12px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
import { Suspense, lazy } from "preact/compat";
|
||||
|
||||
const Renderer = lazy(() => import("./Renderer"));
|
||||
const Renderer = lazy(() => import("./RemarkRenderer"));
|
||||
|
||||
export interface MarkdownProps {
|
||||
content?: string | null;
|
||||
content: string;
|
||||
disallowBigEmoji?: boolean;
|
||||
}
|
||||
|
||||
export default function Markdown(props: MarkdownProps) {
|
||||
if (!props.content) return null;
|
||||
|
||||
return (
|
||||
// @ts-expect-error Typings mis-match.
|
||||
<Suspense fallback={props.content}>
|
||||
|
|
|
|||
227
src/components/markdown/RemarkRenderer.tsx
Normal file
227
src/components/markdown/RemarkRenderer.tsx
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
import "katex/dist/katex.min.css";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
import rehypePrism from "rehype-prism";
|
||||
import rehypeReact from "rehype-react";
|
||||
import remarkBreaks from "remark-breaks";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import remarkMath from "remark-math";
|
||||
import remarkParse from "remark-parse";
|
||||
import remarkRehype from "remark-rehype";
|
||||
import styled, { css } from "styled-components";
|
||||
import { unified } from "unified";
|
||||
|
||||
import { createElement } from "preact";
|
||||
import { memo } from "preact/compat";
|
||||
import { useLayoutEffect, useMemo, useState } from "preact/hooks";
|
||||
|
||||
import { MarkdownProps } from "./Markdown";
|
||||
import { handlers } from "./hast";
|
||||
import { RenderCodeblock } from "./plugins/Codeblock";
|
||||
import { RenderAnchor } from "./plugins/anchors";
|
||||
import { remarkChannels, RenderChannel } from "./plugins/channels";
|
||||
import { isOnlyEmoji, remarkEmoji, RenderEmoji } from "./plugins/emoji";
|
||||
import { remarkMention, RenderMention } from "./plugins/mentions";
|
||||
import { remarkSpoiler, RenderSpoiler } from "./plugins/spoiler";
|
||||
import { remarkTimestamps } from "./plugins/timestamps";
|
||||
import "./prism";
|
||||
|
||||
/**
|
||||
* Null element
|
||||
*/
|
||||
const Null: React.FC = () => null;
|
||||
|
||||
/**
|
||||
* Custom Markdown components
|
||||
*/
|
||||
const components = {
|
||||
emoji: RenderEmoji,
|
||||
mention: RenderMention,
|
||||
spoiler: RenderSpoiler,
|
||||
channel: RenderChannel,
|
||||
a: RenderAnchor,
|
||||
p: styled.p`
|
||||
margin: 0;
|
||||
|
||||
> code {
|
||||
padding: 1px 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
`,
|
||||
h1: styled.h1`
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
h2: styled.h2`
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
h3: styled.h3`
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
h4: styled.h4`
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
h5: styled.h5`
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
h6: styled.h6`
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
pre: RenderCodeblock,
|
||||
code: styled.code`
|
||||
color: white;
|
||||
background: var(--block);
|
||||
|
||||
font-size: 90%;
|
||||
font-family: var(--monospace-font), monospace;
|
||||
|
||||
border-radius: 3px;
|
||||
box-decoration-break: clone;
|
||||
`,
|
||||
table: styled.table`
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 6px;
|
||||
border: 1px solid var(--tertiary-foreground);
|
||||
}
|
||||
`,
|
||||
ul: styled.ul`
|
||||
list-style-position: inside;
|
||||
padding-left: 10px;
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
ol: styled.ol`
|
||||
list-style-position: inside;
|
||||
padding-left: 10px;
|
||||
margin: 0.2em 0;
|
||||
`,
|
||||
li: styled.li`
|
||||
${(props) =>
|
||||
props.class === "task-list-item" &&
|
||||
css`
|
||||
list-style-type: none;
|
||||
`}
|
||||
`,
|
||||
blockquote: styled.blockquote`
|
||||
margin: 2px 0;
|
||||
padding: 2px 0;
|
||||
background: var(--hover);
|
||||
border-radius: var(--border-radius);
|
||||
border-inline-start: 4px solid var(--tertiary-background);
|
||||
|
||||
> * {
|
||||
margin: 0 8px;
|
||||
}
|
||||
`,
|
||||
// Block image elements
|
||||
img: Null,
|
||||
// Catch literally everything else just in case
|
||||
video: Null,
|
||||
figure: Null,
|
||||
picture: Null,
|
||||
source: Null,
|
||||
audio: Null,
|
||||
script: Null,
|
||||
style: Null,
|
||||
};
|
||||
|
||||
/**
|
||||
* Unified Markdown renderer
|
||||
*/
|
||||
const render = unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkBreaks)
|
||||
.use(remarkGfm)
|
||||
.use(remarkMath)
|
||||
.use(remarkSpoiler)
|
||||
.use(remarkChannels)
|
||||
.use(remarkTimestamps)
|
||||
.use(remarkEmoji)
|
||||
.use(remarkMention)
|
||||
.use(remarkRehype, {
|
||||
handlers,
|
||||
})
|
||||
.use(rehypeKatex, {
|
||||
maxSize: 10,
|
||||
maxExpand: 0,
|
||||
trust: false,
|
||||
strict: false,
|
||||
output: "html",
|
||||
throwOnError: false,
|
||||
errorColor: "var(--error)",
|
||||
})
|
||||
.use(rehypePrism)
|
||||
// @ts-expect-error typings do not
|
||||
// match between Preact and React
|
||||
.use(rehypeReact, {
|
||||
createElement,
|
||||
Fragment,
|
||||
components,
|
||||
});
|
||||
|
||||
/**
|
||||
* Markdown parent container
|
||||
*/
|
||||
const Container = styled.div<{ largeEmoji: boolean }>`
|
||||
// Allow scrolling block math
|
||||
.math-display {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
// Set emoji size
|
||||
--emoji-size: ${(props) => (props.largeEmoji ? "3em" : "1.25em")};
|
||||
|
||||
// Underline link hover
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Regex for matching execessive blockquotes
|
||||
*/
|
||||
const RE_QUOTE = /(^[>\s][>\s])[>\s]+([^]+$)/gm;
|
||||
|
||||
/**
|
||||
* Regex for matching open angled bracket
|
||||
*/
|
||||
const RE_OPEN_BRACKET = /</g;
|
||||
|
||||
/**
|
||||
* Sanitise Markdown input before rendering
|
||||
* @param content Input string
|
||||
* @returns Sanitised string
|
||||
*/
|
||||
function sanitise(content: string) {
|
||||
return (
|
||||
content
|
||||
// Strip excessive blockquote indentation
|
||||
.replace(RE_QUOTE, (_, m0, m1) => m0 + m1)
|
||||
// Map < to HTML entity LT
|
||||
// (otherwise all HTML is just obliterated,
|
||||
// not even displayed as plain text)
|
||||
.replace(RE_OPEN_BRACKET, "<")
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remark renderer component
|
||||
*/
|
||||
export default memo(({ content, disallowBigEmoji }: MarkdownProps) => {
|
||||
const sanitisedContent = useMemo(() => sanitise(content), [content]);
|
||||
|
||||
const [Content, setContent] = useState<React.ReactElement>(null!);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
render
|
||||
.process(sanitisedContent)
|
||||
.then((file) => setContent(file.result));
|
||||
}, [sanitisedContent]);
|
||||
|
||||
const largeEmoji = useMemo(
|
||||
() => !disallowBigEmoji && isOnlyEmoji(content!),
|
||||
[content, disallowBigEmoji],
|
||||
);
|
||||
|
||||
return <Container largeEmoji={largeEmoji}>{Content}</Container>;
|
||||
});
|
||||
|
|
@ -1,290 +0,0 @@
|
|||
/* eslint-disable react-hooks/rules-of-hooks */
|
||||
import MarkdownKatex from "@traptitech/markdown-it-katex";
|
||||
import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
|
||||
import "katex/dist/katex.min.css";
|
||||
import MarkdownIt from "markdown-it";
|
||||
// @ts-expect-error No typings.
|
||||
import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
|
||||
import { RE_MENTIONS } from "revolt.js";
|
||||
|
||||
import styles from "./Markdown.module.scss";
|
||||
import { useCallback, useContext } from "preact/hooks";
|
||||
|
||||
import { internalEmit } from "../../lib/eventEmitter";
|
||||
import { determineLink } from "../../lib/links";
|
||||
|
||||
import { dayjs } from "../../context/Locale";
|
||||
|
||||
import { emojiDictionary } from "../../assets/emojis";
|
||||
import { useClient } from "../../controllers/client/ClientController";
|
||||
import { modalController } from "../../controllers/modals/ModalController";
|
||||
import { generateEmoji } from "../common/Emoji";
|
||||
import { MarkdownProps } from "./Markdown";
|
||||
import Prism from "./prism";
|
||||
|
||||
// TODO: global.d.ts file for defining globals
|
||||
declare global {
|
||||
interface Window {
|
||||
copycode: (element: HTMLDivElement) => void;
|
||||
}
|
||||
}
|
||||
|
||||
// Handler for code block copy.
|
||||
if (typeof window !== "undefined") {
|
||||
window.copycode = function (element: HTMLDivElement) {
|
||||
try {
|
||||
const 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) => {
|
||||
const v = Prism.languages[lang];
|
||||
if (v) {
|
||||
const 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>`;
|
||||
},
|
||||
})
|
||||
.disable("image")
|
||||
.use(MarkdownEmoji, { defs: emojiDictionary })
|
||||
.use(MarkdownSpoilers)
|
||||
.use(MarkdownKatex, {
|
||||
throwOnError: false,
|
||||
maxExpand: 0,
|
||||
maxSize: 10,
|
||||
strict: false,
|
||||
errorColor: "var(--error)",
|
||||
});
|
||||
|
||||
md.linkify.set({ fuzzyLink: false });
|
||||
|
||||
// TODO: global.d.ts file for defining globals
|
||||
declare global {
|
||||
interface Window {
|
||||
internalHandleURL: (element: HTMLAnchorElement) => void;
|
||||
}
|
||||
}
|
||||
|
||||
// Include emojis.
|
||||
md.renderer.rules.emoji = function (token, idx) {
|
||||
return generateEmoji(token[idx].content);
|
||||
};
|
||||
|
||||
// Force line breaks.
|
||||
// https://github.com/markdown-it/markdown-it/issues/211#issuecomment-508380611
|
||||
const defaultParagraphRenderer =
|
||||
md.renderer.rules.paragraph_open ||
|
||||
((tokens, idx, options, env, self) =>
|
||||
self.renderToken(tokens, idx, options));
|
||||
|
||||
md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) {
|
||||
let result = "";
|
||||
if (idx > 1) {
|
||||
const inline = tokens[idx - 2];
|
||||
const paragraph = tokens[idx];
|
||||
if (
|
||||
inline.type === "inline" &&
|
||||
inline.map &&
|
||||
inline.map[1] &&
|
||||
paragraph.map &&
|
||||
paragraph.map[0]
|
||||
) {
|
||||
const diff = paragraph.map[0] - inline.map[1];
|
||||
if (diff > 0) {
|
||||
result = "<br>".repeat(diff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result + defaultParagraphRenderer(tokens, idx, options, env, self);
|
||||
};
|
||||
|
||||
const RE_TWEMOJI = /:(\w+):/g;
|
||||
|
||||
// ! FIXME: Move to library
|
||||
const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
|
||||
|
||||
const RE_TIME = /<t:([0-9]+):(\w)>/g;
|
||||
|
||||
export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
|
||||
const client = useClient();
|
||||
|
||||
if (typeof content === "undefined") return null;
|
||||
if (!content || 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.
|
||||
const newContent = content
|
||||
.replace(RE_TIME, (sub: string, ...args: unknown[]) => {
|
||||
if (isNaN(args[0] as number)) return sub;
|
||||
const date = dayjs.unix(args[0] as number);
|
||||
const format = args[1] as string;
|
||||
let final = "";
|
||||
switch (format) {
|
||||
case "t":
|
||||
final = date.format("hh:mm");
|
||||
break;
|
||||
case "T":
|
||||
final = date.format("hh:mm:ss");
|
||||
break;
|
||||
case "R":
|
||||
final = date.fromNow();
|
||||
break;
|
||||
case "D":
|
||||
final = date.format("DD MMMM YYYY");
|
||||
break;
|
||||
case "F":
|
||||
final = date.format("dddd, DD MMMM YYYY hh:mm");
|
||||
break;
|
||||
default:
|
||||
final = date.format("DD MMMM YYYY hh:mm");
|
||||
break;
|
||||
}
|
||||
return `\`${final}\``;
|
||||
})
|
||||
.replace(RE_MENTIONS, (sub: string, ...args: unknown[]) => {
|
||||
const id = args[0] as string,
|
||||
user = client.users.get(id);
|
||||
|
||||
if (user) {
|
||||
return `[@${user.username}](/@${id})`;
|
||||
}
|
||||
|
||||
return sub;
|
||||
})
|
||||
.replace(RE_CHANNELS, (sub: string, ...args: unknown[]) => {
|
||||
const id = args[0] as string,
|
||||
channel = client.channels.get(id);
|
||||
|
||||
if (
|
||||
channel?.channel_type === "TextChannel" ||
|
||||
channel?.channel_type === "VoiceChannel"
|
||||
) {
|
||||
return `[#${channel.name}](/server/${channel.server_id}/channel/${id})`;
|
||||
}
|
||||
|
||||
return sub;
|
||||
});
|
||||
|
||||
const useLargeEmojis = disallowBigEmoji
|
||||
? false
|
||||
: content.replace(RE_TWEMOJI, "").trim().length === 0;
|
||||
|
||||
const toggle = useCallback((ev: MouseEvent) => {
|
||||
if (ev.currentTarget) {
|
||||
const element = ev.currentTarget as HTMLDivElement;
|
||||
if (element.classList.contains("spoiler")) {
|
||||
element.classList.add("shown");
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleLink = useCallback((ev: MouseEvent) => {
|
||||
if (ev.currentTarget) {
|
||||
const element = ev.currentTarget as HTMLAnchorElement;
|
||||
|
||||
if (ev.shiftKey) {
|
||||
switch (element.dataset.type) {
|
||||
case "mention": {
|
||||
internalEmit(
|
||||
"MessageBox",
|
||||
"append",
|
||||
`<@${element.dataset.mentionId}>`,
|
||||
"mention",
|
||||
);
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
case "channel_mention": {
|
||||
internalEmit(
|
||||
"MessageBox",
|
||||
"append",
|
||||
`<#${element.dataset.mentionId}>`,
|
||||
"channel_mention",
|
||||
);
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (modalController.openLink(element.href)) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
|
||||
(element) => {
|
||||
element.removeEventListener("click", toggle);
|
||||
element.addEventListener("click", toggle);
|
||||
},
|
||||
);
|
||||
|
||||
el.querySelectorAll<HTMLAnchorElement>("a").forEach(
|
||||
(element) => {
|
||||
element.removeEventListener("click", handleLink);
|
||||
element.addEventListener("click", handleLink);
|
||||
element.removeAttribute("data-type");
|
||||
element.removeAttribute("data-mention-id");
|
||||
element.removeAttribute("target");
|
||||
|
||||
const link = determineLink(element.href);
|
||||
switch (link.type) {
|
||||
case "profile": {
|
||||
element.setAttribute(
|
||||
"data-type",
|
||||
"mention",
|
||||
);
|
||||
element.setAttribute(
|
||||
"data-mention-id",
|
||||
link.id,
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "navigate": {
|
||||
if (link.navigation_type === "channel") {
|
||||
element.setAttribute(
|
||||
"data-type",
|
||||
"channel_mention",
|
||||
);
|
||||
element.setAttribute(
|
||||
"data-mention-id",
|
||||
link.channel_id,
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "external": {
|
||||
element.setAttribute("target", "_blank");
|
||||
element.setAttribute("rel", "noreferrer");
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
}}
|
||||
className={styles.markdown}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: md.render(newContent),
|
||||
}}
|
||||
data-large-emojis={useLargeEmojis}
|
||||
/>
|
||||
);
|
||||
}
|
||||
7
src/components/markdown/hast.ts
Normal file
7
src/components/markdown/hast.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { passThroughComponents } from "./plugins/remarkRegexComponent";
|
||||
import { timestampHandler } from "./plugins/timestamps";
|
||||
|
||||
export const handlers = {
|
||||
...passThroughComponents("emoji", "spoiler", "mention", "channel"),
|
||||
timestamp: timestampHandler,
|
||||
};
|
||||
78
src/components/markdown/plugins/Codeblock.tsx
Normal file
78
src/components/markdown/plugins/Codeblock.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import styled from "styled-components";
|
||||
|
||||
import { useCallback, useRef } from "preact/hooks";
|
||||
|
||||
import { Tooltip } from "@revoltchat/ui";
|
||||
|
||||
import { modalController } from "../../../controllers/modals/ModalController";
|
||||
|
||||
/**
|
||||
* Base codeblock styles
|
||||
*/
|
||||
const Base = styled.pre`
|
||||
padding: 1em;
|
||||
overflow-x: scroll;
|
||||
background: var(--block);
|
||||
border-radius: var(--border-radius);
|
||||
`;
|
||||
|
||||
/**
|
||||
* Copy codeblock contents button styles
|
||||
*/
|
||||
const Lang = styled.div`
|
||||
width: fit-content;
|
||||
padding-bottom: 8px;
|
||||
|
||||
a {
|
||||
color: #111;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
background: var(--accent);
|
||||
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 2px #787676;
|
||||
border-radius: calc(var(--border-radius) / 3);
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 1px #787676;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Render a codeblock with copy text button
|
||||
*/
|
||||
export const RenderCodeblock: React.FC<{ class: string }> = ({
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const ref = useRef<HTMLPreElement>(null);
|
||||
|
||||
let text = "text";
|
||||
if (props.class) {
|
||||
text = props.class.split("-")[1];
|
||||
}
|
||||
|
||||
const onCopy = useCallback(() => {
|
||||
const text = ref.current?.querySelector("code")?.innerText;
|
||||
text && modalController.writeText(text);
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<Base ref={ref}>
|
||||
<Lang>
|
||||
<Tooltip content="Copy to Clipboard" placement="top">
|
||||
{/**
|
||||
// @ts-expect-error Preact-React */}
|
||||
<a onClick={onCopy}>{text}</a>
|
||||
</Tooltip>
|
||||
</Lang>
|
||||
{children}
|
||||
</Base>
|
||||
);
|
||||
};
|
||||
34
src/components/markdown/plugins/anchors.tsx
Normal file
34
src/components/markdown/plugins/anchors.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
import { determineLink } from "../../../lib/links";
|
||||
|
||||
import { modalController } from "../../../controllers/modals/ModalController";
|
||||
|
||||
export function RenderAnchor({
|
||||
href,
|
||||
...props
|
||||
}: JSX.HTMLAttributes<HTMLAnchorElement>) {
|
||||
// Pass-through no href or if anchor
|
||||
if (!href || href.startsWith("#")) return <a href={href} {...props} />;
|
||||
|
||||
// Determine type of link
|
||||
const link = determineLink(href);
|
||||
if (link.type === "none") return <a {...props} />;
|
||||
|
||||
// Render direct link if internal
|
||||
if (link.type === "navigate") {
|
||||
return <Link to={href} children={props.children} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
{...props}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
onClick={(ev) =>
|
||||
modalController.openLink(href) && ev.preventDefault()
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
21
src/components/markdown/plugins/channels.tsx
Normal file
21
src/components/markdown/plugins/channels.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
import { clientController } from "../../../controllers/client/ClientController";
|
||||
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
|
||||
|
||||
export function RenderChannel({ match }: CustomComponentProps) {
|
||||
const channel = clientController.getAvailableClient().channels.get(match)!;
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`${
|
||||
channel.server_id ? `/server/${channel.server_id}` : ""
|
||||
}/channel/${match}`}>{`#${channel.name}`}</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export const remarkChannels = createComponent(
|
||||
"channel",
|
||||
/<#([A-z0-9]{26})>/g,
|
||||
(match) => clientController.getAvailableClient().channels.has(match),
|
||||
);
|
||||
43
src/components/markdown/plugins/emoji.tsx
Normal file
43
src/components/markdown/plugins/emoji.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import styled from "styled-components";
|
||||
|
||||
import { emojiDictionary } from "../../../assets/emojis";
|
||||
import { clientController } from "../../../controllers/client/ClientController";
|
||||
import { parseEmoji } from "../../common/Emoji";
|
||||
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
|
||||
|
||||
const Emoji = styled.img`
|
||||
object-fit: contain;
|
||||
|
||||
height: var(--emoji-size);
|
||||
width: var(--emoji-size);
|
||||
margin: 0 0.05em 0 0.1em;
|
||||
vertical-align: -0.2em;
|
||||
`;
|
||||
|
||||
export function RenderEmoji({ match }: CustomComponentProps) {
|
||||
return (
|
||||
<Emoji
|
||||
alt={match}
|
||||
loading="lazy"
|
||||
className="emoji"
|
||||
draggable={false}
|
||||
src={parseEmoji(
|
||||
emojiDictionary[match as keyof typeof emojiDictionary],
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const RE_EMOJI = /:([a-zA-Z0-9_]+):/g;
|
||||
|
||||
export const remarkEmoji = createComponent(
|
||||
"emoji",
|
||||
RE_EMOJI,
|
||||
(match) =>
|
||||
match in emojiDictionary ||
|
||||
clientController.getAvailableClient().emojis?.has(match),
|
||||
);
|
||||
|
||||
export function isOnlyEmoji(text: string) {
|
||||
return text.replaceAll(RE_EMOJI, "").trim().length === 0;
|
||||
}
|
||||
53
src/components/markdown/plugins/mentions.tsx
Normal file
53
src/components/markdown/plugins/mentions.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { RE_MENTIONS } from "revolt.js";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { clientController } from "../../../controllers/client/ClientController";
|
||||
import UserShort from "../../common/user/UserShort";
|
||||
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
|
||||
|
||||
const Mention = styled.a`
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
padding-left: 2px;
|
||||
padding-right: 6px;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
font-weight: 600;
|
||||
text-decoration: none !important;
|
||||
background: var(--secondary-background);
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
|
||||
transition: 0.1s ease filter;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.75);
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: brightness(0.65);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
`;
|
||||
|
||||
export function RenderMention({ match }: CustomComponentProps) {
|
||||
return (
|
||||
<Mention>
|
||||
<UserShort
|
||||
showServerIdentity
|
||||
user={clientController.getAvailableClient().users.get(match)}
|
||||
/>
|
||||
</Mention>
|
||||
);
|
||||
}
|
||||
|
||||
export const remarkMention = createComponent("mention", RE_MENTIONS, (match) =>
|
||||
clientController.getAvailableClient().users.has(match),
|
||||
);
|
||||
108
src/components/markdown/plugins/remarkRegexComponent.ts
Normal file
108
src/components/markdown/plugins/remarkRegexComponent.ts
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import type { Handler } from "mdast-util-to-hast";
|
||||
import type { Plugin } from "unified";
|
||||
import { visit } from "unist-util-visit";
|
||||
|
||||
/**
|
||||
* Props given to custom components
|
||||
*/
|
||||
export interface CustomComponentProps {
|
||||
type: string;
|
||||
match: string;
|
||||
arg1: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new custom component matched by a given RegExp
|
||||
* @param type hast node type
|
||||
* @param regex Regex to match (must have one capture group)
|
||||
* @returns Unified Plugin
|
||||
*/
|
||||
export function createComponent(
|
||||
type: string,
|
||||
regex: RegExp,
|
||||
validator?: (match: string) => boolean,
|
||||
): Plugin {
|
||||
/**
|
||||
* Plugin which transforms a given RegExp into a custom component with given name.
|
||||
*/
|
||||
return () => {
|
||||
return (tree) => {
|
||||
visit(
|
||||
tree,
|
||||
"text",
|
||||
(
|
||||
node: { value: string },
|
||||
index: number,
|
||||
parent: { children: any[] },
|
||||
) => {
|
||||
const result = [];
|
||||
let start = 0;
|
||||
|
||||
regex.lastIndex = 0;
|
||||
|
||||
let match = regex.exec(node.value);
|
||||
|
||||
while (match) {
|
||||
if (!validator || validator(match[1])) {
|
||||
const position = match.index;
|
||||
|
||||
if (start !== position) {
|
||||
result.push({
|
||||
type: "text",
|
||||
value: node.value.slice(start, position),
|
||||
});
|
||||
}
|
||||
|
||||
result.push({
|
||||
type,
|
||||
match: match[1],
|
||||
arg1: match[2],
|
||||
});
|
||||
start = position + match[0].length;
|
||||
}
|
||||
|
||||
match = regex.exec(node.value);
|
||||
}
|
||||
|
||||
if (
|
||||
result.length > 0 &&
|
||||
parent &&
|
||||
typeof index === "number"
|
||||
) {
|
||||
if (start < node.value.length) {
|
||||
result.push({
|
||||
type: "text",
|
||||
value: node.value.slice(start),
|
||||
});
|
||||
}
|
||||
|
||||
parent.children.splice(index, 1, ...result);
|
||||
return index + result.length;
|
||||
}
|
||||
},
|
||||
);
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Pass-through a component as-is from remark to rehype
|
||||
* @param name Tag name
|
||||
* @returns Handler
|
||||
*/
|
||||
export const passThroughRehype: (name: string) => Handler =
|
||||
(name: string) => (h, node) =>
|
||||
h(node, name, node);
|
||||
|
||||
/**
|
||||
* Pass-through multiple components at once
|
||||
* @param keys Tags
|
||||
* @returns Handlers
|
||||
*/
|
||||
export const passThroughComponents = (...keys: string[]) => {
|
||||
const obj: Record<string, Handler> = {};
|
||||
for (const key of keys) {
|
||||
obj[key] = passThroughRehype(key);
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
45
src/components/markdown/plugins/spoiler.tsx
Normal file
45
src/components/markdown/plugins/spoiler.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import styled, { css } from "styled-components";
|
||||
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
|
||||
|
||||
const Spoiler = styled.span<{ shown: boolean }>`
|
||||
padding: 0 2px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: transparent;
|
||||
background: #151515;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
> * {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.shown &&
|
||||
css`
|
||||
cursor: auto;
|
||||
user-select: all;
|
||||
color: var(--foreground);
|
||||
background: var(--secondary-background);
|
||||
|
||||
> * {
|
||||
opacity: 1;
|
||||
pointer-events: unset;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export function RenderSpoiler({ match }: CustomComponentProps) {
|
||||
const [shown, setShown] = useState(false);
|
||||
|
||||
return (
|
||||
<Spoiler shown={shown} onClick={() => setShown(true)}>
|
||||
{match}
|
||||
</Spoiler>
|
||||
);
|
||||
}
|
||||
|
||||
export const remarkSpoiler = createComponent("spoiler", /!!([^!]+)!!/g);
|
||||
39
src/components/markdown/plugins/timestamps.ts
Normal file
39
src/components/markdown/plugins/timestamps.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import type { Handler } from "mdast-util-to-hast";
|
||||
|
||||
import { dayjs } from "../../../context/Locale";
|
||||
|
||||
import { createComponent } from "./remarkRegexComponent";
|
||||
|
||||
export const timestampHandler: Handler = (h, { match, arg1 }) => {
|
||||
if (isNaN(match)) return { type: "text", value: match };
|
||||
const date = dayjs.unix(match);
|
||||
|
||||
let value = "";
|
||||
switch (arg1) {
|
||||
case "t":
|
||||
value = date.format("hh:mm");
|
||||
break;
|
||||
case "T":
|
||||
value = date.format("hh:mm:ss");
|
||||
break;
|
||||
case "R":
|
||||
value = date.fromNow();
|
||||
break;
|
||||
case "D":
|
||||
value = date.format("DD MMMM YYYY");
|
||||
break;
|
||||
case "F":
|
||||
value = date.format("dddd, DD MMMM YYYY hh:mm");
|
||||
break;
|
||||
default:
|
||||
value = date.format("DD MMMM YYYY hh:mm");
|
||||
break;
|
||||
}
|
||||
|
||||
return h(null, "code", {}, [{ type: "text", value }]);
|
||||
};
|
||||
|
||||
export const remarkTimestamps = createComponent(
|
||||
"timestamp",
|
||||
/<t:([0-9]+)(?::(\w))?>/g,
|
||||
);
|
||||
|
|
@ -210,10 +210,6 @@ class ModalControllerExtended extends ModalController<Modal> {
|
|||
const settings = getApplicationState().settings;
|
||||
|
||||
switch (link.type) {
|
||||
case "profile": {
|
||||
this.push({ type: "user_profile", user_id: link.id });
|
||||
break;
|
||||
}
|
||||
case "navigate": {
|
||||
history.push(link.path);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
type LinkType =
|
||||
| { type: "profile"; id: string }
|
||||
| { type: "navigate"; path: string; navigation_type?: null }
|
||||
| {
|
||||
type: "navigate";
|
||||
path: string;
|
||||
navigation_type: "channel";
|
||||
channel_id: string;
|
||||
}
|
||||
| { type: "external"; href: string; url: URL }
|
||||
| { type: "none" };
|
||||
|
|
@ -17,9 +13,6 @@ const ALLOWED_ORIGINS = [
|
|||
"local.revolt.chat",
|
||||
];
|
||||
|
||||
const CHANNEL_PATH_RE =
|
||||
/^\/server\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}\/channel\/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}$/;
|
||||
|
||||
export function determineLink(href?: string): LinkType {
|
||||
let internal,
|
||||
url: URL | null = null;
|
||||
|
|
@ -30,29 +23,12 @@ export function determineLink(href?: string): LinkType {
|
|||
|
||||
if (ALLOWED_ORIGINS.includes(url.hostname)) {
|
||||
const path = url.pathname;
|
||||
if (path.startsWith("/@")) {
|
||||
const id = path.substr(2);
|
||||
if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
|
||||
return { type: "profile", id };
|
||||
}
|
||||
} else {
|
||||
if (CHANNEL_PATH_RE.test(path)) {
|
||||
return {
|
||||
type: "navigate",
|
||||
path,
|
||||
navigation_type: "channel",
|
||||
channel_id: path.slice(43),
|
||||
};
|
||||
}
|
||||
return { type: "navigate", path };
|
||||
}
|
||||
|
||||
internal = true;
|
||||
return { type: "navigate", path };
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
if (!internal && url) {
|
||||
if (url.protocol !== "javascript") {
|
||||
if (!url.protocol.startsWith("javascript")) {
|
||||
return { type: "external", href, url };
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue