@knovator/pagecreator-admin 0.5.7 → 0.5.8

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 SunEditor from 'suneditor-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));
 };
 
+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(SunEditor, {
+    setContents: value,
+    onChange: onChange,
+    setOptions: {
+      defaultStyle: 'font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size: 0.875rem;',
+      buttonList: [['undo', 'redo', 'align'], ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], ['fontColor', 'hiliteColor'], ['removeFormat']]
+    }
+  }), 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.8",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",
@@ -9,7 +9,9 @@
     "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",
+    "suneditor": "^2.44.3",
+    "suneditor-react": "^3.4.1"
   },
   "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';
+import HTMLEditor from './HTMLEditor';
 declare const _default: (({ label, id, placeholder, type, size, required, error, className, disabled, rest, onInput, onBlur, value, 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;