Skip to content

Commit eefceb1

Browse files
QingWei-LiQingWei-Li
authored
refactor: use the editor to render the sharing page (#82)
1 parent b5d7e60 commit eefceb1

File tree

16 files changed

+295
-423
lines changed

16 files changed

+295
-423
lines changed

‎components/container/post-container.tsx

Lines changed: 9 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
import { FC, useMemo } from 'react'
22
// TODO: Maybe can custom
33
import 'highlight.js/styles/zenburn.css'
4-
import { useEditorTheme } from 'components/editor/theme'
5-
import classNames from 'classnames'
6-
import useI18n from 'libs/web/hooks/use-i18n'
74
import UIState from 'libs/web/state/ui'
85
import InnerHTML from 'dangerously-set-html-content'
96
import { NoteModel } from 'libs/shared/note'
107
import pupa from 'pupa'
8+
import MainEditor from 'components/editor/main-editor'
9+
10+
const MAX_WIDTH = 900
1111

1212
export const PostContainer: FC<{
13-
post?: string
1413
small?: boolean
1514
note?: NoteModel
16-
}> = ({ post = '', small = false, note }) => {
17-
const { t } = useI18n()
18-
const editorTheme = useEditorTheme()
15+
}> = ({ small = false, note }) => {
1916
const {
2017
settings: {
2118
settings: { injection },
@@ -29,134 +26,22 @@ export const PostContainer: FC<{
2926
})
3027
}, [injection, note])
3128

32-
const articleClassName = useMemo(
33-
() =>
34-
classNames('prose mx-auto pb-10 prose-sm px-4 md:px-0', {
35-
'md:prose-2xl': !small,
36-
}),
37-
[small]
38-
)
29+
const className = 'pt-10 px-6 m-auto max-w-full w-[900px]'
3930

4031
return (
4132
<>
42-
<article className={articleClassName}>
43-
<header>
44-
<h1 className="pt-10">{note?.title ?? t('Untitled')}</h1>
45-
</header>
46-
<main
47-
dangerouslySetInnerHTML={{
48-
__html: post,
49-
}}
50-
></main>
51-
<style jsx>{`
52-
.prose :glboal(img) {
53-
margin: auto;
54-
}
55-
56-
.prose :glboal([title='left-50']) {
57-
float: left;
58-
width: 50%;
59-
margin-right: 2em;
60-
margin-bottom: 1em;
61-
clear: initial;
62-
}
63-
64-
.prose :glboal([title='right-50']) {
65-
float: right;
66-
width: 50%;
67-
margin-left: 2em;
68-
margin-bottom: 1em;
69-
clear: initial;
70-
}
71-
72-
.prose :glboal(figcaption) {
73-
text-align: center;
74-
}
75-
76-
.prose :global(.task-list-item) {
77-
padding-left: 0;
78-
}
79-
80-
.prose :global(.task-list-item::before) {
81-
content: none;
82-
}
83-
84-
.prose :global(.task-list-item label) {
85-
margin-left: 6px;
86-
}
87-
88-
.prose :global(.notice) {
89-
display: flex;
90-
align-items: center;
91-
background: ${editorTheme.noticeInfoBackground};
92-
color: ${editorTheme.noticeInfoText};
93-
border-radius: 4px;
94-
padding: 8px 16px;
95-
margin: 8px 0;
96-
}
97-
98-
.prose :global(.notice *) {
99-
margin: 0;
100-
color: currentColor;
101-
}
102-
103-
.prose :global(.notice .icon) {
104-
width: 1.5em;
105-
height: 1.5em;
106-
align-self: flex-start;
107-
margin-right: 4px;
108-
position: relative;
109-
top: 1px;
110-
}
111-
112-
.prose :global(.notice svg) {
113-
width: 100%;
114-
height: 100%;
115-
}
116-
117-
.prose :global(.notice .content) {
118-
flex-grow: 1;
119-
}
120-
121-
.prose :global(.notice a) {
122-
color: ${editorTheme.noticeInfoText};
123-
}
124-
.prose :global(.notice a:not(.heading-name)) {
125-
text-decoration: underline;
126-
}
127-
128-
.prose :global(.notice-tip) {
129-
background: ${editorTheme.noticeTipBackground};
130-
color: ${editorTheme.noticeTipText};
131-
}
132-
133-
.prose :global(.notice-tip a) {
134-
color: ${editorTheme.noticeTipText};
135-
}
136-
.prose :global(.notice-warning) {
137-
background: ${editorTheme.noticeWarningBackground};
138-
color: ${editorTheme.noticeWarningText};
139-
}
140-
141-
.prose: global(.notice-warning a) {
142-
color: ${editorTheme.noticeWarningText};
143-
}
144-
145-
.prose :global(table *) {
146-
margin: 0;
147-
}
148-
`}</style>
149-
</article>
33+
<MainEditor small={small} note={note} className={className} readOnly />
15034
{small ? null : (
15135
<>
15236
{injection ? (
15337
<InnerHTML
15438
id="snippet-injection"
155-
className={articleClassName}
39+
className={className}
40+
style={{ width: MAX_WIDTH }}
15641
html={injectionHTML}
15742
/>
15843
) : null}
159-
<footer className="text-gray-300 text-center my-20 text-sm">
44+
<footer className="pb-10 text-gray-300 text-center my-20 text-sm">
16045
Built with{' '}
16146
<a
16247
href="https://cinwell.com/notea/"

‎components/editor/edit-title.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
55
import { FC, useCallback, KeyboardEvent, useRef, useMemo } from 'react'
66
import EditorState from 'libs/web/state/editor'
77

8-
const EditTitle: FC = () => {
8+
const EditTitle: FC<{ readOnly?: boolean }> = ({ readOnly }) => {
99
const { editorEl, onNoteChange, note } = EditorState.useContainer()
1010
const router = useRouter()
1111
const inputRef = useRef<HTMLTextAreaElement>(null)
@@ -29,13 +29,13 @@ const EditTitle: FC = () => {
2929
)
3030

3131
const autoFocus = useMemo(() => has(router.query, 'new'), [router.query])
32-
3332
const { t } = useI18n()
3433

3534
return (
3635
<h1 className="text-3xl mb-8">
3736
<TextareaAutosize
3837
ref={inputRef}
38+
readOnly={readOnly}
3939
className="outline-none w-full resize-none block bg-transparent"
4040
placeholder={t('New Page')}
4141
defaultValue={note?.title}

‎components/editor/editor.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
22
import { use100vh } from 'react-div-100vh'
3-
import MarkdownEditor from 'rich-markdown-editor'
3+
import MarkdownEditor, { Props } from 'rich-markdown-editor'
44
import { useEditorTheme } from './theme'
55
import useMounted from 'libs/web/hooks/use-mounted'
66
import useI18n from 'libs/web/hooks/use-i18n'
@@ -9,7 +9,9 @@ import extensions from './extensions'
99
import EditorState from 'libs/web/state/editor'
1010
import { useToast } from 'libs/web/hooks/use-toast'
1111

12-
const Editor: FC = () => {
12+
export type EditorProps = Pick<Props, 'readOnly'>
13+
14+
const Editor: FC<EditorProps> = ({ readOnly }) => {
1315
const {
1416
onSearchLink,
1517
onCreateLink,
@@ -106,6 +108,7 @@ const Editor: FC = () => {
106108
return (
107109
<>
108110
<MarkdownEditor
111+
readOnly={readOnly}
109112
id={note?.id}
110113
ref={editorEl}
111114
value={mounted ? note?.content : ''}

‎components/editor/main-editor.tsx

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
import EditTitle from './edit-title'
2-
import Editor from './editor'
2+
import Editor, { EditorProps } from './editor'
33
import Backlinks from './backlinks'
44
import EditorState from 'libs/web/state/editor'
5+
import { FC } from 'react'
6+
import { NoteModel } from 'libs/shared/note'
57

6-
const MainEditor = () => {
8+
const MainEditor: FC<
9+
EditorProps & {
10+
note?: NoteModel
11+
small?: boolean
12+
className?: string
13+
}
14+
> = ({
15+
className = 'pt-40 px-6 m-auto h-full max-w-prose',
16+
note,
17+
small,
18+
...props
19+
}) => {
720
return (
8-
<EditorState.Provider>
9-
<article className="pt-40 px-6 m-auto h-full max-w-prose" dir="auto">
10-
<EditTitle />
11-
<Editor />
12-
<Backlinks />
21+
<EditorState.Provider initialState={note}>
22+
<article className={className}>
23+
<EditTitle readOnly={props.readOnly} />
24+
<Editor {...props} />
25+
{!small && <Backlinks />}
1326
</article>
1427
</EditorState.Provider>
1528
)

‎components/portal/preview-modal.tsx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
1-
import React, {
2-
FC,
3-
useCallback,
4-
useEffect,
5-
useMemo,
6-
useRef,
7-
useState,
8-
} from 'react'
1+
import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
92
import { Paper, Popper, Fade } from '@material-ui/core'
103
import PortalState from 'libs/web/state/portal'
114
import { useRouter } from 'next/router'
125
import { NoteCacheItem } from 'libs/web/cache'
136
import useNoteAPI from 'libs/web/api/note'
147
import { PostContainer } from 'components/container/post-container'
15-
import { renderMarkdown } from 'libs/shared/markdown/render'
168
import IconButton from 'components/icon-button'
179
import HotkeyTooltip from 'components/hotkey-tooltip'
1810
import useI18n from 'libs/web/hooks/use-i18n'
@@ -81,10 +73,6 @@ const PreviewModal: FC = () => {
8173
}
8274
}, [note?.id, router])
8375

84-
const post = useMemo(() => {
85-
return renderMarkdown(note?.content ?? '')
86-
}, [note?.content])
87-
8876
useEffect(() => {
8977
setAnchor(null)
9078
close()
@@ -123,7 +111,7 @@ const PreviewModal: FC = () => {
123111
</HotkeyTooltip>
124112
</div>
125113
<div className="overflow-y-scroll h-full p-4">
126-
<PostContainer small post={post} note={note}></PostContainer>
114+
<PostContainer small note={note}></PostContainer>
127115
</div>
128116
</Paper>
129117
</Fade>

‎libs/server/connect.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export interface ServerProps {
3636
tree?: TreeModel
3737
ua?: UserAgentType
3838
disablePassword: boolean
39-
post: string
4039
}
4140

4241
export type ApiRequest = NextApiRequest & {

‎libs/server/middlewares/post.ts

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎libs/shared/markdown/notice-plugin.tsx

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)