How to use the prosemirror-view.DecorationSet.create 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 / Collaborative / newFirebasePlugin.js View on Github external
decorations = (state) => {
		if (!this.document) { return null; }

		/* Remove inactive cursor bubbles */
		const selectionKeys = Object.keys(this.document.selections);
		const existingElements = document.getElementsByClassName('left-cursor');
		for (let index = 0; index < existingElements.length; index++) {
			const domItemClientId = existingElements[index].id.replace('cursor-', '');
			const itemIndex = selectionKeys.indexOf(domItemClientId);
			if (itemIndex === -1) {
				existingElements[index].remove();
			}
		}

		return DecorationSet.create(state.doc, selectionKeys.map((clientId)=> {
			const selection = this.document.selections[clientId];
			const data = selection.data || {};
			if (!selection) {
				return null;
			}
			const { from, to } = selection;

			if (clientId === this.localClientId) {
				return null;
			}
			if (from === to) {
				const toPos = selection.$to.pos;
				if (!toPos) { return null; }
				const cursorCoords = this.view.coordsAtPos(toPos);
				const rootElem = document.getElementById(`cursor-container-${this.editorKey}`);
				if (!rootElem) { return null; }
github pubpub / pubpub-editor / packages / pubpub-prose / src / prosemirror-setup / plugins / mentionsPlugin.js View on Github external
const nextChIndex = currentPos.parentOffset;

				const nextCh = currentLine.length > nextChIndex ? currentLine.charAt(nextChIndex) : ' ';

				const prevChars = currentLine.substring(0, currentPos.parentOffset);
				// const startIndex = Math.max(prevChars.lastIndexOf(' ') + 1, prevChars.lastIndexOf(' ') + 1);
				const startIndex = prevChars.lastIndexOf(' ') + 1;
				const startLetter = currentLine.charAt(startIndex);
				// const shouldMark = startLetter === '@' && (nextCh.charCodeAt(0) === 32 || nextCh.charCodeAt(0) === 160);
				const shouldMark = startLetter === '@' && nextCh.charCodeAt(0) === 32;
				if (shouldMark) {
					const substring = currentLine.substring(startIndex + 1, nextChIndex) || ' ';
					const start = currentPos.pos - currentPos.parentOffset + startIndex;
					const end = currentPos.pos - currentPos.parentOffset + startIndex + 1 + substring.length;
					const decorations = [Decoration.inline(start, end, { class: 'mention-marker' })];
					const decos = DecorationSet.create(editorState.doc, decorations);

					// updateMentions(currentLine.substring(start - 1, currentPos.pos) || ' ');
					updateMentions(substring);
					return { decos: decos, start, end };
				}

			}
			updateMentions('');
			return { decos: DecorationSet.empty, start: null, end: null };
		}
	},
github ifiokjr / remirror / @remirror / core-extensions / src / extensions / placeholder / plugin.ts View on Github external
const { emptyNodeClass, placeholder } = extension.options;

  if (!empty) {
    return;
  }
  const decorations: Decoration[] = [];
  state.doc.descendants((node, pos) => {
    const decoration = Decoration.node(pos, pos + node.nodeSize, {
      class: emptyNodeClass,
      // @ts-ignore
      'data-placeholder': placeholder,
    });
    decorations.push(decoration);
  });

  return DecorationSet.create(state.doc, decorations);
};
github scrumpy / tiptap / packages / tiptap-extensions / src / extensions / Placeholder.js View on Github external
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
            })

            return DecorationSet.create(doc, decorations)
          },
        },
github scrumpy / tiptap / packages / tiptap-extensions / src / plugins / Suggestions.js View on Github external
decorations(editorState) {
        const { active, range, decorationId } = this.getState(editorState)

        if (!active) return null

        return DecorationSet.create(editorState.doc, [
          Decoration.inline(range.from, range.to, {
            nodeName: 'span',
            class: suggestionClass,
            'data-decoration-id': decorationId,
          }),
        ])
      },
    },
github pubpub / pubpub-editor / src / addons / CollaborativeNew / collaborativePluginNew2.js View on Github external
style.innerHTML = innerStyle;

			const selectionFrom = selection.from;
			const selectionTo = selection.to;
			const selectionHead = selection.head;
			decorations.push(Decoration.widget(selectionHead, elem));

			if (selectionFrom !== selectionTo) {
				decorations.push(Decoration.inline(selectionFrom, selectionTo, {
					class: `collab-selection ${data.id}`,
					style: `background-color: ${data.backgroundColor || 'rgba(0, 25, 150, 0.2)'};`,
				}));
			}
			return null;
		});
		return DecorationSet.create(state.doc, decorations.filter((dec)=> {
			return !!dec;
		}));
	}
}
github pubpub / pubpub-editor / packages / pubpub-editor / src / addons / CollaborativeAddon / FirebasePlugin.js View on Github external
decorations(state) {
        return DecorationSet.create(state.doc, Object.entries(selections).map(
          function ([ clientID, { from, to } ]) {
              if (clientID === selfClientID) {
                return null;
              }
              if (from === to) {
                  let elem = document.createElement('span')
                  elem.className = "collab-cursor";
                  elem.style.borderLeft = `1px solid ${stringToColor(clientID)}`
                  return Decoration.widget(from, elem)
              } else {
                  return Decoration.inline(from, to, {
                      style: `background-color: ${stringToColor(clientID, 0.2)};`,
                  })
              }
          }
        ));
github pubpub / pubpub-editor / packages / pubpub-editor / src / prosemirror-setup / plugins / footnotesPlugin.js View on Github external
const createDecorations = (doc, set) => {
	const nodes = findNodesWithIndex(doc, 'footnote') || [];
	let count = 0;
	const decos = nodes.map((node, index) => {
		count++;
		const deco = createFootnoteDecoration(node.index, node.node, count);
		return deco;
	});

	const newSet = DecorationSet.create(doc, decos);
	return newSet;
}
github guardian / prosemirror-noting / src / js / utils / DecorationUtils.js View on Github external
) => state =>
  DecorationSet.create(state.doc, [
    ...noteTracker.notes.reduce(
      (out, { id, start, end, meta: { type } }) => [
        ...out,
        noteWrapper(
          id,
          start,
          state.selection.$cursor && state.selection.$cursor.pos,
          type,
          -1,
          noteTransaction.currentNoteID === id,
          pluginPriority
        ),
        noteWrapper(
          id,
          end,
          state.selection.$cursor && state.selection.$cursor.pos,
github ifiokjr / remirror / @remirror / extension-code-block / src / code-block-plugin.ts View on Github external
private refreshDecorationSet({ blocks, node }: RefreshDecorationSetParams) {
    const decorations = createDecorations({ blocks, skipLast: this.deleted });
    this.decorationSet = DecorationSet.create(node, decorations);
    this.blocks = blocks;
  }