Skip to content

Commit d83286b

Browse files
BUPTlhuanyuBUPTlhuanyu
authoredJun 30, 2021
Merge pull request #3 from BUPTlhuanyu/restructure
Restructure
·
0.0.130.0.2
2 parents 5f2b776 + b7aad7e commit d83286b

File tree

11 files changed

+173
-64
lines changed

11 files changed

+173
-64
lines changed
 

‎packages/views/config-overrides.js

+25-4
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ const path = require('path');
1717
const {override, fixBabelImports, addWebpackPlugin} = require('customize-cra');
1818
const compiledHook = require('build-tools/plugins/compilationFinished');
1919

20-
const isWeb = process.env['npm_lifecycle_event'].indexOf('web') > -1;
21-
const building = process.env['npm_lifecycle_event'].indexOf('build') > -1;
20+
const isWeb = process.env['npm_lifecycle_event'].indexOf('web') > -1; // web 打包
21+
const building = process.env['npm_lifecycle_event'].indexOf('build') > -1; // electron 打包/ web 打包
22+
const buildingNotWeb = building && !isWeb; // electron 打包
2223

2324
// Let Babel compile outside of src/.
2425
function craBabelBugFix(config) {
@@ -47,7 +48,26 @@ const electronConfig = (config) => {
4748
return config;
4849
}
4950

50-
const webConfig = (config) => {
51+
//更改打包是图片加载模式，解决electron打包后图片无法加载问题
52+
const customizeFileLoaderOptions = config => {
53+
for (let item of config.module.rules) {
54+
if ('oneOf' in item) {
55+
for (let index in item.oneOf) {
56+
let use = item.oneOf[index];
57+
if (use && Array.isArray(use.test) && use.test.find(item => item.source === /\.png$/.source) && use.loader.indexOf('/url-loader/') > -1) {
58+
use.options = Object.assign({}, use.options, {
59+
outputPath: 'static/media/',
60+
publicPath: '../media/',
61+
name: '[name].[hash:8].[ext]'
62+
});
63+
return config;
64+
}
65+
}
66+
}
67+
}
68+
}
69+
70+
const webConfig = config => {
5171
config.devServer = {
5272
open: true
5373
};
@@ -62,5 +82,6 @@ module.exports = override(
6282
fixBabelImports("import", {
6383
libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
6484
}),
65-
craBabelBugFix
85+
craBabelBugFix,
86+
buildingNotWeb && customizeFileLoaderOptions
6687
);

‎packages/views/src/assets/img/iPhone-11.png

50.2 KB
Loading

‎packages/views/src/components/toc-list/index.scss

+15-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
.toc-wrapper {
2-
padding: 0 10px;
3-
.toc-link {
4-
color: #111;
5-
overflow: hidden;
6-
text-overflow: ellipsis;
7-
white-space: nowrap;
8-
word-break: break-all;
9-
&-selected {
10-
font-weight: 600;
2+
padding: 10px 5px 0;
3+
font-size: 12px;
4+
.toc-item {
5+
&:hover {
6+
background-color: #e2e2e2;
7+
}
8+
padding: 5px 0;
9+
.toc-link {
10+
color: #111;
11+
overflow: hidden;
12+
text-overflow: ellipsis;
13+
word-break: break-all;
14+
&-selected {
15+
font-weight: 600;
16+
}
1117
}
1218
}
1319
}

‎packages/views/src/components/toc-list/index.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './index.scss';
77
export interface ITocItem {
88
title: string;
99
line: number;
10+
level: number;
1011
}
1112

1213
function TocList(props: any) {
@@ -20,10 +21,19 @@ function TocList(props: any) {
2021
{
2122
props.data.map((item: ITocItem, index: number) => (
2223
<div
23-
className={selectedId === index ? 'toc-link-selected' : ''}
24+
className="toc-item"
2425
key={item.line}
2526
onClick={() => {onSelect(item, index);}}
26-
><a className="toc-link">{item.title}</a></div>
27+
style={{paddingLeft: `${item.level * 15}px`}}
28+
>
29+
<a className={
30+
selectedId === index
31+
? 'toc-link-selected toc-link'
32+
: 'toc-link'}
33+
>
34+
{item.title}
35+
</a>
36+
</div>
2737
))
2838
}
2939
</div>

‎packages/views/src/components/useCodemirror/index.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ interface CodemirrorObj {
77
scroll: {
88
scrollTop: number;
99
scrollHeight: number;
10+
clientHeight: number;
1011
};
1112
editor: codemirror.Editor | null;
1213
count: number;
@@ -55,11 +56,11 @@ export default function useCodemirror(): CodemirrorObj {
5556
setCount(count);
5657
});
5758
editor.on('scroll', (editor: any) => {
58-
let scrollTop = editor.doc.scrollTop;
59-
let docHeight = editor.doc.height;
59+
const {clientHeight, height, top} = editor.getScrollInfo();
6060
setScroll({
61-
scrollTop,
62-
scrollHeight: docHeight
61+
scrollTop: top,
62+
clientHeight,
63+
scrollHeight: height
6364
});
6465
});
6566
// 自定义事件

‎packages/views/src/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import 'views/src/theme/codemirror.scss';
12
html, body, #root, .app {
23
width: 100%;
34
height: 100%;

‎packages/views/src/pages/editor/index.scss

+27-6
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,35 @@
2222
width: 100%;
2323
height: calc(100% - 50px);
2424
.md-view-wrapper {
25+
position: relative;
2526
flex: 1;
26-
margin: 10px auto;
27+
margin: auto;
2728
width: 368px;
28-
padding: 0px 16px 12px;
29-
box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;
30-
min-height: 95%;
31-
.md-view-container {
32-
padding: 0 4px;
29+
padding-left: 28px;
30+
padding-right: 22px;
31+
height: 100%;
32+
overflow: auto;
33+
.md-view-layer {
34+
height: 690px;
35+
position: relative;
36+
overflow: auto;
37+
top: 34px;
38+
overflow: auto;
39+
.md-view-container {
40+
overflow: auto;
41+
padding: 0 4px;
42+
}
43+
}
44+
.iphone-frame {
45+
position: absolute;
46+
top: 0;
47+
left: 0;
48+
width: 375px;
49+
height: 758px;
50+
background: url('../../assets/img/iPhone-11.png') no-repeat;
51+
background-size: contain;
52+
background-position: center;
53+
pointer-events: none;
3354
}
3455
}
3556
.code-mirror-wrapper {

‎packages/views/src/pages/editor/index.tsx

+45-33
Original file line numberDiff line numberDiff line change
@@ -90,41 +90,53 @@ function Editor() {
9090
}, [saveFileCb]);
9191

9292
useEffect(() => {
93-
let mdScrollHeight = mdRef.current!.clientHeight;
94-
let coScrollHeight = editor && (editor as any).doc.height;
95-
// let mdVsCodemirror = mdScrollHeight / coScrollHeight; // 同样容器宽度，不同滚动条高度的比例，e.g.【2 0.5 4 0.75
96-
let baseHeight: number = containerHeight.current;
97-
let mdVsCodemirror = (mdScrollHeight / baseHeight - 1) / (coScrollHeight / baseHeight - 1);
93+
const layerDom = mdRef.current;
94+
let mdScrollHeight = layerDom!.scrollHeight - layerDom!.clientHeight;
95+
let coScrollHeight = coScroll.scrollHeight - coScroll.clientHeight;
9896
if (scrollTarget.current === 1) {
99-
let coScrollTop = mdScroll.scrollTop / mdVsCodemirror;
97+
let coScrollTop = mdScroll.scrollTop / mdScrollHeight * coScrollHeight;
10098
editor && editor.scrollTo(null, coScrollTop);
10199
}
102100
else {
103-
let parentDom: any = mdRef.current!.parentNode;
104-
let mdScrollTop = coScroll.scrollTop * mdVsCodemirror;
105-
parentDom && parentDom.scrollTo(null, mdScrollTop);
101+
let mdScrollTop = coScroll.scrollTop / coScrollHeight * mdScrollHeight;
102+
mdRef.current && mdRef.current.scrollTo(0, mdScrollTop);
106103
}
107-
}, [coScroll.scrollTop, coScroll.scrollHeight, mdScroll.scrollTop, mdScroll.scrollHeight, editor]);
104+
}, [
105+
coScroll.scrollTop,
106+
coScroll.scrollHeight,
107+
coScroll.clientHeight,
108+
mdScroll.scrollTop,
109+
mdScroll.scrollHeight,
110+
editor
111+
]);
112+
const mdScrollHandler = useCallback(
113+
(evt: any) => {
114+
let {scrollTop, scrollHeight} = evt.target;
115+
setMdScroll({scrollTop, scrollHeight});
116+
},
117+
[],
118+
);
119+
const mdMouseHandler = useCallback(
120+
() => {
121+
scrollTarget.current = 1;
122+
},
123+
[scrollTarget],
124+
);
108125
useMount(() => {
109126
let containerDom = document.querySelector('.editor-wrapper');
110127
containerHeight.current = containerDom ? containerDom.clientHeight : 0;
111128
setCodemirrorEle(editorRef.current as Element);
129+
const ele = mdRef.current;
130+
if (ele) {
131+
// TODO: ref 放到 MdView 上
132+
ele.addEventListener('scroll', mdScrollHandler);
133+
ele.addEventListener('mouseover', mdMouseHandler);
134+
}
135+
return () => {
136+
mdRef.current?.removeEventListener('scroll', mdScrollHandler);
137+
mdRef.current?.removeEventListener('mouseover', mdMouseHandler);
138+
};
112139
});
113-
const getMdViewEle = useCallback(
114-
(ele: HTMLDivElement) => {
115-
mdRef.current = ele;
116-
if (ele && ele.parentNode) {
117-
ele.parentNode.addEventListener('scroll', (evt: any) => {
118-
let {scrollTop, scrollHeight} = evt.target;
119-
setMdScroll({scrollTop, scrollHeight});
120-
});
121-
ele.addEventListener('mouseover', () => {
122-
scrollTarget.current = 1;
123-
});
124-
}
125-
},
126-
[]
127-
);
128140
const getCoViewEle = useCallback(
129141
(ele: HTMLDivElement) => {
130142
ele && ele.addEventListener('mouseover', () => {
@@ -160,14 +172,14 @@ function Editor() {
160172
className="code-mirror-container"
161173
></div>
162174
</Pane>
163-
<Pane
164-
eleRef={getMdViewEle}
165-
className="md-view-wrapper"
166-
>
167-
<MdView
168-
value={code}
169-
className="md-view-container"
170-
/>
175+
<Pane className="md-view-wrapper">
176+
<div ref={mdRef} className="md-view-layer">
177+
<MdView
178+
value={code}
179+
className="md-view-container"
180+
/>
181+
</div>
182+
<div className="iphone-frame"></div>
171183
</Pane>
172184
</SplitPane>
173185
</div>

‎packages/views/src/theme/codemirror.scss

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.pandora-editor {
2+
.cm-s-default .cm-header {color: #D94F8A;} // header
3+
.cm-s-default .cm-quote {color: #090;}
4+
.cm-negative {color: #d44;}
5+
.cm-positive {color: #292;}
6+
.cm-header, .cm-strong {font-weight: bold;}
7+
.cm-em {font-style: italic;}
8+
.cm-link {text-decoration: underline;}
9+
.cm-strikethrough {text-decoration: line-through;}
10+
11+
.cm-s-default .cm-keyword {color: #708;}
12+
.cm-s-default .cm-atom {color: #219;}
13+
.cm-s-default .cm-number {color: #164;}
14+
.cm-s-default .cm-def {color: #00f;}
15+
.cm-s-default .cm-variable,
16+
.cm-s-default .cm-punctuation,
17+
.cm-s-default .cm-property,
18+
.cm-s-default .cm-operator {}
19+
.cm-s-default .cm-variable-2 {color: #05a;}
20+
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
21+
.cm-s-default .cm-comment {color: #da6b51;}
22+
.cm-s-default .cm-string {color: #a11;}
23+
.cm-s-default .cm-string-2 {color: #f50;}
24+
.cm-s-default .cm-meta {color: #555;}
25+
.cm-s-default .cm-qualifier {color: #555;}
26+
.cm-s-default .cm-builtin {color: #30a;}
27+
.cm-s-default .cm-bracket {color: #997;}
28+
.cm-s-default .cm-tag {color: #170;}
29+
.cm-s-default .cm-attribute {color: #8787e2;}
30+
.cm-s-default .cm-hr {color: #999;}
31+
.cm-s-default .cm-link {color: #8787e2;}
32+
33+
.cm-s-default .cm-error {color: #f00;}
34+
.cm-invalidchar {color: #f00;}
35+
}

‎packages/views/src/utils/markdown-helper.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import codemirror from 'codemirror';
66
interface ITocItem {
77
title: string;
88
line: number;
9+
level: number;
910
}
1011

11-
const TAB = '\u00A0\u00A0\u00A0\u00A0';
12-
export function getMdOutline(editor: codemirror.Editor): ITocItem[] {
12+
// const TAB = '\u00A0\u00A0\u00A0\u00A0';
13+
export function getMdOutline(editor: codemirror.Editor, tab?: string): ITocItem[] {
1314
if (!editor || !editor.getDoc) {
1415
return [];
1516
}
@@ -23,8 +24,9 @@ export function getMdOutline(editor: codemirror.Editor): ITocItem[] {
2324
let level = 0;
2425
if (matched && !isNaN(level = +matched[1])) {
2526
return {
26-
title: `${TAB.repeat(level - 1)}${item.replace(start.string, '')}`,
27-
line
27+
title: `${tab ? tab.repeat(level - 1) : ''}${item.replace(start.string, '')}`,
28+
line,
29+
level
2830
};
2931
}
3032
}

‎packages/workbench-electron/main/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,8 @@ function createWindow() {
175175
const win = new BrowserWindow({
176176
minWidth: 800,
177177
minHeight: 600,
178-
width: 1200,
179-
height: 800,
178+
width: 1350,
179+
height: 900,
180180
title: '',
181181
backgroundColor: '#262626',
182182
// titleBarStyle: 'hidden',

0 commit comments

Comments
 (0)
Please sign in to comment.