How to use prosemirror-model - 10 common examples

To help you get started, we’ve selected a few prosemirror-model 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 pubpub / pubpub-editor / packages / pubpub-editor / src / prosemirror-setup / rich-nodes / embedView.js View on Github external
updateCaption(txt) {
    // assumes no marks or anything
    let textNode = this.getTextNode();

    if (!textNode) {
      console.log('could not find textNode');
      return;
    }

    const slice = new Slice(Fragment.from(schema.text(txt)), 0, 0);
    const transaction = this.view.state.tr.replaceRange(textNode.from, textNode.to, slice);
    this.view.dispatch(transaction);
  }
github pubpub / pubpub-editor / src / addons / HighlightQuote / HighlightQuoteAddon.js View on Github external
&& singleChild
						&& matchesString
					) {
						const to = Number(node.textContent.match(/.*to=([0-9]+)/)[1]);
						const from = Number(node.textContent.match(/.*from=([0-9]+)/)[1]);
						const newNodeData = getHighlightContent(from, to);
						// let exact = '';
						// primaryEditorState.doc.slice(from, to).content.forEach((sliceNode)=>{ exact += sliceNode.textContent; });
						// let prefix = '';
						// primaryEditorState.doc.slice(Math.max(0, from - 10), Math.max(0, from)).content.forEach((sliceNode)=>{ prefix += sliceNode.textContent; });
						// let suffix = '';
						// primaryEditorState.doc.slice(Math.min(primaryEditorState.doc.nodeSize - 2, to), Math.min(primaryEditorState.doc.nodeSize - 2, to + 10)).content.forEach((sliceNode)=>{ suffix += sliceNode.textContent; });
						// console.log(to, from, exact, prefix, suffix);
						const newNode = node.type.schema.nodes.highlightQuote.create(newNodeData);
						/* TODO: this doesn't paste correctly inline */
						return new Slice(Fragment.fromArray([newNode, node.type.schema.nodes.paragraph.create()]), slice.openStart, slice.openEnd);
					}
					return slice;
				},
			},
github pubpub / pubpub-editor / src / plugins / highlightQuote.js View on Github external
// console.log(props.getHighlightContent, singleChild)
				if (props.getHighlightContent && singleChild && matchesString) {
					const to = Number(node.textContent.match(/.*to=([0-9]+)/)[1]);
					const from = Number(node.textContent.match(/.*from=([0-9]+)/)[1]);
					const newNodeData = props.getHighlightContent(from, to);
					// let exact = '';
					// primaryEditorState.doc.slice(from, to).content.forEach((sliceNode)=>{ exact += sliceNode.textContent; });
					// let prefix = '';
					// primaryEditorState.doc.slice(Math.max(0, from - 10), Math.max(0, from)).content.forEach((sliceNode)=>{ prefix += sliceNode.textContent; });
					// let suffix = '';
					// primaryEditorState.doc.slice(Math.min(primaryEditorState.doc.nodeSize - 2, to), Math.min(primaryEditorState.doc.nodeSize - 2, to + 10)).content.forEach((sliceNode)=>{ suffix += sliceNode.textContent; });
					// console.log(to, from, exact, prefix, suffix);
					const newNode = node.type.schema.nodes.highlightQuote.create(newNodeData);
					/* TODO: this doesn't paste correctly inline */
					return new Slice(
						Fragment.fromArray([newNode, node.type.schema.nodes.paragraph.create()]),
						slice.openStart,
						slice.openEnd,
					);
				}
				return slice;
			},
		},
github chanzuckerberg / czi-prosemirror / src / ListItemMergeCommand.js View on Github external
const prevNode = $pos.nodeBefore;
  if (!prevNode || prevNode.type !== nodeType) {
    return tr;
  }
  if (node.childCount !== 1) {
    // list item should only have one child (paragraph).
    return tr;
  }

  const paragraphNode = node.firstChild;
  const textNode = schema.text(' ');

  // Delete the list item
  tr = tr.delete(pos - 2, pos + node.nodeSize);
  // Append extra space character to its previous list item.
  tr = tr.insert(pos - 2, Fragment.from(textNode));
  // Move the content to its previous list item.
  tr = tr.insert(pos - 1, Fragment.from(paragraphNode.content));
  tr = tr.setSelection(TextSelection.create(tr.doc, pos - 1, pos - 1));
  return tr;
}
github namiwang / fiber-note / app / javascript / controllers / note / editor / list_cmds.ts View on Github external
let grandParent = $from.node(-1)
    if (grandParent.type != itemType) return false
    if ($from.parent.content.size == 0) {
      // In an empty block. If this is a nested list, the wrapping
      // list item should be split. Otherwise, bail out and let next
      // command handle lifting.
      if ($from.depth == 2 || $from.node(-3).type != itemType ||
          $from.index(-2) != $from.node(-2).childCount - 1) return false
      if (dispatch) {
        let wrap = Fragment.empty, keepItem = $from.index(-1) > 0
        // Build a fragment containing empty versions of the structure
        // from the outer list item to the parent node of the cursor
        for (let d = $from.depth - (keepItem ? 1 : 2); d >= $from.depth - 3; d--)
          wrap = Fragment.from($from.node(d).copy(wrap))
        // Add a second list item with an empty default start node
        wrap = wrap.append(Fragment.from(itemType.createAndFill()))
        let tr = state.tr.replace($from.before(keepItem ? null : -1), $from.after(-3), new Slice(wrap, keepItem ? 3 : 2, 2))
        tr.setSelection(state.selection.constructor.near(tr.doc.resolve($from.pos + (keepItem ? 3 : 2))))
        dispatch(tr.scrollIntoView())
      }
      return true
    }
    let nextType = $to.pos == $from.end() ? grandParent.contentMatchAt(0).defaultType : null
    let tr = state.tr.delete($from.pos, $to.pos)
    let types = nextType && [null, {type: nextType}]

    // NOTE
    // 
    // still not sure about the logic behind this `nextType` and `types`
    // 
    // seems that
    // 1. cursor at the end of a paragraph
github gamejolt / frontend-lib / components / content / content-editor / content-list.service.ts View on Github external
itemType: NodeType,
		range: NodeRange
	) {
		const tr = state.tr,
			end = range.end,
			endOfList = range.$to.end(range.depth);
		if (end < endOfList) {
			// There are siblings after the lifted items, which must become
			// children of the last item
			tr.step(
				new ReplaceAroundStep(
					end - 1,
					endOfList,
					end,
					endOfList,
					new Slice(Fragment.from(itemType.create(undefined, range.parent.copy())), 1, 0),
					1,
					true
				)
			);
			range = new NodeRange(
				tr.doc.resolve(range.$from.pos),
				tr.doc.resolve(endOfList),
				range.depth
			);
		}
		dispatch(tr.lift(range, liftTarget(range)!).scrollIntoView());
		return true;
	}
}
github cosmocode / dokuwiki-plugin-prosemirror / script / nodeviews / FootnoteView.js View on Github external
open() {
        jQuery(this.tooltip).dialog({
            minWidth: 1100,
            minHeight: 550,
            title: LANG.plugins.prosemirror.footnoteViewTitle,
            modal: true,
            appendTo: '.dokuwiki',
            close: this.dispatchOuter.bind(this),
        });
        // And put a sub-ProseMirror into that
        const footnoteSchema = new Schema(getFootnoteSpec());
        const mi = new MenuInitializer(footnoteSchema);
        this.innerView = new EditorView(this.tooltip, {
            // You can use any node as an editor document
            state: EditorState.create({
                doc: Node.fromJSON(footnoteSchema, JSON.parse(this.node.attrs.contentJSON)),
                footnoteSchema,
                plugins: [
                    mi.getMenuPlugin(),
                    getKeymapPlugin(footnoteSchema),
                ],
            }),
            // This is the magic part
            dispatchTransaction: this.dispatchInner.bind(this),
            handleDOMEvents: {
                mousedown: () => {
                    // Kludge to prevent issues due to the fact that the whole
github chanzuckerberg / czi-prosemirror / demo / SimpleEditor.js View on Github external
[DOC]: DocNodeSpec,
  [PARAGRAPH]: ParagraphNodeSpec,
  [TEXT]: TextNodeSpec,
  [HARD_BREAK]: HardBreakNodeSpec,
};

// Creates the marks mapping for schema. Please see `EditorMarks` for all the
// marks available.
const MARKS = {
  [MARK_LINK]: LinkMarkSpec,
  [MARK_STRONG]: StrongMarkSpec,
};

// Create the schema.
// See https://prosemirror.net/examples/schema/
const SCHEMA = new Schema({nodes: NODES, marks: MARKS});

// Define the plugins. Please see `EditorPlugins` for all the plugins
// available.
const PLUGINS = [
  // Plugin to let user edit link's url inline.
  new LinkTooltipPlugin(),

  // Plugin to persist user's text selection visible when the is not focsued.
  new SelectionPlaceholderPlugin(),

  // Basic behaviors.
  buildInputRules(SCHEMA),
  dropCursor(),
  gapCursor(),
  history(),
github ProseMirror / prosemirror-markdown / src / schema.js View on Github external
import {Schema} from "prosemirror-model"

// ::Schema Document schema for the data model used by CommonMark.
export const schema = new Schema({
  nodes: {
    doc: {
      content: "block+"
    },

    paragraph: {
      content: "inline*",
      group: "block",
      parseDOM: [{tag: "p"}],
      toDOM() { return ["p", 0] }
    },

    blockquote: {
      content: "block+",
      group: "block",
      parseDOM: [{tag: "blockquote"}],
github ProseMirror / website / example / dino / index.js View on Github external
}
  }]
}
// }

// schema{
import {Schema, DOMParser} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"

const dinoSchema = new Schema({
  nodes: schema.spec.nodes.addBefore("image", "dino", dinoNodeSpec),
  marks: schema.spec.marks
})

let content = document.querySelector("#content")
let startDoc = DOMParser.fromSchema(dinoSchema).parse(content)
// }

// command{
let dinoType = dinoSchema.nodes.dino

function insertDino(type) {
  return function(state, dispatch) {
    let {$from} = state.selection, index = $from.index()
    if (!$from.parent.canReplaceWith(index, index, dinoType))
      return false
    if (dispatch)
      dispatch(state.tr.replaceSelectionWith(dinoType.create({type})))
    return true
  }
}
// }