small markdown fix

src/views/wiki/components/format-toolbar.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { Button, Flex, Spinner } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 
-export default function FormatToolbar({
+export default function FormatButton({
   getValue,
   setValue,
 }: {
@@ -20,12 +20,8 @@ export default function FormatToolbar({
   };
 
   return (
-    <Flex gap="2">
-      <Button onClick={format} size="sm" colorScheme="primary" isDisabled={loading}>
-        Format
-      </Button>
-
-      {loading && <Spinner />}
-    </Flex>
+    <Button onClick={format} colorScheme="primary" isLoading={loading}>
+      Format
+    </Button>
   );
 }

src/views/wiki/components/markdown.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import {
   Code,
+  CodeProps,
   Heading,
   HeadingProps,
   Image,
@@ -113,6 +114,14 @@ function TableWithContainer({ children, node, ...props }: TableProps & ExtraProp
   );
 }
 
+function CustomCode({ children, node, ...props }: CodeProps & ExtraProps) {
+  return (
+    <Code fontSize="inherit" {...props}>
+      {children}
+    </Code>
+  );
+}
+
 const components: Partial<Components> = {
   h1: H1,
   h2: H2,
@@ -133,7 +142,7 @@ const components: Partial<Components> = {
   tr: Tr,
   td: Td,
   th: Th,
-  code: Code,
+  code: CustomCode,
 };
 
 export const CharkaMarkdown = forwardRef<HTMLDivElement, { children: string }>(({ children }, ref) => {

src/views/wiki/create.tsx

@@ -8,6 +8,7 @@ import {
   FormLabel,
   Heading,
   Input,
+  Spacer,
   Textarea,
   useToast,
 } from "@chakra-ui/react";
@@ -30,7 +31,7 @@ import useReplaceableEvent from "../../hooks/use-replaceable-event";
 import { useReadRelays } from "../../hooks/use-client-relays";
 import UserName from "../../components/user/user-name";
 import { getEventCoordinate } from "../../helpers/nostr/event";
-import FormatToolbar from "./components/format-toolbar";
+import FormatButton from "./components/format-toolbar";
 import dictionaryService from "../../services/dictionary";
 
 export default function CreateWikiPageView() {
@@ -147,18 +148,18 @@ export default function CreateWikiPageView() {
         <FormLabel>Summary</FormLabel>
         <Textarea {...register("summary", { required: true })} isRequired />
       </FormControl>
-      <FormatToolbar
-        getValue={() => getValues().content}
-        setValue={(content) => setValue("content", content, { shouldDirty: true })}
-      />
-      <MarkdownEditor value={getValues().content} onChange={(v) => setValue("content", v)} />
-      <Flex gap="2" justifyContent="flex-end">
+      <Flex gap="2">
+        <FormatButton
+          getValue={() => getValues().content}
+          setValue={(content) => setValue("content", content, { shouldDirty: true })}
+        />
+        <Spacer />
         <Button onClick={() => navigate(-1)}>Cancel</Button>
-        {formState.isDirty && <Button onClick={() => reset()}>Clear</Button>}
         <Button colorScheme="primary" type="submit" isLoading={formState.isSubmitting}>
           Publish
         </Button>
       </Flex>
+      <MarkdownEditor value={getValues().content} onChange={(v) => setValue("content", v)} />
     </VerticalPageLayout>
   );
 }

src/views/wiki/edit.tsx

@@ -1,4 +1,15 @@
-import { Button, Flex, FormControl, FormLabel, Heading, Input, Spinner, Textarea, useToast } from "@chakra-ui/react";
+import {
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Spacer,
+  Spinner,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
 import { Navigate, useNavigate, useParams } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { NostrEvent } from "nostr-tools";
@@ -14,7 +25,7 @@ import VerticalPageLayout from "../../components/vertical-page-layout";
 import MarkdownEditor from "./components/markdown-editor";
 import { ErrorBoundary } from "../../components/error-boundary";
 import { cloneEvent, replaceOrAddSimpleTag } from "../../helpers/nostr/event";
-import FormatToolbar from "./components/format-toolbar";
+import FormatButton from "./components/format-toolbar";
 import dictionaryService from "../../services/dictionary";
 
 function EditWikiPagePage({ page }: { page: NostrEvent }) {
@@ -47,6 +58,7 @@ function EditWikiPagePage({ page }: { page: NostrEvent }) {
     try {
       const draft = cloneEvent(WIKI_PAGE_KIND, page);
       draft.content = values.content;
+      replaceOrAddSimpleTag(draft, "title", values.title);
       replaceOrAddSimpleTag(draft, "summary", values.summary);
 
       const pub = await publish("Publish Page", draft, WIKI_RELAYS, false);
@@ -75,18 +87,18 @@ function EditWikiPagePage({ page }: { page: NostrEvent }) {
         <FormLabel>Summary</FormLabel>
         <Textarea {...register("summary", { required: true })} isRequired />
       </FormControl>
-      <FormatToolbar
-        getValue={() => getValues().content}
-        setValue={(content) => setValue("content", content, { shouldDirty: true })}
-      />
-      <MarkdownEditor value={getValues().content} onChange={(v) => setValue("content", v)} />
-      <Flex gap="2" justifyContent="flex-end">
-        {formState.isDirty && <Button onClick={() => reset()}>Clear</Button>}
+      <Flex gap="2">
+        <FormatButton
+          getValue={() => getValues().content}
+          setValue={(content) => setValue("content", content, { shouldDirty: true })}
+        />
+        <Spacer />
         <Button onClick={() => navigate(-1)}>Cancel</Button>
         <Button colorScheme="primary" type="submit" isLoading={formState.isSubmitting}>
           Publish
         </Button>
       </Flex>
+      <MarkdownEditor value={getValues().content} onChange={(v) => setValue("content", v)} />
     </VerticalPageLayout>
   );
 }