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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "@measured/puck-plugin-heading-analyzer",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "private": false,
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
7
7
  "license": "MIT",
8
8
  "scripts": {
9
9
  "lint": "eslint \"**/*.ts*\"",
10
- "build": "rm -rf dist && tsup index.tsx",
10
+ "build": "rm -rf dist && tsup index.ts",
11
11
  "prepublish": "yarn build"
12
12
  },
13
13
  "files": [
14
14
  "dist"
15
15
  ],
16
16
  "devDependencies": {
17
- "@measured/puck": "^0.1.3",
17
+ "@measured/puck": "^0.1.4",
18
18
  "@types/react": "^18.2.0",
19
19
  "@types/react-dom": "^18.2.0",
20
20
  "eslint": "^7.32.0",
package/dist/index.css DELETED
@@ -1,101 +0,0 @@
1
- /* css-module:/Users/chrisvilla/Projects/puck/packages/core/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:/Users/chrisvilla/Projects/puck/packages/core/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:/Users/chrisvilla/Projects/puck/packages/core/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
- }
package/dist/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import { Plugin } from '@measured/puck/types/Plugin';
2
-
3
- declare const HeadingAnalyzer: Plugin;
4
-
5
- export { HeadingAnalyzer as default };
package/dist/index.js DELETED
@@ -1,346 +0,0 @@
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.tsx
99
- var plugin_heading_analyzer_exports = {};
100
- __export(plugin_heading_analyzer_exports, {
101
- default: () => plugin_heading_analyzer_default
102
- });
103
- module.exports = __toCommonJS(plugin_heading_analyzer_exports);
104
- var import_react = require("react");
105
-
106
- // css-module:/Users/chrisvilla/Projects/puck/packages/core/SidebarSection/styles.module.css#css-module
107
- var styles_module_default = { "SidebarSection": "_SidebarSection_jsf8x_1", "SidebarSection-content": "_SidebarSection-content_jsf8x_1", "SidebarSection-title": "_SidebarSection-title_jsf8x_6" };
108
-
109
- // ../core/lib/get-class-name-factory.ts
110
- var import_classnames = __toESM(require_classnames());
111
- var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
112
- let descendant = false;
113
- let modifiers = false;
114
- if (typeof options === "string") {
115
- descendant = options;
116
- } else if (typeof options === "object") {
117
- modifiers = options;
118
- }
119
- if (descendant) {
120
- return baseClass + styles[`${rootClass}-${descendant}`] || "";
121
- } else if (modifiers) {
122
- const prefixedModifiers = {};
123
- for (let modifier in modifiers) {
124
- prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
125
- }
126
- const c = styles[rootClass];
127
- return baseClass + (0, import_classnames.default)(__spreadValues({
128
- [c]: !!c
129
- }, prefixedModifiers));
130
- } else {
131
- return baseClass + styles[rootClass] || "";
132
- }
133
- };
134
- var get_class_name_factory_default = getClassNameFactory;
135
-
136
- // css-module:/Users/chrisvilla/Projects/puck/packages/core/Heading/styles.module.css#css-module
137
- 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" };
138
-
139
- // ../core/Heading/index.tsx
140
- var import_jsx_runtime = require("react/jsx-runtime");
141
- var getClassName = get_class_name_factory_default("Heading", styles_module_default2);
142
- var Heading = ({ children, rank, size = "m" }) => {
143
- const Tag = rank ? `h${rank}` : "span";
144
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
145
- Tag,
146
- {
147
- className: getClassName({
148
- [size]: true
149
- }),
150
- children
151
- }
152
- );
153
- };
154
-
155
- // ../core/SidebarSection/index.tsx
156
- var getClassName2 = get_class_name_factory_default("SidebarSection", styles_module_default);
157
- var SidebarSection = ({
158
- children,
159
- title
160
- }) => {
161
- 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));
162
- };
163
-
164
- // css-module:/Users/chrisvilla/Projects/puck/packages/core/OutlineList/styles.module.css#css-module
165
- var styles_module_default3 = { "OutlineList": "_OutlineList_gor6f_1", "OutlineList-clickableItem": "_OutlineList-clickableItem_gor6f_36" };
166
-
167
- // ../core/OutlineList/index.tsx
168
- var getClassName3 = get_class_name_factory_default("OutlineList", styles_module_default3);
169
- var OutlineList = ({ children }) => {
170
- return /* @__PURE__ */ React.createElement("ul", { className: getClassName3() }, children);
171
- };
172
- OutlineList.Clickable = ({ children }) => /* @__PURE__ */ React.createElement("div", { className: getClassName3("clickableItem") }, children);
173
- OutlineList.Item = ({
174
- children,
175
- onClick
176
- }) => {
177
- return /* @__PURE__ */ React.createElement(
178
- "li",
179
- {
180
- className: onClick ? getClassName3("clickableItem") : "",
181
- onClick
182
- },
183
- children
184
- );
185
- };
186
-
187
- // ../core/lib/scroll-into-view.ts
188
- var scrollIntoView = (el) => {
189
- const oldStyle = __spreadValues({}, el.style);
190
- el.style.scrollMargin = "256px";
191
- if (el) {
192
- el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
193
- el.style.scrollMargin = oldStyle.scrollMargin || "";
194
- }
195
- };
196
-
197
- // index.tsx
198
- var import_react_from_json = __toESM(require("react-from-json"));
199
- var import_jsx_runtime2 = require("react/jsx-runtime");
200
- var dataAttr = "data-puck-heading-analyzer-id";
201
- var getOutline = ({
202
- addDataAttr = false
203
- } = {}) => {
204
- const headings = window.document.querySelector(".puck-root").querySelectorAll("h1,h2,h3,h4,h5,h6");
205
- const _outline = [];
206
- headings.forEach((item, i) => {
207
- if (addDataAttr) {
208
- item.setAttribute(dataAttr, i.toString());
209
- }
210
- _outline.push({
211
- rank: parseInt(item.tagName.split("H")[1]),
212
- text: item.textContent,
213
- analyzeId: i.toString()
214
- });
215
- });
216
- return _outline;
217
- };
218
- function buildHierarchy() {
219
- var _a, _b;
220
- const headings = getOutline({ addDataAttr: true });
221
- const root = { rank: 0, children: [], text: "" };
222
- let path = [root];
223
- for (let heading of headings) {
224
- const node = {
225
- rank: heading.rank,
226
- text: heading.text,
227
- analyzeId: heading.analyzeId,
228
- children: []
229
- };
230
- if (node.rank === 1) {
231
- path = [root];
232
- } else {
233
- while (path[path.length - 1].rank >= node.rank) {
234
- path.pop();
235
- }
236
- while (path.length < node.rank) {
237
- const missingNode = {
238
- rank: path.length,
239
- missing: true,
240
- children: [],
241
- text: ""
242
- };
243
- (_a = path[path.length - 1].children) == null ? void 0 : _a.push(missingNode);
244
- path.push(missingNode);
245
- }
246
- }
247
- (_b = path[path.length - 1].children) == null ? void 0 : _b.push(node);
248
- path.push(node);
249
- }
250
- return root.children;
251
- }
252
- var HeadingOutlineAnalyser = ({
253
- children,
254
- data
255
- }) => {
256
- const [hierarchy, setHierarchy] = (0, import_react.useState)([]);
257
- const [firstRender, setFirstRender] = (0, import_react.useState)(true);
258
- (0, import_react.useEffect)(() => {
259
- if (firstRender) {
260
- setTimeout(() => {
261
- setHierarchy(buildHierarchy());
262
- setFirstRender(false);
263
- }, 100);
264
- } else {
265
- setHierarchy(buildHierarchy());
266
- }
267
- }, [data.content]);
268
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
269
- children,
270
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SidebarSection, { title: "Heading Outline", children: [
271
- hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "No headings." }),
272
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
273
- import_react_from_json.default,
274
- {
275
- mapping: {
276
- Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }),
277
- OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(OutlineList.Item, { children: [
278
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
279
- "small",
280
- {
281
- onClick: typeof props.analyzeId == "undefined" ? void 0 : (e) => {
282
- e.stopPropagation();
283
- const el = document.querySelector(
284
- `[${dataAttr}="${props.analyzeId}"]`
285
- );
286
- const oldStyle = __spreadValues({}, el.style);
287
- if (el) {
288
- scrollIntoView(el);
289
- el.style.outline = "4px solid var(--puck-color-rose-5)";
290
- el.style.outlineOffset = "4px";
291
- setTimeout(() => {
292
- el.style.outline = oldStyle.outline || "";
293
- el.style.outlineOffset = oldStyle.outlineOffset || "";
294
- }, 2e3);
295
- }
296
- },
297
- children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: "var(--puck-color-red)" }, children: [
298
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
299
- "H",
300
- props.rank
301
- ] }),
302
- ": Missing"
303
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
304
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
305
- "H",
306
- props.rank
307
- ] }),
308
- ": ",
309
- props.text
310
- ] })
311
- }
312
- ) }),
313
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: props.children })
314
- ] })
315
- },
316
- entry: {
317
- props: { children: hierarchy },
318
- type: "Root"
319
- },
320
- mapProp: (prop) => {
321
- if (prop && prop.rank) {
322
- return {
323
- type: "OutlineListItem",
324
- props: prop
325
- };
326
- }
327
- return prop;
328
- }
329
- }
330
- ) })
331
- ] })
332
- ] });
333
- };
334
- var HeadingAnalyzer = {
335
- renderPageFields: HeadingOutlineAnalyser
336
- };
337
- var plugin_heading_analyzer_default = HeadingAnalyzer;
338
- /*! Bundled license information:
339
-
340
- classnames/index.js:
341
- (*!
342
- Copyright (c) 2018 Jed Watson.
343
- Licensed under the MIT License (MIT), see
344
- http://jedwatson.github.io/classnames
345
- *)
346
- */