✨ feat(forms): render rich text area on the browser

src/__tests__/api/_test-utils/_all.ts

@@ -45,4 +45,4 @@ export const setupAllTestData = async (domains: DomainTypes[]) => {
   );
 };
 
-// TODO test all custom script logic
+// TODO: test all custom script logic

src/__tests__/api/menu/index.spec.ts

@@ -155,4 +155,4 @@ describe("/api/menu", () => {
   });
 });
 
-// TODO test isMenuItemAllowed
+// TODO: test isMenuItemAllowed

src/backend/users/users.controller.ts

@@ -64,7 +64,7 @@ export class UsersApiController {
     }
   }
 
-  // TODO if mail is activated then send reset form
+  // TODO: if mail is activated then send reset form
   async resetPassword(username: string, input: IResetPasswordForm) {
     await this._usersService.resetPassword(username, input.password);
   }

src/frontend/components/SchemaForm/_RenderFormInput.tsx

@@ -13,6 +13,7 @@ import { FormCodeEditor } from "frontend/design-system/components/Form/FormCodeE
 import { FormTextArea } from "frontend/design-system/components/Form/FormTextArea";
 import { FormFileInput } from "frontend/design-system/components/Form/FormFileInput";
 import { FormSelectButton } from "frontend/design-system/components/Form/FormSelectButton";
+import { FormRichTextArea } from "frontend/design-system/components/Form/FormRichTextArea";
 
 interface IProps {
   type: keyof typeof FIELD_TYPES_CONFIG_MAP;
@@ -101,7 +102,7 @@ export function RenderFormInput({
       return <FormTextArea {...formProps} />;
 
     case "richtext":
-      return <FormTextArea {...formProps} />;
+      return <FormRichTextArea {...formProps} />;
 
     case "image":
     case "file":
@@ -111,4 +112,4 @@ export function RenderFormInput({
       return <FormInput {...formProps} />;
   }
 }
-// TODO Rating Input (for contributors)
+// TODO: Rating Input (for contributors)

src/frontend/design-system/components/Form/FormRichTextArea/index.tsx

@@ -1,13 +1,20 @@
 import React from "react";
-import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import styled from "styled-components";
 import { USE_ROOT_COLOR } from "frontend/design-system/theme/root";
+import dynamic from "next/dynamic";
 import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
 import { noop } from "shared/lib/noop";
 import { ISharedFormInput } from "../_types";
 import { generateClassNames, wrapLabelAndError } from "../_wrapForm";
 
+const ReactQuill = dynamic<any>(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+
 const Root = styled.div`
   .ql-editor {
     min-height: 18em;
@@ -90,7 +97,7 @@ const modules = {
       { indent: "-1" },
       { indent: "+1" },
     ],
-    ["link"], // 'image', 'video'
+    ["link"],
     ["clean"],
   ],
   clipboard: {

src/frontend/design-system/components/Form/FormSelect/Async/index.tsx

@@ -26,7 +26,6 @@ export const Select = styled(AsyncSelect)`
   ${SelectStyles}
 `;
 
-// TODO move to useDebounce
 const debouncedSearch = debounce(
   async (
     inputValue: string,

src/frontend/design-system/components/Table/filters/_FilterOperator.tsx

@@ -13,7 +13,7 @@ const FILTER_OPERATOR_LABELS: Record<FilterOperators, string> = {
   [FilterOperators.BETWEEN]: "Between",
   [FilterOperators.CONTAINS]: "Contains",
   [FilterOperators.NOT_EQUAL]: "Not Equal To",
-  [FilterOperators.IS_NULL]: "Is Null", // TODO
+  [FilterOperators.IS_NULL]: "Is Null", // TODO:
 };
 
 interface IProps<T> {

src/frontend/design-system/components/Table/filters/__tests__/index.spec.tsx

@@ -26,7 +26,7 @@ function TestComponent({
         getFilterValue: () => state,
       }}
       view="Test Column"
-      debounce={100}
+      debounceWait={100}
     />
   );
 }

src/frontend/design-system/components/Table/filters/index.tsx

@@ -16,14 +16,14 @@ interface IProps {
     "setFilterValue" | "getFilterValue"
   >;
   view?: React.ReactNode | string;
-  debounce?: number;
+  debounceWait?: number;
 }
 
 export function TableFilter({
   type,
   column,
   view,
-  debounce = FILTER_DEBOUNCE_WAIT,
+  debounceWait = FILTER_DEBOUNCE_WAIT,
 }: IProps) {
   const filterValue = column.getFilterValue() as IColumnFilterBag<any>;
 
@@ -58,7 +58,7 @@ export function TableFilter({
     () => {
       setFilter(localValue);
     },
-    debounce,
+    debounceWait,
     [localValue]
   );
 

src/frontend/views/Dashboard/Widget/_render/Summary/index.tsx

@@ -13,7 +13,7 @@ interface IProps {
   data: unknown;
 }
 
-// TODO Card Widgets: targets (for contributors)
+// TODO: Card Widgets: targets (for contributors)
 // card percentage inverse
 
 export function SummaryWidget({ config, data }: IProps) {

src/frontend/views/data/Table/DataTable/index.tsx

@@ -43,7 +43,7 @@ export function BaseDataTable({
       border={border}
       emptyMessage={
         currentState.filters.length > 0
-          ? // TODO for contributors: transform this to user readable message
+          ? // TODO: for contributors: transform this to user readable message
             `No result for the current ${pluralize({
               singular: "filter",
               count: currentState.filters.length,

src/frontend/views/entity/Actions/Form.tsx

@@ -121,7 +121,7 @@ export function ActionForm({
       })),
     },
     ...selectedImplementation,
-    // TODO Actions script i.e return false or return a loop to do many users
+    // TODO: Actions script i.e return false or return a loop to do many users
     // triggerLogic: {
     //   type: "json",
     //   validations: [],

src/frontend/views/entity/Fields/FieldsValidation.tsx

@@ -35,7 +35,7 @@ const CRUD_CONFIG = MAKE_APP_CONFIGURATION_CRUD_CONFIG("entity_validations");
 
 const ERROR_MESSAGE_LENGTH = 128;
 
-// TODO for contributors: Show the actuall error message not the template message
+// TODO: for contributors: Show the actuall error message not the template message
 
 export function FieldValidationCanvas({
   field,

src/pages/api/upload/index.ts

@@ -52,7 +52,7 @@ export const config: PageConfig = {
   },
 };
 
-// TODO
+// TODO:
 // disable file upload in DEMO
 // Max Size
 // file type