@measured/puck-plugin-heading-analyzer 0.1.0

package/README.md

@@ -0,0 +1,33 @@
+# plugin-heading-analyzer
+
+Visualise your heading outline structure and identify missing heading levels. Respects WCAG 2.
+
+<img src="https://i.imgur.com/POqtgHu.jpg" alt="example" width="156px" />
+
+## Quick start
+
+```sh
+npm i @puck/plugin-heading-analyzer
+```
+
+```jsx
+import { Puck } from "@puck/puck";
+import headingAnalyzer from "@puck/plugin-heading-analyzer";
+
+...
+
+// Render Puck
+export function Page() {
+  return <Puck
+    config={config}
+    data={data}
+    plugins={[
+        headingAnalyzer
+    ]}
+  />;
+}
+```
+
+## License
+
+MIT © [Measured Co.](https://github.com/measuredco)

package/dist/index.css

@@ -0,0 +1,101 @@
+/* css-module:/Users/chrisvilla/Projects/puck/packages/core/SidebarSection/styles.module.css/#css-module-data */
+._SidebarSection_jsf8x_1:last-of-type ._SidebarSection-content_jsf8x_1 {
+  border-bottom: none;
+  height: 100%;
+}
+._SidebarSection-title_jsf8x_6 {
+  background: white;
+  padding: 16px;
+  border-bottom: 1px solid var(--puck-color-grey-8);
+}
+._SidebarSection-title_jsf8x_6:hover {
+  opacity: 0.6;
+  cursor: pointer;
+}
+._SidebarSection-content_jsf8x_1 {
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  padding: 16px;
+}
+._SidebarSection_jsf8x_1 > summary {
+  list-style: none;
+}
+._SidebarSection_jsf8x_1 > summary::-webkit-details-marker {
+  display: none;
+}
+
+/* css-module:/Users/chrisvilla/Projects/puck/packages/core/Heading/styles.module.css/#css-module-data */
+._Heading_1y35v_1 {
+  display: block;
+  font-family: var(--puck-font-stack);
+  font-weight: 700;
+  margin: 0;
+}
+._Heading_1y35v_1 b {
+  font-weight: 700;
+}
+._Heading--xxxxl_1y35v_12 {
+  font-size: var(--puck-font-size-xxxxl);
+  letter-spacing: 0.08ch;
+  font-weight: 800;
+}
+._Heading--xxxl_1y35v_18 {
+  font-size: var(--puck-font-size-xxxl);
+}
+._Heading--xxl_1y35v_22 {
+  font-size: var(--puck-font-size-xxl);
+}
+._Heading--xl_1y35v_26 {
+  font-size: var(--puck-font-size-xl);
+}
+._Heading--l_1y35v_30 {
+  font-size: var(--puck-font-size-l);
+}
+._Heading--m_1y35v_34 {
+  font-size: var(--puck-font-size-m);
+}
+._Heading--s_1y35v_38 {
+  font-size: var(--puck-font-size-s);
+}
+._Heading--xs_1y35v_42 {
+  font-size: var(--puck-font-size-xs);
+}
+
+/* css-module:/Users/chrisvilla/Projects/puck/packages/core/OutlineList/styles.module.css/#css-module-data */
+._OutlineList_gor6f_1 {
+  color: var(--puck-color-grey-2);
+  font-family: var(--puck-font-stack);
+  margin: 0;
+  margin-left: 16px;
+  padding-left: 16px;
+  position: relative;
+  list-style: none;
+}
+._OutlineList_gor6f_1::before {
+  background: var(--puck-color-grey-7);
+  position: absolute;
+  left: -1px;
+  top: 0px;
+  width: 1px;
+  height: calc(100% - 9px);
+  content: "";
+}
+._OutlineList_gor6f_1 li {
+  position: relative;
+  margin-bottom: 4px;
+}
+._OutlineList_gor6f_1 li::before {
+  background: var(--puck-color-grey-7);
+  position: absolute;
+  left: -17px;
+  top: 9px;
+  width: 13px;
+  height: 1px;
+  content: "";
+}
+._OutlineList_gor6f_1 ._OutlineList-clickableItem_gor6f_36:hover {
+  color: var(--puck-color-blue);
+  cursor: pointer;
+}
+._OutlineList_gor6f_1 li > ._OutlineList_gor6f_1 {
+  margin: 8px;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '@puck/core/types/Plugin';
+
+declare const HeadingAnalyzer: Plugin;
+
+export { HeadingAnalyzer as default };

package/dist/index.js

@@ -0,0 +1,374 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../tsup-config/react-import.js
+var import_react;
+var init_react_import = __esm({
+  "../tsup-config/react-import.js"() {
+    "use strict";
+    import_react = __toESM(require("react"));
+  }
+});
+
+// ../../node_modules/classnames/index.js
+var require_classnames = __commonJS({
+  "../../node_modules/classnames/index.js"(exports, module2) {
+    init_react_import();
+    (function() {
+      "use strict";
+      var hasOwn = {}.hasOwnProperty;
+      var nativeCodeString = "[native code]";
+      function classNames() {
+        var classes = [];
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (!arg)
+            continue;
+          var argType = typeof arg;
+          if (argType === "string" || argType === "number") {
+            classes.push(arg);
+          } else if (Array.isArray(arg)) {
+            if (arg.length) {
+              var inner = classNames.apply(null, arg);
+              if (inner) {
+                classes.push(inner);
+              }
+            }
+          } else if (argType === "object") {
+            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+              classes.push(arg.toString());
+              continue;
+            }
+            for (var key in arg) {
+              if (hasOwn.call(arg, key) && arg[key]) {
+                classes.push(key);
+              }
+            }
+          }
+        }
+        return classes.join(" ");
+      }
+      if (typeof module2 !== "undefined" && module2.exports) {
+        classNames.default = classNames;
+        module2.exports = classNames;
+      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+        define("classnames", [], function() {
+          return classNames;
+        });
+      } else {
+        window.classNames = classNames;
+      }
+    })();
+  }
+});
+
+// index.tsx
+var plugin_heading_analyzer_exports = {};
+__export(plugin_heading_analyzer_exports, {
+  default: () => plugin_heading_analyzer_default
+});
+module.exports = __toCommonJS(plugin_heading_analyzer_exports);
+init_react_import();
+var import_react2 = require("react");
+
+// ../core/SidebarSection/index.tsx
+init_react_import();
+
+// css-module:/Users/chrisvilla/Projects/puck/packages/core/SidebarSection/styles.module.css#css-module
+init_react_import();
+var styles_module_default = { "SidebarSection": "_SidebarSection_jsf8x_1", "SidebarSection-content": "_SidebarSection-content_jsf8x_1", "SidebarSection-title": "_SidebarSection-title_jsf8x_6" };
+
+// ../core/lib/get-class-name-factory.ts
+init_react_import();
+var import_classnames = __toESM(require_classnames());
+var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
+  let descendant = false;
+  let modifiers = false;
+  if (typeof options === "string") {
+    descendant = options;
+  } else if (typeof options === "object") {
+    modifiers = options;
+  }
+  if (descendant) {
+    return baseClass + styles[`${rootClass}-${descendant}`] || "";
+  } else if (modifiers) {
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles[rootClass];
+    return baseClass + (0, import_classnames.default)(__spreadValues({
+      [c]: !!c
+    }, prefixedModifiers));
+  } else {
+    return baseClass + styles[rootClass] || "";
+  }
+};
+var get_class_name_factory_default = getClassNameFactory;
+
+// ../core/Heading/index.tsx
+init_react_import();
+
+// css-module:/Users/chrisvilla/Projects/puck/packages/core/Heading/styles.module.css#css-module
+init_react_import();
+var styles_module_default2 = { "Heading": "_Heading_1y35v_1", "Heading--xxxxl": "_Heading--xxxxl_1y35v_12", "Heading--xxxl": "_Heading--xxxl_1y35v_18", "Heading--xxl": "_Heading--xxl_1y35v_22", "Heading--xl": "_Heading--xl_1y35v_26", "Heading--l": "_Heading--l_1y35v_30", "Heading--m": "_Heading--m_1y35v_34", "Heading--s": "_Heading--s_1y35v_38", "Heading--xs": "_Heading--xs_1y35v_42" };
+
+// ../core/Heading/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var getClassName = get_class_name_factory_default("Heading", styles_module_default2);
+var Heading = ({ children, rank, size = "m" }) => {
+  const Tag = rank ? `h${rank}` : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Tag,
+    {
+      className: getClassName({
+        [size]: true
+      }),
+      children
+    }
+  );
+};
+
+// ../core/SidebarSection/index.tsx
+var getClassName2 = get_class_name_factory_default("SidebarSection", styles_module_default);
+var SidebarSection = ({
+  children,
+  title
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement("details", { className: getClassName2({}), open: true }, /* @__PURE__ */ import_react.default.createElement("summary", { className: getClassName2("title") }, /* @__PURE__ */ import_react.default.createElement(Heading, { rank: 2, size: "xs" }, title)), /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("content") }, children));
+};
+
+// ../core/OutlineList/index.tsx
+init_react_import();
+
+// css-module:/Users/chrisvilla/Projects/puck/packages/core/OutlineList/styles.module.css#css-module
+init_react_import();
+var styles_module_default3 = { "OutlineList": "_OutlineList_gor6f_1", "OutlineList-clickableItem": "_OutlineList-clickableItem_gor6f_36" };
+
+// ../core/OutlineList/index.tsx
+var getClassName3 = get_class_name_factory_default("OutlineList", styles_module_default3);
+var OutlineList = ({ children }) => {
+  return /* @__PURE__ */ import_react.default.createElement("ul", { className: getClassName3() }, children);
+};
+OutlineList.Clickable = ({ children }) => /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName3("clickableItem") }, children);
+OutlineList.Item = ({
+  children,
+  onClick
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "li",
+    {
+      className: onClick ? getClassName3("clickableItem") : "",
+      onClick
+    },
+    children
+  );
+};
+
+// ../core/lib/scroll-into-view.ts
+init_react_import();
+var scrollIntoView = (el) => {
+  const oldStyle = __spreadValues({}, el.style);
+  el.style.scrollMargin = "256px";
+  if (el) {
+    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
+    el.style.scrollMargin = oldStyle.scrollMargin || "";
+  }
+};
+
+// index.tsx
+var import_react_from_json = __toESM(require("react-from-json"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var dataAttr = "data-puck-heading-analyzer-id";
+var getOutline = ({
+  addDataAttr = false
+} = {}) => {
+  const headings = window.document.querySelector(".puck-root").querySelectorAll("h1,h2,h3,h4,h5,h6");
+  const _outline = [];
+  headings.forEach((item, i) => {
+    if (addDataAttr) {
+      item.setAttribute(dataAttr, i.toString());
+    }
+    _outline.push({
+      rank: parseInt(item.tagName.split("H")[1]),
+      text: item.textContent,
+      analyzeId: i.toString()
+    });
+  });
+  return _outline;
+};
+function buildHierarchy() {
+  var _a, _b;
+  const headings = getOutline({ addDataAttr: true });
+  const root = { rank: 0, children: [], text: "" };
+  let path = [root];
+  for (let heading of headings) {
+    const node = {
+      rank: heading.rank,
+      text: heading.text,
+      analyzeId: heading.analyzeId,
+      children: []
+    };
+    if (node.rank === 1) {
+      path = [root];
+    } else {
+      while (path[path.length - 1].rank >= node.rank) {
+        path.pop();
+      }
+      while (path.length < node.rank) {
+        const missingNode = {
+          rank: path.length,
+          missing: true,
+          children: [],
+          text: ""
+        };
+        (_a = path[path.length - 1].children) == null ? void 0 : _a.push(missingNode);
+        path.push(missingNode);
+      }
+    }
+    (_b = path[path.length - 1].children) == null ? void 0 : _b.push(node);
+    path.push(node);
+  }
+  return root.children;
+}
+var HeadingOutlineAnalyser = ({
+  children,
+  data
+}) => {
+  const [hierarchy, setHierarchy] = (0, import_react2.useState)([]);
+  const [firstRender, setFirstRender] = (0, import_react2.useState)(true);
+  (0, import_react2.useEffect)(() => {
+    if (firstRender) {
+      setTimeout(() => {
+        setHierarchy(buildHierarchy());
+        setFirstRender(false);
+      }, 100);
+    } else {
+      setHierarchy(buildHierarchy());
+    }
+  }, [data.content]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SidebarSection, { title: "Heading Outline", children: [
+      hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "No headings." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_from_json.default,
+        {
+          mapping: {
+            Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }),
+            OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(OutlineList.Item, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "small",
+                {
+                  onClick: typeof props.analyzeId == "undefined" ? void 0 : (e) => {
+                    e.stopPropagation();
+                    const el = document.querySelector(
+                      `[${dataAttr}="${props.analyzeId}"]`
+                    );
+                    const oldStyle = __spreadValues({}, el.style);
+                    if (el) {
+                      scrollIntoView(el);
+                      el.style.outline = "4px solid var(--puck-color-rose-5)";
+                      el.style.outlineOffset = "4px";
+                      setTimeout(() => {
+                        el.style.outline = oldStyle.outline || "";
+                        el.style.outlineOffset = oldStyle.outlineOffset || "";
+                      }, 2e3);
+                    }
+                  },
+                  children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: "var(--puck-color-red)" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
+                      "H",
+                      props.rank
+                    ] }),
+                    ": Missing"
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
+                      "H",
+                      props.rank
+                    ] }),
+                    ": ",
+                    props.text
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: props.children })
+            ] })
+          },
+          entry: {
+            props: { children: hierarchy },
+            type: "Root"
+          },
+          mapProp: (prop) => {
+            if (prop && prop.rank) {
+              return {
+                type: "OutlineListItem",
+                props: prop
+              };
+            }
+            return prop;
+          }
+        }
+      ) })
+    ] })
+  ] });
+};
+var HeadingAnalyzer = {
+  renderPageFields: HeadingOutlineAnalyser
+};
+var plugin_heading_analyzer_default = HeadingAnalyzer;
+/*! Bundled license information:
+
+classnames/index.js:
+  (*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  *)
+*/

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@measured/puck-plugin-heading-analyzer",
+  "version": "0.1.0",
+  "private": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "build": "rm -rf dist && tsup index.tsx"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@puck/core": "*",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "tsconfig": "*",
+    "tsup-config": "*",
+    "typescript": "^4.5.2"
+  },
+  "dependencies": {
+    "react-from-json": "^0.7.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}