/
edit.native.js
98 lines (88 loc) · 1.88 KB
/
edit.native.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/**
* External dependencies
*/
import { View } from 'react-native';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';
import { AlignmentToolbar, BlockControls, RichText } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
const name = 'core/paragraph';
class ParagraphEdit extends Component {
constructor( props ) {
super( props );
this.onReplace = this.onReplace.bind( this );
}
onReplace( blocks ) {
const { attributes, onReplace } = this.props;
onReplace( blocks.map( ( block, index ) => (
index === 0 && block.name === name ?
{ ...block,
attributes: {
...attributes,
...block.attributes,
},
} :
block
) ) );
}
render() {
const {
attributes,
setAttributes,
mergeBlocks,
onReplace,
style,
} = this.props;
const {
align,
content,
placeholder,
} = attributes;
return (
<View>
<BlockControls>
<AlignmentToolbar
isCollapsed={ false }
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
/>
</BlockControls>
<RichText
identifier="content"
tagName="p"
value={ content }
deleteEnter={ true }
style={ style }
onChange={ ( nextContent ) => {
setAttributes( {
content: nextContent,
} );
} }
onSplit={ ( value ) => {
if ( ! value ) {
return createBlock( name );
}
return createBlock( name, {
...attributes,
content: value,
} );
} }
onMerge={ mergeBlocks }
onReplace={ onReplace }
onRemove={ onReplace ? () => onReplace( [] ) : undefined }
placeholder={ placeholder || __( 'Start writing…' ) }
textAlign={ align }
/>
</View>
);
}
}
export default ParagraphEdit;