add autosizing for markdown editor

This commit is contained in:
Shawn Erquhart 2017-04-19 19:08:08 -04:00
parent ba2f092dc3
commit 902134c4e8
3 changed files with 9 additions and 2 deletions

View File

@ -147,6 +147,7 @@
"react-simple-dnd": "^0.1.2", "react-simple-dnd": "^0.1.2",
"react-sortable": "^1.2.0", "react-sortable": "^1.2.0",
"react-split-pane": "^0.1.57", "react-split-pane": "^0.1.57",
"react-textarea-autosize-inputref": "^4.1.0",
"react-toolbox": "^1.2.1", "react-toolbox": "^1.2.1",
"react-topbar-progress-indicator": "^1.0.0", "react-topbar-progress-indicator": "^1.0.0",
"react-waypoint": "^3.1.3", "react-waypoint": "^3.1.3",

View File

@ -3,6 +3,7 @@ import MarkupIt from 'markup-it';
import markdownSyntax from 'markup-it/syntaxes/markdown'; import markdownSyntax from 'markup-it/syntaxes/markdown';
import htmlSyntax from 'markup-it/syntaxes/html'; import htmlSyntax from 'markup-it/syntaxes/html';
import CaretPosition from 'textarea-caret-position'; import CaretPosition from 'textarea-caret-position';
import TextareaAutosize from 'react-textarea-autosize-inputref';
import registry from '../../../../lib/registry'; import registry from '../../../../lib/registry';
import { createAssetProxy } from '../../../../valueObjects/AssetProxy'; import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
import Toolbar from '../Toolbar/Toolbar'; import Toolbar from '../Toolbar/Toolbar';
@ -171,6 +172,7 @@ export default class RawEditor extends React.Component {
} }
handleRef = (ref) => { handleRef = (ref) => {
console.log(ref);
this.element = ref; this.element = ref;
if (ref) { if (ref) {
this.caretPosition = new CaretPosition(ref); this.caretPosition = new CaretPosition(ref);
@ -337,8 +339,8 @@ export default class RawEditor extends React.Component {
rawMode rawMode
/> />
</Sticky> </Sticky>
<textarea <TextareaAutosize
ref={this.handleRef} inputRef={this.handleRef}
value={this.props.value || ''} value={this.props.value || ''}
onKeyDown={this.handleKey} onKeyDown={this.handleKey}
onChange={this.handleChange} onChange={this.handleChange}

View File

@ -7249,6 +7249,10 @@ react-style-proptype@^1.4.0:
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-1.4.0.tgz#d82c4093b73767e3efaacba013cea22a50e7b5ee" resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-1.4.0.tgz#d82c4093b73767e3efaacba013cea22a50e7b5ee"
react-textarea-autosize-inputref@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/react-textarea-autosize-inputref/-/react-textarea-autosize-inputref-4.1.0.tgz#4a12921f9c992a8e2c6ce569ab46982a96ca48f6"
react-themeable@^1.1.0: react-themeable@^1.1.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e" resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"