diff --git a/src/components/Editor/Prosemirror.scss b/src/components/Editor/Prosemirror.scss index 00480617..45fabb41 100644 --- a/src/components/Editor/Prosemirror.scss +++ b/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; diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index e9480dda..6871d129 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -348,12 +348,6 @@ export const EditView = (props: Props) => { onAudioSorted={(value) => handleSortedMedia(value)} /> - - setForm('body', body)} - />
{
+ + setForm('body', body)} + />