diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 274f001a81..bb77d677aa 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/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 @@
-
@@ -417,4 +428,9 @@
box-shadow: var(--theme-popup-shadow);
z-index: 1;
}
+
+ .text-input {
+ font-size: 0.9375rem;
+ padding-bottom: 30vh;
+ }
diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
index d77323d4bd..7990bc85c3 100644
--- a/packages/theme/styles/_text-editor.scss
+++ b/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) */