@wordpress/editor/build-module/components/collab-sidebar/note-highlight-styles.mjs

Enhanced block editor for WordPress posts.

// packages/editor/src/components/collab-sidebar/note-highlight-styles.js
import { useMemo } from "@wordpress/element";
import { useStyleOverride } from "@wordpress/block-editor";
import { getAvatarBorderColor, getNoteMarkerSelector } from "./utils.mjs";
var REST_ALPHA = "40";
var ACTIVE_ALPHA = "80";
var BASE_RESET = "mark.wp-note{background-color:transparent;color:inherit;}";
function buildHighlightCss(threads, selectedId = null) {
  const rules = [BASE_RESET];
  for (const thread of threads ?? []) {
    if (!thread?.id) {
      continue;
    }
    const color = getAvatarBorderColor(thread.author ?? 0);
    const sel = getNoteMarkerSelector(thread.id);
    rules.push(`${sel}{background-color:${color}${REST_ALPHA};}`);
    rules.push(
      `${sel}:hover,${sel}:focus-within{background-color:${color}${ACTIVE_ALPHA};}`
    );
    if (selectedId && String(selectedId) === String(thread.id)) {
      rules.push(
        `${sel}{background-color:${color}${ACTIVE_ALPHA};}`
      );
    }
  }
  return rules.join("");
}
function NoteHighlightStyles({ threads, selectedId }) {
  const css = useMemo(
    () => buildHighlightCss(threads, selectedId),
    [threads, selectedId]
  );
  useStyleOverride({ id: "core-note-highlights", css });
  return null;
}
export {
  NoteHighlightStyles,
  buildHighlightCss
};
//# sourceMappingURL=note-highlight-styles.mjs.map