refactor: Improve Tiptap and Input component styling

- Update InputHeader text color from secondary to text
- Modify Mention component styling with border and hover state
- Add span tag to Mention node in Tiptap constants
- Update Toolbar link button styling
- Enhance allowed HTML attributes for Tiptap conversion
- Bump package version to 1.0.209

Author: agjs

package.json

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

src/Components/Inputs/Common/InputHeader/index.tsx

@@ -28,11 +28,11 @@ const InputHeader: FC<InputHeaderProps> = (
           <Tooltip text={hint} id={name} place='right'>
             <Icon
               iconName='IconInfo'
-              className='yl:w-4 yl:text-secondary yl:relative yl:top-[1px] yl:cursor-pointer'
+              className='yl:w-4 yl:text-text yl:relative yl:top-[1px] yl:cursor-pointer'
             />
           </Tooltip>
         )}
-        <div className='yl:text-secondary'>
+        <div className='yl:text-text'>
           {label}
           {required && <span className='yl:ml-1 yl:text-error'>*</span>}
         </div>

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

@@ -54,12 +54,12 @@ const Mention: React.ForwardRefRenderFunction<MentionHandle, IMentionProps> = (
   }));
 
   return (
-    <ul className='yl:flex yl:max-h-60 yl:min-w-[150px] yl:flex-col yl:gap-2 yl:overflow-y-auto yl:bg-background yl:py-2 yl:pl-4 yl:text-text yl:shadow-lg'>
+    <ul className='yl:flex yl:max-h-60 yl:min-w-[150px] yl:border yl:border-text/20 yl:rounded-xs yl:flex-col yl:gap-2 yl:overflow-y-auto yl:bg-background  yl:text-text yl:shadow-lg yl:p-2'>
       {props.items.map((item, index) => (
         <li
           data-label={item.label}
-          className={classNames({
-            "yl:text-text": index === selectedIndex
+          className={classNames("yl:p-1 yl:rounded-xs", {
+            "yl:text-primary yl:bg-text/5": index === selectedIndex
           })}
           key={index}
           onClick={() => selectItem(index)}

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

@@ -148,7 +148,6 @@ export const Toolbar = ({
             ref={ref}
           >
             <Button
-              outlined
               icon={{
                 iconName: "IconLink",
                 iconPosition: "right",

src/Components/Inputs/Tiptap/TiptapToHTML/index.ts

@@ -100,7 +100,7 @@ export default class TiptapToHTML {
           "height",
           "loading"
         ],
-        span: ["data-id", "data-type"]
+        span: ["data-id", "data-type", "yl:text-primary"]
       },
       selfClosing: ["img", "br"],
       allowedClasses: {

src/Components/Inputs/Tiptap/constants.ts

@@ -128,7 +128,7 @@ export const toolbarItemToClassName = {
     classes: "yl:mx-auto yl:block yl:p-2 yl:border yl:border-background"
   },
   [TIPTAP_TOOLBAR_ITEMS.MENTION]: {
-    tagName: null,
+    tagName: "span",
     classes: "yl:text-primary yl:cursor-pointer yl:font-bold"
   }
 };