imnapo / react-native-cn-richtext-editor Goto Github PK

constructor(props) {
    super(props);


    this.state = {
        selectedTag : 'body',
        selectedColor : 'default',
        selectedHighlight: 'default',
        colors : ['red', 'green', 'blue'],
        highlights:['yellow_hl','pink_hl', 'orange_hl', 'green_hl','purple_hl','blue_hl'],
        selectedStyles : [],
        value: [getInitialObject]
    };

    this.state.value = [getInitialObject()];

    this.editor = null;

}

onStyleKeyPress = (toolType) => {

    if (toolType == 'image') {
        return;
    }
    else {
        this.editor.applyToolbar(toolType);
    }

}

onSelectedTagChanged = (tag) => {

    this.setState({
        selectedTag: tag
    })
}

onSelectedStyleChanged = (styles) => {
    const colors = this.state.colors;
    const highlights = this.state.highlights;
    let sel = styles.filter(x=> colors.indexOf(x) >= 0);

    let hl = styles.filter(x=> highlights.indexOf(x) >= 0);
    this.setState({
        selectedStyles: styles,
        selectedColor : (sel.length > 0) ? sel[sel.length - 1] : 'default',
        selectedHighlight : (hl.length > 0) ? hl[hl.length - 1] : 'default',
    })

}

onValueChanged = (value) => {
    this.setState({
        value: value
    });
}

insertImage(url) {

    this.editor.insertImage(url);
}

askPermissionsAsync = async () => {
    const camera = await Permissions.askAsync(Permissions.CAMERA);
    const cameraRoll = await Permissions.askAsync(Permissions.CAMERA_ROLL);

    this.setState({
    hasCameraPermission: camera.status === 'granted',
    hasCameraRollPermission: cameraRoll.status === 'granted'
    });
};

useLibraryHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchImageLibraryAsync({
    allowsEditing: true,
    aspect: [4, 4],
    base64: false,
    });

    this.insertImage(result.uri);
};

useCameraHandler = async () => {
    await this.askPermissionsAsync();
    let result = await ImagePicker.launchCameraAsync({
    allowsEditing: true,
    aspect: [4, 4],
    base64: false,
    });
    console.log(result);

    this.insertImage(result.uri);
};

onImageSelectorClicked = (value) => {
    if(value == 1) {
        this.useCameraHandler();
    }
    else if(value == 2) {
        this.useLibraryHandler();
    }

}

onColorSelectorClicked = (value) => {

    if(value === 'default') {
        this.editor.applyToolbar(this.state.selectedColor);
    }
    else {
        this.editor.applyToolbar(value);

    }

    this.setState({
        selectedColor: value
    });
}

onHighlightSelectorClicked = (value) => {
    if(value === 'default') {
        this.editor.applyToolbar(this.state.selectedHighlight);
    }
    else {
        this.editor.applyToolbar(value);

    }

    this.setState({
        selectedHighlight: value
    });
}

renderImageSelector() {
    return (
        <Menu renderer={SlideInMenu} onSelect={this.onImageSelectorClicked}>
        <MenuTrigger>
            <MaterialCommunityIcons name="image" size={28} color="#737373" />
        </MenuTrigger>
        <MenuOptions>
            <MenuOption value={1}>
                <Text style={styles.menuOptionText}>
                    Take Photo
                </Text>
            </MenuOption>
            <View style={styles.divider}/>
            <MenuOption value={2} >
                <Text style={styles.menuOptionText}>
                    Photo Library
                </Text>
            </MenuOption>
            <View style={styles.divider}/>
            <MenuOption value={3}>
                <Text style={styles.menuOptionText}>
                    Cancel
                </Text>
            </MenuOption>
        </MenuOptions>
        </Menu>
    );

}

renderColorMenuOptions = () => {

    let lst = [];

    if(defaultStyles[this.state.selectedColor]) {
         lst = this.state.colors.filter(x => x !== this.state.selectedColor);
         lst.push('default');
        lst.push(this.state.selectedColor);
    }
    else {
        lst = this.state.colors.filter(x=> true);
        lst.push('default');
    }

    return (

        lst.map( (item) => {
            let color = defaultStyles[item] ? defaultStyles[item].color : 'black';
            return (
                <MenuOption value={item} key={item}>
                    <MaterialCommunityIcons name="format-color-text" color={color}
                    size={28} />
                </MenuOption>
            );
        })

    );
}

renderHighlightMenuOptions = () => {
    let lst = [];

    if(defaultStyles[this.state.selectedHighlight]) {
         lst = this.state.highlights.filter(x => x !== this.state.selectedHighlight);
         lst.push('default');
        lst.push(this.state.selectedHighlight);
    }
    else {
        lst = this.state.highlights.filter(x=> true);
        lst.push('default');
    }



    return (

        lst.map( (item) => {
            let bgColor = defaultStyles[item] ? defaultStyles[item].backgroundColor : 'black';
            return (
                <MenuOption value={item} key={item}>
                    <MaterialCommunityIcons name="marker" color={bgColor}
                    size={26} />
                </MenuOption>
            );
        })

    );
}

renderColorSelector() {

    let selectedColor = '#737373';
    if(defaultStyles[this.state.selectedColor])
    {
        selectedColor = defaultStyles[this.state.selectedColor].color;
    }


    return (
        <Menu renderer={SlideInMenu} onSelect={this.onColorSelectorClicked}>
        <MenuTrigger>
            <MaterialCommunityIcons name="format-color-text" color={selectedColor}
                    size={28} style={{
                        top:2
                    }} />
        </MenuTrigger>
        <MenuOptions customStyles={optionsStyles}>
            {this.renderColorMenuOptions()}
        </MenuOptions>
        </Menu>
    );
}

renderHighlight() {
    let selectedColor = '#737373';
    if(defaultStyles[this.state.selectedHighlight])
    {
        selectedColor = defaultStyles[this.state.selectedHighlight].backgroundColor;
    }
    return (
        <Menu renderer={SlideInMenu} onSelect={this.onHighlightSelectorClicked}>
        <MenuTrigger>
            <MaterialCommunityIcons name="marker" color={selectedColor}
                    size={24} style={{
                    }} />
        </MenuTrigger>
        <MenuOptions customStyles={highlightOptionsStyles}>
            {this.renderHighlightMenuOptions()}
        </MenuOptions>
        </Menu>
    );
}

render() {
    return (
        <KeyboardAvoidingView
        behavior="padding"
        enabled
        keyboardVerticalOffset={IS_IOS ? 0 : 0}
        style={{
            flex: 1,
            paddingTop: 20,
            backgroundColor:'#eee',
            flexDirection: 'column',
            justifyContent: 'flex-end',
        }}
        >
        <MenuProvider style={{flex: 1}}>
            <TouchableWithoutFeedback onPress={Keyboard.dismiss} >
                <View style={styles.main}>
                    <CNRichTextEditor
                        ref={input => this.editor = input}
                        onSelectedTagChanged={this.onSelectedTagChanged}
                        onSelectedStyleChanged={this.onSelectedStyleChanged}
                        value={this.state.value}
                        style={{ backgroundColor : '#fff'}}
                        styleList={defaultStyles}
                        //foreColor=''
                        onValueChanged={this.onValueChanged}
                        //onRemoveImage={this.onRemoveImage}
                    />
                </View>
            </TouchableWithoutFeedback>

            <View style={{
                minHeight: 35
            }}>

                <CNToolbar
                    size={28}
                    bold={<MaterialCommunityIcons name="format-bold" />}
                    italic={<MaterialCommunityIcons name="format-italic" />}
                    underline={<MaterialCommunityIcons name="format-underline" />}
                    lineThrough={<MaterialCommunityIcons name="format-strikethrough-variant" />}
                    body={<MaterialCommunityIcons name="format-text" />}
                    title={<MaterialCommunityIcons name="format-header-1" />}
                    heading={<MaterialCommunityIcons name="format-header-3" />}
                    ul={<MaterialCommunityIcons name="format-list-bulleted" />}
                    ol={<MaterialCommunityIcons name="format-list-numbers" />}
                    image={this.renderImageSelector()}
                    foreColor={this.renderColorSelector()}
                    highlight={this.renderHighlight()}
                    selectedTag={this.state.selectedTag}
                    selectedStyles={this.state.selectedStyles}
                    onStyleKeyPress={this.onStyleKeyPress} />
            </View>
        </MenuProvider>
    </KeyboardAvoidingView>
    );
}

alignItems: 'flex-end',

  demo = () => {
    const res = convertToHtmlString(this.state.value);
    console.log(res);
    const back = convertToObject(res);
    console.log(back);
    this.setState({ back });
  };

import React, { Component } from 'react';
import {
	View, StyleSheet, Keyboard
	, TouchableWithoutFeedback
	, KeyboardAvoidingView, Platform
} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons'
import CNRichTextEditor, { CNToolbar, getInitialObject } from "react-native-cn-richtext-editor";

export default class SendEmail extends Component {

	constructor(props) {
		super(props);

		this.state = {
			selectedTag: 'body',
			selectedStyles: [],
			value: [getInitialObject()]
		};

		this.editor = null;
	}

	onStyleKeyPress = (toolType) => {
		if (toolType !== 'image') {
			this.editor.applyToolbar(toolType);
		}
		else {
			// Handling image ...
		}
	}

	onSelectedTagChanged = (tag) => {
		this.setState({
			selectedTag: tag
		})
	}

	onSelectedStyleChanged = (styles) => {
		this.setState({
			selectedStyles: styles
		})
	}

	onValueChanged = (value) => {
		this.setState({
			value: value
		});
	}

	render() {
		return (
			<KeyboardAvoidingView
				behavior="padding"
				enabled
				keyboardVerticalOffset={0}
				style={{
					flex: 1,
					paddingTop: Platform.OS == 'ios' ? 20 : 0,
					backgroundColor: '#eee',
					flexDirection: 'column',
					justifyContent: 'flex-end'
				}}>
				<TouchableWithoutFeedback onPress={Keyboard.dismiss} >
					<View style={styles.main}>
						<CNRichTextEditor
							ref={input => this.editor = input}
							onSelectedTagChanged={this.onSelectedTagChanged}
							onSelectedStyleChanged={this.onSelectedStyleChanged}
							value={this.state.value}
							onValueChanged={this.onValueChanged}
							style={{ backgroundColor: '#fff', padding: 10 }}
						/>
					</View>
				</TouchableWithoutFeedback>

				<View style={{
					minHeight: 35
				}}>
					<CNToolbar
						selectedTag={this.state.selectedTag}
						selectedStyles={this.state.selectedStyles}
						onStyleKeyPress={this.onStyleKeyPress}
						size={28}
						bold={<MaterialCommunityIcons name="format-bold" />}
						italic={<MaterialCommunityIcons name="format-italic" />}
						underline={<MaterialCommunityIcons name="format-underline" />}
						lineThrough={<MaterialCommunityIcons name="format-strikethrough-variant" />}
						body={<MaterialCommunityIcons name="format-text" />}
						title={<MaterialCommunityIcons name="format-header-1" />}
						heading={<MaterialCommunityIcons name="format-header-3" />}
						ul={<MaterialCommunityIcons name="format-list-bulleted" />}
						ol={<MaterialCommunityIcons name="format-list-numbers" />}
						image={this.renderImageSelector()}
						foreColor={this.renderColorSelector()}
						highlight={this.renderHighlight()}
					/>
				</View>
			</KeyboardAvoidingView>
		);
	}
}

var styles = StyleSheet.create({
	main: {
		flex: 1,
		paddingTop: 0,
		paddingLeft: 30,
		paddingRight: 30,
		paddingBottom: 1,
		alignItems: 'stretch',

	},
});

this.state.value = convertToObject(html)

onSelectedStyleChanged = (styles) => {
    this.props.onSelectedStyleChanged(styles);
}

if (this.props.onSelectedStyleChanged) {
    this.props.onSelectedStyleChanged(styles);
}

                    bold={<MaterialCommunityIcons 
                        name="format-bold"
                        size={12}
                        color="#0120c1" />}
                    italic={<MaterialCommunityIcons 
                        name="format-italic"
                        color="#ffffff"  />}
                    underline={
                        <MaterialCommunityIcons 
                        name="format-underline"
                        color="#ffffff"  />
                    }
                    lineThrough={
                        <MaterialCommunityIcons 
                        name="format-strikethrough-variant"
                        color="#ffffff"  />
                    }
                    body={<MaterialCommunityIcons name="format-text" />}
                    title={
                        <MaterialCommunityIcons name="format-header-1" />
                    }
                    heading={
                        <MaterialCommunityIcons name="format-header-3" />
                    }
                    ul={
                        <MaterialCommunityIcons name="format-list-bulleted" />
                    }
                    ol={
                        <MaterialCommunityIcons name="format-list-numbers" />
                    }
                    indent={
                        <MaterialCommunityIcons name="format-list-numbers" />
                    }
                    foreColor={this.renderColorSelector()}
                    highlight={this.renderHighlight()}
                    selectedTag={this.state.selectedTag}
                    selectedStyles={this.state.selectedStyles}
                    onStyleKeyPress={this.onStyleKeyPress}
                />