npm package: @fileverse-dev/dpage
Description: Dpage
Latest version: 1.0.4

# DPage Editor

This repo contains example - demo source code and package code

`/package` contains the package code

## Usage

### Prequisites

- You should be using tailwindcss and it must have tailwind configuration

`import { DPageEditor } from '@fileverse-dev/dpage'`

`import '@fileverse-dev/dpage/styles'` in App.jsx/App.tsx

In your tailwind config, add this line to content array

`@fileverse-dev/dpage/dist/index.es.js`

That's it, you should be able to use DpageEditor now

### Props

# Dpage Interface

The `Dpage` interface is a TypeScript interface that defines the properties for a component related to a page. This interface includes properties for handling preview mode, publishing data, and optional data related to the page's metadata and content.

## Properties

| Property                                       | Type                                           | Description                                                                                               |
| ---------------------------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| `isPreviewMode`                                | `boolean`                                      | Indicates whether the page is in preview mode or not.                                                     |
| `data` (optional)                              | `Data`                                         | Optional property holding data related to the page.                                                       |
| `enableCollaboration` (optional)               | `boolean`                                      | Optional property to enable collaboration                                                                 |
| `onCommentInteraction` (optional)              | `(commentInfo: IEditSelectionData) => void`    | Optional function that get's called whenever there is a mouse-over and click interaction on a comment     |
| `collaborationId` (optional)                   | `string`                                       | When using enableCollaboration, you need to provide collaborationId, it can be uuid of doc                |
| `onTextSelection` (optional)                   | `(data: IEditorSelectionData) => void`         | Function called when a text is selected on the editor                                                     |
| `renderToolRightSection` (optional)            | `({editor}) => JSX.Element`                    | Function that render the right section of the toolbar. it calls the function with the editor instance     |
| `renderToolLeftSection` (optional)             | `({editor}) => JSX.Element`                    | Accept a react component                                                                                  |
| `username` (required when using collaboration) | `boolean`                                      | Takes a username which can be used by collaboration cursor                                                |
| `walletAddress` (optional)                     | `string `                                      | Takes a wallet address                                                                                    |
| `ref` (optional)                               | `any`                                          | Gets editor instance                                                                                      |
| `ensResolutionUrl` (optional)                  | `string`                                       | Api Url for resolving ens names                                                                           |
| `initialContent` (optional)                    | `JSONContent`                                  | Initial content of the editor                                                                             |
| `onChange` (optional)                          | `(changes: {editor: JSONContent, documentData: Data}) => void`               | Optional function that gets triggered with the latest content of the editor on every change in the editor |
| `onCollaboratorChange` (optional)              | `(collaborators?: IDocCollabUsers[] ) => void` | Optional function that gets triggered when a user join or leave the doc during collaboration              |
| `onError` (optional)                           | `(errorString: string) => void`                | Function to call on error                                                                                 |
| `setCharacterCount` (optional)                 | `React.Dispatch<SetStateAction<number>>`       | Optional. React Set State function to update Character Count                                              |
| `setWordCount` (optional)                      | `React.Dispatch<SetStateAction<number>>`       | Optional. React Set State function to update Word Count                                                   |

## Data Interface

The `Data` interface defines the structure of the data object

### Properties

| Property         | Type          | Description                                |
| ---------------- | ------------- | ------------------------------------------ |
| `editorJSONData` | `JSONContent` | Contains JSON data for the editor content. |

### Steps to run this example locally

- `npm i`
- `npm run dev`

It will open up a vite server, that will have the Dpage Editor

⚠️ This repository is currently undergoing rapid development, with frequent updates and changes. We recommend not to use in production yet