Skip to content

R
react-ag-qeditor
Commit fb9086ec by yakoff94
Options

fix image

parent a9e204b6
Showing with 78 additions and 70 deletions
example/src/App.js
......@@ -6,14 +6,9 @@ import 'react-ag-qeditor/dist/index.css'
const App = () => {
return <div style={{padding:40}}>
<QEditor
value={`<p>There are two images below. One with alt text, and one without.</p>
<!-- <img-->
<!-- src="https://cdn.atmaguru.online/2/brs/b/7/b7NtdzpNVws1TbKxzIaZeIUjqT9Bz6NAnloaLJ0tDJMraK4T92XdJOPW3Aci69ko.jpg"-->
<!-- alt="Sandy hills with a foggy background"-->
<!-- />-->
<p></p>
<p></p>
<img src="https://cdn.atmaguru.online/2/atmacompany/L/u/Luzfq2rOeEruKLfLGNDDCWJcjh0y2zYimU7semFd3ZgW7uxA14DGwPf9jP5pH0yQ.png" /><p></p><p></p>`}
value={`
<p>There are two images below. One with alt text, and one without.</p><p></p><p></p><p style="text-align: center"><img src="https://cdn.atmaguru.online/2/atmacompany/L/u/Luzfq2rOeEruKLfLGNDDCWJcjh0y2zYimU7semFd3ZgW7uxA14DGwPf9jP5pH0yQ.png" width="461"></p><p></p><p></p><p>ромывроапывроаыв</p><p></p>
`}
onChange={(value)=>{
console.log(value);
}}
......
src/QEditor.jsx
......@@ -305,8 +305,8 @@ const QEditor = ({
//так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
setTimeout(()=>{
editor.commands.setTextAlign('left');
editor.chain().focus().run()
// editor.commands.setTextAlign('left');
// editor.chain().focus().run()
},150)
}
},
......@@ -314,11 +314,11 @@ const QEditor = ({
title: 'По центру',
onClick: () => {
editor.commands.setTextAlign('center');
editor.commands.paragraph({ textAlign: 'left' })
// editor.chain().focus().run();
//так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
setTimeout(()=>{
editor.commands.setTextAlign('center');
editor.chain().focus().run()
// editor.commands.setTextAlign('center');
// editor.chain().focus().run()
},150)
}
},
......@@ -329,8 +329,8 @@ const QEditor = ({
//так надо, даже не вникай, фикс бага в хроме при выравнивании картинки
setTimeout(()=>{
editor.commands.setTextAlign('right');
editor.chain().focus().run()
// editor.commands.setTextAlign('right');
// editor.chain().focus().run()
},150)
}
},
......@@ -429,7 +429,6 @@ const QEditor = ({
extensions: [
StarterKit,
Underline,
CustomImage,
// Link.configure({
// autolink: true,
......
src/extensions/Image.js
......@@ -6,7 +6,6 @@ import '../Image.css'
import { mergeAttributes } from "@tiptap/core";
export default Image.extend({
options: {inline: true},
addAttributes() {
return {
alt: {
......@@ -30,6 +29,7 @@ export default Image.extend({
},
addOptions () {
return {
inline: true,
types: ["image"],
handlerStyle: {
width: "8px",
......@@ -47,52 +47,19 @@ export default Image.extend({
};
},
onCreate (data) {
let editor = data.editor,
node = data.node;
const element = editor.options.element;
element.style.position = "relative";
// resizeLayer
// console.log('onCreate', data);
const resizeLayer = document.createElement("div");
resizeLayer.className = "resize-layer";
resizeLayer.id = "resize-layer";
resizeLayer.style.display = "none";
resizeLayer.style.position = "absolute";
Object.entries(this.options.layerStyle).forEach(([key, value]) => {
resizeLayer.style[key] = value;
});
const handlers = ["top-left", "top-right", "bottom-left", "bottom-right"];
const fragment = document.createDocumentFragment();
for (let name of handlers) {
const item = document.createElement("div");
item.className = `handler ${name}`;
item.style.position = "absolute";
Object.entries(this.options.handlerStyle).forEach(([key, value]) => {
item.style[key] = value;
});
const dir = name.split("-");
item.style[dir[0]] = parseInt(item.style.width) / -2 + "px";
item.style[dir[1]] = parseInt(item.style.height) / -2 + "px";
if (name === "bottom-left") item.style.cursor = "sw-resize";
if (name === "bottom-right") item.style.cursor = "se-resize";
fragment.appendChild(item);
}
resizeLayer.appendChild(fragment);
editor.resizeLayer = resizeLayer;
element.appendChild(resizeLayer);
create(data, this.options, this.storage);
},
onUpdate({editor, transaction}) {
// console.log('update');
selectionUpdate({editor, transaction}, this.options, this.storage)
onUpdate(data) {
// create(data, this.options, this.storage);
setTimeout(()=>{
selectionUpdate(data, this.options, this.storage)
},100)
},
onSelectionUpdate ({editor, transaction}) {
selectionUpdate({editor, transaction}, this.options, this.storage)
onSelectionUpdate (data) {
setTimeout(()=>{
selectionUpdate(data, this.options, this.storage)
},100)
},
})
......@@ -111,6 +78,15 @@ function ImageNode (props) {
const newAlt = prompt('Введите Alt:', alt || '')
updateAttributes({ alt: newAlt })
}
const onEditWidth = (width) => {
console.log('edit width');
try {
props.editor.commands.updateAttributes({ width: width });
updateAttributes({ width: width })
} catch (e) {
console.log(e);
}
}
let resizeLayer = document.getElementById('resize-layer');
if (resizeLayer) {
......@@ -137,6 +113,7 @@ function ImageNode (props) {
resizeElement.style.width = clientWidth + "px"; // max width
last_width = clientWidth;
const pos = getRelativePosition(resizeElement, element);
// console.log(pos);
resizeLayer.style.top = pos.top + "px";
......@@ -146,11 +123,11 @@ function ImageNode (props) {
startX = e.screenX;
onEditWidth(last_width);
};
document.addEventListener("mousemove", mousemoveHandle);
document.addEventListener("mouseup", (e) => {
updateAttributes({ width: last_width});
document.removeEventListener("mousemove", mousemoveHandle)
});
}
......@@ -159,7 +136,7 @@ function ImageNode (props) {
if (resizeLayer.getAttribute('listener') !== 'true') {
resizeLayer.setAttribute('listener', true);
resizeLayer.setAttribute('listener', 'true');
resizeLayer.addEventListener("mousedown", handler);
}
}
......@@ -168,25 +145,24 @@ function ImageNode (props) {
return (
<NodeViewWrapper className={className} data-drag-handle>
<img src={src} width={width} alt={alt}/>
{
props.selected &&
<span className="alt-text-indicator" style={{zIndex: '999'}}>
{alt ?
<span className="symbol symbol-positive">✔</span> :
<span className="symbol symbol-negative">!</span>
}
{alt ?
<span className="text">Alt: "{alt}".</span> :
<span className="text">Alt текст не найден.</span>
}
<button className="edit" type="button" onClick={onEditAlt}>
Изменить
</button>
<button className="edit" type="button" onClick={onEditAlt}>Alt</button>
</span>
}
</NodeViewWrapper>
)
}
function selectionUpdate({editor, transaction}, options, storage)
function selectionUpdate(data, options, storage)
{
let editor = data.editor,
transaction = data.transaction;
const element = editor.options.element;
const node = transaction.curSelection.node;
const resizeLayer = editor.resizeLayer;
......@@ -219,3 +195,41 @@ function getRelativePosition (element, ancestor) {
};
return relativePosition;
}
function create(data, options, storage) {
let editor = data.editor,
node = data.node;
const element = editor.options.element;
element.style.position = "relative";
// resizeLayer
// console.log('onCreate', data);
const resizeLayer = document.createElement("div");
resizeLayer.className = "resize-layer";
resizeLayer.id = "resize-layer";
resizeLayer.style.display = "none";
resizeLayer.style.position = "absolute";
Object.entries(options.layerStyle).forEach(([key, value]) => {
resizeLayer.style[key] = value;
});
const handlers = ["top-left", "top-right", "bottom-left", "bottom-right"];
const fragment = document.createDocumentFragment();
for (let name of handlers) {
const item = document.createElement("div");
item.className = `handler ${name}`;
item.style.position = "absolute";
Object.entries(options.handlerStyle).forEach(([key, value]) => {
item.style[key] = value;
});
const dir = name.split("-");
item.style[dir[0]] = parseInt(item.style.width) / -2 + "px";
item.style[dir[1]] = parseInt(item.style.height) / -2 + "px";
if (name === "bottom-left") item.style.cursor = "sw-resize";
if (name === "bottom-right") item.style.cursor = "se-resize";
fragment.appendChild(item);
}
resizeLayer.appendChild(fragment);
editor.resizeLayer = resizeLayer;
element.appendChild(resizeLayer);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment