Migrate icons to vue material design icons

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);

css/style.scss

@@ -1,3 +1,7 @@
+:root {
+	--text-editor-max-width: 670px
+}
+
 .modal-container #editor-container {
   position: absolute;
 }
@@ -52,3 +56,20 @@ li.ProseMirror-selectednode:after {
     visibility: hidden;
   }
 }
+
+.animation-rotate {
+	animation: rotate var(--animation-duration, 0.8s) linear infinite;
+}
+
+// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInDown.css
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}

cypress/integration/images.spec.js

@@ -28,9 +28,22 @@ const randUser2 = randHash()
 let currentUser = randUser
 const attachmentFileNameToId = {}
 
-const ACTION_UPLOAD_LOCAL_FILE = 1
-const ACTION_INSERT_FROM_FILES = 2
-const ACTION_INSERT_FROM_LINK = 3
+const ACTION_UPLOAD_LOCAL_FILE = 'insert-image-upload'
+const ACTION_INSERT_FROM_FILES = 'insert-image-insert'
+// const ACTION_INSERT_FROM_LINK = 3
+
+/**
+ * @param {string} name name of file
+ * @param {string|null} requestAlias alias name
+ */
+function attachFile(name, requestAlias = null) {
+	if (requestAlias) {
+		cy.intercept({ method: 'POST', url: '**/upload' }).as(requestAlias)
+	}
+	return cy.getEditor()
+		.find('input[type="file"][data-text-el="image-file-input"]')
+		.attachFile(name)
+}
 
 /**
  * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
@@ -45,27 +58,15 @@ function fixedEncodeURIComponent(str) {
 /**
  * Open the image action menu and click one action
  *
- * @param actionIndex position of the action to be clicked
- * @param callback what happens once it's been clicked
+ * @param actionName position of the action to be clicked
  */
-const clickOnImageAction = (actionIndex, callback) => {
-	cy.get('#viewer .action-item.submenu')
-		.should('not.have.class', 'action-item--open')
+const clickOnImageAction = (actionName) => {
+	cy.getActionEntry('insert-image')
+		.click()
+
+	return cy.get('.popover.open')
+		.getActionEntry(actionName)
 		.click()
-		.should('have.class', 'action-item--open')
-
-	// get the popover ID to be able to find the related DOM element
-	return cy.get('#viewer .action-item.submenu > div.v-popover > .trigger')
-		.should('have.attr', 'aria-describedby')
-		.should('contain', 'popover_')
-		.then((popoverId) => {
-			cy.log('Click on the action entry')
-			cy.get('div#' + popoverId)
-				.should('have.class', 'open')
-				.find('li:nth-child(' + actionIndex + ')').click()
-				// our job here is done
-			callback(popoverId)
-		})
 }
 
 /**
@@ -120,17 +121,15 @@ const checkImage = (documentId, imageName, imageId, index) => {
  * @param {number|undefined} index of image
  */
 const waitForRequestAndCheckImage = (requestAlias, index) => {
-	return new Cypress.Promise((resolve, reject) => {
-		return cy.wait('@' + requestAlias).then((req) => {
+	return cy.wait('@' + requestAlias)
+		.then((req) => {
 			// the name of the created file on NC side is returned in the response
 			const fileId = req.response.body.id
 			const fileName = req.response.body.name
 			const documentId = req.response.body.documentId
 
-			checkImage(documentId, fileName, fileId, index)
-				.then(resolve, reject)
+			return checkImage(documentId, fileName, fileId, index)
 		})
-	})
 }
 
 describe('Test all image insertion methods', () => {
@@ -168,49 +167,50 @@ describe('Test all image insertion methods', () => {
 
 	it('Insert an image from files', () => {
 		cy.openFile('test.md')
-		clickOnImageAction(ACTION_INSERT_FROM_FILES, () => {
-			const requestAlias = 'insertPathRequest'
-			cy.intercept({ method: 'POST', url: '**/filepath' }).as(requestAlias)
+		clickOnImageAction(ACTION_INSERT_FROM_FILES)
+			.then(() => {
+				const requestAlias = 'insertPathRequest'
+				cy.intercept({ method: 'POST', url: '**/filepath' }).as(requestAlias)
 
-			cy.log('Select the file in the filepicker')
-			cy.get('#picker-filestable tr[data-entryname="github.png"]').click()
-			cy.log('Click OK in the filepicker')
-			cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
+				cy.log('Select the file in the filepicker')
+				cy.get('#picker-filestable tr[data-entryname="github.png"]').click()
+				cy.log('Click OK in the filepicker')
+				cy.get('.oc-dialog > .oc-dialog-buttonrow button').click()
 
-			waitForRequestAndCheckImage(requestAlias)
-		})
+				waitForRequestAndCheckImage(requestAlias)
+			})
 	})
 
 	it('Upload a local image', () => {
 		cy.openFile('test.md')
 		// in this case we almost could just attach the file to the input
 		// BUT we still need to click on the action because otherwise the command
 		// is not handled correctly when the upload has been done in <MenuBar>
-		clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE, () => {
-			const requestAlias = 'uploadRequest'
-			cy.intercept({ method: 'POST', url: '**/upload' }).as(requestAlias)
+		clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE)
+			.then(() => {
+				const requestAlias = 'uploadRequest'
+				cy.log('Upload the file through the input')
 
-			cy.log('Upload the file through the input')
-			cy.get('.menubar input[type="file"]').attachFile('table.png')
+				attachFile('table.png', requestAlias)
 
-			waitForRequestAndCheckImage(requestAlias)
-		})
+				return waitForRequestAndCheckImage(requestAlias)
+			})
 	})
 
 	it('Upload images with the same name', () => {
 		cy.uploadFile('empty.md', 'text/markdown')
 		cy.openFile('empty.md')
 
 		const assertImage = index => {
-			return clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE, () => {
-				const requestAlias = `uploadRequest${index}`
-				cy.intercept({ method: 'POST', url: '**/upload' }).as(requestAlias)
+			return clickOnImageAction(ACTION_UPLOAD_LOCAL_FILE)
+				.then(() => {
+					const requestAlias = `uploadRequest${index}`
+					cy.log('Upload the file through the input', { index })
 
-				cy.log('Upload the file through the input', { index })
-				cy.get('.menubar input[type="file"]').attachFile('github.png')
+					attachFile('github.png', requestAlias)
 
-				return waitForRequestAndCheckImage(requestAlias, index)
-			})
+					return waitForRequestAndCheckImage(requestAlias, index)
+				})
 		}
 
 		cy.wrap([0, 1, 2])
@@ -220,7 +220,7 @@ describe('Test all image insertion methods', () => {
 				})
 			})
 			.then(() => {
-				return cy.get('#editor [data-component="image-view"]')
+				return cy.getEditor().find('[data-component="image-view"]')
 					.should('have.length', 3)
 			})
 	})

cypress/integration/links.spec.js

@@ -3,7 +3,7 @@ import { randHash } from '../utils/'
 const randUser = randHash()
 const fileName = 'empty.md'
 
-const getEditor = () => cy.get('#viewer #editor .ProseMirror')
+const getEditor = () => cy.getEditor().find('.ProseMirror')
 
 const clearContent = () => getEditor()
 	.type('{selectall}')