From d7d63d38d1e02318b433aac6bf279e1232f99f2b Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 18 Oct 2022 11:38:26 +0300
Subject: [PATCH] position
---
.../src/ImageService/AltComponent.js | 25 +++++++++++++++++--
1 file changed, 23 insertions(+), 2 deletions(-)
diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js
index a20185716..1523df1b5 100644
--- a/wax-prosemirror-services/src/ImageService/AltComponent.js
+++ b/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" />;
}
};
--
GitLab