Skip to content

R
react-ag-qeditor
Commit d03ceb34 by Sergey
Options

add drag && drop

parent 8cd76da4
Showing with 155 additions and 15 deletions
example/package-lock.json
...@@ -18,8 +18,30 @@ ...@@ -18,8 +18,30 @@
} }
}, },
"..": { "..": {
"version": "1.0.0", "version": "1.0.17",
"license": "MIT", "license": "MIT",
"dependencies": {
"@tiptap/core": "^2.0.0-beta.176",
"@tiptap/extension-color": "^2.0.0-beta.9",
"@tiptap/extension-focus": "^2.0.0-beta.43",
"@tiptap/extension-highlight": "^2.0.0-beta.33",
"@tiptap/extension-image": "^2.0.0-beta.27",
"@tiptap/extension-link": "^2.0.0-beta.38",
"@tiptap/extension-table": "^2.0.0-beta.49",
"@tiptap/extension-table-cell": "^2.0.0-beta.20",
"@tiptap/extension-table-header": "^2.0.0-beta.22",
"@tiptap/extension-table-row": "^2.0.0-beta.19",
"@tiptap/extension-text-align": "^2.0.0-beta.29",
"@tiptap/extension-text-style": "^2.0.0-beta.23",
"@tiptap/extension-underline": "^2.0.0-beta.23",
"@tiptap/react": "^2.0.0-beta.109",
"@tiptap/starter-kit": "^2.0.0-beta.185",
"katex": "^0.15.3",
"prosemirror-state": "^1.4.1",
"rc-upload": "^4.3.3",
"react": "^17.0.2",
"sass": "^1.49.9"
},
"devDependencies": { "devDependencies": {
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
...@@ -37,15 +59,15 @@ ...@@ -37,15 +59,15 @@
"microbundle-crl": "^0.13.10", "microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prettier": "^2.0.4", "prettier": "^2.0.4",
"react": "^16.13.1", "react": "^17.0.2",
"react-dom": "^16.13.1", "react-dom": "^17.0.2",
"react-scripts": "^3.4.1" "react-scripts": "^3.4.1"
}, },
"engines": { "engines": {
"node": ">=10" "node": ">=10"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.0.0" "react": "^17.0.2"
} }
}, },
"../node_modules/react": { "../node_modules/react": {
...@@ -1300,6 +1322,21 @@ ...@@ -1300,6 +1322,21 @@
"react-ag-qeditor": { "react-ag-qeditor": {
"version": "file:..", "version": "file:..",
"requires": { "requires": {
"@tiptap/core": "^2.0.0-beta.176",
"@tiptap/extension-color": "^2.0.0-beta.9",
"@tiptap/extension-focus": "^2.0.0-beta.43",
"@tiptap/extension-highlight": "^2.0.0-beta.33",
"@tiptap/extension-image": "^2.0.0-beta.27",
"@tiptap/extension-link": "^2.0.0-beta.38",
"@tiptap/extension-table": "^2.0.0-beta.49",
"@tiptap/extension-table-cell": "^2.0.0-beta.20",
"@tiptap/extension-table-header": "^2.0.0-beta.22",
"@tiptap/extension-table-row": "^2.0.0-beta.19",
"@tiptap/extension-text-align": "^2.0.0-beta.29",
"@tiptap/extension-text-style": "^2.0.0-beta.23",
"@tiptap/extension-underline": "^2.0.0-beta.23",
"@tiptap/react": "^2.0.0-beta.109",
"@tiptap/starter-kit": "^2.0.0-beta.185",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"eslint": "^6.8.0", "eslint": "^6.8.0",
...@@ -1313,12 +1350,16 @@ ...@@ -1313,12 +1350,16 @@
"eslint-plugin-react": "^7.17.0", "eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1", "eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0", "gh-pages": "^2.2.0",
"katex": "^0.15.3",
"microbundle-crl": "^0.13.10", "microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prettier": "^2.0.4", "prettier": "^2.0.4",
"react": "^16.13.1", "prosemirror-state": "^1.4.1",
"react-dom": "^16.13.1", "rc-upload": "^4.3.3",
"react-scripts": "^3.4.1" "react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^3.4.1",
"sass": "^1.49.9"
}, },
"dependencies": { "dependencies": {
"react": { "react": {
...@@ -1380,10 +1421,8 @@ ...@@ -1380,10 +1421,8 @@
"postcss-normalize": "8.0.1", "postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0", "postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.6", "react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.1", "react-dev-utils": "^10.2.1",
"react-dom": "^16.12.0",
"resolve": "1.15.0", "resolve": "1.15.0",
"resolve-url-loader": "3.1.2", "resolve-url-loader": "3.1.2",
"sass-loader": "8.0.2", "sass-loader": "8.0.2",
...@@ -1451,10 +1490,8 @@ ...@@ -1451,10 +1490,8 @@
"postcss-normalize": "8.0.1", "postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0", "postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"react": "^16.12.0",
"react-app-polyfill": "^1.0.6", "react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.1", "react-dev-utils": "^10.2.1",
"react-dom": "^16.12.0",
"resolve": "1.15.0", "resolve": "1.15.0",
"resolve-url-loader": "3.1.2", "resolve-url-loader": "3.1.2",
"sass-loader": "8.0.2", "sass-loader": "8.0.2",
......
example/src/App.js
...@@ -21,9 +21,6 @@ const App = () => { ...@@ -21,9 +21,6 @@ const App = () => {
maxWidth: '830px', maxWidth: '830px',
margin: '20px 20px 20px 100px', margin: '20px 20px 20px 100px',
}} }}
toolsOptions={{
type: 'text'
}}
/> />
</div> </div>
} }
......
package.json
...@@ -69,7 +69,11 @@ ...@@ -69,7 +69,11 @@
"@tiptap/extension-underline": "^2.0.0-beta.23", "@tiptap/extension-underline": "^2.0.0-beta.23",
"@tiptap/react": "^2.0.0-beta.109", "@tiptap/react": "^2.0.0-beta.109",
"@tiptap/starter-kit": "^2.0.0-beta.185", "@tiptap/starter-kit": "^2.0.0-beta.185",
"axios": "^0.27.2",
"base-64": "^1.0.0",
"katex": "^0.15.3", "katex": "^0.15.3",
"md5": "^2.3.0",
"prosemirror-state": "^1.4.1",
"rc-upload": "^4.3.3", "rc-upload": "^4.3.3",
"react": "^17.0.2", "react": "^17.0.2",
"sass": "^1.49.9" "sass": "^1.49.9"
......
src/QEditor.jsx
...@@ -25,6 +25,7 @@ import Video from './extensions/Video' ...@@ -25,6 +25,7 @@ import Video from './extensions/Video'
import Iframe from './extensions/Iframe' import Iframe from './extensions/Iframe'
import CustomLink from './extensions/CustomLink' import CustomLink from './extensions/CustomLink'
//import Formula from './extensions/Formula' //import Formula from './extensions/Formula'
import DragAndDrop from "./extensions/DragAndDrop";
const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight']; const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
...@@ -322,7 +323,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -322,7 +323,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
Focus.configure({ Focus.configure({
className: 'atma-editor-focused', className: 'atma-editor-focused',
mode: "all" mode: "all"
}) }),
DragAndDrop
], ],
content: value, content: value,
onUpdate: ({editor}) => onChange(editor.getHTML()), onUpdate: ({editor}) => onChange(editor.getHTML()),
......
src/extensions/DragAndDrop.js 0 → 100644
import { Extension } from "@tiptap/core";
import { Plugin, PluginKey } from 'prosemirror-state'
import axios from 'axios'
import fs from 'fs'
function dataURItoBlob(dataURI) {
let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // тип пантомимы
let byteString = atob(dataURI.split(',')[1]); // декодирование base64
let arrayBuffer = new ArrayBuffer(byteString.length); // Создаем буферный массив
let intArray = new Uint8Array(arrayBuffer); // Создаем представление
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {type: mimeString});
}
const upload = async (file) => {
let formData = new FormData();
formData.append('file', file);
const headers = {'Content-Type': 'multipart/form-data'};
const response = await axios.post("https://cdn.atmaguru.online/upload/?sid=test&md5=RfC4jdfFN05c9ZAc0bZqBg&expires=1694259932", formData, {headers: headers} );
return response.data.file_path;
};
const DragAndDrop = Extension.create({
name: 'drop',
addProseMirrorPlugins() {
return [
new Plugin({
key: new PluginKey('drop'),
props: {
handleDOMEvents: {
async paste (view, event) {
let items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (let i = 0; i < items.length; i++){
const { schema } = view.state;
const image = items[i].getAsFile();
if (!image) {
return
}
event.preventDefault();
const imageSrc = await upload(image);
const node = schema.nodes.image.create({
src: imageSrc,
});
const transaction = view.state.tr.replaceSelectionWith(node);
view.dispatch(transaction)
}
},
async drop (view, event) {
const hasFiles = event.dataTransfer.files.length > 0;
// Другой способ достать текст
// console.log(event.dataTransfer.items[0].getAsString( (i) => {
// console.log(i)
// }));
// console.log(hasFiles)
if (!hasFiles) {
const {schema} = view.state;
const coordinates = view.posAtCoords({left: event.clientX, top: event.clientY});
const transaction = view.state.tr.insert(coordinates.pos, schema.text(
event.dataTransfer.getData("text/plain")
));
view.dispatch(transaction)
return
}
event.preventDefault();
const images = event.dataTransfer.files;
const {schema} = view.state;
const coordinates = view.posAtCoords({left: event.clientX, top: event.clientY});
for (let i = 0; i < images.length; i++) {
const imageSrc = await upload(images[i]);
if (imageSrc) {
const node = schema.nodes.image.create({
src: imageSrc
});
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction)
}
}
}
}
}
})
]
}
});
export default DragAndDrop;
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
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