@commercetools-demo/puck-components 0.8.0 → 0.8.2
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/README.md +116 -0
- package/dist/index.js +24 -24
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -24
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
# @commercetools-demo/puck-components
|
|
2
|
+
|
|
3
|
+
Nimbus-free "visualize" layer for the Puck CMS: the component render functions,
|
|
4
|
+
their prop types, shared render helpers, the i18n catalogs, and a render-only
|
|
5
|
+
Puck config (`defaultRenderConfig` / `createRenderConfig`). Storefronts consume
|
|
6
|
+
this through [`@commercetools-demo/puck-renderer`](../puck-renderer); the editor
|
|
7
|
+
composes these render functions with its own field widgets.
|
|
8
|
+
|
|
9
|
+
Nothing here imports `@commercetools/nimbus` or `@chakra-ui/react`.
|
|
10
|
+
|
|
11
|
+
## Theming rich text (`.puck-rich-text-content`)
|
|
12
|
+
|
|
13
|
+
`RichTextContent` renders sanitized rich-text HTML and ships a small scoped
|
|
14
|
+
stylesheet so the output looks consistent regardless of the host's CSS reset
|
|
15
|
+
(e.g. Tailwind Preflight). **Every declared property reads from a CSS custom
|
|
16
|
+
property**, with the built-in value as the `var()` fallback:
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
.puck-rich-text-content h1 {
|
|
20
|
+
font-size: var(--puck-rich-text-content--h1--font-size, 2em);
|
|
21
|
+
/* … */
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
So you can restyle any element by setting the matching variable on
|
|
26
|
+
`.puck-rich-text-content` itself, or on any ancestor (they cascade/inherit):
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
/* Your global stylesheet or a wrapper */
|
|
30
|
+
.puck-rich-text-content {
|
|
31
|
+
--puck-rich-text-content--h1--font-size: 3rem;
|
|
32
|
+
--puck-rich-text-content--h1--font-weight: 700;
|
|
33
|
+
--puck-rich-text-content--a--color: #e94560;
|
|
34
|
+
--puck-rich-text-content--line-height: 1.75;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Or scope overrides to one page/section */
|
|
38
|
+
.my-article {
|
|
39
|
+
--puck-rich-text-content--blockquote--border-left: 4px solid #2c5530;
|
|
40
|
+
--puck-rich-text-content--code--background: #f5f5f5;
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Variable naming convention: `--puck-rich-text-content--<element>--<property>`.
|
|
45
|
+
Grouped selectors use one representative key — `strong` covers `<strong>`/`<b>`,
|
|
46
|
+
`em` covers `<em>`/`<i>`, `s` covers `<s>`/`<del>`, `pre-code` is `<code>` inside
|
|
47
|
+
`<pre>`.
|
|
48
|
+
|
|
49
|
+
### Full variable reference
|
|
50
|
+
|
|
51
|
+
| Variable | Default | Applies to |
|
|
52
|
+
| --- | --- | --- |
|
|
53
|
+
| `--puck-rich-text-content--line-height` | `1.6` | container `line-height` |
|
|
54
|
+
| `--puck-rich-text-content--first-child--margin-top` | `0` | first child `margin-top` |
|
|
55
|
+
| `--puck-rich-text-content--last-child--margin-bottom` | `0` | last child `margin-bottom` |
|
|
56
|
+
| `--puck-rich-text-content--h1--font-size` | `2em` | `h1` |
|
|
57
|
+
| `--puck-rich-text-content--h1--font-weight` | `400` | `h1` |
|
|
58
|
+
| `--puck-rich-text-content--h1--line-height` | `1.2` | `h1` |
|
|
59
|
+
| `--puck-rich-text-content--h1--margin` | `0.67em 0` | `h1` |
|
|
60
|
+
| `--puck-rich-text-content--h2--font-size` | `1.5em` | `h2` |
|
|
61
|
+
| `--puck-rich-text-content--h2--font-weight` | `400` | `h2` |
|
|
62
|
+
| `--puck-rich-text-content--h2--line-height` | `1.25` | `h2` |
|
|
63
|
+
| `--puck-rich-text-content--h2--margin` | `0.75em 0` | `h2` |
|
|
64
|
+
| `--puck-rich-text-content--h3--font-size` | `1.17em` | `h3` |
|
|
65
|
+
| `--puck-rich-text-content--h3--font-weight` | `400` | `h3` |
|
|
66
|
+
| `--puck-rich-text-content--h3--line-height` | `1.3` | `h3` |
|
|
67
|
+
| `--puck-rich-text-content--h3--margin` | `0.83em 0` | `h3` |
|
|
68
|
+
| `--puck-rich-text-content--h4--font-size` | `1em` | `h4` |
|
|
69
|
+
| `--puck-rich-text-content--h4--font-weight` | `400` | `h4` |
|
|
70
|
+
| `--puck-rich-text-content--h4--margin` | `1em 0` | `h4` |
|
|
71
|
+
| `--puck-rich-text-content--h5--font-size` | `0.83em` | `h5` |
|
|
72
|
+
| `--puck-rich-text-content--h5--font-weight` | `400` | `h5` |
|
|
73
|
+
| `--puck-rich-text-content--h5--margin` | `1.17em 0` | `h5` |
|
|
74
|
+
| `--puck-rich-text-content--h6--font-size` | `0.75em` | `h6` |
|
|
75
|
+
| `--puck-rich-text-content--h6--font-weight` | `400` | `h6` |
|
|
76
|
+
| `--puck-rich-text-content--h6--margin` | `1.33em 0` | `h6` |
|
|
77
|
+
| `--puck-rich-text-content--p--margin` | `1em 0` | `p` |
|
|
78
|
+
| `--puck-rich-text-content--strong--font-weight` | `700` | `strong`, `b` |
|
|
79
|
+
| `--puck-rich-text-content--em--font-style` | `italic` | `em`, `i` |
|
|
80
|
+
| `--puck-rich-text-content--u--text-decoration` | `underline` | `u` |
|
|
81
|
+
| `--puck-rich-text-content--s--text-decoration` | `line-through` | `s`, `del` |
|
|
82
|
+
| `--puck-rich-text-content--ul--list-style` | `disc` | `ul` |
|
|
83
|
+
| `--puck-rich-text-content--ul--margin` | `1em 0` | `ul` |
|
|
84
|
+
| `--puck-rich-text-content--ul--padding-left` | `1.5em` | `ul` |
|
|
85
|
+
| `--puck-rich-text-content--ol--list-style` | `decimal` | `ol` |
|
|
86
|
+
| `--puck-rich-text-content--ol--margin` | `1em 0` | `ol` |
|
|
87
|
+
| `--puck-rich-text-content--ol--padding-left` | `1.5em` | `ol` |
|
|
88
|
+
| `--puck-rich-text-content--li--margin` | `0.25em 0` | `li` |
|
|
89
|
+
| `--puck-rich-text-content--a--color` | `#2563eb` | `a` |
|
|
90
|
+
| `--puck-rich-text-content--a--text-decoration` | `underline` | `a` |
|
|
91
|
+
| `--puck-rich-text-content--blockquote--margin` | `1em 0` | `blockquote` |
|
|
92
|
+
| `--puck-rich-text-content--blockquote--padding-left` | `1em` | `blockquote` |
|
|
93
|
+
| `--puck-rich-text-content--blockquote--border-left` | `3px solid #d1d5db` | `blockquote` |
|
|
94
|
+
| `--puck-rich-text-content--blockquote--color` | `#4b5563` | `blockquote` |
|
|
95
|
+
| `--puck-rich-text-content--code--font-family` | `ui-monospace, SFMono-Regular, Menlo, monospace` | `code` |
|
|
96
|
+
| `--puck-rich-text-content--code--background` | `rgba(0,0,0,0.06)` | `code` |
|
|
97
|
+
| `--puck-rich-text-content--code--padding` | `0.1em 0.3em` | `code` |
|
|
98
|
+
| `--puck-rich-text-content--code--border-radius` | `3px` | `code` |
|
|
99
|
+
| `--puck-rich-text-content--code--font-size` | `0.9em` | `code` |
|
|
100
|
+
| `--puck-rich-text-content--pre--background` | `rgba(0,0,0,0.06)` | `pre` |
|
|
101
|
+
| `--puck-rich-text-content--pre--padding` | `0.75em 1em` | `pre` |
|
|
102
|
+
| `--puck-rich-text-content--pre--border-radius` | `6px` | `pre` |
|
|
103
|
+
| `--puck-rich-text-content--pre--overflow-x` | `auto` | `pre` |
|
|
104
|
+
| `--puck-rich-text-content--pre-code--background` | `none` | `code` inside `pre` |
|
|
105
|
+
| `--puck-rich-text-content--pre-code--padding` | `0` | `code` inside `pre` |
|
|
106
|
+
| `--puck-rich-text-content--img--max-width` | `100%` | `img` |
|
|
107
|
+
| `--puck-rich-text-content--img--height` | `auto` | `img` |
|
|
108
|
+
| `--puck-rich-text-content--hr--border` | `none` | `hr` |
|
|
109
|
+
| `--puck-rich-text-content--hr--border-top` | `1px solid #e5e7eb` | `hr` |
|
|
110
|
+
| `--puck-rich-text-content--hr--margin` | `1.5em 0` | `hr` |
|
|
111
|
+
|
|
112
|
+
> Notes
|
|
113
|
+
> - `margin` / `padding` / `border` variables take the full shorthand value
|
|
114
|
+
> (e.g. `--puck-rich-text-content--h1--margin: 0.67em 0`).
|
|
115
|
+
> - A value containing commas (font stacks, `rgba(...)`) is a valid `var()`
|
|
116
|
+
> fallback and equally valid as an override.
|
package/dist/index.js
CHANGED
|
@@ -764,30 +764,30 @@ var sanitizeHtml = (html) => {
|
|
|
764
764
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
765
765
|
var STYLE_ID = "puck-rich-text-content-styles";
|
|
766
766
|
var RICH_TEXT_CSS = `
|
|
767
|
-
.puck-rich-text-content { line-height: 1.6; }
|
|
768
|
-
.puck-rich-text-content > :first-child { margin-top: 0; }
|
|
769
|
-
.puck-rich-text-content > :last-child { margin-bottom: 0; }
|
|
770
|
-
.puck-rich-text-content h1 { font-size: 2em; font-weight:
|
|
771
|
-
.puck-rich-text-content h2 { font-size: 1.5em; font-weight:
|
|
772
|
-
.puck-rich-text-content h3 { font-size: 1.17em; font-weight:
|
|
773
|
-
.puck-rich-text-content h4 { font-size: 1em; font-weight:
|
|
774
|
-
.puck-rich-text-content h5 { font-size: 0.83em; font-weight:
|
|
775
|
-
.puck-rich-text-content h6 { font-size: 0.75em; font-weight:
|
|
776
|
-
.puck-rich-text-content p { margin: 1em 0; }
|
|
777
|
-
.puck-rich-text-content strong, .puck-rich-text-content b { font-weight: 700; }
|
|
778
|
-
.puck-rich-text-content em, .puck-rich-text-content i { font-style: italic; }
|
|
779
|
-
.puck-rich-text-content u { text-decoration: underline; }
|
|
780
|
-
.puck-rich-text-content s, .puck-rich-text-content del { text-decoration: line-through; }
|
|
781
|
-
.puck-rich-text-content ul { list-style: disc; margin: 1em 0; padding-left: 1.5em; }
|
|
782
|
-
.puck-rich-text-content ol { list-style: decimal; margin: 1em 0; padding-left: 1.5em; }
|
|
783
|
-
.puck-rich-text-content li { margin: 0.25em 0; }
|
|
784
|
-
.puck-rich-text-content a { color: #2563eb; text-decoration: underline; }
|
|
785
|
-
.puck-rich-text-content blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid #d1d5db; color: #4b5563; }
|
|
786
|
-
.puck-rich-text-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0,0,0,0.06); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
|
|
787
|
-
.puck-rich-text-content pre { background: rgba(0,0,0,0.06); padding: 0.75em 1em; border-radius: 6px; overflow-x: auto; }
|
|
788
|
-
.puck-rich-text-content pre code { background: none; padding: 0; }
|
|
789
|
-
.puck-rich-text-content img { max-width: 100
|
|
790
|
-
.puck-rich-text-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
|
|
767
|
+
.puck-rich-text-content { line-height: var(--puck-rich-text-content--line-height, 1.6); }
|
|
768
|
+
.puck-rich-text-content > :first-child { margin-top: var(--puck-rich-text-content--first-child--margin-top, 0); }
|
|
769
|
+
.puck-rich-text-content > :last-child { margin-bottom: var(--puck-rich-text-content--last-child--margin-bottom, 0); }
|
|
770
|
+
.puck-rich-text-content h1 { font-size: var(--puck-rich-text-content--h1--font-size, 2em); font-weight: var(--puck-rich-text-content--h1--font-weight, 400); line-height: var(--puck-rich-text-content--h1--line-height, 1.2); margin: var(--puck-rich-text-content--h1--margin, 0.67em 0); }
|
|
771
|
+
.puck-rich-text-content h2 { font-size: var(--puck-rich-text-content--h2--font-size, 1.5em); font-weight: var(--puck-rich-text-content--h2--font-weight, 400); line-height: var(--puck-rich-text-content--h2--line-height, 1.25); margin: var(--puck-rich-text-content--h2--margin, 0.75em 0); }
|
|
772
|
+
.puck-rich-text-content h3 { font-size: var(--puck-rich-text-content--h3--font-size, 1.17em); font-weight: var(--puck-rich-text-content--h3--font-weight, 400); line-height: var(--puck-rich-text-content--h3--line-height, 1.3); margin: var(--puck-rich-text-content--h3--margin, 0.83em 0); }
|
|
773
|
+
.puck-rich-text-content h4 { font-size: var(--puck-rich-text-content--h4--font-size, 1em); font-weight: var(--puck-rich-text-content--h4--font-weight, 400); margin: var(--puck-rich-text-content--h4--margin, 1em 0); }
|
|
774
|
+
.puck-rich-text-content h5 { font-size: var(--puck-rich-text-content--h5--font-size, 0.83em); font-weight: var(--puck-rich-text-content--h5--font-weight, 400); margin: var(--puck-rich-text-content--h5--margin, 1.17em 0); }
|
|
775
|
+
.puck-rich-text-content h6 { font-size: var(--puck-rich-text-content--h6--font-size, 0.75em); font-weight: var(--puck-rich-text-content--h6--font-weight, 400); margin: var(--puck-rich-text-content--h6--margin, 1.33em 0); }
|
|
776
|
+
.puck-rich-text-content p { margin: var(--puck-rich-text-content--p--margin, 1em 0); }
|
|
777
|
+
.puck-rich-text-content strong, .puck-rich-text-content b { font-weight: var(--puck-rich-text-content--strong--font-weight, 700); }
|
|
778
|
+
.puck-rich-text-content em, .puck-rich-text-content i { font-style: var(--puck-rich-text-content--em--font-style, italic); }
|
|
779
|
+
.puck-rich-text-content u { text-decoration: var(--puck-rich-text-content--u--text-decoration, underline); }
|
|
780
|
+
.puck-rich-text-content s, .puck-rich-text-content del { text-decoration: var(--puck-rich-text-content--s--text-decoration, line-through); }
|
|
781
|
+
.puck-rich-text-content ul { list-style: var(--puck-rich-text-content--ul--list-style, disc); margin: var(--puck-rich-text-content--ul--margin, 1em 0); padding-left: var(--puck-rich-text-content--ul--padding-left, 1.5em); }
|
|
782
|
+
.puck-rich-text-content ol { list-style: var(--puck-rich-text-content--ol--list-style, decimal); margin: var(--puck-rich-text-content--ol--margin, 1em 0); padding-left: var(--puck-rich-text-content--ol--padding-left, 1.5em); }
|
|
783
|
+
.puck-rich-text-content li { margin: var(--puck-rich-text-content--li--margin, 0.25em 0); }
|
|
784
|
+
.puck-rich-text-content a { color: var(--puck-rich-text-content--a--color, #2563eb); text-decoration: var(--puck-rich-text-content--a--text-decoration, underline); }
|
|
785
|
+
.puck-rich-text-content blockquote { margin: var(--puck-rich-text-content--blockquote--margin, 1em 0); padding-left: var(--puck-rich-text-content--blockquote--padding-left, 1em); border-left: var(--puck-rich-text-content--blockquote--border-left, 3px solid #d1d5db); color: var(--puck-rich-text-content--blockquote--color, #4b5563); }
|
|
786
|
+
.puck-rich-text-content code { font-family: var(--puck-rich-text-content--code--font-family, ui-monospace, SFMono-Regular, Menlo, monospace); background: var(--puck-rich-text-content--code--background, rgba(0,0,0,0.06)); padding: var(--puck-rich-text-content--code--padding, 0.1em 0.3em); border-radius: var(--puck-rich-text-content--code--border-radius, 3px); font-size: var(--puck-rich-text-content--code--font-size, 0.9em); }
|
|
787
|
+
.puck-rich-text-content pre { background: var(--puck-rich-text-content--pre--background, rgba(0,0,0,0.06)); padding: var(--puck-rich-text-content--pre--padding, 0.75em 1em); border-radius: var(--puck-rich-text-content--pre--border-radius, 6px); overflow-x: var(--puck-rich-text-content--pre--overflow-x, auto); }
|
|
788
|
+
.puck-rich-text-content pre code { background: var(--puck-rich-text-content--pre-code--background, none); padding: var(--puck-rich-text-content--pre-code--padding, 0); }
|
|
789
|
+
.puck-rich-text-content img { max-width: var(--puck-rich-text-content--img--max-width, 100%); height: var(--puck-rich-text-content--img--height, auto); }
|
|
790
|
+
.puck-rich-text-content hr { border: var(--puck-rich-text-content--hr--border, none); border-top: var(--puck-rich-text-content--hr--border-top, 1px solid #e5e7eb); margin: var(--puck-rich-text-content--hr--margin, 1.5em 0); }
|
|
791
791
|
`.trim();
|
|
792
792
|
var RichTextContent = ({
|
|
793
793
|
html,
|