Codemirror and keyboard

[Tophgirl]

I know this was closed, but looking back at: https://github.com/Mottie/Keyboard/issues/306 I want to be able to fix the backspace problem.

Something simple like this works using Codemirror commands:

TestCmd

Unlike with $.extend($.keyboard.keyaction)

But in order for this to work with the keyboard buttons, I need help figuring out how to set the data-action to null, and adding this function to the button.

[Mottie]

Hi @Tophgirl!

I didn't know that the demo(s) stopped working. I'll take a look.

Is the backspace problem you are referring to the problem with the backspace not deleting back to the previous line?

I think we can improve the demos (Codemirror and ACE editor) either way since there is now a beforeInsert callback function that can be used instead of the change callback. It allows a more direct interaction with the editor without worrying about altering any key actions.

[Tophgirl]

Yes, that was the problem I am talking about.

But I'm unsure what you are suggesting to do with the beforeInsert callback function.

[Tophgirl]

I think I figured it out, thanks for the help.

[Mottie]

Oh sorry, I was working on a demo on and off. If you have a solution would you please share it?

[Tophgirl]

all I did was add new keyactions to the jquery.keyboard.js file instead

$keyboard.keyaction = {
        //default functions ....
        cmBksp: function (base) {
            editor.execCommand("delCharBefore");
        },
        cmLineUp: function (base) {
            editor.execCommand("goLineDown");
        },
        cmLineDown: function (base) {
            editor.execCommand("goLineUp");
        }
}

then of course added cmBksp to the layout as another button I'm sort of new to javascript so don't ask me why this works

[Mottie]

Sorry, I planned on finishing the demo today. I'll try to work on it tomorrow and hopefully provide a nice solution for you.

[Mottie]

Ok, I think I got it!

http://jsfiddle.net/Mottie/vyuuas1o/

Let me know if you discover any issues.

$(function() {

  var editor = CodeMirror.fromTextArea(document.getElementById("keyboard"), {
      lineNumbers: true
    }),
    inf = editor.getInputField();

  $(inf).keyboard({
    keyBinding: "mousedown touchstart",
    usePreview: false,
    // lockInput: true,
    autoAccept: true,
    alwaysOpen: true,
    position: {
      of: $(".CodeMirror"),
      my: 'center top',
      at: 'center bottom',
      at2: 'center bottom'
    },
    beforeInsert: function(evnt, keyboard, elem, txt) {
      var position = editor.getCursor();
      if (txt === "\b") {
        editor.execCommand("delCharBefore");
      }
      if (txt === "\b" && position.ch === 0 && position.line !== 0) {
        elem.value = editor.getLine(position.line) || "";
        txt = "";
      }
      return txt;
    }
  });
});

[Tophgirl]

Interesting, thank you.