@wordpress/block-library/build/footnotes/edit.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = FootnotesEdit;
var _blockEditor = require("@wordpress/block-editor");
var _coreData = require("@wordpress/core-data");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function FootnotesEdit({
  context: {
    postType,
    postId
  }
}) {
  const [meta, updateMeta] = (0, _coreData.useEntityProp)('postType', postType, 'meta', postId);
  const footnotesSupported = 'string' === typeof meta?.footnotes;
  const footnotes = meta?.footnotes ? JSON.parse(meta.footnotes) : [];
  const blockProps = (0, _blockEditor.useBlockProps)();
  if (!footnotesSupported) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...blockProps,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
          icon: _icons.formatListNumbered
        }),
        label: (0, _i18n.__)('Footnotes'),
        instructions: (0, _i18n.__)('Footnotes are not supported here. Add this block to post or page content.')
      })
    });
  }
  if (!footnotes.length) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ...blockProps,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
          icon: _icons.formatListNumbered
        }),
        label: (0, _i18n.__)('Footnotes'),
        instructions: (0, _i18n.__)('Footnotes found in blocks within this document will be displayed here.')
      })
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
    ...blockProps,
    children: footnotes.map(({
      id,
      content
    }) =>
    /*#__PURE__*/
    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
    (0, _jsxRuntime.jsxs)("li", {
      onMouseDown: event => {
        // When clicking on the list item (not on descendants),
        // focus the rich text element since it's only 1px wide when
        // empty.
        if (event.target === event.currentTarget) {
          event.target.firstElementChild.focus();
          event.preventDefault();
        }
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
        id: id,
        tagName: "span",
        value: content,
        identifier: id
        // To do: figure out why the browser is not scrolling
        // into view when it receives focus.
        ,
        onFocus: event => {
          if (!event.target.textContent.trim()) {
            event.target.scrollIntoView();
          }
        },
        onChange: nextFootnote => {
          updateMeta({
            ...meta,
            footnotes: JSON.stringify(footnotes.map(footnote => {
              return footnote.id === id ? {
                content: nextFootnote,
                id
              } : footnote;
            }))
          });
        }
      }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
        href: `#${id}-link`,
        children: "\u21A9\uFE0E"
      })]
    }, id))
  });
}
//# sourceMappingURL=edit.js.map