This commit is contained in:
Igor Lobanov 2022-10-31 14:26:45 +01:00
parent 5bcef1d1e2
commit ddb5bee5b8
9 changed files with 49 additions and 28 deletions

View File

@ -0,0 +1,7 @@
.error {
display: none;
}
.markdown {
white-space: pre-wrap;
}

View File

@ -3,18 +3,21 @@ import type { EditorState } from 'prosemirror-state'
import { useState } from '../store/context'
import { ProseMirror } from './ProseMirror'
import '../styles/Editor.scss'
import styles from './Editor.module.scss'
import { clsx } from 'clsx'
export const Editor = () => {
const [store, ctrl] = useState()
const onInit = (text: EditorState, editorView: EditorView) => ctrl.setState({ editorView, text })
const onReconfigure = (text: EditorState) => ctrl.setState({ text })
const onChange = (text: EditorState) => ctrl.setState({ text, lastModified: new Date() })
// const editorCss = (config) => css``
const style = () => (store.error ? `display: none;` : store.markdown ? `white-space: pre-wrap;` : '')
return (
<ProseMirror
className="editor col-md-6 shift-content"
style={style()}
cssClass={clsx('editor', 'col-md-6', 'shift-content', {
[styles.error]: store.error,
[styles.markdown]: store.markdown
})}
editorView={store.editorView}
text={store.text}
extensions={store.extensions}

View File

@ -6,8 +6,7 @@ import { Schema } from 'prosemirror-model'
import type { NodeViewFn, ProseMirrorExtension, ProseMirrorState } from '../prosemirror/helpers'
interface ProseMirrorProps {
style?: string
className?: string
cssClass?: string
text?: Store<ProseMirrorState>
editorView?: Store<EditorView>
extensions?: Store<ProseMirrorExtension[]>
@ -60,7 +59,7 @@ export const ProseMirror = (props: ProseMirrorProps) => {
[props.text, props.extensions]
)
return <div style={props.style} ref={editorRef} class={props.className} spell-check={false} />
return <div ref={editorRef} class={props.cssClass} spell-check={false} />
}
const createEditorState = (

View File

@ -34,7 +34,30 @@ export const Sidebar = () => {
document.body.classList.toggle('dark')
ctrl.updateConfig({ theme: document.body.className })
}
const collabText = () => (store.collab?.started ? 'Stop' : store.collab?.error ? 'Restart 🚨' : 'Start')
const collabText = () => {
if (store.collab?.started) {
return 'Stop'
}
if (store.collab?.error) {
return 'Restart 🚨'
}
return 'Start'
}
const discardText = () => {
if (store.path) {
return 'Close'
}
if (store.drafts.length > 0 && isEmpty(store.text)) {
return 'Delete ⚠️'
}
return 'Clear'
}
const editorView = () => unwrap(store.editorView)
const onToggleMarkdown = () => ctrl.toggleMarkdown()
const onOpenDraft = (draft: Draft) => ctrl.openDraft(unwrap(draft))
@ -144,12 +167,7 @@ export const Sidebar = () => {
disabled={!store.path && store.drafts.length === 0 && isEmpty(store.text)}
data-testid="discard"
>
{store.path
? 'Close'
: store.drafts.length > 0 && isEmpty(store.text)
? 'Delete ⚠️'
: 'Clear'}{' '}
<Keys keys={[mod, 'w']} />
{discardText()} <Keys keys={[mod, 'w']} />
</Link>
<Link onClick={onUndo}>
Undo <Keys keys={[mod, 'z']} />

View File

@ -10,6 +10,7 @@
.article__title {
@include font-size(2.4rem);
line-height: 1.25;
}
@ -31,10 +32,11 @@
}
.article__controls {
@include font-size(1.4rem);
align-content: baseline;
display: flex;
flex-wrap: wrap;
@include font-size(1.4rem);
padding-top: 2em;
}

View File

@ -8,14 +8,14 @@ button {
align-items: center;
outline: none;
text-decoration: none;
font-family: 'JetBrains Mono';
background: none;
font-family: Muller, Arial, Helvetica, sans-serif;
color: var(--foreground);
border: 1px solid var(--foreground);
&:hover {
opacity: 0.8;
}
background: none;
font-family: 'Muller';
color: var(--foreground);
border: 1px solid var(--foreground);
}
button.primary {

View File

@ -3,7 +3,6 @@
overflow: y-auto;
padding: 50px;
display: flex;
font-family: 'JetBrains Mono';
justify-content: center;
::-webkit-scrollbar {
display: none;

View File

@ -1,6 +1,5 @@
.layout {
display: flex;
font-family: 'Muller';
font-size: 18px;
background: var(--background);
color: var(--foreground);

View File

@ -69,12 +69,6 @@ export const confirmEmail = async (token: string) => {
setSession(authResult)
}
export const confirmEmail = async (token: string) => {
const authResult = await apiClient.confirmEmail({ token })
setToken(authResult.token)
setSession(authResult)
}
export const useAuthStore = () => {
return { session, emailChecks }
}