locize/dist/esm/ui/highlightNode.js

This package adds the incontext editor to your i18next setup.

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { colors } from '../vars.js';
import { RibbonBox } from './elements/ribbonBox.js';
import { HighlightBox } from './elements/highlightBox.js';
import { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';
import { getOptimizedBoundingRectEle } from './utils.js';

var selected = {};
function highlight(item, node, keys) {
  var rectEle = getOptimizedBoundingRectEle(node);
  if (!item.highlightBox) {
    var box = HighlightBox(rectEle, colors.highlight);
    document.body.appendChild(box);
    item.highlightBox = box;
  }
  if (!item.ribbonBox) {
    var _RibbonBox = RibbonBox(keys),
      actions = _RibbonBox.box,
      arrowEle = _RibbonBox.arrow;
    document.body.appendChild(actions);
    computePosition(rectEle, actions, {
      placement: 'right',
      middleware: [flip({
        fallbackPlacements: ['left', 'bottom']
      }), shift(), offset(function (_ref) {
        var placement = _ref.placement,
          rects = _ref.rects;
        if (placement === 'bottom') return -rects.reference.height / 2 - rects.floating.height / 2;
        return 35;
      }), arrow({
        element: arrowEle
      })]
    }).then(function (_ref2) {
      var x = _ref2.x,
        y = _ref2.y,
        middlewareData = _ref2.middlewareData,
        placement = _ref2.placement;
      Object.assign(actions.style, {
        left: "".concat(x, "px"),
        top: "".concat(y, "px"),
        display: 'inline-flex'
      });
      var side = placement.split('-')[0];
      var staticSide = {
        top: 'bottom',
        right: 'left',
        bottom: 'top',
        left: 'right'
      }[side];
      if (middlewareData.arrow) {
        var _middlewareData$arrow = middlewareData.arrow,
          _x = _middlewareData$arrow.x,
          _y = _middlewareData$arrow.y;
        Object.assign(arrowEle.style, _defineProperty(_defineProperty({
          left: _x != null ? "".concat(_x, "px") : '',
          top: _y != null ? "".concat(_y, "px") : '',
          right: '',
          bottom: ''
        }, staticSide, "".concat(side === 'bottom' ? -18 : -25, "px")), "transform", side === 'bottom' ? 'rotate(90deg)' : side === 'left' ? 'rotate(180deg)' : ''));
      }
    });
    item.ribbonBox = actions;
  }
}
function highlightUninstrumented(item, node, keys) {
  var id = item.id;
  if (selected[id]) return;
  var rectEle = getOptimizedBoundingRectEle(node);
  if (!item.highlightBox) {
    var box = HighlightBox(rectEle, colors.warning);
    document.body.appendChild(box);
    item.highlightBox = box;
  }
}
function selectedHighlight(item, node, keys) {
  var id = item.id;
  var rectEle = getOptimizedBoundingRectEle(node);
  if (!item.highlightBox) {
    var box = HighlightBox(rectEle, colors.highlight, colors.gray);
    document.body.appendChild(box);
    item.highlightBox = box;
  }
  selected[id] = true;
}
function recalcSelectedHighlight(item, node, keys) {
  if (!selected[item.id]) return;
  resetHighlight(item, node, keys, false);
  selectedHighlight(item, node);
}
function resetHighlight(item, node, keys) {
  var ignoreSelected = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
  var id = item.id;
  if (ignoreSelected && selected[id]) return;
  if (item.highlightBox) {
    document.body.removeChild(item.highlightBox);
    delete item.highlightBox;
  }
  if (item.ribbonBox) {
    document.body.removeChild(item.ribbonBox);
    delete item.ribbonBox;
  }
  delete selected[id];
}

export { highlight, highlightUninstrumented, recalcSelectedHighlight, resetHighlight, selectedHighlight };