add lang(ru), add upload options

example/src/App.js

@@ -6,9 +6,16 @@ import 'react-ag-qeditor/dist/index.css'
 
 const App = () => {
     return <div style={{padding:40}}>
-        <QEditor value={'<span style="font-size: 20px;">asds</span>'} onChange={(value)=>{
-            console.log('sads', value);
-        }} />
+        <QEditor
+            value={'<span style="font-size: 20px;">asds</span>'}
+            onChange={(value)=>{
+                console.log('sads', value);
+            }}
+            uploadOptions={{
+                url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=UN8SUwWR8m5XUm9v8uDtew&expires=1652081782',
+                errorMessage: 'Загрузка временно невозможна'
+            }}
+        />
     </div>
 }
 

package.json

 {
     "name": "react-ag-qeditor",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "description": "WYSIWYG html editor",
     "author": "atma",
     "license": "MIT",

src/QEditor.jsx

@@ -91,7 +91,7 @@ export default class QEditor extends React.Component {
             <div className={'atma-editor-modal-action'}>
                 {
                     buttons.map((btn, i) => (
-                        <button type={'button'} key={'mAction' + i} className={'atma-editor-btn' + btn.className}
+                        <button disabled={ btn.disabled } type={'button'} key={'mAction' + i} className={'atma-editor-btn' + btn.className}
                                 onClick={btn.onClick}>{btn.title}</button>
                     ))
                 }
@@ -112,7 +112,7 @@ export default class QEditor extends React.Component {
                         <ul className={'atma-editor-soc-video'}>
                             <li className={'youtube'}/>
                             <li className={'vimeo'}/>
-                            <li className={'vk'}/>
+                            {/* <li className={'vk'}/> */}
                             <li className={'ok'}/>
                         </ul>
                     </Fragment>
@@ -123,7 +123,8 @@ export default class QEditor extends React.Component {
                         <Uploader
                             key={this.state.uploaderUid}
                             accept={'video/*'}
-                            action={'https://cdn.atmaguru.online/upload/?sid=test&md5=UN8SUwWR8m5XUm9v8uDtew&expires=1652081782'}
+                            action={ this.props.uploadOptions.url }
+                            errorMessage={ this.props.uploadOptions.errorMessage }
                             onSuccess={(file) => {
                                 let uploadedPaths = this.state.uploadedPaths;
 
@@ -140,7 +141,8 @@ export default class QEditor extends React.Component {
                         <Uploader
                             key={this.state.uploaderUid}
                             accept={'image/*'}
-                            action={'https://cdn.atmaguru.online/upload/?sid=test&md5=UN8SUwWR8m5XUm9v8uDtew&expires=1652081782'}
+                            action={ this.props.uploadOptions.url }
+                            errorMessage={ this.props.uploadOptions.errorMessage }
                             onSuccess={(file) => {
                                 let uploadedPaths = this.state.uploadedPaths;
 
@@ -194,7 +196,7 @@ export default class QEditor extends React.Component {
         return (
             <Fragment>
                 <div className="atma-editor-wrap" style={{maxWidth}}>
-                    <div className={'atma-editor'}>
+                    <div className={'atma-editor'} data-lang={ this.props.lang ? this.props.lang : 'ru' }>
                         <ReactQuill
                             ref={ref => this.quillRef = ref}
                             defaultValue={value}
@@ -230,7 +232,8 @@ export default class QEditor extends React.Component {
                             {
                                 title: 'Вставить',
                                 className: ' atma-editor-complete',
-                                onClick: () => this.quillInsert()
+                                onClick: () => this.quillInsert(),
+                                disabled: (this.props.uploadOptions.url === null && (innerModalType === 'videoLocal' || innerModalType === 'image'))
                             }
                         ])
                         }
@@ -245,5 +248,9 @@ QEditor.defaultProps = {
     maxWidth: 'auto',
     maxHeight: 1000,
     onChange: ()=>{},
-    lang: 'ru'
+    lang: 'ru',
+    uploadOptions: {
+        url: null,
+        errorMessage: null
+    }
 }

src/components/Uploader.js

@@ -69,6 +69,10 @@ export default class Uploader extends React.Component {
         return this.props.onSuccess;
     }
 
+    get errorMessage () {
+        return this.props.errorMessage;
+    }
+
     mediaItem(){
 
     }
@@ -76,6 +80,10 @@ export default class Uploader extends React.Component {
     render () {
         let {disabledFileUpload, isUpload, progress, dropFiles} = this.state;
 
+        if(this.action === null){
+           return <div style={{ textAlign: 'left' }}>{ this.errorMessage }</div>
+        }
+
         return (
             <Fragment>
                 <div className={'atma-editor-uploader-uitems'}>
@@ -159,5 +167,6 @@ Uploader.defaultProps = {
     multiple: false,
     accept: '*',
     type: '',
-    onSuccess: ()=>{}
+    onSuccess: ()=>{},
+    errorMessage: null,
 };

src/index.scss

@@ -6,7 +6,6 @@
 
         *{
             box-sizing: border-box;
-            color: #434A53;
         }
     }
 
@@ -181,12 +180,19 @@
         border: none;
         background: none;
         padding: 16px 24px;
+        line-height: 16px;
 
         &:hover{
             cursor: pointer;
             opacity: 0.7;
         }
 
+        &[disabled]{
+            opacity: 0.3 !important;
+            cursor: default !important;
+        }
+
+
         &.atma-editor-complete{
             background-color: #1790FF;
             border-radius: 24px;
@@ -234,6 +240,57 @@
             }
         }
     }
-}
 
 
+    //lang RU
+
+
+    &[data-lang="ru"]{
+        .ql-snow{
+            .ql-picker.ql-header .ql-picker-label,
+            .ql-picker.ql-header .ql-picker-item{
+                &::before{
+                    content: 'Обычный';
+                }
+
+                &[data-value="2"]::before{
+                    content: 'H2';
+                }
+                &[data-value="3"]::before{
+                    content: 'H3'
+                }
+                &[data-value="4"]::before{
+                    content: 'H4'
+                }
+            }
+
+
+            .ql-tooltip{
+                &::before{
+                    content: 'Ссылка';
+                }
+                &[data-mode=formula]::before{
+                    content: 'Вставка формулы:'
+                }
+                &[data-mode=link]::before{
+                    content: 'Вставка ссылки:'
+                }
+                a.ql-action::after{
+                    content: 'Изменить';
+                }
+                &.ql-editing a.ql-action::after{
+                    content: 'Сохранить';
+                }
+                a.ql-remove::before{
+                    content: 'Удалить';
+                }
+
+            }
+        }
+
+    }
+
+
+
+}
+