Web app: add a “publish as markdown” option

binwiederhier · Jul 9, 2023 · c8f880c · c8f880c
1 parent f2d3f0b
commit c8f880c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
@@ -160,6 +160,7 @@
   "publish_dialog_button_cancel_sending": "Cancel sending",
   "publish_dialog_button_cancel": "Cancel",
   "publish_dialog_button_send": "Send",
+  "publish_dialog_checkbox_markdown": "Format as Markdown",
   "publish_dialog_checkbox_publish_another": "Publish another",
   "publish_dialog_attached_file_title": "Attached file:",
   "publish_dialog_attached_file_filename_placeholder": "Attachment filename",

diff --git a/web/src/components/PublishDialog.jsx b/web/src/components/PublishDialog.jsx
@@ -61,6 +61,7 @@ const PublishDialog = (props) => {
   const [call, setCall] = useState("");
   const [delay, setDelay] = useState("");
   const [publishAnother, setPublishAnother] = useState(false);
+  const [markdownEnabled, setMarkdownEnabled] = useState(false);
 
   const [showTopicUrl, setShowTopicUrl] = useState("");
   const [showClickUrl, setShowClickUrl] = useState(false);
@@ -148,6 +149,10 @@ const PublishDialog = (props) => {
     if (attachFile && message.trim()) {
       url.searchParams.append("message", message.replaceAll("\n", "\\n").trim());
     }
+    if (markdownEnabled) {
+      url.searchParams.append("markdown", "true");
+    }
+
     const body = attachFile || message;
     try {
       const user = await userManager.get(baseUrl);
@@ -353,6 +358,20 @@ const PublishDialog = (props) => {
               "aria-label": t("publish_dialog_message_label"),
             }}
           />
+          <FormControlLabel
+            label={t("publish_dialog_checkbox_markdown")}
+            sx={{ marginRight: 2 }}
+            control={
+              <Checkbox
+                size="small"
+                checked={markdownEnabled}
+                onChange={(ev) => setMarkdownEnabled(ev.target.checked)}
+                inputProps={{
+                  "aria-label": t("publish_dialog_checkbox_markdown"),
+                }}
+              />
+            }
+          />
           <div style={{ display: "flex" }}>
             <EmojiPicker anchorEl={emojiPickerAnchorEl} onEmojiPick={handleEmojiPick} onClose={handleEmojiClose} />
             <DialogIconButton disabled={disabled} onClick={handleEmojiClick} aria-label={t("publish_dialog_emoji_picker_show")}>