Feature/keep cursor editor outclick (#136)

change ProseMirror styles

src/components/Editor/Prosemirror.scss

@@ -15,6 +15,68 @@
   opacity: 0.3;
 }
 
+// Keeping the cursor active when moving outside the editable area
+
+.ProseMirror p,
+.ProseMirror ul,
+.ProseMirror h4,
+.ProseMirror ol {
+  box-sizing: content-box;
+  flex: 0 0 auto;
+
+  @media (min-width: 768px) {
+    padding-left: calc(21.9% + 3px);
+    max-width: 72.7%;
+  }
+  @media (min-width: 1200px) {
+    padding-left: calc(21.5% + 3px);
+    max-width: 64.9%;
+  }
+}
+
+.ProseMirror blockquote,
+.ProseMirror article[data-type='incut'] {
+  @media (min-width: 768px) {
+    margin-left: calc(21.9% + 3px) !important;
+    max-width: 73.6%;
+  }
+  @media (min-width: 1200px) {
+    margin-left: calc(21.4% + 3px) !important;
+    max-width: 65.3%;
+  }
+}
+
+.ProseMirror h2 {
+  @media (min-width: 768px) {
+    padding-left: calc(21.9% + 2px);
+    max-width: 72.7%;
+  }
+  @media (min-width: 1200px) {
+    padding-left: 21.5%;
+    max-width: 87.1%;
+  }
+}
+
+.ProseMirror h3 {
+  @media (min-width: 768px) {
+    padding-left: calc(21.9% + 2px);
+  }
+  @media (min-width: 1200px) {
+    padding-left: 21.5%;
+    max-width: 87.1%;
+  }
+}
+
+.ProseMirror * p,
+.ProseMirror * h2,
+.ProseMirror * h3,
+.ProseMirror * h4 {
+  @media (min-width: 768px) {
+    padding-left: unset;
+    max-width: unset;
+  }
+}
+
 /* Give a remote user a caret */
 .collaboration-cursor__caret {
   border-left: 1px solid #0d0d0d;

src/components/Views/Edit.tsx

@@ -348,12 +348,6 @@ export const EditView = (props: Props) => {
                       onAudioSorted={(value) => handleSortedMedia(value)}
                     />
                   </Show>
-
-                  <Editor
-                    shoutId={props.shout.id}
-                    initialContent={props.shout.body}
-                    onChange={(body) => setForm('body', body)}
-                  />
                 </div>
                 <div
                   class={clsx(styles.editSettings, {
@@ -467,6 +461,12 @@ export const EditView = (props: Props) => {
                 </div>
               </div>
             </div>
+
+            <Editor
+              shoutId={props.shout.id}
+              initialContent={props.shout.body}
+              onChange={(body) => setForm('body', body)}
+            />
           </div>
         </form>
       </div>