diff options
author | Max <max@nextcloud.com> | 2022-05-12 13:45:20 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-06-07 20:41:59 +0300 |
commit | 6c592987e0ecd30f453f776f954b7760b9faf7d1 (patch) | |
tree | 25608058fdcfca939696ed071efaa72b095e3982 /src | |
parent | b0d98f74a630bfd351a7188c381084fb42626a09 (diff) |
refactor: split Reader into Plaintext and Richtext readers
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/PlaintextReader.vue | 89 | ||||
-rw-r--r-- | src/components/Reader.vue | 89 | ||||
-rw-r--r-- | src/components/RichtextReader.vue | 97 |
3 files changed, 194 insertions, 81 deletions
diff --git a/src/components/PlaintextReader.vue b/src/components/PlaintextReader.vue new file mode 100644 index 000000000..5c2e85624 --- /dev/null +++ b/src/components/PlaintextReader.vue @@ -0,0 +1,89 @@ +<!-- + - @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 }, + inject: { + extensions: { default: [] }, + }, + props: { + content: { + type: String, + required: true, + }, + richTextOptions: { + type: Object, + default: () => {}, + }, + }, + data: () => { + return { + editor: null, + } + }, + + computed: { + htmlContent() { + return '<pre>' + escapeHtml(this.content) + '</pre>' + }, + }, + + watch: { + content() { + this.updateContent() + }, + }, + + mounted() { + 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> diff --git a/src/components/Reader.vue b/src/components/Reader.vue index 864d8979a..e79fb1759 100644 --- a/src/components/Reader.vue +++ b/src/components/Reader.vue @@ -21,22 +21,20 @@ --> <template> - <EditorContent v-if="editor" id="read-only-editor" :editor="editor" /> + <RichtextReader v-if="isRichText" + :rich-text-options="richTextOptions" + :content="content" /> + <PlaintextReader v-else + :content="content" /> </template> <script> -import { Editor } from '@tiptap/core' -import { PlainText, RichText } from './../extensions/index.js' -import { EditorContent } from '@tiptap/vue-2' -import escapeHtml from 'escape-html' -import markdownit from './../markdownit/index.js' +import PlaintextReader from './PlaintextReader.vue' +import RichtextReader from './RichtextReader.vue' export default { name: 'Reader', - components: { EditorContent }, - inject: { - extensions: { default: [] }, - }, + components: { PlaintextReader, RichtextReader }, props: { content: { type: String, @@ -46,77 +44,6 @@ export default { type: Boolean, default: true, }, - richTextOptions: { - type: Object, - default: () => {}, - }, - }, - data: () => { - return { - editor: null, - } - }, - - computed: { - htmlContent() { - return this.isRichEditor - ? markdownit.render(this.content) - : '<pre>' + escapeHtml(this.content) + '</pre>' - }, - }, - - watch: { - content() { - this.updateContent() - }, - }, - mounted() { - this.editor = this.isRichEditor - ? this.createRichEditor() - : this.createPlainEditor() - this.editor.setOptions({ editable: false }) - }, - beforeDestroy() { - this.editor.destroy() - }, - methods: { - - createRichEditor() { - return new Editor({ - content: this.htmlContent, - extensions: [ - RichText.configure({ - ...this.richTextOptions, - link: { - onClick: (event, attrs) => this.$emit('click-link', event, attrs), - }, - }), - ...this.extensions, - ], - }) - }, - - createPlainEditor() { - return new Editor({ - content: this.htmlContent, - extensions: [PlainText], - }) - }, - - /* Stop the browser from opening links. - * Clicks are handled inside the Link mark just like in edit mode. - */ - preventOpeningLinks() { - this.$el.addEventListener('click', event => { - if (event.target.closest('a')) { - event.preventDefault() - } - }) - }, - - updateContent() { - this.editor.commands.setContent(this.htmlContent) - }, }, } </script> diff --git a/src/components/RichtextReader.vue b/src/components/RichtextReader.vue new file mode 100644 index 000000000..523a01dfb --- /dev/null +++ b/src/components/RichtextReader.vue @@ -0,0 +1,97 @@ +<!-- + - @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 { RichText } from './../extensions/index.js' +import { EditorContent } from '@tiptap/vue-2' +import markdownit from './../markdownit/index.js' + +export default { + name: 'RichtextReader', + components: { EditorContent }, + inject: { + extensions: { default: [] }, + }, + props: { + content: { + type: String, + required: true, + }, + richTextOptions: { + type: Object, + default: () => {}, + }, + }, + data: () => { + return { + editor: null, + } + }, + + computed: { + htmlContent() { + return markdownit.render(this.content) + }, + }, + + watch: { + content() { + this.updateContent() + }, + }, + + mounted() { + this.editor = this.createEditor() + this.editor.setOptions({ editable: false }) + }, + + beforeDestroy() { + this.editor.destroy() + }, + + methods: { + createEditor() { + return new Editor({ + content: this.htmlContent, + extensions: [ + RichText.configure({ + ...this.richTextOptions, + link: { + onClick: (event, attrs) => this.$emit('click-link', event, attrs), + }, + }), + ...this.extensions, + ], + }) + }, + + updateContent() { + this.editor.commands.setContent(this.htmlContent) + }, + }, +} +</script> |