feat(article): add markdown editor and markdown editor with preview

package.json

@@ -25,7 +25,7 @@
     "classnames": "^2.3.1",
     "date-fns": "^2.25.0",
     "date-fns-tz": "^1.1.6",
-    "detect-incognito": "^1.0.0",
+    "detectincognitojs": "^1.1.2",
     "echarts": "^5.2.2",
     "file-type": "^16.5.3",
     "formik": "^2.2.9",

src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx

@@ -0,0 +1,37 @@
+import React, { ChangeEventHandler, FocusEventHandler, memo } from "react"
+import useInit from "../../../hooks/useInit"
+
+interface MarkdownEditorProps {
+  className?: string
+  value?: string
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>
+  placeholder?: string
+  onInit?: (markdown: string) => void
+}
+
+const _MarkdownEditor = ({
+  className,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  onInit,
+}: MarkdownEditorProps) => {
+  useInit(() => {
+    if (onInit) {
+      onInit(value || "")
+    }
+  })
+  return (
+    <textarea
+      className={className}
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+    />
+  )
+}
+
+export const MarkdownEditor = memo(_MarkdownEditor)

src/components/NFTArticle/NFTArticleEditor.module.scss

@@ -0,0 +1,92 @@
+@import "../../styles/fonts";
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  z-index: 3;
+  width: 100%;
+  margin-bottom: 16px;
+  background: var(--color-white);
+  position: sticky;
+  top: 0;
+  left: 0;
+  border-bottom: 3px solid var(--color-editor-black);
+
+  .container_view {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin: auto;
+    width: min(900px, 100%);
+    button {
+      position: relative;
+      height: 40px;
+      text-align: center;
+      font-size: var(--font-size-small);
+      padding: 8px 16px;
+      cursor: pointer;
+      border: 3px solid var(--color-editor-gray-vvlight);
+      border-bottom: 0;
+      background: var(--color-editor-gray-vvlight);
+      color: var(--color-editor-gray);
+      margin: 0 4px -3px 0;
+      &:last-child {
+        margin-right: 0;
+      }
+      &:not(.view_active):after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: -3px;
+        right: -3px;
+        height: 3px;
+        background: var(--color-editor-black);
+        z-index: 2;
+      }
+      &.view_active {
+        color: var(--color-black);
+        background: var(--color-white);
+        border-color: var(--color-editor-black);
+      }
+    }
+  }
+}
+.container_centered {
+  width: min(900px, 100%);
+  margin: auto;
+}
+.container_markdown {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+.container_markdown_child {
+  flex: 1;
+}
+.container_preview_child {
+  flex: 1;
+  position: relative;
+}
+.container_preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 16px;
+}
+.textarea_markdown {
+  display: block;
+  width: 100%;
+  min-height: 90vh;
+  resize: vertical;
+  padding: 8px;
+  border: 0;
+  color: var(--color-black);
+  background-color: var(--color-editor-gray-vvlight);
+  &:focus {
+//    background: var(--color-white);
+  }
+}

src/components/NFTArticle/NFTArticleEditor.tsx

@@ -0,0 +1,239 @@
+import style from "./NFTArticleEditor.module.scss"
+import styleArticle from "./NFTArticle.module.scss"
+import stylePageArticle from "../../containers/Article/PageArticle.module.scss"
+import { SlateEditor } from "./SlateEditor/index"
+import { Descendant } from "slate"
+import { IEditorMediaFile } from "../../types/ArticleEditor/Image"
+import { FxEditor } from "../../types/ArticleEditor/Editor"
+import useInit from "../../hooks/useInit"
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { LoaderBlock } from "../Layout/LoaderBlock"
+import { Debounce, debounce } from "../../utils/debounce"
+import { NftArticle } from "./NFTArticle"
+import cs from "classnames"
+import { getMarkdownMedias } from "./SlateEditor/Plugins/SlateMediaPlugin"
+import { MarkdownEditor } from "./MarkdownEditor/MarkdownEditor"
+
+const editorDefaultValue = [
+  {
+    type: "paragraph",
+    children: [
+      {
+        text: "",
+      },
+    ],
+  },
+]
+
+type View = "wysiwyg" | "markdown" | "markdownWithPreview"
+
+const views: Record<View, string> = {
+  wysiwyg: "WYSIWYG",
+  markdown: "Markdown",
+  markdownWithPreview: "Markdown + Preview",
+}
+
+export interface RefNFTArticleEditor {
+  updateMediaUrl: (target: IEditorMediaFile, uri: string) => void
+}
+
+interface NFTArticleEditorProps {
+  placeholder?: string
+  valueMarkdown: string | null
+  onMediasUpdate: (medias: IEditorMediaFile[]) => void
+  onChange: (md: string) => void
+  onSlateEditorInit?: (editor: FxEditor) => void
+  onMarkdownEditorInit?: (markdown: string) => void
+}
+
+const NftArticleEditor = forwardRef<RefNFTArticleEditor, NFTArticleEditorProps>(
+  (
+    {
+      valueMarkdown,
+      placeholder,
+      onMediasUpdate,
+      onChange,
+      onSlateEditorInit,
+      onMarkdownEditorInit,
+    }: NFTArticleEditorProps,
+    ref
+  ) => {
+    const refTopMarker = useRef<HTMLDivElement>(null)
+    const refSlateEditor = useRef<FxEditor>(null)
+    const [view, setView] = useState<View>("wysiwyg")
+    const [initialValueSlate, setInitialValueSlate] = useState<
+      Descendant[] | null
+    >(null)
+
+    const handleTransformMdToSlate = useCallback(async (mdValue) => {
+      const getSlateEditorStateFromMarkdown = (await import("./processor"))
+        .getSlateEditorStateFromMarkdown
+      const editorFromMd = mdValue
+        ? await getSlateEditorStateFromMarkdown(mdValue)
+        : null
+      setInitialValueSlate(
+        editorFromMd ? editorFromMd.editorState : editorDefaultValue
+      )
+    }, [])
+    const handleChangeSlate = useCallback(
+      async (nodes: Descendant[]) => {
+        const getMarkdownFromSlateEditorState = (await import("./processor"))
+          .getMarkdownFromSlateEditorState
+        const markdown = await getMarkdownFromSlateEditorState(nodes)
+        onChange(markdown || "")
+      },
+      [onChange]
+    )
+    const handleToggleView = useCallback(
+      (view: View) => async () => {
+        if (view === "wysiwyg") {
+          await handleTransformMdToSlate(valueMarkdown)
+        }
+        const rectObj = refTopMarker.current?.getBoundingClientRect()
+        if (rectObj && rectObj.y < 0) {
+          refTopMarker.current?.scrollIntoView()
+        }
+        setView(view)
+      },
+      [handleTransformMdToSlate, valueMarkdown]
+    )
+
+    const handleUpdateMediaUrl = useCallback(
+      (target: IEditorMediaFile, uri: string) => {
+        if (view === "wysiwyg") {
+          refSlateEditor.current?.updateMediaUrl(target, uri)
+        } else if (view === "markdown" || view === "markdownWithPreview") {
+          if (valueMarkdown) {
+            const newMd = valueMarkdown?.replaceAll(target.uri, uri)
+            if (newMd !== valueMarkdown) {
+              onChange(newMd)
+              onMediasUpdate(getMarkdownMedias(newMd))
+            }
+          }
+        }
+      },
+      [onChange, onMediasUpdate, valueMarkdown, view]
+    )
+
+    const handleUpdateMarkdownMedias = useCallback(
+      (ev) => {
+        onMediasUpdate(getMarkdownMedias(ev.target.value))
+      },
+      [onMediasUpdate]
+    )
+    const debouncedUpdateMarkdownMedias = useMemo<
+      Debounce<typeof handleUpdateMarkdownMedias>
+    >(
+      () => debounce(handleUpdateMarkdownMedias, 2000),
+      [handleUpdateMarkdownMedias]
+    )
+
+    const handleChangeMarkdown = useCallback(
+      (ev) => {
+        onChange(ev.target.value)
+        debouncedUpdateMarkdownMedias(ev)
+      },
+      [debouncedUpdateMarkdownMedias, onChange]
+    )
+    const handleBlurMarkdown = useCallback(
+      (ev) => {
+        debouncedUpdateMarkdownMedias.cancel()
+        handleUpdateMarkdownMedias(ev)
+      },
+      [debouncedUpdateMarkdownMedias, handleUpdateMarkdownMedias]
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        updateMediaUrl: handleUpdateMediaUrl,
+      }),
+      [handleUpdateMediaUrl]
+    )
+    useInit(async () => {
+      await handleTransformMdToSlate(valueMarkdown)
+    })
+    const debouncedChangeBody = useMemo(
+      () => debounce(handleChangeSlate, 800),
+      [handleChangeSlate]
+    )
+    return (
+      <>
+        {initialValueSlate ? (
+          <div>
+            <div ref={refTopMarker} />
+            <div className={style.toolbar}>
+              <div className={style.container_view}>
+                {Object.entries(views).map(([key, label]) => (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={handleToggleView(key as View)}
+                    className={cs({
+                      [style.view_active]: key === view,
+                    })}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {view === "wysiwyg" && (
+              <div className={styleArticle.article_wrapper}>
+                <SlateEditor
+                  ref={refSlateEditor}
+                  placeholder={placeholder}
+                  initialValue={initialValueSlate}
+                  onMediasUpdate={onMediasUpdate}
+                  onChange={debouncedChangeBody}
+                  onInit={onSlateEditorInit}
+                />
+              </div>
+            )}
+            <div
+              className={cs(style.container_markdown, {
+                [style.container_centered]: view === "markdown",
+              })}
+            >
+              {(view === "markdown" || view === "markdownWithPreview") && (
+                <div className={style.container_markdown_child}>
+                  <MarkdownEditor
+                    className={style.textarea_markdown}
+                    placeholder={placeholder}
+                    value={valueMarkdown || ""}
+                    onChange={handleChangeMarkdown}
+                    onBlur={handleBlurMarkdown}
+                    onInit={onMarkdownEditorInit}
+                  />
+                </div>
+              )}
+              {view === "markdownWithPreview" && (
+                <div className={style.container_preview_child}>
+                  <div
+                    className={cs(
+                      style.container_preview,
+                      stylePageArticle.body
+                    )}
+                  >
+                    <NftArticle markdown={valueMarkdown || ""} />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <LoaderBlock size="small" height="20px" />
+        )}
+      </>
+    )
+  }
+)
+NftArticleEditor.displayName = "NftArticleEditor"
+export default NftArticleEditor