@lowdefy/blocks-markdown 4.7.3 → 5.0.0

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.
@@ -14,18 +14,21 @@
14
14
  limitations under the License.
15
15
  */ import React from 'react';
16
16
  import DOMPurify from 'dompurify';
17
- import { blockDefaultProps } from '@lowdefy/block-utils';
17
+ import { withBlockDefaults } from '@lowdefy/block-utils';
18
18
  import ReactMarkdown from 'react-markdown';
19
19
  import gfm from 'remark-gfm';
20
20
  import rehypeRaw from 'rehype-raw';
21
+ import markdownStyles from '../../style.module.css';
22
+ import codeblockStyles from '../../codeblock.module.css';
21
23
  let DangerousMarkdown = class DangerousMarkdown extends React.Component {
22
24
  render() {
23
- const { blockId, properties, methods } = this.props;
25
+ const { blockId, classNames, properties, styles } = this.props;
24
26
  return /*#__PURE__*/ React.createElement("div", {
25
27
  id: blockId,
26
- className: methods.makeCssClass(properties.style)
28
+ className: classNames?.element,
29
+ style: styles?.element
27
30
  }, /*#__PURE__*/ React.createElement(ReactMarkdown, {
28
- className: "markdown-body markdown-default-code",
31
+ className: `${markdownStyles['markdown-body']} ${codeblockStyles['markdown-default-code']}`,
29
32
  remarkPlugins: [
30
33
  gfm
31
34
  ],
@@ -41,12 +44,4 @@ let DangerousMarkdown = class DangerousMarkdown extends React.Component {
41
44
  this.DOMPurifyOptions = props.properties.DOMPurifyOptions;
42
45
  }
43
46
  };
44
- DangerousMarkdown.defaultProps = blockDefaultProps;
45
- DangerousMarkdown.meta = {
46
- category: 'container',
47
- icons: [],
48
- styles: [
49
- 'codeblock.less'
50
- ]
51
- };
52
- export default DangerousMarkdown;
47
+ export default withBlockDefaults(DangerousMarkdown);
@@ -13,7 +13,12 @@
13
13
  See the License for the specific language governing permissions and
14
14
  limitations under the License.
15
15
  */ export default {
16
- type: 'object',
16
+ category: 'display',
17
+ icons: [],
18
+ valueType: null,
19
+ cssKeys: {
20
+ element: 'The DangerousMarkdown element.'
21
+ },
17
22
  properties: {
18
23
  type: 'object',
19
24
  additionalProperties: false,
@@ -31,13 +36,6 @@
31
36
  docs: {
32
37
  displayType: 'yaml'
33
38
  }
34
- },
35
- style: {
36
- type: 'object',
37
- description: 'Style to apply to Markdown div.',
38
- docs: {
39
- displayType: 'yaml'
40
- }
41
39
  }
42
40
  }
43
41
  }
@@ -13,25 +13,20 @@
13
13
  See the License for the specific language governing permissions and
14
14
  limitations under the License.
15
15
  */ import React from 'react';
16
- import { blockDefaultProps } from '@lowdefy/block-utils';
16
+ import { withBlockDefaults } from '@lowdefy/block-utils';
17
17
  import ReactMarkdown from 'react-markdown';
18
18
  import gfm from 'remark-gfm';
19
- const Markdown = ({ blockId, properties, methods })=>/*#__PURE__*/ React.createElement("div", {
19
+ import markdownStyles from '../../style.module.css';
20
+ import codeblockStyles from '../../codeblock.module.css';
21
+ const Markdown = ({ blockId, classNames, properties, styles })=>/*#__PURE__*/ React.createElement("div", {
20
22
  id: blockId,
21
- className: methods.makeCssClass(properties.style)
23
+ className: classNames?.element,
24
+ style: styles?.element
22
25
  }, /*#__PURE__*/ React.createElement(ReactMarkdown, {
23
- className: "markdown-body markdown-default-code",
26
+ className: `${markdownStyles['markdown-body']} ${codeblockStyles['markdown-default-code']}`,
24
27
  skipHtml: properties.skipHtml,
25
28
  remarkPlugins: [
26
29
  gfm
27
30
  ]
28
31
  }, properties.content));
29
- Markdown.defaultProps = blockDefaultProps;
30
- Markdown.meta = {
31
- category: 'container',
32
- icons: [],
33
- styles: [
34
- 'codeblock.less'
35
- ]
36
- };
37
- export default Markdown;
32
+ export default withBlockDefaults(Markdown);
@@ -13,7 +13,12 @@
13
13
  See the License for the specific language governing permissions and
14
14
  limitations under the License.
15
15
  */ export default {
16
- type: 'object',
16
+ category: 'display',
17
+ icons: [],
18
+ valueType: null,
19
+ cssKeys: {
20
+ element: 'The Markdown element.'
21
+ },
17
22
  properties: {
18
23
  type: 'object',
19
24
  additionalProperties: false,
@@ -29,13 +34,6 @@
29
34
  type: 'boolean',
30
35
  default: false,
31
36
  description: 'By default, HTML in markdown is escaped. When true all HTML code in the markdown will not be rendered.'
32
- },
33
- style: {
34
- type: 'object',
35
- description: 'Style to apply to Markdown div.',
36
- docs: {
37
- displayType: 'yaml'
38
- }
39
37
  }
40
38
  }
41
39
  }
@@ -12,13 +12,16 @@
12
12
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
13
  See the License for the specific language governing permissions and
14
14
  limitations under the License.
15
- */ import React from 'react';
15
+ */ import React, { useMemo } from 'react';
16
16
  import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
17
- import { blockDefaultProps } from '@lowdefy/block-utils';
17
+ import { withBlockDefaults } from '@lowdefy/block-utils';
18
+ import { theme as antdTheme } from 'antd';
18
19
  import ReactMarkdown from 'react-markdown';
19
20
  import gfm from 'remark-gfm';
21
+ import markdownStyles from '../../style.module.css';
22
+ import codeblockStyles from '../../codeblock.module.css';
20
23
  // See https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/393 for esm issue.
21
- import { github } from 'react-syntax-highlighter/dist/cjs/styles/hljs/index.js';
24
+ import { github, a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs/index.js';
22
25
  import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript.js';
23
26
  import typescript from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';
24
27
  import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python.js';
@@ -28,48 +31,63 @@ import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';
28
31
  import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml.js';
29
32
  import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown.js';
30
33
  import handlebars from 'react-syntax-highlighter/dist/cjs/languages/hljs/handlebars.js';
31
- SyntaxHighlighter.registerLanguage('handlebars', handlebars.default);
32
- SyntaxHighlighter.registerLanguage('nunjucks', handlebars.default);
33
- SyntaxHighlighter.registerLanguage('html', handlebars.default);
34
- SyntaxHighlighter.registerLanguage('java', java.default);
35
- SyntaxHighlighter.registerLanguage('javascript', javascript.default);
36
- SyntaxHighlighter.registerLanguage('js', javascript.default);
37
- SyntaxHighlighter.registerLanguage('jsx', javascript.default);
38
- SyntaxHighlighter.registerLanguage('json', json.default);
39
- SyntaxHighlighter.registerLanguage('markdown', markdown.default);
40
- SyntaxHighlighter.registerLanguage('python', python.default);
41
- SyntaxHighlighter.registerLanguage('py', python.default);
42
- SyntaxHighlighter.registerLanguage('typescript', typescript.default);
43
- SyntaxHighlighter.registerLanguage('ts', typescript.default);
44
- SyntaxHighlighter.registerLanguage('xml', xml.default);
45
- SyntaxHighlighter.registerLanguage('yaml', yaml.default);
46
- const components = {
47
- code ({ inline, className, children, ...props }) {
48
- return !inline ? /*#__PURE__*/ React.createElement(SyntaxHighlighter, {
49
- style: github,
50
- language: String(className).replace('language-', ''),
51
- ...props
52
- }, children) : /*#__PURE__*/ React.createElement("code", {
53
- className: className,
54
- ...props
55
- }, children);
34
+ // Handle CJS/ESM interop: webpack gives { default: fn }, Turbopack may give fn directly.
35
+ const lang = (m)=>m.default || m;
36
+ SyntaxHighlighter.registerLanguage('handlebars', lang(handlebars));
37
+ SyntaxHighlighter.registerLanguage('nunjucks', lang(handlebars));
38
+ SyntaxHighlighter.registerLanguage('html', lang(handlebars));
39
+ SyntaxHighlighter.registerLanguage('java', lang(java));
40
+ SyntaxHighlighter.registerLanguage('javascript', lang(javascript));
41
+ SyntaxHighlighter.registerLanguage('js', lang(javascript));
42
+ SyntaxHighlighter.registerLanguage('jsx', lang(javascript));
43
+ SyntaxHighlighter.registerLanguage('json', lang(json));
44
+ SyntaxHighlighter.registerLanguage('markdown', lang(markdown));
45
+ SyntaxHighlighter.registerLanguage('python', lang(python));
46
+ SyntaxHighlighter.registerLanguage('py', lang(python));
47
+ SyntaxHighlighter.registerLanguage('typescript', lang(typescript));
48
+ SyntaxHighlighter.registerLanguage('ts', lang(typescript));
49
+ SyntaxHighlighter.registerLanguage('xml', lang(xml));
50
+ SyntaxHighlighter.registerLanguage('yaml', lang(yaml));
51
+ function makeComponents(isDark) {
52
+ return {
53
+ code ({ inline, className, children, ...props }) {
54
+ return !inline ? /*#__PURE__*/ React.createElement(SyntaxHighlighter, {
55
+ style: isDark ? a11yDark : github,
56
+ language: String(className).replace('language-', ''),
57
+ ...props
58
+ }, children) : /*#__PURE__*/ React.createElement("code", {
59
+ className: className,
60
+ ...props
61
+ }, children);
62
+ }
63
+ };
64
+ }
65
+ const MarkdownWithCode = ({ blockId, classNames, properties, styles })=>{
66
+ const { token } = antdTheme.useToken();
67
+ // Ant Design dark algorithm sets colorBgBase to '#000' or '#141414'.
68
+ // Parse the hex value and check if it's below mid-brightness.
69
+ let bgHex = (token.colorBgBase || '#ffffff').replace('#', '');
70
+ if (bgHex.length === 3) {
71
+ bgHex = bgHex[0] + bgHex[0] + bgHex[1] + bgHex[1] + bgHex[2] + bgHex[2];
56
72
  }
57
- };
58
- const MarkdownWithCode = ({ blockId, properties, methods })=>/*#__PURE__*/ React.createElement("div", {
73
+ const r = parseInt(bgHex.substring(0, 2) || 'ff', 16);
74
+ const g = parseInt(bgHex.substring(2, 4) || 'ff', 16);
75
+ const b = parseInt(bgHex.substring(4, 6) || 'ff', 16);
76
+ const isDark = (r * 299 + g * 587 + b * 114) / 1000 < 128;
77
+ const components = useMemo(()=>makeComponents(isDark), [
78
+ isDark
79
+ ]);
80
+ return /*#__PURE__*/ React.createElement("div", {
59
81
  id: blockId,
60
- className: methods.makeCssClass(properties.style)
82
+ className: classNames?.element,
83
+ style: styles?.element
61
84
  }, /*#__PURE__*/ React.createElement(ReactMarkdown, {
62
- className: "markdown-body",
85
+ className: markdownStyles['markdown-body'],
63
86
  skipHtml: properties.skipHtml,
64
87
  remarkPlugins: [
65
88
  gfm
66
89
  ],
67
90
  components: components
68
91
  }, properties.content));
69
- MarkdownWithCode.defaultProps = blockDefaultProps;
70
- MarkdownWithCode.meta = {
71
- category: 'container',
72
- icons: [],
73
- styles: []
74
92
  };
75
- export default MarkdownWithCode;
93
+ export default withBlockDefaults(MarkdownWithCode);
@@ -13,7 +13,12 @@
13
13
  See the License for the specific language governing permissions and
14
14
  limitations under the License.
15
15
  */ export default {
16
- type: 'object',
16
+ category: 'display',
17
+ icons: [],
18
+ valueType: null,
19
+ cssKeys: {
20
+ element: 'The MarkdownWithCode element.'
21
+ },
17
22
  properties: {
18
23
  type: 'object',
19
24
  additionalProperties: false,
@@ -29,13 +34,6 @@
29
34
  type: 'boolean',
30
35
  default: false,
31
36
  description: 'By default, HTML in markdown is escaped. When true all HTML code in the markdown will not be rendered.'
32
- },
33
- style: {
34
- type: 'object',
35
- description: 'Style to apply to Markdown div.',
36
- docs: {
37
- displayType: 'yaml'
38
- }
39
37
  }
40
38
  }
41
39
  }
@@ -0,0 +1,16 @@
1
+ @layer components {
2
+ .markdown-default-code pre {
3
+ background-color: var(--ant-color-bg-layout);
4
+ padding: 0.5em;
5
+ word-wrap: normal;
6
+ }
7
+
8
+ .markdown-default-code pre > code {
9
+ background: transparent;
10
+ border: 0;
11
+ margin: 0;
12
+ padding: 0;
13
+ white-space: pre;
14
+ word-break: normal;
15
+ }
16
+ }
@@ -12,6 +12,6 @@
12
12
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
13
  See the License for the specific language governing permissions and
14
14
  limitations under the License.
15
- */ export { default as DangerousMarkdown } from './blocks/DangerousMarkdown/schema.js';
16
- export { default as Markdown } from './blocks/Markdown/schema.js';
17
- export { default as MarkdownWithCode } from './blocks/MarkdownWithCode/schema.js';
15
+ */ export { default as DangerousMarkdown } from './blocks/DangerousMarkdown/meta.js';
16
+ export { default as Markdown } from './blocks/Markdown/meta.js';
17
+ export { default as MarkdownWithCode } from './blocks/MarkdownWithCode/meta.js';
@@ -0,0 +1,336 @@
1
+ @layer components {
2
+ .markdown-body a:focus {
3
+ outline: none;
4
+ }
5
+
6
+ .markdown-body h1:hover a,
7
+ .markdown-body h2:hover a,
8
+ .markdown-body h3:hover a,
9
+ .markdown-body h4:hover a,
10
+ .markdown-body h5:hover a,
11
+ .markdown-body h6:hover a {
12
+ text-decoration: none;
13
+ color: var(--ant-color-text);
14
+ }
15
+
16
+ .markdown-body {
17
+ -ms-text-size-adjust: 100%;
18
+ -webkit-text-size-adjust: 100%;
19
+ word-wrap: break-word;
20
+ font-family: var(--ant-font-family);
21
+ color: var(--ant-color-text);
22
+ line-height: var(--ant-line-height);
23
+ }
24
+
25
+ .markdown-body details {
26
+ display: block;
27
+ }
28
+
29
+ .markdown-body summary {
30
+ display: list-item;
31
+ }
32
+
33
+ .markdown-body a {
34
+ background-color: transparent;
35
+ color: var(--ant-color-link);
36
+ text-decoration: var(--ant-link-decoration);
37
+ }
38
+
39
+ .markdown-body a:hover {
40
+ outline-width: 0;
41
+ color: var(--ant-color-link-hover);
42
+ text-decoration: var(--ant-link-hover-decoration);
43
+ }
44
+
45
+ .markdown-body a:active {
46
+ outline-width: 0;
47
+ color: var(--ant-color-link-active);
48
+ }
49
+
50
+ .markdown-body strong {
51
+ font-weight: var(--ant-font-weight-strong);
52
+ }
53
+
54
+ .markdown-body img {
55
+ border-style: none;
56
+ }
57
+
58
+ .markdown-body code,
59
+ .markdown-body kbd,
60
+ .markdown-body pre {
61
+ font-family: var(--ant-font-family-code);
62
+ font-size: var(--ant-font-size);
63
+ }
64
+
65
+ .markdown-body code {
66
+ background-color: var(--ant-color-bg-layout);
67
+ border-radius: var(--ant-border-radius-sm);
68
+ }
69
+
70
+ .markdown-body pre {
71
+ margin-bottom: 1em;
72
+ }
73
+
74
+ .markdown-body hr {
75
+ box-sizing: content-box;
76
+ background: transparent;
77
+ border: 0;
78
+ border-bottom: 1px solid var(--ant-color-split);
79
+ height: 0;
80
+ margin: 1em 0;
81
+ overflow: hidden;
82
+ }
83
+
84
+ .markdown-body hr:before {
85
+ content: '';
86
+ display: table;
87
+ }
88
+
89
+ .markdown-body hr:after {
90
+ clear: both;
91
+ content: '';
92
+ display: table;
93
+ }
94
+
95
+ .markdown-body * {
96
+ box-sizing: border-box;
97
+ }
98
+
99
+ .markdown-body td,
100
+ .markdown-body th {
101
+ padding: 0;
102
+ }
103
+
104
+ .markdown-body details summary {
105
+ cursor: pointer;
106
+ }
107
+
108
+ .markdown-body blockquote {
109
+ margin: 0;
110
+ }
111
+
112
+ .markdown-body ol,
113
+ .markdown-body ul {
114
+ margin-bottom: 0;
115
+ margin-top: 0;
116
+ padding-left: 0;
117
+ }
118
+
119
+ .markdown-body ol ol,
120
+ .markdown-body ul ol {
121
+ list-style-type: lower-roman;
122
+ }
123
+
124
+ .markdown-body ol ol ol,
125
+ .markdown-body ol ul ol,
126
+ .markdown-body ul ol ol,
127
+ .markdown-body ul ul ol {
128
+ list-style-type: lower-alpha;
129
+ }
130
+
131
+ .markdown-body dd {
132
+ margin-left: 0;
133
+ }
134
+
135
+ .markdown-body input::-webkit-inner-spin-button,
136
+ .markdown-body input::-webkit-outer-spin-button {
137
+ -webkit-appearance: none;
138
+ appearance: none;
139
+ margin: 0;
140
+ }
141
+
142
+ .markdown-body:before {
143
+ content: '';
144
+ display: table;
145
+ }
146
+
147
+ .markdown-body:after {
148
+ clear: both;
149
+ content: '';
150
+ display: table;
151
+ }
152
+
153
+ .markdown-body > :first-child {
154
+ margin-top: 0 !important;
155
+ }
156
+
157
+ .markdown-body > :last-child {
158
+ margin-bottom: 0 !important;
159
+ }
160
+
161
+ .markdown-body a:not([href]) {
162
+ color: inherit;
163
+ text-decoration: none;
164
+ }
165
+
166
+ .markdown-body blockquote,
167
+ .markdown-body dl,
168
+ .markdown-body ol,
169
+ .markdown-body p,
170
+ .markdown-body pre,
171
+ .markdown-body table,
172
+ .markdown-body ul {
173
+ margin-bottom: 1em;
174
+ margin-top: 0;
175
+ }
176
+
177
+ .markdown-body blockquote {
178
+ border-left: 0.25em solid var(--ant-color-border-secondary);
179
+ color: var(--ant-color-text-secondary);
180
+ padding: 0 1em;
181
+ }
182
+
183
+ .markdown-body blockquote > :first-child {
184
+ margin-top: 0;
185
+ }
186
+
187
+ .markdown-body blockquote > :last-child {
188
+ margin-bottom: 0;
189
+ }
190
+
191
+ .markdown-body kbd {
192
+ background-color: var(--ant-color-fill-quaternary);
193
+ border: 1px solid var(--ant-color-border);
194
+ border-bottom-color: var(--ant-color-border);
195
+ border-radius: var(--ant-border-radius-sm);
196
+ box-shadow: inset 0 -1px 0 var(--ant-color-border);
197
+ color: var(--ant-color-text);
198
+ display: inline-block;
199
+ font-family: var(--ant-font-family-code);
200
+ line-height: 11px;
201
+ padding: 3px 5px;
202
+ vertical-align: middle;
203
+ }
204
+
205
+ .markdown-body h1,
206
+ .markdown-body h2 {
207
+ border-bottom: 1px solid var(--ant-color-split);
208
+ padding-bottom: 0.3em;
209
+ }
210
+
211
+ .markdown-body h1 {
212
+ font-size: var(--ant-font-size-heading-1);
213
+ }
214
+
215
+ .markdown-body h2 {
216
+ font-size: var(--ant-font-size-heading-2);
217
+ }
218
+
219
+ .markdown-body h3 {
220
+ font-size: var(--ant-font-size-heading-3);
221
+ }
222
+
223
+ .markdown-body h4 {
224
+ font-size: var(--ant-font-size-heading-4);
225
+ }
226
+
227
+ .markdown-body h5 {
228
+ font-size: var(--ant-font-size-heading-5);
229
+ }
230
+
231
+ .markdown-body h6 {
232
+ color: var(--ant-color-text-secondary);
233
+ font-size: var(--ant-font-size);
234
+ }
235
+
236
+ .markdown-body ol,
237
+ .markdown-body ul {
238
+ padding: 8px 0;
239
+ padding-left: 1em;
240
+ }
241
+
242
+ .markdown-body ol ol,
243
+ .markdown-body ol ul,
244
+ .markdown-body ul ol,
245
+ .markdown-body ul ul {
246
+ margin-bottom: 0;
247
+ margin-top: 0;
248
+ }
249
+
250
+ .markdown-body li {
251
+ word-wrap: break-all;
252
+ }
253
+
254
+ .markdown-body li > p {
255
+ margin-top: 1em;
256
+ }
257
+
258
+ .markdown-body li + li {
259
+ margin-top: 0.25em;
260
+ }
261
+
262
+ .markdown-body dl {
263
+ padding: 0;
264
+ }
265
+
266
+ .markdown-body dl dt {
267
+ font-size: 1em;
268
+ font-style: italic;
269
+ font-weight: var(--ant-font-weight-strong);
270
+ margin-top: 1em;
271
+ padding: 0;
272
+ }
273
+
274
+ .markdown-body dl dd {
275
+ margin-bottom: 1em;
276
+ padding: 0 1em;
277
+ }
278
+
279
+ .markdown-body table {
280
+ display: block;
281
+ overflow: auto;
282
+ width: 100%;
283
+ font-size: var(--ant-font-size);
284
+ border-collapse: collapse;
285
+ border-spacing: 0;
286
+ }
287
+
288
+ .markdown-body table th {
289
+ font-weight: var(--ant-font-weight-strong);
290
+ }
291
+
292
+ .markdown-body table td,
293
+ .markdown-body table th {
294
+ border: 1px solid var(--ant-color-border-secondary);
295
+ padding: 6px 13px;
296
+ }
297
+
298
+ .markdown-body table tr {
299
+ border-top: 1px solid var(--ant-color-border-secondary);
300
+ }
301
+
302
+ .markdown-body table tr:nth-child(2n) {
303
+ background-color: var(--ant-color-fill-alter);
304
+ }
305
+
306
+ .markdown-body img {
307
+ box-sizing: content-box;
308
+ max-width: 100%;
309
+ }
310
+
311
+ .markdown-body img[align='right'] {
312
+ padding-left: 20px;
313
+ }
314
+
315
+ .markdown-body img[align='left'] {
316
+ padding-right: 20px;
317
+ }
318
+
319
+ .markdown-body code {
320
+ margin: 0;
321
+ padding: 0.2em 0.4em;
322
+ }
323
+
324
+ .markdown-body pre code {
325
+ border-radius: var(--ant-border-radius-sm);
326
+ background-color: transparent;
327
+ border: 0;
328
+ display: inline;
329
+ line-height: inherit;
330
+ margin: 0;
331
+ max-width: auto;
332
+ overflow: visible;
333
+ padding: 0;
334
+ word-wrap: normal;
335
+ }
336
+ }
package/dist/types.js CHANGED
@@ -1,4 +1,4 @@
1
- /* eslint-disable import/namespace */ /*
1
+ /*
2
2
  Copyright 2020-2026 Lowdefy, Inc
3
3
 
4
4
  Licensed under the Apache License, Version 2.0 (the "License");
@@ -12,20 +12,6 @@
12
12
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
13
  See the License for the specific language governing permissions and
14
14
  limitations under the License.
15
- */ import * as blocks from './blocks.js';
16
- const icons = {};
17
- const styles = {};
18
- Object.keys(blocks).forEach((block)=>{
19
- icons[block] = blocks[block].meta.icons ?? [];
20
- styles[block] = blocks[block].meta.styles ?? [];
21
- });
22
- export default {
23
- blocks: Object.keys(blocks),
24
- icons,
25
- styles: {
26
- default: [
27
- 'style.less'
28
- ],
29
- ...styles
30
- }
31
- };
15
+ */ import { extractBlockTypes } from '@lowdefy/block-utils';
16
+ import * as metas from './metas.js';
17
+ export default extractBlockTypes(metas);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lowdefy/blocks-markdown",
3
- "version": "4.7.3",
3
+ "version": "5.0.0",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Lowdefy markdown blocks.",
6
6
  "homepage": "https://lowdefy.com",
@@ -32,36 +32,38 @@
32
32
  "exports": {
33
33
  "./*": "./dist/*",
34
34
  "./blocks": "./dist/blocks.js",
35
+ "./metas": "./dist/metas.js",
35
36
  "./e2e": "./dist/e2e.js",
36
- "./schemas": "./dist/schemas.js",
37
37
  "./types": "./dist/types.js"
38
38
  },
39
39
  "files": [
40
40
  "dist/*"
41
41
  ],
42
42
  "dependencies": {
43
- "@lowdefy/block-utils": "4.7.3",
43
+ "@lowdefy/block-utils": "5.0.0",
44
44
  "dompurify": "3.2.4",
45
- "react": "18.2.0",
46
- "react-dom": "18.2.0",
47
45
  "react-markdown": "8.0.7",
48
46
  "react-syntax-highlighter": "15.5.0",
49
47
  "rehype-raw": "6.1.1",
50
48
  "remark-gfm": "3.0.0"
51
49
  },
50
+ "peerDependencies": {
51
+ "react": ">=18",
52
+ "react-dom": ">=18"
53
+ },
52
54
  "devDependencies": {
53
- "@lowdefy/block-dev-e2e": "4.7.3",
54
- "@lowdefy/e2e-utils": "4.7.3",
55
+ "@lowdefy/block-dev-e2e": "5.0.0",
56
+ "@lowdefy/e2e-utils": "5.0.0",
55
57
  "@playwright/test": "1.50.1",
56
- "@swc/cli": "0.1.63",
57
- "@swc/core": "1.3.99",
58
+ "@swc/cli": "0.8.0",
59
+ "@swc/core": "1.15.18",
58
60
  "copyfiles": "2.4.1"
59
61
  },
60
62
  "publishConfig": {
61
63
  "access": "public"
62
64
  },
63
65
  "scripts": {
64
- "build": "swc src --out-dir dist --config-file ../../../../.swcrc --delete-dir-on-start && pnpm copyfiles",
66
+ "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
65
67
  "clean": "rm -rf dist",
66
68
  "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
67
69
  "e2e": "playwright test --config e2e/playwright.config.js",
@@ -1,30 +0,0 @@
1
- {
2
- "type": "object",
3
- "properties": {
4
- "type": "object",
5
- "additionalProperties": false,
6
- "properties": {
7
- "content": {
8
- "type": "string",
9
- "description": "Content in markdown format.",
10
- "docs": {
11
- "displayType": "text-area"
12
- }
13
- },
14
- "DOMPurifyOptions": {
15
- "type": "object",
16
- "description": "Customize DOMPurify options. Options are only applied when the block is mounted, thus any parsed settings is only applied at first render.",
17
- "docs": {
18
- "displayType": "yaml"
19
- }
20
- },
21
- "style": {
22
- "type": "object",
23
- "description": "Style to apply to Markdown div.",
24
- "docs": {
25
- "displayType": "yaml"
26
- }
27
- }
28
- }
29
- }
30
- }
@@ -1,28 +0,0 @@
1
- {
2
- "type": "object",
3
- "properties": {
4
- "type": "object",
5
- "additionalProperties": false,
6
- "properties": {
7
- "content": {
8
- "type": "string",
9
- "description": "Content in markdown format.",
10
- "docs": {
11
- "displayType": "text-area"
12
- }
13
- },
14
- "skipHtml": {
15
- "type": "boolean",
16
- "default": false,
17
- "description": "By default, HTML in markdown is escaped. When true all HTML code in the markdown will not be rendered."
18
- },
19
- "style": {
20
- "type": "object",
21
- "description": "Style to apply to Markdown div.",
22
- "docs": {
23
- "displayType": "yaml"
24
- }
25
- }
26
- }
27
- }
28
- }
@@ -1,28 +0,0 @@
1
- {
2
- "type": "object",
3
- "properties": {
4
- "type": "object",
5
- "additionalProperties": false,
6
- "properties": {
7
- "content": {
8
- "type": "string",
9
- "description": "Content in markdown format.",
10
- "docs": {
11
- "displayType": "text-area"
12
- }
13
- },
14
- "skipHtml": {
15
- "type": "boolean",
16
- "default": false,
17
- "description": "By default, HTML in markdown is escaped. When true all HTML code in the markdown will not be rendered."
18
- },
19
- "style": {
20
- "type": "object",
21
- "description": "Style to apply to Markdown div.",
22
- "docs": {
23
- "displayType": "yaml"
24
- }
25
- }
26
- }
27
- }
28
- }
@@ -1,14 +0,0 @@
1
- .markdown-default-code pre {
2
- background-color: @background-color-base;
3
- padding: 0.5em;
4
- word-wrap: normal;
5
- }
6
-
7
- .markdown-default-code pre > code {
8
- background: transparent;
9
- border: 0;
10
- margin: 0;
11
- padding: 0;
12
- white-space: pre;
13
- word-break: normal;
14
- }
package/dist/style.less DELETED
@@ -1,364 +0,0 @@
1
- .markdown-body a:focus {
2
- outline: none;
3
- }
4
-
5
- .markdown-body h1:hover a,
6
- .markdown-body h2:hover a .markdown-body h3:hover a,
7
- .markdown-body h4:hover a,
8
- .markdown-body h5:hover a,
9
- .markdown-body h6:hover a {
10
- text-decoration: none;
11
- color: @heading-color;
12
- }
13
-
14
- .markdown-body {
15
- -ms-text-size-adjust: 100%;
16
- -webkit-text-size-adjust: 100%;
17
- word-wrap: break-word;
18
- font-family: @font-family;
19
- color: @text-color;
20
- line-height: @line-height-base;
21
- }
22
-
23
- .markdown-body details {
24
- display: block;
25
- }
26
-
27
- .markdown-body summary {
28
- display: list-item;
29
- }
30
-
31
- .markdown-body a {
32
- background-color: transparent;
33
- }
34
-
35
- .markdown-body a:active,
36
- .markdown-body a:hover {
37
- outline-width: 0;
38
- }
39
-
40
- .markdown-body strong {
41
- font-weight: inherit;
42
- font-weight: bolder;
43
- }
44
-
45
- .markdown-body img {
46
- border-style: none;
47
- }
48
-
49
- .markdown-body code,
50
- .markdown-body kbd,
51
- .markdown-body pre {
52
- font-family: @code-family;
53
- font-size: @font-size-base;
54
- }
55
-
56
- .markdown-body code {
57
- background-color: @background-color-base;
58
- }
59
-
60
- .markdown-body pre {
61
- margin-bottom: 1em;
62
- }
63
-
64
- .markdown-body hr {
65
- box-sizing: content-box;
66
- height: 0;
67
- overflow: visible;
68
- }
69
-
70
- .markdown-body * {
71
- box-sizing: border-box;
72
- }
73
-
74
- .markdown-body a {
75
- text-decoration: none;
76
- }
77
-
78
- .markdown-body a:hover {
79
- text-decoration: underline;
80
- }
81
-
82
- .markdown-body strong {
83
- font-weight: 600;
84
- }
85
-
86
- .markdown-body hr {
87
- background: transparent;
88
- border: 0;
89
- border-bottom: 1px solid @divider-color;
90
- height: 0;
91
- margin: 1em 0;
92
- overflow: hidden;
93
- }
94
-
95
- .markdown-body hr:before {
96
- content: '';
97
- display: table;
98
- }
99
-
100
- .markdown-body hr:after {
101
- clear: both;
102
- content: '';
103
- display: table;
104
- }
105
-
106
- .markdown-body td,
107
- .markdown-body th {
108
- padding: 0;
109
- }
110
-
111
- .markdown-body details summary {
112
- cursor: pointer;
113
- }
114
-
115
- .markdown-body blockquote {
116
- margin: 0;
117
- }
118
-
119
- .markdown-body ol,
120
- .markdown-body ul {
121
- margin-bottom: 0;
122
- margin-top: 0;
123
- padding-left: 0;
124
- }
125
-
126
- .markdown-body ol ol,
127
- .markdown-body ul ol {
128
- list-style-type: lower-roman;
129
- }
130
-
131
- .markdown-body ol ol ol,
132
- .markdown-body ol ul ol,
133
- .markdown-body ul ol ol,
134
- .markdown-body ul ul ol {
135
- list-style-type: lower-alpha;
136
- }
137
-
138
- .markdown-body dd {
139
- margin-left: 0;
140
- }
141
-
142
- .markdown-body input::-webkit-inner-spin-button,
143
- .markdown-body input::-webkit-outer-spin-button {
144
- -webkit-appearance: none;
145
- appearance: none;
146
- margin: 0;
147
- }
148
-
149
- .markdown-body:before {
150
- content: '';
151
- display: table;
152
- }
153
-
154
- .markdown-body:after {
155
- clear: both;
156
- content: '';
157
- display: table;
158
- }
159
-
160
- .markdown-body > :first-child {
161
- margin-top: 0 !important;
162
- }
163
-
164
- .markdown-body > :last-child {
165
- margin-bottom: 0 !important;
166
- }
167
-
168
- .markdown-body a:not([href]) {
169
- color: inherit;
170
- text-decoration: none;
171
- }
172
-
173
- .markdown-body blockquote,
174
- .markdown-body dl,
175
- .markdown-body ol,
176
- .markdown-body p,
177
- .markdown-body pre,
178
- .markdown-body table,
179
- .markdown-body ul {
180
- margin-bottom: 1em;
181
- margin-top: 0;
182
- }
183
-
184
- .markdown-body hr {
185
- background: transparent;
186
- border: 0;
187
- border-bottom: 1px solid @divider-color;
188
- height: 0;
189
- margin: 1em 0;
190
- overflow: hidden;
191
- }
192
-
193
- .markdown-body blockquote {
194
- border-left: 0.25em solid #dfe2e5;
195
- color: @text-color-secondary;
196
- padding: 0 1em;
197
- }
198
-
199
- .markdown-body blockquote > :first-child {
200
- margin-top: 0;
201
- }
202
-
203
- .markdown-body blockquote > :last-child {
204
- margin-bottom: 0;
205
- }
206
-
207
- .markdown-body kbd {
208
- background-color: #fafbfc;
209
- border: 1px solid #c6cbd1;
210
- border-bottom-color: #959da5;
211
- border-radius: 3px;
212
- box-shadow: inset 0 -1px 0 #959da5;
213
- color: #444d56;
214
- display: inline-block;
215
- line-height: 11px;
216
- padding: 3px 5px;
217
- vertical-align: middle;
218
- }
219
-
220
-
221
- .markdown-body h1,
222
- .markdown-body h2 {
223
- border-bottom: 1px solid @divider-color;
224
- padding-bottom: 0.3em;
225
- }
226
-
227
- .markdown-body h1 {
228
- font-size: @heading-1-size;
229
- }
230
-
231
- .markdown-body h2 {
232
- font-size: @heading-2-size;
233
- }
234
-
235
- .markdown-body h3 {
236
- font-size: @heading-3-size;
237
- }
238
-
239
- .markdown-body h4 {
240
- font-size: @heading-4-size;
241
- }
242
-
243
- .markdown-body h5 {
244
- font-size: @heading-5-size;
245
- }
246
-
247
- .markdown-body h6 {
248
- color: @text-color-secondary;
249
- font-size: @font-size-base;
250
- }
251
-
252
- .markdown-body ol,
253
- .markdown-body ul {
254
- padding: @list-item-padding;
255
- padding-left: 1em;
256
- }
257
-
258
- .markdown-body ol ol,
259
- .markdown-body ol ul,
260
- .markdown-body ul ol,
261
- .markdown-body ul ul {
262
- margin-bottom: 0;
263
- margin-top: 0;
264
- }
265
-
266
- .markdown-body li {
267
- word-wrap: break-all;
268
- }
269
-
270
- .markdown-body li > p {
271
- margin-top: 1em;
272
- }
273
-
274
- .markdown-body li + li {
275
- margin-top: 0.25em;
276
- }
277
-
278
- .markdown-body dl {
279
- padding: 0;
280
- }
281
-
282
- .markdown-body dl dt {
283
- font-size: 1em;
284
- font-style: italic;
285
- font-weight: 600;
286
- margin-top: 1em;
287
- padding: 0;
288
- }
289
-
290
- .markdown-body dl dd {
291
- margin-bottom: 1em;
292
- padding: 0 1em;
293
- }
294
-
295
- .markdown-body table {
296
- display: block;
297
- overflow: auto;
298
- width: 100%;
299
- font-size: @table-font-size;
300
- border-collapse: collapse;
301
- border-spacing: 0;
302
- }
303
-
304
- .markdown-body table th {
305
- font-weight: 600;
306
- }
307
-
308
- .markdown-body table td,
309
- .markdown-body table th {
310
- border: 1px solid @table-border-color;
311
- padding: 6px 13px;
312
- }
313
-
314
- .markdown-body table tr {
315
- border-top: 1px solid @table-border-color;
316
- }
317
-
318
- .markdown-body table tr:nth-child(2n) {
319
- background-color: lighten(@table-border-color, 2%);
320
- }
321
-
322
- .markdown-body img {
323
- box-sizing: content-box;
324
- max-width: 100%;
325
- }
326
-
327
- .markdown-body img[align='right'] {
328
- padding-left: 20px;
329
- }
330
-
331
- .markdown-body img[align='left'] {
332
- padding-right: 20px;
333
- }
334
-
335
- .markdown-body code {
336
- margin: 0;
337
- padding: 0.2em 0.4em;
338
- }
339
-
340
- .markdown-body pre code {
341
- border-radius: 3px;
342
- background-color: transparent;
343
- border: 0;
344
- display: inline;
345
- line-height: inherit;
346
- margin: 0;
347
- max-width: auto;
348
- overflow: visible;
349
- padding: 0;
350
- word-wrap: normal;
351
- }
352
-
353
- .markdown-body kbd {
354
- background-color: @divider-color;
355
- border: 1px solid #d1d5da;
356
- border-bottom-color: darken(@divider-color, 2%);
357
- border-radius: 3px;
358
- box-shadow: inset 0 -1px 0 darken(@divider-color, 2%);
359
- color: #444d56;
360
- display: inline-block;
361
- font: @code-family;
362
- padding: 3px 5px;
363
- vertical-align: middle;
364
- }