@fileverse-dev/dpage NPM

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