add alt overlay in service

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

+/* eslint-disable react/prop-types */
+import React, { useContext, useLayoutEffect } from 'react';
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
+
+export default ({ setPosition, position }) => {
+  const context = useContext(WaxContext);
+  const {
+    activeView,
+    pmViews: { main },
+  } = context;
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  const readOnly = !isEditable;
+
+  useLayoutEffect(() => {
+    const WaxSurface = activeView.dom.getBoundingClientRect();
+    const left = 300;
+    const top = 500;
+    setPosition({ ...position, left, top });
+  }, [position.left]);
+
+  if (!readOnly) {
+    return <input type="text" />;
+  }
+};

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

@@ -7,6 +7,7 @@ import { PlaceHolderPlugin, captionPlugin } from 'wax-prosemirror-plugins';
 import Service from '../Service';
 import Image from './Image';
 import './image.css';
+import AltComponent from './AltComponent';
 
 class ImageService extends Service {
   name = 'ImageService';
@@ -22,6 +23,7 @@ class ImageService extends Service {
   register() {
     this.container.bind('Image').to(Image);
     const createNode = this.container.get('CreateNode');
+    const createOverlay = this.container.get('CreateOverlay');
     createNode({
       figure: figureNode,
     });
@@ -39,6 +41,18 @@ class ImageService extends Service {
       // ,
       // { toWaxSchema: true },
     );
+
+    createOverlay(
+      AltComponent,
+      {},
+      {
+        nodeType: 'image',
+        findInParent: false,
+        markType: '',
+        followCursor: false,
+        selection: false,
+      },
+    );
   }
 }