@fileverse-dev/ddoc 2.3.0-patch-13-customisation-1 → 2.3.0-patch-13-customisation-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
CHANGED
|
@@ -74,6 +74,57 @@ The `DdocProps` interface is a TypeScript interface that defines the properties
|
|
|
74
74
|
| `isPresentationMode` | `boolean` | Controls presentation mode |
|
|
75
75
|
| `setIsPresentationMode` | `React.Dispatch<SetStateAction<boolean>>` | Function to toggle presentation mode |
|
|
76
76
|
| `sharedSlidesLink` | `string` | Link for shared presentation slides |
|
|
77
|
+
| `documentStyling` | `DocumentStyling` | Custom styling for document appearance |
|
|
78
|
+
|
|
79
|
+
## Document Styling
|
|
80
|
+
|
|
81
|
+
The `documentStyling` prop allows you to customize the visual appearance of your document with three distinct styling areas:
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
interface DocumentStyling {
|
|
85
|
+
/**
|
|
86
|
+
* Background styling for the outer document area.
|
|
87
|
+
* Supports CSS background values including gradients.
|
|
88
|
+
* Example: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
|
89
|
+
*/
|
|
90
|
+
background?: string;
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Background color for the editor canvas/content area.
|
|
94
|
+
* Should be a solid color value.
|
|
95
|
+
* Example: "#ffffff" or "rgb(255, 255, 255)"
|
|
96
|
+
*/
|
|
97
|
+
canvasBackground?: string;
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Text color for the editor content.
|
|
101
|
+
* Example: "#333333" or "rgb(51, 51, 51)"
|
|
102
|
+
*/
|
|
103
|
+
textColor?: string;
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Font family for the editor content.
|
|
107
|
+
* Example: "Inter, sans-serif" or "'Times New Roman', serif"
|
|
108
|
+
*/
|
|
109
|
+
fontFamily?: string;
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Usage Example
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
<DdocEditor
|
|
117
|
+
documentStyling={{
|
|
118
|
+
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
119
|
+
canvasBackground: "#ffffff",
|
|
120
|
+
textColor: "#333333",
|
|
121
|
+
fontFamily: "Inter, sans-serif"
|
|
122
|
+
}}
|
|
123
|
+
// ... other props
|
|
124
|
+
/>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
**Note:** Document styling works in both regular editor mode and presentation mode. In presentation mode, only `canvasBackground`, `textColor`, and `fontFamily` are applied to maintain clean slide appearance.
|
|
77
128
|
|
|
78
129
|
## Comments & Collaboration Props
|
|
79
130
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { B as p, g as m, s as w, d as k, i as b, l as L, a as O, c as E, b as x, e as R, H as y, f as M } from "./index-
|
|
1
|
+
import { B as p, g as m, s as w, d as k, i as b, l as L, a as O, c as E, b as x, e as R, H as y, f as M } from "./index-Bh4jhRK0.mjs";
|
|
2
2
|
class S extends p {
|
|
3
3
|
constructor({ callbackSelector: r, cause: a, data: n, extraData: i, sender: f, urls: t }) {
|
|
4
4
|
var o;
|