@wordpress/editor 14.36.0 → 14.36.1-next.738bb1424.0

package/build/components/collab-sidebar/index.cjs

@@ -0,0 +1,239 @@
+"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/index.js
+var collab_sidebar_exports = {};
+__export(collab_sidebar_exports, {
+  default: () => NotesSidebarContainer
+});
+module.exports = __toCommonJS(collab_sidebar_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_data = require("@wordpress/data");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_icons = require("@wordpress/icons");
+var import_block_editor = require("@wordpress/block-editor");
+var import_interface = require("@wordpress/interface");
+var import_plugin_sidebar = __toESM(require("../plugin-sidebar/index.cjs"), 1);
+var import_constants = require("./constants.cjs");
+var import_comments = require("./comments.cjs");
+var import_store = require("../../store/index.cjs");
+var import_comment_menu_item = __toESM(require("./comment-menu-item.cjs"), 1);
+var import_comment_indicator_toolbar = __toESM(require("./comment-indicator-toolbar.cjs"), 1);
+var import_global_styles_provider = require("../global-styles-provider/index.cjs");
+var import_hooks = require("./hooks.cjs");
+var import_utils = require("./utils.cjs");
+var import_post_type_support_check = __toESM(require("../post-type-support-check/index.cjs"), 1);
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function NotesSidebarContent({
+  newNoteFormState,
+  setNewNoteFormState,
+  styles,
+  comments,
+  commentSidebarRef,
+  reflowComments,
+  commentLastUpdated,
+  isFloating = false
+}) {
+  const { onCreate, onEdit, onDelete } = (0, import_hooks.useBlockCommentsActions)(reflowComments);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalVStack,
+    {
+      className: "editor-collab-sidebar-panel",
+      style: styles,
+      role: "tree",
+      spacing: "3",
+      justify: "flex-start",
+      ref: (node) => {
+        if (node) {
+          commentSidebarRef.current = node;
+        }
+      },
+      "aria-label": isFloating ? (0, import_i18n.__)("Unresolved notes") : (0, import_i18n.__)("All notes"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_comments.Comments,
+        {
+          threads: comments,
+          onEditComment: onEdit,
+          onAddReply: onCreate,
+          onCommentDelete: onDelete,
+          newNoteFormState,
+          setNewNoteFormState,
+          commentSidebarRef,
+          reflowComments,
+          commentLastUpdated,
+          isFloating
+        }
+      )
+    }
+  );
+}
+function NotesSidebar({ postId, mode }) {
+  const [newNoteFormState, setNewNoteFormState] = (0, import_element.useState)("closed");
+  const { getActiveComplementaryArea } = (0, import_data.useSelect)(import_interface.store);
+  const { enableComplementaryArea } = (0, import_data.useDispatch)(import_interface.store);
+  const { toggleBlockSpotlight } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_block_editor.store));
+  const isLargeViewport = (0, import_compose.useViewportMatch)("medium");
+  const commentSidebarRef = (0, import_element.useRef)(null);
+  const showFloatingSidebar = isLargeViewport && mode === "post-only";
+  const { clientId, blockCommentId, isDistractionFree } = (0, import_data.useSelect)(
+    (select) => {
+      const {
+        getBlockAttributes,
+        getSelectedBlockClientId,
+        getSettings
+      } = select(import_block_editor.store);
+      const _clientId = getSelectedBlockClientId();
+      return {
+        clientId: _clientId,
+        blockCommentId: _clientId ? getBlockAttributes(_clientId)?.metadata?.noteId : null,
+        isDistractionFree: getSettings().isDistractionFree
+      };
+    },
+    []
+  );
+  const {
+    resultComments,
+    unresolvedSortedThreads,
+    reflowComments,
+    commentLastUpdated
+  } = (0, import_hooks.useBlockComments)(postId);
+  (0, import_hooks.useEnableFloatingSidebar)(
+    showFloatingSidebar && (unresolvedSortedThreads.length > 0 || newNoteFormState !== "closed")
+  );
+  const { merged: GlobalStyles } = (0, import_global_styles_provider.useGlobalStylesContext)();
+  const backgroundColor = GlobalStyles?.styles?.color?.background;
+  const currentThread = blockCommentId ? resultComments.find((thread) => thread.id === blockCommentId) : null;
+  const showAllNotesSidebar = resultComments.length > 0 || !showFloatingSidebar;
+  async function openTheSidebar() {
+    const prevArea = await getActiveComplementaryArea("core");
+    const activeNotesArea = import_constants.SIDEBARS.find((name) => name === prevArea);
+    if (currentThread?.status === "approved") {
+      enableComplementaryArea("core", import_constants.collabHistorySidebarName);
+    } else if (!activeNotesArea || !showAllNotesSidebar) {
+      enableComplementaryArea(
+        "core",
+        showFloatingSidebar ? import_constants.collabSidebarName : import_constants.collabHistorySidebarName
+      );
+    }
+    const currentArea = await getActiveComplementaryArea("core");
+    if (!import_constants.SIDEBARS.includes(currentArea)) {
+      return;
+    }
+    setNewNoteFormState(!currentThread ? "open" : "closed");
+    (0, import_utils.focusCommentThread)(
+      currentThread?.id,
+      commentSidebarRef.current,
+      // Focus a comment thread when there's a selected block with a comment.
+      !currentThread ? "textarea" : void 0
+    );
+    toggleBlockSpotlight(clientId, true);
+  }
+  if (isDistractionFree) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_menu_item.default, { isDistractionFree: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !!currentThread && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_comment_indicator_toolbar.default,
+      {
+        thread: currentThread,
+        onClick: openTheSidebar
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_menu_item.default, { onClick: openTheSidebar }),
+    showAllNotesSidebar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_plugin_sidebar.default,
+      {
+        identifier: import_constants.collabHistorySidebarName,
+        name: import_constants.collabHistorySidebarName,
+        title: (0, import_i18n.__)("All notes"),
+        header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "interface-complementary-area-header__title", children: (0, import_i18n.__)("All notes") }),
+        icon: import_icons.comment,
+        closeLabel: (0, import_i18n.__)("Close Notes"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          NotesSidebarContent,
+          {
+            comments: resultComments,
+            newNoteFormState,
+            setNewNoteFormState,
+            commentSidebarRef,
+            reflowComments,
+            commentLastUpdated
+          }
+        )
+      }
+    ),
+    isLargeViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_plugin_sidebar.default,
+      {
+        isPinnable: false,
+        header: false,
+        identifier: import_constants.collabSidebarName,
+        className: "editor-collab-sidebar",
+        headerClassName: "editor-collab-sidebar__header",
+        backgroundColor,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          NotesSidebarContent,
+          {
+            comments: unresolvedSortedThreads,
+            newNoteFormState,
+            setNewNoteFormState,
+            commentSidebarRef,
+            reflowComments,
+            commentLastUpdated,
+            styles: {
+              backgroundColor
+            },
+            isFloating: true
+          }
+        )
+      }
+    )
+  ] });
+}
+function NotesSidebarContainer() {
+  const { postId, mode, editorMode } = (0, import_data.useSelect)((select) => {
+    const { getCurrentPostId, getRenderingMode, getEditorMode } = select(import_store.store);
+    return {
+      postId: getCurrentPostId(),
+      mode: getRenderingMode(),
+      editorMode: getEditorMode()
+    };
+  }, []);
+  if (!postId || typeof postId !== "number") {
+    return null;
+  }
+  if (editorMode === "text") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_post_type_support_check.default, { supportKeys: "editor.notes", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesSidebar, { postId, mode }) });
+}
+//# sourceMappingURL=index.cjs.map

package/build/components/collab-sidebar/utils.cjs

@@ -0,0 +1,112 @@
+"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/utils.js
+var utils_exports = {};
+__export(utils_exports, {
+  focusCommentThread: () => focusCommentThread,
+  getAvatarBorderColor: () => getAvatarBorderColor,
+  getCommentExcerpt: () => getCommentExcerpt,
+  noop: () => noop,
+  sanitizeCommentString: () => sanitizeCommentString
+});
+module.exports = __toCommonJS(utils_exports);
+var import_i18n = require("@wordpress/i18n");
+function sanitizeCommentString(str) {
+  return str.trim();
+}
+function noop() {
+}
+var AVATAR_BORDER_COLORS = [
+  "#3858E9",
+  // Blueberry
+  "#9fB1FF",
+  // Blueberry 2
+  "#1D35B4",
+  // Dark Blueberry
+  "#1A1919",
+  // Charcoal 0
+  "#E26F56",
+  // Pomegranate
+  "#33F078",
+  // Acid Green
+  "#FFF972",
+  // Lemon
+  "#7A00DF"
+  // Purple
+];
+function getAvatarBorderColor(userId) {
+  return AVATAR_BORDER_COLORS[userId % AVATAR_BORDER_COLORS.length];
+}
+function getCommentExcerpt(text, excerptLength = 10) {
+  if (!text) {
+    return "";
+  }
+  const wordCountType = (0, import_i18n._x)("words", "Word count type. Do not translate!");
+  const rawText = text.trim();
+  let trimmedExcerpt = "";
+  if (wordCountType === "words") {
+    trimmedExcerpt = rawText.split(" ", excerptLength).join(" ");
+  } else if (wordCountType === "characters_excluding_spaces") {
+    const textWithSpaces = rawText.split("", excerptLength).join("");
+    const numberOfSpaces = textWithSpaces.length - textWithSpaces.replaceAll(" ", "").length;
+    trimmedExcerpt = rawText.split("", excerptLength + numberOfSpaces).join("");
+  } else if (wordCountType === "characters_including_spaces") {
+    trimmedExcerpt = rawText.split("", excerptLength).join("");
+  }
+  const isTrimmed = trimmedExcerpt !== rawText;
+  return isTrimmed ? trimmedExcerpt + "\u2026" : trimmedExcerpt;
+}
+function focusCommentThread(commentId, container, additionalSelector) {
+  if (!container) {
+    return;
+  }
+  const threadSelector = commentId ? `[role=treeitem][id="comment-thread-${commentId}"]` : "[role=treeitem]:not([id])";
+  const selector = additionalSelector ? `${threadSelector} ${additionalSelector}` : threadSelector;
+  return new Promise((resolve) => {
+    if (container.querySelector(selector)) {
+      return resolve(container.querySelector(selector));
+    }
+    let timer = null;
+    const observer = new window.MutationObserver(() => {
+      if (container.querySelector(selector)) {
+        clearTimeout(timer);
+        observer.disconnect();
+        resolve(container.querySelector(selector));
+      }
+    });
+    observer.observe(container, {
+      childList: true,
+      subtree: true
+    });
+    timer = setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, 3e3);
+  }).then((element) => element?.focus());
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  focusCommentThread,
+  getAvatarBorderColor,
+  getCommentExcerpt,
+  noop,
+  sanitizeCommentString
+});
+//# sourceMappingURL=utils.cjs.map

package/build/components/collapsible-block-toolbar/index.cjs

@@ -0,0 +1,87 @@
+"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/collapsible-block-toolbar/index.js
+var collapsible_block_toolbar_exports = {};
+__export(collapsible_block_toolbar_exports, {
+  default: () => CollapsibleBlockToolbar
+});
+module.exports = __toCommonJS(collapsible_block_toolbar_exports);
+var import_clsx = __toESM(require("clsx"), 1);
+var import_block_editor = require("@wordpress/block-editor");
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_data = require("@wordpress/data");
+var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var { useHasBlockToolbar } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function CollapsibleBlockToolbar({ isCollapsed, onToggle }) {
+  const { blockSelectionStart } = (0, import_data.useSelect)((select) => {
+    return {
+      blockSelectionStart: select(import_block_editor.store).getBlockSelectionStart()
+    };
+  }, []);
+  const hasBlockToolbar = useHasBlockToolbar();
+  const hasBlockSelection = !!blockSelectionStart;
+  (0, import_element.useEffect)(() => {
+    if (blockSelectionStart) {
+      onToggle(false);
+    }
+  }, [blockSelectionStart, onToggle]);
+  if (!hasBlockToolbar) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_clsx.default)("editor-collapsible-block-toolbar", {
+          "is-collapsed": isCollapsed || !hasBlockSelection
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockToolbar, { hideDragHandle: true })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Popover.Slot, { name: "block-toolbar" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Button,
+      {
+        className: "editor-collapsible-block-toolbar__toggle",
+        icon: isCollapsed ? import_icons.next : import_icons.previous,
+        onClick: () => {
+          onToggle(!isCollapsed);
+        },
+        label: isCollapsed ? (0, import_i18n.__)("Show block tools") : (0, import_i18n.__)("Hide block tools"),
+        size: "compact"
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=index.cjs.map