Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'prosemirror-keymap' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
constructor(
editorHolder: Element,
contentHolder: Element
) {
let state = EditorState.create({
doc: DOMParser.fromSchema(schema).parse(contentHolder),
plugins: [
buildInputRules(schema),
// TODO keymap around enter -> new list item
// https://discuss.prosemirror.net/t/lists-paragraph-inside-li-instead-of-new-list-item/455
// TODO keymap around tab and shift-tab
// TODO extract hints about available keys
// https://github.com/prosemirror/prosemirror-example-setup/blob/master/src/keymap.js
keymap(buildKeymap(schema)),
keymap(baseKeymap),
dropCursor(),
gapCursor(),
history(),
]
})
this.view = new EditorView(editorHolder, {
state: state,
dispatchTransaction(transaction) {
let view = this
transaction.before
console.log(`transaction`)
console.log(transaction.before)
else if (!keys[k] && k === 'Shift-Ctrl-2' && nodes.heading) keys[k] = keyCommands[k](nodes.heading)
else if (!keys[k] && k === 'Shift-Ctrl-3' && nodes.heading) keys[k] = keyCommands[k](nodes.heading)
else if (!keys[k] && k === 'Shift-Ctrl-4' && nodes.heading) keys[k] = keyCommands[k](nodes.heading)
else if (!keys[k] && k === 'Mod-_' && nodes.horizontal_rule) keys[k] = keyCommands[k](nodes.horizontal_rule)
else if (!keys[k]) keys[k] = keyCommands[k]()
})
Object.keys(baseKeymap).forEach(key => { // merge base commands
if (keys[key]) {
keys[key] = chainCommands(keys[key], baseKeymap[key])
} else {
keys[key] = baseKeymap[key]
}
})
return keymap(keys)
}
open() {
// Append a tooltip to the outer node
let tooltip = this.dom.appendChild(document.createElement("div"))
tooltip.className = "footnote-tooltip"
// And put a sub-ProseMirror into that
this.innerView = new EditorView(tooltip, {
// You can use any node as an editor document
state: EditorState.create({
doc: this.node,
plugins: [keymap({
"Mod-z": () => undo(this.outerView.state, this.outerView.dispatch),
"Mod-y": () => redo(this.outerView.state, this.outerView.dispatch)
})]
}),
// This is the magic part
dispatchTransaction: this.dispatchInner.bind(this),
handleDOMEvents: {
mousedown: () => {
// Kludge to prevent issues due to the fact that the whole
// footnote is node-selected (and thus DOM-selected) when
// the parent editor is focused.
if (this.outerView.hasFocus()) this.innerView.focus()
}
}
})
}
...plugin.registerHotkey()
};
return result;
}, {});
console.log(`Register plugin hotkeys:`);
console.log(pluginHotKeys);
const state = EditorState.create({
doc: DOMParser.fromSchema(customSchema).parse(domNode),
schema: customSchema,
plugins: [
keymap(pluginHotKeys),
keymap(customKeyMapConfig),
keymap(baseKeymap),
]
});
this.view = new EditorView(this.options.container, {
state,
dispatchTransaction: (transaction) => {
const pluginCancelTransaction = this.options.plugins.filter((plugin) => {
return plugin.preTransactionHook;
}).some((plugin) => {
return plugin.preTransactionHook(transaction);
});
if (pluginCancelTransaction) {
console.log(`plugin cancel transaction`);
return;
}
export function strikeKeymap() {
const bindings = {}
bindKeymapWithCommand(findKeyMapForBrowser(key), toggleStrike(), bindings)
return keymap(bindings)
}
export function underlineKeymap() {
const bindings = {}
bindKeymapWithCommand(findKeyMapForBrowser(key), toggleUnderline(), bindings)
return keymap(bindings)
}
export function strongKeymap() {
const bindings = {}
bindKeymapWithCommand(findKeyMapForBrowser(key), toggleStrong(), bindings)
return keymap(bindings)
}
export function supsubKeymap() {
const bindings = {}
bindKeymapWithCommand(findKeyMapForBrowser(supKey), toggleSuperscript(), bindings)
bindKeymapWithCommand(findKeyMapForBrowser(subKey), toggleSubscript(), bindings)
return keymap(bindings)
}
export function emphasisKeymap() {
const bindings = {}
bindKeymapWithCommand(findKeyMapForBrowser(key), toggleEm(), bindings)
return keymap(bindings)
}
function start(place, content, schema, plugins = []) {
let doc = DOMParser.fromSchema(schema).parse(content)
return new EditorView(place, {
state: EditorState.create({
doc,
plugins: plugins.concat([histKeymap, keymap(baseKeymap), history()])
})
})
}