UNPKG

@wordpress/editor

Version:
8 lines (7 loc) 6.25 kB
{ "version": 3, "sources": ["../../../src/components/collab-sidebar/note-form.js"], "sourcesContent": ["import { useState } from '@wordpress/element';\nimport {\n\t__experimentalTruncate as Truncate,\n\tButton,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { sanitizeNoteContent } from './utils';\nimport noteMentionCompleter from './note-mention-completer';\n/*\n * The rich text form field wires `@wordpress/rich-text` into the presentational\n * `ContentEditableControl` shell from `@wordpress/components`. The notes\n * sidebar is its only consumer, so it lives next to it.\n */\nimport RichTextControl from './rich-text-control';\n\n/*\n * `@` mentions are not on this list: the completer inserts a mention as a\n * `<span class=\"wp-note-mention user-N\">` chip, which rich text preserves as\n * unregistered markup, so no format is involved and the Link UI never picks a\n * mention up as an editable link.\n */\nconst ALLOWED_NOTE_FORMATS = [\n\t'core/bold',\n\t'core/italic',\n\t'core/link',\n\t'core/code',\n];\n\nconst NOTE_COMPLETERS = [ noteMentionCompleter ];\n\nexport function NoteForm( { onSubmit, onCancel, note, labels } ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tnote?.content?.raw ?? ''\n\t);\n\tconst [ isSubmitting, setIsSubmitting ] = useState( false );\n\n\tconst inputId = useInstanceId( NoteForm, 'comment-input' );\n\tconst trimmedPlainText = sanitizeNoteContent( stripHTML( inputComment ) );\n\tconst isDisabled =\n\t\tisSubmitting ||\n\t\tinputComment === note?.content?.raw ||\n\t\t! trimmedPlainText.length;\n\n\tasync function submit() {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsSubmitting( true );\n\t\tconst submitted = inputComment;\n\n\t\t/*\n\t\t * The note actions resolve with the saved record on success and\n\t\t * `undefined` on failure (they surface their own error notice),\n\t\t * so only discard the draft once the save actually succeeded.\n\t\t */\n\t\tconst result = await onSubmit( submitted );\n\t\tif ( result ) {\n\t\t\t/*\n\t\t\t * The field stays editable while the request is in flight, so\n\t\t\t * keep anything typed since; clearing unconditionally would\n\t\t\t * discard it.\n\t\t\t */\n\t\t\tsetInputComment( ( current ) =>\n\t\t\t\tcurrent === submitted ? '' : current\n\t\t\t);\n\t\t}\n\n\t\tsetIsSubmitting( false );\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tclassName=\"editor-collab-sidebar-panel__note-form\"\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"lg\"\n\t\t\trender={ <form /> }\n\t\t\tonSubmit={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsubmit();\n\t\t\t} }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( isKeyboardEvent.primary( event, 'Enter' ) ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tsubmit();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( event.key === 'Escape' && ! event.defaultPrevented ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t// Passing event for reply forms.\n\t\t\t\t\tonCancel( event );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<RichTextControl\n\t\t\t\tid={ inputId }\n\t\t\t\tlabel={ labels?.input ?? __( 'Note' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ inputComment }\n\t\t\t\tonChange={ setInputComment }\n\t\t\t\tplaceholder={ labels?.placeholder }\n\t\t\t\tallowedFormats={ ALLOWED_NOTE_FORMATS }\n\t\t\t\tcompleters={ NOTE_COMPLETERS }\n\t\t\t/>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talign=\"center\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\tgap=\"sm\"\n\t\t\t\twrap=\"wrap\"\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t\tshortcut=\"Escape\"\n\t\t\t\t>\n\t\t\t\t\t<Truncate>{ __( 'Cancel' ) }</Truncate>\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\tshortcut={ displayShortcut.primary( 'Enter' ) }\n\t\t\t\t>\n\t\t\t\t\t<Truncate>{ labels?.submit ?? __( 'Add note' ) }</Truncate>\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n"], "mappings": ";AAAA,SAAS,gBAAgB;AACzB;AAAA,EACC,0BAA0B;AAAA,EAC1B;AAAA,OACM;AACP,SAAS,aAAa;AACtB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,uBAAuB,iBAAiB;AACjD,SAAS,2BAA2B;AACpC,OAAO,0BAA0B;AAMjC,OAAO,qBAAqB;AA8DhB,cA6BT,YA7BS;AAtDZ,IAAM,uBAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEA,IAAM,kBAAkB,CAAE,oBAAqB;AAExC,SAAS,SAAU,EAAE,UAAU,UAAU,MAAM,OAAO,GAAI;AAChE,QAAM,CAAE,cAAc,eAAgB,IAAI;AAAA,IACzC,MAAM,SAAS,OAAO;AAAA,EACvB;AACA,QAAM,CAAE,cAAc,eAAgB,IAAI,SAAU,KAAM;AAE1D,QAAM,UAAU,cAAe,UAAU,eAAgB;AACzD,QAAM,mBAAmB,oBAAqB,UAAW,YAAa,CAAE;AACxE,QAAM,aACL,gBACA,iBAAiB,MAAM,SAAS,OAChC,CAAE,iBAAiB;AAEpB,iBAAe,SAAS;AACvB,QAAK,YAAa;AACjB;AAAA,IACD;AACA,oBAAiB,IAAK;AACtB,UAAM,YAAY;AAOlB,UAAM,SAAS,MAAM,SAAU,SAAU;AACzC,QAAK,QAAS;AAMb;AAAA,QAAiB,CAAE,YAClB,YAAY,YAAY,KAAK;AAAA,MAC9B;AAAA,IACD;AAEA,oBAAiB,KAAM;AAAA,EACxB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,QAAS,oBAAC,UAAK;AAAA,MACf,UAAW,CAAE,UAAW;AACvB,cAAM,eAAe;AACrB,eAAO;AAAA,MACR;AAAA,MACA,WAAY,CAAE,UAAW;AACxB,YAAK,gBAAgB,QAAS,OAAO,OAAQ,GAAI;AAChD,gBAAM,eAAe;AACrB,iBAAO;AACP;AAAA,QACD;AAEA,YAAK,MAAM,QAAQ,YAAY,CAAE,MAAM,kBAAmB;AACzD,gBAAM,eAAe;AAErB,mBAAU,KAAM;AAAA,QACjB;AAAA,MACD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,IAAK;AAAA,YACL,OAAQ,QAAQ,SAAS,GAAI,MAAO;AAAA,YACpC,qBAAmB;AAAA,YACnB,OAAQ;AAAA,YACR,UAAW;AAAA,YACX,aAAc,QAAQ;AAAA,YACtB,gBAAiB;AAAA,YACjB,YAAa;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,KAAI;AAAA,YACJ,MAAK;AAAA,YAEL;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,SAAU;AAAA,kBACV,UAAS;AAAA,kBAET,8BAAC,YAAW,aAAI,QAAS,GAAG;AAAA;AAAA,cAC7B;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,wBAAsB;AAAA,kBACtB,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,UAAW;AAAA,kBACX,UAAW,gBAAgB,QAAS,OAAQ;AAAA,kBAE5C,8BAAC,YAAW,kBAAQ,UAAU,GAAI,UAAW,GAAG;AAAA;AAAA,cACjD;AAAA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;", "names": [] }