mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
feat(content): serialize custom emoji
This commit is contained in:
parent
e76aac3b56
commit
66393cd838
4 changed files with 80 additions and 26 deletions
|
@ -54,7 +54,7 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
|
||||||
.replace(/:([\w-]+?):/g, (_, name) => {
|
.replace(/:([\w-]+?):/g, (_, name) => {
|
||||||
const emoji = customEmojis[name]
|
const emoji = customEmojis[name]
|
||||||
if (emoji)
|
if (emoji)
|
||||||
return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" />`
|
return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
|
||||||
return `:${name}:`
|
return `:${name}:`
|
||||||
})
|
})
|
||||||
// handle code blocks
|
// handle code blocks
|
||||||
|
@ -75,10 +75,10 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
|
||||||
// @ts-expect-error casing
|
// @ts-expect-error casing
|
||||||
const text = node.value as string
|
const text = node.value as string
|
||||||
const converted = text
|
const converted = text
|
||||||
|
.replace(/\*\*\*(.*?)\*\*\*/g, '<b><em>$1</em></b>')
|
||||||
.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
|
.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
|
||||||
.replace(/\*(.*?)\*/g, '<em>$1</em>')
|
.replace(/\*(.*?)\*/g, '<em>$1</em>')
|
||||||
.replace(/~~(.*?)~~/g, '<del>$1</del>')
|
.replace(/~~(.*?)~~/g, '<del>$1</del>')
|
||||||
.replace(/__(.*?)__/g, '<u>$1</u>')
|
|
||||||
.replace(/`([^`]+?)`/g, '<code>$1</code>')
|
.replace(/`([^`]+?)`/g, '<code>$1</code>')
|
||||||
|
|
||||||
if (converted !== text)
|
if (converted !== text)
|
||||||
|
@ -149,7 +149,7 @@ export function htmlToText(html: string) {
|
||||||
return tree.childNodes.map(n => treeToText(n)).join('').trim()
|
return tree.childNodes.map(n => treeToText(n)).join('').trim()
|
||||||
}
|
}
|
||||||
|
|
||||||
function treeToText(input: Node): string {
|
export function treeToText(input: Node): string {
|
||||||
let pre = ''
|
let pre = ''
|
||||||
let body = ''
|
let body = ''
|
||||||
let post = ''
|
let post = ''
|
||||||
|
@ -185,9 +185,16 @@ function treeToText(input: Node): string {
|
||||||
pre = '*'
|
pre = '*'
|
||||||
post = '*'
|
post = '*'
|
||||||
}
|
}
|
||||||
|
else if (input.nodeName === 'del') {
|
||||||
|
pre = '~~'
|
||||||
|
post = '~~'
|
||||||
|
}
|
||||||
|
|
||||||
if ('childNodes' in input)
|
if ('childNodes' in input)
|
||||||
body = input.childNodes.map(n => treeToText(n)).join('')
|
body = input.childNodes.map(n => treeToText(n)).join('')
|
||||||
|
|
||||||
|
if (input.nodeName === 'img' && input.attrs.some(attr => attr.name === 'class' && attr.value.includes('custom-emoji')))
|
||||||
|
return `:${input.attrs.find(attr => attr.name === 'data-emoji-id')?.value}:`
|
||||||
|
|
||||||
return pre + body + post
|
return pre + body + post
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,6 +31,7 @@ exports[`content-rich > custom emoji 1`] = `
|
||||||
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
|
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
|
||||||
alt=\\":nuxt:\\"
|
alt=\\":nuxt:\\"
|
||||||
class=\\"custom-emoji\\"
|
class=\\"custom-emoji\\"
|
||||||
|
data-emoji-id=\\"nuxt\\"
|
||||||
/>
|
/>
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// Vitest Snapshot v1
|
// Vitest Snapshot v1
|
||||||
|
|
||||||
exports[`html-parse > code frame 1`] = `
|
exports[`html-parse > code frame > html 1`] = `
|
||||||
"<p>Testing code block</p>
|
"<p>Testing code block</p>
|
||||||
<p></p>
|
<p></p>
|
||||||
<pre><code class=\\"language-ts\\">import { useMouse, usePreferredDark } from '@vueuse/core'
|
<pre><code class=\\"language-ts\\">import { useMouse, usePreferredDark } from '@vueuse/core'
|
||||||
|
@ -13,7 +13,20 @@ const isDark = usePreferredDark()</code></pre>
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`html-parse > code frame 2 1`] = `
|
exports[`html-parse > code frame > text 1`] = `
|
||||||
|
"Testing code block
|
||||||
|
|
||||||
|
\`\`\`ts
|
||||||
|
import { useMouse, usePreferredDark } from '@vueuse/core'
|
||||||
|
|
||||||
|
// tracks mouse position
|
||||||
|
const { x, y } = useMouse()
|
||||||
|
// is the user prefers dark theme
|
||||||
|
const isDark = usePreferredDark()
|
||||||
|
\`\`\`"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`html-parse > code frame 2 > html 1`] = `
|
||||||
"<p>
|
"<p>
|
||||||
<span class=\\"h-card\\"
|
<span class=\\"h-card\\"
|
||||||
><a href=\\"https://mas.to/@antfu\\" class=\\"u-url mention\\"
|
><a href=\\"https://mas.to/@antfu\\" class=\\"u-url mention\\"
|
||||||
|
@ -27,27 +40,48 @@ exports[`html-parse > code frame 2 1`] = `
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`html-parse > custom emoji 1`] = `
|
exports[`html-parse > code frame 2 > text 1`] = `
|
||||||
|
"@antfu Testing
|
||||||
|
|
||||||
|
\`\`\`ts
|
||||||
|
const a = hello
|
||||||
|
\`\`\`"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`html-parse > custom emoji > html 1`] = `
|
||||||
"Daniel Roe
|
"Daniel Roe
|
||||||
<img
|
<img
|
||||||
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
|
src=\\"https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png\\"
|
||||||
alt=\\":nuxt:\\"
|
alt=\\":nuxt:\\"
|
||||||
class=\\"custom-emoji\\"
|
class=\\"custom-emoji\\"
|
||||||
|
data-emoji-id=\\"nuxt\\"
|
||||||
/>
|
/>
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`html-parse > empty 1`] = `""`;
|
exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`;
|
||||||
|
|
||||||
exports[`html-parse > inline markdown 1`] = `
|
exports[`html-parse > empty > html 1`] = `""`;
|
||||||
"<p>text <code>code</code> <b>bold</b> <em>italic</em></p>
|
|
||||||
|
exports[`html-parse > empty > text 1`] = `""`;
|
||||||
|
|
||||||
|
exports[`html-parse > inline markdown > html 1`] = `
|
||||||
|
"<p>text <code>code</code> <b>bold</b> <em>italic</em> <del>del</del></p>
|
||||||
<p></p>
|
<p></p>
|
||||||
<pre><code class=\\"language-js\\">code block</code></pre>
|
<pre><code class=\\"language-js\\">code block</code></pre>
|
||||||
<p></p>
|
<p></p>
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`html-parse > link + mention 1`] = `
|
exports[`html-parse > inline markdown > text 1`] = `
|
||||||
|
"text \`code\` **bold** *italic* ~~del~~
|
||||||
|
|
||||||
|
\`\`\`js
|
||||||
|
code block
|
||||||
|
\`\`\`"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`html-parse > link + mention > html 1`] = `
|
||||||
"<p>
|
"<p>
|
||||||
Happy 🤗 we’re now using
|
Happy 🤗 we’re now using
|
||||||
<span class=\\"h-card\\"
|
<span class=\\"h-card\\"
|
||||||
|
@ -71,3 +105,5 @@ exports[`html-parse > link + mention 1`] = `
|
||||||
</p>
|
</p>
|
||||||
"
|
"
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`html-parse > link + mention > text 1`] = `"Happy 🤗 we’re now using @vitest (migrated from chai+mocha) https://github.com/ayoayco/astro-reactive-library/pull/203"`;
|
||||||
|
|
|
@ -2,22 +2,24 @@ import type { Emoji } from 'masto'
|
||||||
import { describe, expect, it } from 'vitest'
|
import { describe, expect, it } from 'vitest'
|
||||||
import { format } from 'prettier'
|
import { format } from 'prettier'
|
||||||
import { serialize } from 'parse5'
|
import { serialize } from 'parse5'
|
||||||
import { parseMastodonHTML } from '~/composables/content'
|
import { parseMastodonHTML, treeToText } from '~/composables/content'
|
||||||
|
|
||||||
describe('html-parse', () => {
|
describe('html-parse', () => {
|
||||||
it('empty', async () => {
|
it('empty', async () => {
|
||||||
const { formatted } = await render('')
|
const { formatted, serializedText } = await render('')
|
||||||
expect(formatted).toMatchSnapshot()
|
expect(formatted).toMatchSnapshot('html')
|
||||||
|
expect(serializedText).toMatchSnapshot('text')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('link + mention', async () => {
|
it('link + mention', async () => {
|
||||||
// https://fosstodon.org/@ayo/109383002937620723
|
// https://fosstodon.org/@ayo/109383002937620723
|
||||||
const { formatted } = await render('<p>Happy 🤗 we’re now using <span class="h-card"><a href="https://mas.to/@vitest" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>vitest</span></a></span> (migrated from chai+mocha) <a href="https://github.com/ayoayco/astro-reactive-library/pull/203" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/ayoayco/astro-react</span><span class="invisible">ive-library/pull/203</span></a></p>')
|
const { formatted, serializedText } = await render('<p>Happy 🤗 we’re now using <span class="h-card"><a href="https://mas.to/@vitest" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>vitest</span></a></span> (migrated from chai+mocha) <a href="https://github.com/ayoayco/astro-reactive-library/pull/203" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/ayoayco/astro-react</span><span class="invisible">ive-library/pull/203</span></a></p>')
|
||||||
expect(formatted).toMatchSnapshot()
|
expect(formatted).toMatchSnapshot('html')
|
||||||
|
expect(serializedText).toMatchSnapshot('text')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('custom emoji', async () => {
|
it('custom emoji', async () => {
|
||||||
const { formatted } = await render('Daniel Roe :nuxt:', {
|
const { formatted, serializedText } = await render('Daniel Roe :nuxt:', {
|
||||||
nuxt: {
|
nuxt: {
|
||||||
shortcode: 'nuxt',
|
shortcode: 'nuxt',
|
||||||
url: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png',
|
url: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png',
|
||||||
|
@ -25,30 +27,35 @@ describe('html-parse', () => {
|
||||||
visibleInPicker: true,
|
visibleInPicker: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
expect(formatted).toMatchSnapshot()
|
expect(formatted).toMatchSnapshot('html')
|
||||||
|
expect(serializedText).toMatchSnapshot('text')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('code frame', async () => {
|
it('code frame', async () => {
|
||||||
// https://mas.to/@antfu/109396489827394721
|
// https://mas.to/@antfu/109396489827394721
|
||||||
const { formatted } = await render('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from '@vueuse/core'</p><p>// tracks mouse position<br />const { x, y } = useMouse()</p><p>// is the user prefers dark theme<br />const isDark = usePreferredDark()<br />```</p>')
|
const { formatted, serializedText } = await render('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from '@vueuse/core'</p><p>// tracks mouse position<br />const { x, y } = useMouse()</p><p>// is the user prefers dark theme<br />const isDark = usePreferredDark()<br />```</p>')
|
||||||
expect(formatted).toMatchSnapshot()
|
expect(formatted).toMatchSnapshot('html')
|
||||||
|
expect(serializedText).toMatchSnapshot('text')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('code frame 2', async () => {
|
it('code frame 2', async () => {
|
||||||
const { formatted } = await render('<p><span class=\"h-card\"><a href=\"https://mas.to/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
|
const { formatted, serializedText } = await render('<p><span class=\"h-card\"><a href=\"https://mas.to/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
|
||||||
expect(formatted).toMatchSnapshot()
|
expect(formatted).toMatchSnapshot('html')
|
||||||
|
expect(serializedText).toMatchSnapshot('text')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('inline markdown', async () => {
|
it('inline markdown', async () => {
|
||||||
const { formatted } = await render('<p>text `code` **bold** *italic*</p><p>```js<br />code block<br />```</p>')
|
const { formatted, serializedText } = await render('<p>text `code` **bold** *italic* ~~del~~</p><p>```js<br />code block<br />```</p>')
|
||||||
expect(formatted).toMatchSnapshot()
|
expect(formatted).toMatchSnapshot('html')
|
||||||
|
expect(serializedText).toMatchSnapshot('text')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
async function render(content: string, emojis?: Record<string, Emoji>) {
|
async function render(input: string, emojis?: Record<string, Emoji>) {
|
||||||
const node = parseMastodonHTML(content, emojis)
|
const tree = parseMastodonHTML(input, emojis)
|
||||||
const html = serialize(node)
|
const html = serialize(tree)
|
||||||
let formatted = ''
|
let formatted = ''
|
||||||
|
const serializedText = tree.childNodes.map(n => treeToText(n)).join('').trim()
|
||||||
|
|
||||||
try {
|
try {
|
||||||
formatted = format(html, {
|
formatted = format(html, {
|
||||||
|
@ -60,6 +67,9 @@ async function render(content: string, emojis?: Record<string, Emoji>) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
serializedText,
|
||||||
|
input,
|
||||||
|
tree,
|
||||||
html,
|
html,
|
||||||
formatted,
|
formatted,
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue