added markdown toggle

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 54c5f5d6b4c85a7a4a590ce26915a8c2b3f81c9e..d57f8b683b35c430cf8d607625626794757156a5 100644 (file)
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -4,10 +4,12 @@ import './Settings.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import settings from '../../../client/state/settings';
+import { toggleMarkdown } from '../../../client/action/settings';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Button from '../../atoms/button/Button';
+import Toggle from '../../atoms/button/Toggle';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
 
 import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
@@ -22,6 +24,8 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
 
 function AppearanceSection() {
+  const [, updateState] = useState({});
+
   return (
     <div className="settings-content">
       <SettingTile
@@ -39,6 +43,16 @@ function AppearanceSection() {
           />
         )}
       />
+      <SettingTile
+        title="Markdown formatting"
+        options={(
+          <Toggle
+            isActive={settings.isMarkdown}
+            onToggle={(isMarkdown) => { toggleMarkdown(isMarkdown); updateState({}); }}
+          />
+        )}
+        content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
+      />
     </div>
   );
 }