Adds category label to the variabe if the selected variable belongs t…

…o a category. (#1249)

* Added yalc and yalc.lock to the gitignore.

* Added tooltip around the variable when the content is trimmed.

* Updated the variable label to include the category label when available.

.gitignore

@@ -19,6 +19,10 @@
 .env.test.local
 .env.production.local
 
+# Ignore yalc generated files
+yalc.lock
+/.yalc
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/components/Editor/CustomExtensions/Variable/VariableComponent.jsx

@@ -1,4 +1,5 @@
 import { NodeViewWrapper } from "@tiptap/react";
+import { Tooltip } from "neetoui";
 
 import { MAX_VARIABLE_NAME_DISPLAY_LENGTH } from "./constants";
 
@@ -16,8 +17,10 @@ const VariableComponent = ({ node, extension }) => {
       data-variable=""
     >
       {extension.options.charOpen}
-      {variableName?.substr(0, MAX_VARIABLE_NAME_DISPLAY_LENGTH)?.trim()}
-      {shouldTruncate && "..."}
+      <Tooltip content={variableName} disabled={!shouldTruncate} position="top">
+        {variableName?.substr(0, MAX_VARIABLE_NAME_DISPLAY_LENGTH)?.trim()}
+        {shouldTruncate && "..."}
+      </Tooltip>
       {extension.options.charClose}
     </NodeViewWrapper>
   );

src/components/Editor/Menu/Fixed/index.jsx

@@ -140,9 +140,17 @@ const Fixed = ({
     options.includes(EDITOR_OPTIONS.VIDEO_UPLOAD);
 
   const handleVariableClick = item => {
-    const { category, key, label } = item;
+    const { category, categoryLabel, key, label } = item;
     const variableName = category ? `${category}.${key}` : key;
-    editor.chain().focus().setVariable({ id: variableName, label }).run();
+    const variableLabel = category
+      ? `${categoryLabel || category}:${label}`
+      : label;
+
+    editor
+      .chain()
+      .focus()
+      .setVariable({ id: variableName, label: variableLabel })
+      .run();
   };
 
   return (