Frontity WP shortcodes processors

gist.js

import React from "react";
import Gist from "react-gist";
import { testShortCode, getShortCodeProps } from "./shortcode-utils";

const gist = {
  name: "gist",
  priority: 10,
  test: ({ node }) => testShortCode(node, "gist"), //👈 [gist ]
  processor: ({ node }) => {
    /*
       this node will be like
       [gist id="long-github-id" file="filename-or-undefined"]
    */
    const firstTextChildren = node.children[0]
    const shortcodeText = firstTextChildren.content
    const shortcodeProps = getShortCodeProps(shortcodeText);

    // we can check the required props are set
    const { id, file } = shortcodeProps;
    if (id) {
      // https://www.npmjs.com/package/react-gist#gist-idstring-filestring-
      node.props = { id, file };
      node.component = Gist;
    }

    return node;
  },
};

export default gist;

index.js

import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import iframe from "@frontity/html2react/processors/iframe";
import link from "@frontity/html2react/processors/link";
// OUR NEW PROCESSOR 👇
import gist from "./processors/gist";

//...scroll to libraries

  libraries: {
    html2react: {
       processors: [image, iframe, link, gist], // 👈 our component
    },
  },
};
// ...

shortcode-utils.js

export const testShortCode = ({ type, children, component }, name) => {
  const isNodeWithOnlyText =
    type === "element" && // is not a comment or plain text
    children.length === 1 && // has only only a text child
    children[0].type === "text";
  if (!isNodeWithOnlyText) return false;
  // format [name something] AND NOTHING ELSE in the tag
  const pattern = new RegExp(`\\s*\\[${name}[^\\]]*\\]\s*$`);

  return pattern.test(children[0].content);
};

export const getShortCodeProps = (shorcodeString) => {
  const regex = /\s+([^=\[\]\s]+)(=["'”]?([^"'\s\]”]+)["'”]?)?/gi;
  const props = [...shorcodeString.matchAll(regex)].reduce(
    (result, [fullMatch, propName, hasEqual, value]) => {
      let finalValue = value; // string without quotes
      const lowerCaseValue = value ? value.toLowerCase() : ""
      const isTrue = !hasEqual || lowerCaseValue === "true"

      // [shortcode isBooleanProp] isBooleanProp = true
      if (isTrue) finalValue = true;

      // [shortcode isTrulyBoolean="false"] isTrulyBoolean = false
      if (lowerCaseValue === "false") finalValue = booleanValue;

      result[propName] = finalValue;
      return result;
    },
    {}
  );
  return props;
};