/** * Inserts a paragraph before or after the table containing the selection. * * <p>We decided to use Control/Meta+UpArrow for inserting a paragraph before a table and * Control/Meta+DownArrow for inserting a paragraph after a table. Here's the rationale: * * <ul> * <li>We can't reliably detect if the user can place the caret before of after a table. Our * playground is the DOM tree which we fully control but in the end the browser decides how * to render each node. The table can have previous siblings or previous nodes in the DOM * tree but they may not be rendered at all (as it happens with HTML garbage like empty * elements) or not rendered before/after the table (as it happens with absolute positioned * elements). So we have to insert the paragraph each time. * <li>We can't use the same key to insert a paragraph before and after the table because we can * have a table with just one empty cell. So we can't rely on the Enter key. * <li>We can't use just the navigation keys because they would insert a paragraph before/after * the table even when the user can navigate outside of the table. * </ul> * * We can replace the Ctrl with Alt. The idea is to use the Up/Down arrow keys with a modifier. * They will work form any table cell. * * @param event the native event that was fired * @param before {@code true} to insert a paragraph before the table, {@code false} to insert a * paragraph after the table */ protected void navigateOutsideTableCell(Event event, boolean before) { // Navigate only if the Control or Meta modifiers are pressed along with the Up/Down arrow keys. if (event.getAltKey() || event.getShiftKey() || !(event.getCtrlKey() ^ event.getMetaKey())) { return; } Selection selection = getTextArea().getDocument().getSelection(); if (selection.getRangeCount() == 0) { return; } else { selection.collapseToStart(); } Range range = selection.getRangeAt(0); Node ancestor = domUtils.getFirstAncestor(range.getStartContainer(), "table"); if (ancestor == null) { return; } event.xPreventDefault(); Document document = getTextArea().getDocument(); Node paragraph = document.createPElement(); paragraph.appendChild(document.createTextNode("")); if (before) { ancestor.getParentNode().insertBefore(paragraph, ancestor); } else { domUtils.insertAfter(paragraph, ancestor); } range.selectNodeContents(paragraph.getFirstChild()); selection.removeAllRanges(); selection.addRange(range); }
/** * Tab key has been pressed inside a table cell. * * @param event the native event that was fired * @param cell The table cell in which the tab key has been pressed. */ protected void onTabInTableCell(Event event, TableCellElement cell) { Node nextCell = event.getShiftKey() ? cell.getPreviousCell() : cell.getNextCell(); if (nextCell == null) { if (event.getShiftKey()) { return; } else { getTextArea().getCommandManager().execute(new Command("insertrowafter")); nextCell = cell.getNextCell(); } } Selection selection = getTextArea().getDocument().getSelection(); Range range = selection.getRangeAt(0); // Place the caret at the beginning of the next cell. Node leaf = domUtils.getFirstLeaf(nextCell); if (leaf == nextCell || leaf.getNodeType() == Node.TEXT_NODE) { range.setStart(leaf, 0); } else { range.setStartBefore(leaf); } range.collapse(true); selection.removeAllRanges(); selection.addRange(range); }
@Override public void onKeyUp(KeyUpEvent event) { ignoreNextKeyPress = false; cancelNextKeyPress = false; Event nativeEvent = (Event) event.getNativeEvent(); if (!nativeEvent.isCancelled()) { handleKeyRelease(nativeEvent); } }
@Override public void onKeyDown(KeyDownEvent event) { ignoreNextKeyPress = true; Event nativeEvent = (Event) event.getNativeEvent(); if (!nativeEvent.isCancelled()) { handleRepeatableKey(nativeEvent); } cancelNextKeyPress = nativeEvent.isCancelled(); }
/** * Overwrites the default rich text area behavior when the user releases the mouse button. * * @param event the native event that was fired */ protected void onBeforeMouseUp(Event event) { // The height of the body element is given by its content. When the height of the body element // is less than the // rich text area height the user can click outside of the body element, on the HTML element. // When this happens // the selection can be lost. To prevent this we give the focus back to the body element. if (Element.is(event.getEventTarget()) && "html".equalsIgnoreCase(Element.as(event.getEventTarget()).getTagName())) { textArea.setFocus(true); } }
@Override public void onKeyPress(KeyPressEvent event) { Event nativeEvent = (Event) event.getNativeEvent(); if (!ignoreNextKeyPress) { if (!nativeEvent.isCancelled()) { handleRepeatableKey(nativeEvent); } } else if (cancelNextKeyPress) { nativeEvent.xPreventDefault(); } ignoreNextKeyPress = false; cancelNextKeyPress = false; }
/** * Overwrites the default rich text area behavior when the Tab key is being pressed. * * @param event the native event that was fired */ protected void onTab(Event event) { Selection selection = getTextArea().getDocument().getSelection(); if (selection.getRangeCount() == 0) { return; } // Prevent the default browser behavior. event.xPreventDefault(); // See in which context the tab key has been pressed. Range range = selection.getRangeAt(0); List<String> specialTags = Arrays.asList(new String[] {LI, TD, TH}); Node ancestor = range.getStartContainer(); int index = specialTags.indexOf(ancestor.getNodeName().toLowerCase()); while (ancestor != null && index < 0) { ancestor = ancestor.getParentNode(); if (ancestor != null) { index = specialTags.indexOf(ancestor.getNodeName().toLowerCase()); } } // Handle the tab key depending on the context. switch (index) { case 0: onTabInListItem(event, ancestor); break; case 1: case 2: onTabInTableCell(event, (TableCellElement) ancestor); break; default: onTabDefault(event); break; } }
/** * Called when a KeyDown event is triggered inside the rich text area. * * @param event the native event that was fired */ protected void onKeyDown(Event event) { if (event == null || event.isCancelled()) { return; } switch (event.getKeyCode()) { case KeyCodes.KEY_DOWN: onDownArrow(event); break; case KeyCodes.KEY_UP: onUpArrow(event); break; default: break; } }
/** * Tab key has been pressed in an ordinary context. If the Shift key was not pressed then the * current selection will be replaced by 4 spaces. Otherwise no action will be taken. * * @param event the native event that was fired */ protected void onTabDefault(Event event) { if (event.getShiftKey()) { // Do nothing. } else { if (getTextArea().getCommandManager().isEnabled(Command.INSERT_HTML)) { getTextArea().getCommandManager().execute(Command.INSERT_HTML, " "); getTextArea().getDocument().getSelection().collapseToEnd(); } } }
/** * Called by the underlying rich text are when user actions trigger browser events, after all the * registered listeners have been notified. * * @param event the native event that was fired * @see RichTextArea#onBrowserEvent(com.google.gwt.user.client.Event) * @see RichTextArea#getCurrentEvent() */ public void onBrowserEvent(Event event) { if (event == null || event.isCancelled()) { return; } switch (event.getTypeInt()) { case Event.ONKEYDOWN: onKeyDown(event); break; case Event.ONKEYPRESS: onKeyPress(event); break; case Event.ONLOAD: onLoad(event); break; default: break; } }
/** * Tab key has been pressed inside a list item. If the selection is collapsed at the beginning of * a list item then indent or outdent that list item depending on the Shift key. Otherwise use the * default behavior for Tab key. * * @param event the native event that was fired * @param item the list item in which the tab key has been pressed */ protected void onTabInListItem(Event event, Node item) { Range range = getTextArea().getDocument().getSelection().getRangeAt(0); if (!range.isCollapsed() || !isAtStart(item, range)) { onTabDefault(event); } else { Command command = event.getShiftKey() ? Command.OUTDENT : Command.INDENT; if (getTextArea().getCommandManager().isEnabled(command)) { getTextArea().getCommandManager().execute(command); } } }
@Override protected void onKeyDown(Event event) { if (event == null || event.isCancelled()) { return; } switch (event.getKeyCode()) { case KeyCodes.KEY_TAB: // IE moves the focus when Tab key is down and thus the key press event doesn't get fired. // If we block // the key down event then IE doesn't fire key press. We are forced to apply out custom // behavior for tab // key now, on key down, and not later, on key press. onTab(event); break; default: super.onKeyDown(event); break; } }
/** * Called by the underlying rich text are when user actions trigger browser events, before any * registered listener is notified. * * @param event the native event that was fired * @see RichTextArea#onBrowserEvent(com.google.gwt.user.client.Event) * @see RichTextArea#getCurrentEvent() */ public void onBeforeBrowserEvent(Event event) { switch (event.getTypeInt()) { case Event.ONMOUSEDOWN: onBeforeMouseDown(event); break; case Event.ONMOUSEUP: onBeforeMouseUp(event); break; default: break; } }
/** * Called when a KeyPress event is triggered inside the rich text area. * * @param event the native event that was fired */ protected void onKeyPress(Event event) { switch (event.getKeyCode()) { case KeyCodes.KEY_TAB: onTab(event); break; case KeyCodes.KEY_DELETE: onDelete(event); break; case KeyCodes.KEY_BACKSPACE: onBackSpace(event); break; default: break; } }