@atlaskit/editor-plugin-selection-marker/dist/es2019/ui/selection-decoration.js

Selection marker plugin for @atlaskit/editor-core.

import { Decoration } from '@atlaskit/editor-prosemirror/view';
const decorationStyle = `
    background-color: ${"var(--ds-background-neutral, #0515240F)"};
  `;
const decorationHighlightStyle = `
    background-color: ${"var(--ds-background-accent-blue-subtlest, #E9F2FE)"};
    border-bottom: ${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-background-accent-blue-subtler, #CFE1FD)"};
  `;
export const selectionDecoration = (doc, selection, isHighlight) => {
  const selectionDecorations = [];
  doc.nodesBetween(selection.from, selection.to, (currentNode, nodePos) => {
    if (!currentNode.isText) {
      return true;
    }
    let decorationFrom = selection.from;
    let decorationTo = selection.to;
    if (nodePos > selection.from) {
      decorationFrom = nodePos;
    }
    if (nodePos + currentNode.nodeSize < selection.to) {
      decorationTo = nodePos + currentNode.nodeSize;
    }
    selectionDecorations.push(Decoration.inline(decorationFrom, decorationTo, {
      style: isHighlight ? decorationHighlightStyle : decorationStyle,
      'data-testid': 'selection-marker-selection'
    }));
    return true;
  });
  return selectionDecorations;
};