Skip to content

Commit 3e9d001

Browse files
author
k.golikov
committed
HtmlEditorPage: add react-split
1 parent b92e545 commit 3e9d001

File tree

5 files changed

+156
-106
lines changed

5 files changed

+156
-106
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"react-redux": "^7.2.6",
3838
"react-router-dom": "^6.2.2",
3939
"react-scripts": "5.0.0",
40+
"react-split": "^2.0.14",
4041
"redux": "^4.1.2",
4142
"redux-thunk": "^2.4.1",
4243
"rooks": "^5.11.0",

‎src/pages/htmlEditorPage/HtmlEditorPage.module.scss

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,26 @@
55

66
.containerRow {
77
height: 100%;
8+
display: flex;
9+
flex-direction: row;
810

911
.col {
1012
display: flex;
1113
flex-direction: column;
1214

1315
transition-property: flex-basis;
1416
transition-duration: 0.2s;
17+
18+
&:only-child {
19+
flex: 1;
20+
}
1521
}
1622

1723
.leftCol {
18-
border-right: 1px solid;
19-
@include borderColor;
24+
&:not(:only-child) {
25+
border-right: 1px solid;
26+
@include borderColor;
27+
}
2028

2129
.editorTabs {
2230
flex: 1;
@@ -58,6 +66,8 @@
5866
.resultFrame {
5967
flex: 1;
6068
border: none;
69+
max-width: 100%;
70+
overflow: auto;
6171
}
6272
}
6373
}

‎src/pages/htmlEditorPage/HtmlEditorPage.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '../../styles/main';
2+
3+
.gutter {
4+
background-repeat: no-repeat;
5+
background-position: 50%;
6+
7+
@include monacoBackground;
8+
}
9+
10+
.gutter.gutter-horizontal {
11+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
12+
cursor: col-resize;
13+
}

‎src/pages/htmlEditorPage/HtmlEditorPage.tsx

Lines changed: 116 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { editor } from 'monaco-editor';
1717
import ButtonGroup from 'antd/lib/button/button-group';
1818
import { VerticalSplit, ViewHeadline } from '@mui/icons-material';
1919
import useChangeValueStateHandler from '../../hooks/useChangeValueStateHandler';
20+
import Split from 'react-split';
21+
import './HtmlEditorPage.scss';
2022

2123
enum EditorTab {
2224
HTML = 'html',
@@ -126,113 +128,124 @@ ${sources.js}
126128
emmetJSX(monaco);
127129
}, []);
128130

129-
const leftColSpan = {
130-
[ViewMode.EDITOR]: 24,
131-
[ViewMode.SPLIT]: 12,
132-
[ViewMode.VIEW]: 0
133-
}[viewMode];
131+
// const leftColSpan = {
132+
// [ViewMode.EDITOR]: 24,
133+
// [ViewMode.SPLIT]: 12,
134+
// [ViewMode.VIEW]: 0
135+
// }[viewMode];
136+
//
137+
// const rightColSpan = {
138+
// [ViewMode.EDITOR]: 0,
139+
// [ViewMode.SPLIT]: 12,
140+
// [ViewMode.VIEW]: 24
141+
// }[viewMode];
142+
143+
const leftCol = (
144+
<Col className={classNames(styles.col, styles.leftCol, { 'd-none': viewMode === ViewMode.VIEW })}>
145+
<Tabs
146+
activeKey={editorTab}
147+
onChange={handleEditorTabChange}
148+
tabBarStyle={tabBarStyle}
149+
className={styles.editorTabs}
150+
tabBarGutter={10}
151+
tabBarExtraContent={
152+
<ButtonGroup>
153+
<Button
154+
type="text"
155+
icon={<ViewHeadline />}
156+
className={classNames({ 'antd-text-primary': viewMode === ViewMode.EDITOR })}
157+
onClick={handleViewModeChange(ViewMode.EDITOR)}
158+
/>
159+
<Button
160+
type="text"
161+
icon={<VerticalSplit />}
162+
className={classNames({ 'antd-text-primary': viewMode === ViewMode.SPLIT })}
163+
onClick={handleViewModeChange(ViewMode.SPLIT)}
164+
/>
165+
</ButtonGroup>
166+
}
167+
>
168+
<Tabs.TabPane
169+
tab={
170+
<div className={styles.tabTitleWrapper}>
171+
<Html className={styles.tabTitle} />
172+
</div>
173+
}
174+
key={EditorTab.HTML}
175+
className={styles.editorTab}
176+
>
177+
<AppEditor
178+
value={sources.html}
179+
onChange={handleSourceChange(EditorTab.HTML)}
180+
className={styles.editor}
181+
language="html"
182+
onMount={handleEditorMount}
183+
options={editorOptions}
184+
/>
185+
</Tabs.TabPane>
186+
<Tabs.TabPane
187+
tab={
188+
<div className={styles.tabTitleWrapper}>
189+
<Css className={styles.tabTitle} />
190+
</div>
191+
}
192+
key={EditorTab.CSS}
193+
className={styles.editorTab}
194+
>
195+
<AppEditor
196+
value={sources.css}
197+
onChange={handleSourceChange(EditorTab.CSS)}
198+
className={styles.editor}
199+
language="css"
200+
onMount={handleEditorMount}
201+
options={editorOptions}
202+
/>
203+
</Tabs.TabPane>
204+
<Tabs.TabPane
205+
tab={
206+
<div className={styles.tabTitleWrapper}>
207+
<Javascript className={styles.tabTitle} />
208+
</div>
209+
}
210+
key={EditorTab.JS}
211+
className={styles.editorTab}
212+
>
213+
<AppEditor
214+
value={sources.js}
215+
onChange={handleSourceChange(EditorTab.JS)}
216+
className={styles.editor}
217+
language="javascript"
218+
onMount={handleEditorMount}
219+
options={editorOptions}
220+
/>
221+
</Tabs.TabPane>
222+
</Tabs>
223+
</Col>
224+
);
134225

135-
const rightColSpan = {
136-
[ViewMode.EDITOR]: 0,
137-
[ViewMode.SPLIT]: 12,
138-
[ViewMode.VIEW]: 24
139-
}[viewMode];
226+
const rightCol = (
227+
<Col
228+
className={classNames('yui3-cssreset', styles.col, styles.rightCol, {
229+
'd-none': viewMode === ViewMode.EDITOR
230+
})}
231+
>
232+
<iframe srcDoc={resultSource} className={styles.resultFrame} />
233+
</Col>
234+
);
140235

141236
return (
142237
<PageContainer noPadding className={styles.container}>
143-
<Row className={styles.containerRow}>
144-
<Col
145-
span={leftColSpan}
146-
className={classNames(styles.col, styles.leftCol, { 'd-none': viewMode === ViewMode.VIEW })}
147-
>
148-
<Tabs
149-
activeKey={editorTab}
150-
onChange={handleEditorTabChange}
151-
tabBarStyle={tabBarStyle}
152-
className={styles.editorTabs}
153-
tabBarGutter={10}
154-
tabBarExtraContent={
155-
<ButtonGroup>
156-
<Button
157-
type="text"
158-
icon={<ViewHeadline />}
159-
className={classNames({ 'antd-text-primary': viewMode === ViewMode.EDITOR })}
160-
onClick={handleViewModeChange(ViewMode.EDITOR)}
161-
/>
162-
<Button
163-
type="text"
164-
icon={<VerticalSplit />}
165-
className={classNames({ 'antd-text-primary': viewMode === ViewMode.SPLIT })}
166-
onClick={handleViewModeChange(ViewMode.SPLIT)}
167-
/>
168-
</ButtonGroup>
169-
}
170-
>
171-
<Tabs.TabPane
172-
tab={
173-
<div className={styles.tabTitleWrapper}>
174-
<Html className={styles.tabTitle} />
175-
</div>
176-
}
177-
key={EditorTab.HTML}
178-
className={styles.editorTab}
179-
>
180-
<AppEditor
181-
value={sources.html}
182-
onChange={handleSourceChange(EditorTab.HTML)}
183-
className={styles.editor}
184-
language="html"
185-
onMount={handleEditorMount}
186-
options={editorOptions}
187-
/>
188-
</Tabs.TabPane>
189-
<Tabs.TabPane
190-
tab={
191-
<div className={styles.tabTitleWrapper}>
192-
<Css className={styles.tabTitle} />
193-
</div>
194-
}
195-
key={EditorTab.CSS}
196-
className={styles.editorTab}
197-
>
198-
<AppEditor
199-
value={sources.css}
200-
onChange={handleSourceChange(EditorTab.CSS)}
201-
className={styles.editor}
202-
language="css"
203-
onMount={handleEditorMount}
204-
options={editorOptions}
205-
/>
206-
</Tabs.TabPane>
207-
<Tabs.TabPane
208-
tab={
209-
<div className={styles.tabTitleWrapper}>
210-
<Javascript className={styles.tabTitle} />
211-
</div>
212-
}
213-
key={EditorTab.JS}
214-
className={styles.editorTab}
215-
>
216-
<AppEditor
217-
value={sources.js}
218-
onChange={handleSourceChange(EditorTab.JS)}
219-
className={styles.editor}
220-
language="javascript"
221-
onMount={handleEditorMount}
222-
options={editorOptions}
223-
/>
224-
</Tabs.TabPane>
225-
</Tabs>
226-
</Col>
227-
<Col
228-
span={rightColSpan}
229-
className={classNames('yui3-cssreset', styles.col, styles.rightCol, {
230-
'd-none': viewMode === ViewMode.EDITOR
231-
})}
232-
>
233-
<iframe srcDoc={resultSource} className={styles.resultFrame} />
234-
</Col>
235-
</Row>
238+
{viewMode === ViewMode.SPLIT ? (
239+
<Split className={styles.containerRow} direction="horizontal" minSize={0} snapOffset={25}>
240+
{leftCol}
241+
{rightCol}
242+
</Split>
243+
) : (
244+
<Row className={styles.containerRow}>
245+
{viewMode === ViewMode.EDITOR && leftCol}
246+
{viewMode === ViewMode.VIEW && rightCol}
247+
</Row>
248+
)}
236249
</PageContainer>
237250
);
238251
};

‎yarn.lock

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10272,7 +10272,7 @@ prompts@^2.0.1, prompts@^2.4.2:
1027210272
kleur "^3.0.3"
1027310273
sisteransi "^1.0.5"
1027410274

10275-
prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
10275+
prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
1027610276
version "15.8.1"
1027710277
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
1027810278
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10982,6 +10982,14 @@ [email protected]:
1098210982
optionalDependencies:
1098310983
fsevents "^2.3.2"
1098410984

10985+
react-split@^2.0.14:
10986+
version "2.0.14"
10987+
resolved "https://registry.yarnpkg.com/react-split/-/react-split-2.0.14.tgz#ef198259bf43264d605f792fb3384f15f5b34432"
10988+
integrity sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==
10989+
dependencies:
10990+
prop-types "^15.5.7"
10991+
split.js "^1.6.0"
10992+
1098510993
react-transition-group@^4.4.2:
1098610994
version "4.4.2"
1098710995
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -11897,6 +11905,11 @@ split-string@^3.0.1, split-string@^3.0.2:
1189711905
dependencies:
1189811906
extend-shallow "^3.0.0"
1189911907

11908+
split.js@^1.6.0:
11909+
version "1.6.5"
11910+
resolved "https://registry.yarnpkg.com/split.js/-/split.js-1.6.5.tgz#f7f61da1044c9984cb42947df4de4fadb5a3f300"
11911+
integrity sha512-mPTnGCiS/RiuTNsVhCm9De9cCAUsrNFFviRbADdKiiV+Kk8HKp/0fWu7Kr8pi3/yBmsqLFHuXGT9UUZ+CNLwFw==
11912+
1190011913
sprintf-js@~1.0.2:
1190111914
version "1.0.3"
1190211915
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"

0 commit comments

Comments
 (0)