wix · Inbal-Tish · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/docuilib/package.json b/docuilib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",
@@ -27,8 +27,10 @@
     "docusaurus-plugin-sass": "^0.2.1",
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^2.1.0",
+    "react-html-parser": "^2.0.2",
     "react-native-web": "^0.19.12",
     "sass": "^1.39.0",
+    "showdown": "^2.1.0",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

diff --git a/docuilib/src/components/pageComponents/ContentItem.tsx b/docuilib/src/components/pageComponents/ContentItem.tsx
@@ -9,8 +9,8 @@ export const ContentItem = ({item}) => {
     return <iframe width={'100%'} height={height} src={value}/>;
   };
 
-  const getImage = value => {
-    return <img src={value} style={{display: 'block'}}/>;
+  const getImage = (value, style = undefined) => {
+    return <img src={value} style={{display: 'block', ...style}}/>;
   };
 
   const value = item.value;
@@ -22,6 +22,8 @@ export const ContentItem = ({item}) => {
       } else {
         return getImage(value);
       }
+    } else if (typeof value === 'object' && value.source) {
+      return getImage(value.source, value.style);
     }
   }
 };
diff --git a/docuilib/src/components/pageComponents/SectionHeader.tsx b/docuilib/src/components/pageComponents/SectionHeader.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import '../ComponentPage.module.scss';
+import showdownMarkdown from 'showdown';
+import ReactHtmlParser from 'react-html-parser';
 
 export const SectionHeader = ({section, component}) => {
   const {title, description, type} = section;
@@ -44,6 +46,20 @@ export const SectionHeader = ({section, component}) => {
 
   const desColor = getDescriptionColor(type);
 
+  const markdownConverter = useMemo(() => {
+    return new showdownMarkdown.Converter();
+  }, []);
+
+  const _description = useMemo(() => {
+    if (description?.startsWith('markdown:')) {
+      return ReactHtmlParser(markdownConverter.makeHtml(description.replace('markdown:', '')));
+    } else if (description?.startsWith('html:')) {
+      return ReactHtmlParser(description.replace('html:', ''));
+    } else {
+      return description;
+    }
+  }, [markdownConverter, description]);
+
   if (!title && !description) {
     return;
   }
@@ -70,7 +86,7 @@ export const SectionHeader = ({section, component}) => {
           style={{display: 'flex', flexDirection: 'column', flex: 2, alignContent: 'start', margin: '0 40px 40px 0'}}
         >
           {title && getTitle(type, title)}
-          {description && <span style={{fontSize: '16px', fontWeight: '400', color: desColor}}>{description}</span>}
+          {description && <span style={{fontSize: '16px', fontWeight: '400', color: desColor}}>{_description}</span>}
         </div>
       );
   }

diff --git a/docuilib/src/index.ts b/docuilib/src/index.ts
@@ -1,2 +1,3 @@
 export {default as ReactLiveScope} from './theme/ReactLiveScope';
-export * as PageComponents from './components/pageComponents';
+import {Banner, ListSection, PropsList, Section, TableSection, Usage} from './components/pageComponents';
+export {Banner, ListSection, PropsList, Section, TableSection, Usage};
diff --git a/docuilib/yarn.lock b/docuilib/yarn.lock
@@ -3437,6 +3437,11 @@ commander@^8.3.0:
   resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+commander@^9.0.0:
+  version "9.5.0"
+  resolved "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 common-path-prefix@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
@@ -4072,7 +4077,7 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
@@ -4082,6 +4087,13 @@ domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
@@ -4096,7 +4108,7 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
-domutils@^1.7.0:
+domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
   integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
@@ -4207,6 +4219,11 @@ enhanced-resolve@^5.17.1:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+entities@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -5304,6 +5321,18 @@ html-webpack-plugin@^5.5.3:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+htmlparser2@^3.9.0:
+  version "3.10.1"
+  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -7976,6 +8005,13 @@ react-helmet-async@^1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-html-parser@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz#6dbe1ddd2cebc1b34ca15215158021db5fc5685e"
+  integrity sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==
+  dependencies:
+    htmlparser2 "^3.9.0"
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8136,7 +8172,7 @@ readable-stream@^2.0.1:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.0.6:
+readable-stream@^3.0.6, readable-stream@^3.1.1:
   version "3.6.2"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
   integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
@@ -8757,6 +8793,13 @@ shelljs@^0.8.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+showdown@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
+  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
+  dependencies:
+    commander "^9.0.0"
+
 side-channel@^1.0.4, side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"

diff --git a/src/components/test.api.json b/src/components/test.api.json
@@ -165,6 +165,16 @@
                 ]
               }
             ]
+          },
+          {
+            "type": "section",
+            "title": "Markdown support",
+            "description": "markdown:##Title\n\nThis is a markdown content\n\n With a list:\n- item 1\n- item 2"
+          },
+          {
+            "type": "section",
+            "title": "HTML support",
+            "description": "html:<h2>Title</h2><p>This is a html content</p><ul><li>item 1</li><li>item 2</li></ul>"
           }
         ]
       },