@fileverse-dev/ddoc 2.1.3 → 2.1.4

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.
Files changed (19) hide show
  1. package/README.md +95 -56
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.es.js +40032 -40021
  4. package/dist/package/common/spinner.d.ts +3 -1
  5. package/dist/package/components/editor-bubble-menu/props.d.ts +1 -0
  6. package/dist/package/components/editor-bubble-menu/types.d.ts +1 -0
  7. package/dist/package/components/inline-comment/comment-bubble-card.d.ts +2 -1
  8. package/dist/package/components/inline-comment/comment-card.d.ts +2 -1
  9. package/dist/package/components/inline-comment/comment-section.d.ts +1 -1
  10. package/dist/package/components/inline-comment/context/comment-context.d.ts +1 -1
  11. package/dist/package/components/inline-comment/context/types.d.ts +5 -0
  12. package/dist/package/components/inline-comment/types.d.ts +3 -1
  13. package/dist/package/hooks/use-headless-editor.d.ts +12 -0
  14. package/dist/package/hooks/useEscapeKey.d.ts +1 -0
  15. package/dist/package/types.d.ts +2 -0
  16. package/dist/package/utils/helpers.d.ts +2 -1
  17. package/dist/style.css +1 -1
  18. package/package.json +3 -2
  19. package/dist/package/common/cutsom-tooltip.d.ts +0 -8
package/README.md CHANGED
@@ -1,80 +1,87 @@
1
1
  # Ddoc Editor
2
2
 
3
- This repo contains example - demo source code and package code
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
- `/package` contains the package code
5
+ <img width="4410" alt="github_banner_final@3x" src="https://github.com/user-attachments/assets/c6ee706d-979d-41b6-9f73-d29fbabb5152" />
6
+
7
+
8
+ This repository contains:
9
+ - `/package` – The core package code.
10
+ - Example & demo source code to showcase dDocs functionalities.
6
11
 
7
12
  ## Usage
8
13
 
9
14
  ### Prequisites
10
15
 
11
- - You should be using tailwindcss and it must have tailwind configuration
16
+ To use dDocs, ensure your project is set up with Tailwind CSS and have a Tailwind configuration file.
12
17
 
13
- `import { DdocEditor } from '@fileverse-dev/ddoc'`
18
+ ### Install & import
19
+ Add the following imports :
20
+ ```javascript
21
+ import { DdocEditor } from '@fileverse-dev/ddoc'
22
+ import '@fileverse-dev/ddoc/styles' // in App.jsx/App.tsx
23
+ ```
14
24
 
15
- `import '@fileverse-dev/ddoc/styles'` in App.jsx/App.tsx
16
25
 
17
- In your tailwind config, add this line to content array
26
+ ### Update Tailwind Config
27
+ In your tailwind config, add this line to content array :
18
28
 
19
29
  `@fileverse-dev/ddoc/dist/index.es.js`
20
30
 
21
- That's it, you should be able to use DdocEditor now
31
+ You should now be set to use dDocs!
22
32
 
23
- ### Props
24
33
 
25
- # DdocProps Interface
34
+ # dDocProps Interface
26
35
 
27
- 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.
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.
28
37
 
29
38
  ## Properties
30
39
 
31
- | Property | Type | Description |
32
- | ---------------------------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
33
- | `isPreviewMode` | `boolean` | Indicates whether the page is in preview mode or not. |
34
- | `data` (optional) | `Data` | Optional property holding data related to the page. |
35
- | `enableCollaboration` (optional) | `boolean` | Optional property to enable collaboration |
36
- | `onCommentInteraction` (optional) | `(commentInfo: IEditSelectionData) => void` | Optional function that get's called whenever there is a mouse-over and click interaction on a comment |
37
- | `collaborationId` (optional) | `string` | When using enableCollaboration, you need to provide collaborationId, it can be uuid of doc |
38
- | `onTextSelection` (optional) | `(data: IEditorSelectionData) => void` | Function called when a text is selected on the editor |
39
- | `renderToolRightSection` (optional) | `({editor}) => JSX.Element` | Function that render the right section of the toolbar. it calls the function with the editor instance |
40
- | `renderToolLeftSection` (optional) | `({editor}) => JSX.Element` | Accept a react component |
41
- | `username` (required when using collaboration) | `boolean` | Takes a username which can be used by collaboration cursor |
42
- | `walletAddress` (optional) | `string ` | Takes a wallet address |
43
- | `ref` (optional) | `any` | Gets editor instance |
44
- | `ensResolutionUrl` (optional) | `string` | Api Url for resolving ens names |
45
- | `secureImageUploadUrl` (optional) | `string` | Api Url for secure image upload |
46
- | `initialContent` (optional) | `JSONContent` | Initial content of the editor |
47
- | `onChange` (optional) | `(changes: JSONContent) => void` | Optional function that gets triggered with the latest content of the editor on every change in the editor |
48
- | `onCollaboratorChange` (optional) | `(collaborators?: IDocCollabUsers[] ) => void` | Optional function that gets triggered when a user join or leave the doc during collaboration |
49
- | `onError` (optional) | `(errorString: string) => void` | Function to call on error |
50
- | `setCharacterCount` (optional) | `React.Dispatch<SetStateAction<number>>` | Optional. React Set State function to update Character Count |
51
- | `setWordCount` (optional) | `React.Dispatch<SetStateAction<number>>` | Optional. React Set State function to update Word Count |
52
- | `scrollPosition`(optional) | `number` | User cursor position to scroll to on intitalising the content of the editor |
53
- | `enableIndexeddbSync` (optional) | `boolean` | Indicates when to use yjs-indexeddb provider |
54
- | `ddocId` (optional) | `string` | custom ID for the document (this has to be provided to enable yjs-indexeddb provider) |
55
- | `editorCanvasClassNames`(optional) | `string` | Optional. Extra className for editor-canvas |
56
- | `selectedTags` (optional) | `TagType[]` | Array of currently selected tags |
57
- | `setSelectedTags` (optional) | `React.Dispatch<SetStateAction<TagType[]>>` | Function to update selected tags |
58
- | `zoomLevel` (required) | `string` | Current zoom level of the editor |
59
- | `setZoomLevel` (required) | `React.Dispatch<SetStateAction<string>>` | Function to update zoom level |
60
- | `isNavbarVisible` (required) | `boolean` | Controls visibility of the navbar |
61
- | `setIsNavbarVisible` (required) | `React.Dispatch<SetStateAction<boolean>>` | Function to toggle navbar visibility |
62
- | `renderNavbar` (optional) | `({ editor: JSONContent }) => JSX.Element` | Function to render custom navbar content |
63
- | `disableBottomToolbar` (optional) | `boolean` | When true, disables the bottom toolbar |
64
- | `isPresentationMode` (optional) | `boolean` | Controls if editor is in presentation mode |
65
- | `setIsPresentationMode` (optional) | `React.Dispatch<SetStateAction<boolean>>` | Function to toggle presentation mode |
66
- | `onInlineComment` (optional) | `() => void` | Callback function when inline comment is added |
67
- | `onMarkdownExport` (optional) | `() => void` | Callback function for markdown export |
68
- | `onMarkdownImport` (optional) | `() => void` | Callback function for markdown import |
69
- | `sharedSlidesLink` (optional) | `string` | Link for shared slides in presentation mode |
70
- | `documentName` (optional) | `string` | Name of the document |
71
- | `onSlidesShare` (optional) | `() => void` | Callback |
72
- | `proExtensions` (optional) | `Record<string, Extension \| any>` | Object mapping extension names to their configurations. **Note:** Requires proper `.npmrc` setup and installing the corresponding extension packages. Example: `{ ai: AiExtension, slides: SlidesExtension }` |
73
- | |
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 |
74
81
 
75
82
  ## Data Interface
76
83
 
77
- The `Data` interface defines the structure of the data object
84
+ The `Data` interface defines the structure of the data object.
78
85
 
79
86
  ### Properties
80
87
 
@@ -87,9 +94,9 @@ The `Data` interface defines the structure of the data object
87
94
  - `npm i`
88
95
  - `npm run dev`
89
96
 
90
- It will open up a vite server, that will have the Ddoc Editor
97
+ It will open up a vite server, that will have the Ddoc Editor.
91
98
 
92
- ⚠️ This repository is currently undergoing rapid development, with frequent updates and changes. We recommend not to use in production yet
99
+ ⚠️ This repository is currently undergoing rapid development, with frequent updates and changes. We recommend not to use in production yet.
93
100
 
94
101
  ## Pro Extensions Setup
95
102
 
@@ -104,3 +111,35 @@ proExtensions={{
104
111
  TableOfContents
105
112
  }}
106
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 |
package/dist/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export { default as DdocEditor } from './package/ddoc-editor';
2
2
  export { PreviewDdocEditor } from './package/preview-ddoc-editor';
3
+ export { handleContentPrint } from './package/utils/handle-print';
4
+ export { useHeadlessEditor } from './package/hooks/use-headless-editor';