chore: Bump package version to 1.0.215 and enhance Tiptap component

- Update package version in package.json to 1.0.215
- Add autoFocus prop to Tiptap component for improved user experience
- Implement placeholder support in Tiptap stories
- Refactor Tiptap component to streamline editor handling and focus management
- Add CSS styles for empty editor state placeholders in tailwind.css

Author: agjs

package.json

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

src/Components/Inputs/Tiptap/index.tsx

@@ -1,4 +1,3 @@
-import { Editor } from "@tiptap/core";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { useMobile } from "Hooks/useMediaQuery";
 import classNames from "classnames";
@@ -21,6 +20,7 @@ import { TiptapProps, TiptapRef } from "./types";
 
 const Tiptap: ForwardRefRenderFunction<TiptapRef, TiptapProps> = (
   {
+    autoFocus = true,
     editorContent,
     onUpdate,
     actions,
@@ -37,7 +37,6 @@ const Tiptap: ForwardRefRenderFunction<TiptapRef, TiptapProps> = (
   },
   ref
 ) => {
-  const [editorRef, setEditorRef] = useState<Editor | null>(null);
   const isMobile = useMobile();
   const [textSelected, setTextSelected] = useState<string>("");
 
@@ -80,25 +79,40 @@ const Tiptap: ForwardRefRenderFunction<TiptapRef, TiptapProps> = (
 
   const editor = useEditor(useEditorConfig);
 
-  useImperativeHandle(ref, () => {
-    return {
+  useEffect(() => {
+    if (autoFocus && editor) {
+      editor.commands.focus();
+    }
+  }, [autoFocus, editor]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
       clearContent: () => {
-        editorRef?.commands.clearContent(true);
-      },
+        if (!editor) {
+          return;
+        }
 
-      getContents() {
-        return editorRef?.getHTML();
+        editor.commands.clearContent(true);
       },
-
+      getContents: () => editor?.getHTML() ?? "",
       setContent: (content: string) => {
-        editorRef?.commands.setContent(content);
+        if (!editor) {
+          return;
+        }
+
+        editor.commands.setContent(content);
       },
+      setFocus: () => {
+        if (!editor) {
+          return;
+        }
 
-      setFocus() {
-        editorRef?.commands.focus("end");
+        editor.commands.focus("end");
       }
-    };
-  }, [editorRef]);
+    }),
+    [editor]
+  );
 
   useEffect(() => {
     if (textSelected !== "clicked-outside" || !editor) {
@@ -112,10 +126,6 @@ const Tiptap: ForwardRefRenderFunction<TiptapRef, TiptapProps> = (
     setTextSelected("");
   }, [textSelected, isMobile, editor]);
 
-  if (!editorRef && editor) {
-    setEditorRef(editor);
-  }
-
   if (!editor) {
     return null;
   }

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

@@ -62,6 +62,7 @@ export const Default = () => {
     <div className='yl:w-full yl:md:w-[768px]'>
       <Tiptap
         ref={tiptapRef as RefObject<TiptapRef>}
+        placeholder='Enter your content here...'
         label='Content'
         suggestions={suggestions}
         toolbarItems={toolbarItems}

src/Components/Inputs/Tiptap/types.ts

@@ -18,6 +18,7 @@ export interface ITiptapActions {
 }
 
 export interface TiptapProps {
+  autoFocus?: boolean;
   editorContent?: string;
   onUpdate?: (props: EditorEvents["update"]) => void;
   onAction?: (action: TiptapActionsEnum) => void;

src/tailwind.css

@@ -44,3 +44,19 @@
     }
   }
 }
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: var(--color-muted);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.tiptap p.is-empty::before {
+  color: var(--color-muted);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}