ct-rich-text-editor 1.3.5 → 1.3.6
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 +217 -217
- package/dist/App.d.ts +2 -3
- package/dist/Provider/EditorProvider.d.ts +18 -19
- package/dist/Provider/LexicalProvider.d.ts +5 -6
- package/dist/api/ai/index.d.ts +27 -20
- package/dist/api/auth.d.ts +108 -108
- package/dist/api/config/axios.d.ts +1 -2
- package/dist/api/config/endpoints.d.ts +17 -15
- package/dist/api/transcript/index.d.ts +1 -1
- package/dist/assets/style.css +5039 -4188
- package/dist/{babel-d155920e.js → babel-d3085146.js} +3565 -3292
- package/dist/babel-d3085146.js.map +1 -0
- package/dist/components/AiPlugin/index.d.ts +4 -4
- package/dist/components/AlignMenu/AlignMenu.d.ts +8 -9
- package/dist/components/AlignMenu/AlignMenuDrop.d.ts +2 -3
- package/dist/components/AlignMenu/index.d.ts +1 -1
- package/dist/components/AutoExpandingDemo.d.ts +5 -6
- package/dist/components/BlockFormatMenu/BlockFormatMenu.d.ts +2 -3
- package/dist/components/BlockFormatMenu/constants.d.ts +14 -14
- package/dist/components/BlockFormatMenu/index.d.ts +1 -1
- package/dist/components/CodeActionMenuPlugin/components/CopyButton/index.d.ts +6 -7
- package/dist/components/CodeActionMenuPlugin/components/PrettierButton/index.d.ts +8 -9
- package/dist/components/CodeActionMenuPlugin/index.d.ts +4 -5
- package/dist/components/CodeActionMenuPlugin/utils.d.ts +1 -1
- package/dist/components/ColorPicker/ColorPicker.d.ts +2 -3
- package/dist/components/ColorPicker/index.d.ts +1 -1
- package/dist/components/CommentSidebar/CommentSidebar.d.ts +7 -8
- package/dist/components/CommentSidebar/index.d.ts +1 -1
- package/dist/components/CommentToggle/CommentToggle.d.ts +7 -8
- package/dist/components/CommentToggle/index.d.ts +1 -1
- package/dist/components/CommentView/CommentView.d.ts +8 -9
- package/dist/components/CommentView/index.d.ts +1 -1
- package/dist/components/ConfigurableEditorWithAuth.d.ts +12 -13
- package/dist/components/DatePicker/DatePickerWidget.d.ts +7 -8
- package/dist/components/EmojiPickerWidget/EmojiPickerWidget.d.ts +2 -3
- package/dist/components/EmojiPickerWidget/index.d.ts +1 -1
- package/dist/components/FileUpload/InsertFileDialog.d.ts +7 -7
- package/dist/components/FileUpload/InsertFileUploadedDialogBody.d.ts +4 -5
- package/dist/components/FileView/index.d.ts +8 -9
- package/dist/components/FontFamilySelect/FontFamilyMenu.d.ts +6 -7
- package/dist/components/FontSizePicker/FontSizeControl.d.ts +2 -3
- package/dist/components/FormatTextMenu/FormatTextMenu.d.ts +2 -3
- package/dist/components/FormatTextMenu/FormatTextMenuDrop.d.ts +2 -3
- package/dist/components/FormatTextMenu/index.d.ts +1 -1
- package/dist/components/HighlightColorPicker/HighlightColorPicker.d.ts +6 -7
- package/dist/components/HtmlViewDisplay.d.ts +2 -3
- package/dist/components/ImageGenerationDialog/ImageGenerationManager.d.ts +9 -10
- package/dist/components/ImageGenerationDialog/index.d.ts +9 -9
- package/dist/components/ImageInsertTest.d.ts +2 -3
- package/dist/components/ImageView/ImageDialog/ImageUploadDialogBody.d.ts +8 -9
- package/dist/components/ImageView/ImageDialog/index.d.ts +5 -6
- package/dist/components/ImageView/ImageResizer.d.ts +15 -16
- package/dist/components/ImageView/index.d.ts +13 -14
- package/dist/components/InsertMenu/InsertMenu.d.ts +8 -9
- package/dist/components/InsertMenu/InsertMenuDrop.d.ts +8 -9
- package/dist/components/InsertMenu/index.d.ts +1 -1
- package/dist/components/NotePanelMenu/NotePanelMenu.d.ts +5 -6
- package/dist/components/NotePanelMenu/index.d.ts +1 -1
- package/dist/components/NotePanelView/NotePanelView.d.ts +8 -9
- package/dist/components/NotePanelView/index.d.ts +1 -1
- package/dist/components/Placeholder/Placeholder.d.ts +2 -3
- package/dist/components/Placeholder/index.d.ts +1 -1
- package/dist/components/Placeholder/styles.d.ts +1 -1
- package/dist/components/ScopedEditor.d.ts +8 -8
- package/dist/components/SignatureCaption/index.d.ts +6 -0
- package/dist/components/TableColorPicker/index.d.ts +7 -8
- package/dist/components/TableModal/TableModal.d.ts +9 -10
- package/dist/components/TextEnhanceDialog/index.d.ts +10 -0
- package/dist/components/Toolbar/Toolbar.d.ts +2 -3
- package/dist/components/Toolbar/index.d.ts +1 -1
- package/dist/components/Toolbar/styles.d.ts +6 -6
- package/dist/components/ui/avatar.d.ts +6 -6
- package/dist/components/ui/badge.d.ts +8 -9
- package/dist/components/ui/button.d.ts +10 -11
- package/dist/components/ui/calendar.d.ts +7 -8
- package/dist/components/ui/card.d.ts +8 -8
- package/dist/components/ui/checkbox.d.ts +4 -4
- package/dist/components/ui/dialog.d.ts +19 -19
- package/dist/components/ui/dropdown-menu.d.ts +27 -27
- package/dist/components/ui/input.d.ts +3 -3
- package/dist/components/ui/label.d.ts +4 -4
- package/dist/components/ui/popover.d.ts +7 -7
- package/dist/components/ui/select.d.ts +13 -13
- package/dist/components/ui/separator.d.ts +4 -4
- package/dist/components/ui/sheet.d.ts +24 -24
- package/dist/components/ui/skeleton.d.ts +3 -3
- package/dist/components/ui/tabs.d.ts +7 -7
- package/dist/components/ui/textarea.d.ts +3 -3
- package/dist/components/ui/tooltip.d.ts +7 -7
- package/dist/constants.d.ts +21 -22
- package/dist/context/CommentContext.d.ts +30 -31
- package/dist/context/HtmlViewContext.d.ts +16 -17
- package/dist/context/ToolbarContext.d.ts +55 -56
- package/dist/editorConfig.d.ts +48 -47
- package/dist/{estree-b1fff53b.js → estree-164983f6.js} +1763 -1778
- package/dist/estree-164983f6.js.map +1 -0
- package/dist/hooks/useAutoExpandingHeight.d.ts +15 -15
- package/dist/hooks/useBlockFormat.d.ts +16 -17
- package/dist/hooks/useColorPicker.d.ts +6 -6
- package/dist/hooks/useCustomCommands.d.ts +2 -3
- package/dist/hooks/useDebounce.d.ts +1 -1
- package/dist/hooks/useEditorToolbar.d.ts +9 -10
- package/dist/hooks/useInsertMenu.d.ts +9 -9
- package/dist/hooks/useModal.d.ts +5 -5
- package/dist/hooks/useS3Uploader.d.ts +11 -11
- package/dist/hooks/useVoiceToText.d.ts +15 -11
- package/dist/{html-f95ee5dc.js → html-5586dbf6.js} +701 -656
- package/dist/html-5586dbf6.js.map +1 -0
- package/dist/{html2pdf.bundle-c0e42624.js → html2pdf.bundle-9236a762.js} +2 -2
- package/dist/html2pdf.bundle-9236a762.js.map +1 -0
- package/dist/{html2pdf.bundle.min-64f254e4.js → html2pdf.bundle.min-5e51c303.js} +2 -2
- package/dist/html2pdf.bundle.min-5e51c303.js.map +1 -0
- package/dist/{index-2e8a7483.js → index-4a68b444.js} +54 -6
- package/dist/index-4a68b444.js.map +1 -0
- package/dist/{index-46b9ecb6.js → index-984a0184.js} +2 -2
- package/dist/index-984a0184.js.map +1 -0
- package/dist/{index-1719c0e6.js → index-dbc626d0.js} +30450 -28998
- package/dist/index-dbc626d0.js.map +1 -0
- package/dist/index.d.ts +7 -7
- package/dist/index.js +1 -1
- package/dist/lib/utils.d.ts +1 -2
- package/dist/main.d.ts +0 -1
- package/dist/{markdown-1d9e6c3f.js → markdown-d513479b.js} +1836 -1789
- package/dist/markdown-d513479b.js.map +1 -0
- package/dist/nodes/CommentNode.d.ts +33 -34
- package/dist/nodes/CommentedTextNode.d.ts +28 -29
- package/dist/nodes/EmbedNode.d.ts +25 -26
- package/dist/nodes/FileNode.d.ts +31 -32
- package/dist/nodes/ImageNode.d.ts +46 -47
- package/dist/nodes/MentionNode.d.ts +74 -75
- package/dist/nodes/NotePanelNode.d.ts +30 -31
- package/dist/pages/ConfigurableEditor/ConfigurableEditor.d.ts +17 -18
- package/dist/pages/ConfigurableEditor/index.d.ts +2 -2
- package/dist/pages/NotFound.d.ts +2 -2
- package/dist/pages/RichTextEditor.d.ts +6 -6
- package/dist/pages/TextareaEditor.d.ts +6 -6
- package/dist/pages/styles.d.ts +5 -5
- package/dist/plugins/AIChatPlugin.d.ts +4 -5
- package/dist/plugins/AutocompletePlugin.d.ts +22 -22
- package/dist/plugins/CodeHighlightPlugin.d.ts +2 -3
- package/dist/plugins/CombinedAutocompletGrammarPlugin.d.ts +21 -22
- package/dist/plugins/CommentBubblePlugin.d.ts +2 -3
- package/dist/plugins/CommentPlugin.d.ts +6 -7
- package/dist/plugins/CustomHorizontalRulePlugin/CustomHorizontalRuleNode.d.ts +28 -29
- package/dist/plugins/CustomHorizontalRulePlugin/CustomHorizontalRulePlugin.d.ts +3 -3
- package/dist/plugins/CustomHorizontalRulePlugin/HorizontalRuleCustomizationDialog.d.ts +6 -7
- package/dist/plugins/CustomHorizontalRulePlugin/index.d.ts +3 -3
- package/dist/plugins/DragDropPastePlugin/index.d.ts +8 -8
- package/dist/plugins/EmbedPreviewPlugin/FloatingEmbedMenuPlugin.d.ts +3 -4
- package/dist/plugins/EmbedPreviewPlugin/index.d.ts +5 -6
- package/dist/plugins/FilePlugin.d.ts +7 -8
- package/dist/plugins/FloatingEnhanceButton/index.d.ts +4 -0
- package/dist/plugins/FloatingLinkEditorPlugin/index.d.ts +5 -6
- package/dist/plugins/FloatingTextFormatToolbarPlugin/index.d.ts +25 -26
- package/dist/plugins/GrammarCheckPlugin.d.ts +1 -2
- package/dist/plugins/HtmlCodeViewPlugin/index.d.ts +2 -2
- package/dist/plugins/HtmlImportPlugin.d.ts +5 -5
- package/dist/plugins/HtmlSyncPlugin.d.ts +3 -3
- package/dist/plugins/ImagePlugin.d.ts +6 -7
- package/dist/plugins/LinkPlugin/index.d.ts +5 -6
- package/dist/plugins/LocalStoragePlugin.d.ts +6 -7
- package/dist/plugins/MentionsPlugin/index.d.ts +6 -7
- package/dist/plugins/NotePanelPlugin.d.ts +6 -7
- package/dist/plugins/RichTextPastePlugin/index.d.ts +1 -1
- package/dist/plugins/SignatureCanvasPlugin/SignatureCanvasDialog.d.ts +5 -6
- package/dist/plugins/SignatureCanvasPlugin/SignatureCanvasPlugin.d.ts +9 -3
- package/dist/plugins/SignatureCanvasPlugin/index.d.ts +2 -2
- package/dist/plugins/SlashCommandPlugin/index.d.ts +2 -2
- package/dist/plugins/TableActionMenuPlugin/index.d.ts +5 -6
- package/dist/plugins/TableCellResizer/index.d.ts +1 -2
- package/dist/plugins/TableHoverActionsPlugin/index.d.ts +17 -11
- package/dist/plugins/TablePlugin.d.ts +2 -3
- package/dist/plugins/TextEnhancePlugin.d.ts +6 -0
- package/dist/plugins/TreeViewPlugin.d.ts +2 -3
- package/dist/plugins/VoiceTranscriptPlugin.d.ts +21 -17
- package/dist/plugins/WordCountPlugin.d.ts +2 -3
- package/dist/{postcss-c2592f3f.js → postcss-f084f74d.js} +1378 -1357
- package/dist/postcss-f084f74d.js.map +1 -0
- package/dist/standalone-5a8c6b7e.js +2518 -0
- package/dist/standalone-5a8c6b7e.js.map +1 -0
- package/dist/styles/PlaygroundEditorTheme.d.ts +2 -3
- package/dist/types.d.ts +147 -146
- package/dist/typescript-b1005db4.js +13705 -0
- package/dist/typescript-b1005db4.js.map +1 -0
- package/dist/ui/ColorPicker.d.ts +13 -13
- package/dist/ui/Icons.d.ts +43 -43
- package/dist/ui/TextInput.d.ts +10 -11
- package/dist/utils/dateFormats.d.ts +33 -33
- package/dist/utils/debounce.d.ts +5 -6
- package/dist/utils/export.d.ts +1 -2
- package/dist/utils/getDOMRangeRect.d.ts +13 -13
- package/dist/utils/getSelectedNode.d.ts +2 -3
- package/dist/utils/helper.d.ts +3 -3
- package/dist/utils/index.d.ts +3 -4
- package/dist/utils/invarient.d.ts +1 -1
- package/dist/utils/setFloatingElemPosition.d.ts +8 -8
- package/dist/utils/setFloatingElemPositionForLinkEditor.d.ts +1 -1
- package/dist/utils/url.d.ts +9 -9
- package/package.json +126 -126
- package/dist/babel-d155920e.js.map +0 -1
- package/dist/estree-b1fff53b.js.map +0 -1
- package/dist/html-f95ee5dc.js.map +0 -1
- package/dist/html2pdf.bundle-c0e42624.js.map +0 -1
- package/dist/html2pdf.bundle.min-64f254e4.js.map +0 -1
- package/dist/index-1719c0e6.js.map +0 -1
- package/dist/index-2e8a7483.js.map +0 -1
- package/dist/index-46b9ecb6.js.map +0 -1
- package/dist/markdown-1d9e6c3f.js.map +0 -1
- package/dist/postcss-c2592f3f.js.map +0 -1
- package/dist/standalone-bcc7f37a.js +0 -2649
- package/dist/standalone-bcc7f37a.js.map +0 -1
- package/dist/typescript-48c10f50.js +0 -13601
- package/dist/typescript-48c10f50.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,217 +1,217 @@
|
|
|
1
|
-
# CT Rich Text Editor
|
|
2
|
-
|
|
3
|
-
A configurable rich text editor component with API key authentication.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install ct-rich-text-editor
|
|
9
|
-
# or
|
|
10
|
-
yarn add ct-rich-text-editor
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Features
|
|
14
|
-
|
|
15
|
-
- Rich text editor with extensive formatting options
|
|
16
|
-
- API key authentication
|
|
17
|
-
- Configurable UI components (toolbar, floating menu)
|
|
18
|
-
- HTML view option
|
|
19
|
-
- Support for tables, images, links, and more
|
|
20
|
-
- AI chat integration (for premium plans)
|
|
21
|
-
- Environment-based API configuration
|
|
22
|
-
|
|
23
|
-
## Usage
|
|
24
|
-
|
|
25
|
-
### Important: Importing Styles
|
|
26
|
-
To ensure proper styling of the editor components including tables, you must import the package's CSS:
|
|
27
|
-
|
|
28
|
-
```jsx
|
|
29
|
-
// Import the styles in your application
|
|
30
|
-
import 'ct-rich-text-editor/style.css';
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### Basic Setup
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
import React from 'react';
|
|
37
|
-
import {
|
|
38
|
-
ConfigurableEditorWithAuth,
|
|
39
|
-
EditorProvider,
|
|
40
|
-
defaultEditorConfig
|
|
41
|
-
} from 'ct-rich-text-editor';
|
|
42
|
-
// Import required styles
|
|
43
|
-
import 'ct-rich-text-editor/style.css';
|
|
44
|
-
|
|
45
|
-
function App() {
|
|
46
|
-
const apiKey = 'your-api-key'; // Replace with your actual API key
|
|
47
|
-
|
|
48
|
-
const handleContentChange = (html) => {
|
|
49
|
-
console.log('Editor HTML content:', html);
|
|
50
|
-
// Handle the HTML content (save to state, send to server, etc.)
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<EditorProvider
|
|
55
|
-
defaultFontFamilies={defaultEditorConfig.defaultFontFamilies}
|
|
56
|
-
mentionUserList={defaultEditorConfig.mentionUserList}
|
|
57
|
-
>
|
|
58
|
-
<ConfigurableEditorWithAuth
|
|
59
|
-
apiKey={apiKey}
|
|
60
|
-
onChange={handleContentChange}
|
|
61
|
-
initialContent="<p>Welcome to the editor!</p>"
|
|
62
|
-
onAuthSuccess={() => console.log('Authentication successful')}
|
|
63
|
-
onAuthError={(error) => console.error('Authentication error:', error)}
|
|
64
|
-
/>
|
|
65
|
-
</EditorProvider>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
## API Reference
|
|
71
|
-
|
|
72
|
-
### EditorProvider
|
|
73
|
-
|
|
74
|
-
Provides authentication and configuration context for the editor.
|
|
75
|
-
|
|
76
|
-
#### Props
|
|
77
|
-
|
|
78
|
-
- `children`: React nodes to render
|
|
79
|
-
- `defaultFontFamilies`: Array of font names (optional)
|
|
80
|
-
- `mentionUserList`: Array of usernames for mention functionality (optional)
|
|
81
|
-
|
|
82
|
-
### ConfigurableEditorWithAuth
|
|
83
|
-
|
|
84
|
-
The main editor component with authentication.
|
|
85
|
-
|
|
86
|
-
#### Props
|
|
87
|
-
|
|
88
|
-
- `apiKey`: Your API key for authentication (required)
|
|
89
|
-
- `initialContent`: Initial HTML content for the editor (optional) - string
|
|
90
|
-
- `onChange`: Callback function when editor content changes (optional) - receives HTML string
|
|
91
|
-
- `defaultFontFamilies`: Array of font names for the font selector (optional)
|
|
92
|
-
- `mentionUserList`: Array of usernames for mention functionality (optional)
|
|
93
|
-
- `onAuthSuccess`: Callback function when authentication is successful (optional)
|
|
94
|
-
- `onAuthError`: Callback function when authentication fails (optional)
|
|
95
|
-
- `customVerifyKey`: Custom function to verify API key (optional)
|
|
96
|
-
|
|
97
|
-
## Examples
|
|
98
|
-
|
|
99
|
-
### Basic Editor with Authentication
|
|
100
|
-
|
|
101
|
-
```jsx
|
|
102
|
-
import React from 'react';
|
|
103
|
-
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
|
|
104
|
-
import 'ct-rich-text-editor/style.css';
|
|
105
|
-
|
|
106
|
-
function App() {
|
|
107
|
-
return (
|
|
108
|
-
<EditorProvider>
|
|
109
|
-
<ConfigurableEditorWithAuth
|
|
110
|
-
apiKey="your-api-key"
|
|
111
|
-
onAuthSuccess={() => console.log('Authenticated')}
|
|
112
|
-
onAuthError={(error) => console.error(error)}
|
|
113
|
-
/>
|
|
114
|
-
</EditorProvider>
|
|
115
|
-
);
|
|
116
|
-
}
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### Editor with Content Handling
|
|
120
|
-
|
|
121
|
-
```jsx
|
|
122
|
-
import React, { useState } from 'react';
|
|
123
|
-
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
|
|
124
|
-
import 'ct-rich-text-editor/style.css';
|
|
125
|
-
|
|
126
|
-
function App() {
|
|
127
|
-
const [editorContent, setEditorContent] = useState('');
|
|
128
|
-
|
|
129
|
-
const handleContentChange = (html) => {
|
|
130
|
-
setEditorContent(html);
|
|
131
|
-
console.log('Current content:', html);
|
|
132
|
-
// You can also save to localStorage, send to API, etc.
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
const handleSave = () => {
|
|
136
|
-
// Save the HTML content to your backend or localStorage
|
|
137
|
-
localStorage.setItem('saved-content', editorContent);
|
|
138
|
-
console.log('Content saved!');
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
const loadSavedContent = () => {
|
|
142
|
-
const saved = '<p>Start writing your content here...</p>';
|
|
143
|
-
return saved
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
return (
|
|
147
|
-
<div>
|
|
148
|
-
<EditorProvider>
|
|
149
|
-
<ConfigurableEditorWithAuth
|
|
150
|
-
apiKey="your-api-key"
|
|
151
|
-
initialContent={loadSavedContent()}
|
|
152
|
-
onChange={handleContentChange}
|
|
153
|
-
defaultFontFamilies={['Arial', 'Helvetica', 'Times New Roman']}
|
|
154
|
-
mentionUserList={['@john', '@jane', '@bob']}
|
|
155
|
-
onAuthSuccess={() => console.log('Ready to edit!')}
|
|
156
|
-
onAuthError={(error) => console.error('Auth failed:', error)}
|
|
157
|
-
/>
|
|
158
|
-
</EditorProvider>
|
|
159
|
-
|
|
160
|
-
<button onClick={handleSave} style={{ marginTop: '10px', padding: '10px' }}>
|
|
161
|
-
Save Content
|
|
162
|
-
</button>
|
|
163
|
-
|
|
164
|
-
<div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
|
|
165
|
-
<h3>Current HTML Content:</h3>
|
|
166
|
-
<pre>{editorContent}</pre>
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
);
|
|
170
|
-
}
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
### Custom API Key Verification
|
|
174
|
-
|
|
175
|
-
```jsx
|
|
176
|
-
import React from 'react';
|
|
177
|
-
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
|
|
178
|
-
import 'ct-rich-text-editor/style.css';
|
|
179
|
-
|
|
180
|
-
function App() {
|
|
181
|
-
const customVerifyKey = async (apiKey) => {
|
|
182
|
-
try {
|
|
183
|
-
const response = await fetch('/api/verify-key', {
|
|
184
|
-
method: 'POST',
|
|
185
|
-
headers: { 'Content-Type': 'application/json' },
|
|
186
|
-
body: JSON.stringify({ apiKey })
|
|
187
|
-
});
|
|
188
|
-
|
|
189
|
-
const data = await response.json();
|
|
190
|
-
|
|
191
|
-
return {
|
|
192
|
-
success: data.valid,
|
|
193
|
-
message: data.message || 'API key verified'
|
|
194
|
-
};
|
|
195
|
-
} catch (error) {
|
|
196
|
-
return {
|
|
197
|
-
success: false,
|
|
198
|
-
message: 'Failed to verify API key'
|
|
199
|
-
};
|
|
200
|
-
}
|
|
201
|
-
};
|
|
202
|
-
|
|
203
|
-
return (
|
|
204
|
-
<EditorProvider>
|
|
205
|
-
<ConfigurableEditorWithAuth
|
|
206
|
-
apiKey="your-api-key"
|
|
207
|
-
customVerifyKey={customVerifyKey}
|
|
208
|
-
onChange={(html) => console.log('Content changed:', html)}
|
|
209
|
-
/>
|
|
210
|
-
</EditorProvider>
|
|
211
|
-
);
|
|
212
|
-
}
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
## License
|
|
216
|
-
|
|
217
|
-
This project is licensed under the MIT License - see the LICENSE file for details.
|
|
1
|
+
# CT Rich Text Editor
|
|
2
|
+
|
|
3
|
+
A configurable rich text editor component with API key authentication.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ct-rich-text-editor
|
|
9
|
+
# or
|
|
10
|
+
yarn add ct-rich-text-editor
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- Rich text editor with extensive formatting options
|
|
16
|
+
- API key authentication
|
|
17
|
+
- Configurable UI components (toolbar, floating menu)
|
|
18
|
+
- HTML view option
|
|
19
|
+
- Support for tables, images, links, and more
|
|
20
|
+
- AI chat integration (for premium plans)
|
|
21
|
+
- Environment-based API configuration
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
### Important: Importing Styles
|
|
26
|
+
To ensure proper styling of the editor components including tables, you must import the package's CSS:
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
// Import the styles in your application
|
|
30
|
+
import 'ct-rich-text-editor/style.css';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Basic Setup
|
|
34
|
+
|
|
35
|
+
```jsx
|
|
36
|
+
import React from 'react';
|
|
37
|
+
import {
|
|
38
|
+
ConfigurableEditorWithAuth,
|
|
39
|
+
EditorProvider,
|
|
40
|
+
defaultEditorConfig
|
|
41
|
+
} from 'ct-rich-text-editor';
|
|
42
|
+
// Import required styles
|
|
43
|
+
import 'ct-rich-text-editor/style.css';
|
|
44
|
+
|
|
45
|
+
function App() {
|
|
46
|
+
const apiKey = 'your-api-key'; // Replace with your actual API key
|
|
47
|
+
|
|
48
|
+
const handleContentChange = (html) => {
|
|
49
|
+
console.log('Editor HTML content:', html);
|
|
50
|
+
// Handle the HTML content (save to state, send to server, etc.)
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<EditorProvider
|
|
55
|
+
defaultFontFamilies={defaultEditorConfig.defaultFontFamilies}
|
|
56
|
+
mentionUserList={defaultEditorConfig.mentionUserList}
|
|
57
|
+
>
|
|
58
|
+
<ConfigurableEditorWithAuth
|
|
59
|
+
apiKey={apiKey}
|
|
60
|
+
onChange={handleContentChange}
|
|
61
|
+
initialContent="<p>Welcome to the editor!</p>"
|
|
62
|
+
onAuthSuccess={() => console.log('Authentication successful')}
|
|
63
|
+
onAuthError={(error) => console.error('Authentication error:', error)}
|
|
64
|
+
/>
|
|
65
|
+
</EditorProvider>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## API Reference
|
|
71
|
+
|
|
72
|
+
### EditorProvider
|
|
73
|
+
|
|
74
|
+
Provides authentication and configuration context for the editor.
|
|
75
|
+
|
|
76
|
+
#### Props
|
|
77
|
+
|
|
78
|
+
- `children`: React nodes to render
|
|
79
|
+
- `defaultFontFamilies`: Array of font names (optional)
|
|
80
|
+
- `mentionUserList`: Array of usernames for mention functionality (optional)
|
|
81
|
+
|
|
82
|
+
### ConfigurableEditorWithAuth
|
|
83
|
+
|
|
84
|
+
The main editor component with authentication.
|
|
85
|
+
|
|
86
|
+
#### Props
|
|
87
|
+
|
|
88
|
+
- `apiKey`: Your API key for authentication (required)
|
|
89
|
+
- `initialContent`: Initial HTML content for the editor (optional) - string
|
|
90
|
+
- `onChange`: Callback function when editor content changes (optional) - receives HTML string
|
|
91
|
+
- `defaultFontFamilies`: Array of font names for the font selector (optional)
|
|
92
|
+
- `mentionUserList`: Array of usernames for mention functionality (optional)
|
|
93
|
+
- `onAuthSuccess`: Callback function when authentication is successful (optional)
|
|
94
|
+
- `onAuthError`: Callback function when authentication fails (optional)
|
|
95
|
+
- `customVerifyKey`: Custom function to verify API key (optional)
|
|
96
|
+
|
|
97
|
+
## Examples
|
|
98
|
+
|
|
99
|
+
### Basic Editor with Authentication
|
|
100
|
+
|
|
101
|
+
```jsx
|
|
102
|
+
import React from 'react';
|
|
103
|
+
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
|
|
104
|
+
import 'ct-rich-text-editor/style.css';
|
|
105
|
+
|
|
106
|
+
function App() {
|
|
107
|
+
return (
|
|
108
|
+
<EditorProvider>
|
|
109
|
+
<ConfigurableEditorWithAuth
|
|
110
|
+
apiKey="your-api-key"
|
|
111
|
+
onAuthSuccess={() => console.log('Authenticated')}
|
|
112
|
+
onAuthError={(error) => console.error(error)}
|
|
113
|
+
/>
|
|
114
|
+
</EditorProvider>
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Editor with Content Handling
|
|
120
|
+
|
|
121
|
+
```jsx
|
|
122
|
+
import React, { useState } from 'react';
|
|
123
|
+
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
|
|
124
|
+
import 'ct-rich-text-editor/style.css';
|
|
125
|
+
|
|
126
|
+
function App() {
|
|
127
|
+
const [editorContent, setEditorContent] = useState('');
|
|
128
|
+
|
|
129
|
+
const handleContentChange = (html) => {
|
|
130
|
+
setEditorContent(html);
|
|
131
|
+
console.log('Current content:', html);
|
|
132
|
+
// You can also save to localStorage, send to API, etc.
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
const handleSave = () => {
|
|
136
|
+
// Save the HTML content to your backend or localStorage
|
|
137
|
+
localStorage.setItem('saved-content', editorContent);
|
|
138
|
+
console.log('Content saved!');
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
const loadSavedContent = () => {
|
|
142
|
+
const saved = '<p>Start writing your content here...</p>';
|
|
143
|
+
return saved
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
return (
|
|
147
|
+
<div>
|
|
148
|
+
<EditorProvider>
|
|
149
|
+
<ConfigurableEditorWithAuth
|
|
150
|
+
apiKey="your-api-key"
|
|
151
|
+
initialContent={loadSavedContent()}
|
|
152
|
+
onChange={handleContentChange}
|
|
153
|
+
defaultFontFamilies={['Arial', 'Helvetica', 'Times New Roman']}
|
|
154
|
+
mentionUserList={['@john', '@jane', '@bob']}
|
|
155
|
+
onAuthSuccess={() => console.log('Ready to edit!')}
|
|
156
|
+
onAuthError={(error) => console.error('Auth failed:', error)}
|
|
157
|
+
/>
|
|
158
|
+
</EditorProvider>
|
|
159
|
+
|
|
160
|
+
<button onClick={handleSave} style={{ marginTop: '10px', padding: '10px' }}>
|
|
161
|
+
Save Content
|
|
162
|
+
</button>
|
|
163
|
+
|
|
164
|
+
<div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
|
|
165
|
+
<h3>Current HTML Content:</h3>
|
|
166
|
+
<pre>{editorContent}</pre>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### Custom API Key Verification
|
|
174
|
+
|
|
175
|
+
```jsx
|
|
176
|
+
import React from 'react';
|
|
177
|
+
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
|
|
178
|
+
import 'ct-rich-text-editor/style.css';
|
|
179
|
+
|
|
180
|
+
function App() {
|
|
181
|
+
const customVerifyKey = async (apiKey) => {
|
|
182
|
+
try {
|
|
183
|
+
const response = await fetch('/api/verify-key', {
|
|
184
|
+
method: 'POST',
|
|
185
|
+
headers: { 'Content-Type': 'application/json' },
|
|
186
|
+
body: JSON.stringify({ apiKey })
|
|
187
|
+
});
|
|
188
|
+
|
|
189
|
+
const data = await response.json();
|
|
190
|
+
|
|
191
|
+
return {
|
|
192
|
+
success: data.valid,
|
|
193
|
+
message: data.message || 'API key verified'
|
|
194
|
+
};
|
|
195
|
+
} catch (error) {
|
|
196
|
+
return {
|
|
197
|
+
success: false,
|
|
198
|
+
message: 'Failed to verify API key'
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
return (
|
|
204
|
+
<EditorProvider>
|
|
205
|
+
<ConfigurableEditorWithAuth
|
|
206
|
+
apiKey="your-api-key"
|
|
207
|
+
customVerifyKey={customVerifyKey}
|
|
208
|
+
onChange={(html) => console.log('Content changed:', html)}
|
|
209
|
+
/>
|
|
210
|
+
</EditorProvider>
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## License
|
|
216
|
+
|
|
217
|
+
This project is licensed under the MIT License - see the LICENSE file for details.
|
package/dist/App.d.ts
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { EditorConfigTypes } from '../types';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
apiKey: string
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
export
|
|
20
|
-
export {};
|
|
2
|
+
interface EditorContextType {
|
|
3
|
+
isAuthenticated: boolean;
|
|
4
|
+
isLoading: boolean;
|
|
5
|
+
error: string | null;
|
|
6
|
+
editorConfig: EditorConfigTypes | null;
|
|
7
|
+
projectName: string | null;
|
|
8
|
+
isPaidPlan: boolean;
|
|
9
|
+
apiKey: string | null;
|
|
10
|
+
verifyKey: (apiKey: string) => Promise<void>;
|
|
11
|
+
}
|
|
12
|
+
export declare const useEditor: () => EditorContextType;
|
|
13
|
+
interface EditorProviderProps {
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
defaultFontFamilies?: string[];
|
|
16
|
+
mentionUserList?: string[];
|
|
17
|
+
}
|
|
18
|
+
export declare const EditorProvider: React.FC<EditorProviderProps>;
|
|
19
|
+
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export default LexicalProvider;
|
|
2
|
+
interface LexicalProviderProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
declare const LexicalProvider: ({ children }: LexicalProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default LexicalProvider;
|
package/dist/api/ai/index.d.ts
CHANGED
|
@@ -1,20 +1,27 @@
|
|
|
1
|
-
type AiStreamType = {
|
|
2
|
-
content: string;
|
|
3
|
-
onMessage: (message: string) => void;
|
|
4
|
-
};
|
|
5
|
-
export declare const AiStream: ({ content, onMessage }: AiStreamType) => Promise<void>;
|
|
6
|
-
export declare const AiJsonResponse: ({ content }: {
|
|
7
|
-
content: string;
|
|
8
|
-
}) => Promise<any>;
|
|
9
|
-
export declare const AiImageResponse: ({ content }: {
|
|
10
|
-
content: string;
|
|
11
|
-
}) => Promise<any>;
|
|
12
|
-
export declare const AiEditorAction: ({ content, provider, apiKey, }: {
|
|
13
|
-
content: string;
|
|
14
|
-
provider?: string | undefined;
|
|
15
|
-
apiKey?: string | undefined;
|
|
16
|
-
}) => Promise<any>;
|
|
17
|
-
export declare const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
type AiStreamType = {
|
|
2
|
+
content: string;
|
|
3
|
+
onMessage: (message: string) => void;
|
|
4
|
+
};
|
|
5
|
+
export declare const AiStream: ({ content, onMessage }: AiStreamType) => Promise<void>;
|
|
6
|
+
export declare const AiJsonResponse: ({ content }: {
|
|
7
|
+
content: string;
|
|
8
|
+
}) => Promise<any>;
|
|
9
|
+
export declare const AiImageResponse: ({ content }: {
|
|
10
|
+
content: string;
|
|
11
|
+
}) => Promise<any>;
|
|
12
|
+
export declare const AiEditorAction: ({ content, provider, apiKey, }: {
|
|
13
|
+
content: string;
|
|
14
|
+
provider?: string | undefined;
|
|
15
|
+
apiKey?: string | undefined;
|
|
16
|
+
}) => Promise<any>;
|
|
17
|
+
export declare const AiTextEnhance: ({ content, apiKey }: {
|
|
18
|
+
content: string;
|
|
19
|
+
apiKey?: string | undefined;
|
|
20
|
+
}) => Promise<any>;
|
|
21
|
+
export declare const GetCreditsInfo: ({ apiKey }: {
|
|
22
|
+
apiKey?: string | undefined;
|
|
23
|
+
}) => Promise<any>;
|
|
24
|
+
export declare const GetUserInfo: ({ apiKey }: {
|
|
25
|
+
apiKey?: string | undefined;
|
|
26
|
+
}) => Promise<any>;
|
|
27
|
+
export {};
|