This repository has been archived by the owner on Sep 7, 2022. It is now read-only.
forked from dominic-chang/blog
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c6d5a2e
commit ff15ace
Showing
10 changed files
with
924 additions
and
147 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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 was deleted.
Oops, something went wrong.
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,63 @@ | ||
| .RichEditor-root { | ||
| background: #fff; | ||
| border: 1px solid #ddd; | ||
| font-family: 'Georgia', serif; | ||
| font-size: 14px; | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .RichEditor-editor { | ||
| border-top: 1px solid #ddd; | ||
| cursor: text; | ||
| font-size: 16px; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .RichEditor-editor .public-DraftEditorPlaceholder-root, | ||
| .RichEditor-editor .public-DraftEditor-content { | ||
| margin: 0 -15px -15px; | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .RichEditor-editor .public-DraftEditor-content { | ||
| min-height: 100px; | ||
| } | ||
|
|
||
| .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root { | ||
| display: none; | ||
| } | ||
|
|
||
| .RichEditor-editor .RichEditor-blockquote { | ||
| border-left: 5px solid #eee; | ||
| color: #666; | ||
| font-family: 'Hoefler Text', 'Georgia', serif; | ||
| font-style: italic; | ||
| margin: 16px 0; | ||
| padding: 10px 20px; | ||
| } | ||
|
|
||
| .RichEditor-editor .public-DraftStyleDefault-pre { | ||
| background-color: rgba(0, 0, 0, 0.05); | ||
| font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; | ||
| font-size: 16px; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .RichEditor-controls { | ||
| font-family: 'Helvetica', sans-serif; | ||
| font-size: 14px; | ||
| margin-bottom: 5px; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .RichEditor-styleButton { | ||
| color: #999; | ||
| cursor: pointer; | ||
| margin-right: 16px; | ||
| padding: 2px 0; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .RichEditor-activeButton { | ||
| color: #5890ff; | ||
| } |
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,51 +1,184 @@ | ||
| import React, { Component } from 'react'; | ||
| // Require Editor JS files. | ||
| import 'froala-editor/js/froala_editor.pkgd.min.js'; | ||
|
|
||
| // Require Editor CSS files. | ||
| import 'froala-editor/css/froala_style.min.css'; | ||
| import 'froala-editor/css/froala_editor.pkgd.min.css'; | ||
|
|
||
| // Require Font Awesome. | ||
| import 'font-awesome/css/font-awesome.css'; | ||
|
|
||
| import FroalaEditor from 'react-froala-wysiwyg'; | ||
| const $ = require('jquery'); | ||
|
|
||
| export default class Login extends Component{ | ||
| constructor(props){ | ||
| super(props); | ||
| this.state={username:'admin', password:'admin'}; | ||
| this.handleChangeUsername = this.handleChangeUsername.bind(this); | ||
| this.handleChangePassword = this.handleChangePassword.bind(this); | ||
| } | ||
| handleChangeUsername(event) { | ||
| this.setState({username: event.target.value}) | ||
| } | ||
| handleChangePassword(event) { | ||
| this.setState({password: event.target.value}) | ||
| /** | ||
| * Copyright (c) 2013-present, Facebook, Inc. All rights reserved. | ||
| * | ||
| * This file provided by Facebook is for non-commercial testing and evaluation | ||
| * purposes only. Facebook reserves all rights not expressly granted. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL | ||
| * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN | ||
| * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN | ||
| * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| import Draft from 'draft-js'; | ||
| import {Map} from 'immutable'; | ||
| import React from 'react'; | ||
|
|
||
| import TeXBlock from './TeXBlock'; | ||
| import {content} from '../data/content'; | ||
| import {insertTeXBlock} from '../modifiers/insertTeXBlock'; | ||
| import {removeTeXBlock} from '../modifiers/removeTeXBlock'; | ||
| import '../css/TeXEditor.css'; | ||
| var {Editor, EditorState, RichUtils} = Draft; | ||
|
|
||
| class StyleButton extends React.Component { | ||
| constructor() { | ||
| super(); | ||
|
|
||
| this.onToggle = (e) => { | ||
| e.preventDefault(); | ||
| this.props.onToggle(this.props.style); | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| let className = "styleButton"; | ||
|
|
||
| if (this.props.active) { | ||
| className += " active"; | ||
| } | ||
|
|
||
| return ( | ||
| <button className={className} onMouseDown={this.onToggle} >{this.props.label}</button> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const BLOCK_TYPES = [ | ||
| { label: "H1", style: "header-one" }, | ||
| { label: "H2", style: "header-two" }, | ||
| { label: '"', style: "blockquote" }, | ||
| { label: "UL", style: "unordered-list-item" }, | ||
| { label: "OL", style: "ordered-list-item" }, | ||
| { label: "</>", style: "code-block" } | ||
| ]; | ||
|
|
||
| const BlockStyleControls = (props) => { | ||
| const {editorState} = props; | ||
| const selection = editorState.getSelection(); | ||
| const blockType = editorState.getCurrentContent() | ||
| .getBlockForKey(selection.getStartKey()) | ||
| .getType(); | ||
|
|
||
| return ( | ||
| <div className="block controls"> | ||
| { | ||
| BLOCK_TYPES.map((type) => ( | ||
| <StyleButton | ||
| key={type.label} | ||
| active={type.style === blockType} | ||
| label={type.label} | ||
| onToggle={props.onToggle} | ||
| style={type.style} | ||
| /> | ||
| )) | ||
| } | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| render() { | ||
| return( | ||
| <div> | ||
| <h1 style={{paddingTop:'2em'}}> | ||
| Login | ||
| </h1> | ||
| <form> | ||
| <div className="form-group"> | ||
| <label htmlFor="username"> Username:</label> | ||
| <input type="text" className="form-control" id="username" placeholder="enter username" value={this.state.value} onChange={this.handleChangeUsername}/> | ||
| </div> | ||
| <div className="form-group"> | ||
| <label htmlFor="password"> Password:</label> | ||
| <input type="text" className="form-control" id="password" placeholder="enter pasword" value={this.state.value} onChange={this.handleChangePassword}/> | ||
| </div> | ||
| <button type="submit" class="btn btn-primary">Submit</button> | ||
| </form> | ||
| <FroalaEditor tag='textarea'/> | ||
| </div> | ||
| ); | ||
|
|
||
| export default class TeXEditorExample extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| editorState: EditorState.createWithContent(content), | ||
| liveTeXEdits: Map(), | ||
| }; | ||
|
|
||
| this._blockRenderer = (block) => { | ||
| if (block.getType() === 'atomic') { | ||
| return { | ||
| component: TeXBlock, | ||
| editable: false, | ||
| props: { | ||
| onStartEdit: (blockKey) => { | ||
| var {liveTeXEdits} = this.state; | ||
| this.setState({liveTeXEdits: liveTeXEdits.set(blockKey, true)}); | ||
| }, | ||
| onFinishEdit: (blockKey, newContentState) => { | ||
| var {liveTeXEdits} = this.state; | ||
| this.setState({ | ||
| liveTeXEdits: liveTeXEdits.remove(blockKey), | ||
| editorState:EditorState.createWithContent(newContentState), | ||
| }); | ||
| }, | ||
| onRemove: (blockKey) => this._removeTeX(blockKey), | ||
| }, | ||
| }; | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| this._focus = () => this.refs.editor.focus(); | ||
| this._onChange = (editorState) => this.setState({editorState}); | ||
|
|
||
| this._handleKeyCommand = (command, editorState) => { | ||
| var newState = RichUtils.handleKeyCommand(editorState, command); | ||
| if (newState) { | ||
| this._onChange(newState); | ||
| return true; | ||
| } | ||
| return false; | ||
| }; | ||
|
|
||
| this._removeTeX = (blockKey) => { | ||
| var {editorState, liveTeXEdits} = this.state; | ||
| this.setState({ | ||
| liveTeXEdits: liveTeXEdits.remove(blockKey), | ||
| editorState: removeTeXBlock(editorState, blockKey), | ||
| }); | ||
| }; | ||
|
|
||
| this._insertTeX = () => { | ||
| this.setState({ | ||
| liveTeXEdits: Map(), | ||
| editorState: insertTeXBlock(this.state.editorState), | ||
| }); | ||
| }; | ||
|
|
||
|
|
||
| this._toggleBlockType = (type) => { | ||
| const {editorState} = this.state; | ||
|
|
||
| this._onChange(RichUtils.toggleBlockType(editorState, type)); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * While editing TeX, set the Draft editor to read-only. This allows us to | ||
| * have a textarea within the DOM. | ||
| */ | ||
| render() { | ||
| return ( | ||
| <div className="TexEditor-container"> | ||
| <div className="TeXEditor-root"> | ||
| <div className="TeXEditor-editor" onClick={this._focus}> | ||
| <BlockStyleControls | ||
| className="block" | ||
| editorState={this.state.editorState} | ||
| onToggle={this._toggleBlockType} | ||
| /> | ||
| <Editor | ||
| blockRendererFn={this._blockRenderer} | ||
| editorState={this.state.editorState} | ||
| handleKeyCommand={this._handleKeyCommand} | ||
| onChange={this._onChange} | ||
| placeholder="Start a document..." | ||
| readOnly={this.state.liveTeXEdits.count()} | ||
| ref="editor" | ||
| spellCheck={true} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <button onClick={this._insertTeX} className="TeXEditor-insert"> | ||
| {'Insert new TeX'} | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.