fixes
This commit is contained in:
parent
5bcef1d1e2
commit
ddb5bee5b8
7
src/components/Editor/components/Editor.module.scss
Normal file
7
src/components/Editor/components/Editor.module.scss
Normal file
|
@ -0,0 +1,7 @@
|
|||
.error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.markdown {
|
||||
white-space: pre-wrap;
|
||||
}
|
|
@ -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}
|
||||
|
|
|
@ -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 = (
|
||||
|
|
|
@ -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']} />
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
overflow: y-auto;
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
font-family: 'JetBrains Mono';
|
||||
justify-content: center;
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
.layout {
|
||||
display: flex;
|
||||
font-family: 'Muller';
|
||||
font-size: 18px;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
|
|
|
@ -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 }
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user