FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

client: add Markdown component

Browse source
This commit is contained in:
Johann150 2023-01-29 15:36:07 +01:00
parent 351a037959
commit 048cd549dd
Signed by: Johann150
GPG key ID: 9EE6577A2A06F8F1
3 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/client/package.json
View file

@ -33,12 +33,14 @@
"insert-text-at-cursor": "0.3.0",
"json5": "2.2.1",
"katex": "0.16.0",
"marked": "4.0.8",
"matter-js": "0.18.0",
"mfm-js": "0.23.3",
"photoswipe": "5.2.8",
"prismjs": "1.28.0",
"punycode": "2.1.1",
"sass": "1.53.0",
"sanitize-html": "2.8.0",
"stringz": "2.1.0",
"syuilo-password-strength": "0.0.1",
"talisman": "^1.1.4",
@ -57,8 +59,10 @@
},
"devDependencies": {
"@types/katex": "0.14.0",
"@types/marked": "4.0.8",
"@types/matter-js": "0.17.7",
"@types/punycode": "2.1.0",
"@types/sanitize-html": "2.8.0",
"@types/throttle-debounce": "5.0.0",
"@types/tinycolor2": "1.4.3",
"@types/uuid": "8.3.4",

31
packages/client/src/components/markdown.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-html="rendered"></span>
</template>
<script lang="ts" setup>
import { marked } from 'marked'
import sanitizeHtml from 'sanitize-html';
import * as foundkey from 'foundkey-js';
const props = defineProps<{
text: string;
author?: foundkey.entities.User;
customEmojis?: foundkey.entities.CustomEmoji[];
isNote?: boolean;
}>();
// TODO use extensions
// marked.use(...);
const rendered = sanitizeHtml(marked(props.text), {
allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ]),
allowedAttributes: {
a: [ 'href', 'name', 'target' ],
img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
span: [ 'class', 'data-*' ],
},
allowedSchemes: sanitizeHtml.defaults.allowedSchemes.concat([ 'gopher', 'gemini' ]),
disallowedTagsMode: 'escape',
});
</script>

3
packages/client/src/pages/page.vue
View file

@ -9,7 +9,7 @@
<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
</div>
<div class="content" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
<Mfm :text="page.text" :is-note="false"/>
<Markdown :text="page.text" :is-note="false"/>
</div>
<div class="actions">
<div class="like">
@ -65,6 +65,7 @@ import MkFollowButton from '@/components/follow-button.vue';
import MkContainer from '@/components/ui/container.vue';
import MkPagination from '@/components/ui/pagination.vue';
import MkPagePreview from '@/components/page-preview.vue';
import Markdown from '@/components/markdown.vue';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';