@mbs-dev/react-editor 1.0.0

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 (6) hide show
  1. package/README.md +1 -0
  2. package/dist/index.js +105 -0
  3. package/package.json +32 -0
  4. package/src/index.tsx +132 -0
  5. package/tsconfig.json +18 -0
  6. package/types/index.d.ts +1 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # react-editor
package/dist/index.js ADDED
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = require("react");
7
+ const jodit_react_1 = __importDefault(require("jodit-react"));
8
+ const react_2 = __importDefault(require("react"));
9
+ const ReactEditor = ({ onChange, onBlur, value, useUploadImage, apiUrl, imageUrl }) => {
10
+ const editor = (0, react_1.useRef)(null);
11
+ const uploaderConfig = {
12
+ imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
13
+ filesVariableName: function (t) {
14
+ return 'files[' + t + ']';
15
+ },
16
+ url: apiUrl,
17
+ withCredentials: false,
18
+ format: 'json',
19
+ method: 'POST',
20
+ prepareData: function (formdata) {
21
+ return formdata;
22
+ },
23
+ isSuccess: function (e) {
24
+ const fn = this.jodit;
25
+ if (e.data.files && e.data.files.length) {
26
+ const tagName = 'img';
27
+ e.data.files.forEach((filename, index) => {
28
+ const elm = fn.createInside.element(tagName);
29
+ elm.setAttribute('src', `${imageUrl}/${filename}`);
30
+ fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
31
+ });
32
+ }
33
+ return e.success;
34
+ },
35
+ getMessage: function (e) {
36
+ return e.data.messages && Array.isArray(e.data.messages)
37
+ ? e.data.messages.join('')
38
+ : '';
39
+ },
40
+ process: function (resp) {
41
+ let files = [];
42
+ files.unshift(resp.data);
43
+ return {
44
+ files: resp.data,
45
+ error: resp.msg,
46
+ msg: resp.msg,
47
+ };
48
+ },
49
+ error: function (e) {
50
+ this.j.e.fire('errorMessage', e.message, 'error', 4000);
51
+ },
52
+ defaultHandlerError: function (e) {
53
+ this.j.e.fire('errorMessage', e.message);
54
+ },
55
+ };
56
+ const config = (0, react_1.useMemo)(() => ({
57
+ readonly: false,
58
+ placeholder: 'Start typing...',
59
+ toolbarAdaptive: false,
60
+ useSearch: false,
61
+ language: "en",
62
+ allowResizeX: false,
63
+ allowResizeY: false,
64
+ height: 400,
65
+ enableDragAndDropFileToEditor: true,
66
+ showCharsCounter: true,
67
+ showWordsCounter: true,
68
+ showXPathInStatusbar: false,
69
+ buttons: [
70
+ 'source',
71
+ '|',
72
+ 'bold',
73
+ 'italic',
74
+ 'underline',
75
+ '|',
76
+ 'ul',
77
+ 'ol',
78
+ '|',
79
+ `${useUploadImage ? 'image' : ''}`,
80
+ 'file',
81
+ '|',
82
+ 'video',
83
+ '|',
84
+ 'link',
85
+ '|',
86
+ 'undo',
87
+ 'redo',
88
+ '|',
89
+ 'hr',
90
+ '|',
91
+ 'eraser',
92
+ '|',
93
+ 'font',
94
+ 'fontsize',
95
+ 'paragraph',
96
+ 'brush',
97
+ '|',
98
+ 'table',
99
+ 'fullsize',
100
+ ],
101
+ uploader: useUploadImage ? uploaderConfig : undefined,
102
+ }), []);
103
+ return (react_2.default.createElement(jodit_react_1.default, { ref: editor, value: value, config: config, onBlur: onBlur, onChange: onChange }));
104
+ };
105
+ exports.default = ReactEditor;
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@mbs-dev/react-editor",
3
+ "version": "1.0.0",
4
+ "description": "react editor",
5
+ "main": "dist/index.js",
6
+ "types": "types/index.d.ts",
7
+ "scripts": {
8
+ "build": "tsc",
9
+ "prepare": "npm run build"
10
+ },
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "git+https://github.com/MOHAMMED-BE/react-editor.git"
14
+ },
15
+ "keywords": [
16
+ "react"
17
+ ],
18
+ "author": "MOHAMMED BEN-SEGHIR",
19
+ "license": "MIT",
20
+ "bugs": {
21
+ "url": "https://github.com/MOHAMMED-BE/react-editor/issues"
22
+ },
23
+ "homepage": "https://github.com/MOHAMMED-BE/react-editor#readme",
24
+ "devDependencies": {
25
+ "@types/react": "^18.2.60",
26
+ "typescript": "^5.3.3"
27
+ },
28
+ "dependencies": {
29
+ "jodit-react": "^4.0.15",
30
+ "react": "^18.2.0"
31
+ }
32
+ }
package/src/index.tsx ADDED
@@ -0,0 +1,132 @@
1
+ import { FC, useMemo, useRef } from 'react';
2
+ import JoditEditor from "jodit-react";
3
+ import React from 'react';
4
+
5
+ interface EditorProps {
6
+ onChange?: any;
7
+ onBlur?: any;
8
+ value?: any;
9
+ useUploadImage?: boolean;
10
+ apiUrl?: string;
11
+ imageUrl?: string;
12
+ }
13
+
14
+ const ReactEditor: FC<EditorProps> = ({ onChange, onBlur, value, useUploadImage, apiUrl, imageUrl }) => {
15
+ const editor = useRef(null);
16
+
17
+ const uploaderConfig = {
18
+ imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
19
+ filesVariableName: function (t: number): string {
20
+ return 'files[' + t + ']';
21
+ },
22
+ url: apiUrl,
23
+ withCredentials: false,
24
+ format: 'json',
25
+ method: 'POST',
26
+ prepareData: function (formdata: FormData): FormData {
27
+ return formdata;
28
+ },
29
+ isSuccess: function (this: any, e: any): boolean {
30
+ const fn = this.jodit
31
+
32
+ if (e.data.files && e.data.files.length) {
33
+ const tagName = 'img';
34
+ e.data.files.forEach((filename: string, index: number) => {
35
+ const elm = fn.createInside.element(tagName);
36
+ elm.setAttribute('src', `${imageUrl}/${filename}`);
37
+ fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
38
+ });
39
+ }
40
+
41
+ return e.success;
42
+ },
43
+ getMessage: function (e: any): string {
44
+ return e.data.messages && Array.isArray(e.data.messages)
45
+ ? e.data.messages.join('')
46
+ : '';
47
+ },
48
+ process: function (resp: any): { files: any[]; error: string; msg: string } {
49
+ let files: any[] = [];
50
+ files.unshift(resp.data);
51
+ return {
52
+ files: resp.data,
53
+ error: resp.msg,
54
+ msg: resp.msg,
55
+ };
56
+ },
57
+
58
+ error: function (this: any, e: Error): void {
59
+ this.j.e.fire('errorMessage', e.message, 'error', 4000);
60
+ },
61
+
62
+ defaultHandlerError: function (this: any, e: any): void {
63
+ this.j.e.fire('errorMessage', e.message);
64
+ },
65
+ };
66
+
67
+
68
+ const config = useMemo(
69
+ () => ({
70
+ readonly: false,
71
+ placeholder: 'Start typing...',
72
+ toolbarAdaptive: false,
73
+ useSearch: false,
74
+ language: "en",
75
+ allowResizeX: false,
76
+ allowResizeY: false,
77
+ height: 400,
78
+ enableDragAndDropFileToEditor: true,
79
+ showCharsCounter: true,
80
+ showWordsCounter: true,
81
+ showXPathInStatusbar: false,
82
+
83
+ buttons: [
84
+ 'source',
85
+ '|',
86
+ 'bold',
87
+ 'italic',
88
+ 'underline',
89
+ '|',
90
+ 'ul',
91
+ 'ol',
92
+ '|',
93
+ `${useUploadImage ? 'image' : ''}`,
94
+ 'file',
95
+ '|',
96
+ 'video',
97
+ '|',
98
+ 'link',
99
+ '|',
100
+ 'undo',
101
+ 'redo',
102
+ '|',
103
+ 'hr',
104
+ '|',
105
+ 'eraser',
106
+ '|',
107
+ 'font',
108
+ 'fontsize',
109
+ 'paragraph',
110
+ 'brush',
111
+ '|',
112
+ 'table',
113
+ 'fullsize',
114
+ ],
115
+ uploader: useUploadImage ? uploaderConfig : undefined,
116
+ }),
117
+ []
118
+ );
119
+
120
+
121
+ return (
122
+ <JoditEditor
123
+ ref={editor}
124
+ value={value}
125
+ config={config}
126
+ onBlur={onBlur}
127
+ onChange={onChange}
128
+ />
129
+ );
130
+ };
131
+
132
+ export default ReactEditor
package/tsconfig.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "compilerOptions": {
3
+ "jsx": "react",
4
+ "target": "ES2019",
5
+ "module": "CommonJS",
6
+ "outDir": "./dist",
7
+ "rootDir": "./src",
8
+ "strict": true,
9
+ "esModuleInterop": true
10
+ },
11
+ "include": [
12
+ "src",
13
+ "types/**/*.d.ts"
14
+ ],
15
+ "exclude": [
16
+ "node_modules"
17
+ ]
18
+ }
package/types/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ declare module '@mbs-dev/react-editor';