@wordpress/block-library/build-module/list-item/edit.js

Block library for the WordPress editor.

// packages/block-library/src/list-item/edit.js
import {
  RichText,
  useBlockProps,
  useInnerBlocksProps,
  BlockControls,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { isRTL, __ } from "@wordpress/i18n";
import { ToolbarButton } from "@wordpress/components";
import {
  formatOutdent,
  formatOutdentRTL,
  formatIndentRTL,
  formatIndent
} from "@wordpress/icons";
import { useMergeRefs } from "@wordpress/compose";
import { useSelect } from "@wordpress/data";
import { displayShortcut } from "@wordpress/keycodes";
import {
  useEnter,
  useSpace,
  useIndentListItem,
  useOutdentListItem,
  useMerge
} from "./hooks";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function IndentUI({ clientId }) {
  const indentListItem = useIndentListItem(clientId);
  const outdentListItem = useOutdentListItem();
  const { canIndent, canOutdent } = useSelect(
    (select) => {
      const { getBlockIndex, getBlockRootClientId, getBlockName } = select(blockEditorStore);
      return {
        canIndent: getBlockIndex(clientId) > 0,
        canOutdent: getBlockName(
          getBlockRootClientId(getBlockRootClientId(clientId))
        ) === "core/list-item"
      };
    },
    [clientId]
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: isRTL() ? formatOutdentRTL : formatOutdent,
        title: __("Outdent"),
        shortcut: displayShortcut.shift("Tab"),
        description: __("Outdent list item"),
        disabled: !canOutdent,
        onClick: () => outdentListItem()
      }
    ),
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: isRTL() ? formatIndentRTL : formatIndent,
        title: __("Indent"),
        shortcut: "Tab",
        description: __("Indent list item"),
        disabled: !canIndent,
        onClick: () => indentListItem()
      }
    )
  ] });
}
function ListItemEdit({
  attributes,
  setAttributes,
  clientId,
  mergeBlocks
}) {
  const { placeholder, content } = attributes;
  const blockProps = useBlockProps();
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    renderAppender: false,
    __unstableDisableDropZone: true
  });
  const useEnterRef = useEnter({ content, clientId });
  const useSpaceRef = useSpace(clientId);
  const onMerge = useMerge(clientId, mergeBlocks);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs("li", { ...innerBlocksProps, children: [
      /* @__PURE__ */ jsx(
        RichText,
        {
          ref: useMergeRefs([useEnterRef, useSpaceRef]),
          identifier: "content",
          tagName: "div",
          onChange: (nextContent) => setAttributes({ content: nextContent }),
          value: content,
          "aria-label": __("List text"),
          placeholder: placeholder || __("List"),
          onMerge
        }
      ),
      innerBlocksProps.children
    ] }),
    /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(IndentUI, { clientId }) })
  ] });
}
export {
  IndentUI,
  ListItemEdit as default
};
//# sourceMappingURL=edit.js.map