@wordpress/block-library/build-module/image/transforms.js

Block library for the WordPress editor.

// packages/block-library/src/image/transforms.js
import { createBlobURL, isBlobURL } from "@wordpress/blob";
import { createBlock, getBlockAttributes } from "@wordpress/blocks";
function stripFirstImage(attributes, { shortcode }) {
  const { body } = document.implementation.createHTMLDocument("");
  body.innerHTML = shortcode.content;
  let nodeToRemove = body.querySelector("img");
  while (nodeToRemove && nodeToRemove.parentNode && nodeToRemove.parentNode !== body) {
    nodeToRemove = nodeToRemove.parentNode;
  }
  if (nodeToRemove) {
    nodeToRemove.parentNode.removeChild(nodeToRemove);
  }
  return body.innerHTML.trim();
}
function getFirstAnchorAttributeFormHTML(html, attributeName) {
  const { body } = document.implementation.createHTMLDocument("");
  body.innerHTML = html;
  const { firstElementChild } = body;
  if (firstElementChild && firstElementChild.nodeName === "A") {
    return firstElementChild.getAttribute(attributeName) || void 0;
  }
}
var imageSchema = {
  img: {
    attributes: ["src", "alt", "title"],
    classes: [
      "alignleft",
      "aligncenter",
      "alignright",
      "alignnone",
      /^wp-image-\d+$/
    ]
  }
};
var schema = ({ phrasingContentSchema }) => ({
  figure: {
    require: ["img"],
    children: {
      ...imageSchema,
      a: {
        attributes: ["href", "rel", "target"],
        classes: ["*"],
        children: imageSchema
      },
      figcaption: {
        children: phrasingContentSchema
      }
    }
  }
});
var transforms = {
  from: [
    {
      type: "raw",
      isMatch: (node) => node.nodeName === "FIGURE" && !!node.querySelector("img"),
      schema,
      transform: (node) => {
        const className = node.className + " " + node.querySelector("img").className;
        const alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec(
          className
        );
        const anchor = node.id === "" ? void 0 : node.id;
        const align = alignMatches ? alignMatches[1] : void 0;
        const idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec(
          className
        );
        const id = idMatches ? Number(idMatches[1]) : void 0;
        const anchorElement = node.querySelector("a");
        const linkDestination = anchorElement && anchorElement.href ? "custom" : void 0;
        const href = anchorElement && anchorElement.href ? anchorElement.href : void 0;
        const rel = anchorElement && anchorElement.rel ? anchorElement.rel : void 0;
        const linkClass = anchorElement && anchorElement.className ? anchorElement.className : void 0;
        const attributes = getBlockAttributes(
          "core/image",
          node.outerHTML,
          {
            align,
            id,
            linkDestination,
            href,
            rel,
            linkClass,
            anchor
          }
        );
        if (isBlobURL(attributes.url)) {
          attributes.blob = attributes.url;
          delete attributes.url;
        }
        return createBlock("core/image", attributes);
      }
    },
    {
      // Note: when dragging and dropping multiple files onto a gallery this overrides the
      // gallery transform in order to add new images to the gallery instead of
      // creating a new gallery.
      type: "files",
      isMatch(files) {
        return files.every(
          (file) => file.type.indexOf("image/") === 0
        );
      },
      transform(files) {
        const blocks = files.map((file) => {
          return createBlock("core/image", {
            blob: createBlobURL(file)
          });
        });
        return blocks;
      }
    },
    {
      type: "shortcode",
      tag: "caption",
      attributes: {
        url: {
          type: "string",
          source: "attribute",
          attribute: "src",
          selector: "img"
        },
        alt: {
          type: "string",
          source: "attribute",
          attribute: "alt",
          selector: "img"
        },
        caption: {
          shortcode: stripFirstImage
        },
        href: {
          shortcode: (attributes, { shortcode }) => {
            return getFirstAnchorAttributeFormHTML(
              shortcode.content,
              "href"
            );
          }
        },
        rel: {
          shortcode: (attributes, { shortcode }) => {
            return getFirstAnchorAttributeFormHTML(
              shortcode.content,
              "rel"
            );
          }
        },
        linkClass: {
          shortcode: (attributes, { shortcode }) => {
            return getFirstAnchorAttributeFormHTML(
              shortcode.content,
              "class"
            );
          }
        },
        id: {
          type: "number",
          shortcode: ({ named: { id } }) => {
            if (!id) {
              return;
            }
            return parseInt(id.replace("attachment_", ""), 10);
          }
        },
        align: {
          type: "string",
          shortcode: ({ named: { align = "alignnone" } }) => {
            return align.replace("align", "");
          }
        }
      }
    }
  ]
};
var transforms_default = transforms;
export {
  transforms_default as default,
  stripFirstImage
};
//# sourceMappingURL=transforms.js.map