diff options
author | Max <max@nextcloud.com> | 2022-06-01 12:33:53 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-06-07 20:42:04 +0300 |
commit | eed9f8bbd4f60738d5e5e1e4276d41798aeca2a3 (patch) | |
tree | e198cdc4bef4647fb7f9d1486ec88390da163e2c /src/components/PlainTextReader.vue | |
parent | 77a499e0637de605d63946623b29eb1fb154cbaf (diff) |
rename {Rich,Plain}textReader to {Rich,Plain}TextReader
Be consistent with other uses of `RichText` and `PlainText`.
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src/components/PlainTextReader.vue')
-rw-r--r-- | src/components/PlainTextReader.vue | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/src/components/PlainTextReader.vue b/src/components/PlainTextReader.vue new file mode 100644 index 000000000..8535233ef --- /dev/null +++ b/src/components/PlainTextReader.vue @@ -0,0 +1,78 @@ +<!-- + - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> + - + - @author Julius Härtl <jus@bitgrid.net> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <EditorContent v-if="$editor" id="read-only-editor" :editor="$editor" /> +</template> + +<script> +import { Editor } from '@tiptap/core' +import { PlainText } from './../extensions/index.js' +import { EditorContent } from '@tiptap/vue-2' +import escapeHtml from 'escape-html' + +export default { + name: 'PlainTextReader', + components: { EditorContent }, + props: { + content: { + type: String, + required: true, + }, + }, + + computed: { + htmlContent() { + return '<pre>' + escapeHtml(this.content) + '</pre>' + }, + }, + + watch: { + content() { + this.updateContent() + }, + }, + + created() { + this.$editor = this.createEditor() + this.$editor.setOptions({ editable: false }) + }, + + beforeDestroy() { + this.$editor.destroy() + }, + + methods: { + createEditor() { + return new Editor({ + content: this.htmlContent, + extensions: [PlainText], + }) + }, + + updateContent() { + this.$editor.commands.setContent(this.htmlContent) + }, + }, + +} +</script> |