Skip to content

R
react-ag-qeditor
Commit f686998b by Sergey
Options

fix editor

parent f196a3f6
Showing with 49 additions and 47 deletions
example/src/App.js
...@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css' ...@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css'
const App = () => { const App = () => {
return <div style={{padding:40}}> return <div style={{padding:40}}>
<QEditor <QEditor
value={'<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio><p>Магма покрывает биотит. Деградация мерзлоты изменяет меандр, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Количество пирокластического материала в связи с преобладанием карьерной разработки ископаемых прекращает фирновый гетит. Синеклиза косвенно пододвигается под кряж, что лишь подтверждает то, что породные отвалы располагаются на склонах.</p>\n' + value={'<p>Магма покрывает биотит. Деградация мерзлоты изменяет меандр, в тоже время поднимаясь в пределах горстов до абсолютных высот 250 м. Количество пирокластического материала в связи с преобладанием карьерной разработки ископаемых прекращает фирновый гетит. Синеклиза косвенно пододвигается под кряж, что лишь подтверждает то, что породные отвалы располагаются на склонах.</p>\n' +
'<p>Можно ожидать, что мергель опускает флювиогляциальный ортоклаз. Колонны могут образоваться после того, как брекчия длительно прекращает флювиогляциальный батолит. Габбро слагает оз, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Кайнозой обеднен. Извержение спорадически ослабляет днепровский рифт. Оттаивание пород, из которого на 50% состоит руда месторождения, неоднозначно переоткладывает железистый биотит.</p>\n' + '<p>Можно ожидать, что мергель опускает флювиогляциальный ортоклаз. Колонны могут образоваться после того, как брекчия длительно прекращает флювиогляциальный батолит. Габбро слагает оз, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Кайнозой обеднен. Извержение спорадически ослабляет днепровский рифт. Оттаивание пород, из которого на 50% состоит руда месторождения, неоднозначно переоткладывает железистый биотит.</p>\n' +
'<p>Зандровое поле, особенно в верхах разреза, постоянно разогревает кристаллический грунт, что в конце концов приведет к полному разрушению хребта под действием собственного веса. Большое значение для формирования химического состава грунтовых и пластовых вод имеет выклинивание стягивает гидротермальный базальтовый слой. Сель, используя геологические данные нового типа, сдвигает днепровский блеск.</p><span class="math" data-content="c = \pm\sqrt{a^2 + b^2}"></span>'} '<p>Зандровое поле, особенно в верхах разреза, постоянно разогревает кристаллический грунт, что в конце концов приведет к полному разрушению хребта под действием собственного веса. Большое значение для формирования химического состава грунтовых и пластовых вод имеет выклинивание стягивает гидротермальный базальтовый слой. Сель, используя геологические данные нового типа, сдвигает днепровский блеск.</p><span class="math" data-content="c = \pm\sqrt{a^2 + b^2}"></span>'}
onChange={(value)=>{ onChange={(value)=>{
......
src/QEditor.jsx
...@@ -28,7 +28,6 @@ import DragAndDrop from "./extensions/DragAndDrop"; ...@@ -28,7 +28,6 @@ import DragAndDrop from "./extensions/DragAndDrop";
import { useReactMediaRecorder } from "react-media-recorder"; import { useReactMediaRecorder } from "react-media-recorder";
import axios from "axios"; import axios from "axios";
import ReactStopwatch from 'react-stopwatch'; import ReactStopwatch from 'react-stopwatch';
import VoiceMessage from "./extensions/VoiceMessage";
import Audio from "./extensions/Audio"; import Audio from "./extensions/Audio";
const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight']; const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
...@@ -366,7 +365,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -366,7 +365,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
DragAndDrop.configure({ DragAndDrop.configure({
linkUpload: uploadOptions.url linkUpload: uploadOptions.url
}), }),
VoiceMessage,
Audio Audio
], ],
content: value, content: value,
...@@ -447,12 +445,15 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -447,12 +445,15 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
data.append("file", file); data.append("file", file);
const headers = {'Content-Type': 'multipart/form-data'}; const headers = {'Content-Type': 'multipart/form-data'};
await axios.post(uploadOptions.url, data, {headers: headers}).then(response => {
if (response.data.state === "success") { return new Promise(function (resolve) {
setUploadedPaths(response.data) axios.post(uploadOptions.url, data, {headers: headers}).then(response => {
} if (response.data.state === "success") {
setIsUploading(false) resolve(response.data)
}); }
setIsUploading(false)
});
})
} }
}; };
...@@ -522,7 +523,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -522,7 +523,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
<div className={"webwrap-content"}> <div className={"webwrap-content"}>
{ {
mediaBlobUrl ? mediaBlobUrl ?
<video className={"webwrap-video"} id={"id-video"} src={mediaBlobUrl} autoPlay controls /> : status === "recording" && <video className={"webwrap-video"} id={"id-video"} src={mediaBlobUrl} controls /> : status === "recording" &&
<video className={"webwrap-video"} ref={videoRef} src={previewStream} autoPlay controls={false}/> <video className={"webwrap-video"} ref={videoRef} src={previewStream} autoPlay controls={false}/>
} }
{ {
...@@ -556,12 +557,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -556,12 +557,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
</div> </div>
} }
{ {
mediaBlobUrl &&
<div onClick={() => saveScreenCust(mediaBlobUrl)} className={"web-button-wrap"}>
<span className={"web-button-rerecord-text"}>Сохранить</span>
</div>
}
{
!mediaBlobUrl && !mediaBlobUrl &&
<div className={"web-button-spacer"}/> <div className={"web-button-spacer"}/>
} }
...@@ -582,7 +577,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -582,7 +577,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
<div className={"webwrap-content"}> <div className={"webwrap-content"}>
{ {
mediaBlobUrl ? mediaBlobUrl ?
<video className={"webwrap-video"} id={"id-video"} src={mediaBlobUrl} autoPlay controls /> : status === "recording" && <video className={"webwrap-video"} id={"id-video"} src={mediaBlobUrl} controls /> : status === "recording" &&
<video className={"webwrap-video"} ref={videoRef} src={previewStream} autoPlay controls={false}/> <video className={"webwrap-video"} ref={videoRef} src={previewStream} autoPlay controls={false}/>
} }
{ {
...@@ -756,26 +751,26 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -756,26 +751,26 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
title: 'Отмена', title: 'Отмена',
className: ' atma-editor-cancel', className: ' atma-editor-cancel',
onClick: () => { onClick: () => {
stopRecording();
unMuteAudio();
setUploaderUid(`uid${new Date()}`); setUploaderUid(`uid${new Date()}`);
setUploadedPaths([]); setUploadedPaths([]);
setModalIsOpen(false); setModalIsOpen(false);
clearBlobUrl()
} }
}, },
{ {
title: (mediaBlobUrl && uploadedPaths.length === 0) ? (isUploading ? 'Сохранение...' : 'Сохранить') : 'Вставить', title: (mediaBlobUrl && uploadedPaths.length === 0) ? (isUploading ? 'Сохранение...' : 'Сохранить') : 'Вставить',
className: ' atma-editor-complete', className: (status === 'recording' || isUploading) ? ' atma-editor-complete-block' : ' atma-editor-complete',
onClick: async () => { onClick: async () => {
if (mediaBlobUrl && uploadedPaths.length === 0){ if ((status === 'recording' || isUploading)) {
if (!isUploading) { return;
await saveScreenCust(mediaBlobUrl);
}
} else { } else {
if (document.querySelectorAll('.atma-editor-uploader-progress').length > 0) { if (document.querySelectorAll('.atma-editor-uploader-progress').length > 0) {
if ( ! confirm('Не полностью загруженные файлы будут утеряны. Вы уверены, что хотите продолжить?')) { if ( ! confirm('Не полностью загруженные файлы будут утеряны. Вы уверены, что хотите продолжить?')) {
return false; return false;
} }
} }
try { try {
switch (innerModalType) { switch (innerModalType) {
case 'image': case 'image':
...@@ -792,18 +787,36 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions ...@@ -792,18 +787,36 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
}); });
break break
case 'voicemessage': case 'voicemessage':
if (uploadedPaths?.file_path) { if (mediaBlobUrl && uploadedPaths.length === 0) {
editor.chain().focus().addVoiceMessage({ src: uploadedPaths.file_path }).run() if ( ! isUploading) {
await saveScreenCust(mediaBlobUrl).then(data => {
if (data?.file_path) {
editor.chain().focus().addVoiceMessage({src: data.file_path}).run();
}
});
}
} }
break break
case 'screencust': case 'screencust':
if (uploadedPaths?.file_path) { if (mediaBlobUrl && uploadedPaths.length === 0) {
editor.chain().focus().setVideo({src: uploadedPaths.file_path}).run(); if ( ! isUploading) {
await saveScreenCust(mediaBlobUrl).then(data => {
if (data?.file_path) {
editor.chain().focus().setVideo({src: data.file_path}).run();
}
});
}
} }
break break
case 'webcamera': case 'webcamera':
if (uploadedPaths?.file_path) { if (mediaBlobUrl && uploadedPaths.length === 0) {
editor.chain().focus().setVideo({src: uploadedPaths.file_path}).run(); if ( ! isUploading) {
await saveScreenCust(mediaBlobUrl).then(data => {
if (data?.file_path) {
editor.chain().focus().setVideo({src: data.file_path}).run();
}
});
}
} }
break break
case 'iframe': case 'iframe':
......
src/extensions/Audio.js
...@@ -2,7 +2,6 @@ import { Node, mergeAttributes } from '@tiptap/core' ...@@ -2,7 +2,6 @@ import { Node, mergeAttributes } from '@tiptap/core'
const Audio = Node.create({ const Audio = Node.create({
name: "audio", name: "audio",
inline: true, inline: true,
atom: true, atom: true,
group: "inline", group: "inline",
......
src/extensions/VoiceMessage.js deleted 100644 → 0
import React from 'react';
import { mergeAttributes, Node } from "@tiptap/core";
const VoiceMessage = Node.create({
addCommands() {
return {
setVoiceMessage: (options) => ({ chain }) => {
console.log(options)
return chain()
.insertContent('<h1>' + options.src + '</h1>')
.run()
},
}
}
});
export default VoiceMessage;
src/index.scss
...@@ -724,6 +724,13 @@ body{ ...@@ -724,6 +724,13 @@ body{
background-color: #1790FF; background-color: #1790FF;
border-radius: 24px; border-radius: 24px;
color: #ffffff; color: #ffffff;
&-block {
border-radius: 24px;
background-color: #AAB2BD;
cursor: not-allowed;
color: #ffffff;
}
} }
&.atma-editor-cancel{ &.atma-editor-cancel{
......
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