UNPKG

@wordpress/editor

Version:
8 lines (7 loc) 3.02 kB
{ "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;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAwB;AACxB,kBAA0B;AAC1B,uBAAmC;AACnC,kBAA6B;AA2DzB;AArCJ,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,WACC;AAAA,EACD,eAAe;AAAA,EAEf,SAAU,aAAsB;AAC/B,UAAM,YAAQ;AAAA,MACb,CAAE,WAAY;AACb,cAAM,EAAE,SAAS,IAAI,OAAQ,iBAAAA,KAAU;AACvC,eAAO,SAAU;AAAA,UAChB,SAAS;AAAA,UACT,QAAQ;AAAA,QACT,CAAE;AAAA,MACH;AAAA,MACA,CAAE,WAAY;AAAA,IACf;AAEA,UAAM,cAAU;AAAA,MACf,MACC,QACG,MAAM,IAAK,CAAE,UAAY;AAAA,QACzB,KAAK,gBAAiB,KAAK,IAAK;AAAA,QAChC,OAAO;AAAA,QACP,WAAO,0BAAc,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,4CAAC,UAAK,WAAY,wBAAyB,KAAK,EAAG,IAChD,gBAAM,KAAK,MACd;AAAA,IAEF;AAAA,EACD;AACD;AAEA,IAAO,iCAAQ;", "names": ["coreStore"] }