firestore-text-editor

Firestore Text Editor wraps react-draft-wysiwyg and connects it to firestore.

Usage no npm install needed!

<script type="module">
  import firestoreTextEditor from 'https://cdn.skypack.dev/firestore-text-editor';
</script>

README

Firestore Text Editor

example

Firestore Text Editor wraps react-draft-wysiwyg and connects it to firestore.

Table of contents

  1. Getting Started
    1. Using Firestore Text Editor
  2. FirestoreTextEditorProvider
    1. FirestoreTextEditorProvider Props
    2. Example - Replacing Edit Button App Wide
  3. FirestoreTextEditor Props
    1. Example - Overriding Provider

Getting Started

npm install --save firestore-text-editor react react-dom firebase

Firestore Text Editor depends on React, React DOM, and Firebase which must also be installed.

Using Firestore Text Editor

import React from 'react';
import ReactDOM from 'react-dom';
import {
  FirestoreTextEditor,
  FirestoreTextEditorProvider,
} from 'firestore-text-editor';
import firebase from 'firebase/app';
import 'firebase/firestore';

let config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

const app = firebase.initializeApp(config);

function App() {
  return (
    <FirestoreTextEditorProvider app={app}>
      <FirestoreTextEditor path="pages/about" />
    </FirestoreTextEditorProvider>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

FirestoreTextEditorProvider

Firestore Text Editor uses a provider that takes in a prop "app", an instance of FirebaseApp. Through React's context API, anywhere the FirestoreTextEditor component is used, it has access to the FirebaseApp and can make database calls.

import {
  FirestoreTextEditor,
  FirestoreTextEditorProvider,
} from 'firestore-text-editor';

function App() {
  return (
    <FirestoreTextEditorProvider app={app}>
      <FirestoreTextEditor path="pages/about" />
    </FirestoreTextEditorProvider>
  );
}

FirestoreTextEditorProvider Props

Prop Type (* = required) Default Description
app FirebaseApp* An instance of FirebaseApp
field string "firestoreTextEditorData" Field on the document in Firestore that will be written
isEditable boolean true When true, an edit button will appear to change the editor into editing mode. Useful if not all users should be able to edit the data
loader ReactElement "Loading..." Override the loading component
SaveButton FunctionComponent<{ onClick: () => any; disabled?: boolean }> Replace the save button with a different component
EditButton FunctionComponent<{ onClick: () => any }> Replace the edit button with a different component
CancelButton FunctionComponent<{ onClick: () => any }> Replace the cancel button with a different component
saveButtonStyle CSSProperties Override the save button styles
saveIconStyle CSSProperties Override the save icon styles
editButtonStyle CSSProperties Override the edit button styles
editIconStyle CSSProperties Override the edit icon styles
cancelButtonStyle CSSProperties Override the cancel button styles
cancelIconStyle CSSProperties Override the cancel icon styles
wrapperStyle CSSProperties OR (editing: boolean) => CSSProperties Override the wrapper styles (from react-draft-wysiwyg)
editorStyle CSSProperties OR (editing: boolean) => CSSProperties Override the editor styles (from react-draft-wysiwyg)
toolbarStyle CSSProperties OR (editing: boolean) => CSSProperties Override the toolbar styles (from react-draft-wysiwyg)

Example - Replacing Edit Button App Wide

import {
  FirestoreTextEditor,
  FirestoreTextEditorProvider,
} from 'firestore-text-editor';
import { app } from './services/firebase';

function App() {
  return (
    <FirestoreTextEditorProvider
      app={app}
      EditButton={props => <button {...props}>Edit</button>}
    >
      {/* Both editors will have new edit button */}
      <FirestoreTextEditor path="pages/about" />
      <FirestoreTextEditor path="pages/faq" />
    </FirestoreTextEditorProvider>
  );
}

export default App;

FirestoreTextEditor Props

The FirestoreTextEditor component can be configured with props. Any shared props with the provider will be overridden.

Prop Type (* = required) Default Description
path string* Path to the document that will be written in Firestore
field string "firestoreTextEditorData" Field on the document in Firestore that will be written
isEditable boolean true When true, an edit button will appear to change the editor into editing mode. Useful if not all users should be able to edit the data
loader ReactElement "Loading..." Override the loading component
onSave (editorState: EditorState) => any Called whenever the editor is saved. Add some extra functionality here if you wish. The editorState passed in the params has the shape of draft-js EditorState
SaveButton FunctionComponent<{ onClick: () => any; disabled?: boolean }> Replace the save button with a different component
EditButton FunctionComponent<{ onClick: () => any }> Replace the edit button with a different component
CancelButton FunctionComponent<{ onClick: () => any }> Replace the cancel button with a different component
saveButtonStyle CSSProperties Override the save button styles
saveIconStyle CSSProperties Override the save icon styles
editButtonStyle CSSProperties Override the edit button styles
editIconStyle CSSProperties Override the edit icon styles
cancelButtonStyle CSSProperties Override the cancel button styles
cancelIconStyle CSSProperties Override the cancel icon styles
wrapperStyle CSSProperties OR (editing: boolean) => CSSProperties Override the wrapper styles (from react-draft-wysiwyg)
editorStyle CSSProperties OR (editing: boolean) => CSSProperties Override the editor styles (from react-draft-wysiwyg)
toolbarStyle CSSProperties OR (editing: boolean) => CSSProperties Override the toolbar styles (from react-draft-wysiwyg)

Example - Overriding Provider

import {
  FirestoreTextEditor,
  FirestoreTextEditorProvider,
} from 'firestore-text-editor';
import { app } from './services/firebase';

function App() {
  return (
    <FirestoreTextEditorProvider
      app={app}
      SaveButton={props => <button {...props}>Save1</button>}
    >
      {/* This editor will have Save1 button from provider */}
      <FirestoreTextEditor path="pages/about" />

      {/* This editor will have Save2 button from prop */}
      <FirestoreTextEditor
        SaveButton={props => <button {...props}>Save2</button>}
        path="pages/faq"
      />
    </FirestoreTextEditorProvider>
  );
}

export default App;