@wordpress/editor 14.37.0 → 14.37.1-next.06ee73755.0

package/build/components/collab-sidebar/add-comment.cjs

@@ -0,0 +1,122 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collab-sidebar/add-comment.js
+var add_comment_exports = {};
+__export(add_comment_exports, {
+  AddComment: () => AddComment
+});
+module.exports = __toCommonJS(add_comment_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_i18n = require("@wordpress/i18n");
+var import_data = require("@wordpress/data");
+var import_components = require("@wordpress/components");
+var import_block_editor = require("@wordpress/block-editor");
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_comment_author_info = __toESM(require("./comment-author-info.cjs"));
+var import_comment_form = __toESM(require("./comment-form.cjs"));
+var import_utils = require("./utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { useBlockElement } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function AddComment({
+  onSubmit,
+  newNoteFormState,
+  setNewNoteFormState,
+  commentSidebarRef,
+  reflowComments = import_utils.noop,
+  isFloating = false,
+  y,
+  refs
+}) {
+  const { clientId } = (0, import_data.useSelect)((select) => {
+    const { getSelectedBlockClientId } = select(import_block_editor.store);
+    return {
+      clientId: getSelectedBlockClientId()
+    };
+  }, []);
+  const blockElement = useBlockElement(clientId);
+  const { toggleBlockSpotlight } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_block_editor.store));
+  const unselectThread = () => {
+    setNewNoteFormState("closed");
+    blockElement?.focus();
+    toggleBlockSpotlight(clientId, false);
+  };
+  if (newNoteFormState !== "open" || !clientId) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      className: (0, import_clsx.default)(
+        "editor-collab-sidebar-panel__thread is-selected",
+        {
+          "is-floating": isFloating
+        }
+      ),
+      spacing: "3",
+      tabIndex: 0,
+      "aria-label": (0, import_i18n.__)("New note"),
+      role: "treeitem",
+      ref: isFloating ? refs.setFloating : void 0,
+      style: isFloating ? (
+        // Delay showing the floating note box until a Y position is known to prevent blink.
+        { top: y, opacity: !y ? 0 : void 0 }
+      ) : void 0,
+      onBlur: (event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) {
+          return;
+        }
+        toggleBlockSpotlight(clientId, false);
+        setNewNoteFormState("closed");
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_author_info.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_comment_form.default,
+          {
+            onSubmit: async (inputComment) => {
+              const { id } = await onSubmit({ content: inputComment });
+              (0, import_utils.focusCommentThread)(id, commentSidebarRef.current);
+              setNewNoteFormState("creating");
+            },
+            onCancel: unselectThread,
+            reflowComments,
+            submitButtonText: (0, import_i18n.__)("Add note"),
+            labelText: (0, import_i18n.__)("New note")
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddComment
+});
+//# sourceMappingURL=add-comment.cjs.map

package/build/components/collab-sidebar/comment-author-info.cjs

@@ -0,0 +1,106 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collab-sidebar/comment-author-info.js
+var comment_author_info_exports = {};
+__export(comment_author_info_exports, {
+  default: () => comment_author_info_default
+});
+module.exports = __toCommonJS(comment_author_info_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_date = require("@wordpress/date");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_block_editor = require("@wordpress/block-editor");
+var import_utils = require("./utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function CommentAuthorInfo({ avatar, name, date, userId }) {
+  const hasAvatar = !!avatar;
+  const dateSettings = (0, import_date.getSettings)();
+  const {
+    currentUserAvatar,
+    currentUserName,
+    currentUserId,
+    dateFormat = dateSettings.formats.date
+  } = (0, import_data.useSelect)(
+    (select) => {
+      const { canUser, getCurrentUser, getEntityRecord } = select(import_core_data.store);
+      const siteSettings = canUser("read", {
+        kind: "root",
+        name: "site"
+      }) ? getEntityRecord("root", "site") : void 0;
+      if (hasAvatar) {
+        return {
+          dateFormat: siteSettings?.date_format
+        };
+      }
+      const { getSettings } = select(import_block_editor.store);
+      const { __experimentalDiscussionSettings } = getSettings();
+      const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+      const userData = getCurrentUser();
+      return {
+        currentUserAvatar: userData?.avatar_urls?.[48] ?? defaultAvatar,
+        currentUserName: userData?.name,
+        currentUserId: userData?.id,
+        dateFormat: siteSettings?.date_format
+      };
+    },
+    [hasAvatar]
+  );
+  const commentDate = (0, import_date.getDate)(date);
+  const commentDateTime = (0, import_date.dateI18n)("c", commentDate);
+  const shouldShowHumanTimeDiff = Math.floor((/* @__PURE__ */ new Date() - commentDate) / (1e3 * 60 * 60 * 24)) < 30;
+  const commentDateText = shouldShowHumanTimeDiff ? (0, import_date.humanTimeDiff)(commentDate) : (0, import_date.dateI18n)(dateFormat, commentDate);
+  const tooltipText = (0, import_date.dateI18n)(
+    // translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.
+    (0, import_i18n._x)("F j, Y g:i\xA0a", "Note date full date format"),
+    date
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: avatar || currentUserAvatar,
+        className: "editor-collab-sidebar-panel__user-avatar",
+        alt: (0, import_i18n.__)("User avatar"),
+        width: 32,
+        height: 32,
+        style: {
+          borderColor: (0, import_utils.getAvatarBorderColor)(
+            userId ?? currentUserId
+          )
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "editor-collab-sidebar-panel__user-name", children: name ?? currentUserName }),
+      date && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: tooltipText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "time",
+        {
+          dateTime: commentDateTime,
+          className: "editor-collab-sidebar-panel__user-time",
+          children: commentDateText
+        }
+      ) })
+    ] })
+  ] });
+}
+var comment_author_info_default = CommentAuthorInfo;
+//# sourceMappingURL=comment-author-info.cjs.map

package/build/components/collab-sidebar/comment-form.cjs

@@ -0,0 +1,111 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collab-sidebar/comment-form.js
+var comment_form_exports = {};
+__export(comment_form_exports, {
+  default: () => comment_form_default
+});
+module.exports = __toCommonJS(comment_form_exports);
+var import_react_autosize_textarea = __toESM(require("react-autosize-textarea"));
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_compose = require("@wordpress/compose");
+var import_keycodes = require("@wordpress/keycodes");
+var import_utils = require("./utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function CommentForm({
+  onSubmit,
+  onCancel,
+  thread,
+  submitButtonText,
+  labelText,
+  reflowComments = import_utils.noop
+}) {
+  const [inputComment, setInputComment] = (0, import_element.useState)(
+    thread?.content?.raw ?? ""
+  );
+  const debouncedCommentUpdated = (0, import_compose.useDebounce)(reflowComments, 100);
+  const updateComment = (value) => {
+    setInputComment(value);
+  };
+  const inputId = (0, import_compose.useInstanceId)(CommentForm, "comment-input");
+  const isDisabled = inputComment === thread?.content?.raw || !(0, import_utils.sanitizeCommentString)(inputComment).length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      className: "editor-collab-sidebar-panel__comment-form",
+      spacing: "4",
+      as: "form",
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit(inputComment);
+        setInputComment("");
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { as: "label", htmlFor: inputId, children: labelText ?? (0, import_i18n.__)("Note") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_autosize_textarea.default,
+          {
+            id: inputId,
+            value: inputComment ?? "",
+            onChange: (comment) => {
+              updateComment(comment.target.value);
+              debouncedCommentUpdated();
+            },
+            rows: 1,
+            maxRows: 20,
+            onKeyDown: (event) => {
+              if (import_keycodes.isKeyboardEvent.primary(event, "Enter") && !isDisabled) {
+                event.target.parentNode.requestSubmit();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "2", justify: "flex-end", wrap: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { size: "compact", variant: "tertiary", onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: (0, import_i18n.__)("Cancel") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              size: "compact",
+              accessibleWhenDisabled: true,
+              variant: "primary",
+              type: "submit",
+              disabled: isDisabled,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: submitButtonText })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var comment_form_default = CommentForm;
+//# sourceMappingURL=comment-form.cjs.map

package/build/components/collab-sidebar/comment-indicator-toolbar.cjs

@@ -0,0 +1,100 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js
+var comment_indicator_toolbar_exports = {};
+__export(comment_indicator_toolbar_exports, {
+  default: () => comment_indicator_toolbar_default
+});
+module.exports = __toCommonJS(comment_indicator_toolbar_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_block_editor = require("@wordpress/block-editor");
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_utils = require("./utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { CommentIconToolbarSlotFill } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+var CommentAvatarIndicator = ({ onClick, thread }) => {
+  const threadParticipants = (0, import_element.useMemo)(() => {
+    if (!thread) {
+      return [];
+    }
+    const participantsMap = /* @__PURE__ */ new Map();
+    const allComments = [thread, ...thread.reply];
+    allComments.sort((a, b) => new Date(a.date) - new Date(b.date));
+    allComments.forEach((comment) => {
+      if (comment.author_name && comment.author_avatar_urls) {
+        if (!participantsMap.has(comment.author)) {
+          participantsMap.set(comment.author, {
+            name: comment.author_name,
+            avatar: comment.author_avatar_urls?.["48"] || comment.author_avatar_urls?.["96"],
+            id: comment.author,
+            date: comment.date
+          });
+        }
+      }
+    });
+    return Array.from(participantsMap.values());
+  }, [thread]);
+  if (!threadParticipants.length) {
+    return null;
+  }
+  const maxAvatars = 3;
+  const isOverflow = threadParticipants.length > maxAvatars;
+  const visibleParticipants = isOverflow ? threadParticipants.slice(0, maxAvatars - 1) : threadParticipants;
+  const overflowCount = Math.max(
+    0,
+    threadParticipants.length - visibleParticipants.length
+  );
+  const threadHasMoreParticipants = threadParticipants.length > 100;
+  const overflowText = threadHasMoreParticipants && overflowCount > 0 ? (0, import_i18n.__)("100+") : (0, import_i18n.sprintf)(
+    // translators: %s: Number of participants.
+    (0, import_i18n.__)("+%s"),
+    overflowCount
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentIconToolbarSlotFill.Fill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.ToolbarButton,
+    {
+      className: "comment-avatar-indicator",
+      label: (0, import_i18n.__)("View notes"),
+      onClick,
+      showTooltip: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "1", children: [
+        visibleParticipants.map((participant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: participant.avatar,
+            alt: participant.name,
+            className: "comment-avatar",
+            style: {
+              borderColor: (0, import_utils.getAvatarBorderColor)(
+                participant.id
+              )
+            }
+          },
+          participant.id
+        )),
+        overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { weight: 500, children: overflowText })
+      ] })
+    }
+  ) });
+};
+var comment_indicator_toolbar_default = CommentAvatarIndicator;
+//# sourceMappingURL=comment-indicator-toolbar.cjs.map

package/build/components/collab-sidebar/comment-menu-item.cjs

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collab-sidebar/comment-menu-item.js
+var comment_menu_item_exports = {};
+__export(comment_menu_item_exports, {
+  default: () => comment_menu_item_default
+});
+module.exports = __toCommonJS(comment_menu_item_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_block_editor = require("@wordpress/block-editor");
+var import_data = require("@wordpress/data");
+var import_blocks = require("@wordpress/blocks");
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { CommentIconSlotFill } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+var AddCommentMenuItem = ({ clientId, onClick, isDistractionFree }) => {
+  const block = (0, import_data.useSelect)(
+    (select) => {
+      return select(import_block_editor.store).getBlock(clientId);
+    },
+    [clientId]
+  );
+  if (!block?.isValid || block?.name === (0, import_blocks.getUnregisteredTypeHandlerName)()) {
+    return null;
+  }
+  const isDisabled = isDistractionFree || block?.name === "core/freeform";
+  let infoText;
+  if (isDistractionFree) {
+    infoText = (0, import_i18n.__)("Notes are disabled in distraction free mode.");
+  } else if (block?.name === "core/freeform") {
+    infoText = (0, import_i18n.__)("Convert to blocks to add notes.");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.MenuItem,
+    {
+      icon: import_icons.comment,
+      onClick,
+      "aria-haspopup": "dialog",
+      disabled: isDisabled,
+      info: infoText,
+      children: (0, import_i18n.__)("Add note")
+    }
+  );
+};
+var AddCommentMenuItemFill = ({ onClick, isDistractionFree }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentIconSlotFill.Fill, { children: ({ clientId, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AddCommentMenuItem,
+    {
+      clientId,
+      isDistractionFree,
+      onClick: () => {
+        onClick();
+        onClose();
+      }
+    }
+  ) });
+};
+var comment_menu_item_default = AddCommentMenuItemFill;
+//# sourceMappingURL=comment-menu-item.cjs.map