@knovator/pagecreator-admin 0.5.7 → 0.5.9

package/index.cjs

@@ -7,6 +7,7 @@ var fetchUrl = require('@knovator/api');
 var classNames = require('classnames');
 var ReactSelect = require('react-select/async');
 var reactHookForm = require('react-hook-form');
+var JoditEditor = require('jodit-react');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var CSSTransition = require('react-transition-group/CSSTransition');
 var reactDropzone = require('react-dropzone');
@@ -19,6 +20,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var fetchUrl__default = /*#__PURE__*/_interopDefaultLegacy(fetchUrl);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
+var JoditEditor__default = /*#__PURE__*/_interopDefaultLegacy(JoditEditor);
 var CSSTransition__default = /*#__PURE__*/_interopDefaultLegacy(CSSTransition);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1710,7 +1712,7 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.nameRequired': 'Name is required',
   'widget.widgetTitle': 'Widget Title',
   'widget.widgetTitlePlaceholder': 'Enter Widget Title',
-  'widget.widgetTitleRequired': 'Section Widget is required',
+  'widget.widgetTitleRequired': 'Widget Title is required',
   'widget.itemsType': 'Items Type',
   'widget.itemsTypePlaceholder': 'Select Items Type',
   'widget.widgetType': 'Widget Type',
@@ -3471,11 +3473,38 @@ const SrcSet = ({
   }, error));
 };
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const App = ({
+  label,
+  wrapperClassName,
+  required,
+  value,
+  error,
+  onChange
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]('khb_input-wrapper', wrapperClassName)
+  }, label && /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "khb_input-label"
+  }, label, required ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "khb_input-label-required"
+  }, "*") : null), /*#__PURE__*/React__default["default"].createElement(JoditEditor__default["default"], {
+    value: value || '',
+    config: {
+      buttons: ['bold', 'italic', 'align', 'brush', 'undo', 'redo']
+    },
+    onBlur: newContent => onChange(newContent)
+  }), error && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "khb_input-error "
+  }, error));
+};
+
 var Input = Object.assign(Input$1, {
   Select,
   ReactSelect: CustomReactSelect,
   Checkbox,
-  SrcSet
+  SrcSet,
+  HTML: App
 });
 
 const PageSearch = () => {
@@ -3894,6 +3923,26 @@ const SimpleForm = /*#__PURE__*/React.forwardRef(({
             }
           });
           break;
+        case 'html':
+          input = /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
+            control: control,
+            name: schema.accessor,
+            rules: schema.validations,
+            render: ({
+              field
+            }) => {
+              var _a, _b;
+              return /*#__PURE__*/React__default["default"].createElement(Input.HTML, {
+                label: schema.label,
+                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+                onInput: schema.onInput,
+                required: schema.required,
+                value: field.value,
+                onChange: field.onChange
+              });
+            }
+          });
+          break;
         case 'text':
         case 'number':
         case 'url':
@@ -7046,7 +7095,7 @@ const WidgetForm = ({
     label: `${t('widget.widgetTitle')}`,
     accessor: 'widgetTitle',
     required: true,
-    type: 'text',
+    type: 'html',
     onInput: handleCapitalize,
     placeholder: t('widget.widgetTitlePlaceholder'),
     validations: {

package/index.css

@@ -918,6 +918,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.italic {
+  font-style: italic;
+}
 .leading-6 {
   line-height: 1.5rem;
 }

package/index.js

@@ -3,6 +3,7 @@ import fetchUrl, { setAPIConfig } from '@knovator/api';
 import classNames from 'classnames';
 import ReactSelect from 'react-select/async';
 import { useFieldArray, useForm, Controller } from 'react-hook-form';
+import JoditEditor from 'jodit-react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { useDropzone } from 'react-dropzone';
@@ -1698,7 +1699,7 @@ const TRANSLATION_PAIRS_WIDGET = {
   'widget.nameRequired': 'Name is required',
   'widget.widgetTitle': 'Widget Title',
   'widget.widgetTitlePlaceholder': 'Enter Widget Title',
-  'widget.widgetTitleRequired': 'Section Widget is required',
+  'widget.widgetTitleRequired': 'Widget Title is required',
   'widget.itemsType': 'Items Type',
   'widget.itemsTypePlaceholder': 'Select Items Type',
   'widget.widgetType': 'Widget Type',
@@ -3459,11 +3460,38 @@ const SrcSet = ({
   }, error));
 };
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const App = ({
+  label,
+  wrapperClassName,
+  required,
+  value,
+  error,
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('khb_input-wrapper', wrapperClassName)
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: "khb_input-label"
+  }, label, required ? /*#__PURE__*/React.createElement("span", {
+    className: "khb_input-label-required"
+  }, "*") : null), /*#__PURE__*/React.createElement(JoditEditor, {
+    value: value || '',
+    config: {
+      buttons: ['bold', 'italic', 'align', 'brush', 'undo', 'redo']
+    },
+    onBlur: newContent => onChange(newContent)
+  }), error && /*#__PURE__*/React.createElement("p", {
+    className: "khb_input-error "
+  }, error));
+};
+
 var Input = Object.assign(Input$1, {
   Select,
   ReactSelect: CustomReactSelect,
   Checkbox,
-  SrcSet
+  SrcSet,
+  HTML: App
 });
 
 const PageSearch = () => {
@@ -3882,6 +3910,26 @@ const SimpleForm = /*#__PURE__*/forwardRef(({
             }
           });
           break;
+        case 'html':
+          input = /*#__PURE__*/React.createElement(Controller, {
+            control: control,
+            name: schema.accessor,
+            rules: schema.validations,
+            render: ({
+              field
+            }) => {
+              var _a, _b;
+              return /*#__PURE__*/React.createElement(Input.HTML, {
+                label: schema.label,
+                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+                onInput: schema.onInput,
+                required: schema.required,
+                value: field.value,
+                onChange: field.onChange
+              });
+            }
+          });
+          break;
         case 'text':
         case 'number':
         case 'url':
@@ -7034,7 +7082,7 @@ const WidgetForm = ({
     label: `${t('widget.widgetTitle')}`,
     accessor: 'widgetTitle',
     required: true,
-    type: 'text',
+    type: 'html',
     onInput: handleCapitalize,
     placeholder: t('widget.widgetTitlePlaceholder'),
     validations: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",
@@ -9,7 +9,8 @@
     "react-dropzone": "^14.2.2",
     "react-select": "^5.4.0",
     "react-tabs": "^6.0.0",
-    "react-tiny-popover": "^7.2.0"
+    "react-tiny-popover": "^7.2.0",
+    "jodit-react": "^1.3.32"
   },
   "peerDependencies": {
     "react": "^18 | ^17",

package/src/lib/components/common/Input/HTMLEditor.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HTMLEditorProps } from '../../../types';
+declare const App: ({ label, wrapperClassName, required, value, error, onChange, }: HTMLEditorProps) => JSX.Element;
+export default App;

package/src/lib/components/common/Input/index.d.ts

@@ -3,10 +3,12 @@ import Checkbox from "./Checkbox";
 import Select from "./Select";
 import ReactSelect from "./ReactSelect";
 import SrcSet from './SrcSet';
-declare const _default: (({ label, id, placeholder, type, size, required, error, className, disabled, rest, onInput, onBlur, value, onChange, wrapperClassName, }: import("../../../types").InputProps) => JSX.Element) & {
+import HTMLEditor from './HTMLEditor';
+declare const _default: (({ label, id, placeholder, type, size, required, error, className, disabled, rest, onInput, onBlur, value, info, onChange, wrapperClassName, }: import("../../../types").InputProps) => JSX.Element) & {
     Select: typeof Select;
     ReactSelect: typeof ReactSelect;
     Checkbox: typeof Checkbox;
     SrcSet: typeof SrcSet;
+    HTML: typeof HTMLEditor;
 };
 export default _default;

package/src/lib/types/components.d.ts

@@ -53,6 +53,17 @@ export interface InputProps {
     register?: any;
     info?: string;
 }
+export interface HTMLEditorProps {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    wrapperClassName?: string;
+    onChange: (value: string) => void;
+    onInput?: (e: any) => void;
+    required?: boolean;
+    error?: string;
+}
 export interface CheckboxProps {
     rest?: any;
     label?: string;
@@ -146,7 +157,7 @@ export interface SchemaType extends ReactSelectProps {
     validations?: RegisterOptions;
     editable?: boolean;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    type?: 'text' | 'number' | 'select' | 'checkbox' | 'textarea' | 'file' | 'url' | 'ReactSelect' | 'srcset' | 'color';
+    type?: 'text' | 'number' | 'select' | 'checkbox' | 'textarea' | 'file' | 'url' | 'ReactSelect' | 'srcset' | 'color' | 'html';
     options?: {
         value: string;
         label: string;