-
Notifications
You must be signed in to change notification settings - Fork 150
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Text Editor: Custom Styles & Tweet Embeds (#70)
* Text Editor: Custom Styles & Tweet Embeds (#69) * WIP: Tweets * WIP: tweet * Tweets almost work without proper styling * Tweet display with lesser bugs * Tweet Embedding * Embedding Tweets * v0.2.6-alpha.0 * Font changes * TextEditor: Custom styling and Tweet embed * Reverted packages * v0.2.7-alpha.0 * v0.2.6 * Correct version of rich text * v0.2.7 * Install only latest * v0.2.8 * v0.2.9 Co-authored-by: Rajat Saxena <[email protected]>
- Loading branch information
1 parent
ec9bd3d
commit 2d7afa1
Showing
31 changed files
with
303 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import TextEditor from "@courselit/rich-text"; | ||
| import { useTheme } from "@material-ui/styles"; | ||
|
|
||
| const RichText = (props) => { | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <TextEditor | ||
| initialContentState={props.initialContentState} | ||
| onChange={props.onChange} | ||
| readOnly={props.readOnly} | ||
| styles={theme.richText} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| RichText.hydrate = TextEditor.hydrate; | ||
| RichText.stringify = TextEditor.stringify; | ||
| RichText.emptyState = TextEditor.emptyState; | ||
|
|
||
| RichText.propTypes = { | ||
| initialContentState: PropTypes.any, | ||
| onChange: PropTypes.func, | ||
| readOnly: PropTypes.bool, | ||
| }; | ||
|
|
||
| export default RichText; |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,102 @@ | ||
| # Rich Text Editor & Displayer | ||
|
|
||
| A full-fledged rich text editor and displayer for React apps, built using DraftJS. | ||
|
|
||
| ## Styling | ||
|
|
||
| Pass in an object containing styling information to the `styles` prop in order to override the default styles. | ||
|
|
||
| ``` | ||
| <TextEditor | ||
| initialContentState={TextEditor.hydrate(course.description)} | ||
| readOnly={true} | ||
| styles={{text: {fontSize: 30}}} | ||
| /> | ||
| ``` | ||
|
|
||
| The following object details the default styles and what all components you can target from your custom styles. | ||
|
|
||
| ``` | ||
| { | ||
| controls: { | ||
| container: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| border: "1px solid #eee", | ||
| }, | ||
| editor: { | ||
| maxHeight: "50vh", | ||
| overflowX: "none", | ||
| overflowY: "scroll", | ||
| padding: 10, | ||
| }, | ||
| toolbar: { | ||
| padding: 10, | ||
| background: "#f7f7f7", | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| alignItems: "center", | ||
| }, | ||
| toolbarInput: { | ||
| background: "rgb(179 188 255)", | ||
| padding: 10, | ||
| }, | ||
| toolbarButton: { | ||
| border: "none", | ||
| background: "transparent", | ||
| padding: 10, | ||
| "&:hover": { | ||
| background: "#585858", | ||
| }, | ||
| fontWeight: "bold", | ||
| fontSize: 16, | ||
| }, | ||
| }, | ||
| media: { | ||
| container: { | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| }, | ||
| img: { | ||
| maxWidth: "100%", | ||
| }, | ||
| }, | ||
| code: { | ||
| background: "rgb(45, 45, 45)", | ||
| color: "#e2e7ff", | ||
| padding: "10px 16px", | ||
| borderRadius: 2, | ||
| fontFamily: '"Fira Code", monospace', | ||
| }, | ||
| blockquote: { | ||
| fontStyle: "italic", | ||
| fontFamily: "serif", | ||
| marginTop: 10, | ||
| marginBottom: 10, | ||
| borderLeft: "5px solid rgb(179 188 255)", | ||
| paddingLeft: 10, | ||
| fontSize: "1.6em", | ||
| color: "rgb(58 58 58)", | ||
| }, | ||
| text: { | ||
| textAlign: "justify", | ||
| lineHeight: "1.8em", | ||
| fontSize: "1.2em", | ||
| fontFamily: 'Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif' | ||
| }, | ||
| } | ||
| ``` | ||
|
|
||
| ## Integrations | ||
|
|
||
| ### YouTube Videos | ||
|
|
||
| Paste video's URL in to the editor and it will be embedded. | ||
|
|
||
| ### Tweets | ||
|
|
||
| Paste any tweet's URL in the editor and the tweet will be embedded. | ||
|
|
||
| ## Known issues | ||
|
|
||
| 1. While editing, making changes to a tweet's URL might show previous content. The workaround is to delete the tweet URL entirely and then paste the new URL. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| /** | ||
| * Decorator for tweets. | ||
| */ | ||
| import React, { createRef, useEffect } from "react"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const styles = { | ||
| container: { | ||
| textAlign: "center", | ||
| }, | ||
| iframeContainer: { | ||
| position: "relative", | ||
| overflow: "hidden", | ||
| "& iframe": { | ||
| position: "absolute", | ||
| top: 0, | ||
| left: 0, | ||
| width: "100%", | ||
| height: "100%", | ||
| }, | ||
| }, | ||
| link: { | ||
| display: "hidden", | ||
| marginTop: "1em", | ||
| color: "#676767", | ||
| fontSize: ".8em", | ||
| }, | ||
| }; | ||
|
|
||
| const Tweet = (props) => { | ||
| const tweetRef = createRef(); | ||
|
|
||
| useEffect(() => { | ||
| if (!window.twttr) { | ||
| window.twttr = twitterFunc(document, "script", "twitter-wjs"); | ||
| } | ||
| }, []); | ||
|
|
||
| /* eslint-disable one-var */ | ||
| const twitterFunc = function (d, s, id) { | ||
| var js, | ||
| fjs = d.getElementsByTagName(s)[0], | ||
| t = window.twttr || {}; | ||
| if (d.getElementById(id)) return t; | ||
| js = d.createElement(s); | ||
| js.id = id; | ||
| js.src = "https://platform.twitter.com/widgets.js"; | ||
| fjs.parentNode.insertBefore(js, fjs); | ||
| t._e = []; | ||
| t.ready = function (f) { | ||
| t._e.push(f); | ||
| }; | ||
| return t; | ||
| }; | ||
| /* eslint-enable one-var */ | ||
|
|
||
| useEffect(() => { | ||
| const tokens = props.decoratedText.split("/"); | ||
| window.twttr.ready((twttr) => { | ||
| twttr.widgets.createTweet(tokens[tokens.length - 1], tweetRef.current, { | ||
| theme: "dark", | ||
| align: "center", | ||
| }); | ||
| }); | ||
| }, [props.decoratedText]); | ||
|
|
||
| return ( | ||
| <div style={styles.container}> | ||
| <div ref={tweetRef} style={styles.iframeContainer} /> | ||
| <a href={props.decoratedText} style={styles.link}> | ||
| {props.children} | ||
| </a> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| Tweet.propTypes = { | ||
| decoratedText: PropTypes.string, | ||
| children: PropTypes.array, | ||
| }; | ||
|
|
||
| export default Tweet; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,6 +38,7 @@ const styles = { | |
| display: "block", | ||
| marginTop: "1em", | ||
| color: "#676767", | ||
| fontSize: ".8em", | ||
| }, | ||
| }; | ||
|
|
||
|
|
||
Oops, something went wrong.