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

Sign up to get free protection for your applications and to get access to all the features.
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
- */