From 8a396e97dc9a636c04c5a964910d6d7072899230 Mon Sep 17 00:00:00 2001
From: Geoffrey MERRAN <geoffrey.merran@gmail.com>
Date: Mon, 5 Sep 2022 23:09:00 +0100
Subject: [PATCH 1/4] feat(editor): add markdown editor and markdown editor
 with preview

---
 .../MarkdownEditor/MarkdownEditor.tsx         |  30 +++
 .../NFTArticle/NFTArticleEditor.module.scss   |  84 ++++++++
 src/components/NFTArticle/NFTArticleEditor.ts |   3 -
 .../NFTArticle/NFTArticleEditor.tsx           | 182 ++++++++++++++++++
 .../SlateEditor/Plugins/SlateMediaPlugin.ts   |  30 ++-
 .../NFTArticle/SlateEditor/index.tsx          |   2 +-
 .../Article/Editor/ArticleEditor.tsx          |  62 ++----
 .../Article/Editor/AutosaveArticle.tsx        |   2 +-
 src/containers/Article/Editor/EditorMedia.tsx |  57 ++++--
 .../Article/Editor/EditorMedias.module.scss   |   4 +
 src/containers/Article/PageArticle.tsx        |   1 -
 src/utils/debounce.ts                         |  14 +-
 12 files changed, 404 insertions(+), 67 deletions(-)
 create mode 100644 src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
 create mode 100644 src/components/NFTArticle/NFTArticleEditor.module.scss
 delete mode 100644 src/components/NFTArticle/NFTArticleEditor.ts
 create mode 100644 src/components/NFTArticle/NFTArticleEditor.tsx

diff --git a/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx b/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
new file mode 100644
index 000000000..73249ab50
--- /dev/null
+++ b/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
@@ -0,0 +1,30 @@
+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);
diff --git a/src/components/NFTArticle/NFTArticleEditor.module.scss b/src/components/NFTArticle/NFTArticleEditor.module.scss
new file mode 100644
index 000000000..e4a626d18
--- /dev/null
+++ b/src/components/NFTArticle/NFTArticleEditor.module.scss
@@ -0,0 +1,84 @@
+@import "../../styles/fonts";
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  z-index: 3;
+  width: min(900px, 100%);
+  margin: 0 auto 8px auto;
+  position: sticky;
+  top: 0;
+  left: 0;
+
+  .container_view {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid var(--color-gray);
+
+    button {
+      height: 40px;
+      text-align: center;
+      font-size: var(--font-size-small);
+      border-radius: 6px 6px 0 0;
+      padding: 8px 16px;
+      cursor: pointer;
+      border: 1px solid var(--color-gray-vvlight);
+      border-bottom: 1px solid var(--color-gray);
+      background: var(--color-gray-vvvlight);
+      color: var(--color-gray);
+      margin: 0 2px -1px 0;
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.view_active {
+        background: var(--color-white);
+        color: var(--color-black);
+        border-top: 1px solid var(--color-gray);
+        border-left: 1px solid var(--color-gray);
+        border-right: 1px solid var(--color-gray);
+        border-bottom: 1px solid transparent;
+      }
+    }
+  }
+}
+.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-radius: 6px;
+  border: 1px solid var(--color-gray-vlight);
+  color: var(--color-black);
+  background-color: var(--color-gray-vvvlight);
+  &:focus {
+    background: var(--color-white);
+  }
+}
diff --git a/src/components/NFTArticle/NFTArticleEditor.ts b/src/components/NFTArticle/NFTArticleEditor.ts
deleted file mode 100644
index c1d25eb5f..000000000
--- a/src/components/NFTArticle/NFTArticleEditor.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SlateEditor as NftArticleEditor } from './SlateEditor/index'
-
-export default NftArticleEditor;
diff --git a/src/components/NFTArticle/NFTArticleEditor.tsx b/src/components/NFTArticle/NFTArticleEditor.tsx
new file mode 100644
index 000000000..314002711
--- /dev/null
+++ b/src/components/NFTArticle/NFTArticleEditor.tsx
@@ -0,0 +1,182 @@
+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;
diff --git a/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts b/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts
index c3b85e844..a4f3680bb 100644
--- a/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts
+++ b/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts
@@ -1,4 +1,4 @@
-import { BaseOperation, Descendant, Editor, Element, Node, Point, Range, Text, Transforms } from "slate"
+import { BaseOperation, Editor, Element, Node, Point, Range, Text, Transforms } from "slate"
 import { EnhanceEditorWith, FxEditor } from "../../../../types/ArticleEditor/Editor";
 import { IEditorMediaFile } from "../../../../types/ArticleEditor/Image";
 import { arrayRemoveDuplicates } from "../../../../utils/array";
@@ -53,6 +53,34 @@ function getEditorMedias(editor: FxEditor): IEditorMediaFile[] {
   )
 }
 
+export function getMarkdownMedias(markdown: string): IEditorMediaFile[] {
+  const medias: IEditorMediaFile[] = []
+  const regexImageMarkdown = /!\[[^\]]*\]\((?<src>.*?)(?=\"|\))(?<optionalpart>\".*\")?\)/g;
+  const regexVideoMarkdown = /::video\[[^\]]*\]{.*src=\"(?<src>[^\"]*)\".*}/g;
+  const images = markdown.matchAll(regexImageMarkdown);
+  for (const image of images) {
+    if (image?.groups) {
+      medias.push({
+        uri: image.groups['src'],
+        type: "image"
+      })
+    }
+  }
+  const videos = markdown.matchAll(regexVideoMarkdown);
+  for (const video of videos) {
+    if (video?.groups) {
+      medias.push({
+        uri: video.groups['src'],
+        type: "video"
+      })
+    }
+  }
+  return arrayRemoveDuplicates(
+    medias,
+    (a, b) => a.uri === b.uri
+  );
+}
+
 /**
  * Add utility functions to the editor to support the propagation of medias
  * manipulation to the higher order components.
diff --git a/src/components/NFTArticle/SlateEditor/index.tsx b/src/components/NFTArticle/SlateEditor/index.tsx
index 9b51e9f81..e437f38c1 100644
--- a/src/components/NFTArticle/SlateEditor/index.tsx
+++ b/src/components/NFTArticle/SlateEditor/index.tsx
@@ -85,7 +85,7 @@ const renderLeaf = ({ attributes, children, leaf }: RenderLeafProps) => {
   return <span {...attributes}>{children}</span>;
 };
 
-interface SlateEditorProps {
+export interface SlateEditorProps {
   initialValue: Descendant[]
   placeholder?: string
   onMediasUpdate: (medias: IEditorMediaFile[]) => void
diff --git a/src/containers/Article/Editor/ArticleEditor.tsx b/src/containers/Article/Editor/ArticleEditor.tsx
index 8921bdf68..4a717951f 100644
--- a/src/containers/Article/Editor/ArticleEditor.tsx
+++ b/src/containers/Article/Editor/ArticleEditor.tsx
@@ -1,5 +1,4 @@
 import style from "./ArticleEditor.module.scss"
-import articleStyle from "../../../components/NFTArticle/NFTArticle.module.scss"
 import cs from "classnames"
 import TextareaAutosize from "react-textarea-autosize"
 import React, { useCallback, useContext, useMemo, useRef, useState } from "react"
@@ -19,10 +18,6 @@ import { EditorMedias } from "./EditorMedias"
 import { ImagePolymorphic } from "../../../components/Medias/ImagePolymorphic"
 import { arrayRemoveDuplicates } from "../../../utils/array"
 import { AutosaveArticle } from "./AutosaveArticle";
-import { debounce } from "../../../utils/debounce";
-import { Descendant } from "slate";
-import { LoaderBlock } from "../../../components/Layout/LoaderBlock";
-import useInit from "../../../hooks/useInit";
 import { isUrlLocal } from "../../../utils/files";
 import useConfirmLeavingPage from "../../../hooks/useConfirmLeavingPage";
 import * as Yup from "yup";
@@ -31,17 +26,9 @@ import { UserContext } from "../../UserProvider"
 import { ErrorBlock } from "../../../components/Error/ErrorBlock"
 import { YupSplits } from "../../../utils/yup/splits"
 import { InputText } from "../../../components/Input/InputText";
-import NftArticleEditor from "../../../components/NFTArticle/NFTArticleEditor"
-
-
-const editorDefaultValue = [
-  {
-    type: "paragraph",
-    children: [{
-      text: ""
-    }]
-  }
-]
+import NftArticleEditor, { RefNFTArticleEditor } from "../../../components/NFTArticle/NFTArticleEditor"
+import { getMarkdownMedias } from "../../../components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin";
+import NFTArticleEditor from "../../../components/NFTArticle/NFTArticleEditor";
 
 const defaultValues: NFTArticleForm = {
   title: "",
@@ -99,7 +86,7 @@ export function ArticleEditor({
 }: ArticleEditorProps) {
   const { user } = useContext(UserContext)
   const [immutableInitialValues] = useState(initialValues)
-  const editorStateRef = useRef<FxEditor>(null)
+  const refNftArticleEditor = useRef<RefNFTArticleEditor>(null)
   const formik = useFormik({
     initialValues: (() => {
       if (editMinted) {
@@ -122,7 +109,6 @@ export function ArticleEditor({
   });
   const { values, errors, touched, setFieldValue, setFieldTouched } = formik
   const [medias, setMedias] = useState<IEditorMediaFile[]>([])
-  const [initialBody, setInitialBody] = useState<Descendant[] | null>(null)
 
   // ref to medias for scrolling to block
   const mediasMarkerRef = useRef<HTMLDivElement>(null)
@@ -135,16 +121,16 @@ export function ArticleEditor({
     }
   }, [])
 
-  const handleChangeBody = useCallback(async (nodes: Descendant[]) => {
-    const getMarkdownFromSlateEditorState = (await import('../../../components/NFTArticle/processor')).getMarkdownFromSlateEditorState
-    const markdown = await getMarkdownFromSlateEditorState(nodes);
+  const handleChangeBody = useCallback(async (markdown: string) => {
     setFieldTouched('body');
     await setFieldValue('body', markdown);
   }, [setFieldTouched, setFieldValue])
-  const debouncedChangeBody = useMemo(() => debounce(handleChangeBody, 800), [handleChangeBody])
-  const handleInitEditor = useCallback((editor) => {
+  const handleInitSlateEditor = useCallback((editor) => {
     setMedias(editor.getUploadedMedias() || []);
   }, [])
+  const handleInitMarkdownEditor = useCallback((markdown) => {
+    setMedias(getMarkdownMedias(markdown) || []);
+  }, [])
   const handleChangeTags = useCallback((e) => {
     setFieldValue("tags", tagsFromString(e.target.value))
   }, [setFieldValue])
@@ -182,18 +168,12 @@ export function ArticleEditor({
       setFieldValue("thumbnailUri", uri);
     }
     // update the medias in the editor
-    editorStateRef.current?.updateMediaUrl(
+    refNftArticleEditor.current?.updateMediaUrl(
       target,
       uri
     )
   }, [setFieldValue, thumbnail])
 
-  useInit(async () => {
-    const getSlateEditorStateFromMarkdown = (await import('../../../components/NFTArticle/processor')).getSlateEditorStateFromMarkdown
-    const editorFromMd = values.body ? await getSlateEditorStateFromMarkdown(values.body) : null;
-    setInitialBody(editorFromMd ? editorFromMd.editorState : editorDefaultValue);
-  })
-
   const tagsAsString = useMemo(() => (values.tags || []).join(','), [values.tags])
 
   const hasLocalMedias = useMemo(() => mediasWithThumbnail.some(media => isUrlLocal(media.uri)), [mediasWithThumbnail]);
@@ -326,18 +306,16 @@ export function ArticleEditor({
             BODY
           </span>
         </div>
-        <div className={cs(articleStyle.article_wrapper)}>
-          {initialBody ?
-            <NftArticleEditor
-              ref={editorStateRef}
-              initialValue={initialBody}
-              placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut magna eu sapien placerat auctor. Phasellus vel erat a mi cursus posuere nec et diam. Maecenas quis nisl ligula. Sed velit sapien, accumsan eget cursus sit amet, egestas sit amet odio. Cras vitae urna sodales, suscipit ipsum a, aliquam ex. Pellentesque ut placerat arcu, a fringilla ante. Sed varius sem mi, sed interdum nunc consectetur ut. Nulla consectetur diam purus, quis volutpat nunc ultrices eget. Nam vel consectetur lacus, vel auctor dolor."
-              onMediasUpdate={setMedias}
-              onChange={debouncedChangeBody}
-              onInit={handleInitEditor}
-            />
-            : <LoaderBlock size="small" height="20px" />
-          }
+        <div>
+          <NftArticleEditor
+            ref={refNftArticleEditor}
+            valueMarkdown={values.body}
+            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut magna eu sapien placerat auctor. Phasellus vel erat a mi cursus posuere nec et diam. Maecenas quis nisl ligula. Sed velit sapien, accumsan eget cursus sit amet, egestas sit amet odio. Cras vitae urna sodales, suscipit ipsum a, aliquam ex. Pellentesque ut placerat arcu, a fringilla ante. Sed varius sem mi, sed interdum nunc consectetur ut. Nulla consectetur diam purus, quis volutpat nunc ultrices eget. Nam vel consectetur lacus, vel auctor dolor."
+            onMediasUpdate={setMedias}
+            onChange={handleChangeBody}
+            onSlateEditorInit={handleInitSlateEditor}
+            onMarkdownEditorInit={handleInitMarkdownEditor}
+          />
         </div>
       </Field>
 
diff --git a/src/containers/Article/Editor/AutosaveArticle.tsx b/src/containers/Article/Editor/AutosaveArticle.tsx
index b051f3305..e20ed322f 100644
--- a/src/containers/Article/Editor/AutosaveArticle.tsx
+++ b/src/containers/Article/Editor/AutosaveArticle.tsx
@@ -35,7 +35,7 @@ const _AutosaveArticle = ({
         minted: isMinted,
       },
     })
-    console.log(articleFormState.body)
+  //  console.log(articleFormState.body)
     setStatus('saved');
   }, [dispatch, id, isMinted])
 
diff --git a/src/containers/Article/Editor/EditorMedia.tsx b/src/containers/Article/Editor/EditorMedia.tsx
index f5466391a..96efe3667 100644
--- a/src/containers/Article/Editor/EditorMedia.tsx
+++ b/src/containers/Article/Editor/EditorMedia.tsx
@@ -4,11 +4,12 @@ import cs from "classnames"
 import { IEditorMediaFile } from "../../../types/ArticleEditor/Image"
 import { ImagePolymorphic } from "../../../components/Medias/ImagePolymorphic"
 import { Button } from "../../../components/Button"
-import { forwardRef, useCallback, useImperativeHandle, useMemo } from "react"
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react"
 import { isUrlLocal } from "../../../utils/files"
 import useFetch, { CachePolicies } from "use-http"
 import { API_FILE__ARTICLE_UPLOAD_FILE } from "../../../services/apis/file-api.service"
 import { VideoPolymorphic } from "../../../components/Medias/VideoPolymorphic";
+import { LoaderBlock } from "../../../components/Layout/LoaderBlock";
 
 const UPLOAD_DEFAULT_ERROR = "Unknown error."
 
@@ -23,6 +24,10 @@ export const EditorMedia = forwardRef<Ref, Props>(({
   media,
   onChangeUri,
 }, ref) => {
+  const [hasMediaLoad, setHasMediaLoad] = useState<-1|boolean>(-1);
+  const handleLoadMediaError = useCallback(() => setHasMediaLoad(false), [])
+  const handleLoadMediaSuccess = useCallback(() => setHasMediaLoad(true), [])
+
   const isLocal = useMemo(
     () => isUrlLocal(media.uri),
     [media.uri]
@@ -65,12 +70,16 @@ export const EditorMedia = forwardRef<Ref, Props>(({
           <ImagePolymorphic
             uri={media.uri}
             className={cs(style.media)}
+            onError={handleLoadMediaError}
+            onLoad={handleLoadMediaSuccess}
           />
         }
         {media.type === "video" &&
           <VideoPolymorphic
             uri={media.uri}
             className={cs(style.media)}
+            onError={handleLoadMediaError}
+            onLoadedData={handleLoadMediaSuccess}
           />
         }
       </div>
@@ -91,22 +100,36 @@ export const EditorMedia = forwardRef<Ref, Props>(({
           </strong>
         )}
       </span>
-      {!isLocal ? (
-        <i
-          className={cs("fa-solid fa-circle-check", text.success, text.h4)}
-          aria-hidden
-        />
-      ):(
-        <Button
-          type="button"
-          color="secondary"
-          size="very-small"
-          onClick={uploadFile}
-          state={loading ? "loading" : "default"}
-        >
-          upload
-        </Button>
-      )}
+      {hasMediaLoad !== -1 ?
+        <>
+          {hasMediaLoad ?
+            <>
+              {!isLocal ? (
+                <i
+                  className={cs("fa-solid fa-circle-check", text.success, text.h4)}
+                  aria-hidden
+                />
+              ) : (
+                <Button
+                  type="button"
+                  color="secondary"
+                  size="very-small"
+                  onClick={uploadFile}
+                  state={loading ? "loading" : "default"}
+                >
+                  upload
+                </Button>
+              )}
+            </>
+            :
+            <i
+              className={cs("fa-solid fa-circle-xmark", text.error, text.h4)}
+              aria-hidden
+            />
+          }
+        </>
+        : (<span className={style.loader}><LoaderBlock size="tiny" /></span>)
+      }
     </div>
   )
 })
diff --git a/src/containers/Article/Editor/EditorMedias.module.scss b/src/containers/Article/Editor/EditorMedias.module.scss
index fd4566f28..3526721e3 100644
--- a/src/containers/Article/Editor/EditorMedias.module.scss
+++ b/src/containers/Article/Editor/EditorMedias.module.scss
@@ -45,3 +45,7 @@
     flex-grow: 2;
   }
 }
+
+.loader {
+  width: 25px;
+}
diff --git a/src/containers/Article/PageArticle.tsx b/src/containers/Article/PageArticle.tsx
index e3badcd27..535d866b3 100644
--- a/src/containers/Article/PageArticle.tsx
+++ b/src/containers/Article/PageArticle.tsx
@@ -81,7 +81,6 @@ const _PageArticle = ({ article, originUrl, isPreview }: PageArticleProps) => {
         <meta name="twitter:image" content={ipfsGatewayUrl(article.thumbnailUri)}/>
 
         <link href="/highlight/prism-dracula.css" rel="stylesheet"/>
-        <link rel="stylesheet" href="/highlight/dracula.css"/>
       </Head>
 
       <ArticleFlagBanner
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index 86c424dda..77a708bee 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,6 +1,10 @@
+export type Debounce<T extends {}> = T & {
+  cancel: () => void
+}
+
 export const debounce = (func: any, wait: number, immediate?: boolean) => {
   let timeout: NodeJS.Timeout | null;
-  return function debounceFunc(this: any) {
+  const fn = function debounceFunc(this: any) {
     const context = this;
     const args = arguments;
     clearTimeout(timeout!);
@@ -10,4 +14,12 @@ export const debounce = (func: any, wait: number, immediate?: boolean) => {
     }, wait);
     if (immediate && !timeout) func.apply(context, args);
   };
+  return Object.assign(fn, {
+    cancel() {
+      if (timeout) {
+        clearTimeout(timeout)
+        timeout = null;
+      }
+    }
+  })
 };

From 2319d8cdb318ebb7f14902693eb087002692c165 Mon Sep 17 00:00:00 2001
From: Geoffrey MERRAN <geoffrey.merran@gmail.com>
Date: Fri, 23 Sep 2022 15:41:18 +0200
Subject: [PATCH 2/4] fix(editor): editor style for dark and light

---
 .../MarkdownEditor/MarkdownEditor.tsx         | 21 ++++++---
 .../NFTArticle/NFTArticleEditor.module.scss   | 46 +++++++++++--------
 src/styles/globals.scss                       | 10 +++-
 3 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx b/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
index 73249ab50..6998475d0 100644
--- a/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
+++ b/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
@@ -1,5 +1,5 @@
-import React, { ChangeEventHandler, FocusEventHandler, memo } from 'react';
-import useInit from "../../../hooks/useInit";
+import React, { ChangeEventHandler, FocusEventHandler, memo } from "react"
+import useInit from "../../../hooks/useInit"
 
 interface MarkdownEditorProps {
   className?: string
@@ -10,10 +10,17 @@ interface MarkdownEditorProps {
   onInit?: (markdown: string) => void
 }
 
-const _MarkdownEditor = ({ className, value, onChange, onBlur, placeholder, onInit }: MarkdownEditorProps) => {
+const _MarkdownEditor = ({
+  className,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  onInit,
+}: MarkdownEditorProps) => {
   useInit(() => {
     if (onInit) {
-      onInit(value || '');
+      onInit(value || "")
     }
   })
   return (
@@ -24,7 +31,7 @@ const _MarkdownEditor = ({ className, value, onChange, onBlur, placeholder, onIn
       onBlur={onBlur}
       placeholder={placeholder}
     />
-  );
-};
+  )
+}
 
-export const MarkdownEditor = memo(_MarkdownEditor);
+export const MarkdownEditor = memo(_MarkdownEditor)
diff --git a/src/components/NFTArticle/NFTArticleEditor.module.scss b/src/components/NFTArticle/NFTArticleEditor.module.scss
index e4a626d18..de7eb2ce8 100644
--- a/src/components/NFTArticle/NFTArticleEditor.module.scss
+++ b/src/components/NFTArticle/NFTArticleEditor.module.scss
@@ -4,40 +4,47 @@
   display: flex;
   flex-direction: row;
   z-index: 3;
-  width: min(900px, 100%);
-  margin: 0 auto 8px auto;
+  width: 100%;
+  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;
-    border-bottom: 1px solid var(--color-gray);
-
+    justify-content: flex-end;
+    margin: auto;
+    width: min(900px, 100%);
     button {
+      position: relative;
       height: 40px;
       text-align: center;
       font-size: var(--font-size-small);
-      border-radius: 6px 6px 0 0;
       padding: 8px 16px;
       cursor: pointer;
-      border: 1px solid var(--color-gray-vvlight);
-      border-bottom: 1px solid var(--color-gray);
-      background: var(--color-gray-vvvlight);
-      color: var(--color-gray);
-      margin: 0 2px -1px 0;
+      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 {
-        background: var(--color-white);
         color: var(--color-black);
-        border-top: 1px solid var(--color-gray);
-        border-left: 1px solid var(--color-gray);
-        border-right: 1px solid var(--color-gray);
-        border-bottom: 1px solid transparent;
+        border-color: var(--color-editor-black);
       }
     }
   }
@@ -74,11 +81,10 @@
   min-height: 90vh;
   resize: vertical;
   padding: 8px;
-  border-radius: 6px;
-  border: 1px solid var(--color-gray-vlight);
+  border: 0;
   color: var(--color-black);
-  background-color: var(--color-gray-vvvlight);
+  background-color: var(--color-editor-gray-vvlight);
   &:focus {
-    background: var(--color-white);
+//    background: var(--color-white);
   }
 }
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index b67f93f17..4ed18a803 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -31,6 +31,10 @@ body {
   --color-border-input: #000000;
   --color-donator: #3496eb;
 
+  --color-editor-black: #000000;
+  --color-editor-gray-vvlight: #e7e7e7;
+  --color-editor-gray: #727272;
+
   --layout-margin-big-lg: 80px;
   --layout-margin-small-lg: 30px;
   --layout-margin-big-md: 50px;
@@ -74,6 +78,10 @@ body {
   --color-secondary-light: #7b9811;
   --color-border: #0f0f0f;
   --color-border-input: #7e7e7e;
+
+  --color-editor-black: #999999;
+  --color-editor-gray-vvlight: #505050;
+  --color-editor-gray: #FFFFFF;
 }
 
 ::-webkit-scrollbar {
@@ -187,4 +195,4 @@ button {
   input {
     color: white;
   }
-}
\ No newline at end of file
+}

From cde0deb0642a9181e805c0a33cff8b9811ef8548 Mon Sep 17 00:00:00 2001
From: Geoffrey MERRAN <geoffrey.merran@gmail.com>
Date: Fri, 23 Sep 2022 16:33:31 +0200
Subject: [PATCH 3/4] fix(article): editor tab button styles

---
 src/components/NFTArticle/NFTArticleEditor.module.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/NFTArticle/NFTArticleEditor.module.scss b/src/components/NFTArticle/NFTArticleEditor.module.scss
index de7eb2ce8..8786e8fe9 100644
--- a/src/components/NFTArticle/NFTArticleEditor.module.scss
+++ b/src/components/NFTArticle/NFTArticleEditor.module.scss
@@ -5,6 +5,7 @@
   flex-direction: row;
   z-index: 3;
   width: 100%;
+  margin-bottom: 16px;
   background: var(--color-white);
   position: sticky;
   top: 0;
@@ -44,6 +45,7 @@
       }
       &.view_active {
         color: var(--color-black);
+        background: var(--color-white);
         border-color: var(--color-editor-black);
       }
     }

From f4ded0be91539aba0fc7bea1b61c9b323cd38a82 Mon Sep 17 00:00:00 2001
From: Geoffrey MERRAN <geoffrey.merran@gmail.com>
Date: Mon, 3 Oct 2022 17:31:02 +0200
Subject: [PATCH 4/4] fix(article): detect incognito package switch to latest
 fix build

---
 package.json                                      | 2 +-
 src/containers/Article/Editor/AutosaveArticle.tsx | 2 +-
 yarn.lock                                         | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index c1ed9cbc3..d9145c400 100644
--- a/package.json
+++ b/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",
diff --git a/src/containers/Article/Editor/AutosaveArticle.tsx b/src/containers/Article/Editor/AutosaveArticle.tsx
index 97d9d9781..b242d2df8 100644
--- a/src/containers/Article/Editor/AutosaveArticle.tsx
+++ b/src/containers/Article/Editor/AutosaveArticle.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from "react"
-import { detectIncognito } from "detect-incognito"
+import { detectIncognito } from "detectincognitojs"
 import style from "./AutosaveArticle.module.scss"
 import effects from "../../../styles/Effects.module.scss"
 import text from "../../../styles/Colors.module.css"
diff --git a/yarn.lock b/yarn.lock
index 6e51a65f7..fc0495e3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1535,10 +1535,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-detect-incognito@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/detect-incognito/-/detect-incognito-1.0.0.tgz#24f8f1957ddc246ef7f602653a2d015c55a84657"
-  integrity sha512-o/58BwX8VdQJFICJlgwLchBw/0js1tWDYe/ygOZhyuMw5pviIkOseH+IYPeR8iceU36KPJyDDm93iRhnH9mIEg==
+detectincognitojs@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/detectincognitojs/-/detectincognitojs-1.1.2.tgz#d01d305da1a284bc1064ec3c169a3b535889e64b"
+  integrity sha512-7b+0/zJ76ZTeEtNl9MCPEKgFauEw/LerdlwnEnnrgYCFhp5FL+RJGD13EF/R9FYqrVxL7H5fgCyBdzJ6BtkPhg==
 
 diff@^5.0.0:
   version "5.0.0"