refactor(editor): rich editor integrate (#1161)

* chore(editor): basic debug version

* chore: editor plugin debug

* chore: editor list debug

* chore: editor table styles

* chore(editor): plugin merge in

* chore(editor): plugin debug wip

* chore(editor): plugin debug wip

* chore(editor): overwrite styles

* chore(editor): update to latest

* chore(editor): overwrite styles

* refactor(comments): adjust heart emotion

* style(editor): adjust image plugin

* chore(editor): update

* refactor(editor): re-org ArticleEditor

* refactor(editor): basic publish note

* refactor(editor): add community badge & adjust styles

* refactor(editor): adjust rules & styles

* chore: wip

* refactor(blog-editor): basic UX

* refactor(blog-editor): feeditem UX adjust

* refactor(blog-editor): wip

* chore: wip

* refactor(blog-editor): improve error handler

* refactor(error-box): style adjust

* refactor: new site logo!

* refactor: new site logo!

* chore(editor): bump version

* chore(editor): community badge & style adjust

Author: mydearxym

.eslintrc.js

@@ -41,6 +41,7 @@ module.exports = {
     },
   },
   rules: {
+    'react/require-default-props': 0,
     '@typescript-eslint/no-var-requires': 0,
     '@typescript-eslint/ban-ts-comment': 0,
     'no-setter-return': 0,

package-lock.json

@@ -41,15 +41,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.13.14",
-    "@editorjs/checklist": "^1.1.0",
-    "@editorjs/delimiter": "^1.1.0",
-    "@editorjs/editorjs": "^2.15.0",
-    "@editorjs/header": "^2.3.0",
-    "@editorjs/inline-code": "^1.3.0",
-    "@editorjs/list": "^1.4.0",
-    "@editorjs/marker": "^1.2.1",
-    "@groupher/editor-header": "^2.3.0",
-    "@groupher/editor-quote": "^2.3.0",
+    "@groupher/react-editor": "^1.1.25",
     "@next/bundle-analyzer": "^9.4.4",
     "@sentry/browser": "5.17.0",
     "@sentry/node": "5.17.0",
@@ -66,10 +58,6 @@
     "cookie-parser": "^1.4.4",
     "core-js": "3.6.5",
     "cross-env": "^7.0.2",
-    "draft-js": "^0.10.5",
-    "draft-js-linkify-plugin": "^2.0.1",
-    "draft-js-mention-plugin": "3.1.3",
-    "draft-js-plugins-editor": "2.1.1",
     "express": "^4.16.4",
     "glob": "^7.1.2",
     "graphql": "^15.5.1",
@@ -94,7 +82,7 @@
     "promise-timeout": "^1.3.0",
     "prop-types": "^15.5.10",
     "pubsub-js": "^1.9.3",
-    "qrcode-react": "^0.1.16",
+    "qrcode.react": "^1.0.1",
     "ramda": "0.26.1",
     "react": "17.0.2",
     "react-animation": "^1.2.2",

package.json

@@ -113,7 +113,12 @@ router.route('/create/article').get((req, res) => {
   return renderAndCache({ req, res, page: '/create/article' })
 })
 
-// 创建新社区
+// 创建新博客
+router.route('/create/blog').get((req, res) => {
+  return renderAndCache({ req, res, page: '/create/blog' })
+})
+
+// 创建新作品
 router.route('/create/works').get((req, res) => {
   return renderAndCache({ req, res, page: '/create/works' })
 })

server/routes.js

@@ -9,6 +9,7 @@ import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
 import UpvoteIcon from '@/icons/Upvote'
+import EditPenIcon from '@/icons/EditPen'
 import LockIcon from '@/icons/Lock'
 import ExpandIcon from '@/icons/Expand'
 import FoldIcon from '@/icons/Fold'
@@ -49,6 +50,10 @@ export const getIcon = (type: string): FC<TIcon> => {
       return getStyledIcon(UpvoteIcon)
     }
 
+    case SVG.EDIT_PEN: {
+      return getStyledIcon(EditPenIcon)
+    }
+
     case SVG.LOCK: {
       return getStyledIcon(LockIcon)
     }

src/components/Buttons/styles/icon_button.ts

@@ -7,7 +7,6 @@
 import { FC, memo } from 'react'
 import { isEmpty } from 'ramda'
 
-import { SITE_LOGO } from '@/config'
 import { HCN } from '@/constant'
 // import { ICON_BASE } from '@/config'
 import { buildLog } from '@/utils/logger'
@@ -33,7 +32,7 @@ const CommunityFaceLogo: FC<TProps> = ({
   className = 'community-facelogo-class',
 }) => {
   if (raw === HCN || isEmpty(src)) {
-    return <HomeLogo src={SITE_LOGO} className={className} />
+    return <HomeLogo className={className} />
   }
 
   return (

src/components/CommunityFaceLogo/index.tsx

@@ -2,12 +2,14 @@ import styled from 'styled-components'
 
 import { theme } from '@/utils/themes'
 import Img from '@/Img'
+import SiteLogo from '@/icons/CPLogo'
 
 export const Logo = styled(Img)<{ noFill?: boolean }>`
   fill: ${({ noFill }) => (noFill ? '' : theme('banner.desc'))};
   display: block;
 `
 
-export const HomeLogo = styled(Logo)`
-  transform: rotate(20deg);
+export const HomeLogo = styled(SiteLogo)`
+  fill: #007fa8;
+  filter: saturate(0.8);
 `

src/components/CommunityFaceLogo/styles/index.ts

@@ -3,18 +3,25 @@ import { values } from 'ramda'
 
 import { EMOTION } from '@/constant'
 import { ICON } from '@/config'
-import { Wrapper, EIcon } from './styles/panel'
+import { Wrapper, Item, EIcon, Name } from './styles/panel'
+
+const Trans = {
+  downvote: '踩',
+  beer: '啤酒',
+  heart: '感谢',
+  confused: '狗头',
+  popcorn: '吃瓜',
+  pill: '药丸',
+}
 
 const EmojiPanel: FC = () => {
   return (
     <Wrapper>
       {values(EMOTION).map((item) => (
-        <EIcon
-          key={item}
-          src={`${ICON}/emotion/${item}.png`}
-          name={item}
-          noLazy
-        />
+        <Item key={item} name={item}>
+          <EIcon src={`${ICON}/emotion/${item}.png`} name={item} noLazy />
+          <Name>{Trans[item]}</Name>
+        </Item>
       ))}
     </Wrapper>
   )

src/components/EmotionSelector/Panel.tsx

@@ -46,7 +46,7 @@ const EmotionSelector: FC<TProps> = ({
   return (
     <Wrapper testid={testid}>
       <SelectedEmotions emotions={emotionsCoverter(emotions)} />
-      <Tooltip content={<Panel />} trigger="click">
+      <Tooltip content={<Panel />} trigger="click" noPadding>
         <IconButton path="emotion/emotion.svg" mRight={0} mTop={1} />
       </Tooltip>
     </Wrapper>

src/components/EmotionSelector/index.tsx

@@ -2,24 +2,40 @@ import styled from 'styled-components'
 
 import Img from '@/Img'
 import css from '@/utils/css'
+import { theme } from '@/utils/themes'
 
 export const Wrapper = styled.div`
   ${css.flex('align-center', 'justify-center')};
-  width: 200px;
+  width: 230px;
+  padding: 8px 10px;
+  padding-top: 12px;
+`
+export const Item = styled.div<{ name: string }>`
+  ${css.flexColumn('align-center', 'justify-center')};
+  margin-right: ${({ name }) => (name === 'pill' ? 0 : '15px')};
 `
 export const EIcon = styled(Img)<{ name: string }>`
   margin-top: ${({ name }) => (name === 'downvote' ? '2px' : 0)};
   ${({ name }) =>
     name === 'confused' || name === 'popcorn' ? css.size(21) : css.size(20)};
-  margin-right: ${({ name }) => (name === 'pill' ? 0 : '15px')};
 
   filter: saturate(0.6);
   opacity: 0.9;
   z-index: 1;
 
-  &:hover {
+  ${Item}:hover & {
     cursor: pointer;
     filter: saturate(1);
     opacity: 1;
   }
 `
+export const Name = styled.div`
+  font-size: 11px;
+  margin-top: 5px;
+  color: ${theme('thread.articleDigest')};
+
+  ${Item}:hover & {
+    cursor: pointer;
+    color: ${theme('thread.articleTitle')};
+  }
+`