position

wax-prosemirror-services/src/ImageService/AltComponent.js

@@ -16,18 +16,39 @@ export default ({ setPosition, position }) => {
 
   const readOnly = !isEditable;
 
+  const StyledInputAlt = styled.input`
+    background: #e2ebff;
+    border: none;
+    box-sizing: border-box;
+    width: 240px;
+    min-height: 20px;
+    padding: 4px;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: black;
+      font-weight: bold;
+    }
+  `;
+
   useLayoutEffect(() => {
     const WaxSurface = activeView.dom.getBoundingClientRect();
     const { selection } = activeView.state;
+
+    if (!selection || !selection.node || !selection.node.attrs.id) return;
     const imageId = selection.node.attrs.id;
     const image = document.querySelector(`[data-id='${imageId}']`);
     const imagePosition = image.getBoundingClientRect();
     const left = imagePosition.left - WaxSurface.left;
-    const top = imagePosition.bottom - WaxSurface.top + 10;
+    const top = imagePosition.bottom - WaxSurface.top - 22;
     setPosition({ ...position, left, top });
+    console.log(position);
   }, [position.left]);
 
   if (!readOnly) {
-    return <input type="text" />;
+    return <StyledInputAlt placeholder="Alt Text" type="text" />;
   }
 };