Skip to content

R
react-ag-qeditor
Commit 1eb73454 by Sergey
Options

tiptap dragdrop

parent 8cd76da4
Showing with 165 additions and 17 deletions
example/package-lock.json
...@@ -18,8 +18,29 @@ ...@@ -18,8 +18,29 @@
} }
}, },
"..": { "..": {
"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",
"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 +58,15 @@ ...@@ -37,15 +58,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 +1321,21 @@ ...@@ -1300,6 +1321,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 +1349,15 @@ ...@@ -1313,12 +1349,15 @@
"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", "rc-upload": "^4.3.3",
"react-dom": "^16.13.1", "react": "^17.0.2",
"react-scripts": "^3.4.1" "react-dom": "^17.0.2",
"react-scripts": "^3.4.1",
"sass": "^1.49.9"
}, },
"dependencies": { "dependencies": {
"react": { "react": {
...@@ -1380,10 +1419,8 @@ ...@@ -1380,10 +1419,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 +1488,8 @@ ...@@ -1451,10 +1488,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,9 @@ ...@@ -69,7 +69,9 @@
"@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",
"katex": "^0.15.3", "katex": "^0.15.3",
"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
...@@ -24,6 +24,7 @@ import Uploader from "./components/Uploader" ...@@ -24,6 +24,7 @@ import Uploader from "./components/Uploader"
import Video from './extensions/Video' 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 DragAndDrop from "./extensions/DragAndDrop";
//import Formula from './extensions/Formula' //import Formula from './extensions/Formula'
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'
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
...@@ -2805,6 +2805,14 @@ aws4@^1.8.0: ...@@ -2805,6 +2805,14 @@ aws4@^1.8.0:
resolved "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz" resolved "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz"
integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
axios@^0.27.2:
version "0.27.2"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
dependencies:
follow-redirects "^1.14.9"
form-data "^4.0.0"
axobject-query@^2.0.2: axobject-query@^2.0.2:
version "2.2.0" version "2.2.0"
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz" resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
...@@ -3673,7 +3681,7 @@ color@^3.0.0: ...@@ -3673,7 +3681,7 @@ color@^3.0.0:
color-convert "^1.9.3" color-convert "^1.9.3"
color-string "^1.6.0" color-string "^1.6.0"
combined-stream@^1.0.6, combined-stream@~1.0.6: combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
version "1.0.8" version "1.0.8"
resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz" resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
...@@ -5545,7 +5553,7 @@ flush-write-stream@^1.0.0: ...@@ -5545,7 +5553,7 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3" inherits "^2.0.3"
readable-stream "^2.3.6" readable-stream "^2.3.6"
follow-redirects@^1.0.0: follow-redirects@^1.0.0, follow-redirects@^1.14.9:
version "1.15.1" version "1.15.1"
resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz" resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz"
integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA== integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
...@@ -5593,6 +5601,15 @@ fork-ts-checker-webpack-plugin@3.1.1: ...@@ -5593,6 +5601,15 @@ fork-ts-checker-webpack-plugin@3.1.1:
tapable "^1.0.0" tapable "^1.0.0"
worker-rpc "^0.1.0" worker-rpc "^0.1.0"
form-data@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"
form-data@~2.3.2: form-data@~2.3.2:
version "2.3.3" version "2.3.3"
resolved "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz" resolved "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz"
...@@ -9808,6 +9825,14 @@ prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, pr ...@@ -9808,6 +9825,14 @@ prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, pr
prosemirror-model "^1.0.0" prosemirror-model "^1.0.0"
prosemirror-transform "^1.0.0" prosemirror-transform "^1.0.0"
prosemirror-state@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.1.tgz#f6e26c7b6a7e11206176689eb6ebbf91870953e1"
integrity sha512-U/LBDW2gNmVa07sz/D229XigSdDQ5CLFwVB1Vb32MJbAHHhWe/6pOc721faI17tqw4pZ49i1xfY/jEZ9tbIhPg==
dependencies:
prosemirror-model "^1.0.0"
prosemirror-transform "^1.0.0"
prosemirror-tables@^1.1.1: prosemirror-tables@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz" resolved "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz"
......
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