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

Enhanced block editor for WordPress posts.

// packages/editor/src/components/collab-sidebar/note-form.js
import { useState } from "@wordpress/element";
import {
  __experimentalTruncate as Truncate,
  Button
} from "@wordpress/components";
import { Stack } from "@wordpress/ui";
import { __ } from "@wordpress/i18n";
import { useInstanceId } from "@wordpress/compose";
import { displayShortcut, isKeyboardEvent } from "@wordpress/keycodes";
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
import { sanitizeNoteContent } from "./utils.mjs";
import noteMentionCompleter from "./note-mention-completer.mjs";
import RichTextControl from "./rich-text-control/index.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var ALLOWED_NOTE_FORMATS = [
  "core/bold",
  "core/italic",
  "core/link",
  "core/code"
];
var NOTE_COMPLETERS = [noteMentionCompleter];
function NoteForm({ onSubmit, onCancel, note, labels }) {
  const [inputComment, setInputComment] = useState(
    note?.content?.raw ?? ""
  );
  const [isSubmitting, setIsSubmitting] = useState(false);
  const inputId = useInstanceId(NoteForm, "comment-input");
  const trimmedPlainText = sanitizeNoteContent(stripHTML(inputComment));
  const isDisabled = isSubmitting || inputComment === note?.content?.raw || !trimmedPlainText.length;
  async function submit() {
    if (isDisabled) {
      return;
    }
    setIsSubmitting(true);
    const submitted = inputComment;
    const result = await onSubmit(submitted);
    if (result) {
      setInputComment(
        (current) => current === submitted ? "" : current
      );
    }
    setIsSubmitting(false);
  }
  return /* @__PURE__ */ jsxs(
    Stack,
    {
      className: "editor-collab-sidebar-panel__note-form",
      direction: "column",
      gap: "lg",
      render: /* @__PURE__ */ jsx("form", {}),
      onSubmit: (event) => {
        event.preventDefault();
        submit();
      },
      onKeyDown: (event) => {
        if (isKeyboardEvent.primary(event, "Enter")) {
          event.preventDefault();
          submit();
          return;
        }
        if (event.key === "Escape" && !event.defaultPrevented) {
          event.preventDefault();
          onCancel(event);
        }
      },
      children: [
        /* @__PURE__ */ jsx(
          RichTextControl,
          {
            id: inputId,
            label: labels?.input ?? __("Note"),
            hideLabelFromVision: true,
            value: inputComment,
            onChange: setInputComment,
            placeholder: labels?.placeholder,
            allowedFormats: ALLOWED_NOTE_FORMATS,
            completers: NOTE_COMPLETERS
          }
        ),
        /* @__PURE__ */ jsxs(
          Stack,
          {
            direction: "row",
            align: "center",
            justify: "flex-end",
            gap: "sm",
            wrap: "wrap",
            children: [
              /* @__PURE__ */ jsx(
                Button,
                {
                  size: "compact",
                  variant: "tertiary",
                  onClick: onCancel,
                  shortcut: "Escape",
                  children: /* @__PURE__ */ jsx(Truncate, { children: __("Cancel") })
                }
              ),
              /* @__PURE__ */ jsx(
                Button,
                {
                  size: "compact",
                  accessibleWhenDisabled: true,
                  variant: "primary",
                  type: "submit",
                  disabled: isDisabled,
                  shortcut: displayShortcut.primary("Enter"),
                  children: /* @__PURE__ */ jsx(Truncate, { children: labels?.submit ?? __("Add note") })
                }
              )
            ]
          }
        )
      ]
    }
  );
}
export {
  NoteForm
};
//# sourceMappingURL=note-form.mjs.map