How to use the prosemirror-state.EditorState.create function in prosemirror-state

To help you get started, we’ve selected a few prosemirror-state 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 ProseMirror / website / example / lint / index.js View on Github external
return true
        }
      }
    }
  }
})
// }

// editor{
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {DOMParser} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"
import {exampleSetup} from "prosemirror-example-setup"

let state = EditorState.create({
  doc: DOMParser.fromSchema(schema).parse(document.querySelector("#content")),
  plugins: exampleSetup({schema}).concat(lintPlugin)
})

window.view = new EditorView(document.querySelector("#editor"), {state})
// }
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 pubpub / pubpub-editor / src / plugins / collaborativeold.js View on Github external
uncompressStepJSON(compressedStepJSON),
						);
					});
					steps.push(...uncompressedSteps);
					stepClientIds.push(
						...new Array(compressedStepsJSON.length).fill(changesSnapshotVal[key].c),
					);
				});

				/* Update the prosemirror view with new doc */
				const newDoc = Node.fromJSON(
					this.view.state.schema,
					this.pluginProps.initialContent,
				);
				this.view.updateState(
					EditorState.create({
						doc: newDoc,
						plugins: this.view.state.plugins,
					}),
				);

				this.pluginProps.onUpdateLatestKey(this.mostRecentRemoteKey);

				const trans = receiveTransaction(this.view.state, steps, stepClientIds);
				this.view.dispatch(trans);

				/* Retrieve and Listen to Cursors */
				if (!this.pluginProps.isReadOnly) {
					const cursorsRef = this.pluginProps.firebaseRef.child('cursors');
					cursorsRef
						.child(this.pluginProps.localClientId)
						.onDisconnect()
github guardian / facia-tool / client-v2 / src / components / inputs / richtext / setup.ts View on Github external
export const createEditorView = (
  input: WrappedFieldInputProps,
  editorEl: RefObject,
  contentEl: HTMLDivElement
) => {
  if (!editorEl.current) {
    return;
  }
  const ed: EditorView = new EditorView(editorEl.current, {
    state: EditorState.create({
      doc: DOMParser.fromSchema(basicSchema).parse(contentEl),
      plugins: createBasePlugins(basicSchema)
    }),
    dispatchTransaction: (transaction: Transaction) => {
      const { state, transactions } = ed.state.applyTransaction(transaction);
      ed.updateState(state);

      if (transactions.some((tr: Transaction) => tr.docChanged)) {
        const serializer = DOMSerializer.fromSchema(basicSchema);
        const outputHtml = serializer.serializeFragment(state.doc.content);
        // to format the outputHtml as an html string rather than a document fragment, we are creating a temporary div, adding it as a child, then using innerHTML which returns an html string
        const tmp = document.createElement('div');
        tmp.appendChild(outputHtml);
        if (input.onChange) {
          input.onChange(tmp.innerHTML);
        }
github ProseMirror / prosemirror-view / test / view.js View on Github external
function tempEditor(inProps) {
  let space = document.querySelector("#workspace")
  if (tempView) {
    tempView.destroy()
    tempView = null
  }

  let props = {}
  for (let n in inProps) props[n] = inProps[n]
  props.state = EditorState.create({doc: props.doc,
                                    schema,
                                    selection: props.doc && selFor(props.doc),
                                    plugins: props.plugins})
  return tempView = new EditorView(space, props)
}
exports.tempEditor = tempEditor
github tinacms / tinacms / packages / tinacms / fields / src / prosemirror-test-utils / index.ts View on Github external
private setDoc = (doc?: Node, selection?: Selection) => {
    this.state = EditorState.create({
      schema: this.schema,
      doc,
      selection,
    })
  }
github pubpub / pubpub / src / components / AtomTypes / Document / proseEditor / simpleEditor.js View on Github external
clear: () => {
      const newState = EditorState.create({schema: pubSchema});
      view.updateState(newState);
    },
  };
github scrumpy / tiptap / packages / tiptap / src / Editor.js View on Github external
createState() {
    return EditorState.create({
      schema: this.schema,
      doc: this.createDocument(this.options.content),
      plugins: [
        ...this.plugins,
        inputRules({
          rules: this.inputRules,
        }),
        ...this.pasteRules,
        ...this.keymaps,
        keymap({
          Backspace: undoInputRule,
        }),
        keymap(baseKeymap),
        dropCursor(this.options.dropCursor),
        gapCursor(),
        new Plugin({
github pubpub / pubpub-editor / src / SimpleEditor.js View on Github external
createEditor() {
		const simpleSchema = new Schema({
			nodes: {
				doc: nodes.doc,
				paragraph: nodes.paragraph,
				text: nodes.text,
			},
			marks: marks,
		});
		
		const wrapperElem = document.createElement('div');
		wrapperElem.innerHTML = this.props.initialHtmlString;

		const editorState = EditorState.create({
			doc: DOMParser.fromSchema(simpleSchema).parse(wrapperElem),
			schema: simpleSchema,
			plugins: getBasePlugins({
				schema: simpleSchema,
				placeholder: this.props.placeholder,
			})
		});
		this.view = new EditorView(document.getElementById(this.containerId), {
			state: editorState,
			dispatchTransaction: this._onAction,
		});
	}