@measured/puck-plugin-heading-analyzer 0.9.1-canary.f4e8d4a → 0.10.0-canary.18b3473

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -19,6 +21,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -292,7 +295,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment2 = REACT_FRAGMENT_TYPE;
+        var Fragment3 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -351,7 +354,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment2;
+        exports.Fragment = Fragment3;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -1074,7 +1077,7 @@ init_react_import();
 
 // src/HeadingAnalyzer.tsx
 init_react_import();
-var import_react3 = require("react");
+var import_react6 = require("react");
 
 // ../core/components/SidebarSection/index.tsx
 init_react_import();
@@ -1211,24 +1214,172 @@ ChevronRight.propTypes = {
 ChevronRight.displayName = "ChevronRight";
 var chevron_right_default = ChevronRight;
 
+// ../core/lib/use-breadcrumbs.ts
+init_react_import();
+var import_react5 = require("react");
+
+// ../core/components/DropZone/context.tsx
+init_react_import();
+var import_react3 = require("react");
+
+// ../core/lib/get-item.ts
+init_react_import();
+
+// ../core/lib/root-droppable-id.ts
+init_react_import();
+var rootDroppableId = "default-zone";
+
+// ../core/lib/setup-zone.ts
+init_react_import();
+var setupZone = (data, zoneKey) => {
+  if (zoneKey === rootDroppableId) {
+    return data;
+  }
+  const newData = __spreadValues({}, data);
+  newData.zones = data.zones || {};
+  newData.zones[zoneKey] = newData.zones[zoneKey] || [];
+  return newData;
+};
+
+// ../core/lib/get-item.ts
+var getItem = (selector, data) => {
+  if (!selector.zone || selector.zone === rootDroppableId) {
+    return data.content[selector.index];
+  }
+  return setupZone(data, selector.zone).zones[selector.zone][selector.index];
+};
+
+// ../core/lib/get-zone-id.ts
+init_react_import();
+var getZoneId = (zoneCompound) => {
+  if (!zoneCompound) {
+    return [];
+  }
+  if (zoneCompound && zoneCompound.indexOf(":") > -1) {
+    return zoneCompound.split(":");
+  }
+  return [rootDroppableId, zoneCompound];
+};
+
+// ../core/components/DropZone/context.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var dropZoneContext = (0, import_react3.createContext)(null);
+
+// ../core/components/Puck/context.tsx
+init_react_import();
+var import_react4 = require("react");
+var defaultAppState = {
+  data: { content: [], root: { title: "" } },
+  ui: {
+    leftSideBarVisible: true,
+    arrayState: {},
+    itemSelector: null
+  }
+};
+var appContext = (0, import_react4.createContext)({
+  state: defaultAppState,
+  dispatch: () => null
+});
+var AppProvider = appContext.Provider;
+var useAppContext = () => {
+  const mainContext = (0, import_react4.useContext)(appContext);
+  const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
+  return __spreadProps(__spreadValues({}, mainContext), {
+    // Helpers
+    selectedItem,
+    setUi: (ui, recordHistory) => {
+      return mainContext.dispatch({
+        type: "setUi",
+        ui,
+        recordHistory
+      });
+    }
+  });
+};
+
+// ../core/lib/use-breadcrumbs.ts
+var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
+  const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
+  const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
+  if (!id) {
+    return [];
+  }
+  return currentPathData == null ? void 0 : currentPathData.path.reduce((acc, zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    if (area === rootDroppableId) {
+      return [
+        {
+          label: "Page",
+          selector: null
+        }
+      ];
+    }
+    const parentZoneCompound = acc.length > 0 ? acc[acc.length - 1].zoneCompound : rootDroppableId;
+    let parentZone = data.content;
+    if (parentZoneCompound && parentZoneCompound !== rootDroppableId) {
+      parentZone = data.zones[parentZoneCompound];
+    }
+    if (!parentZone) {
+      return acc;
+    }
+    const itemIndex = parentZone.findIndex(
+      (queryItem) => queryItem.props.id === area
+    );
+    const item = parentZone[itemIndex];
+    if (!item) {
+      return acc;
+    }
+    return [
+      ...acc,
+      {
+        label: item.type.toString(),
+        selector: {
+          index: itemIndex,
+          zone: parentZoneCompound
+        },
+        zoneCompound
+      }
+    ];
+  }, []);
+};
+var useBreadcrumbs = (renderCount) => {
+  const {
+    state: { data },
+    selectedItem
+  } = useAppContext();
+  const dzContext = (0, import_react5.useContext)(dropZoneContext);
+  return (0, import_react5.useMemo)(() => {
+    const breadcrumbs = convertPathDataToBreadcrumbs(
+      selectedItem,
+      dzContext == null ? void 0 : dzContext.pathData,
+      data
+    );
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+    }
+    return breadcrumbs;
+  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
+};
+
 // ../core/components/SidebarSection/index.tsx
 var getClassName2 = get_class_name_factory_default("SidebarSection", styles_module_default);
 var SidebarSection = ({
   children,
   title,
   background,
-  breadcrumbs = [],
-  breadcrumbClick,
+  showBreadcrumbs,
   noPadding
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2({ noPadding }), style: { background } }, /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("title") }, /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("breadcrumbs") }, breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, className: getClassName2("breadcrumb") }, /* @__PURE__ */ import_react.default.createElement(
+  const { setUi } = useAppContext();
+  const breadcrumbs = useBreadcrumbs(1);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2({ noPadding }), style: { background } }, /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("title") }, /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("breadcrumbs") }, showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, className: getClassName2("breadcrumb") }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: getClassName2("breadcrumbLabel"),
-      onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb)
+      onClick: () => setUi({ itemSelector: breadcrumb.selector })
     },
     breadcrumb.label
-  ), /* @__PURE__ */ import_react.default.createElement(chevron_right_default, { size: 16 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("heading") }, /* @__PURE__ */ import_react.default.createElement(Heading, { rank: 2, size: "xs" }, title)))), /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("content") }, children));
+  ), /* @__PURE__ */ import_react.default.createElement(chevron_right_default, { size: 16 }))) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("heading") }, /* @__PURE__ */ import_react.default.createElement(Heading, { rank: 2, size: "xs" }, title)))), /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName2("content") }, children));
 };
 
 // ../core/components/OutlineList/index.tsx
@@ -1272,7 +1423,7 @@ var scrollIntoView = (el) => {
 
 // src/HeadingAnalyzer.tsx
 var import_react_from_json = __toESM(require("react-from-json"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var dataAttr = "data-puck-heading-analyzer-id";
 var getOutline = ({
   addDataAttr = false
@@ -1327,11 +1478,12 @@ function buildHierarchy() {
 }
 var HeadingOutlineAnalyer = ({
   children,
-  data
+  state
 }) => {
-  const [hierarchy, setHierarchy] = (0, import_react3.useState)([]);
-  const [firstRender, setFirstRender] = (0, import_react3.useState)(true);
-  (0, import_react3.useEffect)(() => {
+  const { data } = state;
+  const [hierarchy, setHierarchy] = (0, import_react6.useState)([]);
+  const [firstRender, setFirstRender] = (0, import_react6.useState)(true);
+  (0, import_react6.useEffect)(() => {
     if (firstRender) {
       setTimeout(() => {
         setHierarchy(buildHierarchy());
@@ -1341,17 +1493,17 @@ var HeadingOutlineAnalyer = ({
       setHierarchy(buildHierarchy());
     }
   }, [data.content]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { 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)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SidebarSection, { title: "Heading Outline", children: [
+      hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: "No headings." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime3.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)(
+            Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children }),
+            OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(OutlineList.Item, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "small",
                 {
                   onClick: typeof props.analyzeId == "undefined" ? void 0 : (e) => {
@@ -1370,14 +1522,14 @@ var HeadingOutlineAnalyer = ({
                       }, 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: [
+                  children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: "var(--puck-color-red)" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("b", { children: [
                       "H",
                       props.rank
                     ] }),
                     ": Missing"
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("b", { children: [
                       "H",
                       props.rank
                     ] }),
@@ -1386,7 +1538,7 @@ var HeadingOutlineAnalyer = ({
                   ] })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: props.children })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OutlineList, { children: props.children })
             ] })
           },
           entry: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck-plugin-heading-analyzer",
-  "version": "0.9.1-canary.f4e8d4a",
+  "version": "0.10.0-canary.18b3473",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@measured/puck": "^0.9.1-canary.f4e8d4a",
+    "@measured/puck": "^0.10.0-canary.18b3473",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "eslint": "^7.32.0",