From 1339f5f5ef8a606f6de170e7784762da5aac8c4a Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 12 Sep 2022 19:24:22 +0300
Subject: [PATCH] add alt overlay in service
---
.../src/ImageService/AltComponent.js | 29 +++++++++++++++++++
.../src/ImageService/ImageService.js | 14 +++++++++
2 files changed, 43 insertions(+)
create mode 100644 wax-prosemirror-services/src/ImageService/AltComponent.js
diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js
new file mode 100644
index 000000000..084fca136
--- /dev/null
+++ b/wax-prosemirror-services/src/ImageService/AltComponent.js
@@ -0,0 +1,29 @@
+/* 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" />;
+ }
+};
diff --git a/wax-prosemirror-services/src/ImageService/ImageService.js b/wax-prosemirror-services/src/ImageService/ImageService.js
index d45d2074a..bb0b6cd5f 100644
--- a/wax-prosemirror-services/src/ImageService/ImageService.js
+++ b/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,
+ },
+ );
}
}
--
GitLab