refactor: use the editor to render the sharing page (#82)

components/container/post-container.tsx

@@ -1,21 +1,18 @@
 import { FC, useMemo } from 'react'
 // TODO: Maybe can custom
 import 'highlight.js/styles/zenburn.css'
-import { useEditorTheme } from 'components/editor/theme'
-import classNames from 'classnames'
-import useI18n from 'libs/web/hooks/use-i18n'
 import UIState from 'libs/web/state/ui'
 import InnerHTML from 'dangerously-set-html-content'
 import { NoteModel } from 'libs/shared/note'
 import pupa from 'pupa'
+import MainEditor from 'components/editor/main-editor'
+
+const MAX_WIDTH = 900
 
 export const PostContainer: FC<{
-  post?: string
   small?: boolean
   note?: NoteModel
-}> = ({ post = '', small = false, note }) => {
-  const { t } = useI18n()
-  const editorTheme = useEditorTheme()
+}> = ({ small = false, note }) => {
   const {
     settings: {
       settings: { injection },
@@ -29,134 +26,22 @@ export const PostContainer: FC<{
     })
   }, [injection, note])
 
-  const articleClassName = useMemo(
-    () =>
-      classNames('prose mx-auto pb-10 prose-sm px-4 md:px-0', {
-        'md:prose-2xl': !small,
-      }),
-    [small]
-  )
+  const className = 'pt-10 px-6 m-auto max-w-full w-[900px]'
 
   return (
     <>
-      <article className={articleClassName}>
-        <header>
-          <h1 className="pt-10">{note?.title ?? t('Untitled')}</h1>
-        </header>
-        <main
-          dangerouslySetInnerHTML={{
-            __html: post,
-          }}
-        ></main>
-        <style jsx>{`
-          .prose :glboal(img) {
-            margin: auto;
-          }
-
-          .prose :glboal([title='left-50']) {
-            float: left;
-            width: 50%;
-            margin-right: 2em;
-            margin-bottom: 1em;
-            clear: initial;
-          }
-
-          .prose :glboal([title='right-50']) {
-            float: right;
-            width: 50%;
-            margin-left: 2em;
-            margin-bottom: 1em;
-            clear: initial;
-          }
-
-          .prose :glboal(figcaption) {
-            text-align: center;
-          }
-
-          .prose :global(.task-list-item) {
-            padding-left: 0;
-          }
-
-          .prose :global(.task-list-item::before) {
-            content: none;
-          }
-
-          .prose :global(.task-list-item label) {
-            margin-left: 6px;
-          }
-
-          .prose :global(.notice) {
-            display: flex;
-            align-items: center;
-            background: ${editorTheme.noticeInfoBackground};
-            color: ${editorTheme.noticeInfoText};
-            border-radius: 4px;
-            padding: 8px 16px;
-            margin: 8px 0;
-          }
-
-          .prose :global(.notice *) {
-            margin: 0;
-            color: currentColor;
-          }
-
-          .prose :global(.notice .icon) {
-            width: 1.5em;
-            height: 1.5em;
-            align-self: flex-start;
-            margin-right: 4px;
-            position: relative;
-            top: 1px;
-          }
-
-          .prose :global(.notice svg) {
-            width: 100%;
-            height: 100%;
-          }
-
-          .prose :global(.notice .content) {
-            flex-grow: 1;
-          }
-
-          .prose :global(.notice a) {
-            color: ${editorTheme.noticeInfoText};
-          }
-          .prose :global(.notice a:not(.heading-name)) {
-            text-decoration: underline;
-          }
-
-          .prose :global(.notice-tip) {
-            background: ${editorTheme.noticeTipBackground};
-            color: ${editorTheme.noticeTipText};
-          }
-
-          .prose :global(.notice-tip a) {
-            color: ${editorTheme.noticeTipText};
-          }
-          .prose :global(.notice-warning) {
-            background: ${editorTheme.noticeWarningBackground};
-            color: ${editorTheme.noticeWarningText};
-          }
-
-          .prose: global(.notice-warning a) {
-            color: ${editorTheme.noticeWarningText};
-          }
-
-          .prose :global(table *) {
-            margin: 0;
-          }
-        `}</style>
-      </article>
+      <MainEditor small={small} note={note} className={className} readOnly />
       {small ? null : (
         <>
           {injection ? (
             <InnerHTML
               id="snippet-injection"
-              className={articleClassName}
+              className={className}
+              style={{ width: MAX_WIDTH }}
               html={injectionHTML}
             />
           ) : null}
-          <footer className="text-gray-300 text-center my-20 text-sm">
+          <footer className="pb-10 text-gray-300 text-center my-20 text-sm">
             Built with{' '}
             <a
               href="https://cinwell.com/notea/"

components/editor/edit-title.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import { FC, useCallback, KeyboardEvent, useRef, useMemo } from 'react'
 import EditorState from 'libs/web/state/editor'
 
-const EditTitle: FC = () => {
+const EditTitle: FC<{ readOnly?: boolean }> = ({ readOnly }) => {
   const { editorEl, onNoteChange, note } = EditorState.useContainer()
   const router = useRouter()
   const inputRef = useRef<HTMLTextAreaElement>(null)
@@ -29,13 +29,13 @@ const EditTitle: FC = () => {
   )
 
   const autoFocus = useMemo(() => has(router.query, 'new'), [router.query])
-
   const { t } = useI18n()
 
   return (
     <h1 className="text-3xl mb-8">
       <TextareaAutosize
         ref={inputRef}
+        readOnly={readOnly}
         className="outline-none w-full resize-none block bg-transparent"
         placeholder={t('New Page')}
         defaultValue={note?.title}

components/editor/editor.tsx

@@ -1,6 +1,6 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { use100vh } from 'react-div-100vh'
-import MarkdownEditor from 'rich-markdown-editor'
+import MarkdownEditor, { Props } from 'rich-markdown-editor'
 import { useEditorTheme } from './theme'
 import useMounted from 'libs/web/hooks/use-mounted'
 import useI18n from 'libs/web/hooks/use-i18n'
@@ -9,7 +9,9 @@ import extensions from './extensions'
 import EditorState from 'libs/web/state/editor'
 import { useToast } from 'libs/web/hooks/use-toast'
 
-const Editor: FC = () => {
+export type EditorProps = Pick<Props, 'readOnly'>
+
+const Editor: FC<EditorProps> = ({ readOnly }) => {
   const {
     onSearchLink,
     onCreateLink,
@@ -106,6 +108,7 @@ const Editor: FC = () => {
   return (
     <>
       <MarkdownEditor
+        readOnly={readOnly}
         id={note?.id}
         ref={editorEl}
         value={mounted ? note?.content : ''}

components/editor/main-editor.tsx

@@ -1,15 +1,28 @@
 import EditTitle from './edit-title'
-import Editor from './editor'
+import Editor, { EditorProps } from './editor'
 import Backlinks from './backlinks'
 import EditorState from 'libs/web/state/editor'
+import { FC } from 'react'
+import { NoteModel } from 'libs/shared/note'
 
-const MainEditor = () => {
+const MainEditor: FC<
+  EditorProps & {
+    note?: NoteModel
+    small?: boolean
+    className?: string
+  }
+> = ({
+  className = 'pt-40 px-6 m-auto h-full max-w-prose',
+  note,
+  small,
+  ...props
+}) => {
   return (
-    <EditorState.Provider>
-      <article className="pt-40 px-6 m-auto h-full max-w-prose" dir="auto">
-        <EditTitle />
-        <Editor />
-        <Backlinks />
+    <EditorState.Provider initialState={note}>
+      <article className={className}>
+        <EditTitle readOnly={props.readOnly} />
+        <Editor {...props} />
+        {!small && <Backlinks />}
       </article>
     </EditorState.Provider>
   )

components/portal/preview-modal.tsx

@@ -1,18 +1,10 @@
-import React, {
-  FC,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { Paper, Popper, Fade } from '@material-ui/core'
 import PortalState from 'libs/web/state/portal'
 import { useRouter } from 'next/router'
 import { NoteCacheItem } from 'libs/web/cache'
 import useNoteAPI from 'libs/web/api/note'
 import { PostContainer } from 'components/container/post-container'
-import { renderMarkdown } from 'libs/shared/markdown/render'
 import IconButton from 'components/icon-button'
 import HotkeyTooltip from 'components/hotkey-tooltip'
 import useI18n from 'libs/web/hooks/use-i18n'
@@ -81,10 +73,6 @@ const PreviewModal: FC = () => {
     }
   }, [note?.id, router])
 
-  const post = useMemo(() => {
-    return renderMarkdown(note?.content ?? '')
-  }, [note?.content])
-
   useEffect(() => {
     setAnchor(null)
     close()
@@ -123,7 +111,7 @@ const PreviewModal: FC = () => {
               </HotkeyTooltip>
             </div>
             <div className="overflow-y-scroll h-full p-4">
-              <PostContainer small post={post} note={note}></PostContainer>
+              <PostContainer small note={note}></PostContainer>
             </div>
           </Paper>
         </Fade>

libs/server/connect.ts

@@ -36,7 +36,6 @@ export interface ServerProps {
   tree?: TreeModel
   ua?: UserAgentType
   disablePassword: boolean
-  post: string
 }
 
 export type ApiRequest = NextApiRequest & {