Feature/wrapper for table of contents (#199)

* update editor layout for TableOfContents

src/components/Editor/Editor.tsx

@@ -249,11 +249,7 @@ export const Editor = (props: Props) => {
   return (
     <>
       <div class="row">
-        <div class="col-md-5">
+        <div class="col-md-5" />
-          <Show when={isDesktop() && html()}>
-            <TableOfContents variant="editor" parentSelector="#editorBody" body={html()} />
-          </Show>
-        </div>
         <div class="col-md-12">
           <div ref={(el) => (editorElRef.current = el)} id="editorBody" />
         </div>

src/components/Views/Edit.module.scss

@@ -215,3 +215,12 @@
     background-repeat: no-repeat;
   }
 }
+
+.wrapperTableOfContents {
+  position: sticky;
+  left: 0;
+  top: 0;
+  margin-bottom: -157px;
+  width: 240px;
+  padding-top: 100px;
+}

src/components/Views/Edit.tsx

@@ -22,6 +22,8 @@ import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
 import { PublishSettings } from './PublishSettings'
 import { createStore } from 'solid-js/store'
 import SimplifiedEditor from '../Editor/SimplifiedEditor'
+import { isDesktop } from '../../utils/media-query'
+import { TableOfContents } from '../TableOfContents'
 
 type Props = {
   shout: Shout
@@ -247,6 +249,13 @@ export const EditView = (props: Props) => {
 
             <AutoSaveNotice active={saving()} />
 
+            <div class="position-relative">
+              <div class={styles.wrapperTableOfContents}>
+                <Show when={isDesktop() && form.body}>
+                  <TableOfContents variant="editor" parentSelector="#editorBody" body={form.body} />
+                </Show>
+              </div>
+
               <div class="row">
                 <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
                   <Show when={page().route === 'edit'}>
@@ -400,6 +409,7 @@ export const EditView = (props: Props) => {
                 />
               </Show>
             </div>
+          </div>
         </form>
       </div>
       <Show when={page().route === 'editSettings'}>