react-davinci-editor v1.0.9

React Davinci Editor

An easy to integrate WYSIWYG Editor for your firebase react app

Disclaimer: React Davinci Editor is a work in progress, there are still many components and features to add before is considered stable so it is subject to change during its development.

Installation

npm install react-davinici-editor

Prequisites

Setup a firebase project, refer Firebase docs and setup authentication via email address, Firestore Database with a collection named blog and firebase storage.

Components

Note: Head down to Project Settings of your firebase app and find the firebaseConfig

Firebase Editor

Editor interface for building your blog posts

import {FirebaseEditor} from 'react-davinci-editor'

<FirebaseEditor FirebaseConfig={firebaseConfig} RegisterationAllowed={true}/>

Blog Post Builder

Component to layout your blog post by fetching data from firestore

import {BlogPostBuilder} from 'react-davinci-editor'

<BlogPostBuilder FirebaseConfig={firebaseConfig} BlogId="2k6zR62zkcJNOl4UG208" />

Notes:

• Use react-router or similar packages to generate blog posts based on params.
• Use withBlogPosts HOC as shown below or refer firebase docs and fetch doc ids for the collection 'blog;

withBlogPosts

withBlogPosts is a Higher Order Component that provides all the blog posts as props.

Example:

import React from 'react'
import withBlogPosts from 'react-davinci-editor';
function IndexPageExample(props) {
    return (
        <div>
            {props.blogPosts.map((post, index) => {
                return (
                    <div key={post.id}>
                        BlogId: {post.id} <br/>
                        Title: {post.pageInfo.title} <br/>
                        Excerpt: {post.pageInfo.excerpt} <br/>
                        Tags: {post.pageInfo.tags} <br/>
                        <img src={post.pageInfo.featuredImage}/>
                    </div>
                )
            })}
        </div>
    )
}
export default withBlogPosts(BuildIt);

Note: Must pass FirebaseConfig as props to your component

i.e <IndexPageExample FirebaseConfig={firebaseConfig}>