UBER-1019 Adjust wiki document layout (#3836)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>

packages/text-editor/src/components/CollaboratorEditor.svelte

@@ -19,7 +19,15 @@
   import { DecorationSet } from 'prosemirror-view'
   import { getContext, createEventDispatcher, onDestroy, onMount } from 'svelte'
   import * as Y from 'yjs'
-  import { AnyExtension, Editor, Extension, HTMLContent, getMarkRange, mergeAttributes } from '@tiptap/core'
+  import {
+    AnyExtension,
+    Editor,
+    Extension,
+    FocusPosition,
+    HTMLContent,
+    getMarkRange,
+    mergeAttributes
+  } from '@tiptap/core'
   import Collaboration, { isChangeOrigin } from '@tiptap/extension-collaboration'
   import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
   import Placeholder from '@tiptap/extension-placeholder'
@@ -162,15 +170,18 @@
   }
 
   let needFocus = false
-
   let focused = false
-  export function focus (): void {
+  let posFocus: FocusPosition | undefined = undefined
+
+  export function focus (position?: FocusPosition): void {
+    posFocus = position
     needFocus = true
   }
 
   $: if (editor && needFocus) {
     if (!focused) {
-      editor.commands.focus()
+      editor.commands.focus(posFocus)
+      posFocus = undefined
     }
     needFocus = false
   }
@@ -315,7 +326,7 @@
   const { idx, focusManager } = registerFocus(focusIndex, {
     focus: () => {
       if (visible) {
-        element?.focus()
+        focus('start')
       }
       return visible && element !== null
     },
@@ -384,7 +395,7 @@
   </div>
 
   <div class="ref-container" class:autoOverflow>
-    <div class="textInput" class:focusable>
+    <div class="text-input" class:focusable>
       <div class="select-text" style="width: 100%;" bind:this={element} />
     </div>
   </div>
@@ -417,4 +428,9 @@
     box-shadow: var(--theme-popup-shadow);
     z-index: 1;
   }
+
+  .text-input {
+    font-size: 0.9375rem;
+    padding-bottom: 30vh;
+  }
 </style>

packages/theme/styles/_text-editor.scss

@@ -11,12 +11,78 @@
   overflow-y: auto;
   color: var(--theme-text-primary-color);
 
-  p:not(:last-child) {
-    margin-block-end: 1em;
+  .title,
+  h1,
+  h2,
+  h3,
+  b {
+    font-weight: 600;
+  }
+
+  .title {
+    font-size: 2.25rem;
+    margin-top: 3.75rem;
+    margin-bottom: 0.25rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+    margin-top: 2.75rem;
+    margin-bottom: 0.25rem;
+  }
+
+  h2 {
+    font-size: 1.375rem;
+    margin-top: 2.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  p {
+    margin-block-start: 0.5rem;
   }
 
   >*+* {
-    margin-top: 0.75em;
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+
+  ul,
+  ol {
+    margin-right: .25rem;
+    margin-left: .75rem;
+    padding: 0;
+  }
+
+  li {
+    margin-left: 0.75rem;
+    padding-left: 0.375rem;
+  }
+
+  li p {
+    margin: 0;
+  }
+
+  ol ol { list-style: lower-alpha; }
+  ol ol ol { list-style: lower-roman; }
+  ol ol ol ol { list-style: decimal; }
+  ol ol ol ol ol { list-style: lower-alpha; }
+  ol ol ol ol ol ol { list-style: lower-roman; }
+  ol ol ol ol ol ol ol { list-style: decimal; }
+
+  blockquote {
+    margin-inline: 1px 0;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    font-style: italic;
+    position: relative;
+
+    border-left: 3px solid var(--theme-text-primary-color);
   }
 
   /* Placeholder (at the top) */