diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 95906f0e9..75864e9a7 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -33,6 +33,11 @@ jobs: - name: Set up npm7 run: npm i -g npm@7 + - name: Register text Git reference + run: | + text_app_ref="$(if [ "${{ matrix.server-versions }}" = "master" ]; then echo -n "main"; else echo -n "${{ matrix.server-versions }}"; fi)" + echo "text_app_ref=$text_app_ref" >> $GITHUB_ENV + - name: Checkout server uses: actions/checkout@v3 with: @@ -51,6 +56,13 @@ jobs: with: path: apps/${{ env.APP_NAME }} + - name: Checkout text + uses: actions/checkout@v3 + with: + repository: nextcloud/text + ref: ${{ env.text_app_ref }} + path: apps/text + - name: Set up php ${{ matrix.php-versions }} uses: shivammathur/setup-php@2.24.0 with: diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js index 7cc1aae4a..cb4772e52 100644 --- a/cypress/e2e/cardFeatures.js +++ b/cypress/e2e/cardFeatures.js @@ -4,6 +4,22 @@ import { sampleBoard } from '../utils/sampleBoard' const user = randUser() const boardData = sampleBoard() +const auth = { + user: user.userId, + password: user.password, +} + +const useModal = (useModal) => { + return cy.request({ + method: 'POST', + url: `${Cypress.env('baseUrl')}/ocs/v2.php/apps/deck/api/v1.0/config/cardDetailsInModal?format=json`, + auth, + body: { value: useModal }, + }).then((response) => { + expect(response.status).to.eq(200) + }) +} + describe('Card', function() { let boardId before(function() { @@ -19,22 +35,10 @@ describe('Card', function() { beforeEach(function() { cy.login(user) - cy.visit(`/apps/deck/#/board/${boardId}`) - }) - - it('Can show card details modal', function() { - cy.getNavigationEntry(boardData.title) - .first().click({ force: true }) - - cy.get('.board .stack').eq(0).within(() => { - cy.get('.card:contains("Hello world")').should('be.visible').click() - }) - - cy.get('.modal__card').should('be.visible') - cy.get('.app-sidebar-header__maintitle').contains('Hello world') }) it('Can add a card', function() { + cy.visit(`/apps/deck/#/board/${boardId}`) const newCardTitle = 'Write some cypress tests' cy.getNavigationEntry(boardData.title) @@ -54,4 +58,72 @@ describe('Card', function() { }) }) + describe('Modal', () => { + beforeEach(function() { + cy.login(user) + useModal(true).then(() => { + cy.visit(`/apps/deck/#/board/${boardId}`) + }) + }) + + it('Can show card details modal', function() { + cy.getNavigationEntry(boardData.title) + .first().click({ force: true }) + + cy.get('.board .stack').eq(0).within(() => { + cy.get('.card:contains("Hello world")').should('be.visible').click() + }) + + cy.get('.modal__card').should('be.visible') + cy.get('.app-sidebar-header__maintitle').contains('Hello world') + }) + + it('Attachment from files app', () => { + cy.get('.card:contains("Hello world")').should('be.visible').click() + cy.get('.modal__card').should('be.visible') + cy.get('.app-sidebar-tabs__tab [data-id="attachments"]').click() + cy.get('button.icon-upload').should('be.visible') + cy.get('button.icon-folder').should('be.visible') + .click() + cy.get('.oc-dialog #picker-filestable tr[data-entryname="welcome.txt"] td.filename').should('be.visible') + .click() + cy.get('.oc-dialog button.primary').click() + cy.get('.attachment-list .basename').contains('welcome.txt') + }) + + it('Shows the modal with the editor', () => { + cy.get('.card:contains("Hello world")').should('be.visible').click() + cy.intercept({ method: 'PUT', url: '**/apps/deck/cards/*' }).as('save') + cy.get('.modal__card').should('be.visible') + cy.get('.app-sidebar-header__maintitle').contains('Hello world') + cy.get('.modal__card .ProseMirror h1').contains('Hello world').should('be.visible') + cy.get('.modal__card .ProseMirror h1') + .click() + .type(' writing more text{enter}- List item{enter}with entries{enter}{enter}Paragraph') + cy.wait('@save', { timeout: 7000 }) + + cy.reload() + cy.get('.modal__card').should('be.visible') + cy.get('.modal__card .ProseMirror h1').contains('Hello world writing more text').should('be.visible') + cy.get('.modal__card .ProseMirror li').eq(0).contains('List item').should('be.visible') + cy.get('.modal__card .ProseMirror li').eq(1).contains('with entries').should('be.visible') + cy.get('.modal__card .ProseMirror p').contains('Paragraph').should('be.visible') + }) + }) + + describe('Sidebar', () => { + beforeEach(function() { + cy.login(user) + useModal(false).then(() => { + cy.visit(`/apps/deck/#/board/${boardId}`) + }) + }) + + it('Show the sidebar', () => { + cy.get('.card:contains("Hello world")').should('be.visible').click() + cy.get('#app-sidebar-vue') + .find('.ProseMirror h1').contains('Hello world writing more text').should('be.visible') + }) + }) + }) diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 070cbc7c2..8001cbed8 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -91,7 +91,7 @@ Cypress.Commands.add('createExampleBoard', ({ user, board }) => { method: 'POST', url: `${Cypress.env('baseUrl')}/index.php/apps/deck/api/v1.0/boards/${boardData.id}/stacks/${stackData.id}/cards`, auth, - body: { title: card.title }, + body: { title: card.title, description: card.description ?? '' }, }) } }) diff --git a/cypress/utils/sampleBoard.js b/cypress/utils/sampleBoard.js index e0019012e..468761b58 100644 --- a/cypress/utils/sampleBoard.js +++ b/cypress/utils/sampleBoard.js @@ -29,6 +29,7 @@ export const sampleBoard = (title = 'MyTestBoard') => { cards: [ { title: 'Hello world', + description: '# Hello world', }, ], }, diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php index 46279df0d..88ef05ff9 100644 --- a/lib/Controller/PageController.php +++ b/lib/Controller/PageController.php @@ -27,6 +27,7 @@ use OCA\Deck\Service\ConfigService; use OCA\Deck\Service\PermissionService; use OCA\Files\Event\LoadSidebar; +use OCA\Text\Event\LoadEditor; use OCA\Viewer\Event\LoadViewer; use OCP\AppFramework\Http\ContentSecurityPolicy; use OCP\Collaboration\Resources\LoadAdditionalScriptsEvent as CollaborationResourcesEvent; @@ -90,6 +91,9 @@ public function index() { $this->eventDispatcher->dispatchTyped(new LoadSidebar()); $this->eventDispatcher->dispatchTyped(new CollaborationResourcesEvent()); + if (class_exists(LoadEditor::class)) { + $this->eventDispatcher->dispatchTyped(new LoadEditor()); + } if (class_exists(LoadViewer::class)) { $this->eventDispatcher->dispatchTyped(new LoadViewer()); } diff --git a/src/App.vue b/src/App.vue index ec1d06d85..d9e922f4f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -29,7 +29,7 @@
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue index 6e6046c18..74bb89411 100644 --- a/src/components/card/Description.vue +++ b/src/components/card/Description.vue @@ -26,11 +26,12 @@ {{ t('deck', 'Description') }} {{ t('deck', '(Unsaved)') }} {{ t('deck', '(Saving…)') }} - - + {{ t('deck', 'Edit description') }} @@ -48,21 +49,26 @@ -
-

- {{ t('deck', 'Write a description …') }} -

- +
+
+
+
@@ -116,6 +122,8 @@ export default { }, data() { return { + textAppAvailable: !!window.OCA?.Text?.createEditor, + editor: null, keyExitState: 0, description: '', markdownIt: null, @@ -175,10 +183,31 @@ export default { return this.card?.description?.trim?.() !== '' }, }, + mounted() { + this.setupEditor() + }, + beforeDestroy() { + this?.editor?.destroy() + }, methods: { + async setupEditor() { + this?.editor?.destroy() + this.editor = await window.OCA.Text.createEditor({ + el: this.$refs.editor, + content: this.card.description, + readOnly: !this.canEdit, + onUpdate: ({ markdown }) => { + this.description = markdown + this.updateDescription() + }, + onFileInsert: () => { + this.showAttachmentModal() + }, + }) + + }, addKeyListeners() { this.$refs.markdownEditor.easymde.codemirror.on('keydown', (a, b) => { - if (this.keyExitState === 0 && (b.key === 'Meta' || b.key === 'Alt')) { this.keyExitState = 1 } @@ -213,17 +242,23 @@ export default { this.modalShow = true }, addAttachment(attachment) { - const descString = this.$refs.markdownEditor.easymde.value() - let embed = '' - if ((attachment.type === 'file' && attachment.extendedData.hasPreview) || attachment.extendedData.mimetype.includes('image')) { - embed = '!' + const asImage = (attachment.type === 'file' && attachment.extendedData.hasPreview) || attachment.extendedData.mimetype.includes('image') + if (this.editor) { + this.editor.insertAtCursor( + asImage + ? `${attachment.data}` + : `${attachment.data}` + ) + return + } else { + const attachmentString = (asImage ? '!' : '') + '[📎 ' + attachment.data + '](' + this.attachmentPreview(attachment) + ')' + const descString = this.$refs.markdownEditor.easymde.value() + const newContent = descString + '\n' + attachmentString + this.$refs.markdownEditor.easymde.value(newContent) + this.description = newContent } - const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentPreview(attachment) + ')' - const newContent = descString + '\n' + attachmentString - this.$refs.markdownEditor.easymde.value(newContent) - this.description = newContent - this.modalShow = false this.updateDescription() + this.modalShow = false }, clickedPreview(e) { if (e.target.getAttribute('type') === 'checkbox') { @@ -379,4 +414,12 @@ h5 { .vue-easymde .cm-s-easymde .cm-formatting.cm-image { color: var(--color-text-maxcontrast); } + +.app-sidebar__tab .description__text .text-menubar { + top: -10px !important; +} + +.modal__card .description__text .text-menubar { + top: 142px !important; +}