Problem with Backspace key and Enter key on SimpleMDE

[vencoi]

Hello @yuku-t,

Thanks for this great work! I am using jquery-textcomplete with SimpleMDE. This is my demo. Everything goes ok, but is not possible to select an item using the Enter key. But the main problem for me is when clicked on Backspace key then the dropdown-menu disappears and must start over.

Do you have any clue?

Have a nice day!

[yuku]

It seems that SimpleMDE prevents a click event's default behavior before textcomplete handles it.

Can you activate textcomplete before SimpleMDE?

// Now
new SimpleMDE(... );
$('textarea').textcomplete(...);

// Change as
$('textarea').textcomplete(...);
new SimpleMDE(... );

[vencoi]

No this does not solve the problem, after change places textcomplete stopped working :(

[vencoi]

I found what is causing the problem, SimpleMDE using its own functions for different keys:

  // STANDARD KEYMAPS
  var keyMap = CodeMirror.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"
  };

Is there any solution for this problem?

[lluchs]

You can solve this problem by forwarding Enter to jquery-textcomplete, like this:

var simplemde = new SimpleMDE(...)
var textcomplete = $('.CodeMirror textarea').textcomplete(...).data('textComplete')
simplemde.codemirror.addKeyMap({
  Enter: (cm) => {
    if (textcomplete.dropdown.shown)
      tc.dropdown._enter(new KeyboardEvent('fake enter', {key: 'Enter'}))
    else
      return cm.constructor.Pass
  },
})

Note that CodeMirror creates a separate textarea which you must attach jquery-textcomplete to. You can forward Tab the same way.

To make Backspace work, I created an adapter for CodeMirror (sorry, CoffeeScript...):

class CodeMirrorTextcompleteAdapter extends $.fn.textcomplete.Adapter
  constructor: (element, completer, option) ->
    @initialize(element, completer, option)
    @codemirror = option.codemirror

  select: (value, strategy, e) ->
    pre = @getTextFromHeadToCaret()
    newSubstr = strategy.replace(value, e)
    post = ''
    if newSubstr?
      if $.isArray(newSubstr)
        post = newSubstr[1] + post
        newSubstr = newSubstr[0]
      regExp = if $.isFunction(strategy.match) then strategy.match(pre) else strategy.match
      pre = pre.replace(regExp, newSubstr)
      @codemirror.replaceRange(pre, {line: 0, ch: 0}, @codemirror.getCursor())
      cursor = @codemirror.getCursor()
      @codemirror.replaceRange(post, cursor)
      @codemirror.setCursor(cursor)

  getTextFromHeadToCaret: ->
    @codemirror.getRange({line: 0, ch: 0}, @codemirror.getCursor())

  getCaretPosition: ->
    pos = @codemirror.cursorCoords(true, 'page')
    top: pos.bottom # bottom of cursor
    left: pos.left

  focus: ->
    @codemirror.focus()

Use it by setting the adapter and codemirror options:

$('.CodeMirror textarea').textcomplete({adapter: CodeMirrorTextcompleteAdapter, codemirror: simplemde.codemirror})