@fileverse-dev/ddoc 2.1.4-patch-11 → 2.1.4-patch-9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -94
- package/dist/index.es.js +6689 -6711
- package/dist/package/hooks/use-headless-editor.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# Ddoc Editor
|
|
2
2
|
|
|
3
|
-
[ddocs.new](http://ddocs.new/) is your onchain, privacy-first alternative to G
|
|
3
|
+
[ddocs.new](http://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.
|
|
4
4
|
|
|
5
5
|
<img width="4410" alt="github_banner_final@3x" src="https://github.com/user-attachments/assets/c6ee706d-979d-41b6-9f73-d29fbabb5152" />
|
|
6
6
|
|
|
7
|
-
This repository contains:
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
This repository contains:
|
|
9
|
+
- `/package` – The core package code.
|
|
10
10
|
- Example & demo source code to showcase dDocs functionalities.
|
|
11
11
|
|
|
12
12
|
## Usage
|
|
@@ -16,112 +16,78 @@ This repository contains:
|
|
|
16
16
|
To use dDocs, ensure your project is set up with Tailwind CSS and have a Tailwind configuration file.
|
|
17
17
|
|
|
18
18
|
### Install & import
|
|
19
|
-
|
|
20
19
|
Add the following imports :
|
|
21
|
-
|
|
22
20
|
```javascript
|
|
23
|
-
import { DdocEditor } from '@fileverse-dev/ddoc'
|
|
24
|
-
import '@fileverse-dev/ddoc/styles'
|
|
21
|
+
import { DdocEditor } from '@fileverse-dev/ddoc'
|
|
22
|
+
import '@fileverse-dev/ddoc/styles' // in App.jsx/App.tsx
|
|
25
23
|
```
|
|
26
24
|
|
|
27
|
-
### Update Tailwind Config
|
|
28
25
|
|
|
26
|
+
### Update Tailwind Config
|
|
29
27
|
In your tailwind config, add this line to content array :
|
|
30
28
|
|
|
31
29
|
`@fileverse-dev/ddoc/dist/index.es.js`
|
|
32
30
|
|
|
33
31
|
You should now be set to use dDocs!
|
|
34
32
|
|
|
33
|
+
|
|
35
34
|
# dDocProps Interface
|
|
36
35
|
|
|
37
36
|
The `DdocProps` interface is a TypeScript interface that defines the properties for a page-related component. It includes properties for handling preview mode, managing publishing data, and optionally storing metadata and content associated with the page.
|
|
38
37
|
|
|
39
|
-
##
|
|
40
|
-
|
|
41
|
-
| Property
|
|
42
|
-
|
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
| `
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
| `zoomLevel`
|
|
69
|
-
| `setZoomLevel`
|
|
70
|
-
| `isNavbarVisible`
|
|
71
|
-
| `setIsNavbarVisible`
|
|
72
|
-
| `renderNavbar`
|
|
73
|
-
| `
|
|
74
|
-
| `isPresentationMode`
|
|
75
|
-
| `setIsPresentationMode` | `React.Dispatch<SetStateAction<boolean>>`
|
|
76
|
-
| `
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
| `
|
|
92
|
-
|
|
93
|
-
## Authentication Props
|
|
94
|
-
|
|
95
|
-
| Property | Type | Description |
|
|
96
|
-
| -------------------- | ------------------------------------- | ----------------------------------- |
|
|
97
|
-
| `isConnected` | `boolean` | User connection status |
|
|
98
|
-
| `isLoading` | `boolean` | Authentication loading state |
|
|
99
|
-
| `connectViaUsername` | `(username: string) => Promise<void>` | Username-based authentication |
|
|
100
|
-
| `connectViaWallet` | `() => Promise<void>` | Wallet-based authentication |
|
|
101
|
-
| `isDDocOwner` | `boolean` | Indicates if user owns the document |
|
|
102
|
-
|
|
103
|
-
## Utility Props
|
|
104
|
-
|
|
105
|
-
| Property | Type | Description |
|
|
106
|
-
| ---------------------- | ---------------------------------------- | ---------------------------- |
|
|
107
|
-
| `setCharacterCount` | `React.Dispatch<SetStateAction<number>>` | Updates character count |
|
|
108
|
-
| `setWordCount` | `React.Dispatch<SetStateAction<number>>` | Updates word count |
|
|
109
|
-
| `ensResolutionUrl` | `string` | URL for ENS name resolution |
|
|
110
|
-
| `secureImageUploadUrl` | `string` | URL for secure image uploads |
|
|
111
|
-
| `onError` | `(error: string) => void` | General error handler |
|
|
112
|
-
| `onInlineComment` | `() => void` | Callback for inline comments |
|
|
113
|
-
| `onMarkdownExport` | `() => void` | Callback for markdown export |
|
|
114
|
-
| `onMarkdownImport` | `() => void` | Callback for markdown import |
|
|
115
|
-
| `onSlidesShare` | `() => void` | Callback for slides sharing |
|
|
116
|
-
| `onComment` | `() => void` | General comment callback |
|
|
117
|
-
|
|
118
|
-
## Pro Features
|
|
119
|
-
|
|
120
|
-
| Property | Type | Description |
|
|
121
|
-
| --------------- | ---------------------------------------------- | ------------------------------------- |
|
|
122
|
-
| `showTOC` | `boolean` | Controls table of contents visibility |
|
|
123
|
-
| `setShowTOC` | `React.Dispatch<SetStateAction<boolean>>` | Function to toggle TOC |
|
|
124
|
-
| `proExtensions` | `{ TableOfContents: any, [key: string]: any }` | Pro feature extensions |
|
|
38
|
+
## Properties
|
|
39
|
+
|
|
40
|
+
| Property | Type | Description |
|
|
41
|
+
| ---------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
42
|
+
| `isPreviewMode` | `boolean` | Indicates whether the page is in preview mode or not. |
|
|
43
|
+
| `data` (optional) | `Data` | Optional property holding data related to the page. |
|
|
44
|
+
| `enableCollaboration` (optional) | `boolean` | Optional property to enable collaboration |
|
|
45
|
+
| `onCommentInteraction` (optional) | `(commentInfo: IEditSelectionData) => void` | Optional function that get's called whenever there is a mouse-over and click interaction on a comment |
|
|
46
|
+
| `collaborationId` (optional) | `string` | When using enableCollaboration, you need to provide collaborationId, it can be uuid of doc |
|
|
47
|
+
| `onTextSelection` (optional) | `(data: IEditorSelectionData) => void` | Function called when a text is selected on the editor |
|
|
48
|
+
| `renderToolRightSection` (optional) | `({editor}) => JSX.Element` | Function that render the right section of the toolbar. it calls the function with the editor instance |
|
|
49
|
+
| `renderToolLeftSection` (optional) | `({editor}) => JSX.Element` | Accept a react component |
|
|
50
|
+
| `username` (required when using collaboration) | `boolean` | Takes a username which can be used by collaboration cursor |
|
|
51
|
+
| `walletAddress` (optional) | `string ` | Takes a wallet address |
|
|
52
|
+
| `ref` (optional) | `any` | Gets editor instance |
|
|
53
|
+
| `ensResolutionUrl` (optional) | `string` | Api Url for resolving ens names |
|
|
54
|
+
| `secureImageUploadUrl` (optional) | `string` | Api Url for secure image upload |
|
|
55
|
+
| `initialContent` (optional) | `JSONContent` | Initial content of the editor |
|
|
56
|
+
| `onChange` (optional) | `(changes: JSONContent) => void` | Optional function that gets triggered with the latest content of the editor on every change in the editor |
|
|
57
|
+
| `onCollaboratorChange` (optional) | `(collaborators?: IDocCollabUsers[] ) => void` | Optional function that gets triggered when a user join or leave the doc during collaboration |
|
|
58
|
+
| `onError` (optional) | `(errorString: string) => void` | Function to call on error |
|
|
59
|
+
| `setCharacterCount` (optional) | `React.Dispatch<SetStateAction<number>>` | Optional. React Set State function to update Character Count |
|
|
60
|
+
| `setWordCount` (optional) | `React.Dispatch<SetStateAction<number>>` | Optional. React Set State function to update Word Count |
|
|
61
|
+
| `scrollPosition`(optional) | `number` | User cursor position to scroll to on intitalising the content of the editor |
|
|
62
|
+
| `enableIndexeddbSync` (optional) | `boolean` | Indicates when to use yjs-indexeddb provider |
|
|
63
|
+
| `ddocId` (optional) | `string` | custom ID for the document (this has to be provided to enable yjs-indexeddb provider) |
|
|
64
|
+
| `editorCanvasClassNames`(optional) | `string` | Optional. Extra className for editor-canvas |
|
|
65
|
+
| `selectedTags` (optional) | `TagType[]` | Array of currently selected tags |
|
|
66
|
+
| `setSelectedTags` (optional) | `React.Dispatch<SetStateAction<TagType[]>>` | Function to update selected tags |
|
|
67
|
+
| `zoomLevel` (required) | `string` | Current zoom level of the editor |
|
|
68
|
+
| `setZoomLevel` (required) | `React.Dispatch<SetStateAction<string>>` | Function to update zoom level |
|
|
69
|
+
| `isNavbarVisible` (required) | `boolean` | Controls visibility of the navbar |
|
|
70
|
+
| `setIsNavbarVisible` (required) | `React.Dispatch<SetStateAction<boolean>>` | Function to toggle navbar visibility |
|
|
71
|
+
| `renderNavbar` (optional) | `({ editor: JSONContent }) => JSX.Element` | Function to render custom navbar content |
|
|
72
|
+
| `disableBottomToolbar` (optional) | `boolean` | When true, disables the bottom toolbar |
|
|
73
|
+
| `isPresentationMode` (optional) | `boolean` | Controls if editor is in presentation mode |
|
|
74
|
+
| `setIsPresentationMode` (optional) | `React.Dispatch<SetStateAction<boolean>>` | Function to toggle presentation mode |
|
|
75
|
+
| `onInlineComment` (optional) | `() => void` | Callback function when inline comment is added |
|
|
76
|
+
| `onMarkdownExport` (optional) | `() => void` | Callback function for markdown export |
|
|
77
|
+
| `onMarkdownImport` (optional) | `() => void` | Callback function for markdown import |
|
|
78
|
+
| `sharedSlidesLink` (optional) | `string` | Link for shared slides in presentation mode |
|
|
79
|
+
| `documentName` (optional) | `string` | Name of the document |
|
|
80
|
+
| `onSlidesShare` (optional) | `() => void` | Callback |
|
|
81
|
+
|
|
82
|
+
## Data Interface
|
|
83
|
+
|
|
84
|
+
The `Data` interface defines the structure of the data object.
|
|
85
|
+
|
|
86
|
+
### Properties
|
|
87
|
+
|
|
88
|
+
| Property | Type | Description |
|
|
89
|
+
| ---------------- | ------------- | ------------------------------------------ |
|
|
90
|
+
| `editorJSONData` | `JSONContent` | Contains JSON data for the editor content. |
|
|
125
91
|
|
|
126
92
|
### Steps to run this example locally
|
|
127
93
|
|
|
@@ -145,3 +111,35 @@ proExtensions={{
|
|
|
145
111
|
TableOfContents
|
|
146
112
|
}}
|
|
147
113
|
```
|
|
114
|
+
|
|
115
|
+
### Comment-related Props
|
|
116
|
+
|
|
117
|
+
| Prop | Type | Description |
|
|
118
|
+
| ---------------------- | --------------------------------------- | -------------------------------------------------------- |
|
|
119
|
+
| `initialComments` | `IComment[]` | Array of initial comments to populate the editor |
|
|
120
|
+
| `onCommentReply` | `(id: string, reply: IComment) => void` | Callback function when a reply is added to a comment |
|
|
121
|
+
| `onNewComment` | `(comment: IComment) => void` | Callback function when a new comment is created |
|
|
122
|
+
| `setInitialComments` | `(comments: IComment[]) => void` | Function to update the initial comments array |
|
|
123
|
+
| `onResolveComment` | `(commentId: string) => void` | Callback function when a comment is marked as resolved |
|
|
124
|
+
| `onUnresolveComment` | `(commentId: string) => void` | Callback function when a comment is marked as unresolved |
|
|
125
|
+
| `onDeleteComment` | `(commentId: string) => void` | Callback function when a comment is deleted |
|
|
126
|
+
| `commentDrawerOpen` | `boolean` | Controls the visibility of the comment drawer |
|
|
127
|
+
| `setCommentDrawerOpen` | `(isOpen: boolean) => void` | Function to toggle the comment drawer |
|
|
128
|
+
|
|
129
|
+
### Table of Contents Props
|
|
130
|
+
|
|
131
|
+
| Prop | Type | Description |
|
|
132
|
+
| --------------- | ------------------------------------------------------- | --------------------------------------------------- |
|
|
133
|
+
| `showTOC` | `boolean` | Controls the visibility of the table of contents |
|
|
134
|
+
| `setShowTOC` | `(show: boolean) => void` | Function to toggle the table of contents visibility |
|
|
135
|
+
| `proExtensions` | `{ TableOfContents: any, getHierarchicalIndexes: any }` | Extensions for table of contents functionality |
|
|
136
|
+
|
|
137
|
+
### Authentication Props
|
|
138
|
+
|
|
139
|
+
| Prop | Type | Description |
|
|
140
|
+
| -------------------- | ------------------------------------- | --------------------------------------------------- |
|
|
141
|
+
| `isConnected` | `boolean` | Indicates if the user is connected |
|
|
142
|
+
| `connectViaWallet` | `() => Promise<void>` | Function to handle wallet-based authentication |
|
|
143
|
+
| `isLoading` | `boolean` | Indicates if authentication is in progress |
|
|
144
|
+
| `connectViaUsername` | `(username: string) => Promise<void>` | Function to handle username-based authentication |
|
|
145
|
+
| `isDDocOwner` | `boolean` | Indicates if the current user is the document owner |
|