How to use slate-hotkeys - 10 common examples

To help you get started, we’ve selected a few slate-hotkeys examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / before.js View on Github external
}

    // Certain hotkeys have native editing behaviors in `contenteditable`
    // elements which will editor the DOM and cause our value to be out of sync,
    // so they need to always be prevented.
    if (
      !IS_IOS &&
      (Hotkeys.isBold(event) ||
        Hotkeys.isDeleteBackward(event) ||
        Hotkeys.isDeleteForward(event) ||
        Hotkeys.isDeleteLineBackward(event) ||
        Hotkeys.isDeleteLineForward(event) ||
        Hotkeys.isDeleteWordBackward(event) ||
        Hotkeys.isDeleteWordForward(event) ||
        Hotkeys.isItalic(event) ||
        Hotkeys.isRedo(event) ||
        Hotkeys.isSplitBlock(event) ||
        Hotkeys.isTransposeCharacter(event) ||
        Hotkeys.isUndo(event))
    ) {
      event.preventDefault()
    }

    isUserActionPerformed = true
    debug('onKeyDown', { event })
    next()
  }
github ianstormtaylor / slate / packages / slate-react / src / components / content.js View on Github external
onEvent(handler, event) {
    debug('onEvent', handler)

    const nativeEvent = event.nativeEvent || event
    const isUndoRedo =
      event.type === 'keydown' &&
      (Hotkeys.isUndo(nativeEvent) || Hotkeys.isRedo(nativeEvent))

    // Ignore `onBlur`, `onFocus` and `onSelect` events generated
    // programmatically while updating selection.
    if (
      (this.tmp.isUpdatingSelection || isUndoRedo) &&
      (handler === 'onSelect' || handler === 'onBlur' || handler === 'onFocus')
    ) {
      return
    }

    // COMPAT: There are situations where a select event will fire with a new
    // native selection that resolves to the same internal position. In those
    // cases we don't need to trigger any changes, since our internal model is
    // already up to date, but we do want to update the native selection again
    // to make sure it is in sync. (2017/10/16)
    //
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / after.js View on Github external
return editor.deleteLineBackward()
    }

    if (Hotkeys.isDeleteLineForward(event)) {
      return editor.deleteLineForward()
    }

    if (Hotkeys.isDeleteWordBackward(event)) {
      return editor.deleteWordBackward()
    }

    if (Hotkeys.isDeleteWordForward(event)) {
      return editor.deleteWordForward()
    }

    if (Hotkeys.isRedo(event)) {
      return editor.redo()
    }

    if (Hotkeys.isUndo(event)) {
      return editor.undo()
    }

    // COMPAT: Certain browsers don't handle the selection updates properly. In
    // Chrome, the selection isn't properly extended. And in Firefox, the
    // selection isn't properly collapsed. (2017/10/17)
    if (Hotkeys.isMoveLineBackward(event)) {
      event.preventDefault()
      return editor.moveToStartOfBlock()
    }

    if (Hotkeys.isMoveLineForward(event)) {
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / before.js View on Github external
// elements which will editor the DOM and cause our value to be out of sync,
    // so they need to always be prevented.
    if (
      !IS_IOS &&
      (Hotkeys.isBold(event) ||
        Hotkeys.isDeleteBackward(event) ||
        Hotkeys.isDeleteForward(event) ||
        Hotkeys.isDeleteLineBackward(event) ||
        Hotkeys.isDeleteLineForward(event) ||
        Hotkeys.isDeleteWordBackward(event) ||
        Hotkeys.isDeleteWordForward(event) ||
        Hotkeys.isItalic(event) ||
        Hotkeys.isRedo(event) ||
        Hotkeys.isSplitBlock(event) ||
        Hotkeys.isTransposeCharacter(event) ||
        Hotkeys.isUndo(event))
    ) {
      event.preventDefault()
    }

    isUserActionPerformed = true
    debug('onKeyDown', { event })
    next()
  }
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / after.js View on Github external
return editor.deleteLineForward()
    }

    if (Hotkeys.isDeleteWordBackward(event)) {
      return editor.deleteWordBackward()
    }

    if (Hotkeys.isDeleteWordForward(event)) {
      return editor.deleteWordForward()
    }

    if (Hotkeys.isRedo(event)) {
      return editor.redo()
    }

    if (Hotkeys.isUndo(event)) {
      return editor.undo()
    }

    // COMPAT: Certain browsers don't handle the selection updates properly. In
    // Chrome, the selection isn't properly extended. And in Firefox, the
    // selection isn't properly collapsed. (2017/10/17)
    if (Hotkeys.isMoveLineBackward(event)) {
      event.preventDefault()
      return editor.moveToStartOfBlock()
    }

    if (Hotkeys.isMoveLineForward(event)) {
      event.preventDefault()
      return editor.moveToEndOfBlock()
    }
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / before.js View on Github external
// When composing, we need to prevent all hotkeys from executing while
    // typing. However, certain characters also move the selection before
    // we're able to handle it, so prevent their default behavior.
    if (isComposing) {
      if (Hotkeys.isCompose(event)) event.preventDefault()
      return
    }

    // Certain hotkeys have native editing behaviors in `contenteditable`
    // elements which will editor the DOM and cause our value to be out of sync,
    // so they need to always be prevented.
    if (
      !IS_IOS &&
      (Hotkeys.isBold(event) ||
        Hotkeys.isDeleteBackward(event) ||
        Hotkeys.isDeleteForward(event) ||
        Hotkeys.isDeleteLineBackward(event) ||
        Hotkeys.isDeleteLineForward(event) ||
        Hotkeys.isDeleteWordBackward(event) ||
        Hotkeys.isDeleteWordForward(event) ||
        Hotkeys.isItalic(event) ||
        Hotkeys.isRedo(event) ||
        Hotkeys.isSplitBlock(event) ||
        Hotkeys.isTransposeCharacter(event) ||
        Hotkeys.isUndo(event))
    ) {
      event.preventDefault()
    }

    isUserActionPerformed = true
    debug('onKeyDown', { event })
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / after.js View on Github external
const { value } = editor
    const { document, selection } = value
    const { start } = selection
    const hasVoidParent = document.hasVoidParent(start.path, editor)

    // COMPAT: In iOS, some of these hotkeys are handled in the
    // `onNativeBeforeInput` handler of the `<content>` component in order to
    // preserve native autocorrect behavior, so they shouldn't be handled here.
    if (Hotkeys.isSplitBlock(event) &amp;&amp; !IS_IOS) {
      return hasVoidParent
        ? editor.moveToStartOfNextText()
        : editor.splitBlock()
    }

    if (Hotkeys.isDeleteBackward(event) &amp;&amp; !IS_IOS) {
      return editor.deleteCharBackward()
    }

    if (Hotkeys.isDeleteForward(event) &amp;&amp; !IS_IOS) {
      return editor.deleteCharForward()
    }

    if (Hotkeys.isDeleteLineBackward(event)) {
      return editor.deleteLineBackward()
    }

    if (Hotkeys.isDeleteLineForward(event)) {
      return editor.deleteLineForward()
    }

    if (Hotkeys.isDeleteWordBackward(event)) {</content>
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / after.js View on Github external
const hasVoidParent = document.hasVoidParent(start.path, editor)

    // COMPAT: In iOS, some of these hotkeys are handled in the
    // `onNativeBeforeInput` handler of the `<content>` component in order to
    // preserve native autocorrect behavior, so they shouldn't be handled here.
    if (Hotkeys.isSplitBlock(event) &amp;&amp; !IS_IOS) {
      return hasVoidParent
        ? editor.moveToStartOfNextText()
        : editor.splitBlock()
    }

    if (Hotkeys.isDeleteBackward(event) &amp;&amp; !IS_IOS) {
      return editor.deleteCharBackward()
    }

    if (Hotkeys.isDeleteForward(event) &amp;&amp; !IS_IOS) {
      return editor.deleteCharForward()
    }

    if (Hotkeys.isDeleteLineBackward(event)) {
      return editor.deleteLineBackward()
    }

    if (Hotkeys.isDeleteLineForward(event)) {
      return editor.deleteLineForward()
    }

    if (Hotkeys.isDeleteWordBackward(event)) {
      return editor.deleteWordBackward()
    }

    if (Hotkeys.isDeleteWordForward(event)) {</content>
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / before.js View on Github external
// When composing, we need to prevent all hotkeys from executing while
    // typing. However, certain characters also move the selection before
    // we're able to handle it, so prevent their default behavior.
    if (isComposing) {
      if (Hotkeys.isCompose(event)) event.preventDefault()
      return
    }

    // Certain hotkeys have native editing behaviors in `contenteditable`
    // elements which will editor the DOM and cause our value to be out of sync,
    // so they need to always be prevented.
    if (
      !IS_IOS &&
      (Hotkeys.isBold(event) ||
        Hotkeys.isDeleteBackward(event) ||
        Hotkeys.isDeleteForward(event) ||
        Hotkeys.isDeleteLineBackward(event) ||
        Hotkeys.isDeleteLineForward(event) ||
        Hotkeys.isDeleteWordBackward(event) ||
        Hotkeys.isDeleteWordForward(event) ||
        Hotkeys.isItalic(event) ||
        Hotkeys.isRedo(event) ||
        Hotkeys.isSplitBlock(event) ||
        Hotkeys.isTransposeCharacter(event) ||
        Hotkeys.isUndo(event))
    ) {
      event.preventDefault()
    }

    isUserActionPerformed = true
    debug('onKeyDown', { event })
    next()
github ianstormtaylor / slate / packages / slate-react / src / plugins / dom / after.js View on Github external
// preserve native autocorrect behavior, so they shouldn't be handled here.
    if (Hotkeys.isSplitBlock(event) && !IS_IOS) {
      return hasVoidParent
        ? editor.moveToStartOfNextText()
        : editor.splitBlock()
    }

    if (Hotkeys.isDeleteBackward(event) && !IS_IOS) {
      return editor.deleteCharBackward()
    }

    if (Hotkeys.isDeleteForward(event) && !IS_IOS) {
      return editor.deleteCharForward()
    }

    if (Hotkeys.isDeleteLineBackward(event)) {
      return editor.deleteLineBackward()
    }

    if (Hotkeys.isDeleteLineForward(event)) {
      return editor.deleteLineForward()
    }

    if (Hotkeys.isDeleteWordBackward(event)) {
      return editor.deleteWordBackward()
    }

    if (Hotkeys.isDeleteWordForward(event)) {
      return editor.deleteWordForward()
    }

    if (Hotkeys.isRedo(event)) {