TextArea markdown

package.json

@@ -93,6 +93,7 @@
     "react-i18next": "11.18.6",
     "react-is": "18.2.0",
     "react-markdown": "^9.0.1",
+    "react-mde": "^11.5.0",
     "react-router-dom": "6.3.0",
     "remark-gfm": "^4.0.0",
     "sanitize.css": "13.0.0",

src/app/contexts/AppContext.tsx

@@ -7,10 +7,12 @@ import {
 } from 'react';
 
 export interface AppContextProviderProps {
+  isDarkMode: boolean;
   children: ReactNode;
 }
 
 export interface UseAppStoreType {
+  isDarkMode: boolean
   language: { value: string, label: string }
   setLanguage: (language: { value: string, label: string }) => void
   topicLanguage: string
@@ -20,6 +22,7 @@ export interface UseAppStoreType {
 }
 
 export const initialAppContext: UseAppStoreType = {
+  isDarkMode: false,
   language: languages[0],
   setLanguage: () => {},
   topicLanguage: i18n.language,
@@ -30,14 +33,15 @@ export const initialAppContext: UseAppStoreType = {
 
 export const AppContext = createContext<UseAppStoreType>(initialAppContext);
 
-export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.Element => {
+export const AppContextProvider = ({ isDarkMode, children }: AppContextProviderProps): JSX.Element => {
   const [language, setLanguage] = useState<{ value: string, label: string }>(languages.find((lang) => i18n.language === lang.value) ?? initialAppContext.language);
   const [topicLanguage, setTopicLanguage] = useState<string>('all');
   const [turtleMode, setTurtleMode] = useState<boolean>(initialAppContext.turtleMode);
 
   return (
     <AppContext.Provider
       value={{
+        isDarkMode,
         language,
         setLanguage,
         topicLanguage,

src/app/index.tsx

@@ -70,7 +70,7 @@ export const App: () => JSX.Element = () => {
           <meta name='description' content='foro.kiwi' />
         </Helmet>
         <I18nextProvider i18n={i18n}>
-          <AppContextProvider>
+          <AppContextProvider isDarkMode={isDarkMode}>
             <NostrContextProvider>
               <Layout>
                 <Row justify='space-around'>

src/app/pages/NewTopic/index.tsx

@@ -1,23 +1,24 @@
-import { Breadcrumb, Button, Col, Input, Row, Select, Skeleton, Typography, theme } from "antd";
+import { Breadcrumb, Button, Col, Input, Row, Select, Skeleton, Tabs, Typography, theme } from "antd";
 import Layout, { Content } from "antd/es/layout/layout"
 import { useTranslation } from "react-i18next";
 import NoteAddIcon from '@mui/icons-material/NoteAdd';
 import { useNavigate, useParams } from "react-router-dom";
-import TextArea from "antd/es/input/TextArea";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { UseNostrStoreType, NostrContext } from "app/contexts/NostrContext";
 import { NDKEvent, NDKRelaySet, filterForEventsTaggingId } from "@nostr-dev-kit/ndk";
 import { getUnixTime } from "date-fns";
 import { ActiveUser } from "app/components/ActiveUser";
 import { nip19 } from "nostr-tools";
+import ReactMde from "react-mde";
 import { AppContext, UseAppStoreType } from "app/contexts/AppContext";
 import ReactCountryFlag from "react-country-flag";
 import { languages } from "../../../constants";
+import { Markdown } from "app/components/Markdown";
 
 const { Title } = Typography;
 
 export const NewTopic: () => JSX.Element = () => {
-  const { language, setLanguage } = useContext<UseAppStoreType>(AppContext);
+  const { language, setLanguage, isDarkMode } = useContext<UseAppStoreType>(AppContext);
   const { ndk, saveTopics, forums, saveForums, getBaseRelays } = useContext<UseNostrStoreType>(NostrContext);
   const { t } = useTranslation()
   const { naddr } = useParams();
@@ -106,6 +107,27 @@ export const NewTopic: () => JSX.Element = () => {
     }
   }
 
+  const editor = (
+    <Row>
+      <Col span={24}>
+        <ReactMde
+          disablePreview
+          classes={{
+            reactMde: 'mde-box',
+            toolbar: 'mde-toolbar',
+            textArea: isDarkMode ? 'mde-textarea-dark' : 'mde-textarea-light'
+          }}
+          value={content}
+          onChange={setContent}
+        />
+      </Col>
+    </Row>
+  )
+
+  const preview = useMemo(() => (
+    <Markdown text={content ?? ''} />
+  ), [content])
+
   return (
     <Content>
       <Row justify='space-between'>
@@ -144,68 +166,84 @@ export const NewTopic: () => JSX.Element = () => {
                     </Row>
                   </Col>
                   <Col span='22'>
-                    <Row>
-                      <Title level={2}>{t('pages.newTopic.content')}</Title>
-                    </Row>
-                    <Row>
-                      <TextArea rows={10} onChange={(v) => setContent(v.target.value)} />
-                    </Row>
+                    <Tabs
+                      defaultActiveKey="editor"
+                      size="large"
+                      items={[
+                        {
+                          key: 'editor',
+                          label: t('pages.newTopic.editor'),
+                          children: editor
+                        },
+                        {
+                          key: '2',
+                          label: t('pages.newTopic.preview'),
+                          children: preview
+                        }
+                      ]}
+                    />
                   </Col>
                   <Col span='22'>
                     <Row justify="end" align="middle" gutter={[10, 0]}>
-                      <Col>
-                        <ReactCountryFlag
-                          countryCode={language.value.split('-')[1]}
-                          style={{ fontSize: 26 }}
-                        />
+                      <Col xs={0} md={2}>
+                        <Row justify="end">
+                          <ReactCountryFlag
+                            countryCode={language.value.split('-')[1]}
+                            style={{ fontSize: 26 }}
+                          />
+                        </Row>
                       </Col>
                       <Col>
-                        <Select
-                          showSearch
-                          size="large"
-                          style={{ width: 120 }}
-                          onChange={changeLanguage}
-                          defaultValue={language.value}
-                          filterOption={(input, option) =>
-                            (option?.label as string ?? '').toLowerCase().includes(input.toLowerCase())
-                          }
-                          options={languages
-                            .filter((item, index, self) =>
-                              index === self.findIndex((t) => t.label === item.label)
-                            )
-                            .map(lang => {
-                              return { ...lang, label: t(`language.${lang.label}`) }
-                            })}
-                        />
-                      </Col>
-                      <Col>
-                        <Button
-                          disabled={!content || content === '' || !title || title === ''}
-                          type="primary"
-                          htmlType="submit"
-                          size="large"
-                          icon={<NoteAddIcon />}
-                          iconPosition="end"
-                          onClick={createTopic}
-                        >
-                          {t('pages.newTopic.createTopic')}
-                        </Button>
+                        <Row justify="space-between" gutter={[10, 0]}>
+                          <Col>
+                            <Select
+                              showSearch
+                              size="large"
+                              style={{ width: 120 }}
+                              onChange={changeLanguage}
+                              defaultValue={language.value}
+                              filterOption={(input, option) =>
+                                (option?.label as string ?? '').toLowerCase().includes(input.toLowerCase())
+                              }
+                              options={languages
+                                .filter((item, index, self) =>
+                                  index === self.findIndex((t) => t.label === item.label)
+                                )
+                                .map(lang => {
+                                  return { ...lang, label: t(`language.${lang.label}`) }
+                                })}
+                            />
+                          </Col>
+                          <Col>
+                            <Button
+                              disabled={!content || content === '' || !title || title === ''}
+                              type="primary"
+                              htmlType="submit"
+                              size="large"
+                              icon={<NoteAddIcon />}
+                              iconPosition="end"
+                              onClick={createTopic}
+                            >
+                              {t('pages.newTopic.createTopic')}
+                            </Button>
+                          </Col>
+                        </Row>
                       </Col>
                     </Row>
                   </Col>
                 </Row>
               </Layout>
             </Col>
           </Row>
-        </Col>
+        </Col >
         <Col xs={0} md='7'>
           <Row gutter={[0, 10]} style={{ marginTop: 32 }} >
             <Col span={24}>
               <ActiveUser />
             </Col>
           </Row>
         </Col>
-      </Row>
-    </Content>
+      </Row >
+    </Content >
   )
 }

src/locales/en/translation.json

@@ -10,7 +10,9 @@
     "newTopic": {
       "title": "Title",
       "content": "Content",
-      "createTopic": "Create topic"
+      "createTopic": "Create topic",
+      "editor": "Editor",
+      "preview": "Preview"
     },
     "topic": {
       "quote": "Quote",

src/styles/global-styles.ts

@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components'
+import 'react-mde/lib/styles/css/react-mde-all.css';
 
 export const GlobalStyle = createGlobalStyle`
   @font-face {
@@ -47,4 +48,27 @@ export const GlobalStyle = createGlobalStyle`
       border-radius: 4px; /* Optional: rounded corners for inline code */
   }
 
+  .mde-box {
+    border-width: 0;
+  }
+
+  .mde-toolbar {
+    border-width: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+
+  .mde-textarea-dark {
+    color: #fff;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    background: #1f1f1f;
+    border: 1px solid #424242 !important;
+  }
+
+  .mde-textarea-light {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border: 1px solid #d9d9d9 !important;
+  }
 `

yarn.lock

@@ -12122,6 +12122,11 @@ react-markdown@^9.0.1:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
+react-mde@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/react-mde/-/react-mde-11.5.0.tgz#3e81a505071aa80287fb23a1c0ce5e8b34c82055"
+  integrity sha512-CH/VK6d+tpVjJ8rTXfh1dDt6GWedTgCU0668p8toqhAc3vy0Lu872O2RKYDSpkUrlbHI08fjUPTl++nExp6gag==
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"