Merge remote-tracking branch 'origin/tiptap' into tiptap

# Conflicts:
#	src/QEditor.jsx
#	src/components/ToolBar.js
#	src/index.scss

docker-compose.yml

+version: '3'
+services:
+  app:
+    build:
+      context: .
+      dockerfile: ./docker/DockerFile
+    volumes:
+      - ./src:/app/src
+      - ./package.json:/app/package.json
+      - ./yarn.lock:/app/yarn.lock
+    environment:
+      NODE_OPTIONS: "--openssl-legacy-provider"
+    command: "npm run start:both"
+    ports:
+      - "3000:3000"
\ No newline at end of file

docker/DockerFile

+FROM node:18.12.1-alpine
+
+WORKDIR /app
+
+COPY package.json ./
+COPY yarn.lock ./
+RUN yarn install
+
+COPY . .
+
+RUN cd example && npm install
+
+# CMD [ "npm", "run", "start:both" ]
\ No newline at end of file

example/package-lock.json

@@ -18,7 +18,8 @@
       }
     },
     "..": {
-      "version": "1.0.17",
+      "name": "react-ag-qeditor",
+      "version": "1.0.23",
       "license": "MIT",
       "dependencies": {
         "@tiptap/core": "^2.0.0-beta.176",
@@ -27,6 +28,8 @@
         "@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-subscript": "^2.1.11",
+        "@tiptap/extension-superscript": "^2.1.11",
         "@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",
@@ -36,13 +39,20 @@
         "@tiptap/extension-underline": "^2.0.0-beta.23",
         "@tiptap/react": "^2.0.0-beta.109",
         "@tiptap/starter-kit": "^2.0.0-beta.185",
+        "axios": "^0.27.2",
         "katex": "^0.15.3",
+        "prosemirror-state": "1.4.0",
         "rc-upload": "^4.3.3",
         "react": "^17.0.2",
+        "react-device-detect": "^2.2.3",
+        "react-media-recorder": "^1.6.6",
+        "react-stopwatch": "^2.0.4",
+        "react-webcam": "^7.0.1",
         "sass": "^1.49.9"
       },
       "devDependencies": {
         "babel-eslint": "^10.0.3",
+        "concurrently": "^8.2.1",
         "cross-env": "^7.0.2",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.7.0",
@@ -1327,6 +1337,8 @@
         "@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-subscript": "^2.1.11",
+        "@tiptap/extension-superscript": "^2.1.11",
         "@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",
@@ -1336,7 +1348,9 @@
         "@tiptap/extension-underline": "^2.0.0-beta.23",
         "@tiptap/react": "^2.0.0-beta.109",
         "@tiptap/starter-kit": "^2.0.0-beta.185",
+        "axios": "^0.27.2",
         "babel-eslint": "^10.0.3",
+        "concurrently": "^8.2.1",
         "cross-env": "^7.0.2",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.7.0",
@@ -1353,10 +1367,15 @@
         "microbundle-crl": "^0.13.10",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.0.4",
+        "prosemirror-state": "1.4.0",
         "rc-upload": "^4.3.3",
         "react": "^17.0.2",
+        "react-device-detect": "^2.2.3",
         "react-dom": "^17.0.2",
+        "react-media-recorder": "^1.6.6",
         "react-scripts": "^3.4.1",
+        "react-stopwatch": "^2.0.4",
+        "react-webcam": "^7.0.1",
         "sass": "^1.49.9"
       },
       "dependencies": {

example/src/App.js

-import React, { useEffect } from 'react'
+import React from 'react'
 
 import QEditor from 'react-ag-qeditor'
 import 'react-ag-qeditor/dist/index.css'
 
-
 const App = () => {
     return <div style={{padding:40}}>
         <QEditor

package.json

@@ -24,13 +24,15 @@
         "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
         "test:watch": "react-scripts test --env=jsdom",
         "predeploy": "cd example && npm install && npm run build",
-        "deploy": "gh-pages -d example/build"
+        "deploy": "gh-pages -d example/build",
+        "start:both": "concurrently \"npm start\" \"cd example && npm start\""
     },
     "peerDependencies": {
         "react": "^17.0.2"
     },
     "devDependencies": {
         "babel-eslint": "^10.0.3",
+        "concurrently": "^8.2.1",
         "cross-env": "^7.0.2",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.7.0",
@@ -60,6 +62,8 @@
         "@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-subscript": "^2.1.11",
+        "@tiptap/extension-superscript": "^2.1.11",
         "@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",

src/QEditor.jsx

@@ -17,6 +17,8 @@ import TextAlign from '@tiptap/extension-text-align';
 import { Color } from '@tiptap/extension-color';
 import Highlight from '@tiptap/extension-highlight';
 import TextStyle from '@tiptap/extension-text-style';
+import Superscript from "@tiptap/extension-superscript";
+import Subscript from "@tiptap/extension-subscript";
 
 import ToolBar from "./components/ToolBar"
 import EditorModal from "./components/EditorModal"
@@ -32,7 +34,7 @@ import Audio from "./extensions/Audio";
 
 import { isMobile } from 'react-device-detect';
 
-const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
+const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', 'superscript', 'subscript', '|', 'colorText', 'highlight'];
 
 const QEditor = ({
     value,
@@ -168,6 +170,10 @@ const QEditor = ({
             title: 'Вставить презентацию pptx',
             onClick: () => modalOpener('iframe_pptx', 'Вставить презентацию pptx')
         },
+        audio: {
+            title: 'Вставить аудио файл',
+            onClick: () => modalOpener('audio', 'Вставить аудио файл')
+        },
         iframe_pdf: {
             title: 'Вставить презентацию pdf',
             onClick: () => modalOpener('iframe_pdf', 'Вставить презентацию pdf')
@@ -208,6 +214,14 @@ const QEditor = ({
             title: 'Зачеркнутый',
             onClick: () => editor.chain().focus().toggleStrike().run()
         },
+        superscript: {
+            title: 'Надстрочный символ',
+            onClick: () => editor.chain().focus().toggleSuperscript().run()
+        },
+        subscript: {
+            title: 'Подстрочный символ',
+            onClick: () => editor.chain().focus().toggleSubscript().run()
+        },
         codeBlock: {
             title: 'Код',
             onClick: () => editor.chain().focus().toggleCodeBlock().run()
@@ -400,7 +414,9 @@ const QEditor = ({
             DragAndDrop.configure({
                 linkUpload: uploadOptions.url
             }),
-            Audio
+            Audio,
+            Superscript,
+            Subscript
         ],
         content: value,
         onUpdate: ({editor}) => onChange(editor.getHTML()),
@@ -526,6 +542,10 @@ const QEditor = ({
                 return (
                     <Fragment>{getUploader({accept: 'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation', afterParams: ['no_convert=1']})}</Fragment>
                 )
+            case 'audio':
+                return (
+                    <Fragment>{getUploader({accept: '.wav, .mp3, .ogg'})}</Fragment>
+                )
             case 'iframe_pdf':
                 return (
                     <Fragment>{getUploader({accept: 'application/pdf', afterParams: ['no_convert=1']})}</Fragment>
@@ -1003,6 +1023,11 @@ const QEditor = ({
                                                     editor.chain().focus().insertContent(`<iframe src="https://docs.google.com/viewer?embedded=true&url=${file.path}" width="100%" height="800px" frameBorder="0"></iframe>`).run();
                                                 })
                                                 break
+                                            case 'audio':
+                                                uploadedPaths.map((file) => {
+                                                    editor.chain().focus().insertContent(`<audio class="audio-player" controls="true" src="${file.path}" />`).run()
+                                                })
+                                                break;
                                             case 'file':
                                                 uploadedPaths.map((file, i) => {
                                                     let exp = file.path.split('.');

src/components/ToolBar.js

@@ -49,6 +49,7 @@ const toolsInit = {
                 'iframe',
                 'iframe_pptx',
                 'iframe_pdf',
+                'audio',
                 'iframe_custom',
             ]
         },