cake-editor 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.babelrc +6 -0
- package/README.md +5 -0
- package/package.json +24 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +48 -0
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +25 -0
- package/public/robots.txt +3 -0
- package/src/app.css +31 -0
- package/src/index.css +13 -0
- package/src/index.js +70 -0
- package/webpack.config.js +23 -0
package/.babelrc
ADDED
package/README.md
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cake-editor",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "./build/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "webpack"
|
|
8
|
+
},
|
|
9
|
+
"author": "Wailson Lucas",
|
|
10
|
+
"license": "ISC",
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"@babel/core": "^7.7.5",
|
|
13
|
+
"@babel/preset-env": "^7.7.6",
|
|
14
|
+
"@babel/preset-react": "^7.7.4",
|
|
15
|
+
"babel-loader": "^8.0.6",
|
|
16
|
+
"css-loader": "^3.3.0",
|
|
17
|
+
"style-loader": "^1.0.1",
|
|
18
|
+
"webpack": "^4.41.2",
|
|
19
|
+
"webpack-cli": "^3.3.10"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"react": "^16.12.0"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<meta name="theme-color" content="#000000" />
|
|
8
|
+
<meta
|
|
9
|
+
name="description"
|
|
10
|
+
content="Web site created using create-react-app"
|
|
11
|
+
/>
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<script src="https://kit.fontawesome.com/6c7a8d3518.js" crossOrigin="anonymous" defer></script>
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
18
|
+
<!--
|
|
19
|
+
manifest.json provides metadata used when your web app is installed on a
|
|
20
|
+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
21
|
+
-->
|
|
22
|
+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
23
|
+
<!--
|
|
24
|
+
Notice the use of %PUBLIC_URL% in the tags above.
|
|
25
|
+
It will be replaced with the URL of the `public` folder during the build.
|
|
26
|
+
Only files inside the `public` folder can be referenced from the HTML.
|
|
27
|
+
|
|
28
|
+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
29
|
+
work correctly both with client-side routing and a non-root public URL.
|
|
30
|
+
Learn how to configure a non-root public URL by running `npm run build`.
|
|
31
|
+
-->
|
|
32
|
+
<title>React App</title>
|
|
33
|
+
</head>
|
|
34
|
+
<body>
|
|
35
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
36
|
+
<div id="root"></div>
|
|
37
|
+
<!--
|
|
38
|
+
This HTML file is a template.
|
|
39
|
+
If you open it directly in the browser, you will see an empty page.
|
|
40
|
+
|
|
41
|
+
You can add webfonts, meta tags, or analytics to this file.
|
|
42
|
+
The build step will place the bundled scripts into the <body> tag.
|
|
43
|
+
|
|
44
|
+
To begin the development, run `npm start` or `yarn start`.
|
|
45
|
+
To create a production bundle, use `npm run build` or `yarn build`.
|
|
46
|
+
-->
|
|
47
|
+
</body>
|
|
48
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"short_name": "React App",
|
|
3
|
+
"name": "Create React App Sample",
|
|
4
|
+
"icons": [
|
|
5
|
+
{
|
|
6
|
+
"src": "favicon.ico",
|
|
7
|
+
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
+
"type": "image/x-icon"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"src": "logo192.png",
|
|
12
|
+
"type": "image/png",
|
|
13
|
+
"sizes": "192x192"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"src": "logo512.png",
|
|
17
|
+
"type": "image/png",
|
|
18
|
+
"sizes": "512x512"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"start_url": ".",
|
|
22
|
+
"display": "standalone",
|
|
23
|
+
"theme_color": "#000000",
|
|
24
|
+
"background_color": "#ffffff"
|
|
25
|
+
}
|
package/src/app.css
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.buttons_list {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
background-color: #fff;
|
|
5
|
+
padding: 8px;
|
|
6
|
+
}
|
|
7
|
+
.btn {
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
height: 30px;
|
|
12
|
+
width: 30px;
|
|
13
|
+
margin-right:8px;
|
|
14
|
+
font-size: 16px;
|
|
15
|
+
background: #eee;
|
|
16
|
+
border-radius: 6px;
|
|
17
|
+
border: 1px solid transparent;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
padding:2px;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
}
|
|
22
|
+
#content {
|
|
23
|
+
padding: 18px;
|
|
24
|
+
background-color: #fff;
|
|
25
|
+
height: 300px;
|
|
26
|
+
overflow-y: scroll;
|
|
27
|
+
}
|
|
28
|
+
#content:focus {
|
|
29
|
+
outline: 1px solid #497174 !important;
|
|
30
|
+
}
|
|
31
|
+
|
package/src/index.css
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
body {
|
|
2
|
+
margin: 0;
|
|
3
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
4
|
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
5
|
+
sans-serif;
|
|
6
|
+
-webkit-font-smoothing: antialiased;
|
|
7
|
+
-moz-osx-font-smoothing: grayscale;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
code {
|
|
11
|
+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
12
|
+
monospace;
|
|
13
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import "./app.css"
|
|
2
|
+
|
|
3
|
+
function Editor() {
|
|
4
|
+
var font_size = 4
|
|
5
|
+
|
|
6
|
+
let execute = e => {
|
|
7
|
+
// console.log(e.target.id)
|
|
8
|
+
let { currentTarget } = e
|
|
9
|
+
let { id } = currentTarget
|
|
10
|
+
if(id === "plus") {
|
|
11
|
+
if(font_size === 7) return
|
|
12
|
+
font_size++
|
|
13
|
+
document.execCommand('styleWithCSS', false, true)
|
|
14
|
+
document.execCommand('fontSize', false, font_size)
|
|
15
|
+
} else if(id === "minus") {
|
|
16
|
+
if(font_size === 1) return
|
|
17
|
+
font_size--
|
|
18
|
+
document.execCommand('styleWithCSS', false, true)
|
|
19
|
+
document.execCommand("fontSize", false, font_size)
|
|
20
|
+
} else {
|
|
21
|
+
document.execCommand(id, false, id)
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<div className="root">
|
|
27
|
+
<div className="buttons_list">
|
|
28
|
+
<button className="btn" id="bold" onClick={e => execute(e)}>
|
|
29
|
+
<i className="fa-solid fa-bold"></i>
|
|
30
|
+
</button>
|
|
31
|
+
<button className="btn" id="italic" onClick={e => execute(e)}>
|
|
32
|
+
<i className="fa-solid fa-italic"></i>
|
|
33
|
+
</button>
|
|
34
|
+
<button className="btn" id="underline" onClick={e => execute(e)}>
|
|
35
|
+
<i className="fa-solid fa-underline"></i>
|
|
36
|
+
</button>
|
|
37
|
+
<button className="btn" id="justifyLeft" onClick={e => execute(e)}>
|
|
38
|
+
<i className="fa-solid fa-align-left"></i>
|
|
39
|
+
</button>
|
|
40
|
+
<button className="btn" id="justifyCenter" onClick={e => execute(e)}>
|
|
41
|
+
<i className="fa-solid fa-align-center"></i>
|
|
42
|
+
</button>
|
|
43
|
+
<button className="btn" id="justifyRight" onClick={e => execute(e)}>
|
|
44
|
+
<i className="fa-solid fa-align-right"></i>
|
|
45
|
+
</button>
|
|
46
|
+
<button className="btn" id="justifyFull" onClick={e => execute(e)}>
|
|
47
|
+
<i className="fa-solid fa-align-justify"></i>
|
|
48
|
+
</button>
|
|
49
|
+
<button className="btn" id="insertOrderedList" onClick={e => execute(e)}>
|
|
50
|
+
<i className="fa-solid fa-list-ol"></i>
|
|
51
|
+
</button>
|
|
52
|
+
<button className="btn" id="insertUnorderedList" onClick={e => execute(e)}>
|
|
53
|
+
<i className="fa-solid fa-list"></i>
|
|
54
|
+
</button>
|
|
55
|
+
<button className="btn" id="plus" onClick={e => execute(e)}>
|
|
56
|
+
<i className="fa-solid fa-plus"></i>
|
|
57
|
+
</button>
|
|
58
|
+
<button className="btn" id="minus" onClick={e => execute(e)}>
|
|
59
|
+
<i className="fa-solid fa-minus"></i>
|
|
60
|
+
</button>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div contentEditable id="content">
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export default Editor;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var path = require("path");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
mode: "production",
|
|
5
|
+
entry: "./src/index.js",
|
|
6
|
+
output: {
|
|
7
|
+
path: path.resolve("build"),
|
|
8
|
+
filename: "index.js",
|
|
9
|
+
libraryTarget: "commonjs2"
|
|
10
|
+
},
|
|
11
|
+
module: {
|
|
12
|
+
rules: [
|
|
13
|
+
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
|
|
14
|
+
{
|
|
15
|
+
test: /\.css$/,
|
|
16
|
+
loader: "style-loader!css-loader"
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
externals: {
|
|
21
|
+
react: "React"
|
|
22
|
+
}
|
|
23
|
+
};
|