diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index cfe8f820..dc5e75bc 100644
--- a/routes/_components/Status.html
+++ b/routes/_components/Status.html
@@ -32,8 +32,8 @@
{{/if}}
{{#if !status.spoiler_text || spoilerShown}}
-
- {{{status.content}}}
+
+ {{{hydratedContent}}}
{{/if}}
{{#if originalMediaAttachments && originalMediaAttachments.length}}
@@ -161,6 +161,12 @@
font-size: 0.9em;
}
+ :global(.status-content .status-emoji) {
+ width: 20px;
+ height: 20px;
+ margin: -3px 0;
+ }
+
:global(.status-content p) {
margin: 0 0 20px;
}
@@ -283,12 +289,11 @@
import Toolbar from './Toolbar.html'
import { mark, stop } from '../_utils/marks'
import IntlRelativeFormat from 'intl-relativeformat'
+ import { replaceAll } from '../_utils/replaceAll'
+
const relativeFormat = new IntlRelativeFormat('en-US');
export default {
- oncreate() {
- this.hydrateHtml()
- },
components: {
Avatar,
Media,
@@ -304,31 +309,38 @@
},
originalStatus: (status) => status.reblog ? status.reblog : status,
originalAccount: (originalStatus) => originalStatus.account,
- originalMediaAttachments: (originalStatus) => originalStatus.media_attachments
+ originalMediaAttachments: (originalStatus) => originalStatus.media_attachments,
+ hydratedContent: (originalStatus) => {
+ let status = originalStatus
+ let content = status.content
+ if (status.tags && status.tags.length) {
+ for (let tag of status.tags) {
+ let {name, url} = tag
+ content = replaceAll(content, url, `/tags/${name}`)
+ }
+ }
+ if (status.emojis && status.emojis.length) {
+ for (let emoji of status.emojis) {
+ let { shortcode, url } = emoji
+ let shortcodeWithColons = `:${shortcode}:`
+ content = replaceAll(
+ content,
+ shortcodeWithColons,
+ `
`
+ )
+ }
+ }
+ return content
+ }
},
methods: {
onClickSpoilerButton() {
this.set({spoilerShown: !this.get('spoilerShown')})
- this.hydrateHtml()
this.fire('recalculateHeight')
},
onClickSensitiveMediaButton() {
this.set({sensitiveShown: !this.get('sensitiveShown')})
this.fire('recalculateHeight')
- },
- hydrateHtml() {
- let status = this.get('originalStatus')
- if (status.tags && status.tags.length && this.refs.contentNode) {
- let anchorTags = this.refs.contentNode.querySelectorAll('a[rel=tag]')
- for (let tag of status.tags) {
- let {name, url} = tag
- for (let anchorTag of anchorTags) {
- if (anchorTag.getAttribute('href') === url) {
- anchorTag.setAttribute('href', `/tags/${name}`)
- }
- }
- }
- }
}
}
}
diff --git a/routes/_utils/replaceAll.js b/routes/_utils/replaceAll.js
new file mode 100644
index 00000000..2460b753
--- /dev/null
+++ b/routes/_utils/replaceAll.js
@@ -0,0 +1,16 @@
+export function replaceAll(string, replacee, replacement) {
+ if (!string.length || !replacee.length || !replacement.length) {
+ return string
+ }
+ let idx
+ let pos = 0
+ while (true) {
+ idx = string.indexOf(replacee, pos)
+ if (idx === -1) {
+ break
+ }
+ string = string.substring(0, idx) + replacement + string.substring(idx + replacee.length)
+ pos = idx + replacement.length
+ }
+ return string
+}
\ No newline at end of file