upfront-editable
Version:
Friendly contenteditable API
211 lines (193 loc) • 6.97 kB
JavaScript
import createDefaultBehavior from './create-default-behavior'
export default function createDefaultEvents (editable) {
const behavior = createDefaultBehavior(editable)
return {
/**
* The focus event is triggered when an element gains focus.
* The default behavior is to... TODO
*
* @event focus
* @param {HTMLElement} element The element triggering the event.
*/
focus (element) {
behavior.focus(element)
},
/**
* The blur event is triggered when an element looses focus.
* The default behavior is to... TODO
*
* @event blur
* @param {HTMLElement} element The element triggering the event.
*/
blur (element) {
behavior.blur(element)
},
/**
* The flow event is triggered when the user starts typing or pause typing.
* The default behavior is to... TODO
*
* @event flow
* @param {HTMLElement} element The element triggering the event.
* @param {String} action The flow action: "start" or "pause".
*/
flow (element, action) {
behavior.flow(element, action)
},
/**
* The selection event is triggered after the user has selected some
* content.
* The default behavior is to... TODO
*
* @event selection
* @param {HTMLElement} element The element triggering the event.
* @param {Selection} selection The actual Selection object.
*/
selection (element, selection) {
behavior.selection(element, selection)
},
/**
* The cursor event is triggered after cursor position has changed.
* The default behavior is to... TODO
*
* @event cursor
* @param {HTMLElement} element The element triggering the event.
* @param {Cursor} cursor The actual Cursor object.
*/
cursor (element, cursor) {
behavior.cursor(element, cursor)
},
/**
* The newline event is triggered when a newline should be inserted. This
* happens when SHIFT+ENTER key is pressed.
* The default behavior is to add a <br />
*
* @event newline
* @param {HTMLElement} element The element triggering the event.
* @param {Cursor} cursor The actual cursor object.
*/
newline (element, cursor) {
behavior.newline(element, cursor)
},
/**
* The split event is triggered when a block should be split into two
* blocks. This happens when ENTER is pressed within a non-empty block.
* The default behavior is to... TODO
*
* @event split
* @param {HTMLElement} element The element triggering the event.
* @param {String} before The HTML string before the split.
* @param {String} after The HTML string after the split.
* @param {Cursor} cursor The actual cursor object.
*/
split (element, before, after, cursor) {
behavior.split(element, before, after, cursor)
},
/**
* The insert event is triggered when a new block should be inserted. This
* happens when ENTER key is pressed at the beginning of a block (should
* insert before) or at the end of a block (should insert after).
* The default behavior is to... TODO
*
* @event insert
* @param {HTMLElement} element The element triggering the event.
* @param {String} direction The insert direction: "before" or "after".
* @param {Cursor} cursor The actual cursor object.
*/
insert (element, direction, cursor) {
behavior.insert(element, direction, cursor)
},
/**
* The merge event is triggered when two needs to be merged. This happens
* when BACKSPACE is pressed at the beginning of a block (should merge with
* the preceding block) or DEL is pressed at the end of a block (should
* merge with the following block).
* The default behavior is to... TODO
*
* @event merge
* @param {HTMLElement} element The element triggering the event.
* @param {String} direction The merge direction: "before" or "after".
* @param {Cursor} cursor The actual cursor object.
*/
merge (element, direction, cursor) {
behavior.merge(element, direction, cursor)
},
/**
* The empty event is triggered when a block is emptied.
* The default behavior is to... TODO
*
* @event empty
* @param {HTMLElement} element The element triggering the event.
*/
empty (element) {
behavior.empty(element)
},
/**
* The switch event is triggered when the user switches to another block.
* This happens when an ARROW key is pressed near the boundaries of a block.
* The default behavior is to... TODO
*
* @event switch
* @param {HTMLElement} element The element triggering the event.
* @param {String} direction The switch direction: "before" or "after".
* @param {Cursor} cursor The actual cursor object.*
*/
switch (element, direction, cursor) {
behavior.switch(element, direction, cursor)
},
/**
* The move event is triggered when the user moves a selection in a block.
* This happens when the user selects some (or all) content in a block and
* an ARROW key is pressed (up: drag before, down: drag after).
* The default behavior is to... TODO
*
* @event move
* @param {HTMLElement} element The element triggering the event.
* @param {Selection} selection The actual Selection object.
* @param {String} direction The move direction: "before" or "after".
*/
move (element, selection, direction) {
behavior.move(element, selection, direction)
},
/**
* The clipboard event is triggered when the user copies or cuts
* a selection within a block.
*
* @event clipboard
* @param {HTMLElement} element The element triggering the event.
* @param {String} action The clipboard action: "copy" or "cut".
* @param {Selection} selection A selection object around the copied content.
*/
clipboard (element, action, selection) {
behavior.clipboard(element, action, selection)
},
/**
* The paste event is triggered when the user pastes text
*
* @event paste
* @param {HTMLElement} The element triggering the event.
* @param {Array of String} The pasted blocks
* @param {Cursor} The cursor object.
*/
paste (element, blocks, cursor) {
behavior.paste(element, blocks, cursor)
},
/**
* The toggleBold event is triggered when the bold keyboard shortcut is used
*
* @event toggleBold
* @param {Selection} The selection object.
*/
toggleBold (selection) {
behavior.toggleBold(selection)
},
/**
* The toggleEmphasis event is triggered when the italic keyboard shortcut is used
*
* @event toggleEmphasis
* @param {Selection} The selection object.
*/
toggleEmphasis (selection) {
behavior.toggleEmphasis(selection)
}
}
}