@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 2.98 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/collab-sidebar/note-mention-completer.tsx"],
"sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { getUserLabel } from '../autocompleters/user';\n\n/**\n * The subset of the REST users response the completion consumes.\n */\ntype MentionableUser = {\n\tid: number;\n\tname: string;\n};\n\n/**\n * A user mention completer for notes.\n *\n * Mirrors the editor's `@` user completer but inserts the mention as a\n * `<span class=\"wp-note-mention user-N\">` chip, carrying the mentioned user's\n * ID in the `user-N` class so the mention can be styled and, in a follow-up,\n * resolved to a notification recipient. A mention is deliberately not a link:\n * a `span` keeps it out of the Link format UI (which would strip the mention\n * markup on edit), and the `wp-note-mention` class keeps other formats from\n * claiming the element. RichText preserves the unregistered `span` as-is, so\n * no dedicated mention format is needed.\n */\nconst noteMentionCompleter = {\n\tname: 'note-mentions',\n\tclassName:\n\t\t'editor-autocompleters__user editor-collab-sidebar-panel__mention-suggestion',\n\ttriggerPrefix: '@',\n\n\tuseItems( filterValue: string ) {\n\t\tconst users = useSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getUsers } = select( coreStore );\n\t\t\t\treturn getUsers( {\n\t\t\t\t\tcontext: 'view',\n\t\t\t\t\tsearch: filterValue,\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[ filterValue ]\n\t\t);\n\n\t\tconst options = useMemo(\n\t\t\t() =>\n\t\t\t\tusers\n\t\t\t\t\t? users.map( ( user ) => ( {\n\t\t\t\t\t\t\tkey: `note-mention-${ user.slug }`,\n\t\t\t\t\t\t\tvalue: user,\n\t\t\t\t\t\t\tlabel: getUserLabel( user ),\n\t\t\t\t\t } ) )\n\t\t\t\t\t: [],\n\t\t\t[ users ]\n\t\t);\n\n\t\treturn [ options ] as const;\n\t},\n\n\tgetOptionCompletion( user: MentionableUser ) {\n\t\treturn {\n\t\t\taction: 'insert-at-caret' as const,\n\t\t\tvalue: (\n\t\t\t\t<span className={ `wp-note-mention user-${ user.id }` }>\n\t\t\t\t\t{ '@' + user.name }\n\t\t\t\t</span>\n\t\t\t),\n\t\t};\n\t},\n};\n\nexport default noteMentionCompleter;\n"],
"mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,oBAAoB;AA2DzB;AArCJ,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,WACC;AAAA,EACD,eAAe;AAAA,EAEf,SAAU,aAAsB;AAC/B,UAAM,QAAQ;AAAA,MACb,CAAE,WAAY;AACb,cAAM,EAAE,SAAS,IAAI,OAAQ,SAAU;AACvC,eAAO,SAAU;AAAA,UAChB,SAAS;AAAA,UACT,QAAQ;AAAA,QACT,CAAE;AAAA,MACH;AAAA,MACA,CAAE,WAAY;AAAA,IACf;AAEA,UAAM,UAAU;AAAA,MACf,MACC,QACG,MAAM,IAAK,CAAE,UAAY;AAAA,QACzB,KAAK,gBAAiB,KAAK,IAAK;AAAA,QAChC,OAAO;AAAA,QACP,OAAO,aAAc,IAAK;AAAA,MAC1B,EAAI,IACJ,CAAC;AAAA,MACL,CAAE,KAAM;AAAA,IACT;AAEA,WAAO,CAAE,OAAQ;AAAA,EAClB;AAAA,EAEA,oBAAqB,MAAwB;AAC5C,WAAO;AAAA,MACN,QAAQ;AAAA,MACR,OACC,oBAAC,UAAK,WAAY,wBAAyB,KAAK,EAAG,IAChD,gBAAM,KAAK,MACd;AAAA,IAEF;AAAA,EACD;AACD;AAEA,IAAO,iCAAQ;",
"names": []
}