How to use the prosemirror-view.Decoration.node function in prosemirror-view

To help you get started, we’ve selected a few prosemirror-view 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 / src / addons / TrackChanges / TrackChangesPlugin.js View on Github external
editorState.doc.forEach((node, offset)=> {
					// console.log(node.attrs);
					if (node.attrs.trackChangesData.userId) {
						const decoration = Decoration.node(
							offset,
							offset + node.nodeSize,
							{ class: 'wow' }
						);
						decorations.push(decoration);
					}
				});
				return DecorationSet.create(editorState.doc, decorations);
github pubpub / pubpub-editor / stories / ChangesetDemo.js View on Github external
fragment.forEach((child, offset) => {
							const from = change.fromB + offset;
							const to = from + child.nodeSize;
							console.log(from, to, child);
							if (child.isBlock && !child.isTextblock) {
								output.push(Decoration.node(from, to, { class: 'addition' }));
							} else {
								output.push(Decoration.inline(from, to, { class: 'addition' }));
								console.log(
									'oh no',
									child.textContent,
									child.isBlock,
									child.isTextBock,
									child.isText,
								);
							}
						});
					}
github pubpub / pubpub-editor / packages / pubpub-editor / src / addons / CitationsAddon / citationsPlugin.js View on Github external
const createReferenceDecoration = (index, node, label) => {
	return Decoration.node(index , index + 1, {}, { citationID: node.attrs.citationID, label });
}
github pubpub / pubpub-editor / packages / pubpub-editor / src / prosemirror-setup / plugins / footnotesPlugin.js View on Github external
const createFootnoteDecoration = (index, node, label) => {
	return Decoration.node(index , index + node.nodeSize, {}, { label });
}
github nib-edit / Nib / packages / core / src / plugins / table / plugins.js View on Github external
const editorFocused = tr.getMeta("EDITOR_FOCUSED");
        if (editorFocused === false) return {};

        let decoration;
        const { schema, selection } = newState;
        const {
          table_cell: schemaTableCell,
          table_header: schemaTableHeader
        } = schema.nodes;
        const tableCell = findParentNode(
          ({ type }) => type === schemaTableCell || type === schemaTableHeader
        )(selection);

        if (tableCell) {
          decoration = DecorationSet.create(newState.doc, [
            Decoration.node(
              tableCell.start - 1,
              tableCell.start + tableCell.node.nodeSize - 1,
              {
                class: "nib-table-cell-marker",
                style: "position: relative;"
              }
            )
          ]);
        }
        return { decoration };
      }
    },
github ifiokjr / remirror / @remirror / core-extensions / src / extensions / placeholder / placeholder-plugin.ts View on Github external
state.doc.descendants((node, pos) => {
    const decoration = Decoration.node(pos, pos + node.nodeSize, {
      class: emptyNodeClass,
      'data-placeholder': placeholder,
    });
    decorations.push(decoration);
  });
github scrumpy / tiptap / packages / tiptap-extensions / src / extensions / Placeholder.js View on Github external
doc.descendants((node, pos) => {
              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
              const isNodeEmpty = node.content.size === 0

              if ((hasAnchor || !this.options.showOnlyCurrent) && isNodeEmpty) {
                const classes = [this.options.emptyNodeClass]

                if (isEditorEmpty) {
                  classes.push(this.options.emptyEditorClass)
                }

                const decoration = Decoration.node(pos, pos + node.nodeSize, {
                  class: classes.join(' '),
                  'data-empty-text': typeof this.options.emptyNodeText === 'function'
                    ? this.options.emptyNodeText(node)
                    : this.options.emptyNodeText,
                })
                decorations.push(decoration)
              }

              return false
            })
github ifiokjr / remirror / @remirror / extension-drop-cursor / src / drop-cursor-plugin.tsx View on Github external
const decorations: Decoration[] = [];

    const dropCursor = Decoration.widget($pos.pos, this.blockElement, { key: 'drop-cursor-block' });
    const before = findPositionOfNodeBefore($pos);
    const after = findPositionOfNodeAfter($pos);
    decorations.push(dropCursor);

    if (before) {
      const beforeDecoration = Decoration.node(before.pos, before.end, {
        class: beforeBlockClassName,
      });
      decorations.push(beforeDecoration);
    }

    if (after) {
      const afterDecoration = Decoration.node(after.pos, after.end, {
        class: afterBlockClassName,
      });
      decorations.push(afterDecoration);
    }

    return decorations;
  }
github ProseMirror / prosemirror-tables / src / cellselection.js View on Github external
state.selection.forEachCell((node, pos) => {
    cells.push(Decoration.node(pos, pos + node.nodeSize, {class: "selectedCell"}))
  })
  return DecorationSet.create(state.doc, cells)
github pubpub / pubpub-editor / packages / pubpub-editor / src / prosemirror-setup / plugins / diffPlugin.js View on Github external
const patchDecorations = ranges.map((range) => {
              if (range.type === 'node') {
                return Decoration.node(range.to, range.from, {class: className}, {diffIndex});
              } else {
                return Decoration.inline(range.to, range.from,
                  {class: className},
                  { inclusiveLeft: true,
                    inclusiveRight: true,
                    diffIndex
                  }
                );
              }
            });
	          decos = decos.concat(patchDecorations);