editcrafter 1.0.2 → 1.0.3
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 +9 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ pnpm add editcrafter
|
|
|
34
34
|
### Basic Usage
|
|
35
35
|
|
|
36
36
|
```tsx
|
|
37
|
-
import {
|
|
37
|
+
import { EditCrafter } from 'editcrafter';
|
|
38
38
|
import 'editcrafter/dist/editcrafter.css';
|
|
39
39
|
|
|
40
40
|
function App() {
|
|
@@ -43,7 +43,7 @@ function App() {
|
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
return (
|
|
46
|
-
<
|
|
46
|
+
<EditCrafter
|
|
47
47
|
onContentChange={handleContentChange}
|
|
48
48
|
placeholder="Start writing..."
|
|
49
49
|
/>
|
|
@@ -57,14 +57,14 @@ Tailwind v4 changed how CSS is imported. Here's how to integrate EditCrafter:
|
|
|
57
57
|
|
|
58
58
|
```tsx
|
|
59
59
|
// app.tsx or main.tsx
|
|
60
|
-
import {
|
|
60
|
+
import { EditCrafter } from 'editcrafter';
|
|
61
61
|
// Import the CSS file
|
|
62
62
|
import 'editcrafter/dist/editcrafter.css';
|
|
63
63
|
|
|
64
64
|
function App() {
|
|
65
65
|
return (
|
|
66
66
|
<div className="container mx-auto p-4">
|
|
67
|
-
<
|
|
67
|
+
<EditCrafter placeholder="Write something amazing..." />
|
|
68
68
|
</div>
|
|
69
69
|
);
|
|
70
70
|
}
|
|
@@ -86,7 +86,7 @@ const initialContent = `
|
|
|
86
86
|
<p>This is a <strong>rich text editor</strong> built with Tiptap.</p>
|
|
87
87
|
`;
|
|
88
88
|
|
|
89
|
-
<
|
|
89
|
+
<EditCrafter
|
|
90
90
|
initialValue={initialContent}
|
|
91
91
|
onContentChange={handleContentChange}
|
|
92
92
|
/>
|
|
@@ -115,7 +115,7 @@ const uploadImage = async (
|
|
|
115
115
|
return data.url; // Return the uploaded image URL
|
|
116
116
|
};
|
|
117
117
|
|
|
118
|
-
<
|
|
118
|
+
<EditCrafter
|
|
119
119
|
imageUploaderConfig={{
|
|
120
120
|
enabledefault: true,
|
|
121
121
|
defaultUploadHandler: uploadImage,
|
|
@@ -128,7 +128,7 @@ const uploadImage = async (
|
|
|
128
128
|
For more control over image insertion:
|
|
129
129
|
|
|
130
130
|
```tsx
|
|
131
|
-
import {
|
|
131
|
+
import { EditCrafter } from 'editcrafter';
|
|
132
132
|
|
|
133
133
|
const CustomImageButton = ({ addImage }: { addImage: (url: string) => void }) => {
|
|
134
134
|
const handleClick = async () => {
|
|
@@ -140,7 +140,7 @@ const CustomImageButton = ({ addImage }: { addImage: (url: string) => void }) =>
|
|
|
140
140
|
return <button onClick={handleClick}>Add Image</button>;
|
|
141
141
|
};
|
|
142
142
|
|
|
143
|
-
<
|
|
143
|
+
<EditCrafter
|
|
144
144
|
imageUploaderConfig={{
|
|
145
145
|
enabledefault: false,
|
|
146
146
|
CustomToolbarButton: CustomImageButton,
|
|
@@ -150,7 +150,7 @@ const CustomImageButton = ({ addImage }: { addImage: (url: string) => void }) =>
|
|
|
150
150
|
|
|
151
151
|
## Components
|
|
152
152
|
|
|
153
|
-
###
|
|
153
|
+
### EditCrafter
|
|
154
154
|
|
|
155
155
|
The main editor component.
|
|
156
156
|
|