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

Block library for the WordPress editor.

// packages/block-library/src/list-item/edit.jsx
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, useRegistry } from "@wordpress/data";
import { displayShortcut } from "@wordpress/keycodes";
import { useEnter, useTab, useMultiSelectTab, useMerge } from "./hooks/index.mjs";
import {
  indentListItems,
  outdentListItems,
  getIndentTarget,
  getOutdentTarget
} from "./utils.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function IndentUI({ clientId }) {
  const registry = useRegistry();
  const { canIndent, canOutdent } = useSelect(
    (select) => {
      const storeSelect = select(blockEditorStore);
      return {
        canIndent: !!getIndentTarget(storeSelect, clientId),
        canOutdent: !!getOutdentTarget(storeSelect, clientId)
      };
    },
    [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: () => outdentListItems(registry)
      }
    ),
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: isRTL() ? formatIndentRTL : formatIndent,
        title: __("Indent"),
        shortcut: "Tab",
        description: __("Indent list item"),
        disabled: !canIndent,
        onClick: () => indentListItems(registry, clientId)
      }
    )
  ] });
}
function ListItemEdit({
  attributes,
  setAttributes,
  clientId,
  mergeBlocks
}) {
  const { placeholder, content } = attributes;
  const blockProps = useBlockProps();
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    renderAppender: false,
    __unstableDisableDropZone: true
  });
  const useEnterRef = useEnter(clientId);
  const useTabRef = useTab();
  const useMultiSelectTabRef = useMultiSelectTab(clientId);
  const onMerge = useMerge(clientId, mergeBlocks);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs("li", { ...innerBlocksProps, children: [
      /* @__PURE__ */ jsx(
        RichText,
        {
          ref: useMergeRefs([
            useEnterRef,
            useTabRef,
            useMultiSelectTabRef
          ]),
          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.mjs.map