@fileverse-dev/ddoc 1.0.0 → 1.0.1
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 +80 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,30 +1,88 @@
|
|
|
1
|
-
#
|
|
1
|
+
# DPage Editor
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This repo contains example source code and package code
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`/src/packages/ddoc/` contains the package code
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
7
|
+
## Usage
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
### Prequisites
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
- You should be using tailwindcss and it must have tailwind configuration
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
`import { DdocEditor } from '@fileverse-dev/ddoc'`
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
export default {
|
|
18
|
-
// other rules...
|
|
19
|
-
parserOptions: {
|
|
20
|
-
ecmaVersion: 'latest',
|
|
21
|
-
sourceType: 'module',
|
|
22
|
-
project: ['./tsconfig.json', './tsconfig.node.json'],
|
|
23
|
-
tsconfigRootDir: __dirname,
|
|
24
|
-
},
|
|
25
|
-
}
|
|
26
|
-
```
|
|
15
|
+
`import '@fileverse-dev/ddoc/dist/style.css'` in App.jsx/App.tsx
|
|
27
16
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
-
|
|
17
|
+
In your tailwind config, add this line to content array
|
|
18
|
+
|
|
19
|
+
`@fileverse-dev/ddoc/dist/index.es.js`
|
|
20
|
+
|
|
21
|
+
That's it, you should be able to use DdocEditor now
|
|
22
|
+
|
|
23
|
+
### Props
|
|
24
|
+
|
|
25
|
+
# DdocProps Interface
|
|
26
|
+
|
|
27
|
+
The `DpageProps` 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.
|
|
28
|
+
|
|
29
|
+
## Properties
|
|
30
|
+
|
|
31
|
+
| Property | Type | Description |
|
|
32
|
+
|--------------------|---------------------------|------------------------------------------------------------|
|
|
33
|
+
| `isPreviewMode` | `boolean` | Indicates whether the page is in preview mode or not. |
|
|
34
|
+
| `togglePreviewMode`| `(flag: boolean) => void` | Function to toggle preview mode with a boolean flag. |
|
|
35
|
+
| `onPublish` | `(data: Data) => void` | Function to handle publishing of the page. |
|
|
36
|
+
| `data` (optional) | `Data` | Optional property holding data related to the page. |
|
|
37
|
+
|
|
38
|
+
## Data Interface
|
|
39
|
+
|
|
40
|
+
The `Data` interface defines the structure of the data object that can be passed to the `onPublish` function and optionally included in the `data` property of `DpageProps`.
|
|
41
|
+
|
|
42
|
+
### Properties
|
|
43
|
+
|
|
44
|
+
| Property | Type | Description |
|
|
45
|
+
|-------------------|------------------|------------------------------------------------|
|
|
46
|
+
| `metaData` | `PluginMetaData` | Contains metadata related to the plugin. |
|
|
47
|
+
| `editorJSONData` | `JSONContent` | Contains JSON data for the editor content. |
|
|
48
|
+
|
|
49
|
+
## PluginMetaData Interface
|
|
50
|
+
|
|
51
|
+
The `PluginMetaData` interface defines the structure of the metadata related to the plugin.
|
|
52
|
+
|
|
53
|
+
### Properties
|
|
54
|
+
|
|
55
|
+
| Property | Type | Description |
|
|
56
|
+
|-------------------|-------------|------------------------------------------------|
|
|
57
|
+
| `cover` | `Cover` | Contains information about the cover. |
|
|
58
|
+
| `plugin` | `Plugin` | Contains information about the plugin title. |
|
|
59
|
+
|
|
60
|
+
## Cover Interface
|
|
61
|
+
|
|
62
|
+
The `Cover` interface defines the structure of the cover information.
|
|
63
|
+
|
|
64
|
+
### Properties
|
|
65
|
+
|
|
66
|
+
| Property | Type | Description |
|
|
67
|
+
|------------|------------------|-------------------------------------------------------|
|
|
68
|
+
| `image` | `string \| null` | URL of the cover image (can be `null`). |
|
|
69
|
+
| `emoji` | `string \| null` | Emoji associated with the cover (can be `null`). |
|
|
70
|
+
| `name` | `string \| null` | Name of the cover (can be `null`). |
|
|
71
|
+
|
|
72
|
+
## Plugin Interface
|
|
73
|
+
|
|
74
|
+
The `Plugin` interface defines the structure of the plugin information.
|
|
75
|
+
|
|
76
|
+
### Properties
|
|
77
|
+
|
|
78
|
+
| Property | Type | Description |
|
|
79
|
+
|------------|------------------|-------------------------------------------------------|
|
|
80
|
+
| `title` | `string \| null` | Title of the plugin (can be `null`). |
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
### Steps to run this example locally
|
|
84
|
+
|
|
85
|
+
- `npm i`
|
|
86
|
+
- `npm run dev`
|
|
87
|
+
|
|
88
|
+
It will open up a vite server, that will have the DPage Editor
|