Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

refactor(rich-editor): integrate to works & style adjust#1138

Merged
mydearxym merged 5 commits intodevfromuser-adder
Aug 7, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletionsrc/components/Checker/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,6 +21,7 @@ type TProps = {
checked?: boolean
hiddenMode?: boolean
size?: TSIZE_SM
dimWhenIdle?: boolean
onChange?: (checked: boolean) => void
}

Expand All@@ -30,11 +31,16 @@ const Checker: FC<TProps> = ({
hiddenMode = false,
size = SIZE.MEDIUM,
children = null,
dimWhenIdle = false,
}) => {
const show = checked || !hiddenMode

return (
<Wrapper show={show} onClick={() => show && onChange(!checked)}>
<Wrapper
show={show}
dimWhenIdle={dimWhenIdle}
onClick={() => show && onChange(!checked)}
>
<IconWrapper checked={checked} size={size}>
<Icon src={`${ICON}/shape/checked.svg`} checked={checked} size={size} />
</IconWrapper>
Expand Down
10 changes: 9 additions & 1 deletionsrc/components/Checker/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,17 @@ import { getIconSize, getFontSize, getBorderRadius } from './metric'

type TItem = { checked: boolean; size: string }

export const Wrapper = styled.div<TActive>`
type TWrapper = { dimWhenIdle: boolean } & TActive
export const Wrapper = styled.div<TWrapper>`
${css.flex('align-center')};
visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
opacity: ${({ dimWhenIdle }) => (dimWhenIdle ? 0.7 : 1)};

&:hover {
fill: #00a59b;
opacity: 1;
cursor: pointer;
}
`
export const IconWrapper = styled.div<TItem>`
position: relative;
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@ import {
RouterWrapper,
Operations,
MoreIcon,
} from '../styles/desktop_view/article_editor_view'
} from '../styles/desktop_view/article_editor_layout'

const ArticleEditorHeader: FC<TProps> = ({ metric, c11n, community }) => {
return (
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,7 +18,7 @@ import {
RouterWrapper,
Operations,
MoreIcon,
} from '../styles/desktop_view/article_view'
} from '../styles/desktop_view/article_layout'

/* eslint-disable-next-line */
const log = buildLog('C:Header')
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ import {
ClassicInnerWrapper,
HolyGrailInnerWrapper,
RouterWrapper,
} from '../styles/desktop_view/community_view'
} from '../styles/desktop_view/community_layout'

/* eslint-disable-next-line */
const log = buildLog('C:Header')
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ import {
Wrapper,
InnerWrapper,
RouterWrapper,
} from '../styles/desktop_view/works_view'
} from '../styles/desktop_view/works_layout'

/* eslint-disable-next-line */
const log = buildLog('C:Header')
Expand Down
14 changes: 7 additions & 7 deletionssrc/components/Header/DesktopView/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,28 +3,28 @@ import { FC, memo } from 'react'
import { METRIC } from '@/constant'

import type { TProps } from '../index'
importCommunityView from './CommunityView'
importArticleView from './ArticleView'
importWorksView from './WorksView'
importCommunityLayout from './CommunityLayout'
importArticleLayout from './ArticleLayout'
importWorksLayout from './WorksLayout'
// import ArticleEditorView from './ArticleEditorView'

const DesktopView: FC<TProps> = (props) => {
const { metric } = props
switch (metric) {
case METRIC.ARTICLE: {
return <ArticleView {...props} />
return <ArticleLayout {...props} />
}
case METRIC.WORKS_ARTICLE: {
return <ArticleView {...props} />
return <ArticleLayout {...props} />
}
case METRIC.WORKS: {
return <WorksView {...props} />
return <WorksLayout {...props} />
}
// case METRIC.ARTICLE_EDITOR: {
// return <ArticleEditorView metric={metric} />
// }
default: {
return <CommunityView {...props} />
return <CommunityLayout {...props} />
}
}
}
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,9 +3,9 @@ import styled from 'styled-components'
import css from '@/utils/css'
import { WIDTH } from '@/utils/css/metric'

import { Wrapper as CommunityWrapper } from './community_view'
import { Wrapper as CommunityWrapper } from './community_layout'

export { RouterWrapper, MoreIcon } from './article_view'
export { RouterWrapper, MoreIcon } from './article_layout'

export const Wrapper = styled(CommunityWrapper)`
${css.flex('align-both')};
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,7 @@ import type { TMetric } from '@/spec'
import { theme } from '@/utils/themes'
import css from '@/utils/css'
import Img from '@/Img'
import { Wrapper as CommunityWrapper } from './community_view'
import { Wrapper as CommunityWrapper } from './community_layout'

import { getStickerJustify } from './metric'

Expand Down
30 changes: 30 additions & 0 deletionssrc/containers/editor/RichEditor/Header/ArticleLayout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
import { FC, memo, useState } from 'react'

import { SpaceGrow } from '@/components/Common'
import Checker from '@/components/Checker'
import Menu from '../Menu'

import { Wrapper, LinkWrapper, LinkInput } from '../styles/header'

const Header: FC = () => {
const [reprint, setReprint] = useState(false)

return (
<Wrapper>
<Checker checked={reprint} size="small" dimWhenIdle onChange={setReprint}>
转载 / 翻译
</Checker>

{reprint && (
<LinkWrapper>
<LinkInput placeholder="原文地址" />
</LinkWrapper>
)}

<SpaceGrow />
<Menu />
</Wrapper>
)
}

export default memo(Header)
24 changes: 24 additions & 0 deletionssrc/containers/editor/RichEditor/Header/WorksLayout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
import { FC, memo } from 'react'

import Checker from '@/components/Checker'
import Menu from '../Menu'

import { Wrapper } from '../styles/header'

const Header: FC = () => {
return (
<Wrapper>
<Checker
checked
size="small"
dimWhenIdle
// onChange={(checked) => toggleTemplate(checked)}
>
使用模板
</Checker>
<Menu />
</Wrapper>
)
}

export default memo(Header)
22 changes: 22 additions & 0 deletionssrc/containers/editor/RichEditor/Header/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
import { FC, memo } from 'react'

import ArticleLayout from './ArticleLayout'
import WorksLayout from './WorksLayout'

type TProps = {
type?: 'article' | 'works' | 'job' | 'comment' | 'radar'
}

const Header: FC<TProps> = ({ type }) => {
switch (type) {
case 'works': {
return <WorksLayout />
}

default: {
return <ArticleLayout />
}
}
}

export default memo(Header)
46 changes: 46 additions & 0 deletionssrc/containers/editor/RichEditor/Menu.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
import { FC, memo } from 'react'
import { ICON } from '@/config'

import IconButton from '@/components/Buttons/IconButton'
import MenuButton from '@/components/Buttons/MenuButton'

const menuOptions = [
{
key: 'quote',
icon: `${ICON}/article/import.svg`,
title: '导入内容',
},
{
key: 'share',
icon: `${ICON}/article/export.svg`,
title: '导出内容',
},
{
key: 'edit',
icon: `${ICON}/help.svg`,
title: '使用帮助',
},
]

const extraOptions = [
{
key: 'edit',
icon: `${ICON}/shape/ear.svg`,
title: '建议反馈',
},
]

const Menu: FC = () => {
return (
<MenuButton
options={menuOptions}
extraOptions={extraOptions}
placement="bottom-end"
onClick={console.log}
>
<IconButton path="shape/more.svg" mLeft={16} />
</MenuButton>
)
}

export default memo(Menu)
18 changes: 13 additions & 5 deletionssrc/containers/editor/RichEditor/RealEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,31 +10,39 @@ import { buildLog } from '@/utils/logger'
import { pluggedIn } from '@/utils/mobx'
import useScript from '@/hooks/useScript'

import Header from './Header'

import type { TStore } from './store'
import { useInit } from './logic'
// import * as logic from './logic'

importRichEditorStyle from './styles/global_styles'
import { Wrapper } from './styles'
importOverwriteStyle from './styles/overwrite'
import { Wrapper, EditorWrapper } from './styles'

/* eslint-disable-next-line */
const log = buildLog('C:RichEditor')

type TProps = {
richEditor?: TStore
type?: 'article' | 'works' | 'job' | 'comment' | 'radar'
}

const RichEditorContainer: FC<TProps> = ({ richEditor: store }) => {
const RichEditorContainer: FC<TProps> = ({
richEditor: store,
type = 'article',
}) => {
const [loaded] = useScript(
'https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest',
)

useInit(store, loaded)

// 使用模板 or 转载或翻译 or 请保持友善
return (
<Wrapper>
<RichEditorStyle />
<div id="codex-editor" />
<OverwriteStyle />
<Header type={type} />
<EditorWrapper id="codex-editor" />
</Wrapper>
)
}
Expand Down
13 changes: 7 additions & 6 deletionssrc/containers/editor/RichEditor/logic.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@ export const useInit = (_store, loaded) => {
* Id of Element that should contain Editor instance
*/
holderId: 'codex-editor',
placeholder: '// 正文介绍',
tools: {
header: Header,
quote: Quote,
Expand All@@ -63,12 +64,12 @@ export const useInit = (_store, loaded) => {
data: {
time: 1552744582955,
blocks: [
{
type: 'paragraph',
data: {
text: 'this is @',
},
},
//{
// type: 'paragraph',
// data: {
// text: 'this is @',
// },
//},
],
version: '2.11.10',
},
Expand Down
37 changes: 37 additions & 0 deletionssrc/containers/editor/RichEditor/styles/header.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
import styled from 'styled-components'

import Input from '@/components/Input'
import { theme } from '@/utils/themes'
import css from '@/utils/css'

export const Wrapper = styled.div`
${css.flex('align-center', 'justify-between')};
width: 100%;
/* border: 1px solid tomato; */
position: absolute;
top: 18px;
padding-left: 46px;
padding-right: 13px;
margin-top: 8px;
`
export const LinkWrapper = styled.div`
width: 260px;
margin-left: 15px;
`
export const LinkInput = styled(Input)`
display: block;
margin-top: -2px;
border-radius: 0;
border-top: none;
border-left: none;
border-right: none;
color: #486368;
padding: 2px 5px;
height: 20px;
font-size: 13px;

&::placeholder {
font-size: 12px;
}
`
export const holder = 1
18 changes: 15 additions & 3 deletionssrc/containers/editor/RichEditor/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,19 @@ import styled from 'styled-components'
import { theme } from '@/utils/themes'

export const Wrapper = styled.div`
background: ${theme('bodyBg')};
width: 652px;
position: relative;
//${theme('bodyBg')};
width: 100%;
min-width: 650px;
/* padding: 10px 40px; */
`
export const EditorWrapper = styled.div`
border: 1px solid #003442;
padding-top: 55px;
padding-bottom: 32px;
padding-left: 44px;
padding-right: 44px;
background: #052630;
border-radius: 18px;
/* border: 1px solid #003442; */
`
export const Title = styled.div``
Loading
[8]ページ先頭
©2009-2025 Movatter.jp