fix(blocks-markdown): Upgraded react markdown dependencies.

2025-03-19 15:01:06 +08:00 · 2021-12-09 19:15:32 +02:00 · 2021-12-09 19:15:32 +02:00 · 9eb7c3acbd
commit 9eb7c3acbd
parent ecdf9246ab
8 changed files with 57 additions and 48 deletions
--- 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',
--- 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",
--- 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>
    );
  }
--- 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>
 );

--- 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>
 );

--- 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: [] },
 };
--- 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,
      };
    }
--- 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"