From 9eb7c3acbd8ab4088db75637ec8f17e36289787f Mon Sep 17 00:00:00 2001
From: Sandile <sah.memela@gmail.com>
Date: Thu, 9 Dec 2021 19:15:32 +0200
Subject: [PATCH] fix(blocks-markdown): Upgraded react markdown dependencies.
---
.../build/src/scripts/generateDefaultTypes.js | 2 +-
.../blocks/blocks-markdown/package.json | 8 ++-
.../DangerousMarkdown/DangerousMarkdown.js | 9 +--
.../src/blocks/Markdown/Markdown.js | 9 ++-
.../MarkdownWithCode/MarkdownWithCode.js | 57 +++++++++----------
.../blocks/blocks-markdown/src/types.js | 14 ++---
packages/server/next.config.js | 2 +-
packages/server/package.json | 4 ++
8 files changed, 57 insertions(+), 48 deletions(-)
diff --git a/packages/build/src/scripts/generateDefaultTypes.js b/packages/build/src/scripts/generateDefaultTypes.js
index 371c6547b..7388ba4b3 100644
--- a/packages/build/src/scripts/generateDefaultTypes.js
+++ b/packages/build/src/scripts/generateDefaultTypes.js
@@ -25,7 +25,7 @@ const defaultPackages = [
// '@lowdefy/blocks-color-selectors',
'@lowdefy/blocks-echarts',
'@lowdefy/blocks-loaders',
- // '@lowdefy/blocks-markdown',
+ '@lowdefy/blocks-markdown',
'@lowdefy/connection-axios-http',
'@lowdefy/operators-change-case',
// '@lowdefy/operators-diff',
diff --git a/packages/plugins/blocks/blocks-markdown/package.json b/packages/plugins/blocks/blocks-markdown/package.json
index 9f342068c..7b766a332 100644
--- a/packages/plugins/blocks/blocks-markdown/package.json
+++ b/packages/plugins/blocks/blocks-markdown/package.json
@@ -48,11 +48,13 @@
"dependencies": {
"@lowdefy/block-utils": "4.0.0-alpha.5",
"dompurify": "2.3.3",
+ "process": "0.11.10",
"react": "18.0.0-alpha-327d5c484-20211106",
"react-dom": "18.0.0-alpha-327d5c484-20211106",
- "react-markdown": "5.0.3",
- "react-syntax-highlighter": "15.4.4",
- "remark-gfm": "1.0.0"
+ "react-markdown": "7.1.1",
+ "react-syntax-highlighter": "15.4.5",
+ "rehype-raw": "6.1.0",
+ "remark-gfm": "3.0.1"
},
"devDependencies": {
"@babel/preset-react": "7.16.0",
diff --git a/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js b/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js
index da337b624..97dc63939 100644
--- a/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js
+++ b/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js
@@ -20,6 +20,7 @@ import { blockDefaultProps } from '@lowdefy/block-utils';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
class DangerousMarkdown extends React.Component {
constructor(props) {
@@ -34,12 +35,12 @@ class DangerousMarkdown extends React.Component {
<div id={blockId} className={methods.makeCssClass(properties.style)}>
<ReactMarkdown
className="markdown-body"
- plugins={[gfm]}
+ remarkPlugins={[gfm]}
+ rehypePlugins={[rehypeRaw]}
allowDangerousHtml={true}
skipHtml={false}
- >
- {DOMPurify.sanitize(this.props.properties.content, this.DOMPurifyOptions)}
- </ReactMarkdown>
+ children={DOMPurify.sanitize(this.props.properties.content, this.DOMPurifyOptions)}
+ />
</div>
);
}
diff --git a/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js b/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js
index c609341e3..a67013491 100644
--- a/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js
+++ b/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js
@@ -22,9 +22,12 @@ import gfm from 'remark-gfm';
const Markdown = ({ blockId, properties, methods }) => (
<div id={blockId} className={methods.makeCssClass(properties.style)}>
- <ReactMarkdown className="markdown-body" plugins={[gfm]} skipHtml={properties.skipHtml}>
- {properties.content}
- </ReactMarkdown>
+ <ReactMarkdown
+ className="markdown-body"
+ skipHtml={properties.skipHtml}
+ children={properties.content}
+ remarkPlugins={[gfm]}
+ />
</div>
);
diff --git a/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js b/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js
index a3c34d2c0..96ca723a2 100644
--- a/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js
+++ b/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js
@@ -20,38 +20,38 @@ import { blockDefaultProps } from '@lowdefy/block-utils';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
-import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
-import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
-import typescript from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript';
-import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
-import java from 'react-syntax-highlighter/dist/cjs/languages/hljs/java';
-import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
-import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
-import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
-import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
-import handlebars from 'react-syntax-highlighter/dist/cjs/languages/hljs/handlebars';
+import github from 'react-syntax-highlighter/dist/esm/styles/hljs/github.js';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript.js';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript.js';
+import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python.js';
+import java from 'react-syntax-highlighter/dist/esm/languages/hljs/java.js';
+import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml.js';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json.js';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml.js';
+import markdown from 'react-syntax-highlighter/dist/esm/languages/hljs/markdown.js';
+import handlebars from 'react-syntax-highlighter/dist/esm/languages/hljs/handlebars.js';
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('js', javascript);
-SyntaxHighlighter.registerLanguage('jsx', javascript);
-SyntaxHighlighter.registerLanguage('typescript', typescript);
-SyntaxHighlighter.registerLanguage('ts', typescript);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('py', python);
-SyntaxHighlighter.registerLanguage('java', java);
-SyntaxHighlighter.registerLanguage('xml', xml);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('yaml', yaml);
-SyntaxHighlighter.registerLanguage('markdown', markdown);
SyntaxHighlighter.registerLanguage('handlebars', handlebars);
SyntaxHighlighter.registerLanguage('nunjucks', handlebars);
SyntaxHighlighter.registerLanguage('html', handlebars);
+SyntaxHighlighter.registerLanguage('java', java);
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('js', javascript);
+SyntaxHighlighter.registerLanguage('jsx', javascript);
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('markdown', markdown);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('py', python);
+SyntaxHighlighter.registerLanguage('typescript', typescript);
+SyntaxHighlighter.registerLanguage('ts', typescript);
+SyntaxHighlighter.registerLanguage('xml', xml);
+SyntaxHighlighter.registerLanguage('yaml', yaml);
const renderers = {
- code: ({ language, value }) => (
+ code: ({ language, children }) => (
<SyntaxHighlighter style={github} language={language}>
- {value}
+ {children}
</SyntaxHighlighter>
),
};
@@ -59,12 +59,11 @@ const MarkdownWithCode = ({ blockId, properties, methods }) => (
<div id={blockId} className={methods.makeCssClass(properties.style)}>
<ReactMarkdown
className="markdown-body"
- renderers={renderers}
- plugins={[gfm]}
skipHtml={properties.skipHtml}
- >
- {properties.content}
- </ReactMarkdown>
+ children={properties.content}
+ remarkPlugins={[gfm]}
+ components={renderers}
+ />
</div>
);
diff --git a/packages/plugins/blocks/blocks-markdown/src/types.js b/packages/plugins/blocks/blocks-markdown/src/types.js
index 9cbc3a1dc..f45f2e087 100644
--- a/packages/plugins/blocks/blocks-markdown/src/types.js
+++ b/packages/plugins/blocks/blocks-markdown/src/types.js
@@ -15,13 +15,13 @@
limitations under the License.
*/
-import * as blocks from './blocks.js';
+// import * as blocks from './blocks.js';
-const styles = {};
-Object.keys(blocks).forEach((block) => {
- styles[block] = blocks[block].styles || [];
-});
+// const styles = {};
+// Object.keys(blocks).forEach((block) => {
+// styles[block] = blocks[block].styles || [];
+// });
export default {
- blocks: Object.keys(blocks),
- styles: { default: ['style.less'], ...styles },
+ blocks: ['Markdown', 'MarkdownWithCode', 'DangerousMarkdown'],
+ styles: { default: ['style.less'], Markdown: [], MarkdownWithCode: [], DangerousMarkdown: [] },
};
diff --git a/packages/server/next.config.js b/packages/server/next.config.js
index 9387fd6b6..26785df7d 100644
--- a/packages/server/next.config.js
+++ b/packages/server/next.config.js
@@ -17,7 +17,7 @@ module.exports = withLess({
events: false,
fs: false,
path: false,
- process: false,
+ process: require.resolve('process/browser'),
util: false,
};
}
diff --git a/packages/server/package.json b/packages/server/package.json
index 324a69d60..c3d6a06c3 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -41,12 +41,16 @@
"dependencies": {
"@lowdefy/api": "4.0.0-alpha.5",
"@lowdefy/block-utils": "4.0.0-alpha.5",
+ "@lowdefy/blocks-antd": "4.0.0-alpha.5",
+ "@lowdefy/blocks-basic": "4.0.0-alpha.5",
+ "@lowdefy/blocks-markdown": "4.0.0-alpha.5",
"@lowdefy/engine": "4.0.0-alpha.5",
"@lowdefy/helpers": "4.0.0-alpha.5",
"@lowdefy/layout": "4.0.0-alpha.5",
"@lowdefy/operators-js": "4.0.0-alpha.5",
"next": "12.0.3",
"next-auth": "4.0.0-beta.6",
+ "process": "0.11.10",
"react": "18.0.0-alpha-327d5c484-20211106",
"react-dom": "18.0.0-alpha-327d5c484-20211106",
"react-icons": "4.3.1"