@mbs-dev/react-editor 1.0.0 → 1.0.2

package/dist/Editor.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.config = exports.uploaderConfig = void 0;
+var react_1 = __importDefault(require("react"));
+var jodit_react_1 = __importDefault(require("jodit-react"));
+var ReactEditor = function (_a) {
+    var onChange = _a.onChange, onBlur = _a.onBlur, value = _a.value, config = _a.config;
+    return (react_1.default.createElement(jodit_react_1.default, { value: value, config: config, onBlur: onBlur, onChange: onChange }));
+};
+var uploaderConfig = function (apiUrl, imageUrl) { return ({
+    imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
+    filesVariableName: function (t) {
+        return 'files[' + t + ']';
+    },
+    url: apiUrl,
+    withCredentials: false,
+    format: 'json',
+    method: 'POST',
+    prepareData: function (formdata) {
+        return formdata;
+    },
+    isSuccess: function (e) {
+        var fn = this.jodit;
+        if (e.data.files && e.data.files.length) {
+            var tagName_1 = 'img';
+            e.data.files.forEach(function (filename, index) {
+                var elm = fn.createInside.element(tagName_1);
+                elm.setAttribute('src', "".concat(imageUrl, "/").concat(filename));
+                fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
+            });
+        }
+        return e.success;
+    },
+    getMessage: function (e) {
+        return e.data.messages && Array.isArray(e.data.messages)
+            ? e.data.messages.join('')
+            : '';
+    },
+    process: function (resp) {
+        var files = [];
+        files.unshift(resp.data);
+        return {
+            files: resp.data,
+            error: resp.msg,
+            msg: resp.msg,
+        };
+    },
+    error: function (e) {
+        this.j.e.fire('errorMessage', e.message, 'error', 4000);
+    },
+    defaultHandlerError: function (e) {
+        this.j.e.fire('errorMessage', e.message);
+    },
+}); };
+exports.uploaderConfig = uploaderConfig;
+var config = function (includeUploader, apiUrl, imageUrl) { return ({
+    readonly: false,
+    placeholder: 'Start typing...',
+    toolbarAdaptive: false,
+    useSearch: false,
+    language: "en",
+    allowResizeX: false,
+    allowResizeY: false,
+    height: 400,
+    enableDragAndDropFileToEditor: true,
+    showCharsCounter: true,
+    showWordsCounter: true,
+    showXPathInStatusbar: false,
+    buttons: [
+        'source',
+        '|',
+        'bold',
+        'italic',
+        'underline',
+        '|',
+        'ul',
+        'ol',
+        '|',
+        'image',
+        '|',
+        'video',
+        '|',
+        'link',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'hr',
+        '|',
+        'eraser',
+        '|',
+        'font',
+        'fontsize',
+        'paragraph',
+        'brush',
+        '|',
+        'table',
+        'fullsize',
+    ],
+    uploader: includeUploader ? (0, exports.uploaderConfig)(apiUrl, imageUrl) : undefined,
+}); };
+exports.config = config;
+exports.default = ReactEditor;

package/dist/Editor.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.js

@@ -3,103 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const jodit_react_1 = __importDefault(require("jodit-react"));
-const react_2 = __importDefault(require("react"));
-const ReactEditor = ({ onChange, onBlur, value, useUploadImage, apiUrl, imageUrl }) => {
-    const editor = (0, react_1.useRef)(null);
-    const uploaderConfig = {
-        imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
-        filesVariableName: function (t) {
-            return 'files[' + t + ']';
-        },
-        url: apiUrl,
-        withCredentials: false,
-        format: 'json',
-        method: 'POST',
-        prepareData: function (formdata) {
-            return formdata;
-        },
-        isSuccess: function (e) {
-            const fn = this.jodit;
-            if (e.data.files && e.data.files.length) {
-                const tagName = 'img';
-                e.data.files.forEach((filename, index) => {
-                    const elm = fn.createInside.element(tagName);
-                    elm.setAttribute('src', `${imageUrl}/${filename}`);
-                    fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
-                });
-            }
-            return e.success;
-        },
-        getMessage: function (e) {
-            return e.data.messages && Array.isArray(e.data.messages)
-                ? e.data.messages.join('')
-                : '';
-        },
-        process: function (resp) {
-            let files = [];
-            files.unshift(resp.data);
-            return {
-                files: resp.data,
-                error: resp.msg,
-                msg: resp.msg,
-            };
-        },
-        error: function (e) {
-            this.j.e.fire('errorMessage', e.message, 'error', 4000);
-        },
-        defaultHandlerError: function (e) {
-            this.j.e.fire('errorMessage', e.message);
-        },
-    };
-    const config = (0, react_1.useMemo)(() => ({
-        readonly: false,
-        placeholder: 'Start typing...',
-        toolbarAdaptive: false,
-        useSearch: false,
-        language: "en",
-        allowResizeX: false,
-        allowResizeY: false,
-        height: 400,
-        enableDragAndDropFileToEditor: true,
-        showCharsCounter: true,
-        showWordsCounter: true,
-        showXPathInStatusbar: false,
-        buttons: [
-            'source',
-            '|',
-            'bold',
-            'italic',
-            'underline',
-            '|',
-            'ul',
-            'ol',
-            '|',
-            `${useUploadImage ? 'image' : ''}`,
-            'file',
-            '|',
-            'video',
-            '|',
-            'link',
-            '|',
-            'undo',
-            'redo',
-            '|',
-            'hr',
-            '|',
-            'eraser',
-            '|',
-            'font',
-            'fontsize',
-            'paragraph',
-            'brush',
-            '|',
-            'table',
-            'fullsize',
-        ],
-        uploader: useUploadImage ? uploaderConfig : undefined,
-    }), []);
-    return (react_2.default.createElement(jodit_react_1.default, { ref: editor, value: value, config: config, onBlur: onBlur, onChange: onChange }));
-};
-exports.default = ReactEditor;
+exports.uploaderConfig = exports.config = exports.default = void 0;
+var Editor_1 = require("./Editor");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Editor_1).default; } });
+var Editor_2 = require("./Editor");
+Object.defineProperty(exports, "config", { enumerable: true, get: function () { return Editor_2.config; } });
+var Editor_3 = require("./Editor");
+Object.defineProperty(exports, "uploaderConfig", { enumerable: true, get: function () { return Editor_3.uploaderConfig; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mbs-dev/react-editor",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "react editor",
   "main": "dist/index.js",
   "types": "types/index.d.ts",
@@ -23,10 +23,12 @@
   "homepage": "https://github.com/MOHAMMED-BE/react-editor#readme",
   "devDependencies": {
     "@types/react": "^18.2.60",
+    "tsc-hooks": "^1.1.2",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "jodit-react": "^4.0.15",
-    "react": "^18.2.0"
+    "jodit-react": "^1.3.39",
+    "react": "^18.2.0",
+    "tslib": "^2.6.2"
   }
 }

package/src/Editor.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import JoditEditor from "jodit-react";
+import { EditorProps } from './Editor.types';
+
+const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config }) => {
+    // const editor = useRef(null);
+
+    return (
+        <JoditEditor
+            // ref={ref}
+            value={value}
+            config={config}
+            onBlur={onBlur}
+            onChange={onChange}
+        />
+    );
+};
+
+
+export const uploaderConfig = (apiUrl: string | undefined, imageUrl: string | undefined) => ({
+    imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
+    filesVariableName: function (t: number): string {
+        return 'files[' + t + ']';
+    },
+    url: apiUrl,
+    withCredentials: false,
+    format: 'json',
+    method: 'POST',
+    prepareData: function (formdata: FormData): FormData {
+        return formdata;
+    },
+    isSuccess: function (this: any, e: any): boolean {
+        const fn = this.jodit
+
+        if (e.data.files && e.data.files.length) {
+            const tagName = 'img';
+            e.data.files.forEach((filename: string, index: number) => {
+                const elm = fn.createInside.element(tagName);
+                elm.setAttribute('src', `${imageUrl}/${filename}`);
+                fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
+            });
+        }
+
+        return e.success;
+    },
+    getMessage: function (e: any): string {
+        return e.data.messages && Array.isArray(e.data.messages)
+            ? e.data.messages.join('')
+            : '';
+    },
+    process: function (resp: any): { files: any[]; error: string; msg: string } {
+        let files: any[] = [];
+        files.unshift(resp.data);
+        return {
+            files: resp.data,
+            error: resp.msg,
+            msg: resp.msg,
+        };
+    },
+
+    error: function (this: any, e: Error): void {
+        this.j.e.fire('errorMessage', e.message, 'error', 4000);
+    },
+
+    defaultHandlerError: function (this: any, e: any): void {
+        this.j.e.fire('errorMessage', e.message);
+    },
+});
+
+
+export const config = (includeUploader?: boolean | undefined, apiUrl?: string | undefined, imageUrl?: string | undefined) => ({
+    readonly: false,
+    placeholder: 'Start typing...',
+    toolbarAdaptive: false,
+    useSearch: false,
+    language: "en",
+    allowResizeX: false,
+    allowResizeY: false,
+    height: 400,
+    enableDragAndDropFileToEditor: true,
+    showCharsCounter: true,
+    showWordsCounter: true,
+    showXPathInStatusbar: false,
+
+    buttons: [
+        'source',
+        '|',
+        'bold',
+        'italic',
+        'underline',
+        '|',
+        'ul',
+        'ol',
+        '|',
+        'image',
+        // 'file',
+        '|',
+        'video',
+        '|',
+        'link',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'hr',
+        '|',
+        'eraser',
+        '|',
+        'font',
+        'fontsize',
+        'paragraph',
+        'brush',
+        '|',
+        'table',
+        'fullsize',
+    ],
+    uploader: includeUploader ? uploaderConfig(apiUrl, imageUrl) : undefined,
+})
+
+export default ReactEditor

package/src/Editor.types.ts

@@ -0,0 +1,10 @@
+export interface EditorProps {
+    onChange?: any;
+    onBlur?: any;
+    value?: any;
+    useUploadImage?: boolean;
+    apiUrl?: string;
+    imageUrl?: string;
+    config?: any
+    // ref?: any;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Editor'
+export { config } from './Editor'
+export { uploaderConfig } from './Editor'

package/tsconfig.json

@@ -1,16 +1,34 @@
 {
   "compilerOptions": {
     "jsx": "react",
-    "target": "ES2019",
-    "module": "CommonJS",
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "skipLibCheck": true,                    
+    "declaration": true,
+		"declarationDir": "types",
+		"outDir": "./dist",
+    // "rootDir": "./src",
+		"target": "es5",
+		"moduleResolution": "node",
+		"removeComments": true,
+		"strict": true,
+		"alwaysStrict": true,
+		"downlevelIteration": true,
+		"strictNullChecks": true,
+		"strictFunctionTypes": true,
+		"strictBindCallApply": true,
+		"strictPropertyInitialization": true,
+		"experimentalDecorators": true,
+		"allowJs": true,
+		"noImplicitAny": true,
+		"noImplicitReturns": true,
+		"noUnusedLocals": true,
+		"noImplicitOverride": true,
+		"noImplicitThis": true,
+		"resolveJsonModule": true,
+		"lib": ["es5", "esnext", "dom", "scripthost", "es2015.iterable"],
   },
   "include": [
-    "src",
-    "types/**/*.d.ts"
+    "src"
   ],
   "exclude": [
     "node_modules"

package/types/Editor.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { EditorProps } from './Editor.types';
+declare const ReactEditor: React.FC<EditorProps>;
+export declare const uploaderConfig: (apiUrl: string | undefined, imageUrl: string | undefined) => {
+    imagesExtensions: string[];
+    filesVariableName: (t: number) => string;
+    url: string | undefined;
+    withCredentials: boolean;
+    format: string;
+    method: string;
+    prepareData: (formdata: FormData) => FormData;
+    isSuccess: (this: any, e: any) => boolean;
+    getMessage: (e: any) => string;
+    process: (resp: any) => {
+        files: any[];
+        error: string;
+        msg: string;
+    };
+    error: (this: any, e: Error) => void;
+    defaultHandlerError: (this: any, e: any) => void;
+};
+export declare const config: (includeUploader?: boolean | undefined, apiUrl?: string | undefined, imageUrl?: string | undefined) => {
+    readonly: boolean;
+    placeholder: string;
+    toolbarAdaptive: boolean;
+    useSearch: boolean;
+    language: string;
+    allowResizeX: boolean;
+    allowResizeY: boolean;
+    height: number;
+    enableDragAndDropFileToEditor: boolean;
+    showCharsCounter: boolean;
+    showWordsCounter: boolean;
+    showXPathInStatusbar: boolean;
+    buttons: string[];
+    uploader: {
+        imagesExtensions: string[];
+        filesVariableName: (t: number) => string;
+        url: string | undefined;
+        withCredentials: boolean;
+        format: string;
+        method: string;
+        prepareData: (formdata: FormData) => FormData;
+        isSuccess: (this: any, e: any) => boolean;
+        getMessage: (e: any) => string;
+        process: (resp: any) => {
+            files: any[];
+            error: string;
+            msg: string;
+        };
+        error: (this: any, e: Error) => void;
+        defaultHandlerError: (this: any, e: any) => void;
+    } | undefined;
+};
+export default ReactEditor;

package/types/Editor.types.d.ts

@@ -0,0 +1,9 @@
+export interface EditorProps {
+    onChange?: any;
+    onBlur?: any;
+    value?: any;
+    useUploadImage?: boolean;
+    apiUrl?: string;
+    imageUrl?: string;
+    config?: any;
+}

package/types/index.d.ts

@@ -1 +1,3 @@
-declare module '@mbs-dev/react-editor';
+export { default } from './Editor';
+export { config } from './Editor';
+export { uploaderConfig } from './Editor';

package/src/index.tsx

@@ -1,132 +0,0 @@
-import { FC, useMemo, useRef } from 'react';
-import JoditEditor from "jodit-react";
-import React from 'react';
-
-interface EditorProps {
-    onChange?: any;
-    onBlur?: any;
-    value?: any;
-    useUploadImage?: boolean;
-    apiUrl?: string;
-    imageUrl?: string;
-}
-
-const ReactEditor: FC<EditorProps> = ({ onChange, onBlur, value, useUploadImage, apiUrl, imageUrl }) => {
-    const editor = useRef(null);
-
-    const uploaderConfig = {
-        imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
-        filesVariableName: function (t: number): string {
-            return 'files[' + t + ']';
-        },
-        url: apiUrl,
-        withCredentials: false,
-        format: 'json',
-        method: 'POST',
-        prepareData: function (formdata: FormData): FormData {
-            return formdata;
-        },
-        isSuccess: function (this: any, e: any): boolean {
-            const fn = this.jodit
-
-            if (e.data.files && e.data.files.length) {
-                const tagName = 'img';
-                e.data.files.forEach((filename: string, index: number) => {
-                    const elm = fn.createInside.element(tagName);
-                    elm.setAttribute('src', `${imageUrl}/${filename}`);
-                    fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
-                });
-            }
-
-            return e.success;
-        },
-        getMessage: function (e: any): string {
-            return e.data.messages && Array.isArray(e.data.messages)
-                ? e.data.messages.join('')
-                : '';
-        },
-        process: function (resp: any): { files: any[]; error: string; msg: string } {
-            let files: any[] = [];
-            files.unshift(resp.data);
-            return {
-                files: resp.data,
-                error: resp.msg,
-                msg: resp.msg,
-            };
-        },
-
-        error: function (this: any, e: Error): void {
-            this.j.e.fire('errorMessage', e.message, 'error', 4000);
-        },
-
-        defaultHandlerError: function (this: any, e: any): void {
-            this.j.e.fire('errorMessage', e.message);
-        },
-    };
-
-
-    const config = useMemo(
-        () => ({
-            readonly: false,
-            placeholder: 'Start typing...',
-            toolbarAdaptive: false,
-            useSearch: false,
-            language: "en",
-            allowResizeX: false,
-            allowResizeY: false,
-            height: 400,
-            enableDragAndDropFileToEditor: true,
-            showCharsCounter: true,
-            showWordsCounter: true,
-            showXPathInStatusbar: false,
-
-            buttons: [
-                'source',
-                '|',
-                'bold',
-                'italic',
-                'underline',
-                '|',
-                'ul',
-                'ol',
-                '|',
-                `${useUploadImage ? 'image' : ''}`,
-                'file',
-                '|',
-                'video',
-                '|',
-                'link',
-                '|',
-                'undo',
-                'redo',
-                '|',
-                'hr',
-                '|',
-                'eraser',
-                '|',
-                'font',
-                'fontsize',
-                'paragraph',
-                'brush',
-                '|',
-                'table',
-                'fullsize',
-            ],
-            uploader: useUploadImage ? uploaderConfig : undefined,
-        }),
-        []
-    );
-
-
-    return (
-        <JoditEditor
-            ref={editor}
-            value={value}
-            config={config}
-            onBlur={onBlur}
-            onChange={onChange}
-        />
-    );
-};
-
-export default ReactEditor