1 |
|
2 |
|
3 |
|
4 | import { View } from 'react-native';
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | import { __ } from '@wordpress/i18n';
|
10 | import { Component } from '@wordpress/element';
|
11 | import { createBlock } from '@wordpress/blocks';
|
12 | import { RichText } from '@wordpress/block-editor';
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | import styles from './style.scss';
|
18 |
|
19 | const name = 'core/paragraph';
|
20 |
|
21 | class ParagraphEdit extends Component {
|
22 | constructor( props ) {
|
23 | super( props );
|
24 | this.splitBlock = this.splitBlock.bind( this );
|
25 | this.onReplace = this.onReplace.bind( this );
|
26 |
|
27 | this.state = {
|
28 | aztecHeight: 0,
|
29 | };
|
30 | }
|
31 |
|
32 | |
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | splitBlock( before, after, ...blocks ) {
|
46 | const {
|
47 | attributes,
|
48 | insertBlocksAfter,
|
49 | setAttributes,
|
50 | onReplace,
|
51 | } = this.props;
|
52 |
|
53 | if ( after !== null ) {
|
54 |
|
55 |
|
56 | const newBlock = createBlock( name, { content: after } );
|
57 | blocks.push( newBlock );
|
58 | }
|
59 |
|
60 | if ( blocks.length && insertBlocksAfter ) {
|
61 | insertBlocksAfter( blocks );
|
62 | }
|
63 |
|
64 | const { content } = attributes;
|
65 | if ( before === null ) {
|
66 | onReplace( [] );
|
67 | } else if ( content !== before ) {
|
68 |
|
69 |
|
70 |
|
71 | setAttributes( { content: before } );
|
72 | }
|
73 | }
|
74 |
|
75 | onReplace( blocks ) {
|
76 | const { attributes, onReplace } = this.props;
|
77 | onReplace( blocks.map( ( block, index ) => (
|
78 | index === 0 && block.name === name ?
|
79 | { ...block,
|
80 | attributes: {
|
81 | ...attributes,
|
82 | ...block.attributes,
|
83 | },
|
84 | } :
|
85 | block
|
86 | ) ) );
|
87 | }
|
88 |
|
89 | render() {
|
90 | const {
|
91 | attributes,
|
92 | setAttributes,
|
93 | mergeBlocks,
|
94 | style,
|
95 | } = this.props;
|
96 |
|
97 | const {
|
98 | placeholder,
|
99 | content,
|
100 | } = attributes;
|
101 |
|
102 | const minHeight = styles.blockText.minHeight;
|
103 |
|
104 | return (
|
105 | <View>
|
106 | <RichText
|
107 | tagName="p"
|
108 | value={ content }
|
109 | isSelected={ this.props.isSelected }
|
110 | onFocus={ this.props.onFocus }
|
111 | onBlur={ this.props.onBlur }
|
112 | onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange }
|
113 | style={ {
|
114 | ...style,
|
115 | minHeight: Math.max( minHeight, this.state.aztecHeight ),
|
116 | } }
|
117 | onChange={ ( nextContent ) => {
|
118 | setAttributes( {
|
119 | content: nextContent,
|
120 | } );
|
121 | } }
|
122 | onSplit={ this.splitBlock }
|
123 | onMerge={ mergeBlocks }
|
124 | onReplace={ this.onReplace }
|
125 | onContentSizeChange={ ( event ) => {
|
126 | this.setState( { aztecHeight: event.aztecHeight } );
|
127 | } }
|
128 | placeholder={ placeholder || __( 'Start writing…' ) }
|
129 | />
|
130 | </View>
|
131 | );
|
132 | }
|
133 | }
|
134 |
|
135 | export default ParagraphEdit;
|