Firestore Text Editor

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;