Skip to content

Instantly share code, notes, and snippets.

View hadijahkyampeire's full-sized avatar

kyampeire Hadijah hadijahkyampeire

103 followers · 88 following
View GitHub Profile
@hadijahkyampeire
hadijahkyampeire / previewModal-0.js
Created March 30, 2020 17:52
import React from 'react';
export const PreviewModal = () => (
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Preview Modal
</h5>
@hadijahkyampeire
hadijahkyampeire / myEditor-2.js
Last active April 1, 2020 10:14
import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
class MyEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
@hadijahkyampeire
hadijahkyampeire / App-0.css
Created March 30, 2020 17:37
.app {
text-align: center;
background-color: #2a2a2ab5;
height: 100vh;
}
.app .rich-editor {
padding: 10rem;
}
.rich-editor .rdw-editor-main {
@hadijahkyampeire
hadijahkyampeire / myEditor-1.js
Created March 30, 2020 17:30
import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
class MyEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
@hadijahkyampeire
hadijahkyampeire / index.html
Last active March 30, 2020 17:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
@hadijahkyampeire
hadijahkyampeire / App.css
Created March 19, 2020 22:38
Our file with styles for our App
.app {
text-align: center;
background-color: #2a2a2ab5;
height: 100vh;
}
.app .rich-editor {
padding: 10rem;
}
.rich-editor .rdw-editor-main {
@hadijahkyampeire
hadijahkyampeire / App.js
Created March 19, 2020 22:37
Our App file
import React from 'react';
import { MyEditor } from './components/myEditor';
import './App.css'
import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
function App() {
return (
<div className="app">
<MyEditor />
</div>
@hadijahkyampeire
hadijahkyampeire / previewModal.js
Created March 19, 2020 22:37
Our modal file which takes in the output prop and presents it as a text we can read
import React from 'react';
export const PreviewModal = ({ output }) => (
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Preview Modal
</h5>
@hadijahkyampeire
hadijahkyampeire / myEditor.js
Last active March 30, 2020 17:56
This is our editor component
import React, { Component } from 'react';
import { EditorState, convertToRaw } from 'draft-js'; {/* new import added*/}
import draftToHtml from 'draftjs-to-html'; {/* new */}
import { Editor } from 'react-draft-wysiwyg';
import { PreviewModal } from './previewModal';
const getHtml = editorState => draftToHtml(convertToRaw(editorState.getCurrentContent())); {/* new */}
class MyEditor extends Component {
constructor(props) {
@hadijahkyampeire
hadijahkyampeire / index.html
Created March 19, 2020 22:30
The index.html file inside our public folder, it has bootstrap cdn links to enable the functioning of our modal and styling buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"