New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@fileverse-dev/ddoc

Package Overview
Dependencies
Maintainers
0
Versions
292
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fileverse-dev/ddoc

DDoc

  • 2.1.3-patch-29
  • latest
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Ddoc Editor

ddocs.new is your onchain, privacy-first alternative to G**gle D*cs: peer-to-peer, end-to-end encrypted, and decentralized. It enables secure, real-time, and async collaboration without compromising user privacy.

github_banner_final@3x

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 { DdocEditor } from '@fileverse-dev/ddoc'

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

In your tailwind config, add this line to content array

@fileverse-dev/ddoc/dist/index.es.js

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

Props

DdocProps Interface

The DdocProps 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

PropertyTypeDescription
isPreviewModebooleanIndicates whether the page is in preview mode or not.
data (optional)DataOptional property holding data related to the page.
enableCollaboration (optional)booleanOptional property to enable collaboration
onCommentInteraction (optional)(commentInfo: IEditSelectionData) => voidOptional function that get's called whenever there is a mouse-over and click interaction on a comment
collaborationId (optional)stringWhen using enableCollaboration, you need to provide collaborationId, it can be uuid of doc
onTextSelection (optional)(data: IEditorSelectionData) => voidFunction called when a text is selected on the editor
renderToolRightSection (optional)({editor}) => JSX.ElementFunction that render the right section of the toolbar. it calls the function with the editor instance
renderToolLeftSection (optional)({editor}) => JSX.ElementAccept a react component
username (required when using collaboration)booleanTakes a username which can be used by collaboration cursor
walletAddress (optional)string Takes a wallet address
ref (optional)anyGets editor instance
ensResolutionUrl (optional)stringApi Url for resolving ens names
secureImageUploadUrl (optional)stringApi Url for secure image upload
initialContent (optional)JSONContentInitial content of the editor
onChange (optional)(changes: JSONContent) => voidOptional function that gets triggered with the latest content of the editor on every change in the editor
onCollaboratorChange (optional)(collaborators?: IDocCollabUsers[] ) => voidOptional function that gets triggered when a user join or leave the doc during collaboration
onError (optional)(errorString: string) => voidFunction 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
scrollPosition(optional)numberUser cursor position to scroll to on intitalising the content of the editor
enableIndexeddbSync (optional)booleanIndicates when to use yjs-indexeddb provider
ddocId (optional)stringcustom ID for the document (this has to be provided to enable yjs-indexeddb provider)
editorCanvasClassNames(optional)stringOptional. Extra className for editor-canvas
selectedTags (optional)TagType[]Array of currently selected tags
setSelectedTags (optional)React.Dispatch<SetStateAction<TagType[]>>Function to update selected tags
zoomLevel (required)stringCurrent zoom level of the editor
setZoomLevel (required)React.Dispatch<SetStateAction<string>>Function to update zoom level
isNavbarVisible (required)booleanControls visibility of the navbar
setIsNavbarVisible (required)React.Dispatch<SetStateAction<boolean>>Function to toggle navbar visibility
renderNavbar (optional)({ editor: JSONContent }) => JSX.ElementFunction to render custom navbar content
disableBottomToolbar (optional)booleanWhen true, disables the bottom toolbar
isPresentationMode (optional)booleanControls if editor is in presentation mode
setIsPresentationMode (optional)React.Dispatch<SetStateAction<boolean>>Function to toggle presentation mode
onInlineComment (optional)() => voidCallback function when inline comment is added
onMarkdownExport (optional)() => voidCallback function for markdown export
onMarkdownImport (optional)() => voidCallback function for markdown import
sharedSlidesLink (optional)stringLink for shared slides in presentation mode
documentName (optional)stringName of the document
onSlidesShare (optional)() => voidCallback

Data Interface

The Data interface defines the structure of the data object

Properties

PropertyTypeDescription
editorJSONDataJSONContentContains 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 Ddoc Editor

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

Pro Extensions Setup

  1. Configure your .npmrc with the appropriate registry and authentication token:

  2. Install the corresponding extension packages:

  3. Use the extension in your DdocEditor component:

proExtensions={{
  TableOfContents
}}
PropTypeDescription
initialCommentsIComment[]Array of initial comments to populate the editor
onCommentReply(id: string, reply: IComment) => voidCallback function when a reply is added to a comment
onNewComment(comment: IComment) => voidCallback function when a new comment is created
setInitialComments(comments: IComment[]) => voidFunction to update the initial comments array
onResolveComment(commentId: string) => voidCallback function when a comment is marked as resolved
onUnresolveComment(commentId: string) => voidCallback function when a comment is marked as unresolved
onDeleteComment(commentId: string) => voidCallback function when a comment is deleted
commentDrawerOpenbooleanControls the visibility of the comment drawer
setCommentDrawerOpen(isOpen: boolean) => voidFunction to toggle the comment drawer

Table of Contents Props

PropTypeDescription
showTOCbooleanControls the visibility of the table of contents
setShowTOC(show: boolean) => voidFunction to toggle the table of contents visibility
proExtensions{ TableOfContents: any, getHierarchicalIndexes: any }Extensions for table of contents functionality

Authentication Props

PropTypeDescription
isConnectedbooleanIndicates if the user is connected
connectViaWallet() => Promise<void>Function to handle wallet-based authentication
isLoadingbooleanIndicates if authentication is in progress
connectViaUsername(username: string) => Promise<void>Function to handle username-based authentication
isDDocOwnerbooleanIndicates if the current user is the document owner

FAQs

Package last updated on 25 Feb 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc