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

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.css ADDED
@@ -0,0 +1,101 @@
1
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
2
+ ._SidebarSection_jsf8x_1:last-of-type ._SidebarSection-content_jsf8x_1 {
3
+ border-bottom: none;
4
+ height: 100%;
5
+ }
6
+ ._SidebarSection-title_jsf8x_6 {
7
+ background: white;
8
+ padding: 16px;
9
+ border-bottom: 1px solid var(--puck-color-grey-8);
10
+ }
11
+ ._SidebarSection-title_jsf8x_6:hover {
12
+ opacity: 0.6;
13
+ cursor: pointer;
14
+ }
15
+ ._SidebarSection-content_jsf8x_1 {
16
+ border-bottom: 1px solid var(--puck-color-grey-8);
17
+ padding: 16px;
18
+ }
19
+ ._SidebarSection_jsf8x_1 > summary {
20
+ list-style: none;
21
+ }
22
+ ._SidebarSection_jsf8x_1 > summary::-webkit-details-marker {
23
+ display: none;
24
+ }
25
+
26
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
27
+ ._Heading_1y35v_1 {
28
+ display: block;
29
+ font-family: var(--puck-font-stack);
30
+ font-weight: 700;
31
+ margin: 0;
32
+ }
33
+ ._Heading_1y35v_1 b {
34
+ font-weight: 700;
35
+ }
36
+ ._Heading--xxxxl_1y35v_12 {
37
+ font-size: var(--puck-font-size-xxxxl);
38
+ letter-spacing: 0.08ch;
39
+ font-weight: 800;
40
+ }
41
+ ._Heading--xxxl_1y35v_18 {
42
+ font-size: var(--puck-font-size-xxxl);
43
+ }
44
+ ._Heading--xxl_1y35v_22 {
45
+ font-size: var(--puck-font-size-xxl);
46
+ }
47
+ ._Heading--xl_1y35v_26 {
48
+ font-size: var(--puck-font-size-xl);
49
+ }
50
+ ._Heading--l_1y35v_30 {
51
+ font-size: var(--puck-font-size-l);
52
+ }
53
+ ._Heading--m_1y35v_34 {
54
+ font-size: var(--puck-font-size-m);
55
+ }
56
+ ._Heading--s_1y35v_38 {
57
+ font-size: var(--puck-font-size-s);
58
+ }
59
+ ._Heading--xs_1y35v_42 {
60
+ font-size: var(--puck-font-size-xs);
61
+ }
62
+
63
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css/#css-module-data */
64
+ ._OutlineList_gor6f_1 {
65
+ color: var(--puck-color-grey-2);
66
+ font-family: var(--puck-font-stack);
67
+ margin: 0;
68
+ margin-left: 16px;
69
+ padding-left: 16px;
70
+ position: relative;
71
+ list-style: none;
72
+ }
73
+ ._OutlineList_gor6f_1::before {
74
+ background: var(--puck-color-grey-7);
75
+ position: absolute;
76
+ left: -1px;
77
+ top: 0px;
78
+ width: 1px;
79
+ height: calc(100% - 9px);
80
+ content: "";
81
+ }
82
+ ._OutlineList_gor6f_1 li {
83
+ position: relative;
84
+ margin-bottom: 4px;
85
+ }
86
+ ._OutlineList_gor6f_1 li::before {
87
+ background: var(--puck-color-grey-7);
88
+ position: absolute;
89
+ left: -17px;
90
+ top: 9px;
91
+ width: 13px;
92
+ height: 1px;
93
+ content: "";
94
+ }
95
+ ._OutlineList_gor6f_1 ._OutlineList-clickableItem_gor6f_36:hover {
96
+ color: var(--puck-color-blue);
97
+ cursor: pointer;
98
+ }
99
+ ._OutlineList_gor6f_1 li > ._OutlineList_gor6f_1 {
100
+ margin: 8px;
101
+ }
@@ -0,0 +1,5 @@
1
+ import { Plugin } from '@measured/puck/types/Plugin';
2
+
3
+ declare const HeadingAnalyzer: Plugin;
4
+
5
+ export { HeadingAnalyzer as default };
package/dist/index.js ADDED
@@ -0,0 +1,348 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
10
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
+ var __spreadValues = (a, b) => {
12
+ for (var prop in b || (b = {}))
13
+ if (__hasOwnProp.call(b, prop))
14
+ __defNormalProp(a, prop, b[prop]);
15
+ if (__getOwnPropSymbols)
16
+ for (var prop of __getOwnPropSymbols(b)) {
17
+ if (__propIsEnum.call(b, prop))
18
+ __defNormalProp(a, prop, b[prop]);
19
+ }
20
+ return a;
21
+ };
22
+ var __commonJS = (cb, mod) => function __require() {
23
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
24
+ };
25
+ var __export = (target, all) => {
26
+ for (var name in all)
27
+ __defProp(target, name, { get: all[name], enumerable: true });
28
+ };
29
+ var __copyProps = (to, from, except, desc) => {
30
+ if (from && typeof from === "object" || typeof from === "function") {
31
+ for (let key of __getOwnPropNames(from))
32
+ if (!__hasOwnProp.call(to, key) && key !== except)
33
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
34
+ }
35
+ return to;
36
+ };
37
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
38
+ // If the importer is in node compatibility mode or this is not an ESM
39
+ // file that has been converted to a CommonJS file using a Babel-
40
+ // compatible transform (i.e. "__esModule" has not been set), then set
41
+ // "default" to the CommonJS "module.exports" for node compatibility.
42
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
43
+ mod
44
+ ));
45
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
46
+
47
+ // ../../node_modules/classnames/index.js
48
+ var require_classnames = __commonJS({
49
+ "../../node_modules/classnames/index.js"(exports, module2) {
50
+ (function() {
51
+ "use strict";
52
+ var hasOwn = {}.hasOwnProperty;
53
+ var nativeCodeString = "[native code]";
54
+ function classNames() {
55
+ var classes = [];
56
+ for (var i = 0; i < arguments.length; i++) {
57
+ var arg = arguments[i];
58
+ if (!arg)
59
+ continue;
60
+ var argType = typeof arg;
61
+ if (argType === "string" || argType === "number") {
62
+ classes.push(arg);
63
+ } else if (Array.isArray(arg)) {
64
+ if (arg.length) {
65
+ var inner = classNames.apply(null, arg);
66
+ if (inner) {
67
+ classes.push(inner);
68
+ }
69
+ }
70
+ } else if (argType === "object") {
71
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
72
+ classes.push(arg.toString());
73
+ continue;
74
+ }
75
+ for (var key in arg) {
76
+ if (hasOwn.call(arg, key) && arg[key]) {
77
+ classes.push(key);
78
+ }
79
+ }
80
+ }
81
+ }
82
+ return classes.join(" ");
83
+ }
84
+ if (typeof module2 !== "undefined" && module2.exports) {
85
+ classNames.default = classNames;
86
+ module2.exports = classNames;
87
+ } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
88
+ define("classnames", [], function() {
89
+ return classNames;
90
+ });
91
+ } else {
92
+ window.classNames = classNames;
93
+ }
94
+ })();
95
+ }
96
+ });
97
+
98
+ // index.ts
99
+ var plugin_heading_analyzer_exports = {};
100
+ __export(plugin_heading_analyzer_exports, {
101
+ default: () => HeadingAnalyzer_default
102
+ });
103
+ module.exports = __toCommonJS(plugin_heading_analyzer_exports);
104
+
105
+ // src/HeadingAnalyzer.tsx
106
+ var import_react = require("react");
107
+
108
+ // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
109
+ var styles_module_default = { "SidebarSection": "_SidebarSection_jsf8x_1", "SidebarSection-content": "_SidebarSection-content_jsf8x_1", "SidebarSection-title": "_SidebarSection-title_jsf8x_6" };
110
+
111
+ // ../core/lib/get-class-name-factory.ts
112
+ var import_classnames = __toESM(require_classnames());
113
+ var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
114
+ let descendant = false;
115
+ let modifiers = false;
116
+ if (typeof options === "string") {
117
+ descendant = options;
118
+ } else if (typeof options === "object") {
119
+ modifiers = options;
120
+ }
121
+ if (descendant) {
122
+ return baseClass + styles[`${rootClass}-${descendant}`] || "";
123
+ } else if (modifiers) {
124
+ const prefixedModifiers = {};
125
+ for (let modifier in modifiers) {
126
+ prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
127
+ }
128
+ const c = styles[rootClass];
129
+ return baseClass + (0, import_classnames.default)(__spreadValues({
130
+ [c]: !!c
131
+ }, prefixedModifiers));
132
+ } else {
133
+ return baseClass + styles[rootClass] || "";
134
+ }
135
+ };
136
+ var get_class_name_factory_default = getClassNameFactory;
137
+
138
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
139
+ 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" };
140
+
141
+ // ../core/components/Heading/index.tsx
142
+ var import_jsx_runtime = require("react/jsx-runtime");
143
+ var getClassName = get_class_name_factory_default("Heading", styles_module_default2);
144
+ var Heading = ({ children, rank, size = "m" }) => {
145
+ const Tag = rank ? `h${rank}` : "span";
146
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
147
+ Tag,
148
+ {
149
+ className: getClassName({
150
+ [size]: true
151
+ }),
152
+ children
153
+ }
154
+ );
155
+ };
156
+
157
+ // ../core/components/SidebarSection/index.tsx
158
+ var getClassName2 = get_class_name_factory_default("SidebarSection", styles_module_default);
159
+ var SidebarSection = ({
160
+ children,
161
+ title
162
+ }) => {
163
+ return /* @__PURE__ */ React.createElement("details", { className: getClassName2({}), open: true }, /* @__PURE__ */ React.createElement("summary", { className: getClassName2("title") }, /* @__PURE__ */ React.createElement(Heading, { rank: 2, size: "xs" }, title)), /* @__PURE__ */ React.createElement("div", { className: getClassName2("content") }, children));
164
+ };
165
+
166
+ // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
167
+ var styles_module_default3 = { "OutlineList": "_OutlineList_gor6f_1", "OutlineList-clickableItem": "_OutlineList-clickableItem_gor6f_36" };
168
+
169
+ // ../core/components/OutlineList/index.tsx
170
+ var getClassName3 = get_class_name_factory_default("OutlineList", styles_module_default3);
171
+ var OutlineList = ({ children }) => {
172
+ return /* @__PURE__ */ React.createElement("ul", { className: getClassName3() }, children);
173
+ };
174
+ OutlineList.Clickable = ({ children }) => /* @__PURE__ */ React.createElement("div", { className: getClassName3("clickableItem") }, children);
175
+ OutlineList.Item = ({
176
+ children,
177
+ onClick
178
+ }) => {
179
+ return /* @__PURE__ */ React.createElement(
180
+ "li",
181
+ {
182
+ className: onClick ? getClassName3("clickableItem") : "",
183
+ onClick
184
+ },
185
+ children
186
+ );
187
+ };
188
+
189
+ // ../core/lib/scroll-into-view.ts
190
+ var scrollIntoView = (el) => {
191
+ const oldStyle = __spreadValues({}, el.style);
192
+ el.style.scrollMargin = "256px";
193
+ if (el) {
194
+ el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
195
+ el.style.scrollMargin = oldStyle.scrollMargin || "";
196
+ }
197
+ };
198
+
199
+ // src/HeadingAnalyzer.tsx
200
+ var import_react_from_json = __toESM(require("react-from-json"));
201
+ var import_jsx_runtime2 = require("react/jsx-runtime");
202
+ var dataAttr = "data-puck-heading-analyzer-id";
203
+ var getOutline = ({
204
+ addDataAttr = false
205
+ } = {}) => {
206
+ const headings = window.document.querySelector(".puck-root").querySelectorAll("h1,h2,h3,h4,h5,h6");
207
+ const _outline = [];
208
+ headings.forEach((item, i) => {
209
+ if (addDataAttr) {
210
+ item.setAttribute(dataAttr, i.toString());
211
+ }
212
+ _outline.push({
213
+ rank: parseInt(item.tagName.split("H")[1]),
214
+ text: item.textContent,
215
+ analyzeId: i.toString()
216
+ });
217
+ });
218
+ return _outline;
219
+ };
220
+ function buildHierarchy() {
221
+ var _a, _b;
222
+ const headings = getOutline({ addDataAttr: true });
223
+ const root = { rank: 0, children: [], text: "" };
224
+ let path = [root];
225
+ for (let heading of headings) {
226
+ const node = {
227
+ rank: heading.rank,
228
+ text: heading.text,
229
+ analyzeId: heading.analyzeId,
230
+ children: []
231
+ };
232
+ if (node.rank === 1) {
233
+ path = [root];
234
+ } else {
235
+ while (path[path.length - 1].rank >= node.rank) {
236
+ path.pop();
237
+ }
238
+ while (path.length < node.rank) {
239
+ const missingNode = {
240
+ rank: path.length,
241
+ missing: true,
242
+ children: [],
243
+ text: ""
244
+ };
245
+ (_a = path[path.length - 1].children) == null ? void 0 : _a.push(missingNode);
246
+ path.push(missingNode);
247
+ }
248
+ }
249
+ (_b = path[path.length - 1].children) == null ? void 0 : _b.push(node);
250
+ path.push(node);
251
+ }
252
+ return root.children;
253
+ }
254
+ var HeadingOutlineAnalyser = ({
255
+ children,
256
+ data
257
+ }) => {
258
+ const [hierarchy, setHierarchy] = (0, import_react.useState)([]);
259
+ const [firstRender, setFirstRender] = (0, import_react.useState)(true);
260
+ (0, import_react.useEffect)(() => {
261
+ if (firstRender) {
262
+ setTimeout(() => {
263
+ setHierarchy(buildHierarchy());
264
+ setFirstRender(false);
265
+ }, 100);
266
+ } else {
267
+ setHierarchy(buildHierarchy());
268
+ }
269
+ }, [data.content]);
270
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
271
+ children,
272
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SidebarSection, { title: "Heading Outline", children: [
273
+ hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "No headings." }),
274
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
275
+ import_react_from_json.default,
276
+ {
277
+ mapping: {
278
+ Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }),
279
+ OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(OutlineList.Item, { children: [
280
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
281
+ "small",
282
+ {
283
+ onClick: typeof props.analyzeId == "undefined" ? void 0 : (e) => {
284
+ e.stopPropagation();
285
+ const el = document.querySelector(
286
+ `[${dataAttr}="${props.analyzeId}"]`
287
+ );
288
+ const oldStyle = __spreadValues({}, el.style);
289
+ if (el) {
290
+ scrollIntoView(el);
291
+ el.style.outline = "4px solid var(--puck-color-rose-5)";
292
+ el.style.outlineOffset = "4px";
293
+ setTimeout(() => {
294
+ el.style.outline = oldStyle.outline || "";
295
+ el.style.outlineOffset = oldStyle.outlineOffset || "";
296
+ }, 2e3);
297
+ }
298
+ },
299
+ children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: "var(--puck-color-red)" }, children: [
300
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
301
+ "H",
302
+ props.rank
303
+ ] }),
304
+ ": Missing"
305
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
306
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
307
+ "H",
308
+ props.rank
309
+ ] }),
310
+ ": ",
311
+ props.text
312
+ ] })
313
+ }
314
+ ) }),
315
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: props.children })
316
+ ] })
317
+ },
318
+ entry: {
319
+ props: { children: hierarchy },
320
+ type: "Root"
321
+ },
322
+ mapProp: (prop) => {
323
+ if (prop && prop.rank) {
324
+ return {
325
+ type: "OutlineListItem",
326
+ props: prop
327
+ };
328
+ }
329
+ return prop;
330
+ }
331
+ }
332
+ ) })
333
+ ] })
334
+ ] });
335
+ };
336
+ var HeadingAnalyzer = {
337
+ renderPageFields: HeadingOutlineAnalyser
338
+ };
339
+ var HeadingAnalyzer_default = HeadingAnalyzer;
340
+ /*! Bundled license information:
341
+
342
+ classnames/index.js:
343
+ (*!
344
+ Copyright (c) 2018 Jed Watson.
345
+ Licensed under the MIT License (MIT), see
346
+ http://jedwatson.github.io/classnames
347
+ *)
348
+ */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck-plugin-heading-analyzer",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "private": false,
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -8,13 +8,13 @@
8
8
  "scripts": {
9
9
  "lint": "eslint \"**/*.ts*\"",
10
10
  "build": "rm -rf dist && tsup index.ts",
11
- "prepublish": "yarn build"
11
+ "prepare": "yarn build"
12
12
  },
13
13
  "files": [
14
14
  "dist"
15
15
  ],
16
16
  "devDependencies": {
17
- "@measured/puck": "^0.1.4",
17
+ "@measured/puck": "^0.1.5",
18
18
  "@types/react": "^18.2.0",
19
19
  "@types/react-dom": "^18.2.0",
20
20
  "eslint": "^7.32.0",