fix Markdown component to work with checkbox inputs

renderer/src/builtins/settings/components/Settings.jsx

@@ -3,7 +3,6 @@ import { ContentSidebar, Section } from '@vizality/components/dashboard';
 import { SelectInput } from '@vizality/components/settings';
 import React, { memo, useState } from 'react';
 import { getModule } from '@vizality/webpack';
-import { Settings } from '@vizality/api';
 
 import Notifications from './Notifications';
 import Appearance from './Appearance';
@@ -100,8 +99,8 @@ const Body = memo(({ props, query, section }) => {
 export default memo(({ section, search, ...other }) => {
   const [ _section ] = useState(section || 'general');
   const { marginBottom20 } = getModule('marginBottom20', 'marginBottom40');
-  const [ searchSettings, setSearchSettings ] = Settings.useSetting('searchSettings', 'all');
-  const [ settingsSidebarCollapsed, setSettingsSidebarCollapsed ] = Settings.useSetting('settingsSidebarCollapsed', false);
+  const [ searchSettings, setSearchSettings ] = $vz.api.settings.useSetting('searchSettings', 'all');
+  const [ settingsSidebarCollapsed, setSettingsSidebarCollapsed ] = $vz.api.settings.useSetting('settingsSidebarCollapsed', false);
   const [ query, setQuery ] = useState(search || '');
 
   /**

renderer/src/modules/components/Markdown.jsx

@@ -9,7 +9,7 @@ import { existsSync, promises } from 'fs';
 import Markdown from 'react-markdown';
 import gfm from 'remark-gfm';
 
-import { CodeBlock, Icon, DeferredRender, Spinner, LazyImageZoomable, Modal, ImageModal, Anchor, ContextMenu, CheckboxItem, Flex } from '.';
+import { CodeBlock, Icon, DeferredRender, Spinner, LazyImageZoomable, Modal, ImageModal, Anchor, ContextMenu, Checkbox, Flex } from '.';
 
 const { readFile } = promises;
 const { openContextMenu, closeContextMenu } = contextMenu;
@@ -127,48 +127,52 @@ export default memo(({ source, type, addonId }) => {
       );
     },
 
-    li: ({ children, className }) => {
-      children.forEach(child => {
-        if (child?.props?.type === 'checkbox') {
-          children =
-            <CheckboxItem className='vz-markdown-checkbox' align={Flex.Align.TOP} value={Boolean(child?.props?.checked)} readOnly={child?.props?.disabled}>
-              {children[children.length - 1]}
-            </CheckboxItem>;
-        }
-      });
-      return (
-        <li className={joinClassNames('vz-markdown-li', className)}>
-          {children}
-        </li>
-      );
-    },
+    input: ({ children, checked, disabled, type }) => (
+      type === 'checkbox'
+        ? (
+          <Checkbox className='vz-markdown-checkbox' align={Flex.Align.TOP} value={!!checked} readOnly={disabled}>
+            {children && children}
+          </Checkbox>
+        )
+        : (
+          <input type={type} checked={checked} disabled={disabled} />
+        )
+    ),
 
-    a: ({ href, children }) => {
-      return <>
-        <Anchor
-          href={href}
-          className={joinClassNames('vz-markdown-link', anchor, anchorUnderlineOnHover)}
-        >
-          {children}
-        </Anchor>
-      </>;
-    },
+    li: ({ children, className }) => (
+      <li className={joinClassNames('vz-markdown-li', className)}>
+        {children}
+      </li>
+    ),
 
-    em: ({ children }) => {
-      return <em className='vz-markdown-em'>{children}</em>;
-    },
+    a: ({ href, children }) => (
+      <Anchor
+        href={href}
+        className={joinClassNames('vz-markdown-link', anchor, anchorUnderlineOnHover)}
+      >
+        {children}
+      </Anchor>
+    ),
 
-    strong: ({ children }) => {
-      return <strong className='vz-markdown-strong'>{children}</strong>;
-    },
+    em: ({ children }) => (
+      <em className='vz-markdown-em'>
+        {children}
+      </em>
+    ),
 
-    blockquote: ({ children }) => {
-      return <blockquote className='vz-markdown-blockquote'>{children}</blockquote>;
-    },
+    strong: ({ children }) => (
+      <strong className='vz-markdown-strong'>
+        {children}
+      </strong>
+    ),
 
-    hr: () => {
-      return <hr className='vz-markdown-hr' />;
-    },
+    blockquote: ({ children }) => (
+      <blockquote className='vz-markdown-blockquote'>
+        {children}
+      </blockquote>
+    ),
+
+    hr: () => <hr className='vz-markdown-hr' />,
 
     code: ({ inline, className, children }) => {
       const language = className?.match(/(language-)/)?.input?.replace('language-', '');

renderer/src/modules/components/addon/AddonListing.jsx

@@ -14,7 +14,11 @@ const AddonScreenshots = memo(({ addon }) => {
         <Image
           className='vz-image-wrapper'
           src={image}
-          onClick={() => openModal(() => <ImageModal src={addon.manifest.screenshots[index]} />)}
+          onClick={() => openModal(() => props => (
+            <Modal.Root {...props} size='dynamic'>
+              <ImageModal src={addon.manifest.screenshots[index]} />
+            </Modal.Root>
+          ))}
         />
       )}
     </div>
@@ -22,10 +26,10 @@ const AddonScreenshots = memo(({ addon }) => {
 });
 
 export default memo(({ addonId, type, section }) => {
-  const { path, url } = useRouteMatch();
-  type = type || (/(\/plugin\/)/).test(path) ? 'plugin' : (/(\/theme\/)/).test(path) ? 'theme' : 'plugin';
-  addonId = addonId || url?.replace(`/vizality/${type}/`, '').split('/')[0];
-  section = section || url?.replace(`/vizality/${type}/${addonId}/`, '') || 'overview';
+  const { params } = useRouteMatch(`/vizality/:type/:addonId/:section`);
+  type = type || params.type;
+  addonId = addonId || params.addonId;
+  section = section || params.section || 'overview';
   let addon = vizality.manager[toPlural(type)].get(addonId);
   const hasSettings = vizality.manager[toPlural(type)].hasSettings(addonId);
   const hasChangelog = vizality.manager[toPlural(type)].hasChangelog(addonId);
@@ -141,7 +145,7 @@ export default memo(({ addonId, type, section }) => {
         )}
         {hasChangelog && section === 'changelog' && (
           <Section header='Changelog' icon='more-info'>
-            {/* <Markdown source={addon.sections.changelog} /> */}
+            <Markdown source={addon.sections.changelog} />
           </Section>
         )}
       </div>

renderer/src/modules/components/addon/AddonsList/AddonsList.jsx

@@ -6,7 +6,7 @@ import { joinClassNames } from '@vizality/util/dom';
 import { getModule } from '@vizality/webpack';
 import { error } from '@vizality/util/logger';
 import { Events } from '@vizality/constants';
-import { useRouteMatch, useParams } from 'react-router';
+import { useRouteMatch } from 'react-router';
 import { Messages } from '@vizality/i18n';
 
 import SortFilterMenu from './menus/SortFilterMenu';