1 files changed, 199 insertions, 0 deletions
diff --git a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx
new file mode 100644
index 00000000..36a5572b
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx
@@ -0,0 +1,199 @@
+import { useEffect, useState } from "react";
+import classnames from "classnames";
+import { marked } from "marked";
+
+import { HttpTimelinePostPostRequestData } from "~src/http/timeline";
+
+import base64 from "~src/utilities/base64";
+
+import { array } from "~src/components/common";
+import { TabPages } from "~src/components/tab";
+import { IconButton } from "~src/components/button";
+import BlobImage from "~src/components/BlobImage";
+
+import "./MarkdownPostEdit.css";
+
+class MarkedRenderer extends marked.Renderer {
+  constructor(public images: string[]) {
+    super();
+  }
+
+  // Custom image parser for indexed image link.
+  image(href: string, title: string | null, text: string): string {
+    const i = parseInt(href);
+    if (!isNaN(i) && i > 0 && i <= this.images.length) {
+      href = this.images[i - 1];
+    }
+
+    return super.image(href, title, text);
+  }
+}
+
+function generateMarkedOptions(imageUrls: string[]) {
+  return {
+    renderer: new MarkedRenderer(imageUrls),
+    async: false,
+  } as const;
+}
+
+function renderHtml(text: string, imageUrls: string[]): string {
+  return marked.parse(text, generateMarkedOptions(imageUrls));
+}
+
+async function build(
+  text: string,
+  images: File[],
+): Promise<HttpTimelinePostPostRequestData[]> {
+  return [
+    {
+      contentType: "text/markdown",
+      data: await base64(text),
+    },
+    ...(await Promise.all(
+      images.map(async (image) => {
+        const data = await base64(image);
+        return { contentType: image.type, data };
+      }),
+    )),
+  ];
+}
+
+export function useMarkdownEdit(disabled: boolean): {
+  hasContent: boolean;
+  clear: () => void;
+  build: () => Promise<HttpTimelinePostPostRequestData[]>;
+  markdownEditProps: Omit<MarkdownPostEditProps, "className">;
+} {
+  const [text, setText] = useState<string>("");
+  const [images, setImages] = useState<File[]>([]);
+
+  return {
+    hasContent: text !== "" || images.length !== 0,
+    clear: () => {
+      setText("");
+      setImages([]);
+    },
+    build: () => {
+      return build(text, images);
+    },
+    markdownEditProps: {
+      disabled,
+      text,
+      images,
+      onTextChange: setText,
+      onImageAppend: (image) => setImages(array.copy_push(images, image)),
+      onImageMove: (o, n) => setImages(array.copy_move(images, o, n)),
+      onImageDelete: (i) => setImages(array.copy_delete(images, i)),
+    },
+  };
+}
+
+function MarkdownPreview({ text, images }: { text: string; images: File[] }) {
+  const [html, setHtml] = useState("");
+
+  useEffect(() => {
+    const imageUrls = images.map((image) => URL.createObjectURL(image));
+
+    setHtml(renderHtml(text, imageUrls));
+
+    return () => {
+      imageUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, [text, images]);
+
+  return (
+    <div
+      className="timeline-edit-markdown-preview"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+
+interface MarkdownPostEditProps {
+  disabled: boolean;
+  text: string;
+  images: File[];
+  onTextChange: (text: string) => void;
+  onImageAppend: (image: File) => void;
+  onImageMove: (oldIndex: number, newIndex: number) => void;
+  onImageDelete: (index: number) => void;
+  className?: string;
+}
+
+export function MarkdownPostEdit({
+  disabled,
+  text,
+  images,
+  onTextChange,
+  onImageAppend,
+  // onImageMove,
+  onImageDelete,
+  className,
+}: MarkdownPostEditProps) {
+  return (
+    <TabPages
+      className={className}
+      pageContainerClassName="timeline-edit-markdown-tab-page"
+      dense
+      pages={[
+        {
+          name: "text",
+          text: "edit",
+          page: (
+            <textarea
+              value={text}
+              disabled={disabled}
+              className="timeline-edit-markdown-text"
+              onChange={(event) => {
+                onTextChange(event.currentTarget.value);
+              }}
+            />
+          ),
+        },
+        {
+          name: "images",
+          text: "image",
+          page: (
+            <div className="timeline-edit-markdown-images">
+              {images.map((image, index) => (
+                <div
+                  key={image.name}
+                  className="timeline-edit-markdown-image-container"
+                >
+                  <BlobImage src={image} />
+                  <IconButton
+                    icon="trash"
+                    color="danger"
+                    className={classnames(
+                      "timeline-edit-markdown-image-delete",
+                      process && "d-none",
+                    )}
+                    onClick={() => {
+                      onImageDelete(index);
+                    }}
+                  />
+                </div>
+              ))}
+              <input
+                type="file"
+                accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  const { files } = event.currentTarget;
+                  if (files != null && files.length !== 0) {
+                    onImageAppend(files[0]);
+                  }
+                }}
+                disabled={disabled}
+              />
+            </div>
+          ),
+        },
+        {
+          name: "preview",
+          text: "preview",
+          page: <MarkdownPreview text={text} images={images} />,
+        },
+      ]}
+    />
+  );
+}