@measured/puck-plugin-heading-analyzer 0.1.0 → 0.1.4

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@measured/puck-plugin-heading-analyzer",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "scripts": {
     "lint": "eslint \"**/*.ts*\"",
-    "build": "rm -rf dist && tsup index.tsx"
+    "build": "rm -rf dist && tsup index.ts",
+    "prepublish": "yarn build"
   },
   "files": [
     "dist"
   ],
   "devDependencies": {
+    "@measured/puck": "^0.1.4",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@puck/core": "*",
     "eslint": "^7.32.0",
     "eslint-config-custom": "*",
     "tsconfig": "*",

package/dist/index.css

@@ -1,101 +0,0 @@
-/* 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

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

package/dist/index.js

@@ -1,374 +0,0 @@
-"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
-  *)
-*/