How to use prosemirror-keymap - 10 common examples

To help you get started, we’ve selected a few prosemirror-keymap 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 namiwang / fiber-note / app / javascript / controllers / note / editor.ts View on Github external
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)
github alidcastano / vue-prosemirror-editor / src / plugins / keys.js View on Github external
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)
}
github ProseMirror / website / example / footnote / index.js View on Github external
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()
        }
      }
    })
  }
github vm-mishchenko / ngx-wall / projects / ngx-rich-input / src / lib / rich-input.component.ts View on Github external
...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;
        }
github zodiac-team / zodiac-ui / libs / editor / src / plugins / text-formatting / strike / strike.keymap.ts View on Github external
export function strikeKeymap() {
    const bindings = {}

    bindKeymapWithCommand(findKeyMapForBrowser(key), toggleStrike(), bindings)

    return keymap(bindings)
}
github zodiac-team / zodiac-ui / libs / editor / src / plugins / text-formatting / underline / underline.keymap.ts View on Github external
export function underlineKeymap() {
    const bindings = {}

    bindKeymapWithCommand(findKeyMapForBrowser(key), toggleUnderline(), bindings)

    return keymap(bindings)
}
github zodiac-team / zodiac-ui / libs / editor / src / plugins / text-formatting / strong / strong.keymap.ts View on Github external
export function strongKeymap() {
    const bindings = {}

    bindKeymapWithCommand(findKeyMapForBrowser(key), toggleStrong(), bindings)

    return keymap(bindings)
}
github zodiac-team / zodiac-ui / libs / editor / src / plugins / text-formatting / subsup / subsup.keymap.ts View on Github external
export function supsubKeymap() {
    const bindings = {}

    bindKeymapWithCommand(findKeyMapForBrowser(supKey), toggleSuperscript(), bindings)

    bindKeymapWithCommand(findKeyMapForBrowser(subKey), toggleSubscript(), bindings)

    return keymap(bindings)
}
github zodiac-team / zodiac-ui / libs / editor / src / plugins / text-formatting / emphasis / emphasis.keymap.ts View on Github external
export function emphasisKeymap() {
    const bindings = {}

    bindKeymapWithCommand(findKeyMapForBrowser(key), toggleEm(), bindings)

    return keymap(bindings)
}
github ProseMirror / website / example / schema / index.js View on Github external
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()])
    })
  })
}

prosemirror-keymap

Keymap plugin for ProseMirror

MIT
Latest version published 2 years ago

Package Health Score

67 / 100
Full package analysis

Popular prosemirror-keymap functions

Similar packages