Add AI on article writer, markdown, wysiwyg (#1750)

* Add AI on article writer, markdown, wysiwyg

* Update key

* lock revert

* zesty-io/[email protected]

Co-authored-by: Stuart Runyan <[email protected]>

Author: agalin920

package-lock.json

@@ -55,7 +55,7 @@
     "@sentry/tracing": "^6.4.0",
     "@tinymce/tinymce-react": "^3.12.6",
     "@welldone-software/why-did-you-render": "^6.1.1",
-    "@zesty-io/core": "1.6.7",
+    "@zesty-io/core": "1.6.8",
     "@zesty-io/material": "^0.6.0",
     "chart.js": "^3.8.0",
     "chartjs-plugin-datalabels": "^2.0.0",

package.json

@@ -5,7 +5,7 @@ import moment from "moment-timezone";
 import zuid from "zuid";
 
 import { fetchFields } from "shell/store/fields";
-import { fetchItem, fetchItems, searchItems } from "shell/store/content";
+import { fetchItems, searchItems } from "shell/store/content";
 
 import {
   ToggleButtonGroup,
@@ -22,7 +22,6 @@ import {
   TextField,
   Dialog,
   IconButton,
-  DialogTitle,
 } from "@mui/material";
 
 import InfoIcon from "@mui/icons-material/InfoOutlined";
@@ -41,7 +40,6 @@ import { FieldTypeUUID } from "@zesty-io/core/FieldTypeUUID";
 import { FieldTypeCurrency } from "@zesty-io/core/FieldTypeCurrency";
 import { FieldTypeInternalLink } from "@zesty-io/core/FieldTypeInternalLink";
 import { FieldTypeImage } from "@zesty-io/core/FieldTypeImage";
-import { FieldTypeSort } from "@zesty-io/material";
 import { FieldTypeEditor } from "@zesty-io/core/FieldTypeEditor";
 import { FieldTypeTinyMCE } from "@zesty-io/core/FieldTypeTinyMCE";
 import {
@@ -51,13 +49,17 @@ import {
   FieldTypeText,
   FieldTypeDate,
   FieldTypeDateTime,
+  FieldTypeSort,
 } from "@zesty-io/material";
 
 import styles from "./Field.less";
 import { MemoryRouter } from "react-router";
 import { withAI } from "../../../../../../../shell/components/withAi";
 
 const AITextField = withAI(FieldTypeText);
+const AIEditorField = withAI(FieldTypeEditor);
+const AITinyMCEField = withAI(FieldTypeTinyMCE);
+
 const FieldLabel = memo((props) => {
   return (
     <>
@@ -350,7 +352,7 @@ export default function Field({
     case "wysiwyg_basic":
       return (
         <div className={styles.WYSIWYGFieldType}>
-          <FieldTypeTinyMCE
+          <AITinyMCEField
             name={name}
             label={FieldTypeLabel}
             description={description}
@@ -362,6 +364,7 @@ export default function Field({
             onSave={onSave}
             datatype={datatype}
             maxLength="16000"
+            aiType="paragraph"
             skin="oxide"
             skinURL="/vendors/tinymce/skins/ui/oxide"
             contentCSS="/vendors/tinymce/content.css"
@@ -383,7 +386,7 @@ export default function Field({
     case "article_writer":
       return (
         <div className={styles.WYSIWYGFieldType}>
-          <FieldTypeEditor
+          <AIEditorField
             name={name}
             label={FieldTypeLabel}
             description={description}
@@ -394,6 +397,7 @@ export default function Field({
             onChange={onChange}
             datatype={datatype}
             maxLength="16000"
+            aiType="paragraph"
             mediaBrowser={(opts) => {
               setImageModal(opts);
             }}

src/apps/content-editor/src/app/components/Editor/Field/Field.js

@@ -10,12 +10,20 @@ import moment from "moment-timezone";
 // This date is used determine if the AI feature is enabled
 const enabledDate = "2023-01-13";
 
+const paragraphFormat = (text: string) => {
+  return `<p>${text
+    .split(/\n/)
+    .filter((s) => s)
+    .join("</p><p>")}</p>`;
+};
+
 export const withAI = (WrappedComponent: ComponentType) => (props: any) => {
   const instanceCreatedAt = useSelector(
     (state: AppState) => state.instance.createdAt
   );
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [focused, setFocused] = useState(false);
+  const [key, setKey] = useState(0);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -25,18 +33,38 @@ export const withAI = (WrappedComponent: ComponentType) => (props: any) => {
     setAnchorEl(null);
   };
 
-  const handleGenerate = (generatedText: string) => {
-    props.onChange(
-      { target: { value: `${props.value}${generatedText}` } },
-      props.name
-    );
+  const handleApprove = (generatedText: string) => {
+    if (
+      props.datatype === "article_writer" ||
+      props.datatype === "markdown" ||
+      props.datatype === "wysiwyg_advanced" ||
+      props.datatype === "wysiwyg_basic"
+    ) {
+      props.onChange(
+        `${props.value || ""}${
+          props.datatype === "markdown"
+            ? generatedText
+            : paragraphFormat(generatedText)
+        }`,
+        props.name,
+        props.datatype
+      );
+      // Force re-render after appending generated AI text due to uncontrolled component
+      setKey(key + 1);
+    } else {
+      props.onChange(
+        { target: { value: `${props.value}${generatedText}` } },
+        props.name
+      );
+    }
   };
 
   if (moment(instanceCreatedAt).isSameOrAfter(moment(enabledDate))) {
     return (
       <>
         <WrappedComponent
           {...props}
+          key={key}
           endLabel={
             <ThemeProvider theme={theme}>
               <IconButton
@@ -74,7 +102,7 @@ export const withAI = (WrappedComponent: ComponentType) => (props: any) => {
             }}
           >
             <AIGenerator
-              onApprove={handleGenerate}
+              onApprove={handleApprove}
               onClose={handleClose}
               aiType={props.aiType}
               label={props.label}