All files / app/assets/javascripts/content_editor/extensions color_chip.js

100% Statements 23/23
100% Branches 10/10
100% Functions 9/9
100% Lines 22/22

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74            6x   6x 44x 7x     12x     6x 168x   168x 646x   646x 639x     7x 7x 7x         7x     168x     6x       97x     130x         324x                 97x                   97x      
import { Node } from '@tiptap/core';
import { Plugin, PluginKey } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';
import { isValidColorExpression } from '~/lib/utils/color_utils';
import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
const colorExpressionTypes = ['#', 'hsl', 'rgb'];
 
const isValidColor = (color) => {
  if (!colorExpressionTypes.some((type) => color.toLowerCase().startsWith(type))) {
    return false;
  }
 
  return isValidColorExpression(color);
};
 
const highlightColors = (doc) => {
  const decorations = [];
 
  doc.descendants((node, position) => {
    const { text, marks } = node;
 
    if (!text || marks.length === 0 || marks[0].type.name !== 'code' || !isValidColor(text)) {
      return;
    }
 
    const from = position;
    const to = from + text.length;
    const decoration = Decoration.inline(from, to, {
      class: 'gl-display-inline-flex gl-align-items-center content-editor-color-chip',
      style: `--gl-color-chip-color: ${text}`,
    });
 
    decorations.push(decoration);
  });
 
  return DecorationSet.create(doc, decorations);
};
 
export const colorDecoratorPlugin = new Plugin({
  key: new PluginKey('colorDecorator'),
  state: {
    init(_, { doc }) {
      return highlightColors(doc);
    },
    apply(transaction, oldState) {
      return transaction.docChanged ? highlightColors(transaction.doc) : oldState;
    },
  },
  props: {
    decorations(state) {
      return this.getState(state);
    },
  },
});
 
export default Node.create({
  name: 'colorChip',
 
  parseHTML() {
    return [
      {
        tag: '.gfm-color_chip',
        ignore: true,
        priority: PARSE_HTML_PRIORITY_HIGHEST,
      },
    ];
  },
 
  addProseMirrorPlugins() {
    return [colorDecoratorPlugin];
  },
});