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'
const App = () => {
return <div style={{padding:40}}>
<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>Зандровое поле, особенно в верхах разреза, постоянно разогревает кристаллический грунт, что в конце концов приведет к полному разрушению хребта под действием собственного веса. Большое значение для формирования химического состава грунтовых и пластовых вод имеет выклинивание стягивает гидротермальный базальтовый слой. Сель, используя геологические данные нового типа, сдвигает днепровский блеск.</p><span class="math" data-content="c = \pm\sqrt{a^2 + b^2}"></span>'}
onChange={(value)=>{
......
src/QEditor.jsx
......@@ -28,7 +28,6 @@ import DragAndDrop from "./extensions/DragAndDrop";
import { useReactMediaRecorder } from "react-media-recorder";
import axios from "axios";
import ReactStopwatch from 'react-stopwatch';
import VoiceMessage from "./extensions/VoiceMessage";
import Audio from "./extensions/Audio";
const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
......@@ -366,7 +365,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
DragAndDrop.configure({
linkUpload: uploadOptions.url
}),
VoiceMessage,
Audio
],
content: value,
......@@ -447,12 +445,15 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
data.append("file", file);
const headers = {'Content-Type': 'multipart/form-data'};
await axios.post(uploadOptions.url, data, {headers: headers}).then(response => {
if (response.data.state === "success") {
setUploadedPaths(response.data)
}
setIsUploading(false)
});
return new Promise(function (resolve) {
axios.post(uploadOptions.url, data, {headers: headers}).then(response => {
if (response.data.state === "success") {
resolve(response.data)
}
setIsUploading(false)
});
})
}
};
......@@ -522,7 +523,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
<div className={"webwrap-content"}>
{
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}/>
}
{
......@@ -556,12 +557,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
</div>
}
{
mediaBlobUrl &&
<div onClick={() => saveScreenCust(mediaBlobUrl)} className={"web-button-wrap"}>
<span className={"web-button-rerecord-text"}>Сохранить</span>
</div>
}
{
!mediaBlobUrl &&
<div className={"web-button-spacer"}/>
}
......@@ -582,7 +577,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
<div className={"webwrap-content"}>
{
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}/>
}
{
......@@ -756,26 +751,26 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
title: 'Отмена',
className: ' atma-editor-cancel',
onClick: () => {
stopRecording();
unMuteAudio();
setUploaderUid(`uid${new Date()}`);
setUploadedPaths([]);
setModalIsOpen(false);
clearBlobUrl()
}
},
{
title: (mediaBlobUrl && uploadedPaths.length === 0) ? (isUploading ? 'Сохранение...' : 'Сохранить') : 'Вставить',
className: ' atma-editor-complete',
className: (status === 'recording' || isUploading) ? ' atma-editor-complete-block' : ' atma-editor-complete',
onClick: async () => {
if (mediaBlobUrl && uploadedPaths.length === 0){
if (!isUploading) {
await saveScreenCust(mediaBlobUrl);
}
if ((status === 'recording' || isUploading)) {
return;
} else {
if (document.querySelectorAll('.atma-editor-uploader-progress').length > 0) {
if ( ! confirm('Не полностью загруженные файлы будут утеряны. Вы уверены, что хотите продолжить?')) {
return false;
}
}
try {
switch (innerModalType) {
case 'image':
......@@ -792,18 +787,36 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions, toolsOptions
});
break
case 'voicemessage':
if (uploadedPaths?.file_path) {
editor.chain().focus().addVoiceMessage({ src: uploadedPaths.file_path }).run()
if (mediaBlobUrl && uploadedPaths.length === 0) {
if ( ! isUploading) {
await saveScreenCust(mediaBlobUrl).then(data => {
if (data?.file_path) {
editor.chain().focus().addVoiceMessage({src: data.file_path}).run();
}
});
}
}
break
case 'screencust':
if (uploadedPaths?.file_path) {
editor.chain().focus().setVideo({src: uploadedPaths.file_path}).run();
if (mediaBlobUrl && uploadedPaths.length === 0) {
if ( ! isUploading) {
await saveScreenCust(mediaBlobUrl).then(data => {
if (data?.file_path) {
editor.chain().focus().setVideo({src: data.file_path}).run();
}
});
}
}
break
case 'webcamera':
if (uploadedPaths?.file_path) {
editor.chain().focus().setVideo({src: uploadedPaths.file_path}).run();
if (mediaBlobUrl && uploadedPaths.length === 0) {
if ( ! isUploading) {
await saveScreenCust(mediaBlobUrl).then(data => {
if (data?.file_path) {
editor.chain().focus().setVideo({src: data.file_path}).run();
}
});
}
}
break
case 'iframe':
......
src/extensions/Audio.js
......@@ -2,7 +2,6 @@ import { Node, mergeAttributes } from '@tiptap/core'
const Audio = Node.create({
name: "audio",
inline: true,
atom: true,
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{
background-color: #1790FF;
border-radius: 24px;
color: #ffffff;
&-block {
border-radius: 24px;
background-color: #AAB2BD;
cursor: not-allowed;
color: #ffffff;
}
}
&.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