feat: Update Tiptap component with new Confirming and Error states

- Add Confirming and Error story variations to Tiptap component for enhanced user interaction
- Introduce new props for isCreating and isUpdating to Tiptap and TiptapToolbar interfaces
- Update Tooltip component to accept additional className props for better styling flexibility
- Bump package version to 1.0.213

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.212",
+  "version": "1.0.213",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Inputs/Tiptap/Components/Actions/index.tsx

@@ -21,21 +21,31 @@ const TiptapActions: FC<{
         <div className='yl:flex yl:items-center'>
           {buttons.includes(TiptapActionsEnum.CANCEL) && (
             <Icon
-              onClick={() => onAction(TiptapActionsEnum.CANCEL)}
+              onClick={
+                !isConfirming
+                  ? () => onAction(TiptapActionsEnum.CANCEL)
+                  : undefined
+              }
               iconName='IconCloseCircle'
-              className='yl:w-10 yl:cursor-pointer yl:text-text/30 yl:hover:text-text'
+              className={classNames("yl:w-10 yl:text-text/20", {
+                "yl:text-text/30 yl:hover:text-text yl:cursor-pointer":
+                  !isConfirming
+              })}
             />
           )}
           {buttons.includes(TiptapActionsEnum.CONFIRM) && (
             <Icon
-              onClick={() => onAction(TiptapActionsEnum.CONFIRM)}
+              onClick={
+                !isConfirming
+                  ? () => onAction(TiptapActionsEnum.CONFIRM)
+                  : undefined
+              }
               iconName={!isConfirming ? "IconCheck" : "IconSpinner"}
-              className={classNames(
-                "yl:w-10 yl:cursor-pointer yl:fill-success",
-                {
-                  "yl:text-success": !isEditorEmpty
-                }
-              )}
+              className={classNames("yl:w-10", {
+                " yl:cursor-pointer": !isConfirming,
+                "yl:text-success": !isEditorEmpty && !isConfirming,
+                "yl:fill-primary yl:w-7 yl:h-7": isConfirming
+              })}
             />
           )}
         </div>

src/Components/Inputs/Tiptap/tiptap.stories.tsx

@@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/core";
-import { RefObject, useRef, useState } from "react";
+import { RefObject, useEffect, useRef, useState } from "react";
 
 import Tiptap from ".";
 import TiptapToHTML from "./TiptapToHTML";
@@ -88,3 +88,190 @@ export const Default = () => {
     </div>
   );
 };
+
+export const Confirming = () => {
+  const suggestions = {
+    trigger: "#",
+    items: () =>
+      Promise.resolve([
+        {
+          label: "Bar Label",
+          value: "bar"
+        },
+        {
+          label: "Baz Label",
+          value: "baz"
+        }
+      ])
+  };
+
+  const toolbarItems = [
+    TIPTAP_TOOLBAR_ITEMS.BOLD,
+    TIPTAP_TOOLBAR_ITEMS.HEADING_2,
+    TIPTAP_TOOLBAR_ITEMS.HEADING_3,
+    TIPTAP_TOOLBAR_ITEMS.ITALIC,
+    TIPTAP_TOOLBAR_ITEMS.LINK,
+    TIPTAP_TOOLBAR_ITEMS.IMAGE,
+    TIPTAP_TOOLBAR_ITEMS.YOUTUBE,
+    TIPTAP_TOOLBAR_ITEMS.LIST_ITEM,
+    TIPTAP_TOOLBAR_ITEMS.UNORDERED_LIST,
+    TIPTAP_TOOLBAR_ITEMS.ORDERED_LIST,
+    TIPTAP_TOOLBAR_ITEMS.CODE,
+    TIPTAP_TOOLBAR_ITEMS.BLOCK_QUOTE,
+    TIPTAP_TOOLBAR_ITEMS.STRIKE_THROUGH,
+    TIPTAP_TOOLBAR_ITEMS.CODE_BLOCK
+  ];
+
+  const converter = new TiptapToHTML(toolbarItems, suggestions);
+
+  const [editorState, setEditorState] = useState<string>("");
+
+  const tiptapRef = useRef<TiptapRef>(null);
+
+  const onEditorStateChange = ({ editor }: { editor: Editor }) => {
+    console.log(editor.getJSON());
+    setEditorState(
+      converter.generateSanitizedHTML(JSON.stringify(editor.getJSON()))
+    );
+  };
+
+  useEffect(() => {
+    // @ts-ignore
+    tiptapRef.current?.setContent({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Hello, world!"
+            }
+          ]
+        }
+      ]
+    });
+  }, []);
+
+  return (
+    <div className='yl:w-full yl:md:w-[768px]'>
+      <Tiptap
+        ref={tiptapRef as RefObject<TiptapRef>}
+        label='Content'
+        suggestions={suggestions}
+        toolbarItems={toolbarItems}
+        actions={{
+          buttons: [TiptapActionsEnum.CANCEL, TiptapActionsEnum.CONFIRM],
+          onAction: actionType => alert(actionType),
+          isConfirming: true
+        }}
+        onSetImage={() => {
+          return new Promise<void>(resolve => {
+            resolve();
+          });
+        }}
+        onTransaction={({ editor }) => {
+          onEditorStateChange({ editor });
+        }}
+        required={true}
+      />
+
+      <div
+        className='yl:mt-8 yl:break-words text-indigo-500'
+        dangerouslySetInnerHTML={{ __html: editorState }}
+      ></div>
+    </div>
+  );
+};
+
+export const Error = () => {
+  const suggestions = {
+    trigger: "#",
+    items: () =>
+      Promise.resolve([
+        {
+          label: "Bar Label",
+          value: "bar"
+        },
+        {
+          label: "Baz Label",
+          value: "baz"
+        }
+      ])
+  };
+
+  const toolbarItems = [
+    TIPTAP_TOOLBAR_ITEMS.BOLD,
+    TIPTAP_TOOLBAR_ITEMS.HEADING_2,
+    TIPTAP_TOOLBAR_ITEMS.HEADING_3,
+    TIPTAP_TOOLBAR_ITEMS.ITALIC,
+    TIPTAP_TOOLBAR_ITEMS.LINK,
+    TIPTAP_TOOLBAR_ITEMS.IMAGE,
+    TIPTAP_TOOLBAR_ITEMS.YOUTUBE,
+    TIPTAP_TOOLBAR_ITEMS.LIST_ITEM,
+    TIPTAP_TOOLBAR_ITEMS.UNORDERED_LIST,
+    TIPTAP_TOOLBAR_ITEMS.ORDERED_LIST,
+    TIPTAP_TOOLBAR_ITEMS.CODE,
+    TIPTAP_TOOLBAR_ITEMS.BLOCK_QUOTE,
+    TIPTAP_TOOLBAR_ITEMS.STRIKE_THROUGH,
+    TIPTAP_TOOLBAR_ITEMS.CODE_BLOCK
+  ];
+
+  const tiptapRef = useRef<TiptapRef>(null);
+
+  useEffect(() => {
+    // @ts-ignore
+    tiptapRef.current?.setContent({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Hello, world!"
+            }
+          ]
+        }
+      ]
+    });
+  }, []);
+
+  return (
+    <div className='yl:w-full yl:md:w-[768px]'>
+      <Tiptap
+        ref={tiptapRef as RefObject<TiptapRef>}
+        label='Content'
+        suggestions={suggestions}
+        toolbarItems={toolbarItems}
+        error='This is an error'
+        actions={{
+          buttons: [TiptapActionsEnum.CANCEL, TiptapActionsEnum.CONFIRM],
+          onAction: actionType => {
+            if (actionType === TiptapActionsEnum.CONFIRM) {
+              // @ts-ignore
+              tiptapRef.current?.setContent({
+                type: "doc",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [
+                      {
+                        type: "text",
+                        text: "Content has been set!"
+                      }
+                    ]
+                  }
+                ]
+              });
+            } else {
+              tiptapRef.current?.clearContent();
+            }
+          },
+          isConfirming: false
+        }}
+        required={true}
+      />
+    </div>
+  );
+};

src/Components/Inputs/Tiptap/types.ts

@@ -33,6 +33,8 @@ export interface TiptapProps {
   label?: string;
   hint?: string;
   required?: boolean;
+  isCreating?: boolean;
+  isUpdating?: boolean;
 }
 
 export interface TiptapToolbarProps {
@@ -45,6 +47,8 @@ export interface TiptapToolbarProps {
   };
   editor: Editor;
   toolbarItems?: TiptapControls;
+  isCreating?: boolean;
+  isUpdating?: boolean;
 }
 
 export interface TiptapRef {

src/Components/Tooltip/index.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { FC } from "react";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import "react-tooltip/dist/react-tooltip.css";
@@ -9,15 +10,21 @@ const Tooltip: FC<ITooltipProps> = ({
   children,
   id,
   place = "top",
-  delayShow = 0
+  delayShow = 0,
+  childrenClassName,
+  className
 }) => {
   if (!text) {
     return children;
   }
 
   return (
     <div>
-      <div data-tooltip-id={id} data-tooltip-delay-show={delayShow}>
+      <div
+        data-tooltip-id={id}
+        data-tooltip-delay-show={delayShow}
+        className={classNames(childrenClassName)}
+      >
         {children}
       </div>
       <ReactTooltip
@@ -26,7 +33,10 @@ const Tooltip: FC<ITooltipProps> = ({
         content={text as string}
         noArrow
         opacity={1}
-        className='yl:border-2 yl:border-primary yl:bg-background yl:text-text yl:z-50'
+        className={classNames(
+          "yl:border-2 yl:border-primary yl:bg-background yl:text-text yl:z-50",
+          className
+        )}
       />
     </div>
   );

src/Components/Tooltip/types.ts

@@ -6,4 +6,6 @@ export interface ITooltipProps {
   children: React.ReactNode;
   place?: "top" | "bottom" | "left" | "right";
   delayShow?: number;
+  childrenClassName?: string;
+  className?: string;
 }