Merge pull request #2227 from nextcloud/feature/2184-custom-containers

New feature: Callouts
nextcloud · Mar 15, 2022 · 646376b · 646376b
2 parents d808955 + 1bcf179
commit 646376b
Show file tree

Hide file tree

Showing 36 changed files with 471 additions and 41 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,6 @@
 module.exports = {
+	root: true,
 	extends: [
-		'@nextcloud'
-	]
+		'@nextcloud',
+	],
 }
diff --git a/css/icons.scss b/css/icons.scss
@@ -13,11 +13,13 @@
 @include icon-black-white('paragraph', 'text', 1);
 @include icon-black-white('code', 'text', 1);
 @include icon-black-white('image', 'text', 1);
+@include icon-black-white('help', 'text', 1);
+@include icon-black-white('warn', 'text', 1);
+@include icon-black-white('success', 'text', 1);
 @include icon-black-white('emoji', 'text', 1);
 @include icon-black-white('h1', 'text', 1);
 @include icon-black-white('h2', 'text', 1);
 @include icon-black-white('h3', 'text', 1);
 @include icon-black-white('h4', 'text', 1);
 @include icon-black-white('h5', 'text', 1);
 @include icon-black-white('h6', 'text', 1);
-
diff --git a/css/prosemirror.scss b/css/prosemirror.scss
@@ -190,6 +190,68 @@ 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);
+		}
+	}
+
 }
 
 .ProseMirror-focused .ProseMirror-gapcursor {

diff --git a/cypress/.eslintrc.json b/cypress/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+	"extends": [
+		"plugin:cypress/recommended"
+	]
+}
diff --git a/cypress/integration/workspace.spec.js b/cypress/integration/workspace.spec.js
@@ -20,7 +20,6 @@
  *
  */
 
-
 import { randHash } from '../utils/'
 const randUser = randHash()
 
@@ -57,7 +56,7 @@ describe('Workspace', function() {
 			['bold', 'strong'],
 			['italic', 'em'],
 			['underline', 'u'],
-			['strike', 's']
+			['strike', 's'],
 		].forEach(([button, tag]) => {
 			menuButton(button)
 				.click()
@@ -152,6 +151,68 @@ describe('Workspace', function() {
 		cy.get('.empty-workspace').should('contain', 'Ajoutez des notes, listes ou liens')
 	})
 
+	describe('callouts', () => {
+		const types = ['info', 'warn', 'error', 'success']
+		it('create callouts', () => {
+			const workspace = openWorkspace()
+			workspace.type('Callout')
+
+			types.forEach(type => {
+				// enable callout
+				menuButton('info').click()
+				submenuButton(type).click()
+
+				// check if is active
+				menuButton(type).should('have.class', 'is-active')
+
+				// check content
+				cy.get(`.ProseMirror .callout.callout-${type}`)
+					.should('contain', 'Callout')
+
+				// disable
+				menuButton(type).click()
+				submenuButton(type).click()
+
+				// check if is inactive
+				menuButton('info').should('not.have.class', 'is-active')
+			})
+		})
+
+		it('toggle callouts', () => {
+			const workspace = openWorkspace()
+			workspace.type('Callout')
+
+			const [first, ...rest] = types
+
+			let last = first
+
+			// enable callout
+			menuButton('info').click()
+			submenuButton(first).click()
+
+			rest.forEach(type => {
+				// enable callout
+				menuButton(last).click()
+				submenuButton(type).click()
+
+				last = type
+
+				// check if is active
+				menuButton(type).should('have.class', 'is-active')
+
+				// check content
+				cy.get(`.ProseMirror .callout.callout-${type}`)
+					.should('contain', 'Callout')
+			})
+
+			// disable
+			menuButton(last).click()
+			submenuButton(last).click()
+
+			// check if is inactive
+			menuButton('info').should('not.have.class', 'is-active')
+		})
+	})
 })
 
 const menuButton = (name) => {

diff --git a/img/help.svg b/img/help.svg
diff --git a/img/success.svg b/img/success.svg
diff --git a/img/warn.svg b/img/warn.svg
diff --git a/js/editor-collab.js b/js/editor-collab.js
diff --git a/js/editor-collab.js.map b/js/editor-collab.js.map
diff --git a/js/editor-rich.js b/js/editor-rich.js
diff --git a/js/editor-rich.js.map b/js/editor-rich.js.map
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.LICENSE.txt b/js/editor.js.LICENSE.txt
@@ -224,3 +224,25 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+/*
+ * @copyright Copyright (c) 2022 Vinicius Reis <[email protected]>
+ *
+ * @author Vinicius Reis <[email protected]>
+ *
+ * @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/>.
+ *
+ */
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/js/vendors.js b/js/vendors.js
diff --git a/js/vendors.js.map b/js/vendors.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
 		"highlight.js": "^10.7.2",
 		"lowlight": "^1.20.0",
 		"markdown-it": "^12.3.2",
+		"markdown-it-container": "^3.0.0",
 		"markdown-it-task-lists": "^2.1.1",
 		"prosemirror-collab": "^1.2.2",
 		"prosemirror-inputrules": "^1.1.3",
@@ -100,6 +101,7 @@
 		"babel-core": "^7.0.0-bridge.0",
 		"cypress": "^9.5.1",
 		"cypress-file-upload": "^5.0.8",
+		"eslint-plugin-cypress": "^2.12.1",
 		"jest": "^27.5.1",
 		"jest-environment-jsdom": "^27.5.1",
 		"jest-serializer-vue": "^2.0.2",

diff --git a/src/EditorFactory.js b/src/EditorFactory.js
@@ -44,6 +44,7 @@ import {
 	BulletList,
 	TaskList,
 	TaskItem,
+	Callout,
 } from './nodes'
 import { Markdown, Emoji } from './extensions'
 import { translate as t } from '@nextcloud/l10n'
@@ -89,6 +90,7 @@ const createEditor = ({ content, onCreate, onUpdate, extensions, enableRichEditi
 			ListItem,
 			TaskList,
 			TaskItem,
+			Callout,
 			Underline,
 			Image.configure({ currentDirectory, inline: true }),
 			Emoji.configure({

diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
@@ -259,7 +259,7 @@ export default {
 				class: 'icon-image',
 			}, {
 				label: t('text', 'Formatting help'),
-				class: 'icon-info',
+				class: 'icon-help',
 				click: () => {
 					this.$emit('show-help')
 				},