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