Skip to content

Commit 27366d1

Browse files
abhisaha1abhisaha1
authored
New Icons (#135)
1 parent 1258a8d commit 27366d1

25 files changed

Lines changed: 1477 additions & 475 deletions

‎.babelrc‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
11
{
2-
"presets": [
3-
"@babel/env",
4-
"@babel/react",
5-
"@babel/preset-typescript"
6-
],
7-
"plugins": [
8-
"@babel/plugin-proposal-class-properties"
9-
]
2+
"presets": ["@babel/preset-env", "@babel/react", "@babel/preset-typescript"],
3+
"plugins": ["@babel/plugin-proposal-class-properties"]
104
}

‎README.md‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
This editor is an extract from the
44
[Letterpad CMS](http://github.com/letterpad/letterpad-cms).
55

6-
[![Build Status](https://travis-ci.com/letterpad/editor.svg?branch=master)](https://travis-ci.com/letterpad/editor)
7-
8-
This editor gives a high level api of the [slate editor](https://slatejs.org) along with a flexible plugin architecture.
6+
This editor gives a high level api of the [draft editor](https://draftjs.org/) along with a flexible plugin architecture.
97

108
### How to use
119

@@ -24,39 +22,39 @@ import React from "react";
2422
import LetterpadEditor from "letterpad-editor";
2523

2624
const MyEditor = () => {
27-
return (
28-
<LetterpadEditor
29-
theme="dark"
30-
onChange={(html: string) => {
31-
console.log(html);
32-
}}
33-
html="Hello World"
34-
/>
35-
);
25+
return (
26+
<LetterpadEditor
27+
theme="dark"
28+
onChange={(html: string) => {
29+
console.log(html);
30+
}}
31+
html="Hello World"
32+
/>
33+
);
3634
};
3735

3836
export default MyEditor;
3937
```
4038

4139
### Parameters
4240

43-
- `theme`: **string**
41+
- `theme`: **string**
4442

45-
`default`: **dark**
43+
`default`: **dark**
4644

47-
Set the theme. Options - light | dark
45+
Set the theme. Options - light | dark
4846

49-
- `onImageClick`: `((insert: (url:string) => void) => void)`
47+
- `onImageClick`: `((insert: (url:string) => void) => void)`
5048

51-
- `onVideoClick`: `((insert: (url:string) => void) => void)`
49+
- `onVideoClick`: `((insert: (url:string) => void) => void)`
5250

53-
- `onChange(html: string)`: `(html:string) => void`
51+
- `onChange(html: string)`: `(html:string) => void`
5452

55-
Receive html whenever there is a change in the editor.
53+
Receive html whenever there is a change in the editor.
5654

57-
- `html` - string
55+
- `html` - string
5856

59-
Load the initial html. If you want empty page, the enter empty string. If its null, it will load sample data.
57+
Load the initial html. If you want empty page, the enter empty string. If its null, it will load sample data.
6058

6159
## Development
6260

‎demo/data.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export const data = `
2-
32
<h1 id="h1-heading-8-">h1 Heading 8-)</h1>
43
<h2 id="h2-heading">h2 Heading</h2>
54
<h3 id="h3-heading">h3 Heading</h3>
@@ -20,7 +19,6 @@ export const data = `
2019
<p><em>This is italic text</em></p>
2120
<p><del>Strikethrough</del></p>
2221
<h2 id="blockquotes">Blockquotes</h2>
23-
2422
<blockquote>
2523
...by using additional greater-than signs right next to each other...
2624
</blockquote>
@@ -46,7 +44,6 @@ export const data = `
4644
</ol>
4745
<ol>
4846
<li>You can use sequential numbers...</li>
49-
5047
</ol>
5148
<p>Start numbering with offset:</p>
5249
<ol>
@@ -72,5 +69,4 @@ var foo = function (bar) {
7269
<p><a href="http://nodeca.github.io/pica/demo/" title="title text!">link with title</a></p>
7370
<p>Autoconverted link <a href="https://github.com/nodeca/pica">https://github.com/nodeca/pica</a> (enable linkify to see)</p>
7471
<h2 id="images">Images</h2>
75-
7672
`;

‎demo/index.html‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,32 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
3+
<head>
54
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
79
<meta name="theme-color" content="#000000" />
810
<title>Letterpad Editor</title>
911

1012
<style>
11-
html,
12-
body {
13-
margin: 0px;
14-
padding: 0px;
15-
}
13+
html,
14+
body {
15+
margin: 0px;
16+
padding: 0px;
17+
}
18+
body {
19+
background: var(--bg-primary);
20+
color: var(--color-primary);
21+
}
1622
</style>
17-
</head>
23+
</head>
1824

19-
<body>
25+
<body>
2026
<noscript> You need to enable JavaScript to run this app. </noscript>
2127
<div id="root">
22-
<!-- This div is where our app will run -->
28+
<!-- This div is where our app will run -->
2329
</div>
2430
<!-- This is where webpack will insert the bundle -->
25-
</body>
26-
27-
</html>
31+
</body>
32+
</html>

‎demo/index.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import {useState} from "react";
1+
import { useState } from "react";
22
import ReactDOM from "react-dom";
3-
import Editor from "../src/editor";
3+
import LetterpadEditor from "../src/letterpad-editor";
44
import { data } from "./data";
5+
import { TypeMediaCallback, TypeMediaInsert } from "./types";
56

67
const Demo = () => {
78
const [html, setHtml] = useState("");
89

910
const handleImage = (insert) => {
10-
insert(
11-
"https://reactrocket.com/img/blog/draft-js-basic-editor.gif",
12-
);
11+
insert({
12+
url: "https://www.carolmusyoka.com/wp-content/uploads/2020/04/Freedom.jpg",
13+
caption: "captionis",
14+
});
1315
};
1416

1517
const handleVideo = (insert) => {
16-
insert(
17-
"https://www.youtube.com/watch?v=M3BM9TB-8yA",
18-
);
18+
insert("https://www.youtube.com/watch?v=M3BM9TB-8yA");
1919
};
2020

2121
const params = new URL(document.location.href).searchParams;
2222

2323
return (
2424
<div>
25-
<Editor
25+
<LetterpadEditor
2626
html={data}
2727
onImageClick={handleImage}
2828
onVideoClick={handleVideo}
@@ -32,7 +32,7 @@ const Demo = () => {
3232
}}
3333
/>
3434
<hr />
35-
<div dangerouslySetInnerHTML={{__html: html}} />
35+
<div dangerouslySetInnerHTML={{ __html: html }} />
3636
</div>
3737
);
3838
};

‎package.json‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
{
22
"name": "letterpad-editor",
3-
"version": "1.0.3",
3+
"version": "1.0.17",
44
"description": "The letterpad editor - A high level abstraction of draftjs with plugin architecture",
5-
"main": "./dist/editor.js",
5+
"main": "./dist/letterpad-editor.js",
6+
"types": "./dist/letterpad-editor.d.ts",
67
"scripts": {
78
"start": "webpack serve --config webpack.config.demo.js",
89
"bundle": "webpack --config webpack.config.prod.js",
910
"bundle:demo": "webpack --config webpack.config.demo.js",
1011
"build": "tsc --build tsconfig.build.json",
11-
"prepublishOnly": "yarn clean && yarn bundle && yarn build && yarn copy-files",
12+
"prepublishOnly": "yarn clean && yarn bundle && yarn build",
1213
"test": "echo \"Error: no test specified\" && exit 1",
1314
"clean": "rimraf dist/",
14-
"copy-files": "copyfiles -u 1 src/*.css src/**/*.css src/**/**/*.css dist/"
15+
"prettify": "npx prettier --write ./src"
1516
},
1617
"files": [
1718
"dist",
1819
"README.md",
1920
"LICENSE",
2021
"package.json",
21-
"yarn.lock"
22+
"yarn.lock",
23+
"umd"
2224
],
2325
"author": "Abhishek Saha",
2426
"license": "ISC",
2527
"dependencies": {
2628
"@draft-js-plugins/anchor": "^4.1.3",
2729
"@draft-js-plugins/counter": "^4.1.1",
2830
"@draft-js-plugins/editor": "^4.1.0",
31+
"@draft-js-plugins/focus": "^4.1.2",
2932
"@draft-js-plugins/hashtag": "^4.2.1",
3033
"@draft-js-plugins/inline-toolbar": "^4.1.2",
3134
"@draft-js-plugins/linkify": "^4.1.1",
@@ -44,13 +47,17 @@
4447
"typescript": "^4.3.5"
4548
},
4649
"devDependencies": {
50+
"@babel/core": "^7.15.0",
51+
"@babel/plugin-proposal-class-properties": "^7.14.5",
52+
"@babel/preset-env": "^7.15.0",
53+
"@babel/preset-react": "^7.14.5",
4754
"@babel/preset-typescript": "^7.14.5",
48-
"@draft-js-plugins/focus": "^4.1.2",
4955
"@types/draft-convert": "^2.1.4",
5056
"@types/draft-js": "^0.11.4",
5157
"@types/prismjs": "^1.16.6",
5258
"@types/react": "^17.0.14",
5359
"@types/react-dom": "^17.0.9",
60+
"babel-loader": "^8.2.2",
5461
"copyfiles": "^2.4.1",
5562
"css-loader": "^5.2.6",
5663
"html-webpack-plugin": "^5.3.2",

‎src/app.css‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,6 @@
2929
--border-toolbar: #111;
3030
}
3131

32-
body {
33-
background: var(--bg-primary);
34-
color: var(--color-primary);
35-
}
36-
3732
.editor {
3833
box-sizing: border-box;
3934
cursor: text;
@@ -65,17 +60,18 @@ img {
6560
width: 100%;
6661
}
6762

68-
pre > pre {
69-
padding: 0px;
70-
margin-top: 2rem;
71-
}
7263
pre {
7364
background: var(--bg-codeblock);
7465
display: block;
7566
font-size: 0.9rem;
7667
color: #c7c7c7;
7768
padding: 0.1rem 0.5rem;
7869
}
70+
71+
pre > pre {
72+
padding: 0px;
73+
margin: 1rem 1rem 0rem 1rem;
74+
}
7975
.token.operator,
8076
.token.entity,
8177
.token.url,
@@ -84,9 +80,10 @@ pre {
8480
background: transparent;
8581
}
8682

87-
figcaption, figcaption * {
88-
text-align: center !important;
89-
font-style: italic;
83+
figcaption,
84+
figcaption * {
85+
text-align: center !important;
86+
font-style: italic;
9087
}
9188
blockquote {
9289
margin: 20px 0px;

‎src/highlight.tsx‎

Lines changed: 0 additions & 82 deletions
This file was deleted.

0 commit comments

Comments
 (0)