Skip to content

Commit 310bfaa

Browse files
nikgrafnikgraf
committed
improve emoji docs
1 parent c4424cd commit 310bfaa

File tree

7 files changed

+96
-38
lines changed

7 files changed

+96
-38
lines changed

‎docs/client/components/pages/Emoji/SimpleEmojiEditor/styles.css renamed to ‎docs/client/components/pages/Emoji/CustomEmojiEditor/editorStyles.css

File renamed without changes.

‎docs/client/components/pages/Emoji/CustomEmojiEditor/emojiStyles.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.emoji {
2+
/* Hide the original Emoji icon no matter what system it is. */
3+
color: transparent;
4+
/* Make the size depedent on the wrapping text. */
5+
background-size: 2em 2em;
6+
width: 2em;
7+
height: 2em;
8+
display: inline-block;
9+
background-color: #eee;
10+
border-radius: 6px;
11+
}

‎docs/client/components/pages/Emoji/CustomEmojiEditor/index.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import React, { Component } from 'react';
22
import { Map } from 'immutable';
33
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
4-
import createHashtagPlugin from 'draft-js-hashtag-plugin';
5-
import styles from './styles.css';
4+
import createEmojiPlugin from 'draft-js-emoji-plugin';
5+
import emojiStyles from './emojiStyles.css';
6+
import editorStyles from './editorStyles.css';
67

78
const theme = Map({
8-
hashtag: styles.hashtag,
9+
emoji: emojiStyles.emoji,
910
});
10-
const hashtagPlugin = createHashtagPlugin({ theme });
11-
const plugins = [hashtagPlugin];
12-
const text = 'In this editor we even applied our own styles … #design #theme';
11+
const emojiPlugin = createEmojiPlugin({ theme });
12+
const plugins = [emojiPlugin];
13+
const text = `Cool, we can have all sorts if Emojis here. 🙌
14+
🌿☃️🎉🙈 aaaand maybe a few more here: 🐲☀️🗻 Quite fun!`;
1315

14-
export default class CustomHashtagEditor extends Component {
16+
export default class CustomEmojiEditor extends Component {
1517

1618
state = {
1719
editorState: createEditorStateWithText(text),
@@ -29,7 +31,7 @@ export default class CustomHashtagEditor extends Component {
2931

3032
render() {
3133
return (
32-
<div className={ styles.editor } onClick={ this.focus }>
34+
<div className={ editorStyles.editor } onClick={ this.focus }>
3335
<Editor
3436
editorState={this.state.editorState}
3537
onChange={this.onChange}

‎docs/client/components/pages/Emoji/CustomEmojiEditor/styles.css renamed to ‎docs/client/components/pages/Emoji/SimpleEmojiEditor/editorStyles.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,3 @@
1111
.editor :global(.public-DraftEditor-content) {
1212
min-height: 140px;
1313
}
14-
15-
.hashtag {
16-
color: #1CA782;
17-
font-family: cursive;
18-
}

‎docs/client/components/pages/Emoji/SimpleEmojiEditor/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { Component } from 'react';
22
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
33
import createEmojiPlugin from 'draft-js-emoji-plugin';
4-
import styles from './styles.css';
4+
import editorStyles from './editorStyles.css';
55

66
const emojiPlugin = createEmojiPlugin();
77
const plugins = [emojiPlugin];
88
const text = `Cool, we can have all sorts if Emojis here. 🙌
99
🌿☃️🎉🙈 aaaand maybe a few more here: 🐲☀️🗻 Quite fun!`;
1010

11-
export default class SimpleHashtagEditor extends Component {
11+
export default class SimpleEmojiEditor extends Component {
1212

1313
state = {
1414
editorState: createEditorStateWithText(text),
@@ -26,7 +26,7 @@ export default class SimpleHashtagEditor extends Component {
2626

2727
render() {
2828
return (
29-
<div className={ styles.editor } onClick={ this.focus }>
29+
<div className={ editorStyles.editor } onClick={ this.focus }>
3030
<Editor
3131
editorState={this.state.editorState}
3232
onChange={this.onChange}

‎docs/client/components/pages/Emoji/index.js

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
import React, { Component } from 'react';
2+
import styles from './styles.css';
3+
24
import Container from '../../shared/Container';
35
import Heading from '../../shared/Heading';
4-
5-
// import styles from './styles.css';
66
import SocialBar from '../../shared/SocialBar';
77
import NavBar from '../../shared/NavBar';
88
import Separator from '../../shared/Separator';
99
import Code from '../../shared/Code';
1010
import SimpleEmojiEditor from './SimpleEmojiEditor';
11+
import CustomEmojiEditor from './CustomEmojiEditor';
12+
import AlternateContainer from '../../shared/AlternateContainer';
13+
14+
import gettingStarted from '!!../../../loaders/prism-loader?language=javascript!./gettingStarted';
15+
1116
import simpleExampleCode from '!!../../../loaders/prism-loader?language=javascript!./SimpleEmojiEditor';
17+
import simpleEditorStylesCode from '!!../../../loaders/prism-loader?language=css!./SimpleEmojiEditor/editorStyles.css';
18+
19+
import customExampleCode from '!!../../../loaders/prism-loader?language=javascript!./CustomEmojiEditor';
20+
import customEmojiStylesCode from '!!../../../loaders/prism-loader?language=css!./CustomEmojiEditor/emojiStyles.css';
21+
import customEditorStylesCode from '!!../../../loaders/prism-loader?language=css!./CustomEmojiEditor/editorStyles.css';
1222

1323
export default class App extends Component {
1424
render() {
@@ -18,14 +28,48 @@ export default class App extends Component {
1828
<Separator />
1929
<Container>
2030
<Heading level={ 2 }>Emoji</Heading>
31+
<p>
32+
This implementation allows users to add Emojis and they will be consistently displayed
33+
accross all platforms. This implementation is independent form the host system an therfor
34+
even not supported which are not supported on the current system are displayed.
35+
</p>
36+
<Heading level={ 3 }>Implementation</Heading>
2137
<p>
2238
In this implementation the original Emoji unicode is wrapped in a span. The character is hidden with via the styles & while the background image shows the icon. This way you have a consistent set shown beteen all platforms while copy & pasting still works fine. We recommend to copy & paste the text below into an native editor to see the effect.
2339
</p>
2440
</Container>
41+
<AlternateContainer>
42+
<Heading level={ 2 }>Getting Started</Heading>
43+
<Code code="npm install draft-js-emoji-plugin --save" />
44+
<Code code={ gettingStarted } name="gettingStarted.js" />
45+
</AlternateContainer>
46+
<Container>
47+
<Heading level={ 2 }>Configuration Parameters</Heading>
48+
<div>
49+
<div className={ styles.paramName }>theme</div>
50+
<span>map of CSS classes to style the plugin</span>
51+
<table className={ styles.themeTable }>
52+
<tbody>
53+
<tr>
54+
<td className={ styles.themeProperty }>Emoji</td>
55+
<td>CSS class to be applied to emoji</td>
56+
</tr>
57+
</tbody>
58+
</table>
59+
</div>
60+
</Container>
2561
<Container>
2662
<Heading level={ 2 }>Simple Example</Heading>
2763
<SimpleEmojiEditor />
2864
<Code code={ simpleExampleCode } name="SimpleEmojiEditor.js" />
65+
<Code code={ simpleEditorStylesCode } name="editorStyles.js" />
66+
</Container>
67+
<Container>
68+
<Heading level={ 2 }>Simple Example</Heading>
69+
<CustomEmojiEditor />
70+
<Code code={ customExampleCode } name="CustomEmojiEditor.js" />
71+
<Code code={ customEmojiStylesCode } name="emojiStyles.js" />
72+
<Code code={ customEditorStylesCode } name="editorStyles.js" />
2973
</Container>
3074
<SocialBar />
3175
</div>
@@ -44,26 +88,6 @@ import customExampleCode from '!!../../../loaders/prism-loader?language=javascri
4488
import customExampleStylesCode from '!!../../../loaders/prism-loader?language=css!./CustomEmojiEditor/styles.css';
4589
import gettingStarted from '!!../../../loaders/prism-loader?language=javascript!./gettingStarted';
4690
47-
<AlternateContainer>
48-
<Heading level={ 2 }>Getting Started</Heading>
49-
<Code code="npm install draft-js-emoji-plugin --save" />
50-
<Code code={ gettingStarted } name="gettingStarted.js" />
51-
</AlternateContainer>
52-
<Container>
53-
<Heading level={ 2 }>Configuration Parameters</Heading>
54-
<div>
55-
<div className={ styles.paramName }>theme</div>
56-
<span>map of CSS classes to style the plugin</span>
57-
<table className={ styles.themeTable }>
58-
<tbody>
59-
<tr>
60-
<td className={ styles.themeProperty }>Emoji</td>
61-
<td>CSS class to be applied to emoji</td>
62-
</tr>
63-
</tbody>
64-
</table>
65-
</div>
66-
</Container>
6791
<Container>
6892
<Heading level={ 2 }>Simple Example</Heading>
6993
<SimpleEmojiEditor />

‎docs/client/components/pages/Emoji/styles.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,29 @@
66
.center {
77
text-align: center;
88
}
9+
10+
11+
.param {
12+
margin: 10px 0;
13+
}
14+
15+
.paramName {
16+
font-weight: bold;
17+
width: 125px;
18+
display: inline-block;
19+
}
20+
21+
.subParams {
22+
margin-left: 125px;
23+
margin-top: 10px;
24+
}
25+
26+
.subParam {
27+
margin-bottom: 5px;
28+
display: flex;
29+
}
30+
31+
.subParamName {
32+
font-weight: bold;
33+
margin-right: 5px;
34+
}

0 commit comments

Comments
 (0)