Skip to content

Commit 8bbeb83

Browse files
author
k.golikov
committed
Add HTML editor
1 parent 4b6b2c2 commit 8bbeb83

File tree

9 files changed

+665
-6
lines changed

9 files changed

+665
-6
lines changed

‎.idea/mrgrd56.github.io.iml

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,18 @@
66
"dependencies": {
77
"@ant-design/dark-theme": "^2.0.2",
88
"@ant-design/icons": "^4.7.0",
9+
"@emotion/react": "^11.9.0",
10+
"@emotion/styled": "^11.8.1",
911
"@monaco-editor/react": "^4.4.4",
12+
"@mui/icons-material": "^5.6.2",
13+
"@mui/material": "^5.6.4",
1014
"antd": "^4.20.0",
1115
"antd-img-crop": "^4.2.0",
1216
"axios": "^0.26.1",
1317
"bootstrap": "^5.1.3",
1418
"canvg": "^4.0.0",
1519
"classnames": "^2.3.1",
20+
"emmet-monaco-es": "^5.1.0",
1621
"immer": "^9.0.12",
1722
"konva": "^8.3.5",
1823
"lodash": "^4.17.21",

‎public/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
<link href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500&display=swap" rel="stylesheet" />
3030
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet" />
3131

32+
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/styles/cssreset-context.min.css" />
33+
3234
<meta name="google-site-verification" content="LvSefS7AQYJYsbdmqYXQijQrO0E1QztYpeYsgmXf8yg" />
3335
</head>
3436
<body>

‎public/styles/cssreset-context.min.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*
2+
YUI 3.18.1 (build f7e7bcb)
3+
Copyright 2014 Yahoo! Inc. All rights reserved.
4+
Licensed under the BSD License.
5+
http://yuilibrary.com/license/
6+
*/
7+
8+
.yui3-cssreset html {
9+
color: #000;
10+
background: #fff;
11+
}
12+
.yui3-cssreset body,
13+
.yui3-cssreset div,
14+
.yui3-cssreset dl,
15+
.yui3-cssreset dt,
16+
.yui3-cssreset dd,
17+
.yui3-cssreset ul,
18+
.yui3-cssreset ol,
19+
.yui3-cssreset li,
20+
.yui3-cssreset h1,
21+
.yui3-cssreset h2,
22+
.yui3-cssreset h3,
23+
.yui3-cssreset h4,
24+
.yui3-cssreset h5,
25+
.yui3-cssreset h6,
26+
.yui3-cssreset pre,
27+
.yui3-cssreset code,
28+
.yui3-cssreset form,
29+
.yui3-cssreset fieldset,
30+
.yui3-cssreset legend,
31+
.yui3-cssreset input,
32+
.yui3-cssreset textarea,
33+
.yui3-cssreset p,
34+
.yui3-cssreset blockquote,
35+
.yui3-cssreset th,
36+
.yui3-cssreset td {
37+
margin: 0;
38+
padding: 0;
39+
}
40+
.yui3-cssreset table {
41+
border-collapse: collapse;
42+
border-spacing: 0;
43+
}
44+
.yui3-cssreset fieldset,
45+
.yui3-cssreset img {
46+
border: 0;
47+
}
48+
.yui3-cssreset address,
49+
.yui3-cssreset caption,
50+
.yui3-cssreset cite,
51+
.yui3-cssreset code,
52+
.yui3-cssreset dfn,
53+
.yui3-cssreset em,
54+
.yui3-cssreset strong,
55+
.yui3-cssreset th,
56+
.yui3-cssreset var {
57+
font-style: normal;
58+
font-weight: normal;
59+
}
60+
.yui3-cssreset ol,
61+
.yui3-cssreset ul {
62+
list-style: none;
63+
}
64+
.yui3-cssreset caption,
65+
.yui3-cssreset th {
66+
text-align: left;
67+
}
68+
.yui3-cssreset h1,
69+
.yui3-cssreset h2,
70+
.yui3-cssreset h3,
71+
.yui3-cssreset h4,
72+
.yui3-cssreset h5,
73+
.yui3-cssreset h6 {
74+
font-size: 100%;
75+
font-weight: normal;
76+
}
77+
.yui3-cssreset q:before,
78+
.yui3-cssreset q:after {
79+
content: '';
80+
}
81+
.yui3-cssreset abbr,
82+
.yui3-cssreset acronym {
83+
border: 0;
84+
font-variant: normal;
85+
}
86+
.yui3-cssreset sup {
87+
vertical-align: text-top;
88+
}
89+
.yui3-cssreset sub {
90+
vertical-align: text-bottom;
91+
}
92+
.yui3-cssreset input,
93+
.yui3-cssreset textarea,
94+
.yui3-cssreset select {
95+
font-family: inherit;
96+
font-size: inherit;
97+
font-weight: inherit;
98+
}
99+
.yui3-cssreset input,
100+
.yui3-cssreset textarea,
101+
.yui3-cssreset select {
102+
*font-size: 100%;
103+
}
104+
.yui3-cssreset legend {
105+
color: #000;
106+
}
107+
#yui3-css-stamp.cssreset-context {
108+
display: none;
109+
}

‎src/constants/router/menuItems.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ const menuItems: MenuItem[] = [
6161
{
6262
route: routes.notificationsTest
6363
},
64+
{
65+
route: routes.htmlEditor
66+
},
6467
{
6568
route: routes.imageCompressor,
6669
isGray: true

‎src/constants/router/routes.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import JsonToTypeScriptPage from '../../pages/jsonToTypeScriptPage/JsonToTypeScr
2525
import NotificationsTestPage from '../../pages/notificationsTestPage/NotificationsTestPage';
2626
import DateUtilsPage from '../../pages/dateUtilsPage/DateUtilsPage';
2727
import ImageCompressorPage from '../../pages/imageCompressorPage/ImageCompressorPage';
28+
import HtmlEditorPage from '../../pages/htmlEditorPage/HtmlEditorPage';
2829

2930
export interface AppRoute extends Omit<RouteProps, 'element'> {
3031
path: string;
@@ -53,6 +54,7 @@ type AppRoutesMap = Readonly<{
5354
notificationsTest: AppRoute;
5455
dateUtils: AppRoute;
5556
imageCompressor: AppRoute;
57+
htmlEditor: AppRoute;
5658
settings: AppRoute;
5759
about: AppRoute;
5860
}>;
@@ -158,6 +160,11 @@ export const routes: AppRoutesMap = {
158160
component: ImageCompressorPage,
159161
title: 'Image Compressor'
160162
},
163+
htmlEditor: {
164+
path: '/tools/html-editor',
165+
component: HtmlEditorPage,
166+
title: 'HTML Editor'
167+
},
161168
settings: {
162169
path: '/settings',
163170
component: SettingsPage,

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@import '../../styles/main';
2+
3+
.container {
4+
@include monacoBackground;
5+
6+
.containerRow {
7+
height: 100%;
8+
9+
.col {
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
.leftCol {
15+
border-right: 1px solid;
16+
@include borderColor;
17+
18+
.editorTabs {
19+
flex: 1;
20+
display: flex;
21+
22+
& > *:last-child {
23+
display: flex;
24+
}
25+
26+
.editorTab {
27+
flex: 1;
28+
display: flex;
29+
30+
.editor {
31+
flex: 1;
32+
}
33+
}
34+
35+
.tabTitleWrapper {
36+
height: 20px !important;
37+
width: 50px !important;
38+
39+
display: flex;
40+
flex-direction: row;
41+
justify-content: center;
42+
align-items: center;
43+
44+
.tabTitle {
45+
font-size: 28px;
46+
}
47+
}
48+
}
49+
}
50+
51+
.rightCol {
52+
background: white;
53+
}
54+
55+
.resultFrame {
56+
flex: 1;
57+
border: none;
58+
}
59+
}
60+
}

0 commit comments

Comments
 (0)