From 46ad51019984a08864a1f5a9500710418f17fe4b Mon Sep 17 00:00:00 2001
From: Vinicius Reis <vinicius.reis@nextcloud.com>
Date: Thu, 26 May 2022 16:25:26 -0300
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(#2345):=20make=20Callout?=
 =?UTF-8?q?=20as=20a=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
---
 css/prosemirror.scss                  |  62 -------------
 cypress/integration/workspace.spec.js |   4 +-
 src/nodes/Callout.vue                 | 122 ++++++++++++++++++++++++++
 src/nodes/Callouts.js                 |   9 +-
 4 files changed, 132 insertions(+), 65 deletions(-)
 create mode 100644 src/nodes/Callout.vue

diff --git a/css/prosemirror.scss b/css/prosemirror.scss
index 955fc404301..bb2d778e5a6 100644
--- a/css/prosemirror.scss
+++ b/css/prosemirror.scss
@@ -192,68 +192,6 @@ div.ProseMirror {
 		margin-right: 0;
 	}
 
-	// Callout Block
-	.callout {
-		background-color: var(--callout-background, var(--color-background-hover));
-		border-left-color: var(--callout-border, var(--color-primary-element));
-		border-radius: var(--border-radius);
-		padding: 1em;
-		padding-left: 2em;
-		border-left-width: 0.3em;
-		border-left-style: solid;
-		position: relative;
-		margin-bottom: 0.5em;
-		+ & {
-			margin-top: 0.5em;
-		}
-
-		// Block icon
-		&::before {
-			content: '';
-			background-image: var(--callout-icon, var(--icon-info-000));
-			background-size: contain;
-			position: absolute;
-			top: calc(50% - 8px);
-			left: 0.4em;
-			height: 16px;
-			width: 16px;
-		}
-
-		> p {
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		// Info (default) variables
-		&, &-info {
-			// --callout-background: var(--color-primary-light);
-			--callout-border: var(--color-primary-element);
-			--callout-icon: var(--icon-info-000);
-		}
-
-		// Warn variables
-		&-warn {
-			// --callout-background: var(--color-warning-hover);
-			--callout-border: var(--color-warning);
-			--callout-icon: var(--icon-text-warn-000);
-		}
-
-		// Error variables
-		&-error {
-			// --callout-background: var(--color-error-hover);
-			--callout-border: var(--color-error);
-			--callout-icon: var(--icon-error-000);
-		}
-
-		// Success variables
-		&-success {
-			// --callout-background: var(--color-success-hover);
-			--callout-border: var(--color-success);
-			--callout-icon: var(--icon-text-success-000);
-		}
-	}
-
 	// table variables
 	@at-root :root {
 		--table-color-border: var(--color-border);
diff --git a/cypress/integration/workspace.spec.js b/cypress/integration/workspace.spec.js
index b1ee8cf0929..1983b7b936c 100644
--- a/cypress/integration/workspace.spec.js
+++ b/cypress/integration/workspace.spec.js
@@ -191,7 +191,7 @@ describe('Workspace', function() {
 					.click()
 					.then(() => {
 						// check content
-						cy.get(`.ProseMirror .callout.callout-${type}`)
+						cy.get(`.ProseMirror .callout.callout--${type}`)
 							.should('contain', 'Callout')
 
 						// disable
@@ -216,7 +216,7 @@ describe('Workspace', function() {
 					const actionName = `callout-${type}`
 					return getSubmenuItem('callouts', actionName)
 						.click()
-						.then(() => cy.get(`.ProseMirror .callout.callout-${type}`))
+						.then(() => cy.get(`.ProseMirror .callout.callout--${type}`))
 						.should('contain', 'Callout')
 						.then(() => {
 							last = type
diff --git a/src/nodes/Callout.vue b/src/nodes/Callout.vue
new file mode 100644
index 00000000000..94ace5ab1e3
--- /dev/null
+++ b/src/nodes/Callout.vue
@@ -0,0 +1,122 @@
+<!--
+  - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @author Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @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>
+	<NodeViewWrapper data-text-el="callout"
+		class="callout"
+		:class="`callout--${type}`"
+		as="div">
+		<component :is="icon" class="callout__icon" />
+		<NodeViewContent class="callout__content" />
+	</NodeViewWrapper>
+</template>
+
+<script>
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+import { Positive, Warn, Danger, Info } from '../components/icons.js'
+
+const ICONS_MAP = {
+	info: Info,
+	success: Positive,
+	error: Danger,
+	warn: Warn,
+}
+
+export default {
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'Callout',
+	components: {
+		NodeViewWrapper,
+		NodeViewContent,
+	},
+	props: {
+		node: {
+			type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		icon() {
+			return ICONS_MAP[this.type] || Info
+		},
+		type() {
+			return this.node?.attrs?.type || 'info'
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.callout {
+	background-color: var(--callout-background, var(--color-background-hover));
+	border-left-color: var(--callout-border, var(--color-primary-element));
+	border-radius: var(--border-radius);
+	padding: 1em;
+	padding-left: 0.5em;
+	border-left-width: 0.3em;
+	border-left-style: solid;
+	position: relative;
+	margin-bottom: 0.5em;
+
+	display: flex;
+	align-items: center;
+    justify-content: flex-start;
+
+	+ & {
+		margin-top: 0.5em;
+	}
+
+	.callout__content {
+		margin-left: 1em;
+		&::v-deep p {
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	.callout__icon {
+		&, ::v-deep svg {
+			color: var(--callout-border);
+		}
+	}
+
+	// Info (default) variables
+	&, &--info {
+		--callout-border: var(--color-primary-element);
+	}
+
+	// Warn variables
+	&--warn {
+		--callout-border: var(--color-warning);
+	}
+
+	// Error variables
+	&--error {
+		--callout-border: var(--color-error);
+	}
+
+	// Success variables
+	&--success {
+		--callout-border: var(--color-success);
+	}
+}
+</style>
diff --git a/src/nodes/Callouts.js b/src/nodes/Callouts.js
index 44286ecd44a..f22031e9f75 100644
--- a/src/nodes/Callouts.js
+++ b/src/nodes/Callouts.js
@@ -20,9 +20,12 @@
  *
  */
 
-import { Node, mergeAttributes, isNodeActive } from '@tiptap/core'
+import { Node, isNodeActive, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-2'
 import { typesAvailable } from './../markdownit/callouts.js'
 
+import Callout from './Callout.vue'
+
 export default Node.create({
 
 	name: 'callout',
@@ -94,6 +97,10 @@ export default Node.create({
 		state.closeBlock(node)
 	},
 
+	addNodeView() {
+		return VueNodeViewRenderer(Callout)
+	},
+
 	addCommands() {
 		return {
 			setCallout: attributes => ({ commands }) => {