Add fenced blocks

Author: JelteMX

package.json

@@ -1,7 +1,7 @@
 {
   "name": "texttemplateelement",
   "widgetName": "TextTemplateElement",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "My widget description",
   "copyright": "2020 Mendix Technology BV",
   "author": "Jelte Lagendijk <[email protected]>",
@@ -37,6 +37,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "react-markdown": "^4.3.1",
+    "remark-fenced-divs": "^1.1.1",
     "remark-shortcodes": "^0.3.1"
   }
 }

src/TextTemplateElement.tsx

@@ -4,13 +4,14 @@ import classNames from "classnames";
 import ReactMarkdown from "react-markdown/with-html";
 
 const shortcodes = require("remark-shortcodes");
+const fenced = require("remark-fenced-divs");
 
 import { TextTemplateElementContainerProps } from "../typings/TextTemplateElementProps";
 
 import "./ui/TextTemplateElement.scss";
 
 import { filteredList } from "./util/react-markdown";
-import { getRenderers } from "./util/shortcodes";
+import { getRenderers } from "./util/renderers";
 import { replaceImages, replaceFile } from "./util/replacer";
 import ErrorBoundary from "./components/ErrorBoundary";
 
@@ -60,7 +61,7 @@ const TextTemplateElement: FunctionComponent<TextTemplateElementContainerProps>
                     includeNodeIndex={optIncludeNodeIndex}
                     unwrapDisallowed={optUnwrapDisallowed}
                     disallowedTypes={disallowed}
-                    plugins={[shortcodes]}
+                    plugins={[shortcodes, fenced]}
                     renderers={getRenderers({ contentRender: dataContent })}
                 />
             </ErrorBoundary>

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="TextTemplateElement" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="TextTemplateElement" version="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="TextTemplateElement.xml"/>
         </widgetFiles>

src/util/shortcodes.tsx renamed to src/util/renderers.tsx

@@ -1,11 +1,12 @@
 import { SFC, createElement, ComponentType, ReactElement, ReactNode } from "react";
+import classNames from "classnames";
 
 export interface RendererProps<TProps = any> {
     readonly identifier: string;
     readonly attributes: TProps;
 }
 
-export type Renderer = SFC<RendererProps>;
+export type Renderer = SFC<RendererProps> | SFC<any>;
 export type Renderers = { [key: string]: Renderer };
 
 const nodesToComponents: Record<string, ComponentType<any>> = {};
@@ -23,12 +24,24 @@ const shortcodeRenderer = (getRenderProps: GetRendersProps) => {
     };
 };
 
+const fencedDiv = (props: { data: any; children: ReactElement }): ReactElement | null => {
+    const divProps = props.data.hProperties;
+    const className = classNames(divProps.className);
+    const children = props.children;
+    return (
+        <div {...divProps} className={className}>
+            {children}
+        </div>
+    );
+};
+
 export interface GetRendersProps {
     contentRender?: ReactNode;
 }
 
 export const getRenderers = (props: GetRendersProps): Renderers => {
     return {
-        shortcode: shortcodeRenderer(props)
+        shortcode: shortcodeRenderer(props),
+        fencedDiv
     };
 };

yarn.lock

@@ -9825,6 +9825,11 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
+remark-fenced-divs@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/remark-fenced-divs/-/remark-fenced-divs-1.1.1.tgz#99970e9dcf47903011de002e7033104a9a107cb5"
+  integrity sha512-VydiaIES34Ywlzofwnv9nQy0OmfXrMwl4zKtHV0GAhFDadoxD9Ufhg1XiC3xfZJXj/0F9cPt5TcSPOLx9YZoJw==
+
 remark-parse@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"