@mbs-dev/react-editor 1.0.4 → 1.0.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.
Files changed (4) hide show
  1. package/dist/Editor.js +75 -50
  2. package/package.json +1 -1
  3. package/src/Editor.tsx +96 -58
  4. package/types/Editor.d.ts +1 -33
package/dist/Editor.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
15
  };
@@ -23,10 +34,11 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
23
34
  return formdata;
24
35
  },
25
36
  isSuccess: function (e) {
37
+ var _a;
26
38
  var fn = this.jodit;
27
- if (e.data.files && e.data.files.length) {
39
+ if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.files) && e.data.files.length) {
28
40
  var tagName_1 = 'img';
29
- e.data.files.forEach(function (filename, index) {
41
+ e.data.files.forEach(function (filename) {
30
42
  var elm = fn.createInside.element(tagName_1);
31
43
  elm.setAttribute('src', "".concat(imageUrl, "/").concat(filename));
32
44
  fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
@@ -35,7 +47,8 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
35
47
  return e.success;
36
48
  },
37
49
  getMessage: function (e) {
38
- return e.data.messages && Array.isArray(e.data.messages)
50
+ var _a;
51
+ return ((_a = e.data) === null || _a === void 0 ? void 0 : _a.messages) && Array.isArray(e.data.messages)
39
52
  ? e.data.messages.join('')
40
53
  : '';
41
54
  },
@@ -56,52 +69,64 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
56
69
  },
57
70
  }); };
58
71
  exports.uploaderConfig = uploaderConfig;
59
- var config = function (includeUploader, apiUrl, imageUrl) { return ({
60
- readonly: false,
61
- placeholder: 'Start typing...',
62
- toolbarAdaptive: false,
63
- useSearch: false,
64
- language: "en",
65
- allowResizeX: false,
66
- allowResizeY: false,
67
- height: 400,
68
- enableDragAndDropFileToEditor: true,
69
- showCharsCounter: true,
70
- showWordsCounter: true,
71
- showXPathInStatusbar: false,
72
- buttons: [
73
- 'source',
74
- '|',
75
- 'bold',
76
- 'italic',
77
- 'underline',
78
- '|',
79
- 'ul',
80
- 'ol',
81
- '|',
82
- 'image',
83
- 'file',
84
- '|',
85
- 'video',
86
- '|',
87
- 'link',
88
- '|',
89
- 'undo',
90
- 'redo',
91
- '|',
92
- 'hr',
93
- '|',
94
- 'eraser',
95
- '|',
96
- 'font',
97
- 'fontsize',
98
- 'paragraph',
99
- 'brush',
100
- '|',
101
- 'table',
102
- 'fullsize',
103
- ],
104
- uploader: includeUploader ? (0, exports.uploaderConfig)(apiUrl, imageUrl) : undefined,
105
- }); };
72
+ var config = function (includeUploader, apiUrl, imageUrl, onDeleteImage) {
73
+ var baseConfig = {
74
+ readonly: false,
75
+ placeholder: 'Start typing...',
76
+ toolbarAdaptive: false,
77
+ useSearch: false,
78
+ language: 'en',
79
+ allowResizeX: false,
80
+ allowResizeY: false,
81
+ height: 400,
82
+ enableDragAndDropFileToEditor: true,
83
+ showCharsCounter: true,
84
+ showWordsCounter: true,
85
+ showXPathInStatusbar: false,
86
+ buttons: [
87
+ 'source',
88
+ '|',
89
+ 'bold',
90
+ 'italic',
91
+ 'underline',
92
+ '|',
93
+ 'ul',
94
+ 'ol',
95
+ '|',
96
+ 'image',
97
+ '|',
98
+ 'video',
99
+ '|',
100
+ 'link',
101
+ '|',
102
+ 'undo',
103
+ 'redo',
104
+ '|',
105
+ 'hr',
106
+ '|',
107
+ 'eraser',
108
+ '|',
109
+ 'font',
110
+ 'fontsize',
111
+ 'paragraph',
112
+ 'brush',
113
+ '|',
114
+ 'table',
115
+ 'fullsize',
116
+ ],
117
+ };
118
+ if (includeUploader) {
119
+ baseConfig.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
120
+ }
121
+ if (onDeleteImage) {
122
+ baseConfig.events = __assign(__assign({}, (baseConfig.events || {})), { afterRemoveImage: function (image) {
123
+ var src = image.getAttribute('src');
124
+ if (src) {
125
+ onDeleteImage(src);
126
+ }
127
+ } });
128
+ }
129
+ return baseConfig;
130
+ };
106
131
  exports.config = config;
107
132
  exports.default = ReactEditor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mbs-dev/react-editor",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "react editor",
5
5
  "main": "dist/index.js",
6
6
  "types": "types/index.d.ts",
package/src/Editor.tsx CHANGED
@@ -1,13 +1,10 @@
1
1
  import React from 'react';
2
- import JoditEditor from "jodit-react";
2
+ import JoditEditor from 'jodit-react';
3
3
  import { EditorProps } from './Editor.types';
4
4
 
5
5
  const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config }) => {
6
- // const editor = useRef(null);
7
-
8
6
  return (
9
7
  <JoditEditor
10
- // ref={ref}
11
8
  value={value}
12
9
  config={config}
13
10
  onBlur={onBlur}
@@ -16,8 +13,14 @@ const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config })
16
13
  );
17
14
  };
18
15
 
19
-
20
- export const uploaderConfig = (apiUrl: string | undefined, imageUrl: string | undefined) => ({
16
+ /**
17
+ * Uploader configuration for Jodit
18
+ * Handles image upload + insertion in the editor
19
+ */
20
+ export const uploaderConfig = (
21
+ apiUrl: string | undefined,
22
+ imageUrl: string | undefined
23
+ ) => ({
21
24
  imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
22
25
  filesVariableName: function (t: number): string {
23
26
  return 'files[' + t + ']';
@@ -30,11 +33,11 @@ export const uploaderConfig = (apiUrl: string | undefined, imageUrl: string | un
30
33
  return formdata;
31
34
  },
32
35
  isSuccess: function (this: any, e: any): boolean {
33
- const fn = this.jodit
36
+ const fn = this.jodit;
34
37
 
35
- if (e.data.files && e.data.files.length) {
38
+ if (e.data?.files && e.data.files.length) {
36
39
  const tagName = 'img';
37
- e.data.files.forEach((filename: string, index: number) => {
40
+ e.data.files.forEach((filename: string) => {
38
41
  const elm = fn.createInside.element(tagName);
39
42
  elm.setAttribute('src', `${imageUrl}/${filename}`);
40
43
  fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
@@ -44,7 +47,7 @@ export const uploaderConfig = (apiUrl: string | undefined, imageUrl: string | un
44
47
  return e.success;
45
48
  },
46
49
  getMessage: function (e: any): string {
47
- return e.data.messages && Array.isArray(e.data.messages)
50
+ return e.data?.messages && Array.isArray(e.data.messages)
48
51
  ? e.data.messages.join('')
49
52
  : '';
50
53
  },
@@ -67,54 +70,89 @@ export const uploaderConfig = (apiUrl: string | undefined, imageUrl: string | un
67
70
  },
68
71
  });
69
72
 
73
+ /**
74
+ * Global editor config
75
+ * - includeUploader: enable/disable upload integration
76
+ * - apiUrl: upload endpoint
77
+ * - imageUrl: base URL for stored images
78
+ * - onDeleteImage: callback called when an image is removed from the editor
79
+ * receives the image src URL so you can call your API to delete it on server
80
+ */
81
+ export const config = (
82
+ includeUploader?: boolean,
83
+ apiUrl?: string,
84
+ imageUrl?: string,
85
+ onDeleteImage?: (imageUrl: string) => void
86
+ ) => {
87
+ const baseConfig: any = {
88
+ readonly: false,
89
+ placeholder: 'Start typing...',
90
+ toolbarAdaptive: false,
91
+ useSearch: false,
92
+ language: 'en',
93
+ allowResizeX: false,
94
+ allowResizeY: false,
95
+ height: 400,
96
+ enableDragAndDropFileToEditor: true,
97
+ showCharsCounter: true,
98
+ showWordsCounter: true,
99
+ showXPathInStatusbar: false,
100
+
101
+ buttons: [
102
+ 'source',
103
+ '|',
104
+ 'bold',
105
+ 'italic',
106
+ 'underline',
107
+ '|',
108
+ 'ul',
109
+ 'ol',
110
+ '|',
111
+ 'image',
112
+ '|',
113
+ 'video',
114
+ '|',
115
+ 'link',
116
+ '|',
117
+ 'undo',
118
+ 'redo',
119
+ '|',
120
+ 'hr',
121
+ '|',
122
+ 'eraser',
123
+ '|',
124
+ 'font',
125
+ 'fontsize',
126
+ 'paragraph',
127
+ 'brush',
128
+ '|',
129
+ 'table',
130
+ 'fullsize',
131
+ ],
132
+ };
70
133
 
71
- export const config = (includeUploader?: boolean | undefined, apiUrl?: string | undefined, imageUrl?: string | undefined) => ({
72
- readonly: false,
73
- placeholder: 'Start typing...',
74
- toolbarAdaptive: false,
75
- useSearch: false,
76
- language: "en",
77
- allowResizeX: false,
78
- allowResizeY: false,
79
- height: 400,
80
- enableDragAndDropFileToEditor: true,
81
- showCharsCounter: true,
82
- showWordsCounter: true,
83
- showXPathInStatusbar: false,
134
+ // Attach uploader config if requested
135
+ if (includeUploader) {
136
+ baseConfig.uploader = uploaderConfig(apiUrl, imageUrl);
137
+ }
84
138
 
85
- buttons: [
86
- 'source',
87
- '|',
88
- 'bold',
89
- 'italic',
90
- 'underline',
91
- '|',
92
- 'ul',
93
- 'ol',
94
- '|',
95
- 'image',
96
- 'file',
97
- '|',
98
- 'video',
99
- '|',
100
- 'link',
101
- '|',
102
- 'undo',
103
- 'redo',
104
- '|',
105
- 'hr',
106
- '|',
107
- 'eraser',
108
- '|',
109
- 'font',
110
- 'fontsize',
111
- 'paragraph',
112
- 'brush',
113
- '|',
114
- 'table',
115
- 'fullsize',
116
- ],
117
- uploader: includeUploader ? uploaderConfig(apiUrl, imageUrl) : undefined,
118
- })
139
+ // Handle delete image: when an image is removed in the editor,
140
+ // we call the provided callback with the image src URL.
141
+ if (onDeleteImage) {
142
+ baseConfig.events = {
143
+ ...(baseConfig.events || {}),
144
+ // Depending on Jodit version, this event name may vary; this
145
+ // handler is intended to be called when an image is removed.
146
+ afterRemoveImage: function (this: any, image: HTMLImageElement) {
147
+ const src = image.getAttribute('src');
148
+ if (src) {
149
+ onDeleteImage(src);
150
+ }
151
+ },
152
+ };
153
+ }
154
+
155
+ return baseConfig;
156
+ };
119
157
 
120
- export default ReactEditor
158
+ export default ReactEditor;
package/types/Editor.d.ts CHANGED
@@ -19,37 +19,5 @@ export declare const uploaderConfig: (apiUrl: string | undefined, imageUrl: stri
19
19
  error: (this: any, e: Error) => void;
20
20
  defaultHandlerError: (this: any, e: any) => void;
21
21
  };
22
- export declare const config: (includeUploader?: boolean | undefined, apiUrl?: string | undefined, imageUrl?: string | undefined) => {
23
- readonly: boolean;
24
- placeholder: string;
25
- toolbarAdaptive: boolean;
26
- useSearch: boolean;
27
- language: string;
28
- allowResizeX: boolean;
29
- allowResizeY: boolean;
30
- height: number;
31
- enableDragAndDropFileToEditor: boolean;
32
- showCharsCounter: boolean;
33
- showWordsCounter: boolean;
34
- showXPathInStatusbar: boolean;
35
- buttons: string[];
36
- uploader: {
37
- imagesExtensions: string[];
38
- filesVariableName: (t: number) => string;
39
- url: string | undefined;
40
- withCredentials: boolean;
41
- format: string;
42
- method: string;
43
- prepareData: (formdata: FormData) => FormData;
44
- isSuccess: (this: any, e: any) => boolean;
45
- getMessage: (e: any) => string;
46
- process: (resp: any) => {
47
- files: any[];
48
- error: string;
49
- msg: string;
50
- };
51
- error: (this: any, e: Error) => void;
52
- defaultHandlerError: (this: any, e: any) => void;
53
- } | undefined;
54
- };
22
+ export declare const config: (includeUploader?: boolean, apiUrl?: string, imageUrl?: string, onDeleteImage?: ((imageUrl: string) => void) | undefined) => any;
55
23
  export default ReactEditor;