postmerge, unstore drafts

src/components/Editor/components/Editor.tsx

@@ -9,7 +9,6 @@ export const Editor = () => {
   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 = () => {
     if (store.error) {
       return `display: none;`

src/components/Editor/components/Error.tsx

@@ -1,6 +1,7 @@
 import { Switch, Match } from 'solid-js'
-import { useState } from '../store/context'
 import '../styles/Button.scss'
+import { ErrorObject, useState } from '../store/context'
+import { t } from '../../../utils/intl'
 
 export default () => {
   const [store] = useState()
@@ -28,15 +29,13 @@ const InvalidState = (props: { title: string }) => {
       <div class="container">
         <h1>{props.title}</h1>
         <p>
-          There is an error with the editor state. This is probably due to an old version in which the data
-          structure has changed. Automatic data migrations may be supported in the future. To fix this now,
-          you can copy important notes from below, clean the state and paste it again.
+          {t('Editing conflict, please copy your notes and refresh page')}
         </p>
         <pre>
           <code>{JSON.stringify(store.error.props)}</code>
         </pre>
         <button class="primary" onClick={onClick}>
-          Clean
+          {t('Clean')}
         </button>
       </div>
     </div>
@@ -48,7 +47,7 @@ const Other = () => {
   const onClick = () => ctrl.discard()
 
   const getMessage = () => {
-    const err = (store.error.props as any).error
+    const err = (store.error.props as ErrorObject['props']).error
     return typeof err === 'string' ? err : err.message
   }
 

src/components/Editor/components/Layout.tsx

@@ -7,7 +7,7 @@ export type Styled = {
   config?: Config
   'data-testid'?: string
   onClick?: () => void
-  onMouseEnter?: (e: any) => void
+  onMouseEnter?: (ev: MouseEvent) => void
 }
 
 export const Layout = (props: Styled) => {

src/components/Editor/components/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { For, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
 import { unwrap } from 'solid-js/store'
 import { undo, redo } from 'prosemirror-history'
-import { Draft, useState /*, Config, PrettierConfig */ } from '../store/context'
+import { Draft, useState } from '../store/context'
 import * as remote from '../remote'
 import { isEmpty /*, isInitialized*/ } from '../prosemirror/helpers'
 import type { Styled } from './Layout'

src/components/Editor/markdown.ts

@@ -122,7 +122,7 @@ export const markdownSerializer = new MarkdownSerializer(
   }
 )
 
-function listIsTight(tokens: any, idx: number) {
+function listIsTight(tokens: any[], idx: number) {
   let i = idx
   while (++i < tokens.length) {
     if (tokens[i].type !== 'list_item_open') return tokens[i].hidden

src/components/Editor/prosemirror/extension/todo-list.ts

@@ -1,8 +1,8 @@
 import { DOMSerializer, Node as ProsemirrorNode, NodeType, Schema } from 'prosemirror-model'
-import type { EditorView } from 'prosemirror-view'
 import { inputRules, wrappingInputRule } from 'prosemirror-inputrules'
 import { splitListItem } from 'prosemirror-schema-list'
 import { keymap } from 'prosemirror-keymap'
+import type { EditorView } from 'prosemirror-view'
 import type { ProseMirrorExtension } from '../helpers'
 
 const todoListRule = (nodeType: NodeType) =>

src/components/Editor/prosemirror/p2p.ts

@@ -5,13 +5,16 @@ import { Doc, XmlFragment } from 'yjs'
 import type { Reaction } from '../../../graphql/types.gen'
 import { setReactions } from '../../../stores/editor'
 
-export const roomConnect = (room, username = '', keyname = 'collab'): [XmlFragment, WebrtcProvider] => {
+export const roomConnect = (room: string, username = '', keyname = 'collab'): [XmlFragment, WebrtcProvider] => {
   const ydoc = new Doc()
   const yarr = ydoc.getArray(keyname + '-reactions')
+
+  // TODO: use reactions
   yarr.observeDeep(() => {
     console.debug('[p2p] yarray updated', yarr.toArray())
     setReactions(yarr.toArray() as Reaction[])
   })
+
   const yXmlFragment = ydoc.getXmlFragment(keyname)
   const webrtcOptions = {
     awareness: new Awareness(ydoc),

src/components/Editor/prosemirror/setup.ts

@@ -19,6 +19,7 @@ import type { Command } from 'prosemirror-state'
 import placeholder from './extension/placeholder'
 import todoList from './extension/todo-list'
 import strikethrough from './extension/strikethrough'
+import scrollPlugin from './extension/scroll'
 
 interface ExtensionsProps {
   data?: unknown
@@ -29,6 +30,7 @@ interface ExtensionsProps {
   y?: YOptions
   schema?: Schema
   collab?: boolean
+  typewriterMode?: boolean
 }
 
 const customKeymap = (props: ExtensionsProps): ProseMirrorExtension => ({
@@ -37,11 +39,11 @@ const customKeymap = (props: ExtensionsProps): ProseMirrorExtension => ({
 
 export const createExtensions = (props: ExtensionsProps): ProseMirrorExtension[] => {
   const eee = [
-    // scroll(props.config.typewriterMode),
     placeholder(t('Just start typing...')),
     customKeymap(props),
     base(props.markdown),
-    selectionMenu()
+    selectionMenu(),
+    scrollPlugin(props.config?.typewriterMode)
   ]
   if (props.markdown) {
     eee.push(

src/components/Editor/store/actions.ts

@@ -10,9 +10,7 @@ import { State, Draft, Config, ServiceError, newState } from './context'
 import { serialize, createMarkdownParser } from '../markdown'
 import db from '../db'
 import { isEmpty, isInitialized } from '../prosemirror/helpers'
-import { drafts as draftsatom } from '../../../stores/editor'
-import { useStore } from '@nanostores/solid'
-import { createMemo } from 'solid-js'
+import { createSignal } from 'solid-js'
 
 const isText = (x) => x && x.doc && x.selection
 const isDraft = (x): boolean => x && (x.text || x.path)
@@ -239,8 +237,7 @@ export const createCtrl = (initial): [Store<State>, { [key: string]: any }] => {
   }
 
   const loadDraft = async (config: Config, path: string): Promise<Draft> => {
-    const draftstore = useStore(draftsatom)
-    const draft = createMemo(() => draftstore()[path])
+    const [draft, setDraft] = createSignal<Draft>()
     const schema = createSchema({
       config,
       markdown: false,
@@ -334,9 +331,9 @@ export const createCtrl = (initial): [Store<State>, { [key: string]: any }] => {
 
       if (isInitialized(state.text as EditorState)) {
         if (state.path) {
-          // const text = serialize(store.editorView.state)
+          const text = serialize(store.editorView.state)
+          // TODO: saving draft logix here
           // await remote.writeDraft(state.path, text)
-          draftsatom.setKey(state.path, store.editorView.state)
         } else {
           data.text = store.editorView.state.toJSON()
         }

src/components/Editor/store/context.ts

@@ -9,7 +9,7 @@ export interface Args {
   cwd?: string
   draft?: string
   room?: string
-  text?: any
+  text?: string
 }
 
 export interface PrettierConfig {
@@ -23,17 +23,17 @@ export interface PrettierConfig {
 export interface Config {
   theme: string
   // codeTheme: string;
+  // alwaysOnTop: boolean;
   font: string
   fontSize: number
   contentWidth: number
-  // alwaysOnTop: boolean;
-  // typewriterMode: boolean;
+  typewriterMode?: boolean;
   prettier: PrettierConfig
 }
 
 export interface ErrorObject {
   id: string
-  props?: unknown
+  props?: any
 }
 
 export interface YOptions {
@@ -78,7 +78,7 @@ export interface Draft {
 
 export class ServiceError extends Error {
   public errorObject: ErrorObject
-  constructor(id: string, props: unknown) {
+  constructor(id: string, props: any) {
     super(id)
     this.errorObject = { id, props }
   }

src/components/Views/Create.tsx

@@ -11,6 +11,7 @@ const matchDark = () => window.matchMedia('(prefers-color-scheme: dark)')
 
 export const CreateView = (props: { state: State }) => {
   let isMac = false
+  const onChangeTheme = () => ctrl.updateTheme()
   onMount(() => {
     isMac = window?.navigator.platform.includes('Mac')
     matchDark().addEventListener('change', onChangeTheme)
@@ -34,8 +35,6 @@ export const CreateView = (props: { state: State }) => {
     await ctrl.init()
   })
 
-  const onChangeTheme = () => ctrl.updateTheme()
-
   onError((error) => {
     console.error('[create] error:', error)
     ctrl.setState({ error: { id: 'exception', props: { error } } })

src/locales/ru.json

@@ -162,5 +162,6 @@
   "Restart collab": "Перезапустить коллаборацию",
   "Start collab": "Коллаборативный режим",
   "Clear": "Сбросить",
-  "Режим": "Theme"
+  "Theme": "Режим",
+  "Editing conflict, please copy your version and refresh page": "Конфликт редактирования, пожалуйста, скопируйте вашу версию текста и обновите страницу"
 }