feat(editor): add button on hover

Sefaria · Jul 25, 2023 · 7e17efb · 7e17efb
1 parent aa88990
commit 7e17efb
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -9500,6 +9500,7 @@ span.purim-emoji img{
   position: relative;
   pointer-events:none;
   background-color: transparent;
+  margin-left: 50px;
 }
 .editorAddInterface:before {
   content: "";

diff --git a/static/js/Editor.jsx b/static/js/Editor.jsx
@@ -1062,12 +1062,14 @@ const AddInterface = ({ attributes, children, element }) => {
 
 const Element = (props) => {
     const { attributes, children, element } = props;
+    const [isHovering, setIsHovering] = useState(false);
     const sheetItemClasses = {
         sheetItem: 1,
         empty: !(Node.string(element)),
         highlight: (useSlate().highlightedNode === (element.node ? element.node.toString() : null))
     };
 
+
     switch (element.type) {
         case 'spacer':
           const spacerSelected = useSelected();
@@ -1077,8 +1079,12 @@ const Element = (props) => {
             empty: 1
           }
           return (
-            <div className={classNames(spacerClasses)} {...attributes}>
-              {spacerSelected && document.getSelection().isCollapsed ?  <AddInterface {...props} /> : <>{children}</>}
+            <div className={classNames(spacerClasses)}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            {...attributes}>
+            {isHovering && <AddInterface {...props} />}
+            {children}
             </div>
           );
         case 'SheetSource':

diff --git a/static/test/linker_test.html b/static/test/linker_test.html
@@ -96,7 +96,7 @@
             <p dir="rtl">השתדרות ד פועל</p>
             <p dir="rtl">Hebrew Ranges</p>
             <p dir="rtl">שמות, כ"ד, יג - יד</p>
-            <p dir="rtl">שמות, כ"ד, יג-יד</p> 
+            <p dir="rtl">שמות, כ"ד, יג-יד</p>
             <p dir="rtl">במדבר, כ"ז, טו - כג</p>
             <p dir="rtl">בראשית א לא - ב ו</p>
             <p dir="rtl">(en dash)  בראשית א לא – ב ו</p>