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

Enhanced block editor for WordPress posts.

{
  "version": 3,
  "sources": ["../../../src/components/collab-sidebar/note-highlight-styles.js"],
  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { useStyleOverride } from '@wordpress/block-editor';\nimport { getAvatarBorderColor, getNoteMarkerSelector } from './utils';\n\n// Hex alpha suffixes for the rest / active states. Kept low so the marker\n// reads as a soft tint at rest and gets noticeably stronger when focused or\n// hovered. (0x40 ≈ 25%, 0x80 ≈ 50%.)\nconst REST_ALPHA = '40';\nconst ACTIVE_ALPHA = '80';\n\n// Reset the browser's default `<mark>` styling so the per-author rules below\n// are what readers actually see (without it, `mark` ships with a bright yellow\n// background in every browser). The `core/note` anchor marker serializes as a\n// `<mark>` and would otherwise inherit the yellow default in the editor canvas.\nconst BASE_RESET = 'mark.wp-note{background-color:transparent;color:inherit;}';\n\n/**\n * Build the CSS rule set that tints each inline-note marker with its author's\n * avatar color. Pure helper extracted so it can be unit-tested without React.\n *\n * @param {Array}       threads    Unresolved note threads (each with `id` and `author`).\n * @param {string|null} selectedId ID of the currently selected note, if any.\n * @return {string} A serialized CSS string targeting the in-content note markers.\n */\nexport function buildHighlightCss( threads, selectedId = null ) {\n\tconst rules = [ BASE_RESET ];\n\tfor ( const thread of threads ?? [] ) {\n\t\tif ( ! thread?.id ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst color = getAvatarBorderColor( thread.author ?? 0 );\n\t\t// The `core/note` format serializes the id into `data-id`, so the marker\n\t\t// can be targeted directly without a separate annotation layer.\n\t\tconst sel = getNoteMarkerSelector( thread.id );\n\t\trules.push( `${ sel }{background-color:${ color }${ REST_ALPHA };}` );\n\t\trules.push(\n\t\t\t`${ sel }:hover,${ sel }:focus-within{background-color:${ color }${ ACTIVE_ALPHA };}`\n\t\t);\n\t\tif ( selectedId && String( selectedId ) === String( thread.id ) ) {\n\t\t\trules.push(\n\t\t\t\t`${ sel }{background-color:${ color }${ ACTIVE_ALPHA };}`\n\t\t\t);\n\t\t}\n\t}\n\treturn rules.join( '' );\n}\n\n/**\n * Injects per-note background rules into the editor canvas so inline-note\n * markers carry their author's avatar color. The `core/note` format serializes\n * each marker as `<mark class=\"wp-note\" data-id=\"{noteId}\">`, which we target\n * directly.\n *\n * Uses `useStyleOverride` so the styles reach the iframed canvas; a plain\n * `<style>` element rendered in the sidebar would only affect the parent doc.\n *\n * Opacity boosts on `:hover`, `:focus-within`, and when the matching thread is\n * the editor's selected note.\n *\n * @param {Object}      props\n * @param {Array}       props.threads      Unresolved note threads.\n * @param {string|null} [props.selectedId] ID of the currently selected note.\n * @return {null} Renders nothing; styles are applied via `useStyleOverride`.\n */\nexport function NoteHighlightStyles( { threads, selectedId } ) {\n\tconst css = useMemo(\n\t\t() => buildHighlightCss( threads, selectedId ),\n\t\t[ threads, selectedId ]\n\t);\n\tuseStyleOverride( { id: 'core-note-highlights', css } );\n\treturn null;\n}\n"],
  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,sBAAsB,6BAA6B;AAK5D,IAAM,aAAa;AACnB,IAAM,eAAe;AAMrB,IAAM,aAAa;AAUZ,SAAS,kBAAmB,SAAS,aAAa,MAAO;AAC/D,QAAM,QAAQ,CAAE,UAAW;AAC3B,aAAY,UAAU,WAAW,CAAC,GAAI;AACrC,QAAK,CAAE,QAAQ,IAAK;AACnB;AAAA,IACD;AACA,UAAM,QAAQ,qBAAsB,OAAO,UAAU,CAAE;AAGvD,UAAM,MAAM,sBAAuB,OAAO,EAAG;AAC7C,UAAM,KAAM,GAAI,GAAI,qBAAsB,KAAM,GAAI,UAAW,IAAK;AACpE,UAAM;AAAA,MACL,GAAI,GAAI,UAAW,GAAI,kCAAmC,KAAM,GAAI,YAAa;AAAA,IAClF;AACA,QAAK,cAAc,OAAQ,UAAW,MAAM,OAAQ,OAAO,EAAG,GAAI;AACjE,YAAM;AAAA,QACL,GAAI,GAAI,qBAAsB,KAAM,GAAI,YAAa;AAAA,MACtD;AAAA,IACD;AAAA,EACD;AACA,SAAO,MAAM,KAAM,EAAG;AACvB;AAmBO,SAAS,oBAAqB,EAAE,SAAS,WAAW,GAAI;AAC9D,QAAM,MAAM;AAAA,IACX,MAAM,kBAAmB,SAAS,UAAW;AAAA,IAC7C,CAAE,SAAS,UAAW;AAAA,EACvB;AACA,mBAAkB,EAAE,IAAI,wBAAwB,IAAI,CAAE;AACtD,SAAO;AACR;",
  "names": []
}