add autosizing for markdown editor
This commit is contained in:
parent
ba2f092dc3
commit
902134c4e8
@ -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",
|
||||||
|
@ -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}
|
||||||
|
@ -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"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user