* {
17 | display: inline-block;
18 | }
19 | `}
20 | />
21 | );
22 |
23 | export default Menu;
24 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/LayoutHeader/Toolbar/NoteButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Dropdown, Menu } from 'antd';
3 | import { ClickParam } from 'antd/lib/menu';
4 | import { useEditure } from 'editure-react';
5 | import { selectLastPoint } from 'editure';
6 | import { NOTE } from 'editure-constants';
7 |
8 | import { IEditor, syncDOMSelection } from 'utils/editor';
9 | import { levels } from 'utils/note';
10 | import IconFont from 'components/IconFont';
11 |
12 | import Button from './Button';
13 | import ToolbarIcon from './ToolbarIcon';
14 |
15 | const NoteButton = () => {
16 | const editor = useEditure() as IEditor;
17 |
18 | const handleClick = (e: ClickParam) => {
19 | selectLastPoint(editor);
20 | editor.toggleBlock(NOTE, { level: e.key });
21 |
22 | syncDOMSelection(editor);
23 | };
24 |
25 | const menu = (
26 |
34 | );
35 |
36 | return (
37 |
38 |
41 |
42 | );
43 | };
44 |
45 | export default NoteButton;
46 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/LayoutHeader/Toolbar/SaveButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { useDispatch } from 'react-redux';
3 |
4 | import { ButtonRefsContext } from 'utils/hotkeys';
5 | import { Dispatch } from 'store';
6 |
7 | import Button from './Button';
8 | import ToolbarIcon from './ToolbarIcon';
9 |
10 | const SaveButton = () => {
11 | const dispatch = useDispatch
();
12 | const { saveBtnRef: ref } = useContext(ButtonRefsContext);
13 |
14 | const onClick = () => {
15 | dispatch.collection.save({ showMessage: true });
16 | };
17 |
18 | return (
19 |
22 | );
23 | };
24 |
25 | export default SaveButton;
26 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/LayoutHeader/Toolbar/SelectContentType.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Select } from 'antd';
3 | import { useEditure } from 'editure-react';
4 | import { H1, H2, H3, H4, H5, PARAGRAPH } from 'editure-constants';
5 |
6 | import { IEditor, syncDOMSelection } from 'utils/editor';
7 | import IconFont from 'components/IconFont';
8 |
9 | /** @jsx jsx */
10 | import { css, jsx } from '@emotion/core';
11 |
12 | const { Option } = Select;
13 |
14 | type ContentType = {
15 | name: string;
16 | fontSize: string;
17 | fontWeight: number;
18 | };
19 |
20 | const types: Record = {
21 | [H1]: { name: '标题 1', fontSize: '24px', fontWeight: 500 },
22 | [H2]: { name: '标题 2', fontSize: '22px', fontWeight: 500 },
23 | [H3]: { name: '标题 3', fontSize: '20px', fontWeight: 500 },
24 | [H4]: { name: '标题 4', fontSize: '18px', fontWeight: 500 },
25 | [H5]: { name: '标题 5', fontSize: '16px', fontWeight: 500 },
26 | [PARAGRAPH]: { name: '正文', fontSize: '14px', fontWeight: 400 },
27 | };
28 |
29 | const SelectContentType = () => {
30 | const editor = useEditure() as IEditor;
31 | const type = editor.detectBlockFormat(Object.keys(types)) || PARAGRAPH;
32 |
33 | const handleChange = (value: string) => {
34 | editor.toggleBlock(value);
35 | syncDOMSelection(editor);
36 | };
37 |
38 | const suffixIcon = ;
39 |
40 | return (
41 |
73 | );
74 | };
75 |
76 | export default SelectContentType;
77 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/LayoutHeader/Toolbar/SplitLine.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /** @jsx jsx */
4 | import { css, jsx } from '@emotion/core';
5 |
6 | const SplitLine = () => {
7 | return (
8 |
16 | |
17 |
18 | );
19 | };
20 |
21 | export default SplitLine;
22 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/LayoutHeader/Toolbar/ToolbarIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip } from 'antd';
3 |
4 | /** @jsx jsx */
5 | import { css, jsx } from '@emotion/core';
6 |
7 | import IconFont from 'components/IconFont';
8 |
9 | type ToolbarIconProps = {
10 | isActive?: boolean;
11 | icon: string;
12 | title: string;
13 | };
14 |
15 | const ToolbarIcon = ({ isActive = false, icon, title }: ToolbarIconProps) => (
16 |
17 |
32 |
33 | );
34 |
35 | export default ToolbarIcon;
36 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/LayoutHeader/Toolbar/index.tsx:
--------------------------------------------------------------------------------
1 | import * as F from 'editure-constants';
2 |
3 | /** @jsx jsx */
4 | import { css, jsx } from '@emotion/core';
5 |
6 | import React from 'react';
7 | import Menu from './Menu';
8 | import EditLink from './EditLink';
9 | import SplitLine from './SplitLine';
10 | import SaveButton from './SaveButton';
11 | import MarkButton from './MarkButton';
12 | import BlockButton from './BlockButton';
13 | import ImageButton from './ImageButton';
14 | import HrButton from './HrButton';
15 | import NoteButton from './NoteButton';
16 | import LinkButton from './LinkButton';
17 | import HistoryButton from './HistoryButton';
18 | import SelectContentType from './SelectContentType';
19 |
20 | const Toolbar = (props: { [prop: string]: any }) => {
21 | return (
22 |
84 | );
85 | };
86 |
87 | export default Toolbar;
88 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/LayoutHeader/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /** @jsx jsx */
4 | import { css, jsx } from '@emotion/core';
5 | import { Button, Row, Col, Breadcrumb } from 'antd';
6 | import { useDispatch, useSelector } from 'react-redux';
7 | import { useRouteMatch, Link } from 'react-router-dom';
8 |
9 | import ToolBar from './Toolbar';
10 | import SyncModal from './SyncModal';
11 | import LastSavedTimestamp from './LastSavedTimestamp';
12 |
13 | import { Dispatch, RootState } from 'store';
14 |
15 | function LayoutHeader() {
16 | const dispatch = useDispatch();
17 | const { meta } = useSelector((state: RootState) => state.collection);
18 | const { name = '' } = meta || {};
19 |
20 | const isSavingToc = useSelector(
21 | (state: RootState) => state.loading.effects.toc.save,
22 | );
23 | const isSyncing = useSelector(
24 | (state: RootState) => state.loading.effects.sync.sync,
25 | );
26 |
27 | const isToc = useRouteMatch('/toc');
28 |
29 | function handleSaveToc() {
30 | dispatch.toc.save(true);
31 | }
32 |
33 | return (
34 |
35 |
36 | {isToc ? (
37 |
42 |
43 | {name}
44 |
45 | 文集目录
46 |
47 | ) : (
48 |
49 | )}
50 |
51 |
52 | {!isToc && }
53 |
54 |
55 | {isToc ? (
56 |
59 | ) : (
60 |
61 |
71 |
72 |
73 | )}
74 |
75 |
76 | );
77 | }
78 |
79 | export default LayoutHeader;
80 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ConnectedLayout/MainMenu.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Layout, Menu, Icon } from 'antd';
3 | import { ClickParam } from 'antd/lib/menu';
4 |
5 | import { useSelector, useDispatch } from 'react-redux';
6 | import { useHistory } from 'react-router-dom';
7 |
8 | /** @jsx jsx */
9 | import { css, jsx } from '@emotion/core';
10 |
11 | import logo from 'assets/images/logo.svg';
12 | import {
13 | COLLECTION_CATALOGUE,
14 | COLLECTION_SETTING,
15 | CONTACT_US,
16 | } from 'utils/constants';
17 | import { Dispatch, RootState } from 'store';
18 |
19 | const { Sider } = Layout;
20 |
21 | const mapKeyToDrawerType: { [key: string]: string } = {
22 | '1': COLLECTION_CATALOGUE,
23 | '3': COLLECTION_SETTING,
24 | '4': CONTACT_US,
25 | };
26 |
27 | function MainMenu() {
28 | const dispatch = useDispatch();
29 | const { visible, drawerType, childrenVisible, selectedKeys } = useSelector(
30 | (state: RootState) => state.drawer,
31 | );
32 | const history = useHistory();
33 |
34 | function onMenuClick({ key }: ClickParam) {
35 | if (key === '2') {
36 | dispatch.drawer.setVisible(false);
37 | dispatch.drawer.setSelectedKeys([key]);
38 | history.push('/toc');
39 |
40 | return;
41 | }
42 |
43 | const toggleDrawerType = mapKeyToDrawerType[key];
44 |
45 | if (!visible) {
46 | dispatch.drawer.setVisible(true);
47 | dispatch.drawer.setDrawerType(toggleDrawerType);
48 | dispatch.drawer.setSelectedKeys([key]);
49 | } else {
50 | if (drawerType === toggleDrawerType) {
51 | dispatch.drawer.setVisible(false);
52 | dispatch.drawer.setSelectedKeys([]);
53 | } else {
54 | dispatch.drawer.setDrawerType(toggleDrawerType);
55 | dispatch.drawer.setSelectedKeys([key]);
56 | }
57 | }
58 |
59 | if (childrenVisible) {
60 | dispatch.drawer.setChildrenVisible(false);
61 | }
62 | }
63 |
64 | return (
65 |
75 |
83 |
93 |
52 |
53 |
69 |
70 |
77 |
96 |
112 | {IS_MAC ? '按 ⌘+↩ 退出' : '按 ⌃+↩ 退出'}
113 |
114 |
115 |
97 | {children}
98 |
99 | );
100 | }
101 |
102 | export default ExplainElement;
103 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Editure/element/Hr.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSelected, useFocused } from 'editure-react';
3 |
4 | /** @jsx jsx */
5 | import { css, jsx } from '@emotion/core';
6 | import { ElementProps } from './index';
7 |
8 | function HrElement({ attributes, children }: ElementProps) {
9 | const selected = useSelected();
10 | const focused = useFocused();
11 |
12 | return (
13 |
20 | {children}
21 |
22 | );
23 | }
24 |
25 | export default HrElement;
26 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Editure/element/Image.tsx:
--------------------------------------------------------------------------------
1 | import { Spin, message } from 'antd';
2 | import React, { useState, useEffect } from 'react';
3 | import { Transforms, Node } from 'editure';
4 | import { IMAGE } from 'editure-constants';
5 | import { useFocused, useSelected, useEditure } from 'editure-react';
6 |
7 | /** @jsx jsx */
8 | import { css, jsx } from '@emotion/core';
9 | import { ElementProps } from './index';
10 | import { uploadImage } from 'utils/image';
11 | import { IEditor } from 'utils/editor';
12 |
13 | function ImageElement(props: ElementProps) {
14 | const { attributes, children, element } = props;
15 | const { url, file } = element;
16 |
17 | const editor = useEditure() as IEditor;
18 | const selected = useSelected();
19 | const focused = useFocused();
20 |
21 | const [uploading, setUploading] = useState(false);
22 |
23 | useEffect(() => {
24 | if (url.startsWith('data:image')) {
25 | setUploading(true);
26 |
27 | uploadImage(file, (err, hostingUrl) => {
28 | setUploading(false);
29 |
30 | if (err) {
31 | return message.error('图片上传失败！');
32 | }
33 |
34 | for (const [node, path] of Node.nodes(editor, { reverse: true })) {
35 | if (node.type === IMAGE && node.url === url) {
36 | Transforms.setNodes(editor, { url: hostingUrl }, { at: path });
37 | Transforms.unsetNodes(editor, ['file'], { at: path });
38 | break;
39 | }
40 | }
41 | });
42 | }
43 | }, [editor, file, url]);
44 |
45 | return (
46 |
47 |
48 |
49 |
62 |
63 | {children}
64 |
64 |
65 |
94 |
95 |
101 | {children}
102 |
103 |
119 | {IS_MAC ? '按 ⌘+↩ 退出' : '按 ⌃+↩ 退出'}
120 |
121 |
40 | {children}
41 |
42 | );
43 | case F.LIST_ITEM:
44 | return ;
45 | case F.BULLETED_LIST:
46 | return (
47 |
55 | );
56 | case F.NUMBERED_LIST:
57 | return (
58 |
64 | {children}
65 |
66 | );
67 | case F.H1:
68 | return (
69 |
70 | {children}
71 |
72 | );
73 | case F.H2:
74 | return (
75 |
76 | {children}
77 |
78 | );
79 | case F.H3:
80 | return (
81 |
82 | {children}
83 |
84 | );
85 | case F.H4:
86 | return (
87 |
88 | {children}
89 |
90 | );
91 | case F.H5:
92 | return (
93 |
94 | {children}
95 |
96 | );
97 | case F.CODE_BLOCK:
98 | return ;
99 | case F.CODE_LINE:
100 | return (
101 |
102 | |
109 | {children}
110 | |
111 |
112 | );
113 | case F.NOTE:
114 | return ;
115 | case F.IMAGE:
116 | return ;
117 | case F.HR:
118 | return ;
119 | case EXPLAIN:
120 | return ;
121 | case DIFF_BLOCK:
122 | return ;
123 |
124 | case STEP:
125 | case STEP_START:
126 | case STEP_END:
127 | case FILE_START:
128 | case FILE_END:
129 | case FILE:
130 | return ;
131 |
132 | default:
133 | return {children}
;
134 | }
135 | };
136 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Editure/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react';
2 |
3 | /** @jsx jsx */
4 | import { jsx } from '@emotion/core';
5 | import { Node, Path, Point } from 'editure';
6 | import { Editable, useEditure } from 'editure-react';
7 | import { useSelector } from 'react-redux';
8 | import { AST } from 'refractor';
9 |
10 | import { RootState } from 'store';
11 | import { IEditor } from 'utils/editor';
12 | import { createDropListener } from 'utils/image';
13 | import { createHotKeysHandler } from 'utils/hotkeys';
14 |
15 | import Element from './element';
16 | import Leaf from './leaf';
17 | import { getCodeTree, wrapLinesInSpan } from '../Highlight/highlight';
18 |
19 | interface Decoration {
20 | anchor: Point;
21 | focus: Point;
22 | className: string[];
23 | codeHighlight: boolean;
24 | }
25 |
26 | function createDecoration(props: {
27 | path: Path;
28 | textStart: number;
29 | textEnd: number;
30 | className: string[];
31 | }): Decoration {
32 | const { path, textStart, textEnd, className } = props;
33 |
34 | return {
35 | anchor: { path, offset: textStart },
36 | focus: { path, offset: textEnd },
37 | className,
38 | codeHighlight: true,
39 | };
40 | }
41 |
42 | function Editure() {
43 | const editor = useEditure() as IEditor;
44 | const lang = useSelector((state: RootState) => state.slate.lang);
45 |
46 | const renderElement = useCallback(Element, [lang]);
47 | const renderLeaf = useCallback(Leaf, [lang]);
48 |
49 | const hotKeyHandler = createHotKeysHandler(editor);
50 | const dropListener = createDropListener(editor);
51 |
52 | const decorate = useCallback(
53 | ([node, path]) => {
54 | const ranges: Decoration[] = [];
55 |
56 | const lang = node.lang;
57 | if (!lang) {
58 | return ranges;
59 | }
60 |
61 | let code = '';
62 |
63 | for (let textNode of Node.texts(node)) {
64 | const { text } = textNode[0];
65 | code += `${text}\n`;
66 | }
67 |
68 | const codeTree = getCodeTree(code, lang);
69 | const tree = wrapLinesInSpan(codeTree).slice(0, -1);
70 |
71 | tree.forEach((codeStrLine, lineIndex) => {
72 | let textStart = 0;
73 | let textEnd = 0;
74 |
75 | codeStrLine.children.forEach((codeStrToken) => {
76 | let text = '';
77 |
78 | if (codeStrToken.type === 'text') {
79 | text = codeStrToken.value || '';
80 | } else {
81 | text = (codeStrToken.children[0] as AST.Text)?.value || '';
82 | }
83 |
84 | const className =
85 | (codeStrToken as AST.Element)?.properties?.className || [];
86 |
87 | textEnd = textStart + text.length;
88 |
89 | const decoration = createDecoration({
90 | path: [...path, lineIndex],
91 | textStart,
92 | textEnd,
93 | className,
94 | });
95 |
96 | ranges.push(decoration);
97 | textStart = textEnd;
98 | });
99 | });
100 |
101 | return ranges;
102 | },
103 | [lang],
104 | );
105 |
106 | return (
107 | hotKeyHandler(e as any)}
113 | onDrop={dropListener}
114 | onCopy={(e) => {
115 | e.clipboardData.setData(
116 | 'application/x-editure-fragment',
117 | JSON.stringify(true),
118 | );
119 | }}
120 | />
121 | );
122 | }
123 |
124 | export default Editure;
125 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Editure/leaf.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { selectLastPoint, Node } from 'editure';
4 | import { useEditure } from 'editure-react';
5 | import { Popover, Popconfirm, Tooltip } from 'antd';
6 |
7 | /** @jsx jsx */
8 | import { css, jsx } from '@emotion/core';
9 |
10 | import { Dispatch } from 'store';
11 | import IconFont from 'components/IconFont';
12 | import styles from '../Highlight/styles/atom-dark';
13 |
14 | function getStyleFromClassNameArr(classNameArr: string[]) {
15 | let style: Record = {};
16 |
17 | classNameArr.forEach((className) => {
18 | style = { ...style, ...styles[className] };
19 | });
20 |
21 | return style;
22 | }
23 |
24 | type LeafProps = {
25 | attributes: Record;
26 | children: React.ReactNode;
27 | leaf: Node;
28 | };
29 |
30 | const Link = (props: LeafProps) => {
31 | const { attributes, children, leaf } = props;
32 | const editor = useEditure();
33 | const dispatch = useDispatch();
34 |
35 | const iconStyle = css`
36 | margin: 0 2px;
37 |
38 | &:hover {
39 | color: #1db777;
40 | cursor: pointer;
41 | }
42 | `;
43 |
44 | const onClickEdit = () => {
45 | selectLastPoint(editor);
46 |
47 | const { text, url } = editor.getLinkData();
48 | if (text) dispatch.link.setText(text);
49 | if (url) dispatch.link.setUrl(url);
50 |
51 | dispatch.link.startEdit();
52 | };
53 |
54 | const handleDeleteLink = () => {
55 | selectLastPoint(editor);
56 | editor.removeLink();
57 | };
58 |
59 | const content = (
60 |
83 | );
84 |
85 | return (
86 |
87 |
88 | {children}
89 |
90 |
91 | );
92 | };
93 |
94 | export default (props: LeafProps) => {
95 | const { attributes, leaf } = props;
96 | let { children } = props;
97 |
98 | if (leaf.bold) {
99 | children = {children};
100 | }
101 |
102 | if (leaf.code) {
103 | children = {children};
104 | }
105 |
106 | if (leaf.italic) {
107 | children = {children};
108 | }
109 |
110 | if (leaf.strikethrough) {
111 | children = (
112 | {children}
113 | );
114 | }
115 |
116 | if (leaf.underline) {
117 | children = {children};
118 | }
119 |
120 | if (leaf.link) {
121 | children = {children};
122 | }
123 |
124 | let highlightProperty: any = {};
125 |
126 | if (leaf.codeHighlight) {
127 | highlightProperty.style = getStyleFromClassNameArr(leaf.className);
128 | }
129 |
130 | return (
131 |
132 | {children}
133 |
134 | );
135 | };
136 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Highlight/create-element.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RefractorNode } from 'refractor';
3 |
4 | export function createStyleObject(
5 | classNames: string[],
6 | elementStyle = {},
7 | stylesheet: any,
8 | ) {
9 | return classNames.reduce((styleObject, className) => {
10 | return { ...styleObject, ...stylesheet[className] };
11 | }, elementStyle);
12 | }
13 |
14 | export function createClassNameString(classNames: string[]) {
15 | return classNames.join(' ');
16 | }
17 |
18 | export function createChildren(stylesheet: any, useInlineStyles: boolean) {
19 | let childrenCount = 0;
20 | return (children: RefractorNode[]) => {
21 | childrenCount += 1;
22 | return children.map((child, i) =>
23 | createElement({
24 | node: child,
25 | stylesheet,
26 | useInlineStyles,
27 | key: `code-segment-${childrenCount}-${i}`,
28 | }),
29 | );
30 | };
31 | }
32 |
33 | export default function createElement(props: {
34 | node: RefractorNode;
35 | stylesheet: any;
36 | style?: any;
37 | useInlineStyles: boolean;
38 | key: string;
39 | }) {
40 | const { node, stylesheet, style = {}, useInlineStyles, key } = props;
41 |
42 | if (node.type === 'text') {
43 | return node.value;
44 | }
45 |
46 | const { properties, tagName: TagName } = node;
47 |
48 | const childrenCreator = createChildren(stylesheet, useInlineStyles);
49 | const nonStylesheetClassNames =
50 | useInlineStyles &&
51 | properties.className &&
52 | properties.className.filter((className) => !stylesheet[className]);
53 | const className =
54 | nonStylesheetClassNames && nonStylesheetClassNames.length
55 | ? nonStylesheetClassNames
56 | : undefined;
57 |
58 | const tagProps = useInlineStyles
59 | ? {
60 | ...properties,
61 | ...{ className: className && createClassNameString(className) },
62 | style: createStyleObject(
63 | properties.className!,
64 | Object.assign({}, properties.style, style),
65 | stylesheet,
66 | ),
67 | }
68 | : {
69 | ...properties,
70 | className: createClassNameString(properties.className!),
71 | };
72 |
73 | const children = childrenCreator(node.children);
74 |
75 | return (
76 | // @ts-ignore
77 |
78 | {children}
79 |
80 | );
81 | }
82 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Highlight/index.ts:
--------------------------------------------------------------------------------
1 | import highlight from './highlight';
2 | import defaultStyle from './styles/atom-dark';
3 | import refractor from 'refractor';
4 | import supportedLanguages from './languages/supported-languages';
5 |
6 | const highlighter = highlight(refractor, defaultStyle);
7 |
8 | // @ts-ignore
9 | highlighter.supportedLanguages = supportedLanguages;
10 |
11 | export default highlighter;
12 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Highlight/languages/supported-languages.ts:
--------------------------------------------------------------------------------
1 | export default [
2 | 'abap',
3 | 'actionscript',
4 | 'ada',
5 | 'apacheconf',
6 | 'apl',
7 | 'applescript',
8 | 'arduino',
9 | 'arff',
10 | 'asciidoc',
11 | 'asm6502',
12 | 'aspnet',
13 | 'autohotkey',
14 | 'autoit',
15 | 'bash',
16 | 'basic',
17 | 'batch',
18 | 'bison',
19 | 'brainfuck',
20 | 'bro',
21 | 'c',
22 | 'clike',
23 | 'clojure',
24 | 'coffeescript',
25 | 'cpp',
26 | 'crystal',
27 | 'csharp',
28 | 'csp',
29 | 'css-extras',
30 | 'css',
31 | 'd',
32 | 'dart',
33 | 'diff',
34 | 'django',
35 | 'docker',
36 | 'eiffel',
37 | 'elixir',
38 | 'elm',
39 | 'erb',
40 | 'erlang',
41 | 'flow',
42 | 'fortran',
43 | 'fsharp',
44 | 'gedcom',
45 | 'gherkin',
46 | 'git',
47 | 'glsl',
48 | 'go',
49 | 'graphql',
50 | 'groovy',
51 | 'haml',
52 | 'handlebars',
53 | 'haskell',
54 | 'haxe',
55 | 'hpkp',
56 | 'hsts',
57 | 'http',
58 | 'ichigojam',
59 | 'icon',
60 | 'inform7',
61 | 'ini',
62 | 'io',
63 | 'j',
64 | 'java',
65 | 'javascript',
66 | 'jolie',
67 | 'json',
68 | 'jsx',
69 | 'julia',
70 | 'keyman',
71 | 'kotlin',
72 | 'latex',
73 | 'less',
74 | 'liquid',
75 | 'lisp',
76 | 'livescript',
77 | 'lolcode',
78 | 'lua',
79 | 'makefile',
80 | 'markdown',
81 | 'markup-templating',
82 | 'markup',
83 | 'matlab',
84 | 'mel',
85 | 'mizar',
86 | 'monkey',
87 | 'n4js',
88 | 'nasm',
89 | 'nginx',
90 | 'nim',
91 | 'nix',
92 | 'nsis',
93 | 'objectivec',
94 | 'ocaml',
95 | 'opencl',
96 | 'oz',
97 | 'parigp',
98 | 'parser',
99 | 'pascal',
100 | 'perl',
101 | 'php-extras',
102 | 'php',
103 | 'plsql',
104 | 'powershell',
105 | 'processing',
106 | 'prolog',
107 | 'properties',
108 | 'protobuf',
109 | 'pug',
110 | 'puppet',
111 | 'pure',
112 | 'python',
113 | 'q',
114 | 'qore',
115 | 'r',
116 | 'reason',
117 | 'renpy',
118 | 'rest',
119 | 'rip',
120 | 'roboconf',
121 | 'ruby',
122 | 'rust',
123 | 'sas',
124 | 'sass',
125 | 'scala',
126 | 'scheme',
127 | 'scss',
128 | 'smalltalk',
129 | 'smarty',
130 | 'soy',
131 | 'sql',
132 | 'stylus',
133 | 'swift',
134 | 'tap',
135 | 'tcl',
136 | 'textile',
137 | 'tsx',
138 | 'tt2',
139 | 'twig',
140 | 'typescript',
141 | 'vbnet',
142 | 'velocity',
143 | 'verilog',
144 | 'vhdl',
145 | 'vim',
146 | 'visual-basic',
147 | 'wasm',
148 | 'wiki',
149 | 'xeora',
150 | 'xojo',
151 | 'xquery',
152 | 'yaml',
153 | ];
154 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/Highlight/styles/atom-dark.ts:
--------------------------------------------------------------------------------
1 | const styles: { [className: string]: { [attr: string]: string } } = {
2 | 'code[class*="language-"]': {
3 | color: '#c5c8c6',
4 | textShadow: '0 1px rgba(0, 0, 0, 0.3)',
5 | fontFamily:
6 | "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
7 | direction: 'ltr',
8 | textAlign: 'left',
9 | whiteSpace: 'pre',
10 | wordSpacing: 'normal',
11 | wordBreak: 'normal',
12 | lineHeight: '1.5',
13 | MozTabSize: '4',
14 | OTabSize: '4',
15 | tabSize: '4',
16 | WebkitHyphens: 'none',
17 | MozHyphens: 'none',
18 | msHyphens: 'none',
19 | hyphens: 'none',
20 | },
21 | 'pre[class*="language-"]': {
22 | color: '#c5c8c6',
23 | textShadow: '0 1px rgba(0, 0, 0, 0.3)',
24 | fontFamily:
25 | "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,Courier, monospace",
26 | direction: 'ltr',
27 | textAlign: 'left',
28 | whiteSpace: 'pre',
29 | wordSpacing: 'normal',
30 | wordBreak: 'normal',
31 | lineHeight: '1.5',
32 | MozTabSize: '4',
33 | OTabSize: '4',
34 | tabSize: '4',
35 | WebkitHyphens: 'none',
36 | MozHyphens: 'none',
37 | msHyphens: 'none',
38 | hyphens: 'none',
39 | padding: '1em',
40 | margin: '.5em 0',
41 | overflow: 'auto',
42 | borderRadius: '0.3em',
43 | background: '#1d1f21',
44 | },
45 | ':not(pre) > code[class*="language-"]': {
46 | background: '#1d1f21',
47 | padding: '.1em',
48 | borderRadius: '.3em',
49 | },
50 | comment: {
51 | color: '#7C7C7C',
52 | },
53 | prolog: {
54 | color: '#7C7C7C',
55 | },
56 | doctype: {
57 | color: '#7C7C7C',
58 | },
59 | cdata: {
60 | color: '#7C7C7C',
61 | },
62 | punctuation: {
63 | color: '#c5c8c6',
64 | },
65 | '.namespace': {
66 | Opacity: '.7',
67 | },
68 | property: {
69 | color: '#96CBFE',
70 | },
71 | keyword: {
72 | color: '#96CBFE',
73 | },
74 | tag: {
75 | color: '#96CBFE',
76 | },
77 | 'class-name': {
78 | color: '#FFFFB6',
79 | textDecoration: 'underline',
80 | },
81 | boolean: {
82 | color: '#99CC99',
83 | },
84 | constant: {
85 | color: '#99CC99',
86 | },
87 | symbol: {
88 | color: '#f92672',
89 | },
90 | deleted: {
91 | color: '#f92672',
92 | },
93 | number: {
94 | color: '#FF73FD',
95 | },
96 | selector: {
97 | color: '#A8FF60',
98 | },
99 | 'attr-name': {
100 | color: '#A8FF60',
101 | },
102 | string: {
103 | color: '#A8FF60',
104 | },
105 | char: {
106 | color: '#A8FF60',
107 | },
108 | builtin: {
109 | color: '#A8FF60',
110 | },
111 | inserted: {
112 | color: '#A8FF60',
113 | },
114 | variable: {
115 | color: '#C6C5FE',
116 | },
117 | operator: {
118 | color: '#EDEDED',
119 | },
120 | entity: {
121 | color: '#FFFFB6',
122 | cursor: 'help',
123 | },
124 | url: {
125 | color: '#96CBFE',
126 | },
127 | '.language-css .token.string': {
128 | color: '#87C38A',
129 | },
130 | '.style .token.string': {
131 | color: '#87C38A',
132 | },
133 | atrule: {
134 | color: '#F9EE98',
135 | },
136 | 'attr-value': {
137 | color: '#F9EE98',
138 | },
139 | function: {
140 | color: '#DAD085',
141 | },
142 | regex: {
143 | color: '#E9C062',
144 | },
145 | important: {
146 | color: '#fd971f',
147 | fontWeight: 'bold',
148 | },
149 | bold: {
150 | fontWeight: 'bold',
151 | },
152 | italic: {
153 | fontStyle: 'italic',
154 | },
155 | };
156 |
157 | export default styles;
158 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Content/PageHeader.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Article } from '@tuture/core';
3 |
4 | /** @jsx jsx */
5 | import { css, jsx } from '@emotion/core';
6 | import { Input } from 'antd';
7 | import { useDispatch, useSelector, useStore } from 'react-redux';
8 |
9 | import { Dispatch, Store, RootState } from 'store';
10 |
11 | const noBorderAndShadow = css`
12 | border: none;
13 |
14 | &:hover {
15 | border: none;
16 | box-shadow: none;
17 | }
18 |
19 | &:active {
20 | border: none;
21 | box-shadow: none;
22 | }
23 |
24 | &:focus {
25 | border: none;
26 | box-shadow: none;
27 | }
28 | `;
29 |
30 | const { TextArea } = Input;
31 |
32 | function PageHeader() {
33 | const store = useStore() as Store;
34 | const { nowArticleId } = useSelector((state: RootState) => state.collection);
35 | const { name = '', description = '' } =
36 | useSelector(
37 | store.select.collection.getArticleMetaById({ id: nowArticleId }),
38 | ) || {};
39 | const dispatch = useDispatch();
40 | const [timeoutHeaderState, setTimeoutHeaderState] = useState(
41 | null,
42 | );
43 | const [timeoutDescriptionState, setTimeoutDescriptionState] = useState<
44 | number | null
45 | >(null);
46 |
47 | function resetTimeout(id: number | null, newId: any) {
48 | if (id) {
49 | clearTimeout(id);
50 | }
51 |
52 | return newId;
53 | }
54 |
55 | function handleSaveCollection() {
56 | dispatch.collection.save({
57 | keys: ['meta', 'articles'],
58 | showMessage: false,
59 | });
60 | }
61 |
62 | function handleHeaderChange(e: React.ChangeEvent) {
63 | dispatch.collection.setArticleById({
64 | props: { name: e.target.value },
65 | });
66 |
67 | setTimeoutHeaderState(
68 | resetTimeout(timeoutHeaderState, setTimeout(handleSaveCollection, 1000)),
69 | );
70 | }
71 |
72 | function handleDescriptionChange(e: React.ChangeEvent) {
73 | dispatch.collection.setArticleById({
74 | props: { description: e.target.value },
75 | });
76 |
77 | setTimeoutDescriptionState(
78 | resetTimeout(
79 | timeoutDescriptionState,
80 | setTimeout(handleSaveCollection, 1000),
81 | ),
82 | );
83 | }
84 |
85 | return (
86 |
91 |
98 |
116 |
117 |
135 |
37 |
38 | document.getElementById('scroll-container')}>
39 |
40 |
41 |
42 |
43 |
47 |
48 |
49 | document.getElementById('scroll-container')}>
50 |
51 |
52 |
53 |
54 | );
55 | }
56 |
57 | export default Content;
58 |
--------------------------------------------------------------------------------
/packages/editor/src/components/IconFont.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from 'antd';
2 |
3 | const IconFont = Icon.createFromIconfontCN({
4 | scriptUrl: '//at.alicdn.com/t/font_1629955_27uzalcrqrmj.js',
5 | });
6 |
7 | export default IconFont;
8 |
--------------------------------------------------------------------------------
/packages/editor/src/components/ScrollToTop.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 |
4 | function ScrollToTopOnMount() {
5 | const { pathname } = useLocation();
6 |
7 | useEffect(() => {
8 | window.scrollTo(0, 0);
9 | }, [pathname]);
10 |
11 | return null;
12 | }
13 |
14 | export default ScrollToTopOnMount;
15 |
--------------------------------------------------------------------------------
/packages/editor/src/components/Toc/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { Row, Col } from 'antd';
4 |
5 | /** @jsx jsx */
6 | import { css, jsx } from '@emotion/core';
7 |
8 | import { Dispatch } from 'store';
9 | import ReleasedStepList from './ReleasedStepList';
10 | import ArticleStepList from './ArticleStepList';
11 |
12 | function Toc() {
13 | const dispatch: Dispatch = useDispatch();
14 |
15 | useEffect(() => {
16 | dispatch.toc.fetchToc();
17 | }, [dispatch]);
18 |
19 | return (
20 |
26 |
27 |
35 |
36 |
37 |
46 |
47 |
48 |
49 |
50 |
请检查代码仓库是否存在冲突文件，并通过以下流程解决：
51 |
1）打开发生冲突的文件，解决冲突；
52 |
2）将冲突的文件添加到暂存区；
53 |
54 | 3）运行 tuture sync --continue 继续同步。
55 |
56 |
= {
2 | [key: string]: (state: S, payload: any) => S;
3 | };
4 | type ModelEffects = {
5 | [key: string]: (payload?: any, rootState?: RootState) => Promise;
6 | };
7 | type ModelSelect = {
8 | [key: string]: () => (rootState: RootState) => any;
9 | };
10 | export type ModelConfig = {
11 | state: S;
12 | reducers: ModelReducers;
13 | effects: (dispatch: any) => ModelEffects;
14 | selectors?: (slice: any) => ModelSelect;
15 | };
16 | export type Models = {
17 | [key: string]: ModelConfig;
18 | };
19 | export type RematchRootState = {
20 | [modelKey in keyof M]: M[modelKey]['state'];
21 | };
22 | export type RematchRootSelect = {
23 | [modelKey in keyof M]: M[modelKey]['selectors'] extends Function
24 | ? SelectFromModel>
25 | : {};
26 | };
27 | export type SelectFromModel = {
28 | [selectKey in keyof S]: ReturnType>;
29 | };
30 | export type ReducerFromModel = {
31 | [reducerKey in keyof R]: Reducer2connect;
32 | };
33 | export type EffectFromModel = {
34 | [effectKey in keyof E]: Effect2connect;
35 | };
36 |
37 | type Reducer2connect = R extends (
38 | state: infer S,
39 | ...payload: infer P
40 | ) => any
41 | ? (...payload: P) => S
42 | : () => void;
43 |
44 | type Effect2connect = E extends () => infer S
45 | ? () => Promise
46 | : E extends (payload: infer P, ...args: any[]) => infer S
47 | ? (payload: P) => Promise
48 | : () => Promise;
49 |
50 | export type RematchDispatch = {
51 | [modelKey in keyof M]: ReducerFromModel &
52 | EffectFromModel>;
53 | };
54 |
55 | // @ts-ignore
56 | export type RematchLoadingState = {
57 | loading: {
58 | global: boolean;
59 | models: { [modelName in keyof M]: boolean };
60 | effects: {
61 | [modelName in keyof M]: {
62 | [effectName in keyof ExtractRematchDispatchersFromEffects<
63 | M[modelName]['effects']
64 | >]: boolean;
65 | };
66 | };
67 | };
68 | };
69 |
70 | declare module '@rematch/core' {
71 | export function init(config: any): any;
72 | }
73 |
--------------------------------------------------------------------------------
/packages/editor/src/pages/Article.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useSelector, useDispatch } from 'react-redux';
3 | import { useRouteMatch } from 'react-router-dom';
4 | import { Spin } from 'antd';
5 |
6 | import { App } from '../components/';
7 |
8 | /** @jsx jsx */
9 | import { css, jsx } from '@emotion/core';
10 |
11 | import { Dispatch, RootState } from '../store';
12 |
13 | function Article() {
14 | const dispatch = useDispatch();
15 | const { fetchMeta, fetchArticles, fetchFragment } = useSelector(
16 | (state: RootState) => state.loading.effects.collection,
17 | );
18 | const loading = fetchMeta || fetchArticles || fetchFragment;
19 |
20 | const match = useRouteMatch('/articles/:id');
21 | const { id = '' }: any = match?.params;
22 |
23 | useEffect(() => {
24 | dispatch.collection.setNowArticle(id);
25 | dispatch.collection.fetchFragment();
26 | }, [dispatch, id]);
27 |
28 | return (
29 |
41 | );
42 | }
43 |
44 | export default Article;
45 |
--------------------------------------------------------------------------------
/packages/editor/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useSelector, useDispatch } from 'react-redux';
3 | import { Spin } from 'antd';
4 |
5 | /** @jsx jsx */
6 | import { css, jsx } from '@emotion/core';
7 |
8 | import { Dispatch, RootState } from 'store';
9 | import { App } from '../components';
10 |
11 | function Home() {
12 | const dispatch = useDispatch();
13 | const { fetchMeta, fetchArticles, fetchFragment } = useSelector(
14 | (state: RootState) => state.loading.effects.collection,
15 | );
16 | const loading = fetchMeta || fetchArticles || fetchFragment;
17 |
18 | useEffect(() => {
19 | dispatch.collection.fetchFragment();
20 | }, [dispatch]);
21 |
22 | return (
23 |
39 | );
40 | }
41 |
42 | export default Home;
43 |
--------------------------------------------------------------------------------
/packages/editor/src/pages/Toc.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { css, jsx } from '@emotion/core';
3 | import { useSelector } from 'react-redux';
4 | import { Spin } from 'antd';
5 |
6 | import { RootState } from 'store';
7 | import { Toc as TocComponent } from '../components';
8 |
9 | function Toc() {
10 | const loading = useSelector(
11 | (state: RootState) => state.loading.effects.toc.fetchToc,
12 | );
13 |
14 | return (
15 |
20 |
21 |
31 |
32 |
33 |
34 |
17 |