Quill keybindings not executed

[HaloElite]

I'm using the quill 1.3.7 package inside a Vue component (if that matters) and try to add keybindings. I'm using quill inside a JavaScript custom element. So it's wrapped in the shadow DOM.

  const bindings = {
        handleEnter: {
            key: 13,
            handler: function (range, context) {
                         console.log("Example also not working");
                     }
            }
        }


    var options = {
        theme: 'snow',
        modules: {
            history: {
                delay: 500,
                userOnly: true
            },
            clipboard: {
                matchers: [['BR', lineBreakMatcher]]
            },
            keyboard: {
                bindings: bindings
            }
        }
    };

    quillEditor = new Quill(editor.value, options);

Logging quillEditor.keyboard.bindings even prints the added bindings. But pressing the keys is not executing the handler functions.

Expected behavior would be "Example also not working" inside the console when pressing ENTER.

[benbro]

I suggest to test with v2.0.0-rc.2

[HaloElite]

I suggest to test with v2.0.0-rc.2

@benbro I did - it worked even worse cause I got jumping characters.

[devCodeHub-star]

Hello @luin I am facing the same issue after upgrading from v1.3.7 to v2.0.0-rc.2 I want to prevent multiple line conditionally when pressing enter.

const isMultiline = false
const quillEl = document.querySelector('#quill-${this.randId}')
if (!quillEl) return

const bindings = {
  enter: {
    key: 13,
    handler: function () {
      console.log("Enter key pressed");
      // return !!multiline
    }
  }
}

const editor = new Quill(quillEl, {
  modules: {
    toolbar: false,
    keyboard: {
      bindings: bindings
    },
  },
  theme: 'snow',
  placeholder: 'Add some text....'
})

[devCodeHub-star]

bindings

I just found the issue in my implementation to update the ENTER key binding. Quill version: 2.0.0-rc.2

Below is updated code

const isMultiline = false
const quillEl = document.querySelector('#quill-${this.randId}')
if (!quillEl) return

const bindings = {
  ENTER: {
    key: "Enter",
    handler: function () {
      console.log("Enter key pressed");
      // return !!multiline
    }
  }
}

const editor = new Quill(quillEl, {
  modules: {
    toolbar: false,
    keyboard: {
      bindings: bindings
    },
  },
  theme: 'snow',
  placeholder: 'Add some text....'
})