diff --git a/browser/src/control/Permission.js b/browser/src/control/Permission.js index e908185ba3db..e534d075c134 100644 --- a/browser/src/control/Permission.js +++ b/browser/src/control/Permission.js @@ -198,7 +198,7 @@ L.Map.include({ this.dragging.disable(); } - if ((window.mode.isMobile() || window.mode.isTablet()) && this._textInput) { + if ((window.mode.isMobile() || window.mode.isTablet()) && this._textInput && this.getDocType() === 'text') { this._textInput.setSwitchedToEditMode(); } diff --git a/browser/src/layer/marker/A11yTextInput.js b/browser/src/layer/marker/A11yTextInput.js index f467e8a23dd0..0fdff7c7a28c 100644 --- a/browser/src/layer/marker/A11yTextInput.js +++ b/browser/src/layer/marker/A11yTextInput.js @@ -33,10 +33,6 @@ L.A11yTextInput = L.TextInput.extend({ return true; }, - hasFocus: function() { - return this._textArea && this._textArea === document.activeElement; - }, - setHTML: function(content) { this._textArea.innerHTML = this._wrapContent(content); }, diff --git a/browser/src/layer/marker/TextInput.js b/browser/src/layer/marker/TextInput.js index d4c180bc4620..20ee3e301ef8 100644 --- a/browser/src/layer/marker/TextInput.js +++ b/browser/src/layer/marker/TextInput.js @@ -193,6 +193,10 @@ L.TextInput = L.Layer.extend({ } }, + hasFocus: function() { + return this._textArea && this._textArea === document.activeElement; + }, + _onFocusBlur: function(ev) { this._fancyLog(ev.type, ''); this._statusLog('_onFocusBlur'); @@ -1244,14 +1248,16 @@ L.TextInput = L.Layer.extend({ if (this._justSwitchedToEditMode && accept && this._isInitialContent()) { // We need to make the paragraph at the cursor position focused in core // so its content is sent to the editable area. - window.app.console.log('A11yTextInput._setAcceptInput: going to emit a synthetic click after switching to edit mode.'); this._justSwitchedToEditMode = false; - var top = this._map._docLayer._visibleCursor.getNorthWest(); - var bottom = this._map._docLayer._visibleCursor.getSouthWest(); - var center = L.latLng((top.lat + bottom.lat) / 2, top.lng); - var cursorPos = this._map._docLayer._latLngToTwips(center); - this._map._docLayer._postMouseEvent('buttondown', cursorPos.x, cursorPos.y, 1, 1, 0); - this._map._docLayer._postMouseEvent('buttonup', cursorPos.x, cursorPos.y, 1, 1, 0); + if (this._map._docLayer && this._map._docLayer._visibleCursor) { + window.app.console.log('A11yTextInput._setAcceptInput: going to emit a synthetic click after switching to edit mode.'); + var top = this._map._docLayer._visibleCursor.getNorthWest(); + var bottom = this._map._docLayer._visibleCursor.getSouthWest(); + var center = L.latLng((top.lat + bottom.lat) / 2, top.lng); + var cursorPos = this._map._docLayer._latLngToTwips(center); + this._map._docLayer._postMouseEvent('buttondown', cursorPos.x, cursorPos.y, 1, 1, 0); + this._map._docLayer._postMouseEvent('buttonup', cursorPos.x, cursorPos.y, 1, 1, 0); + } } } }, diff --git a/browser/src/map/Map.js b/browser/src/map/Map.js index b66a27f50c4e..db4579da8bda 100644 --- a/browser/src/map/Map.js +++ b/browser/src/map/Map.js @@ -315,7 +315,8 @@ L.Map = L.Evented.extend({ initTextInput: function(docType) { var hasAccessibilitySupport = window.enableAccessibility && this._accessibilityState; - this._textInput = hasAccessibilitySupport && docType === 'text' ? L.a11yTextInput() : L.textInput(); + hasAccessibilitySupport = hasAccessibilitySupport && (docType === 'text' || docType === 'presentation'); + this._textInput = hasAccessibilitySupport ? L.a11yTextInput() : L.textInput(); this.addLayer(this._textInput); }, diff --git a/cypress_test/data/desktop/impress/two_text_shapes.odp b/cypress_test/data/desktop/impress/two_text_shapes.odp new file mode 100644 index 000000000000..3e7cbe932aa0 Binary files /dev/null and b/cypress_test/data/desktop/impress/two_text_shapes.odp differ diff --git a/cypress_test/integration_tests/desktop/impress/editable_area_spec.js b/cypress_test/integration_tests/desktop/impress/editable_area_spec.js new file mode 100644 index 000000000000..c18c1f23fcaa --- /dev/null +++ b/cypress_test/integration_tests/desktop/impress/editable_area_spec.js @@ -0,0 +1,165 @@ +/* global describe expect it cy beforeEach require afterEach Cypress */ + +var helper = require('../../common/helper'); +var desktopHelper = require('../../common/desktop_helper'); +var impressHelper = require('../../common/impress_helper'); +var ceHelper = require('../../common/contenteditable_helper'); + + +function selectTextShape(i) { + cy.log('Selecting text shape - start.'); + if (typeof i !== 'number' || i <= 0 || i > 2) + return; + + var n = 2; + var parts = n + 1; + + // Click on the top-center of the slide to select the text shape there + cy.cGet('#document-container') + .then(function(items) { + expect(items).to.have.length(1); + var XPos = (items[0].getBoundingClientRect().left + items[0].getBoundingClientRect().right) / 2; + var YPos = i * (items[0].getBoundingClientRect().top + items[0].getBoundingClientRect().bottom) / parts; + cy.cGet('body').click(XPos, YPos); + }); + + cy.cGet('.leaflet-drag-transform-marker').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).should('be.visible'); + cy.cGet('.leaflet-pane.leaflet-overlay-pane svg g path.leaflet-interactive').should('exist'); + cy.log('Selecting text shape - end.'); +} + +describe(['taga11yenabled'], 'Editable area - Basic typing and caret moving', function() { + var testFileName = 'two_text_shapes.odp'; + + beforeEach(function () { + helper.beforeAll(testFileName, 'impress'); + desktopHelper.switchUIToCompact(); + cy.cGet('#toolbar-up > .w2ui-scroll-right').click(); + cy.cGet('#tb_editbar_item_modifypage').click(); + cy.cGet('div.clipboard').as('clipboard'); + }); + + afterEach(function () { + helper.afterAll(testFileName, this.currentTest.state); + }); + + it('Editing top text shape', function () { + // select shape and activate editing + selectTextShape(1); + impressHelper.selectTextOfShape(false); + // initial position + ceHelper.checkHTMLContent(''); + ceHelper.checkCaretPosition(0); + // typing + ceHelper.type('Hello World'); + ceHelper.checkHTMLContent('Hello World'); + ceHelper.checkCaretPosition(11); + // remove shape selection + impressHelper.removeShapeSelection(); + ceHelper.checkHTMLContent(''); + // activate editing again + selectTextShape(1); + impressHelper.selectTextOfShape(false); + ceHelper.checkPlainContent('Hello World'); + ceHelper.moveCaret('end'); + ceHelper.checkCaretPosition(11); + impressHelper.removeShapeSelection(); + }); + + it('Deleting text', function () { + // select shape and activate editing + selectTextShape(1); + impressHelper.selectTextOfShape(false); + // initial position + ceHelper.checkHTMLContent(''); + ceHelper.checkCaretPosition(0); + // typing + ceHelper.type('Hello World'); + ceHelper.checkHTMLContent('Hello World'); + ceHelper.checkCaretPosition(11); + // backspace + ceHelper.moveCaret('left', '', 4); + ceHelper.type('{backspace}'); + ceHelper.checkPlainContent('Hello orld'); + ceHelper.checkCaretPosition(6); + // delete + ceHelper.moveCaret('left', '', 4); + ceHelper.type('{del}'); + ceHelper.checkPlainContent('Helo orld'); + ceHelper.checkCaretPosition(2); + impressHelper.removeShapeSelection(); + }); + + it('Editing bottom text shape', function () { + // select shape and activate editing + selectTextShape(2); + impressHelper.selectTextOfShape(false); + // initial position + ceHelper.checkHTMLContent(''); + ceHelper.checkCaretPosition(0); + // typing + ceHelper.type('Hello World'); + ceHelper.checkHTMLContent('Hello World'); + ceHelper.checkCaretPosition(11); + impressHelper.removeShapeSelection(); + // activate editing again + selectTextShape(2); + impressHelper.selectTextOfShape(false); + ceHelper.checkPlainContent('Hello World'); + ceHelper.moveCaret('end'); + ceHelper.checkCaretPosition(11); + // typing paragraph 2 + ceHelper.type('{enter}'); + ceHelper.type('Green red'); + ceHelper.checkPlainContent('Green red'); + impressHelper.removeShapeSelection(); + // activate editing again + selectTextShape(2); + impressHelper.selectTextOfShape(false); + // navigating between paragraphs + ceHelper.checkPlainContent('Green red'); + ceHelper.moveCaret('up'); + ceHelper.checkPlainContent('Hello World'); + impressHelper.removeShapeSelection(); + }); + + it('Editing both text shapes', function () { + // select top shape and activate editing + selectTextShape(1); + impressHelper.selectTextOfShape(false); + // initial position + ceHelper.checkHTMLContent(''); + ceHelper.checkCaretPosition(0); + // typing + ceHelper.type('Hello World'); + ceHelper.checkPlainContent('Hello World'); + ceHelper.checkCaretPosition(11); + // select bottom shape and activate editing + selectTextShape(2); + ceHelper.checkHTMLContent(''); + impressHelper.selectTextOfShape(false); + // typing + ceHelper.checkHTMLContent(''); + ceHelper.checkCaretPosition(0); + ceHelper.type('Green red'); + ceHelper.checkPlainContent('Green red'); + ceHelper.checkCaretPosition(9); + // select top shape and activate editing + selectTextShape(1); + ceHelper.checkHTMLContent(''); + impressHelper.selectTextOfShape(false); + ceHelper.checkPlainContent('Hello World'); + ceHelper.moveCaret('end'); + ceHelper.type(' Yellow'); + ceHelper.checkPlainContent('Hello World Yellow'); + // select bottom shape and activate editing + selectTextShape(2); + ceHelper.checkHTMLContent(''); + impressHelper.selectTextOfShape(false); + ceHelper.checkPlainContent('Green red'); + // remove shape selection + impressHelper.removeShapeSelection(); + ceHelper.checkHTMLContent(''); + }); + +}); \ No newline at end of file