Skip to content

Commit

Permalink
preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@stulip
stulip committed Dec 31, 2020
1 parent 83c0c0c commit bfe1621
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 26 deletions.
2 changes: 2 additions & 0 deletions examples/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@
import React, {Component} from 'react';
import {Example} from './example';
import {Welcome} from './welcome';
import {Preview} from './preview';

const Routes = {
index: Welcome,
rich: Example,
preview: Preview,
};

type Props = {};
Expand Down
9 changes: 5 additions & 4 deletions examples/src/example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
} from 'react-native';
import {getBottomSpace} from 'react-native-iphone-x-helper';
import KeyboardSpacer from './helper/KeyboardSpacer';
import {actions, defaultActions, RichEditor, RichToolbar} from 'react-native-pell-rich-editor';
import {actions, RichEditor, RichToolbar, getContentCSS} from 'react-native-pell-rich-editor';
import {InsertLinkModal} from './insertLink';
import {EmojiView} from './emoji';

Expand Down Expand Up @@ -57,6 +57,7 @@ class Example extends React.Component {
const that = this;
const theme = props.theme || Appearance.getColorScheme();
const contentStyle = that.createContentStyle(theme);
that.richHTML = '';
that.state = {theme: theme, contentStyle, emojiVisible: false, disabled: false};
that.editorFocus = false;
that.onHome = ::that.onHome;
Expand Down Expand Up @@ -114,15 +115,15 @@ class Example extends React.Component {
// Get the data here and call the interface to save the data
let html = await this.richText.current?.getContentHtml();
// console.log(html);
alert(html);
this.props.navigation.push('preview', {html, css: getContentCSS()});
}

/**
* editor change data
* @param {string} html
*/
handleChange(html) {
// console.log('editor data:', html);
this.richHTML = html;
}

/**
Expand Down Expand Up @@ -278,7 +279,7 @@ class Example extends React.Component {
/>
<View style={styles.nav}>
<Button title={'HOME'} onPress={that.onHome} />
<Button title="Save" onPress={that.save} />
<Button title="Preview" onPress={that.save} />
</View>
<ScrollView style={[styles.scroll, themeBg]} keyboardDismissMode={'none'}>
<View>
Expand Down
50 changes: 50 additions & 0 deletions examples/src/preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// @flow
import React from 'react';
import {Button, StyleSheet, View, SafeAreaView} from 'react-native';
import {WebView} from 'react-native-webview';

type Props = {};
type State = {};

export class Preview extends React.Component<Props, State> {
onHome = () => {
this.props.navigation.push('rich');
};

render() {
const that = this;
let {html, css} = that.props;
html = `<html><head><meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">${css}</head><body>${html}</body></html>`;
return (
<SafeAreaView style={styles.container}>
<View style={styles.nav}>
<Button title={'EDITOR'} onPress={that.onHome} />
</View>
<WebView
useWebKit={true}
scrollEnabled={false}
hideKeyboardAccessoryView={true}
keyboardDisplayRequiresUserAction={false}
originWhitelist={['*']}
dataDetectorTypes={'none'}
domStorageEnabled={false}
bounces={false}
javaScriptEnabled={true}
source={{html}}
/>
</SafeAreaView>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
nav: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 5,
},
});
Binary file modified readme/editor.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 27 additions & 20 deletions src/editor.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,18 @@
function getContentCSS() {
return `
<style>
video {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
img {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
table {width: 100% !important;}
table td {width: inherit;}
table span { font-size: 12px !important; }
.x-todo li {list-style:none;}
.x-todo-box {position: relative; left: -24px;}
.x-todo-box input{position: absolute;}
</style>
`;
}

function createHTML(options = {}) {
const {
backgroundColor = '#FFF',
Expand All @@ -21,25 +36,18 @@ function createHTML(options = {}) {
<head>
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<style>
* {outline: 0px solid transparent;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;}
* {outline: 0px solid transparent;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;box-sizing: border-box;}
html, body { margin: 0; padding: 0;font-family: Arial, Helvetica, sans-serif; font-size:1em;}
body { overflow-y: hidden; -webkit-overflow-scrolling: touch;height: 100%;background-color: ${backgroundColor};}
img {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
video {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
.content {font-family: Arial, Helvetica, sans-serif;color: ${color}; width: 100%;height: 100%;-webkit-overflow-scrolling: touch;padding-left: 0;padding-right: 0;}
.pell { height: 100%;} .pell-content { outline: 0; overflow-y: auto;padding: 10px;height: 100%;${contentCSSText}}
table {width: 100% !important;}
table td {width: inherit;}
table span { font-size: 12px !important; }
.x-todo li {list-style:none;}
.x-todo-box {position: relative; left: -24px;}
.x-todo-box input{position: absolute;}
${cssText}
</style>
<style>
[placeholder]:empty:before { content: attr(placeholder); color: ${placeholderColor};}
[placeholder]:empty:focus:before { content: attr(placeholder);color: ${placeholderColor};}
</style>
${getContentCSS()}
<style>${cssText}</style>
</head>
<body>
<div class="content"><div id="editor" class="pell"></div></div>
Expand Down Expand Up @@ -131,7 +139,7 @@ function createHTML(options = {}) {
function execCheckboxList (node, html){
var html = createCheckbox(node ? node.innerHTML: '');
var HTML = "<ul class='x-todo'><li>"+ html +"</div></div>"
var HTML = "<ol class='x-todo'><li>"+ html +"</li></ol>"
var foNode;
if (node){
node.innerHTML = HTML;
Expand All @@ -148,7 +156,7 @@ function createHTML(options = {}) {
var _checkboxFlag = 0; // 1 = add checkbox; 2 = cancel checkbox
function cancelCheckboxList(box){
_checkboxFlag = 2;
exec("insertUnorderedList");
exec("insertOrderedList");
setCollapse(box);
}
Expand Down Expand Up @@ -240,13 +248,11 @@ function createHTML(options = {}) {
quote: { result: function() { return exec(formatBlock, '<blockquote>'); }},
removeFormat: { result: function() { return exec('removeFormat'); }},
orderedList: {
state: function() { return queryCommandState('insertOrderedList'); },
state: function() { return !checkboxNode(window.getSelection().anchorNode) && queryCommandState('insertOrderedList'); },
result: function() { if (!!checkboxNode(window.getSelection().anchorNode)) return;return exec('insertOrderedList'); }
},
unorderedList: {
state: function() {
return !checkboxNode(window.getSelection().anchorNode) && queryCommandState('insertUnorderedList');
},
state: function() { return queryCommandState('insertUnorderedList');},
result: function() { if (!!checkboxNode(window.getSelection().anchorNode)) return; return exec('insertUnorderedList');}
},
code: { result: function() { return exec(formatBlock, '<pre>'); }},
Expand Down Expand Up @@ -310,7 +316,7 @@ function createHTML(options = {}) {
if (!!box){
cancelCheckboxList(box.parentNode);
} else {
!queryCommandState('insertUnorderedList') && execCheckboxList(pNode);
!queryCommandState('insertOrderedList') && execCheckboxList(pNode);
}
}
},
Expand Down Expand Up @@ -433,7 +439,7 @@ function createHTML(options = {}) {
formatParagraph(true);
} else if (anchorNode.innerHTML === '<br>' && anchorNode.parentNode !== editor.content){
// setCollapse(editor.content);
} else if (queryCommandState('insertUnorderedList') && !!(box = checkboxNode(anchorNode))){
} else if (queryCommandState('insertOrderedList') && !!(box = checkboxNode(anchorNode))){
var node = anchorNode && anchorNode.childNodes[1];
if (node && node.nodeName === 'BR'){
cancelCheckboxList(box.parentNode);
Expand Down Expand Up @@ -504,7 +510,8 @@ function createHTML(options = {}) {
onChange: function (){
clearTimeout(_handleCTime);
_handleCTime = setTimeout(function(){
postAction({type: 'CONTENT_CHANGE', data: Actions.content.getHtml()});
var html = Actions.content.getHtml();
postAction({type: 'CONTENT_CHANGE', data: html});
}, 50);
}
})
Expand All @@ -529,4 +536,4 @@ function createHTML(options = {}) {
}

const HTML = createHTML();
export {HTML, createHTML};
export {HTML, createHTML, getContentCSS};
4 changes: 2 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import RichEditor from './RichEditor';
import RichToolbar, {defaultActions} from './RichToolbar';
import {actions} from './const';
import {createHTML} from './editor';
import {createHTML, getContentCSS} from './editor';

export {RichEditor, RichToolbar, actions, defaultActions, createHTML};
export {RichEditor, RichToolbar, actions, defaultActions, createHTML, getContentCSS};

0 comments on commit bfe1621

Please sign in to comment.