cancel
Showing results for 
Search instead for 
Did you mean: 
KOliveras
Surveyor II

Keyboard Shortcuts in the Pretty HTML Editor

Jump to solution

Apologies if this has been asked elsewhere, but in trying out the new "Pretty HTML" feature, I have been unable to paste text using keyboard shortcuts.  So, my questions are as follows: 

  1. Is there a keyboard shortcut for pasting text into the pretty HTML editor? I can right click and select paste from the menu, but I'm specifically looking for a keyboard shortcut. 
  2. Is there documentation available for the keyboard shortcuts in the pretty html editor? In trying various combinations to find an option for pasting text, I did discover a few unexpected keyboard shortcuts actions. I'm curious as to what set of keyboard short cuts exist "under the hood" so to speak.  
1 Solution

Accepted Solutions
and-hu
Surveyor II

For the people with issues, are you using touchscreen computers/laptops?

@KOliveras I took a further look at the CodeMirror.js file and from the way is written, we should only get the emacs bindings (which are one of the 2 fallthroughs in keyMap.macDefault) in the case where mac is true in this statement.

 

keyMap["default"] = mac ? keyMap.macDefault : keyMap.pcDefault;

 

mac is defined as:

 

 var mac = ios || /Mac/.test(platform);

 

So, it's true iOS if true or platform has Mac in (platform is a variable that is equal to navigator.platform, which you can run in your web console. Mine evaluated to false).

Next, iOS is defined as: 

 

var ios = !edge && /AppleWebKit/.test(userAgent) && (/Mobile\/\w+/.test(userAgent) || navigator.maxTouchPoints > 2);

 

Which is true is your userAgent doesn't have "Edge" in it (that's what edge checks for, and Chrome doesn't), if your userAgent has AppleWebKit in it (which Chrome does, but Firefox does not), and if your useragent has mobile in it (Chrome doesn't) OR it has a navigator.maxTouchPoints > 2.

In my laptop that isn't working, a touchscreen Windows 10 laptop, navigator.maxTouchPoints is 10. In the work-issued laptop, which is working properly, this is 1.

So, there are probably other issues, but it looks like one of them is that the code identifies us as iOS, and then Mac users, so defaults to the macDefault. The macDefault fallthrough probably tests some other aspects of Macs that we fail, so we get stuck with the eMacs ones. Ultimately then, this looks like a bug Canvas has to fix.

View solution in original post

15 Replies
jnc
Surveyor

Thanks KOliveras.  I have the same question - also in relation to search within the pretty HTML editor.  I have a colleague who is able to paste with keyboard.  He can also search, but only within the visible frame, which is a bit limiting. Any advice greatly received!

katrien_delangh
Surveyor II

Copy/Paste code in the pretty html editor only seems to work in Firefox but not in Chrome.

I've been able to get it to work in both Chrome and Safari on iOS, but not via Chrome on the PC.  Installing firefox now to test on a PC.  Hopefully we can get some info about the keyboard shortcuts soon.  

For what it's worth, if you are running a browser based on Chromium v89 (in beta), then using CTRL+V operates like "Page Down"

and-hu
Surveyor II

Ctrl+F to find things also does not work in Chrome. By this I mean, if your cursor is in the text box, the Ctrl+F command does not work at all.

If it is outside the text box, the command works - but it doesn't actually find all the matching instances (this is the case in both Firefox and Chrome). It seems to only find instances that show in the "visible" portion of the text box, unless you go into full-screen mode. 

jnc
Surveyor

I usually use Edge but have tested in Chrome and still can't get them to work (although Ctrl+F outside the box may find what's visible, as you mention and-hu, but that's pretty useless). 

KOlivers, it's useful to know CTRL+V acts as page down (I hadn't really picked up on that and thought it was jumping around randomly) - but only in the pretty editor and not in the raw, where it works to paste as expected.

Unfortunately at the moment lack of keyboard shortcuts in Edge/Chrome makes pretty html editor un-usable for me which means I' now have an extra click to raw html editor to get anything done.  Fingers crossed that this will be resolved soon, because I'd love to be able to work in the pretty editor 🤞

klundstrum
Community Coach
Community Coach

Thank You for posting! I am so excited about the new look of the HTML editor, but when the shortcuts weren't working, I immediately searched the Question Forum to see if I was the only one. I am happy that I can jump to Firefox for HTML in the meantime, but I look forward to having everything in one place in Chrome someday.

@KOliveras 

I'm not seeing these issues. That doesn't mean they're not happening to you, but it lets us know it's not a universal problem (like the MathJax pull was) and suggests that there may be something else causing a conflict.

I'm using Chrome on a PC and can search anywhere (not just the visible source) using Ctrl-F. I can paste using Ctrl-V. I tested it in full screen mode and it worked there as well.

Have you tried this in incognito mode? There may be some extensions that is causing a conflict, especially those that have the ability to read the content of the entire page -- we ran into an issue last year where PDFs wouldn't load and disabling browser extensions (adblockers, coupon scanners like Honey, and a few other were bad) resolved it.

@James Thanks for the info.  Knowing that it's working for someone on a PC with Chrome got me to dig into it a bit more.  I tried disabling extensions/incognito mode, but unfortunatly, no luck.  So I started digging around in the CodeMirror.js file.  At the very least, I feel better about CTRL+V acting like a "page down".  For what it's worth, here's what's listed for the keyboard bindings:

 

var keyMap = {};

  keyMap.basic = { "Left": "goCharLeft", "Right": "goCharRight", "Up": "goLineUp", "Down": "goLineDown", "End": "goLineEnd", "Home": "goLineStartSmart", "PageUp": "goPageUp", "PageDown": "goPageDown", "Delete": "delCharAfter", "Backspace": "delCharBefore", "Shift-Backspace": "delCharBefore", "Tab": "defaultTab", "Shift-Tab": "indentAuto", "Enter": "newlineAndIndent", "Insert": "toggleOverwrite", "Esc": "singleSelection"};


  // Note that the save and find-related commands aren't defined by
  // default. User code or addons can define them. Unknown commands
  // are simply ignored.

  keyMap.pcDefault = { "Ctrl-A": "selectAll", "Ctrl-D": "deleteLine", "Ctrl-Z": "undo", "Shift-Ctrl-Z": "redo", "Ctrl-Y": "redo", "Ctrl-Home": "goDocStart", "Ctrl-End": "goDocEnd", "Ctrl-Up": "goLineUp", "Ctrl-Down": "goLineDown", "Ctrl-Left": "goGroupLeft", "Ctrl-Right": "goGroupRight", "Alt-Left": "goLineStart", "Alt-Right": "goLineEnd", "Ctrl-Backspace": "delGroupBefore", "Ctrl-Delete": "delGroupAfter", "Ctrl-S": "save", "Ctrl-F": "find", "Ctrl-G": "findNext", "Shift-Ctrl-G": "findPrev", "Shift-Ctrl-F": "replace", "Shift-Ctrl-R": "replaceAll", "Ctrl-[": "indentLess", "Ctrl-]": "indentMore", "Ctrl-U": "undoSelection", "Shift-Ctrl-U": "redoSelection", "Alt-U": "redoSelection",
"fallthrough": "basic"};

  // Very basic readline/emacs-style bindings, which are standard on Mac.

  keyMap.emacsy = { "Ctrl-F": "goCharRight", "Ctrl-B": "goCharLeft", "Ctrl-P": "goLineUp", "Ctrl-N": "goLineDown", "Alt-F": "goWordRight", "Alt-B": "goWordLeft", "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd", "Ctrl-V": "goPageDown", "Shift-Ctrl-V": "goPageUp", "Ctrl-D": "delCharAfter", "Ctrl-H": "delCharBefore", "Alt-D": "delWordAfter", "Alt-Backspace": "delWordBefore", "Ctrl-K": "killLine", "Ctrl-T": "transposeChars", "Ctrl-O": "openLine"};

  keyMap.macDefault = {
    "Cmd-A": "selectAll", "Cmd-D": "deleteLine", "Cmd-Z": "undo", "Shift-Cmd-Z": "redo", "Cmd-Y": "redo", "Cmd-Home": "goDocStart", "Cmd-Up": "goDocStart", "Cmd-End": "goDocEnd", "Cmd-Down": "goDocEnd", "Alt-Left": "goGroupLeft", "Alt-Right": "goGroupRight", "Cmd-Left": "goLineLeft", "Cmd-Right": "goLineRight", "Alt-Backspace": "delGroupBefore", "Ctrl-Alt-Backspace": "delGroupAfter", "Alt-Delete": "delGroupAfter", "Cmd-S": "save", "Cmd-F": "find", "Cmd-G": "findNext", "Shift-Cmd-G": "findPrev", "Cmd-Alt-F": "replace", "Shift-Cmd-Alt-F": "replaceAll", "Cmd-[": "indentLess", "Cmd-]": "indentMore", "Cmd-Backspace": "delWrappedLineLeft", "Cmd-Delete": "delWrappedLineRight", "Cmd-U": "undoSelection", "Shift-Cmd-U": "redoSelection", "Ctrl-Up": "goDocStart", "Ctrl-Down": "goDocEnd",
"fallthrough": ["basic", "emacsy"]};

  keyMap["default"] = mac ? keyMap.macDefault : keyMap.pcDefault;

 

@James Thanks for the info.  I tried to reply earlier, but had some difficulty with posting.  Knowing that it worked for someone got me to look more into issues on my end.  Unfortunatly, disabling extensions/incognito mode didn't help. 

I was able to look a little more into the CodeMirror.js file. Honestly, I haven't dived into it, but at least the emacs keyboard bindings listed in the file reminded me that CTRL+V and CTRL+SHIFT+V as page down and page up is something I should have recognized.