From 82288c4607816f943b67eb4c56f67977be03f700 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Sun, 14 Aug 2022 19:28:19 +0200 Subject: Cleanup old html rendering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/style.scss | 63 ----------------------------------------------- src/extensions/Mention.js | 49 ------------------------------------ 2 files changed, 112 deletions(-) diff --git a/css/style.scss b/css/style.scss index d61a88595..7aab36350 100644 --- a/css/style.scss +++ b/css/style.scss @@ -102,66 +102,3 @@ li.ProseMirror-selectednode:after { animation-name: fadeInLeft; } -/****************************************\ -# Mentions User Bubble Style -\****************************************/ -$bubble-height: 20px; -$bubble-max-width: 150px; -$bubble-padding: 2px; -$bubble-avatar-size: $bubble-height - 2 * $bubble-padding; -.mention-bubble { - &--primary &__content { - color: var(--color-primary-text); - background-color: var(--color-primary-element); - } - &__wrapper { - max-width: $bubble-max-width; - // Align with text - height: $bubble-height - $bubble-padding; - vertical-align: text-bottom; - display: inline-flex; - align-items: center; - } - &__content { - display: inline-flex; - overflow: hidden; - align-items: center; - max-width: 100%; - height: $bubble-height ; - -webkit-user-select: none; - user-select: none; - padding-right: $bubble-padding * 3; - padding-left: $bubble-padding; - border-radius: math.div($bubble-height, 2); - background-color: var(--color-background-dark); - } - &__icon { - position: relative; - width: $bubble-avatar-size; - height: $bubble-avatar-size; - border-radius: math.div($bubble-avatar-size, 2); - background-color: var(--color-background-darker); - background-repeat: no-repeat; - background-position: center; - background-size: $bubble-avatar-size - 2 * $bubble-padding; - &--with-avatar { - color: inherit; - background-size: cover; - } - } - &__title { - overflow: hidden; - margin-left: $bubble-padding; - white-space: nowrap; - text-overflow: ellipsis; - // Put label in ::before so it is not selectable - &::before { - content: attr(title); - } - } - // Hide the mention id so it is selectable - &__select { - position: absolute; - z-index: -1; - left: -1000px; - } diff --git a/src/extensions/Mention.js b/src/extensions/Mention.js index 4f297c21d..6f548ef20 100644 --- a/src/extensions/Mention.js +++ b/src/extensions/Mention.js @@ -1,16 +1,7 @@ -import { mergeAttributes } from '@tiptap/core' import TipTapMention from '@tiptap/extension-mention' -import { generateUrl } from '@nextcloud/router' import Mention from './Mention.vue' import { VueNodeViewRenderer } from '@tiptap/vue-2' -const getAvatarUrl = (user, size) => { - return generateUrl('/avatar/{user}/{size}', { - user, - size, - }) -} - export default TipTapMention.extend({ parseHTML() { return [ @@ -28,46 +19,6 @@ export default TipTapMention.extend({ return VueNodeViewRenderer(Mention) }, - renderHTML({ node, HTMLAttributes }) { - const avatarUrl = getAvatarUrl(node.attrs.id, 44) - - return [ - 'span', - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { - 'data-type': this.name, - class: 'mention-bubble mention-bubble--primary', - contenteditable: false, - }), - [ - 'span', - { - class: 'mention-bubble__wrapper', - }, - [ - 'span', - { - class: 'mention-bubble__content', - }, - [ - 'span', - { - class: 'mention-bubble__icon mention-bubble__icon--with-avatar', - style: avatarUrl ? `background-image: url('${avatarUrl}')` : '', - }, - ], - [ - 'span', - { - role: 'heading', - class: 'mention-bubble__title', - title: node.attrs.id, - }, - ], - ], - ], - ] - }, - toMarkdown(state, node) { state.write(' ') state.write(`@[${node.attrs.id}](mention://user/${node.attrs.id})`) -- cgit v1.2.3