How to use prosemirror-commands - 10 common examples

To help you get started, we’ve selected a few prosemirror-commands 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 gamejolt / frontend-lib / components / content / content-editor / plugins / commands / keymap.ts View on Github external
export function getContentEditorKeymap(editor: AppContentEditor, schema: ContentEditorSchema) {
	const isMac = typeof navigator != 'undefined' ? /Mac/.test(navigator.platform) : false;

	const keymap = {
		'Mod-z': undo,
		'Shift-Mod-z': redo,
		'Mod-b': toggleMark(schema.marks.strong),
		'Mod-i': toggleMark(schema.marks.em),
		'Mod-`': toggleMark(schema.marks.code),
		'Shift-Enter': chainCommands(exitCodeStart(editor.capabilities), exitCode, insertHardBreak),
		// open emoji panel
		'Mod-e': () => {
			if (editor.capabilities.emoji) {
				editor.showEmojiPanel();
			}
			return true;
		},
		// Add/remove link
		'Mod-k': showLinkModal(editor.capabilities, schema),
	} as { [k: string]: any };

	const enterCommands = [] as PMKeymapCommand[];
github the-grid / ed / src / menu / menu-link.js View on Github external
run: function (state, dispatch, view, attrs) {
      // Toggle link off
      if (markActive(state, markType)) {
        toggleMark(markType)(state, dispatch)
        return true
      }

      // Toggle link on
      if (attrs) {
        toggleMark(markType, attrs)(state, dispatch)
        return true
      }

      // Prompt for link
      const {from, to} = state.selection
      const selectedText = state.doc.textBetween(from, to)
      const urlLike = isUrlLike(selectedText)
      const value = (urlLike ? selectedText : '')

      const {ed} = key.get(state).options.edStuff
github ProseMirror / website / example / menu / index.js View on Github external
}

// Create an icon for a heading at the given level
function heading(level) {
  return {
    command: setBlockType(schema.nodes.heading, {level}),
    dom: icon("H" + level, "heading")
  }
}

let menu = menuPlugin([
  {command: toggleMark(schema.marks.strong), dom: icon("B", "strong")},
  {command: toggleMark(schema.marks.em), dom: icon("i", "em")},
  {command: setBlockType(schema.nodes.paragraph), dom: icon("p", "paragraph")},
  heading(1), heading(2), heading(3),
  {command: wrapIn(schema.nodes.blockquote), dom: icon(">", "blockquote")}
])
// }

import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {baseKeymap} from "prosemirror-commands"
import {keymap} from "prosemirror-keymap"
import {DOMParser} from "prosemirror-model"

window.view = new EditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    doc: DOMParser.fromSchema(schema).parse(document.querySelector("#content")),
    plugins: [keymap(baseKeymap), menu]
  })
})
github ProseMirror / prosemirror-menu / src / menu.js View on Github external
run(state, dispatch) {
      // FIXME if (options.attrs instanceof Function) options.attrs(state, attrs => wrapIn(nodeType, attrs)(state))
      return wrapIn(nodeType, options.attrs)(state, dispatch)
    },
    select(state) {
github pubpub / pubpub-editor / src / addons / HeaderMenu / headerMenuConfig.js View on Github external
function toggleWrap(type) {
		if (blockTypeIsActive(type)) {
			return lift(view.state, view.dispatch);
		}
		const wrapFunction = wrapIn(type);
		return wrapFunction(view.state, view.dispatch);
	}
	/* -------------- */
github pubpub / pubpub-editor / src / addons / FormattingMenu / formattingMenuConfig.js View on Github external
function toggleWrap(type) {
		if (blockTypeIsActive(type)) {
			return lift(view.state, view.dispatch);
		}
		const wrapFunction = wrapIn(type);
		return wrapFunction(view.state, view.dispatch);
	}
	/* -------------- */
github tinacms / tinacms / packages / tinacms / fields / src / Wysiwyg / state / plugins / keymap / keymap.ts View on Github external
})
  }

  /**
   * Underline – <span style="text-decoration: underline">
   */
  if ((type = schema.marks.underline)) {
    bind('Mod-u', toggleMark(type))
  }

  /**
   * Hard Break – <br>
   */
  if ((type = schema.nodes.hard_break)) {
    const br = type,
      cmd = chainCommands(exitCode, (state, dispatch) =&gt; {
        // @ts-ignore
        dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView())
        return true
      })
    if (!schema.nodes.paragraph) {
      bind('Enter', cmd)
    }
    bind('Mod-Enter', cmd)
    bind('Shift-Enter', cmd)
    if (mac) bind('Ctrl-Enter', cmd)
  }

  /**
   * Headings - 
   */
  if ((type = schema.nodes.heading)) {</span>
github zodiac-team / zodiac-ui / libs / editor / src / plugins / block-type / keymap.ts View on Github external
EXTERNAL = "external",
    FORMATTING = "autoformatting",
    FLOATING_TB = "floatingToolbar",
    KEYBOARD = "keyboard",
    INSERT_MENU = "insertMenu",
    MANUAL = "manual",
    PICKER = "picker",
    PICKER_CLOUD = "cloudPicker",
    QUICK_INSERT = "quickInsert",
    SHORTCUT = "shortcut",
    TOOLBAR = "toolbar",
    TYPEAHEAD = "typeAhead",
}

const not = (fn: (args: T) =&gt; boolean) =&gt; (arg: T) =&gt; !fn(arg)
const tryUndoInputRuleElseUndoHistory = chainCommands(undoInputRule, undoCmd)

export const removeBlockMarks = (
    state: EditorState,
    marks: Array,
): Transaction | undefined =&gt; {
    // tslint:disable-next-line:no-shadowed-variable
    const { selection, schema } = state
    let { tr } = state

    // Marks might not exist in Schema
    const marksToRemove = marks.filter(Boolean)
    if (marksToRemove.length === 0) {
        return undefined
    }

    /** Saves an extra dispatch */
github pubpub / pubpub-editor / src / addons / HeaderMenu / headerMenuConfig.js View on Github external
function toggleWrap(type) {
		if (blockTypeIsActive(type)) {
			return lift(view.state, view.dispatch);
		}
		const wrapFunction = wrapIn(type);
		return wrapFunction(view.state, view.dispatch);
	}
	/* -------------- */
github pubpub / pubpub-editor / src / addons / FormattingMenu / formattingMenuConfig.js View on Github external
function toggleWrap(type) {
		if (blockTypeIsActive(type)) {
			return lift(view.state, view.dispatch);
		}
		const wrapFunction = wrapIn(type);
		return wrapFunction(view.state, view.dispatch);
	}
	/* -------------- */