discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge pull request #44 from Discours/editor

Browse Source 
Editor
This commit is contained in:
Igor Lobanov 2022-10-31 17:53:12 +01:00 committed by GitHub
commit 39c3ca3ef0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
108 changed files with 3443 additions and 4591 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.lintstagedrc
View File

@ -1,3 +1,4 @@
{
"*.{js,ts,tsx,json,scss,css,html}": "prettier --write"
"*.{js,ts,tsx,json,scss,css,html}": "prettier --write",
"package.json": "sort-package-json"
}

3
.stylelintrc
View File

@ -18,5 +18,6 @@
"custom-properties",
"declarations"
]
}
},
"defaultSeverity": "warning"
}

3
CHANGELOG.txt
View File

@ -1,3 +1,6 @@
[0.6.0]
[+] editor enabled
[0.5.1]
[+] nanostores-base global store
[-] Root.tsx components

60
astro.config.ts
View File

@ -39,41 +39,31 @@ const astroConfig: AstroUserConfig = {
build: {
rollupOptions: {
plugins: [visualizer()],
output: {
// eslint-disable-next-line sonarjs/cognitive-complexity
manualChunks(id) {
if (id.includes('node_modules')) {
// FIXME: doesn't work in production
// if (id.includes('solid')) {
// chunkid = 'solid'
// }
// if (id.includes('acorn')) {
// chunkid = 'acorn'
// }
// if (id.includes('simple-peer')) {
// chunkid = 'simple-peer'
// }
// if (id.includes('prosemirror')) {
// chunkid = 'prosemirror'
// }
// if (id.includes('markdown') || id.includes('mdurl')) {
// chunkid = 'markdown'
// }
// if (id.includes('swiper')) {
// chunkid = 'swiper'
// }
// if (
// id.includes('yjs') ||
// id.includes('y-prosemirror') ||
// id.includes('y-protocols') ||
// id.includes('y-webrtc')
// ) {
// chunkid = 'yjs'
// }
return 'vendor'
}
}
},
// output: {
// manualChunks(id) {
// if (id.includes('p2p')) return 'p2p'
// if (id.includes('editor') || id.includes('Editor')) return 'editor'
// if (id.includes('node_modules')) {
// let chunkid
// if (id.includes('solid')) chunkid = 'solid'
// if (id.includes('swiper')) chunkid = 'swiper'
// if (id.includes('acorn')) chunkid = 'acorn'
// if (id.includes('prosemirror')) chunkid = 'editor'
// if (id.includes('markdown') || id.includes('mdurl') || id.includes('yjs')) {
// chunkid = 'codecs'
// }
// if (
// id.includes('p2p') ||
// id.includes('y-protocols') ||
// id.includes('y-webrtc') ||
// id.includes('simple-peer')
// ) {
// chunkid = 'p2p'
// }
// return chunkid
// }
// }
// },
external: ['@aws-sdk/clients/s3']
}
},

2
docs/article.puml
View File

@ -50,7 +50,7 @@ Solid -> Store: loadArticleComments
activate Store
Store -> apiClient: getArticleComments
activate apiClient
apiClient -> DB: query: articleReactions
apiClient -> DB: query: getReactionsForShouts
activate DB
DB --> apiClient: response
deactivate DB

70
package.json
View File

@ -18,8 +18,8 @@
"lint:styles": "stylelint **/*.{scss,css}",
"lint:styles:fix": "stylelint **/*.{scss,css} --fix",
"pre-commit": "lint-staged",
"pre-push": "",
"pre-commit-old": "lint-staged",
"pre-push": "",
"pre-push-old": "npm run typecheck",
"prepare": "husky install",
"preview": "astro preview",
@ -31,23 +31,9 @@
},
"dependencies": {
"@aws-sdk/client-s3": "^3.178.0",
"@nanostores/persistent": "^0.7.0",
"@nanostores/router": "^0.7.0",
"@nanostores/solid": "^0.3.0",
"@solid-primitives/memo": "^1.0.2",
"loglevel": "^1.8.0",
"loglevel-plugin-prefix": "^0.8.4",
"mailgun.js": "^8.0.1",
"markdown-it": "^13.0.1",
"markdown-it-container": "^3.0.0",
"markdown-it-implicit-figures": "^0.10.0",
"markdown-it-mark": "^3.0.1",
"markdown-it-replace-link": "^1.1.0",
"nanostores": "^0.7.0",
"postcss-modules": "^5.0.0"
"mailgun.js": "^8.0.1"
},
"devDependencies": {
"@astrojs/language-server": "^0.27.0",
"@astrojs/solid-js": "^1.1.0",
"@astrojs/vercel": "^2.1.0",
"@babel/core": "^7.18.13",
@ -58,9 +44,13 @@
"@graphql-codegen/urql-introspection": "^2.2.1",
"@graphql-tools/url-loader": "^7.16.4",
"@graphql-typed-document-node/core": "^3.1.1",
"@nanostores/persistent": "^0.7.0",
"@nanostores/router": "^0.7.0",
"@nanostores/solid": "^0.3.0",
"@popperjs/core": "^2.11.6",
"@solid-devtools/debugger": "^0.9.1",
"@solid-devtools/logger": "^0.4.7",
"@solid-devtools/debugger": "^0.13.1",
"@solid-devtools/logger": "^0.4.9",
"@solid-primitives/memo": "^1.0.2",
"@types/express": "^4.17.14",
"@types/node": "^18.7.19",
"@types/uuid": "^8.3.4",
@ -71,33 +61,41 @@
"@urql/exchange-auth": "^1.0.0",
"@urql/exchange-graphcache": "^5.0.0",
"astro": "^1.1.1",
"astro-eslint-parser": "^0.6.1",
"astro-eslint-parser": "^0.9.0",
"bcryptjs": "^2.4.3",
"bootstrap": "5.1.3",
"clsx": "^1.2.1",
"cookie": "^0.5.0",
"cookie-signature": "^1.2.0",
"eslint": "8.22.0",
"eslint-config-stylelint": "^16.0.0",
"eslint": "^8.26.0",
"eslint-config-stylelint": "^17.0.0",
"eslint-import-resolver-typescript": "^3.5.0",
"eslint-mdx": "^2.0.2",
"eslint-plugin-astro": "^0.19.0",
"eslint-plugin-astro": "^0.21.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-mdx": "^2.0.2",
"eslint-plugin-promise": "^6.0.1",
"eslint-plugin-solid": "^0.7.1",
"eslint-plugin-sonarjs": "^0.15.0",
"eslint-plugin-unicorn": "^43.0.2",
"eslint-plugin-solid": "^0.7.3",
"eslint-plugin-sonarjs": "^0.16.0",
"eslint-plugin-unicorn": "^44.0.2",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",
"graphql-ws": "^5.11.2",
"hast-util-select": "^5.0.2",
"husky": "^8.0.1",
"idb": "^7.0.1",
"jest": "^29.0.1",
"idb": "^7.1.0",
"jest": "^29.2.1",
"lint-staged": "^13.0.3",
"loglevel": "^1.8.0",
"loglevel-plugin-prefix": "^0.8.4",
"markdown-it": "^13.0.1",
"markdown-it-container": "^3.0.0",
"markdown-it-implicit-figures": "^0.10.0",
"markdown-it-mark": "^3.0.1",
"markdown-it-replace-link": "^1.1.0",
"nanostores": "^0.7.0",
"orderedmap": "^2.1.0",
"postcss": "^8.4.16",
"postcss-modules": "^5.0.0",
"prettier": "^2.7.1",
"prettier-eslint": "^15.0.1",
"prosemirror-commands": "^1.3.1",
@ -114,15 +112,11 @@
"prosemirror-schema-list": "^1.2.2",
"prosemirror-state": "^1.4.1",
"prosemirror-view": "^1.28.1",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.0.1",
"rehype-toc": "^3.0.2",
"remark-code-titles": "^0.1.2",
"rollup": "~2.79.1",
"rollup-plugin-visualizer": "^5.8.2",
"sass": "^1.55.0",
"solid-devtools": "^0.16.2",
"solid-js": "^1.5.6",
"solid-devtools": "^0.20.1",
"solid-js": "^1.6.0",
"solid-js-form": "^0.1.5",
"solid-jsx": "^0.9.1",
"solid-social": "^0.9.0",
@ -131,18 +125,18 @@
"stylelint": "^14.12.1",
"stylelint-config-css-modules": "^4.1.0",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard-scss": "^5.0.0",
"stylelint-config-standard-scss": "^6.0.0",
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.3.0",
"swiper": "^8.4.2",
"ts-debounce": "^4.0.0",
"ts-node": "^10.9.1",
"typescript": "^4.8.3",
"undici": "^5.10.0",
"unique-names-generator": "^4.7.1",
"uuid": "^9.0.0",
"vite": "^3.1.3",
"y-prosemirror": "^1.1.3",
"ws": "^8.9.0",
"y-prosemirror": "^1.2.0",
"y-protocols": "^1.0.5",
"y-webrtc": "^10.2.3",
"yjs": "^13.5.41"

3
public/icons/checkbox.svg
View File

@ -1,3 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 1H18V-1H2V1ZM19 2V18H21V2H19ZM18 19H2V21H18V19ZM1 18V2H-1V18H1ZM2 19C1.44772 19 1 18.5523 1 18H-1C-1 19.6569 0.343147 21 2 21V19ZM19 18C19 18.5523 18.5523 19 18 19V21C19.6569 21 21 19.6569 21 18H19ZM18 1C18.5523 1 19 1.44772 19 2H21C21 0.343146 19.6569 -1 18 -1V1ZM2 -1C0.343146 -1 -1 0.343147 -1 2H1C1 1.44772 1.44772 1 2 1V-1Z" fill="#141414"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 462 B

3
src/assets/handle.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 10 10" height="14" width="14">
<path d="M3 2a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm4-8a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

3
src/components/Article/Comment.tsx
View File

@ -1,10 +1,9 @@
import './Comment.scss'
import { Icon } from '../Nav/Icon'
import { AuthorCard } from '../Author/Card'
import { Show } from 'solid-js/web'
import { Show, createMemo } from 'solid-js'
import { clsx } from 'clsx'
import type { Author, Reaction as Point } from '../../graphql/types.gen'
import { createMemo } from 'solid-js'
import { t } from '../../utils/intl'
// import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions'
import MD from './MD'

9
src/components/Article/Tooltip.tsx
View File

@ -1,7 +1,12 @@
import './Tooltip.scss'
import { createSignal } from 'solid-js'
import { createSignal, JSX } from 'solid-js'
export const Tooltip: (p: any) => any = (props: any) => {
interface TooltipProps {
children?: JSX.Element
link?: string
}
export const Tooltip = (props: TooltipProps) => {
const [isShown, setShowed] = createSignal(false)
const show = () => setShowed(true)
return (

3
src/components/Author/Card.tsx
View File

@ -1,9 +1,8 @@
import { For, Show } from 'solid-js/web'
import type { Author } from '../../graphql/types.gen'
import Userpic from './Userpic'
import { Icon } from '../Nav/Icon'
import style from './Card.module.scss'
import { createMemo } from 'solid-js'
import { createMemo, For, Show } from 'solid-js'
import { translit } from '../../utils/ru2en'
import { t } from '../../utils/intl'
import { useAuthStore } from '../../stores/auth'

2
src/components/Author/Userpic.tsx
View File

@ -1,4 +1,4 @@
import { Show } from 'solid-js/web'
import { Show } from 'solid-js'
import type { Author } from '../../graphql/types.gen'
import style from './Userpic.module.scss'
import { clsx } from 'clsx'

39
src/components/Discours/Donate.tsx
View File

@ -1,29 +1,33 @@
import '../../styles/help.scss'
import { createSignal, onMount } from 'solid-js'
import { showModal, warn } from '../../stores/ui'
import '../../styles/help.scss'
import { t } from '../../utils/intl'
export const Donate = () => {
const once = ''
const monthly = 'Monthly'
const cpOptions = {
publicId: 'pk_0a37bab30ffc6b77b2f93d65f2aed',
description: 'Поддержка журнала и развитие Дискурса',
description: t('Help discours to grow'),
currency: 'RUB'
}
let amountSwitchElement: HTMLDivElement | undefined
let customAmountElement: HTMLInputElement | undefined
let CustomerReciept: any
let widget: any
const [widget, setWidget] = createSignal()
const [customerReciept, setCustomerReciept] = createSignal({})
const [showingPayment, setShowingPayment] = createSignal<boolean>()
const [period, setPeriod] = createSignal(monthly)
const [amount, setAmount] = createSignal(0)
onMount(() => {
widget = new (window as any).cp.CloudPayments() // Checkout(cpOptions)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const {
cp: { CloudPayments }
} = window as any // Checkout(cpOptions)
setWidget(new CloudPayments())
console.log('[donate] payments initiated')
CustomerReciept = {
setCustomerReciept({
Items: [
//товарные позиции
{
@ -46,7 +50,7 @@ export const Donate = () => {
credit: 0, // Сумма постоплатой(в кредит) (2 знака после запятой)
provision: 0 // Сумма оплаты встречным предоставлением (сертификаты, др. мат.ценности) (2 знака после запятой)
}
}
})
})
const show = () => {
@ -57,7 +61,8 @@ export const Donate = () => {
amountSwitchElement?.querySelector('input[type=radio]:checked')
setAmount(Number.parseInt(customAmountElement?.value || choice?.value || '0'))
console.log('[donate] input amount ' + amount)
widget.charge(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
;(widget() as any).charge(
{
// options
...cpOptions,
@ -69,22 +74,22 @@ export const Donate = () => {
// accountId: 'user@example.com', //идентификатор плательщика (обязательно для создания подписки)
data: {
CloudPayments: {
CustomerReciept,
CustomerReciept: customerReciept(),
recurrent: {
interval: period(), // local solid's signal
period: 1, // internal widget's
CustomerReciept // чек для регулярных платежей
CustomerReciept: customerReciept() // чек для регулярных платежей
}
}
}
},
(opts: any) => {
(opts) => {
// success
// действие при успешной оплате
console.debug('[donate] options', opts)
showModal('thank')
},
function (reason: string, options: any) {
function (reason: string, options) {
// fail
// действие при неуспешной оплате
console.debug('[donate] options', options)
@ -124,7 +129,7 @@ export const Donate = () => {
ref={customAmountElement}
type="number"
name="sum"
placeholder="Другая сумма"
placeholder={t('Another amount')}
/>
</div>
</div>
@ -140,7 +145,7 @@ export const Donate = () => {
checked={period() === once}
/>
<label for="once" class="btn payment-type" classList={{ active: period() === once }}>
Единоразово
{t('One time')}
</label>
<input
type="radio"
@ -151,14 +156,14 @@ export const Donate = () => {
checked={period() === monthly}
/>
<label for="monthly" class="btn payment-type" classList={{ active: period() === monthly }}>
Ежемесячно
{t('Every month')}
</label>
</div>
</div>
<div class="form-group">
<a href={''} class="btn send-btn donate" onClick={show}>
Помочь журналу
{t('Help discours to grow')}
</a>
</div>
</form>

23
src/components/Editor/ArticlesList.tsx
View File

@ -1,23 +0,0 @@
import './ArticlesList.scss'
export default () => {
return (
<div class="articles-list">
<div class="articles-list__item article row">
<div class="col-md-6">
<div class="article__status article__status--draft">Черновик</div>
<div class="article__title">
<strong>Поствыживание. Комплекс вины и&nbsp;кризис самооценки в&nbsp;дивном новом мире.</strong>{' '}
В&nbsp;летописи российского музыкального подполья остаётся множество лакун.
</div>
<time class="article__date">21 марта 2022</time>
</div>
<div class="article__controls col-md-5 offset-md-1">
<div class="article-control">Редактировать</div>
<div class="article-control">Опубликовать</div>
<div class="article-control article-control--remove">Удалить</div>
</div>
</div>
</div>
)
}

28
src/components/Editor/Button.scss
View File

@ -1,28 +0,0 @@
.error {
button {
height: 50px;
padding: 0 20px;
font-size: 18px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
text-decoration: none;
font-family: Muller;
&:hover {
opacity: 0.8;
}
background: none;
color: var(--foreground);
border: 1px solid var(--foreground);
}
button.primary {
color: var(--primary-foreground);
border: 0;
background: var(--primary-background);
}
}

19
src/components/Editor/Layout.tsx
View File

@ -1,19 +0,0 @@
import type { Config } from './store'
import './Layout.scss'
export type Styled = {
children: any
config?: Config
'data-testid'?: string
onClick?: () => void
onMouseEnter?: (e: any) => void
}
export const Layout = (props: Styled) => {
return (
// eslint-disable-next-line solid/reactivity
<div onMouseEnter={props.onMouseEnter} class="layout layout--editor" data-testid={props['data-testid']}>
{props.children}
</div>
)
}

266
src/components/Editor/Sidebar.tsx
View File

@ -1,266 +0,0 @@
import { For, Show, createEffect, createSignal, onCleanup } from 'solid-js'
import { unwrap } from 'solid-js/store'
// import { undo, redo } from 'prosemirror-history'
import { File, useState /*, Config, PrettierConfig */ } from './store'
import { clsx } from 'clsx'
import type { Styled } from './Layout'
// import type { EditorState } from 'prosemirror-state'
// import { serialize } from './prosemirror/markdown'
// import { baseUrl } from '../../graphql/client'
// import { isServer } from 'solid-js/web'
// const copy = async (text: string): Promise<void> => navigator.clipboard.writeText(text)
// const copyAllAsMarkdown = async (state: EditorState): Promise<void> =>
// !isServer && navigator.clipboard.writeText(serialize(state))
const Off = (props: any) => <div class="sidebar-off">{props.children}</div>
const Label = (props: Styled) => <h3 class="sidebar-label">{props.children}</h3>
const Link = (
props: Styled & { withMargin?: boolean; disabled?: boolean; title?: string; className?: string }
) => (
<button
class={clsx('sidebar-link', props.className)}
style={{ 'margin-bottom': props.withMargin ? '10px' : '' }}
onClick={props.onClick}
disabled={props.disabled}
title={props.title}
data-testid={props['data-testid']}
>
{props.children}
</button>
)
type FileLinkProps = {
file: File
onOpenFile: (file: File) => void
}
const FileLink = (props: FileLinkProps) => {
const length = 100
let content = ''
const getContent = (node: any) => {
if (node.text) {
content += node.text
}
if (content.length > length) {
content = `${content.slice(0, Math.max(0, length))}...`
return content
}
if (node.content) {
for (const child of node.content) {
if (content.length >= length) {
break
}
content = getContent(child)
}
}
return content
}
const text = () =>
props.file.path
? props.file.path.slice(Math.max(0, props.file.path.length - length))
: getContent(props.file.text?.doc)
return (
// eslint-disable-next-line solid/no-react-specific-props
<Link className="file" onClick={() => props.onOpenFile(props.file)} data-testid="open">
{text()} {props.file.path && '📎'}
</Link>
)
}
export const Sidebar = () => {
const [store, ctrl] = useState()
const [lastAction, setLastAction] = createSignal<string | undefined>()
const toggleTheme = () => {
document.body.classList.toggle('dark')
ctrl.updateConfig({ theme: document.body.className })
}
// const collabText = () => (store.collab?.started ? 'Stop' : store.collab?.error ? 'Restart 🚨' : 'Start')
const editorView = () => unwrap(store.editorView)
// const onToggleMarkdown = () => ctrl.toggleMarkdown()
const onOpenFile = (file: File) => ctrl.openFile(unwrap(file))
// const collabUsers = () => store.collab?.y?.provider.awareness.meta.size ?? 0
// const onUndo = () => undo(editorView().state, editorView().dispatch)
// const onRedo = () => redo(editorView().state, editorView().dispatch)
// const onCopyAllAsMd = () => copyAllAsMarkdown(editorView().state).then(() => setLastAction('copy-md'))
// const onToggleAlwaysOnTop = () => ctrl.updateConfig({ alwaysOnTop: !store.config.alwaysOnTop })
// const onToggleFullscreen = () => ctrl.setFullscreen(!store.fullscreen)
// const onNew = () => ctrl.newFile()
// const onDiscard = () => ctrl.discard()
const [isHidden, setIsHidden] = createSignal<boolean | false>()
const toggleSidebar = () => {
setIsHidden(!isHidden())
}
toggleSidebar()
// const onSaveAs = async () => {
// const path = 'test' // TODO: save filename await remote.save(editorView().state)
//
// if (path) ctrl.updatePath(path)
// }
//
// const onCollab = () => {
// const state = unwrap(store)
//
// store.collab?.started ? ctrl.stopCollab(state) : console.log(state)
// }
//
// const onOpenInApp = () => {
// // if (isTauri) return
//
// if (store.collab?.started) {
// window.open(`discoursio://main?room=${store.collab?.room}`, '_self')
// } else {
// const text = window.btoa(JSON.stringify(editorView().state.toJSON()))
//
// window.open(`discoursio://main?text=${text}`, '_self')
// }
// }
//
// const onCopyCollabLink = () => {
// copy(`${baseUrl}/collab/${store.collab?.room}`).then(() => {
// editorView().focus()
// setLastAction('copy-collab-link')
// })
// }
//
// const onCopyCollabAppLink = () => {
// copy(`discoursio://${store.collab?.room}`).then(() => {
// editorView().focus()
// setLastAction('copy-collab-app-link')
// })
// }
// const Keys = (props: { keys: string[] }) => (
// <span>
// <For each={props.keys}>{(k: string) => <i>{k}</i>}</For>
// </span>
// )
createEffect(() => {
setLastAction()
}, store.lastModified)
createEffect(() => {
if (!lastAction()) return
const id = setTimeout(() => {
setLastAction()
}, 1000)
onCleanup(() => clearTimeout(id))
})
return (
<div class={`sidebar-container${isHidden() ? ' sidebar-container--hidden' : ''}`}>
<span class="sidebar-opener" onClick={toggleSidebar}>
Советы и&nbsp;предложения
</span>
<Off onClick={() => editorView().focus()} data-tauri-drag-region="true">
<div class="sidebar-closer" onClick={toggleSidebar} />
<Show when={true}>
<div>
<Show when={store.path}>
<Label>
<i>({store.path?.slice(Math.max(0, store.path?.length - 24))})</i>
</Label>
</Show>
<Link>Пригласить соавторов</Link>
<Link>Настройки публикации</Link>
<Link>История правок</Link>
<div class="theme-switcher">
Ночная тема
<input type="checkbox" name="theme" id="theme" onClick={toggleTheme} />
<label for="theme">Ночная тема</label>
</div>
{/*
<Show when={isTauri && !store.path}>
<Link onClick={onSaveAs}>
Save to file <Keys keys={[mod, 's']} />
</Link>
</Show>
<Link onClick={onNew} data-testid='new'>
New <Keys keys={[mod, 'n']} />
</Link>
<Link
onClick={onDiscard}
disabled={!store.path && store.files?.length === 0 && isEmpty(store.text)}
data-testid='discard'
>
{store.path ? 'Close' : store.files?.length > 0 && isEmpty(store.text) ? 'Delete ⚠️' : 'Clear'}{' '}
<Keys keys={[mod, 'w']} />
</Link>
<Show when={isTauri}>
<Link onClick={onToggleFullscreen}>
Fullscreen {store.fullscreen && '✅'} <Keys keys={[alt, 'Enter']} />
</Link>
</Show>
<Link onClick={onUndo}>
Undo <Keys keys={[mod, 'z']} />
</Link>
<Link onClick={onRedo}>
Redo <Keys keys={[mod, ...(isMac ? ['Shift', 'z'] : ['y'])]} />
</Link>
<Show when={isTauri}>
<Link onClick={onToggleAlwaysOnTop}>Always on Top {store.config.alwaysOnTop && '✅'}</Link>
</Show>
<Show when={!isTauri && false}>
<Link onClick={onOpenInApp}>Open in App ⚡</Link>
</Show>
<Link onClick={onToggleMarkdown} data-testid='markdown'>
Markdown mode {store.markdown && '✅'} <Keys keys={[mod, 'm']} />
</Link>
<Link onClick={onCopyAllAsMd}>Copy all as MD {lastAction() === 'copy-md' && '📋'}</Link>
*/}
<Show when={store.files?.length > 0}>
<h4>Files:</h4>
<p>
<For each={store.files}>{(file) => <FileLink file={file} onOpenFile={onOpenFile} />}</For>
</p>
</Show>
{/*
<Link onClick={onCollab} title={store.collab?.error ? 'Connection error' : ''}>
Collab {collabText()}
</Link>
<Show when={collabUsers() > 0}>
<Link onClick={onCopyCollabLink}>
Copy Link {lastAction() === 'copy-collab-link' && '📋'}
</Link>
<Show when={false}>
<Link onClick={onCopyCollabAppLink}>
Copy App Link {lastAction() === 'copy-collab-app-link' && '📋'}
</Link>
</Show>
<span>
{collabUsers()} {collabUsers() === 1 ? 'user' : 'users'} connected
</span>
</Show>
<Show when={isTauri}>
<Link onClick={() => remote.quit()}>
Quit <Keys keys={[mod, 'q']} />
</Link>
</Show>
*/}
</div>
</Show>
</Off>
</div>
)
}

7
src/components/Editor/components/Editor.module.scss Normal file
View File

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

28
src/components/Editor/index.tsx → src/components/Editor/components/Editor.tsx
View File

@ -1,31 +1,23 @@
import './Editor.scss'
import type { EditorView } from 'prosemirror-view'
import type { EditorState } from 'prosemirror-state'
import { useState } from './store'
import { ProseMirror } from './prosemirror'
import { useState } from '../store/context'
import { ProseMirror } from './ProseMirror'
import '../styles/Editor.scss'
import styles from './Editor.module.scss'
import { clsx } from 'clsx'
export default () => {
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 = () => {
if (store.error) {
return `display: none;`
}
if (store.markdown) {
return `white-space: pre-wrap;`
}
return ''
}
return (
<ProseMirror
class="editor"
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}

52
src/components/Editor/Error.tsx → src/components/Editor/components/Error.tsx
View File

@ -1,12 +1,30 @@
import { Switch, Match, createMemo } from 'solid-js'
import { ErrorObject, useState } from './store'
import { Switch, Match } from 'solid-js'
import { useState } from '../store/context'
import '../styles/Button.scss'
export default () => {
const [store] = useState()
return (
<Switch fallback={<Other />}>
<Match when={store.error.id === 'invalid_state'}>
<InvalidState title="Invalid State" />
</Match>
<Match when={store.error.id === 'invalid_config'}>
<InvalidState title="Invalid Config" />
</Match>
<Match when={store.error.id === 'invalid_draft'}>
<InvalidState title="Invalid Draft" />
</Match>
</Switch>
)
}
const InvalidState = (props: { title: string }) => {
const [store, ctrl] = useState()
const onClick = () => ctrl.clean()
return (
<div class="error" data-tauri-drag-region="true">
<div class="error">
<div class="container">
<h1>{props.title}</h1>
<p>
@ -15,7 +33,7 @@ const InvalidState = (props: { title: string }) => {
you can copy important notes from below, clean the state and paste it again.
</p>
<pre>
<code>{JSON.stringify(store.error)}</code>
<code>{JSON.stringify(store.error.props)}</code>
</pre>
<button class="primary" onClick={onClick}>
Clean
@ -28,10 +46,14 @@ const InvalidState = (props: { title: string }) => {
const Other = () => {
const [store, ctrl] = useState()
const onClick = () => ctrl.discard()
const getMessage = createMemo<ErrorObject['message']>(() => store.error.message)
const getMessage = () => {
const err = (store.error.props as any).error
return typeof err === 'string' ? err : err.message
}
return (
<div class="error" data-tauri-drag-region="true">
<div class="error">
<div class="container">
<h1>An error occurred.</h1>
<pre>
@ -44,21 +66,3 @@ const Other = () => {
</div>
)
}
export default () => {
const [store] = useState()
return (
<Switch fallback={<Other />}>
<Match when={store.error?.id === 'invalid_state'}>
<InvalidState title="Invalid State" />
</Match>
<Match when={store.error?.id === 'invalid_config'}>
<InvalidState title="Invalid Config" />
</Match>
<Match when={store.error?.id === 'invalid_file'}>
<InvalidState title="Invalid File" />
</Match>
</Switch>
)
}

19
src/components/Editor/components/Layout.tsx Normal file
View File

@ -0,0 +1,19 @@
import type { JSX } from 'solid-js/jsx-runtime'
import type { Config } from '../store/context'
import '../styles/Layout.scss'
export type Styled = {
children: JSX.Element
config?: Config
'data-testid'?: string
onClick?: () => void
onMouseEnter?: (e: MouseEvent) => void
}
export const Layout = (props: Styled) => {
return (
<div onMouseEnter={props.onMouseEnter} class="layout container" data-testid={props['data-testid']}>
{props.children}
</div>
)
}

127
src/components/Editor/prosemirror/index.tsx → src/components/Editor/components/ProseMirror.tsx
View File

@ -1,13 +1,12 @@
import { createEffect, untrack } from 'solid-js'
import { Store, unwrap } from 'solid-js/store'
import { EditorState, Plugin, Transaction } from 'prosemirror-state'
import { EditorState, EditorStateConfig, Transaction } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { Schema } from 'prosemirror-model'
import type { NodeViewFn, ProseMirrorExtension, ProseMirrorState } from './state'
import type { NodeViewFn, ProseMirrorExtension, ProseMirrorState } from '../prosemirror/helpers'
interface Props {
style?: string
class?: string
interface ProseMirrorProps {
cssClass?: string
text?: Store<ProseMirrorState>
editorView?: Store<EditorView>
extensions?: Store<ProseMirrorExtension[]>
@ -16,6 +15,53 @@ interface Props {
onChange: (s: EditorState) => void
}
export const ProseMirror = (props: ProseMirrorProps) => {
let editorRef: HTMLDivElement
const editorView = () => untrack(() => unwrap(props.editorView))
const dispatchTransaction = (tr: Transaction) => {
if (!editorView()) return
const newState = editorView().state.apply(tr)
editorView().updateState(newState)
if (!tr.docChanged) return
props.onChange(newState)
}
createEffect(
(payload: [EditorState, ProseMirrorExtension[]]) => {
const [prevText, prevExtensions] = payload
const text = unwrap(props.text)
const extensions: ProseMirrorExtension[] = unwrap(props.extensions)
if (!text || !extensions?.length) {
return [text, extensions]
}
if (!props.editorView) {
const { editorState, nodeViews } = createEditorState(text, extensions)
const view = new EditorView(editorRef, { state: editorState, nodeViews, dispatchTransaction })
view.focus()
props.onInit(editorState, view)
return [editorState, extensions]
}
if (extensions !== prevExtensions || (!(text instanceof EditorState) && text !== prevText)) {
const { editorState, nodeViews } = createEditorState(text, extensions, prevText)
if (!editorState) return
editorView().updateState(editorState)
editorView().setProps({ nodeViews, dispatchTransaction })
props.onReconfigure(editorState)
editorView().focus()
return [editorState, extensions]
}
return [text, extensions]
},
[props.text, props.extensions]
)
return <div ref={editorRef} class={props.cssClass} spell-check={false} />
}
const createEditorState = (
text: ProseMirrorState,
extensions: ProseMirrorExtension[],
@ -27,7 +73,7 @@ const createEditorState = (
const reconfigure = text instanceof EditorState && prevText?.schema
let schemaSpec = { nodes: {} }
let nodeViews = {}
let plugins: Plugin<any>[] = []
let plugins = []
for (const extension of extensions) {
if (extension.schema) {
@ -40,72 +86,21 @@ const createEditorState = (
}
const schema = reconfigure ? prevText.schema : new Schema(schemaSpec)
for (const extension of extensions) {
if (extension.plugins) {
plugins = extension.plugins(plugins, schema)
}
}
const editorState: EditorState = reconfigure
? text.reconfigure({ plugins })
: EditorState.fromJSON({ schema, plugins }, text as { [key: string]: any })
let editorState: EditorState
if (reconfigure) {
editorState = text.reconfigure({ schema, plugins } as EditorStateConfig)
} else if (text instanceof EditorState) {
editorState = EditorState.fromJSON({ schema, plugins }, text.toJSON())
} else if (text) {
console.debug(text)
editorState = EditorState.fromJSON({ schema, plugins }, text)
}
return { editorState, nodeViews }
}
export const ProseMirror = (props: Props) => {
let editorRef: HTMLDivElement
const editorView = () => untrack(() => unwrap(props.editorView))
const dispatchTransaction = (tr: Transaction) => {
if (!editorView()) return
const newState = editorView().state.apply(tr)
editorView().updateState(newState)
if (!tr.docChanged) return
props.onChange(newState)
}
// eslint-disable-next-line solid/reactivity
createEffect(
(state: [EditorState, ProseMirrorExtension[]]) => {
const [prevText, prevExtensions] = state
const text = unwrap(props.text) as EditorState
const extensions: ProseMirrorExtension[] = unwrap(props.extensions)
if (!text || !extensions?.length) return [text, extensions]
if (!props.editorView) {
const { editorState, nodeViews } = createEditorState(text, extensions)
const view = new EditorView(editorRef, {
state: editorState,
nodeViews,
dispatchTransaction
})
view.focus()
props.onInit(editorState, view)
return [editorState, extensions]
}
if (extensions !== prevExtensions || (!(text instanceof EditorState) && text !== prevText)) {
const { editorState, nodeViews } = createEditorState(text, extensions, prevText)
if (!editorState) return
editorView().updateState(editorState)
editorView().setProps({ nodeViews, dispatchTransaction })
props.onReconfigure(editorState)
editorView().focus()
return [editorState, extensions]
}
return [text, extensions]
},
[props.text, props.extensions]
)
return <div style={props.style} ref={editorRef} class={props.class} spell-check={false} />
}

3
src/components/Editor/components/Sidebar.module.scss Normal file
View File

@ -0,0 +1,3 @@
.withMargin {
margin-bottom: 10px;
}

204
src/components/Editor/components/Sidebar.tsx Normal file
View File

@ -0,0 +1,204 @@
import { For, Show, createEffect, createSignal, onCleanup } from 'solid-js'
import { unwrap } from 'solid-js/store'
import { undo, redo } from 'prosemirror-history'
import { Draft, useState } from '../store/context'
import { mod } from '../env'
import * as remote from '../remote'
import { isEmpty } from '../prosemirror/helpers'
import type { Styled } from './Layout'
import '../styles/Sidebar.scss'
import { clsx } from 'clsx'
import styles from './Sidebar.module.scss'
const Off = (props) => <div class="sidebar-off">{props.children}</div>
const Label = (props: Styled) => <h3 class="sidebar-label">{props.children}</h3>
const Link = (
props: Styled & { withMargin?: boolean; disabled?: boolean; title?: string; className?: string }
) => (
<button
class={clsx('sidebar-link', props.className, {
[styles.withMargin]: props.withMargin
})}
onClick={props.onClick}
disabled={props.disabled}
title={props.title}
data-testid={props['data-testid']}
>
{props.children}
</button>
)
export const Sidebar = () => {
const [store, ctrl] = useState()
const [lastAction, setLastAction] = createSignal<string | undefined>()
const toggleTheme = () => {
document.body.classList.toggle('dark')
ctrl.updateConfig({ theme: document.body.className })
}
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))
const collabUsers = () => store.collab?.y?.provider.awareness.meta.size ?? 0
const onUndo = () => undo(editorView().state, editorView().dispatch)
const onRedo = () => redo(editorView().state, editorView().dispatch)
const onCopyAllAsMd = () =>
remote.copyAllAsMarkdown(editorView().state).then(() => setLastAction('copy-md'))
const onDiscard = () => ctrl.discard()
const [isHidden, setIsHidden] = createSignal<boolean | false>()
const toggleSidebar = () => {
setIsHidden(!isHidden())
}
toggleSidebar()
const onCollab = () => {
const state = unwrap(store)
store.collab?.started ? ctrl.stopCollab(state) : ctrl.startCollab(state)
}
// eslint-disable-next-line sonarjs/cognitive-complexity
const DraftLink = (p: { draft: Draft }) => {
const length = 100
let content = ''
const getContent = (node: any) => {
if (node.text) {
content += node.text
}
if (content.length > length) {
content = content.slice(0, Math.max(0, length)) + '...'
return content
}
if (node.content) {
for (const child of node.content) {
if (content.length >= length) {
break
}
content = getContent(child)
}
}
return content
}
const text = () =>
p.draft.path
? p.draft.path.slice(Math.max(0, p.draft.path.length - length))
: getContent(p.draft.text?.doc)
return (
// eslint-disable-next-line solid/no-react-specific-props
<Link className="draft" onClick={() => onOpenDraft(p.draft)} data-testid="open">
{text()} {p.draft.path && '📎'}
</Link>
)
}
const Keys = (props) => (
<span>
<For each={props.keys}>{(k: Element) => <i>{k}</i>}</For>
</span>
)
createEffect(() => {
setLastAction()
}, store.lastModified)
createEffect(() => {
if (!lastAction()) return
const id = setTimeout(() => {
setLastAction()
}, 1000)
onCleanup(() => clearTimeout(id))
})
return (
<div class={'sidebar-container' + (isHidden() ? ' sidebar-container--hidden' : '')}>
<span class="sidebar-opener" onClick={toggleSidebar}>
Советы и&nbsp;предложения
</span>
<Off onClick={() => editorView().focus()}>
<div class="sidebar-closer" onClick={toggleSidebar} />
<Show when={true}>
<div>
{store.path && (
<Label>
<i>({store.path.slice(Math.max(0, store.path.length - 24))})</i>
</Label>
)}
<Link>Пригласить соавторов</Link>
<Link>Настройки публикации</Link>
<Link>История правок</Link>
<div class="theme-switcher">
Ночная тема
<input type="checkbox" name="theme" id="theme" onClick={toggleTheme} />
<label for="theme">Ночная тема</label>
</div>
<Link
onClick={onDiscard}
disabled={!store.path && store.drafts.length === 0 && isEmpty(store.text)}
data-testid="discard"
>
{discardText()} <Keys keys={[mod, 'w']} />
</Link>
<Link onClick={onUndo}>
Undo <Keys keys={[mod, 'z']} />
</Link>
<Link onClick={onRedo}>
Redo <Keys keys={[mod, 'Shift', 'z']} />
</Link>
<Link onClick={onToggleMarkdown} data-testid="markdown">
Markdown mode {store.markdown && '✅'} <Keys keys={[mod, 'm']} />
</Link>
<Link onClick={onCopyAllAsMd}>Copy all as MD {lastAction() === 'copy-md' && '📋'}</Link>
<Show when={store.drafts.length > 0}>
<h4>Drafts:</h4>
<p>
<For each={store.drafts}>{(draft) => <DraftLink draft={draft} />}</For>
</p>
</Show>
<Link onClick={onCollab} title={store.collab?.error ? 'Connection error' : ''}>
Collab {collabText()}
</Link>
<Show when={collabUsers() > 0}>
<span>
{collabUsers()} {collabUsers() === 1 ? 'user' : 'users'} connected
</span>
</Show>
</div>
</Show>
</Off>
</div>
)
}

25
src/components/Editor/db.ts
View File

@ -1,30 +1,31 @@
import { openDB } from 'idb'
const dbPromise = openDB('discours.io', 2, {
upgrade(db) {
db.createObjectStore('keyval')
}
})
const dbPromise = async () => {
const { openDB } = await import('idb')
return openDB('discours.io', 2, {
upgrade(db) {
db.createObjectStore('keyval')
}
})
}
export default {
async get(key: string) {
const result = await dbPromise
const result = await dbPromise()
return result.get('keyval', key)
},
async set(key: string, val: string) {
const result = await dbPromise
const result = await dbPromise()
return result.put('keyval', val, key)
},
async delete(key: string) {
const result = await dbPromise
const result = await dbPromise()
return result.delete('keyval', key)
},
async clear() {
const result = await dbPromise
const result = await dbPromise()
return result.clear('keyval')
},
async keys() {
const result = await dbPromise
const result = await dbPromise()
return result.getAllKeys('keyval')
}
}

3
src/components/Editor/env.ts Normal file
View File

@ -0,0 +1,3 @@
export const isDark = () => (window as any).matchMedia('(prefers-color-scheme: dark)').matches
export const mod = 'Ctrl'
export const alt = 'Alt'

77
src/components/Editor/prosemirror/markdown.ts → src/components/Editor/markdown.ts
View File

@ -1,18 +1,29 @@
import markdownit from 'markdown-it'
import type Token from 'markdown-it/lib/token'
import { MarkdownSerializer, MarkdownParser, defaultMarkdownSerializer } from 'prosemirror-markdown'
import {
MarkdownSerializer,
MarkdownParser,
defaultMarkdownSerializer,
MarkdownSerializerState
} from 'prosemirror-markdown'
import type { Node, Schema } from 'prosemirror-model'
import type { EditorState } from 'prosemirror-state'
export const serialize = (state: EditorState) => {
let text = markdownSerializer.serialize(state.doc)
if (text.charAt(text.length - 1) !== '\n') {
text += '\n'
}
return text
}
function findAlignment(cell: Node): string | null {
const alignment = cell.attrs.style as string
if (!alignment) {
return null
}
const match = alignment.match(/text-align: ?(left|right|center)/)
if (match && match[1]) {
return match[1]
}
@ -23,41 +34,34 @@ function findAlignment(cell: Node): string | null {
export const markdownSerializer = new MarkdownSerializer(
{
...defaultMarkdownSerializer.nodes,
image(state, node) {
image(state: MarkdownSerializerState, node: Node) {
const alt = state.esc(node.attrs.alt || '')
const src = node.attrs.path ?? node.attrs.src
// FIXME !!!!!!!!!
// const title = node.attrs.title ? state.quote(node.attrs.title) : undefined
const title = node.attrs.title
state.write(`![${alt}](${src}${title || ''})\n`)
const title = node.attrs.title ? `"${node.attrs.title}"` : undefined
state.write(`![${alt}](${src}${title ? ' ' + title : ''})\n`)
/* ![<alt-text>](<src-url> "<title>") */
},
code_block(state, node) {
const src = node.attrs.params.src
if (src) {
const title = state.esc(node.attrs.params.title || '')
state.write(`![${title}](${src})\n`)
return
}
state.write(`\`\`\`${node.attrs.params.lang || ''}\n`)
state.write('```' + (node.attrs.params.lang || '') + '\n')
state.text(node.textContent, false)
state.ensureNewLine()
state.write('```')
state.closeBlock(node)
},
todo_item(state, node) {
state.write(`${node.attrs.done ? '[x]' : '[ ]'} `)
state.write((node.attrs.done ? '[x]' : '[ ]') + ' ')
state.renderContent(node)
},
table(state, node) {
function serializeTableHead(head: Node) {
let columnAlignments: string[] = []
head.forEach((headRow) => {
if (headRow.type.name === 'table_row') {
columnAlignments = serializeTableRow(headRow)
@ -71,7 +75,6 @@ export const markdownSerializer = new MarkdownSerializer(
state.write('---')
state.write(alignment === 'right' || alignment === 'center' ? ':' : ' ')
}
state.write('|')
state.ensureNewLine()
}
@ -87,17 +90,14 @@ export const markdownSerializer = new MarkdownSerializer(
function serializeTableRow(row: Node): string[] {
const columnAlignment: string[] = []
row.forEach((cell) => {
if (cell.type.name === 'table_header' || cell.type.name === 'table_cell') {
const alignment = serializeTableCell(cell)
columnAlignment.push(alignment)
}
})
state.write('|')
state.ensureNewLine()
return columnAlignment
}
@ -105,13 +105,11 @@ export const markdownSerializer = new MarkdownSerializer(
state.write('| ')
state.renderInline(cell)
state.write(' ')
return findAlignment(cell)
}
node.forEach((table_child) => {
if (table_child.type.name === 'table_head') serializeTableHead(table_child)
if (table_child.type.name === 'table_body') serializeTableBody(table_child)
})
@ -130,24 +128,11 @@ export const markdownSerializer = new MarkdownSerializer(
}
)
export const serialize = (state: EditorState) => {
// eslint-disable-next-line no-use-before-define
let text = markdownSerializer.serialize(state.doc)
if (text.charAt(text.length - 1) !== '\n') {
text += '\n'
function listIsTight(tokens: any, idx: number) {
let i = idx
while (++i < tokens.length) {
if (tokens[i].type !== 'list_item_open') return tokens[i].hidden
}
return text
}
function listIsTight(tokens: any[], i: number) {
for (let index = i + 1; i < tokens.length; index++) {
if (tokens[index].type !== 'list_item_open') {
return tokens[i].hidden
}
}
return false
}
@ -176,20 +161,18 @@ export const createMarkdownParser = (schema: Schema) =>
list_item: { block: 'list_item' },
bullet_list: {
block: 'bullet_list',
getAttrs: (_: Token, tokens: Token[], i: number): Record<string, any> => ({
tight: listIsTight(tokens, i)
})
getAttrs: (_, tokens, i) => ({ tight: listIsTight(tokens, i) })
},
ordered_list: {
block: 'ordered_list',
getAttrs: (tok: Token, tokens: Token[], i: number): Record<string, any> => ({
order: Number(tok.attrGet('start')) || 1,
getAttrs: (tok, tokens, i) => ({
order: +tok.attrGet('start') || 1,
tight: listIsTight(tokens, i)
})
},
heading: {
block: 'heading',
getAttrs: (tok) => ({ level: Number(tok.tag.slice(1)) })
getAttrs: (tok) => ({ level: +tok.tag.slice(1) })
},
code_block: {
block: 'code_block',
@ -203,7 +186,7 @@ export const createMarkdownParser = (schema: Schema) =>
hr: { node: 'horizontal_rule' },
image: {
node: 'image',
getAttrs: (tok: any) => ({
getAttrs: (tok) => ({
src: tok.attrGet('src'),
title: tok.attrGet('title') || null,
alt: (tok.children[0] && tok.children[0].content) || null

9
src/components/Editor/prosemirror/extension/base.ts
View File

@ -1,12 +1,13 @@
import { schema as markdownSchema } from 'prosemirror-markdown'
import { Schema } from 'prosemirror-model'
import { NodeSpec, Schema } from 'prosemirror-model'
import { baseKeymap } from 'prosemirror-commands'
import { sinkListItem, liftListItem } from 'prosemirror-schema-list'
import { history } from 'prosemirror-history'
import { dropCursor } from 'prosemirror-dropcursor'
import { buildKeymap } from 'prosemirror-example-setup'
import { keymap } from 'prosemirror-keymap'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
import type OrderedMap from 'orderedmap'
const plainSchema = new Schema({
nodes: {
@ -29,7 +30,7 @@ const blockquoteSchema = {
content: 'block+',
group: 'block',
toDOM: () => ['div', ['blockquote', 0]]
}
} as NodeSpec
export default (plain = false): ProseMirrorExtension => ({
schema: () =>
@ -39,7 +40,7 @@ export default (plain = false): ProseMirrorExtension => ({
marks: plainSchema.spec.marks
}
: {
nodes: (markdownSchema.spec.nodes as any).update('blockquote', blockquoteSchema),
nodes: (markdownSchema.spec.nodes as OrderedMap<NodeSpec>).update('blockquote', blockquoteSchema),
marks: markdownSchema.spec.marks
},
plugins: (prev, schema) => [

5
src/components/Editor/prosemirror/extension/code.ts
View File

@ -4,7 +4,7 @@ import type { EditorState, Transaction } from 'prosemirror-state'
import type { EditorView } from 'prosemirror-view'
import { keymap } from 'prosemirror-keymap'
import { markInputRule } from './mark-input-rule'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
const blank = '\u00A0'
@ -12,21 +12,18 @@ const onArrow =
(dir: 'left' | 'right') =>
(state: EditorState, dispatch: (tr: Transaction) => void, editorView: EditorView) => {
if (!state.selection.empty) return false
const $pos = state.selection.$head
const isCode = $pos.marks().find((m: Mark) => m.type.name === 'code')
const tr = state.tr
if (dir === 'left') {
const up = editorView.endOfTextblock('up')
if (!$pos.nodeBefore && up && isCode) {
tr.insertText(blank, $pos.pos - 1, $pos.pos)
dispatch(tr)
}
} else {
const down = editorView.endOfTextblock('down')
if (!$pos.nodeAfter && down && isCode) {
tr.insertText(blank, $pos.pos, $pos.pos + 1)
dispatch(tr)

18
src/components/Editor/prosemirror/extension/collab.ts
View File

@ -1,18 +1,21 @@
import { ySyncPlugin, yCursorPlugin, yUndoPlugin } from 'y-prosemirror'
import type { ProseMirrorExtension } from '../state'
import type { YOptions } from '../../store'
import type { ProseMirrorExtension } from '../helpers'
import type { YOptions } from '../../store/context'
export const cursorBuilder = (user: any): HTMLElement => {
interface YUser {
background: string
foreground: string
name: string
}
export const cursorBuilder = (user: YUser): HTMLElement => {
const cursor = document.createElement('span')
cursor.classList.add('ProseMirror-yjs-cursor')
cursor.setAttribute('style', `border-color: ${user.background}`)
const userDiv = document.createElement('span')
userDiv.setAttribute('style', `background-color: ${user.background}; color: ${user.foreground}`)
userDiv.textContent = user.name
cursor.append(userDiv)
return cursor
}
@ -22,9 +25,6 @@ export default (y: YOptions): ProseMirrorExtension => ({
? [
...prev,
ySyncPlugin(y.type),
// FIXME
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
yCursorPlugin(y.provider.awareness, { cursorBuilder }),
yUndoPlugin()
]

15
src/components/Editor/prosemirror/extension/drag-handle.ts
View File

@ -1,6 +1,6 @@
import { Plugin, NodeSelection } from 'prosemirror-state'
import { DecorationSet, Decoration } from 'prosemirror-view'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
const handleIcon = `
<svg viewBox="0 0 10 10" height="14" width="14">
@ -9,14 +9,11 @@ const handleIcon = `
const createDragHandle = () => {
const handle = document.createElement('span')
handle.setAttribute('contenteditable', 'false')
const icon = document.createElement('span')
icon.innerHTML = handleIcon
handle.append(icon)
handle.appendChild(icon)
handle.classList.add('handle')
return handle
}
@ -24,13 +21,10 @@ const handlePlugin = new Plugin({
props: {
decorations(state) {
const decos = []
state.doc.forEach((node, pos) => {
decos.push(
Decoration.widget(pos + 1, createDragHandle),
Decoration.node(pos, pos + node.nodeSize, {
class: 'draggable'
})
Decoration.node(pos, pos + node.nodeSize, { class: 'draggable' })
)
})
@ -39,15 +33,12 @@ const handlePlugin = new Plugin({
handleDOMEvents: {
mousedown: (editorView, event) => {
const target = event.target as Element
if (target.classList.contains('handle')) {
const pos = editorView.posAtCoords({ left: event.x, top: event.y })
const resolved = editorView.state.doc.resolve(pos.pos)
const tr = editorView.state.tr
tr.setSelection(NodeSelection.create(editorView.state.doc, resolved.before()))
editorView.dispatch(tr)
return false
}
}

84
src/components/Editor/prosemirror/extension/image.ts
View File

@ -1,18 +1,15 @@
import { Plugin } from 'prosemirror-state'
import type { Node, Schema } from 'prosemirror-model'
import type { EditorView } from 'prosemirror-view'
// import { convertFileSrc } from '@tauri-apps/api/tauri'
// import { resolvePath, dirname } from '../../remote'
// import { isTauri } from '../../env'
import type { ProseMirrorExtension } from '../state'
import type { NodeViewFn, ProseMirrorExtension } from '../helpers'
import type OrderedMap from 'orderedmap'
const REGEX = /^!\[([^[\]]*)]\((.+?)\)\s+/
const REGEX = /^!\[([^[\]]*?)]\((.+?)\)\s+/
const MAX_MATCH = 500
const isUrl = (str: string) => {
try {
const url = new URL(str)
return url.protocol === 'http:' || url.protocol === 'https:'
} catch {
return false
@ -20,64 +17,35 @@ const isUrl = (str: string) => {
}
const isBlank = (text: string) => text === ' ' || text === '\u00A0'
/*
export const getImagePath = async (src: string, path?: string) => {
let paths = [src]
if (path) paths = [await dirname(path), src]
const absolutePath = await resolvePath(paths)
return convertFileSrc(absolutePath)
}
*/
const imageInput = (schema: Schema, _path?: string) =>
const imageInput = (schema: Schema, path?: string) =>
new Plugin({
props: {
handleTextInput(view, from, to, text) {
if (view.composing || !isBlank(text)) return false
const $from = view.state.doc.resolve(from)
if ($from.parent.type.spec.code) return false
const textBefore =
$from.parent.textBetween(
Math.max(0, $from.parentOffset - MAX_MATCH),
$from.parentOffset,
undefined,
null,
'\uFFFC'
) + text
const match = REGEX.exec(textBefore)
if (match) {
const [, title, src] = match
if (isUrl(src)) {
const node = schema.node('image', { src, title })
const start = from - (match[0].length - text.length)
const tr = view.state.tr
tr.delete(start, to)
tr.insert(start, node)
view.dispatch(tr)
return true
}
// if (!isTauri) return false
/*
getImagePath(src, path).then((p) => {
const node = schema.node('image', { src: p, title, path: src })
const start = from - (match[0].length - text.length)
const tr = view.state.tr
tr.delete(start, to)
tr.insert(start, node)
view.dispatch(tr)
})
*/
return false
}
}
@ -121,13 +89,9 @@ export const insertImage = (view: EditorView, src: string, left: number, top: nu
const state = view.state
const tr = state.tr
const node = state.schema.nodes.image.create({ src })
if (view) {
const pos = view.posAtCoords({ left, top }).pos
tr.insert(pos, node)
view.dispatch(tr)
}
const pos = view.posAtCoords({ left, top }).pos
tr.insert(pos, node)
view.dispatch(tr)
}
class ImageView {
@ -144,7 +108,7 @@ class ImageView {
width: number
updating: number
constructor(node: Node, view: EditorView, getPos: () => number, schema: Schema, _path: string) {
constructor(node: Node, view: EditorView, getPos: () => number, schema: Schema, path: string) {
this.node = node
this.view = view
this.getPos = getPos
@ -154,23 +118,11 @@ class ImageView {
this.container = document.createElement('span')
this.container.className = 'image-container'
if (node.attrs.width) this.setWidth(node.attrs.width)
const image = document.createElement('img')
image.setAttribute('title', node.attrs.title ?? '')
if (
// isTauri &&
!node.attrs.src.startsWith('asset:') &&
!node.attrs.src.startsWith('data:') &&
!isUrl(node.attrs.src)
) {
// getImagePath(node.attrs.src, path).then((p) => image.setAttribute('src', p))
} else {
image.setAttribute('src', node.attrs.src)
}
image.setAttribute('src', node.attrs.src)
this.handle = document.createElement('span')
this.handle.className = 'resize-handle'
@ -180,8 +132,8 @@ class ImageView {
window.addEventListener('mouseup', this.onResizeEndFn)
})
this.container.append(image)
this.container.append(this.handle)
this.container.appendChild(image)
this.container.appendChild(this.handle)
this.dom = this.container
}
@ -192,12 +144,9 @@ class ImageView {
onResizeEnd() {
window.removeEventListener('mousemove', this.onResizeFn)
if (this.updating === this.width) return
this.updating = this.width
const tr = this.view.state.tr
tr.setNodeMarkup(this.getPos(), undefined, {
...this.node.attrs,
width: this.width
@ -207,22 +156,19 @@ class ImageView {
}
setWidth(width: number) {
this.container.style.width = `${width}px`
this.container.style.width = width + 'px'
}
}
export default (path?: string): ProseMirrorExtension => ({
schema: (prev) => ({
...prev,
nodes: (prev.nodes as any).update('image', imageSchema)
nodes: (prev.nodes as OrderedMap<any>).update('image', imageSchema)
}),
plugins: (prev, schema) => [...prev, imageInput(schema, path)],
nodeViews: {
// FIXME something is not right
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
image: (node, view, getPos) => {
return new ImageView(node, view, getPos, view.state.schema, path)
}
}
} as unknown as { [key: string]: NodeViewFn }
})

1
src/components/Editor/prosemirror/extension/index.d.ts vendored
View File

@ -1 +0,0 @@
declare module 'prosemirror-example-setup'

90
src/components/Editor/prosemirror/extension/link.ts
View File

@ -1,16 +1,14 @@
import { Plugin, PluginKey, TextSelection, Transaction } from 'prosemirror-state'
import type { EditorView } from 'prosemirror-view'
import type { Mark, Node, ResolvedPos, Schema } from 'prosemirror-model'
import type { ProseMirrorExtension } from '../state'
import type { Mark, Node, Schema } from 'prosemirror-model'
import type { ProseMirrorExtension } from '../helpers'
const REGEX = /(^|\s)\[(.+)]\(([^ ]+)(?: "(.+)")?\)/
const findMarkPosition = (mark: Mark, doc: Node, from: number, to: number) => {
let markPos = { from: -1, to: -1 }
doc.nodesBetween(from, to, (node, pos) => {
if (markPos.from > -1) return false
if (markPos.from === -1 && mark.isInSet(node.marks)) {
markPos = { from: pos, to: pos + Math.max(node.textContent.length, 1) }
}
@ -21,6 +19,38 @@ const findMarkPosition = (mark: Mark, doc: Node, from: number, to: number) => {
const pluginKey = new PluginKey('markdown-links')
const markdownLinks = (schema: Schema) =>
new Plugin({
key: pluginKey,
state: {
init() {
return { schema }
},
apply(tr, state: any) {
const action = tr.getMeta(this)
if (action?.pos) {
state.pos = action.pos
}
return state
}
},
props: {
handleDOMEvents: {
keyup: (view) => {
return handleMove(view)
},
click: (view, e) => {
if (handleMove(view)) {
e.preventDefault()
}
return true
}
}
}
})
const resolvePos = (view: EditorView, pos: number) => {
try {
return view.state.doc.resolve(pos)
@ -29,7 +59,6 @@ const resolvePos = (view: EditorView, pos: number) => {
}
}
// FIXME
// eslint-disable-next-line sonarjs/cognitive-complexity
const toLink = (view: EditorView, tr: Transaction) => {
const sel = view.state.selection
@ -38,7 +67,6 @@ const toLink = (view: EditorView, tr: Transaction) => {
if (lastPos !== undefined) {
const $from = resolvePos(view, lastPos)
if (!$from || $from.depth === 0 || $from.parent.type.spec.code) {
return false
}
@ -62,8 +90,7 @@ const toLink = (view: EditorView, tr: Transaction) => {
// Do not convert md links if content has marks
const $startPos = resolvePos(view, start)
if (($startPos as ResolvedPos).marks().length > 0) {
if ($startPos.marks().length > 0) {
return false
}
@ -71,15 +98,12 @@ const toLink = (view: EditorView, tr: Transaction) => {
const textEnd = textStart + text.length
if (textEnd < end) tr.delete(textEnd, end)
if (textStart > start) tr.delete(start, textStart)
const to = start + text.length
tr.addMark(start, to, state.schema.marks.link.create({ href }))
const sub = end - textEnd + textStart - start
tr.setMeta(pluginKey, { pos: sel.$head.pos - sub })
return true
@ -92,7 +116,6 @@ const toLink = (view: EditorView, tr: Transaction) => {
const toMarkdown = (view: EditorView, tr: Transaction) => {
const { schema } = pluginKey.getState(view.state)
const sel = view.state.selection
if (sel.$head.depth === 0 || sel.$head.parent.type.spec.code) {
return false
}
@ -105,11 +128,9 @@ const toMarkdown = (view: EditorView, tr: Transaction) => {
const { href } = mark.attrs
const range = findMarkPosition(mark, view.state.doc, textFrom, textTo)
const text = view.state.doc.textBetween(range.from, range.to, '\0', '\0')
tr.replaceRangeWith(range.from, range.to, view.state.schema.text(`[${text}](${href})`))
tr.setSelection(new TextSelection(tr.doc.resolve(sel.$head.pos + 1)))
tr.setMeta(pluginKey, { pos: sel.$head.pos })
return true
}
@ -118,66 +139,25 @@ const toMarkdown = (view: EditorView, tr: Transaction) => {
const handleMove = (view: EditorView) => {
const sel = view.state.selection
if (!sel.empty || !sel.$head) return false
const pos = sel.$head.pos
const tr = view.state.tr
if (toLink(view, tr)) {
view.dispatch(tr)
return true
}
if (toMarkdown(view, tr)) {
view.dispatch(tr)
return true
}
tr.setMeta(pluginKey, { pos })
view.dispatch(tr)
return false
}
const markdownLinks = (schema: Schema) =>
new Plugin({
key: pluginKey,
state: {
init() {
return { schema }
},
apply(tr, state) {
const action = tr.getMeta(this)
if (action?.pos) {
// FIXME
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
state.pos = action.pos
}
return state
}
},
props: {
handleDOMEvents: {
keyup: (view) => {
return handleMove(view)
},
click: (view, e) => {
if (handleMove(view)) {
e.preventDefault()
}
return true
}
}
}
})
export default (): ProseMirrorExtension => ({
plugins: (prev, schema) => [...prev, markdownLinks(schema)]
})

25
src/components/Editor/prosemirror/extension/mark-input-rule.ts
View File

@ -2,37 +2,26 @@ import { InputRule } from 'prosemirror-inputrules'
import type { EditorState } from 'prosemirror-state'
import type { MarkType } from 'prosemirror-model'
export const markInputRule = (regexp: RegExp, nodeType: MarkType, getAttrs?) =>
// FIXME ?
new InputRule(regexp, (state: EditorState, match: string[], start: number, endArg: number) => {
export const markInputRule = (regexp: RegExp, nodeType: MarkType, getAttrs = null) =>
new InputRule(regexp, (state: EditorState, match: string[], start: number, end: number) => {
let markEnd = end
const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs
const tr = state.tr
let end = endArg
if (match[1]) {
const textStart = start + match[0].indexOf(match[1])
const textEnd = textStart + match[1].length
let hasMarks = false
state.doc.nodesBetween(textStart, textEnd, (node) => {
if (node.marks.length > 0) {
hasMarks = true
}
hasMarks = node.marks.length > 0
})
if (hasMarks) {
return
}
if (hasMarks) return
if (textEnd < end) tr.delete(textEnd, end)
if (textStart > start) tr.delete(start, textStart)
end = start + match[1].length
markEnd = start + match[1].length
}
tr.addMark(start, end, nodeType.create(attrs))
tr.addMark(start, markEnd, nodeType.create(attrs))
tr.removeStoredMark(nodeType)
return tr
})

6
src/components/Editor/prosemirror/extension/markdown.ts
View File

@ -7,7 +7,7 @@ import {
ellipsis
} from 'prosemirror-inputrules'
import type { NodeType, Schema } from 'prosemirror-model'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
const blockQuoteRule = (nodeType: NodeType) => wrappingInputRule(/^\s*>\s$/, nodeType)
@ -16,9 +16,7 @@ const orderedListRule = (nodeType: NodeType) =>
/^(\d+)\.\s$/,
nodeType,
(match) => ({ order: +match[1] }),
// FIXME
// eslint-disable-next-line eqeqeq
(match, node) => node.childCount + node.attrs.order == +match[1]
(match, node) => node.childCount + node.attrs.order === +match[1]
)
const bulletListRule = (nodeType: NodeType) => wrappingInputRule(/^\s*([*+-])\s$/, nodeType)

166
src/components/Editor/prosemirror/extension/menu.ts
View File

@ -13,18 +13,18 @@ import {
Dropdown
} from 'prosemirror-menu'
import type { MenuItemSpec, MenuElement } from 'prosemirror-menu'
import { wrapInList } from 'prosemirror-schema-list'
import { NodeSelection } from 'prosemirror-state'
import type { NodeSelection } from 'prosemirror-state'
import { TextField, openPrompt } from './prompt'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
import type { Schema } from 'prosemirror-model'
// Helpers to create specific types of items
function canInsert(state: { selection: { $from: any } }, nodeType: any) {
const cut = (something) => something.filter(Boolean)
function canInsert(state, nodeType) {
const $from = state.selection.$from
for (let d = $from.depth; d >= 0; d--) {
@ -36,31 +36,19 @@ function canInsert(state: { selection: { $from: any } }, nodeType: any) {
return false
}
function insertImageItem(nodeType: { createAndFill: (arg0: any) => any }) {
function insertImageItem(nodeType) {
return new MenuItem({
icon: icons.image,
label: 'image',
enable(state: any) {
enable(state) {
return canInsert(state, nodeType)
},
run(
state: {
selection: { node?: any; from?: any; to?: any }
doc: { textBetween: (arg0: any, arg1: any, arg2: string) => any }
},
_: any,
view: {
dispatch: (arg0: any) => void
state: { tr: { replaceSelectionWith: (arg0: any) => any } }
focus: () => void
}
) {
const { from, to, node } = state.selection
let attrs = null
if (state.selection instanceof NodeSelection && node.type === nodeType) {
attrs = node.attrs
}
run(state, _, view) {
const {
from,
to,
node: { attrs }
} = state.selection as NodeSelection
openPrompt({
title: 'Insert image',
@ -76,9 +64,8 @@ function insertImageItem(nodeType: { createAndFill: (arg0: any) => any }) {
value: attrs ? attrs.alt : state.doc.textBetween(from, to, ' ')
})
},
// eslint-disable-next-line no-shadow
callback(attrs: any) {
view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(attrs)))
callback(newAttrs) {
view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(newAttrs)))
view.focus()
}
})
@ -86,32 +73,22 @@ function insertImageItem(nodeType: { createAndFill: (arg0: any) => any }) {
})
}
function cmdItem(
cmd: (arg0: any) => any,
options: { [x: string]: any; active?: (state: any) => any; enable?: any; title?: any; select?: any }
) {
function cmdItem(cmd, options) {
const passedOptions = {
label: options.title,
run: cmd
} as { [key: string]: any }
Object.keys(options).forEach((prop) => (passedOptions[prop] = options[prop]))
if ((!options.enable || options.enable === true) && !options.select) {
passedOptions[options.enable ? 'enable' : 'select'] = (state: any) => cmd(state)
}
return new MenuItem(passedOptions as MenuItemSpec)
for (const prop in options) passedOptions[prop] = options[prop]
if ((!options.enable || options.enable === true) && !options.select) {
passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state)
}
return new MenuItem(passedOptions)
}
function markActive(
state: {
selection: { from: any; $from: any; to: any; empty: any }
storedMarks: any
doc: { rangeHasMark: (arg0: any, arg1: any, arg2: any) => any }
},
type: { isInSet: (arg0: any) => any }
) {
function markActive(state, type) {
const { from, $from, to, empty } = state.selection
if (empty) return type.isInSet(state.storedMarks || $from.marks())
@ -119,20 +96,20 @@ function markActive(
return state.doc.rangeHasMark(from, to, type)
}
function markItem(markType: any, options: { [x: string]: any; title?: string; icon?: any }) {
function markItem(markType, options) {
const passedOptions = {
active(state: any) {
active(state) {
return markActive(state, markType)
},
enable: true
} as { [key: string]: any }
}
Object.keys(options).forEach((prop: string) => (passedOptions[prop] = options[prop]))
for (const prop in options) passedOptions[prop] = options[prop]
return cmdItem(toggleMark(markType), passedOptions)
}
function linkItem(markType: any) {
function linkItem(markType) {
return new MenuItem({
title: 'Add or remove link',
icon: {
@ -140,13 +117,13 @@ function linkItem(markType: any) {
height: 18,
path: 'M3.27177 14.7277C2.06258 13.5186 2.06258 11.5527 3.27177 10.3435L6.10029 7.51502L4.75675 6.17148L1.92823 9C-0.0234511 10.9517 -0.0234511 14.1196 1.92823 16.0713C3.87991 18.023 7.04785 18.023 8.99952 16.0713L11.828 13.2428L10.4845 11.8992L7.65598 14.7277C6.44679 15.9369 4.48097 15.9369 3.27177 14.7277ZM6.87756 12.536L12.5346 6.87895L11.1203 5.46469L5.4633 11.1217L6.87756 12.536ZM6.17055 4.75768L8.99907 1.92916C10.9507 -0.0225206 14.1187 -0.0225201 16.0704 1.92916C18.022 3.88084 18.022 7.04878 16.0704 9.00046L13.2418 11.829L11.8983 10.4854L14.7268 7.65691C15.936 6.44772 15.936 4.4819 14.7268 3.27271C13.5176 2.06351 11.5518 2.06351 10.3426 3.2727L7.51409 6.10122L6.17055 4.75768Z'
},
active(state: any) {
active(state) {
return markActive(state, markType)
},
enable(state: { selection: { empty: any } }) {
enable(state) {
return !state.selection.empty
},
run(state: any, dispatch: any, view: { state: any; dispatch: any; focus: () => void }) {
run(state, dispatch, view) {
if (markActive(state, markType)) {
toggleMark(markType)(state, dispatch)
@ -160,7 +137,7 @@ function linkItem(markType: any) {
required: true
})
},
callback(attrs: any) {
callback(attrs) {
toggleMark(markType, attrs)(view.state, view.dispatch)
view.focus()
}
@ -169,14 +146,7 @@ function linkItem(markType: any) {
})
}
function wrapListItem(
nodeType: any,
options: {
title?: string
icon?: { width: number; height: number; path: string } | { width: number; height: number; path: string }
attrs?: any
}
) {
function wrapListItem(nodeType, options) {
return cmdItem(wrapInList(nodeType, options.attrs), options)
}
@ -238,24 +208,10 @@ function wrapListItem(
// **`fullMenu`**`: [[MenuElement]]`
// : An array of arrays of menu elements for use as the full menu
// for, for example the [menu bar](https://github.com/prosemirror/prosemirror-menu#user-content-menubar).
/*
type BuildSchema = {
marks: { strong: any; em: any; code: any; link: any; blockquote: any }
nodes: {
image: any
bullet_list: any
ordered_list: any
blockquote: any
paragraph: any
code_block: any
heading: any
horizontal_rule: any
}
}
*/
export function buildMenuItems(schema: Schema) {
// eslint-disable-next-line sonarjs/cognitive-complexity
export function buildMenuItems(schema: Schema<any, any>) {
const r: { [key: string]: MenuItem | MenuItem[] } = {}
let type: any
let type
if ((type = schema.marks.strong)) {
r.toggleStrong = markItem(type, {
@ -360,41 +316,29 @@ export function buildMenuItems(schema: Schema) {
r.insertHorizontalRule = new MenuItem({
label: '---',
icon: icons.horizontal_rule,
enable(state: any) {
enable(state) {
return canInsert(state, hr)
},
run(state: { tr: { replaceSelectionWith: (arg0: any) => any } }, dispatch: (arg0: any) => void) {
run(state, dispatch) {
dispatch(state.tr.replaceSelectionWith(hr.create()))
}
})
}
const tMenu = new Dropdown(
[
r.makeHead1 as MenuElement,
r.makeHead2 as MenuElement,
r.makeHead3 as MenuElement,
r.typeMenu as MenuElement,
r.wrapBlockQuote as MenuElement
],
{
label: 'Тт',
// FIXME !!!!!!!!!
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: {
width: 12,
height: 12,
path: 'M6.39999 3.19998V0H20.2666V3.19998H14.9333V15.9999H11.7333V3.19998H6.39999ZM3.19998 8.5334H0V5.33342H9.59994V8.5334H6.39996V16H3.19998V8.5334Z'
}
}
)
r.typeMenu = tMenu as MenuItem
// r.blockMenu = []
r.listMenu = [r.wrapBulletList as MenuItem, r.wrapOrderedList as MenuItem]
r.inlineMenu = [r.toggleStrong as MenuItem, r.toggleEm as MenuItem, r.toggleMark as MenuItem]
r.fullMenu = [...r.inlineMenu, r.typeMenu, ...r.listMenu]
r.typeMenu = new Dropdown(cut([r.makeHead1, r.makeHead2, r.makeHead3, r.typeMenu, r.wrapBlockQuote]), {
label: 'Тт',
class: 'editor-dropdown' // TODO: use this class
// FIXME: icon svg code shouldn't be here
// icon: {
// width: 12,
// height: 12,
// path: "M6.39999 3.19998V0H20.2666V3.19998H14.9333V15.9999H11.7333V3.19998H6.39999ZM3.19998 8.5334H0V5.33342H9.59994V8.5334H6.39996V16H3.19998V8.5334Z"
// }
}) as MenuItem
r.blockMenu = []
r.listMenu = [cut([r.wrapBulletList, r.wrapOrderedList])]
r.inlineMenu = [cut([r.toggleStrong, r.toggleEm, r.toggleMark])]
r.fullMenu = r.inlineMenu.concat([cut([r.typeMenu])], r.listMenu)
return r
}
@ -403,8 +347,8 @@ export default (): ProseMirrorExtension => ({
plugins: (prev, schema) => [
...prev,
menuBar({
floating: true,
content: buildMenuItems(schema).fullMenu as any[]
floating: false,
content: buildMenuItems(schema).fullMenu as any
})
]
})

108
src/components/Editor/prosemirror/extension/paste-markdown.ts
View File

@ -1,86 +1,74 @@
import { Plugin } from 'prosemirror-state'
// import { Fragment, Node, Schema } from 'prosemirror-model'
import type { Schema } from 'prosemirror-model'
import type { ProseMirrorExtension } from '../state'
// import { createMarkdownParser } from '../markdown'
import { Plugin, Transaction } from 'prosemirror-state'
import { Fragment, Node, Schema, Slice } from 'prosemirror-model'
import type { ProseMirrorExtension } from '../helpers'
import { createMarkdownParser } from '../../markdown'
// import { openPrompt } from './prompt'
// const URL_REGEX = /(ftp|http|https):\/\/(\w+(?::\w*)?@)?(\S+)(:\d+)?(\/|\/([\w!#%&+./:=?@-]))?/g
const URL_REGEX = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:\d+)?(\/|\/([\w!#%&+./:=?@-]))?/g
// const transform = (schema: Schema, fragment: Fragment) => {
// const nodes: Node[] = []
//
// fragment.forEach((child: Node) => {
// if (child.isText) {
// let pos = 0
// let match: RegExpMatchArray | null
//
// while ((match = URL_REGEX.exec(child.text as string)) !== null) {
// const start = match.index as number
// const end = start + match[0].length
// const attrs = { href: match[0] }
//
// if (start > 0) {
// nodes.push(child.cut(pos, start))
// }
//
// const node = child.cut(start, end).mark(schema.marks.link.create(attrs).addToSet(child.marks))
//
// nodes.push(node)
// pos = end
// }
//
// if (pos < (child.text as string).length) {
// nodes.push(child.cut(pos))
// }
// } else {
// nodes.push(child.copy(transform(schema, child.content)))
// }
// })
//
// return Fragment.fromArray(nodes)
// }
const transform = (schema: Schema, fragment: Fragment) => {
const nodes = []
fragment.forEach((child: Node) => {
if (child.isText) {
let pos = 0
let match: RegExpExecArray
// let shiftKey = false
while ((match = URL_REGEX.exec(child.text)) !== null) {
const start = match.index
const end = start + match[0].length
const attrs = { href: match[0] }
const pasteMarkdown = (_schema: Schema) => {
// const parser = createMarkdownParser(schema)
if (start > 0) {
nodes.push(child.cut(pos, start))
}
const node = child.cut(start, end).mark(schema.marks.link.create(attrs).addToSet(child.marks))
nodes.push(node)
pos = end
}
if (pos < child.text.length) {
nodes.push(child.cut(pos))
}
} else {
nodes.push(child.copy(transform(schema, child.content)))
}
})
return Fragment.fromArray(nodes)
}
let shiftKey = false
const pasteMarkdown = (schema: Schema) => {
const parser = createMarkdownParser(schema)
return new Plugin({
props: {
handleDOMEvents: {
keydown: (_, _event) => {
// shiftKey = event.shiftKey
keydown: (_, event) => {
shiftKey = event.shiftKey
return false
},
keyup: () => {
// shiftKey = false
shiftKey = false
return false
}
},
handlePaste: (view, event) => {
if (!event.clipboardData) return false
const text = event.clipboardData.getData('text/plain')
const html = event.clipboardData.getData('text/html')
// otherwise, if we have html then fallback to the default HTML
// parser behavior that comes with Prosemirror.
if (text.length === 0 || html) return false
event.preventDefault()
const node: Node = parser.parse(text)
const fragment = shiftKey ? node.content : transform(schema, node.content)
const openStart = 0 // FIXME
const openEnd = text.length // FIXME: detect real start and end cursor position
const tr: Transaction = view.state.tr.replaceSelection(new Slice(fragment, openStart, openEnd))
// const paste = parser.parse(text)
// FIXME !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// paste is Node why ...paste?
// const slice = [...paste]
// const fragment = shiftKey ? slice.content : transform(schema, slice.content)
// const tr = view.state.tr.replaceSelection(new Slice(fragment, slice.openStart, slice.openEnd))
//
// view.dispatch(tr)
view.dispatch(tr)
return true
}
}

3
src/components/Editor/prosemirror/extension/placeholder.ts
View File

@ -1,6 +1,6 @@
import { Plugin } from 'prosemirror-state'
import { DecorationSet, Decoration } from 'prosemirror-view'
import { ProseMirrorExtension, isEmpty } from '../state'
import { ProseMirrorExtension, isEmpty } from '../helpers'
const placeholder = (text: string) =>
new Plugin({
@ -8,7 +8,6 @@ const placeholder = (text: string) =>
decorations(state) {
if (isEmpty(state)) {
const div = document.createElement('div')
div.setAttribute('contenteditable', 'false')
div.classList.add('placeholder')
div.textContent = text

43
src/components/Editor/prosemirror/extension/prompt.ts
View File

@ -1,13 +1,12 @@
const prefix = 'ProseMirror-prompt'
// FIXME !!!
// eslint-disable-next-line sonarjs/cognitive-complexity
export function openPrompt(options: any) {
export function openPrompt(options) {
const wrapper = document.body.appendChild(document.createElement('div'))
wrapper.className = prefix
const mouseOutside = (e: any) => {
if (!wrapper.contains(e.target)) close()
const mouseOutside = (ev: MouseEvent) => {
if (!wrapper.contains(ev.target as Node)) close()
}
setTimeout(() => window.addEventListener('mousedown', mouseOutside), 50)
const close = () => {
@ -15,7 +14,7 @@ export function openPrompt(options: any) {
if (wrapper.parentNode) wrapper.remove()
}
const domFields: any = []
const domFields: HTMLElement[] = []
options.fields.forEach((name) => {
domFields.push(options.fields[name].render())
})
@ -34,14 +33,14 @@ export function openPrompt(options: any) {
if (options.title) {
form.appendChild(document.createElement('h5')).textContent = options.title
}
domFields.forEach((field: any) => {
form.appendChild(document.createElement('div')).append(field)
domFields.forEach((field: HTMLElement) => {
form.appendChild(document.createElement('div')).appendChild(field)
})
const buttons = form.appendChild(document.createElement('div'))
buttons.className = prefix + '-buttons'
buttons.append(submitButton)
buttons.append(document.createTextNode(' '))
buttons.append(cancelButton)
buttons.appendChild(submitButton)
buttons.appendChild(document.createTextNode(' '))
buttons.appendChild(cancelButton)
const box = wrapper.getBoundingClientRect()
wrapper.style.top = (window.innerHeight - box.height) / 2 + 'px'
@ -74,11 +73,11 @@ export function openPrompt(options: any) {
}
})
const input: any = form.elements[0]
const input = form.elements[0] as HTMLInputElement
if (input) input.focus()
}
function getValues(fields: any, domFields: any) {
function getValues(fields: any, domFields: HTMLElement[]) {
const result = Object.create(null)
let i = 0
fields.forEarch((name) => {
@ -95,14 +94,13 @@ function getValues(fields: any, domFields: any) {
return result
}
function reportInvalid(dom: any, message: any) {
const parent = dom.parentNode
const msg = parent.appendChild(document.createElement('div'))
function reportInvalid(dom: HTMLElement, message: string) {
const msg: HTMLElement = dom.parentNode.appendChild(document.createElement('div'))
msg.style.left = dom.offsetLeft + dom.offsetWidth + 2 + 'px'
msg.style.top = dom.offsetTop - 5 + 'px'
msg.className = 'ProseMirror-invalid'
msg.textContent = message
setTimeout(() => msg.remove(), 1500)
setTimeout(msg.remove, 1500)
}
export class Field {
@ -142,3 +140,16 @@ export class TextField extends Field {
return input
}
}
export class SelectField extends Field {
render() {
const select = document.createElement('select')
this.options.options.forEach((o: { value: string; label: string }) => {
const opt = select.appendChild(document.createElement('option'))
opt.value = o.value
opt.selected = o.value === this.options.value
opt.label = o.label
})
return select
}
}

2
src/components/Editor/prosemirror/extension/scroll.ts
View File

@ -1,6 +1,6 @@
import { Plugin } from 'prosemirror-state'
import type { EditorView } from 'prosemirror-view'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
const scroll = (view: EditorView) => {
if (!view.state.selection.empty) return false

31
src/components/Editor/prosemirror/extension/selection.ts
View File

@ -1,50 +1,39 @@
import { /*MenuItem,*/ renderGrouped } from 'prosemirror-menu'
import type { Schema } from 'prosemirror-model'
import { renderGrouped } from 'prosemirror-menu'
import { Plugin } from 'prosemirror-state'
// import { EditorView } from 'prosemirror-view'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
import { buildMenuItems } from './menu'
const cut = (arr: any[] | any) => arr.filter((a: any) => !!a)
export class SelectionTooltip {
tooltip: any
constructor(view: any, schema: Schema) {
constructor(view: any, schema: any) {
this.tooltip = document.createElement('div')
this.tooltip.className = 'tooltip'
view.dom.parentNode.append(this.tooltip)
const content = cut((buildMenuItems(schema) as { [key: string]: any })?.fullMenu)
console.debug(content)
const { dom } = renderGrouped(view, content)
this.tooltip.append(dom)
view.dom.parentNode.appendChild(this.tooltip)
const { dom } = renderGrouped(view, buildMenuItems(schema).fullMenu as any)
this.tooltip.appendChild(dom)
this.update(view, null)
}
update(view: any, lastState: any) {
const state = view.state
if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
return
}
if (state.selection.empty) {
this.tooltip.style.display = 'none'
return
}
this.tooltip.style.display = ''
const { from, to } = state.selection
const start = view.coordsAtPos(from)
const end = view.coordsAtPos(to)
const start = view.coordsAtPos(from),
end = view.coordsAtPos(to)
const box = this.tooltip.offsetParent.getBoundingClientRect()
const left = Math.max((start.left + end.left) / 2, start.left + 3)
this.tooltip.style.left = `${left - box.left}px`
this.tooltip.style.bottom = `${box.bottom - (start.top + 15)}px`
this.tooltip.style.left = left - box.left + 'px'
this.tooltip.style.bottom = box.bottom - (start.top + 15) + 'px'
}
destroy() {

9
src/components/Editor/prosemirror/extension/strikethrough.ts
View File

@ -1,7 +1,8 @@
import { inputRules } from 'prosemirror-inputrules'
import type { MarkType } from 'prosemirror-model'
import type { MarkSpec, MarkType } from 'prosemirror-model'
import { markInputRule } from './mark-input-rule'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
import type OrderedMap from 'orderedmap'
const strikethroughRule = (nodeType: MarkType) => markInputRule(/~{2}(.+)~{2}$/, nodeType)
@ -10,12 +11,12 @@ const strikethroughSchema = {
parseDOM: [{ tag: 'del' }],
toDOM: () => ['del']
}
}
} as MarkSpec
export default (): ProseMirrorExtension => ({
schema: (prev) => ({
...prev,
marks: (prev.marks as any).append(strikethroughSchema)
marks: (prev.marks as OrderedMap<MarkSpec>).append(strikethroughSchema)
}),
plugins: (prev, schema) => [
...prev,

12
src/components/Editor/prosemirror/extension/table.ts
View File

@ -1,15 +1,16 @@
import { EditorState, Selection } from 'prosemirror-state'
import type { Node, Schema, ResolvedPos } from 'prosemirror-model'
import type { Node, Schema, ResolvedPos, NodeSpec } from 'prosemirror-model'
import { InputRule, inputRules } from 'prosemirror-inputrules'
import { keymap } from 'prosemirror-keymap'
import type { ProseMirrorExtension } from '../state'
import type { ProseMirrorExtension } from '../helpers'
import type OrderedMap from 'orderedmap'
export const tableInputRule = (schema: Schema) =>
new InputRule(
new RegExp('^\\|{2,}\\s$'),
(state: EditorState, match: string[], start: number, end: number) => {
const tr = state.tr
const columns = [...Array.from({ length: match[0].trim().length - 1 })]
const columns = Array.from({ length: match[0].trim().length - 1 })
const headers = columns.map(() => schema.node(schema.nodes.table_header, {}))
const cells = columns.map(() => schema.node(schema.nodes.table_cell, {}))
const table = schema.node(schema.nodes.table, {}, [
@ -95,7 +96,7 @@ const tableSchema = {
],
toDOM: (node: Node) => ['th', node.attrs, 0]
}
}
} as NodeSpec
const findParentPos = ($pos: ResolvedPos, fn: (n: Node) => boolean) => {
for (let d = $pos.depth; d > 0; d--) {
@ -174,9 +175,8 @@ const getTextSize = (n: Node) => {
export default (): ProseMirrorExtension => ({
schema: (prev) => ({
...prev,
nodes: (prev.nodes as any).append(tableSchema)
nodes: (prev.nodes as OrderedMap<NodeSpec>).append(tableSchema)
}),
// FIXME (extract functions)
// eslint-disable-next-line sonarjs/cognitive-complexity
plugins: (prev, schema) => [
keymap({

26
src/components/Editor/prosemirror/extension/todo-list.ts
View File

@ -1,9 +1,17 @@
import { DOMSerializer, Node as ProsemirrorNode, NodeType, Schema } from 'prosemirror-model'
import {
DOMOutputSpec,
DOMSerializer,
Node as ProsemirrorNode,
NodeSpec,
NodeType,
Schema
} from 'prosemirror-model'
import type { EditorView } from 'prosemirror-view'
import { wrappingInputRule, inputRules } from 'prosemirror-inputrules'
import { splitListItem } from 'prosemirror-schema-list'
import { keymap } from 'prosemirror-keymap'
import type { ProseMirrorExtension } from '../state'
import type { NodeViewFn, ProseMirrorExtension } from '../helpers'
import type OrderedMap from 'orderedmap'
const todoListRule = (nodeType: NodeType) =>
wrappingInputRule(new RegExp('^\\[( |x)]\\s$'), nodeType, (match) => ({
@ -44,22 +52,22 @@ const todoListSchema = {
['div', 0]
]
}
}
} as NodeSpec
class TodoItemView {
contentDOM: HTMLElement
contentDOM: Node
dom: Node
view: EditorView
getPos: () => number
constructor(node: ProsemirrorNode, view: EditorView, getPos: () => number) {
const dom = node.type.spec.toDOM(node)
const dom: DOMOutputSpec = node.type.spec.toDOM(node)
const res = DOMSerializer.renderSpec(document, dom)
this.dom = res.dom
this.contentDOM = res.contentDOM
this.view = view
this.getPos = getPos
;(this.dom as Element).querySelector('input').addEventListener('click', this.handleClick.bind(this))
;(this.dom as HTMLElement).querySelector('input').addEventListener('click', this.handleClick.bind(this))
}
handleClick(e: MouseEvent) {
@ -78,7 +86,7 @@ const todoListKeymap = (schema: Schema) => ({
export default (): ProseMirrorExtension => ({
schema: (prev) => ({
...prev,
nodes: (prev.nodes as any).append(todoListSchema)
nodes: (prev.nodes as OrderedMap<NodeSpec>).append(todoListSchema)
}),
plugins: (prev, schema) => [
keymap(todoListKeymap(schema)),
@ -86,8 +94,8 @@ export default (): ProseMirrorExtension => ({
inputRules({ rules: [todoListRule(schema.nodes.todo_item)] })
],
nodeViews: {
todo_item: (node, view, getPos) => {
todo_item: (node: ProsemirrorNode, view: EditorView, getPos: () => number) => {
return new TodoItemView(node, view, getPos)
}
}
} as unknown as { [key: string]: NodeViewFn }
})

18
src/components/Editor/prosemirror/state.ts → src/components/Editor/prosemirror/helpers.ts
View File

@ -2,13 +2,6 @@ import { Plugin, EditorState } from 'prosemirror-state'
import type { Node, Schema, SchemaSpec } from 'prosemirror-model'
import type { Decoration, EditorView, NodeView } from 'prosemirror-view'
export type NodeViewFn = (
node: Node,
view: EditorView,
getPos: () => number,
decorations: Decoration[]
) => NodeView
export interface ProseMirrorExtension {
schema?: (prev: SchemaSpec) => SchemaSpec
plugins?: (prev: Plugin[], schema: Schema) => Plugin[]
@ -17,9 +10,16 @@ export interface ProseMirrorExtension {
export type ProseMirrorState = EditorState | unknown
export const isInitialized = (state: any) => state !== undefined && state instanceof EditorState
export type NodeViewFn = (
node: Node,
view: EditorView,
getPos: () => number,
decorations: Decoration[]
) => NodeView
export const isEmpty = (state: any) =>
export const isInitialized = (state) => state !== undefined && state instanceof EditorState
export const isEmpty = (state) =>
!isInitialized(state) ||
(state.doc.childCount === 1 &&
!state.doc.firstChild.type.spec.code &&

50
src/components/Editor/prosemirror/p2p.ts Normal file
View File

@ -0,0 +1,50 @@
import { uniqueNamesGenerator, adjectives, animals } from 'unique-names-generator'
import { Awareness } from 'y-protocols/awareness'
import { WebrtcProvider } from 'y-webrtc'
import { Doc, XmlFragment } from 'yjs'
// import type { Reaction } from '../../../graphql/types.gen'
// import { setReactions } from '../../../stores/editor'
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),
filterBcConns: true,
maxConns: 33,
signaling: [
// 'wss://signaling.discours.io',
// 'wss://stun.l.google.com:19302',
'wss://y-webrtc-signaling-eu.herokuapp.com',
'wss://signaling.yjs.dev'
],
peerOpts: {},
password: ''
}
// connect with provider
const provider = new WebrtcProvider(room, ydoc, webrtcOptions)
console.debug('[p2p] provider', provider)
// setting username
provider.awareness.setLocalStateField('user', {
name:
username ??
uniqueNamesGenerator({
dictionaries: [adjectives, animals],
style: 'capital',
separator: ' ',
length: 2
})
})
return [yXmlFragment, provider]
}

128
src/components/Editor/prosemirror/setup.ts
View File

@ -1,82 +1,61 @@
import { keymap } from 'prosemirror-keymap'
import type { ProseMirrorExtension } from './state'
import { Schema } from 'prosemirror-model'
import base from './extension/base'
import markdown from './extension/markdown'
import link from './extension/link'
// import scroll from './prosemirror/extension/scroll'
import todoList from './extension/todo-list'
import code from './extension/code'
import strikethrough from './extension/strikethrough'
import placeholder from './extension/placeholder'
// import menu from './extension/menu'
// import image from './extension/image'
// import scroll from './prosemirror/extension/scroll'
import { keymap } from 'prosemirror-keymap'
import type { ProseMirrorExtension } from './helpers'
import { Schema } from 'prosemirror-model'
import { t } from '../../../utils/intl'
import base from './extension/base'
import code from './extension/code'
import dragHandle from './extension/drag-handle'
import image from './extension/image'
import link from './extension/link'
import markdown from './extension/markdown'
import pasteMarkdown from './extension/paste-markdown'
import table from './extension/table'
import collab from './extension/collab'
import type { Config, YOptions } from '../store'
import type { Collab, Config, ExtensionsProps, YOptions } from '../store/context'
import selectionMenu from './extension/selection'
import placeholder from './extension/placeholder'
import todoList from './extension/todo-list'
import strikethrough from './extension/strikethrough'
import scrollPlugin from './extension/scroll'
interface Opts {
data?: unknown
keymap?: any
config: Config
markdown: boolean
path?: string
y?: YOptions
schema?: Schema
}
const customKeymap = (opts: Opts): ProseMirrorExtension => ({
plugins: (prev) => (opts.keymap ? [...prev, keymap(opts.keymap)] : prev)
const customKeymap = (props: ExtensionsProps): ProseMirrorExtension => ({
plugins: (prev) => (props.keymap ? [...prev, keymap(props.keymap)] : prev)
})
/*
const codeMirrorKeymap = (props: Props) => {
const keys = []
for (const key in props.keymap) {
keys.push({key: key, run: props.keymap[key]})
export const createExtensions = (props: ExtensionsProps): ProseMirrorExtension[] => {
const eee = [
placeholder(t('Just start typing...')),
customKeymap(props),
base(props.markdown),
selectionMenu(),
scrollPlugin(props.config?.typewriterMode)
]
if (props.markdown) {
eee.push(
markdown(),
todoList(),
dragHandle(),
code(),
strikethrough(),
link(),
table(),
image(props.path),
pasteMarkdown()
/*
codeBlock({
theme: codeTheme(props.config),
typewriterMode: props.config.typewriterMode,
fontSize: props.config.fontSize,
prettier: props.config.prettier,
extensions: () => [codeMirrorKeymap(props)],
}),
*/
)
}
return cmKeymap.of(keys)
}
*/
export const createExtensions = (opts: Opts): ProseMirrorExtension[] => {
return opts.markdown
? [
placeholder('Просто начните...'),
customKeymap(opts),
base(opts.markdown),
// scroll(props.config.typewriterMode),
collab(opts.y),
dragHandle()
]
: [
selectionMenu(),
customKeymap(opts),
base(opts.markdown),
collab(opts.y),
markdown(),
todoList(),
dragHandle(),
code(),
strikethrough(),
link(),
table(),
// image(props.path), // TODO: image extension
pasteMarkdown()
/*
codeBlock({
theme: codeTheme(props.config),
typewriterMode: props.config.typewriterMode,
fontSize: props.config.fontSize,
prettier: props.config.prettier,
extensions: () => [codeMirrorKeymap(props)],
}),
*/
]
if (props.collab?.room) eee.push(collab(props.y))
return eee
}
export const createEmptyText = () => ({
@ -91,11 +70,16 @@ export const createEmptyText = () => ({
}
})
export const createSchema = (opts: Opts) => {
const extensions = createExtensions(opts)
export const createSchema = (props: ExtensionsProps) => {
const extensions = createExtensions({
config: props.config,
markdown: props.markdown,
path: props.path,
keymap: props.keymap,
y: props.y
})
let schemaSpec = { nodes: {} }
for (const extension of extensions) {
if (extension.schema) {
schemaSpec = extension.schema(schemaSpec)

11
src/components/Editor/remote.ts Normal file
View File

@ -0,0 +1,11 @@
import type { EditorState } from 'prosemirror-state'
import { serialize } from './markdown'
export const copy = async (text: string): Promise<void> => {
navigator.clipboard.writeText(text)
}
export const copyAllAsMarkdown = async (state: EditorState): Promise<void> => {
const text = serialize(state)
navigator.clipboard.writeText(text)
}

404
src/components/Editor/store/actions.ts Normal file
View File

@ -0,0 +1,404 @@
import { Store, createStore, unwrap } from 'solid-js/store'
import { v4 as uuidv4 } from 'uuid'
import type { EditorState } from 'prosemirror-state'
import { undo, redo } from 'prosemirror-history'
import { selectAll, deleteSelection } from 'prosemirror-commands'
import { undo as yUndo, redo as yRedo } from 'y-prosemirror'
import debounce from 'lodash/debounce'
import { createSchema, createExtensions, createEmptyText } from '../prosemirror/setup'
import { State, Draft, Config, ServiceError, newState, ExtensionsProps, EditorActions } from './context'
import { mod } from '../env'
import { serialize, createMarkdownParser } from '../markdown'
import db from '../db'
import { isEmpty, isInitialized } from '../prosemirror/helpers'
const isText = (x) => x && x.doc && x.selection
const isState = (x) => typeof x.lastModified !== 'string' && Array.isArray(x.drafts || [])
const isDraft = (x): boolean => x && (x.text || x.path)
export const createCtrl = (initial: State): [Store<State>, EditorActions] => {
const [store, setState] = createStore(initial)
const onUndo = () => {
if (!isInitialized(store.text)) return false
const text = store.text as EditorState
if (store.collab?.started) {
yUndo(text)
} else {
undo(text, store.editorView.dispatch)
}
return true
}
const onRedo = () => {
if (!isInitialized(store.text)) return false
const text = store.text as EditorState
if (store.collab?.started) {
yRedo(text)
} else {
redo(text, store.editorView.dispatch)
}
return true
}
const discard = () => {
if (store.path) {
discardText()
} else if (store.drafts.length > 0 && isEmpty(store.text)) {
discardText()
} else {
selectAll(store.editorView.state, store.editorView.dispatch)
deleteSelection(store.editorView.state, store.editorView.dispatch)
}
return true
}
const toggleMarkdown = () => {
const state = unwrap(store)
const editorState = store.text as EditorState
const markdown = !state.markdown
const selection = { type: 'text', anchor: 1, head: 1 }
let doc
if (markdown) {
const lines = serialize(editorState).split('\n')
const nodes = lines.map((text) =>
text ? { type: 'paragraph', content: [{ type: 'text', text }] } : { type: 'paragraph' }
)
doc = { type: 'doc', content: nodes }
} else {
const schema = createSchema({
config: state.config,
path: state.path,
y: state.collab?.y,
markdown,
keymap
})
const parser = createMarkdownParser(schema)
let textContent = ''
editorState.doc.forEach((node) => {
textContent += `${node.textContent}\n`
})
const text = parser.parse(textContent)
doc = text.toJSON()
}
const extensions = createExtensions({
config: state.config,
markdown,
path: state.path,
keymap,
y: state.collab?.y
})
setState({
text: { selection, doc },
extensions,
markdown
})
return true
}
const keymap = {
[`${mod}-w`]: discard,
[`${mod}-z`]: onUndo,
[`Shift-${mod}-z`]: onRedo,
[`${mod}-y`]: onRedo,
[`${mod}-m`]: toggleMarkdown
} as ExtensionsProps['keymap']
const createTextFromDraft = async (draft: Draft) => {
const state = unwrap(store)
const extensions = createExtensions({
config: state.config,
markdown: draft.markdown,
path: draft.path,
keymap
})
return {
text: draft.text,
extensions,
lastModified: draft.lastModified ? new Date(draft.lastModified) : undefined,
path: draft.path,
markdown: draft.markdown
}
}
const addToDrafts = (drafts: Draft[], prev: State) => {
const text = prev.path ? undefined : (prev.text as EditorState).toJSON()
return [
...drafts,
{
text,
lastModified: prev.lastModified,
path: prev.path,
markdown: prev.markdown
}
]
}
const discardText = async () => {
const state = unwrap(store)
const index = state.drafts.length - 1
const draft = index !== -1 ? state.drafts[index] : undefined
let next: Partial<State>
if (draft) {
next = await createTextFromDraft(draft)
} else {
const extensions = createExtensions({
config: state.config ?? store.config,
markdown: state.markdown ?? store.markdown,
keymap
})
next = {
text: createEmptyText(),
extensions,
lastModified: undefined,
path: undefined,
markdown: state.markdown
}
}
const drafts = state.drafts.filter((f: Draft) => f !== draft)
setState({
drafts,
...next,
collab: draft ? undefined : state.collab,
error: undefined
})
}
const fetchData = async (): Promise<State> => {
const state: State = unwrap(store)
const room = window.location.pathname?.slice(1).trim()
const args = { room: room ?? undefined }
const data = await db.get('state')
let parsed: State
if (data !== undefined) {
try {
parsed = JSON.parse(data)
} catch (error) {
console.error(error)
throw new ServiceError('invalid_state', data)
}
}
if (!parsed) {
return { ...state, args }
}
let text = state.text
if (parsed.text) {
if (!isText(parsed.text)) {
throw new ServiceError('invalid_state', parsed.text)
}
text = parsed.text
}
const extensions = createExtensions({
path: parsed.path,
markdown: parsed.markdown,
keymap,
config: undefined
})
const newst = {
...parsed,
text,
extensions,
// config,
args
}
if (newst.lastModified) {
newst.lastModified = new Date(newst.lastModified)
}
for (const draft of parsed.drafts || []) {
if (!isDraft(draft)) {
throw new ServiceError('invalid_draft', draft)
}
}
if (!isState(newst)) {
throw new ServiceError('invalid_state', newst)
}
return newst
}
const getTheme = (state: State) => ({ theme: state.config.theme })
const clean = () => {
setState({
...newState(),
loading: 'initialized',
drafts: [],
fullscreen: store.fullscreen,
lastModified: new Date(),
error: undefined,
text: undefined
})
}
const init = async () => {
let data = await fetchData()
try {
if (data.args.room) {
data = await doStartCollab(data)
} else if (!data.text) {
const text = createEmptyText()
const extensions = createExtensions({
config: data.config ?? store.config,
markdown: data.markdown ?? store.markdown,
keymap
})
data = { ...data, text, extensions }
}
} catch (error) {
data = { ...data, error: error.errorObject }
}
setState({
...data,
config: { ...data.config, ...getTheme(data) },
loading: 'initialized'
})
}
const saveState = () =>
debounce(async (state: State) => {
const data: State = {
lastModified: state.lastModified,
drafts: state.drafts,
config: state.config,
path: state.path,
markdown: state.markdown,
collab: {
room: state.collab?.room
}
}
if (isInitialized(state.text)) {
data.text = store.editorView.state.toJSON()
} else if (state.text) {
data.text = state.text
}
db.set('state', JSON.stringify(data))
}, 200)
const setFullscreen = (fullscreen: boolean) => {
setState({ fullscreen })
}
const startCollab = async () => {
const state: State = unwrap(store)
const update = await doStartCollab(state)
setState(update)
}
const doStartCollab = async (state: State): Promise<State> => {
const backup = state.args?.room && state.collab?.room !== state.args.room
const room = state.args?.room ?? uuidv4()
window.history.replaceState(null, '', `/${room}`)
const { roomConnect } = await import('../prosemirror/p2p')
const [type, provider] = roomConnect(room)
const extensions = createExtensions({
config: state.config,
markdown: state.markdown,
path: state.path,
keymap,
y: { type, provider }
})
let newst = state
if ((backup && !isEmpty(state.text)) || state.path) {
let drafts = state.drafts
if (!state.error) {
drafts = addToDrafts(drafts, state)
}
newst = {
...state,
drafts,
lastModified: undefined,
path: undefined,
error: undefined
}
}
return {
...newst,
extensions,
collab: { started: true, room, y: { type, provider } }
}
}
const stopCollab = (state: State) => {
state.collab.y?.provider.destroy()
const extensions = createExtensions({
config: state.config,
markdown: state.markdown,
path: state.path,
keymap
})
setState({ collab: undefined, extensions })
window.history.replaceState(null, '', '/')
}
const updateConfig = (config: Partial<Config>) => {
const state = unwrap(store)
const extensions = createExtensions({
config: { ...state.config, ...config },
markdown: state.markdown,
path: state.path,
keymap,
y: state.collab?.y
})
setState({
config: { ...state.config, ...config },
extensions,
lastModified: new Date()
})
}
const updatePath = (path: string) => {
setState({ path, lastModified: new Date() })
}
const updateTheme = () => {
const { theme } = getTheme(unwrap(store))
setState('config', { theme })
}
const ctrl = {
clean,
discard,
getTheme,
init,
saveState,
setFullscreen,
setState,
startCollab,
stopCollab,
toggleMarkdown,
updateConfig,
updatePath,
updateTheme
}
return [store, ctrl]
}

97
src/components/Editor/store/index.ts → src/components/Editor/store/context.ts
View File

@ -2,18 +2,25 @@ import { createContext, useContext } from 'solid-js'
import type { Store } from 'solid-js/store'
import type { XmlFragment } from 'yjs'
import type { WebrtcProvider } from 'y-webrtc'
import type { ProseMirrorExtension, ProseMirrorState } from '../prosemirror/state'
import type { Reaction } from '../../../graphql/types.gen'
import type { ProseMirrorExtension, ProseMirrorState } from '../prosemirror/helpers'
import type { Command, EditorState } from 'prosemirror-state'
import type { EditorView } from 'prosemirror-view'
import type { Schema } from 'prosemirror-model'
export const isMac = true
export const mod = isMac ? 'Cmd' : 'Ctrl'
export const alt = isMac ? 'Cmd' : 'Alt'
export interface ExtensionsProps {
data?: unknown
keymap?: { [key: string]: Command }
config: Config
markdown: boolean
path?: string
y?: YOptions
schema?: Schema
collab?: Collab
typewriterMode?: boolean
}
export interface Args {
cwd?: string
file?: string
draft?: string
room?: string
text?: any
}
@ -32,15 +39,13 @@ export interface Config {
font: string
fontSize: number
contentWidth: number
alwaysOnTop: boolean
// typewriterMode: boolean;
typewriterMode: boolean
prettier: PrettierConfig
}
export interface ErrorObject {
message: string
id: string
props: unknown
props?: unknown
}
export interface YOptions {
@ -57,64 +62,70 @@ export interface Collab {
export type LoadingType = 'loading' | 'initialized'
export interface File {
text?: { [key: string]: any }
lastModified?: string
path?: string
markdown?: boolean
}
export interface State {
isMac?: boolean
text?: ProseMirrorState
editorView?: EditorView
extensions?: ProseMirrorExtension[]
markdown?: boolean
lastModified?: Date
files: File[]
drafts: Draft[]
config: Config
error?: ErrorObject
loading: LoadingType
fullscreen: boolean
loading?: LoadingType
fullscreen?: boolean
collab?: Collab
path?: string
args?: Args
keymap?: { [key: string]: Command }
}
export interface Draft {
body?: string
lastModified?: Date
text?: { doc: EditorState['doc']; selection: { type: string; anchor: number; head: number } }
path?: string
markdown?: boolean
extensions?: ProseMirrorExtension[]
}
export interface EditorActions {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key: string]: any
}
export class ServiceError extends Error {
public errorObject: ErrorObject
constructor(id: string, props: unknown) {
super(id)
this.errorObject = { id, props, message: '' }
this.errorObject = { id, props }
}
}
const DEFAULT_CONFIG = {
theme: '',
// codeTheme: 'material-light',
font: 'muller',
fontSize: 24,
contentWidth: 800,
alwaysOnTop: isMac,
// typewriterMode: true,
prettier: {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true
}
}
export const StateContext = createContext<[Store<State>, any]>([{} as Store<State>, undefined])
export const StateContext = createContext<[Store<State>, EditorActions]>([undefined, undefined])
export const useState = () => useContext(StateContext)
export const newState = (props: Partial<State> = {}): State => ({
extensions: [],
files: [],
drafts: [],
loading: 'loading',
fullscreen: false,
markdown: false,
config: DEFAULT_CONFIG,
config: {
theme: undefined,
// codeTheme: 'material-light',
font: 'muller',
fontSize: 24,
contentWidth: 800,
typewriterMode: true,
prettier: {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true
}
},
...props
})

588
src/components/Editor/store/ctrl.ts
View File

@ -1,588 +0,0 @@
import { Store, createStore, unwrap } from 'solid-js/store'
import { v4 as uuidv4 } from 'uuid'
import type { EditorState } from 'prosemirror-state'
import { undo, redo } from 'prosemirror-history'
import { selectAll, deleteSelection } from 'prosemirror-commands'
import { undo as yUndo, redo as yRedo } from 'y-prosemirror'
import { debounce } from 'ts-debounce'
// import * as remote from '../prosemirror/remote'
import { createSchema, createExtensions, createEmptyText } from '../prosemirror/setup'
import { State, File, Config, ServiceError, newState } from '.'
// import { isTauri, mod } from '../env'
import { serialize, createMarkdownParser } from '../prosemirror/markdown'
import { isEmpty, isInitialized } from '../prosemirror/state'
import { isServer } from 'solid-js/web'
import { roomConnect } from '../../../utils/p2p'
const mod = 'Ctrl'
const isTauri = false
const isText = (x: any) => x && x.doc && x.selection
const isState = (x: any) => typeof x.lastModified !== 'string' && Array.isArray(x.files)
const isFile = (x: any): boolean => x && (x.text || x.path)
export const createCtrl = (initial: State): [Store<State>, any] => {
const [store, setState] = createStore(initial)
const discardText = async () => {
const state = unwrap(store)
const index = state.files.length - 1
const file = index !== -1 ? state.files[index] : undefined
let next: Partial<State>
if (file) {
next = await createTextFromFile(file)
} else {
const extensions = createExtensions({
config: state.config ?? store.config,
markdown: (state.markdown && store.markdown) as any,
keymap
})
next = {
text: createEmptyText(),
extensions,
lastModified: undefined,
path: undefined,
markdown: state.markdown
}
}
const files = state.files.filter((f: File) => f !== file)
setState({
files,
...next,
collab: file ? undefined : state.collab,
error: undefined
})
}
const addToFiles = (files: File[], prev: State) => {
const text = prev.path ? undefined : (prev.text as EditorState).toJSON()
return [
...files,
{
text,
lastModified: prev.lastModified?.toISOString(),
path: prev.path,
markdown: prev.markdown
}
]
}
const newFile = () => {
if (isEmpty(store.text) && !store.path) {
return
}
const state: State = unwrap(store)
let files = state.files
if (!state.error) {
files = addToFiles(files, state)
}
const extensions: any[] = createExtensions({
config: state.config ?? store.config,
markdown: state.markdown,
keymap
})
setState({
text: createEmptyText(),
extensions,
files,
lastModified: undefined,
path: undefined,
error: undefined,
collab: undefined
})
}
const discard = async () => {
if (store.path) {
await discardText()
} else if (store.files?.length > 0 && isEmpty(store.text)) {
await discardText()
} else {
selectAll(store.editorView.state, store.editorView.dispatch)
deleteSelection(store.editorView.state, store.editorView.dispatch)
}
}
// FIXME
// eslint-disable-next-line unicorn/consistent-function-scoping
const onQuit = () => {
if (!isTauri) {
console.debug('quit')
// return
}
// remote.quit()
}
const onNew = () => {
newFile()
return true
}
const onDiscard = () => {
discard()
return true
}
const onFullscreen = () => {
if (!isTauri) return
ctrl.setFullscreen(!store.fullscreen)
return true
}
const onToggleMarkdown = () => toggleMarkdown()
const onUndo = () => {
if (!isInitialized(store.text)) return
const text = store.text as EditorState
if (store.collab?.started) {
yUndo(text)
} else {
undo(text, store.editorView.dispatch)
}
return true
}
const onRedo = () => {
if (!isInitialized(store.text)) return
const text = store.text as EditorState
if (store.collab?.started) {
yRedo(text)
} else {
redo(text, store.editorView.dispatch)
}
return true
}
const keymap = {
[`${mod}-q`]: onQuit,
[`${mod}-n`]: onNew,
[`${mod}-w`]: onDiscard,
'Cmd-Enter': onFullscreen,
'Alt-Enter': onFullscreen,
[`${mod}-z`]: onUndo,
[`Shift-${mod}-z`]: onRedo,
[`${mod}-y`]: onRedo,
[`${mod}-m`]: onToggleMarkdown
}
const createTextFromFile = async (file: File) => {
const state = unwrap(store)
// if (file.path) file = await loadFile(state.config, file.path)
const extensions = createExtensions({
config: state.config,
markdown: file.markdown,
path: file.path,
keymap
})
return {
text: file.text,
extensions,
lastModified: file.lastModified ? new Date(file.lastModified) : undefined,
path: file.path,
markdown: file.markdown
}
}
// FIXME
// eslint-disable-next-line sonarjs/cognitive-complexity
const fetchData = async (): Promise<State> => {
let args = {} // await remote.getArgs().catch(() => undefined)
const state: State = unwrap(store)
if (!isTauri) {
const room = window.location.pathname?.slice(1).trim()
args = { room: room || undefined }
}
if (!isServer) {
const { default: db } = await import('../db')
const data: string = await db.get('state')
let parsed: any
if (data !== undefined) {
try {
parsed = JSON.parse(data)
} catch {
throw new ServiceError('invalid_state', data)
}
}
if (!parsed) {
return { ...state, args }
}
let text = state.text
if (parsed.text) {
if (!isText(parsed.text)) {
throw new ServiceError('invalid_state', parsed.text)
}
text = parsed.text
}
const extensions = createExtensions({
path: parsed.path,
markdown: parsed.markdown,
keymap,
config: {} as Config
})
const nState = {
...parsed,
text,
extensions,
// config,
args
}
if (nState.lastModified) {
nState.lastModified = new Date(nState.lastModified)
}
for (const file of parsed.files) {
if (!isFile(file)) {
throw new ServiceError('invalid_file', file)
}
}
if (!isState(nState)) {
throw new ServiceError('invalid_state', nState)
}
return nState
} else {
return
}
}
const getTheme = (state: State) => ({ theme: state.config.theme })
const clean = () => {
setState({
...newState(),
loading: 'initialized',
files: [],
fullscreen: store.fullscreen,
lastModified: new Date(),
error: undefined,
text: undefined
})
}
const init = async () => {
let data = await fetchData()
try {
if (data.args?.room) {
data = doStartCollab(data)
} else if (data.args?.text) {
data = await doOpenFile(data, { text: JSON.parse(data.args?.text) })
} /* else if (data.args?.file) {
const file = await loadFile(data.config, data.args?.file)
data = await doOpenFile(data, file)
} else if (data.path) {
const file = await loadFile(data.config, data.path)
data = await doOpenFile(data, file)
} */ else if (!data.text) {
const text = createEmptyText()
const extensions = createExtensions({
config: data.config,
markdown: data.markdown,
keymap
})
data = { ...data, text, extensions }
}
} catch (error: any) {
data = { ...data, error: error.errorObject }
}
setState({
...data,
config: { ...data.config, ...getTheme(data) },
loading: 'initialized'
})
}
/*
const loadFile = async (config: Config, path: string): Promise<File> => {
try {
const fileContent = await remote.readFile(path)
const lastModified = await remote.getFileLastModified(path)
const schema = createSchema({
config,
markdown: false,
path,
keymap
})
const parser = createMarkdownParser(schema)
const doc = parser.parse(fileContent).toJSON()
const text = {
doc,
selection: {
type: 'text',
anchor: 1,
head: 1
}
}
return {
text,
lastModified: lastModified.toISOString(),
path
}
} catch (e) {
throw new ServiceError('file_permission_denied', { error: e })
}
}
*/
const openFile = async (file: File) => {
const state: State = unwrap(store)
const update = await doOpenFile(state, file)
setState(update)
}
const doOpenFile = async (state: State, file: File): Promise<State> => {
const findIndexOfFile = (f: File) => {
for (let i = 0; i < state.files.length; i++) {
if (state.files[i] === f) return i
if (f.path && state.files[i].path === f.path) return i
}
return -1
}
const index = findIndexOfFile(file)
const item = index === -1 ? file : state.files[index]
let files = state.files.filter((f) => f !== item)
if (!isEmpty(state.text) && state.lastModified) {
files = addToFiles(files, state)
}
file.lastModified = item.lastModified
const next = await createTextFromFile(file)
return {
...state,
...next,
files,
collab: undefined,
error: undefined
}
}
// eslint-disable-next-line solid/reactivity
const saveState = debounce(async (state: State) => {
const data: any = {
lastModified: state.lastModified,
files: state.files,
config: state.config,
path: state.path,
markdown: state.markdown,
collab: {
room: state.collab?.room
}
}
if (isInitialized(state.text)) {
//if (state.path) {
// const text = serialize(store.editorView.state)
// await remote.writeFile(state.path, text)
//}
data.text = store.editorView.state.toJSON()
} else if (state.text) {
data.text = state.text
}
if (!isServer) {
const { default: db } = await import('../db')
db.set('state', JSON.stringify(data))
}
}, 200)
const setFullscreen = (fullscreen: boolean) => {
// remote.setFullscreen(fullscreen)
setState({ fullscreen })
}
const startCollab = () => {
const state: State = unwrap(store)
const update = doStartCollab(state)
setState(update)
}
const doStartCollab = (state: State): State => {
const backup = state.args?.room && state.collab?.room !== state.args.room
const room = state.args?.room ?? uuidv4()
const username = '' // FIXME: use authenticated user name
const [type, provider] = roomConnect(room, username)
const extensions = createExtensions({
config: state.config,
markdown: state.markdown,
path: state.path,
keymap,
y: { type, provider }
})
let nState = state
if ((backup && !isEmpty(state.text)) || state.path) {
let files = state.files
if (!state.error) {
files = addToFiles(files, state)
}
nState = {
...state,
files,
lastModified: undefined,
path: undefined,
error: undefined
}
}
return {
...nState,
extensions,
collab: { started: true, room, y: { type, provider } }
}
}
const stopCollab = (state: State) => {
state.collab?.y?.provider.destroy()
const extensions = createExtensions({
config: state.config,
markdown: state.markdown,
path: state.path,
keymap
})
setState({ collab: undefined, extensions })
window.history.replaceState(null, '', '/')
}
const toggleMarkdown = () => {
const state = unwrap(store)
const editorState = store.text as EditorState
const markdown = !state.markdown
const selection = { type: 'text', anchor: 1, head: 1 }
let doc: any
if (markdown) {
const lines = serialize(editorState).split('\n')
const nodes = lines.map((text) => {
return text ? { type: 'paragraph', content: [{ type: 'text', text }] } : { type: 'paragraph' }
})
doc = { type: 'doc', content: nodes }
} else {
const schema = createSchema({
config: state.config,
path: state.path,
y: state.collab?.y,
markdown,
keymap
})
const parser = createMarkdownParser(schema)
let textContent = ''
editorState.doc.forEach((node) => {
textContent += `${node.textContent}\n`
})
const text = parser.parse(textContent)
doc = text?.toJSON()
}
const extensions = createExtensions({
config: state.config,
markdown,
path: state.path,
keymap,
y: state.collab?.y
})
setState({
text: { selection, doc },
extensions,
markdown
})
}
const updateConfig = (config: Partial<Config>) => {
const state = unwrap(store)
const extensions = createExtensions({
config: { ...state.config, ...config },
markdown: state.markdown,
path: state.path,
keymap,
y: state.collab?.y
})
setState({
config: { ...state.config, ...config },
extensions,
lastModified: new Date()
})
}
const updatePath = (path: string) => {
setState({ path, lastModified: new Date() })
}
const updateTheme = () => {
const { theme } = getTheme(unwrap(store))
setState('config', { theme })
}
const ctrl = {
clean,
discard,
getTheme,
init,
// loadFile,
newFile,
openFile,
saveState,
setFullscreen,
setState,
startCollab,
stopCollab,
toggleMarkdown,
updateConfig,
updatePath,
updateTheme
}
return [store, ctrl]
}

4
src/components/Editor/ArticlesList.scss → src/components/Editor/styles/ArticlesList.scss
View File

@ -32,11 +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;
}

25
src/components/Editor/styles/Button.scss Normal file
View File

@ -0,0 +1,25 @@
button {
height: 50px;
padding: 0 20px;
font-size: 18px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
text-decoration: none;
background: none;
font-family: Muller, Arial, Helvetica, sans-serif;
color: var(--foreground);
border: 1px solid var(--foreground);
&:hover {
opacity: 0.8;
}
}
button.primary {
color: var(--primary-foreground);
border: 0;
background: var(--primary-background);
}

80
src/components/Editor/Editor.scss → src/components/Editor/styles/Editor.scss
View File

@ -1,49 +1,59 @@
@import './Button';
@import './Sidebar';
.editor {
flex: 1;
padding-top: 1em;
label {
display: block;
a {
color: rgb(0 100 200);
text-decoration: none;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
a:hover {
text-decoration: underline;
}
input:disabled {
color: #ccc;
a:visited {
color: rgb(0 80 160);
}
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
label {
display: block;
}
button:disabled {
color: #999;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
button:not(:disabled):active {
background-color: #ddd;
}
input:disabled {
color: #ccc;
}
button:focus {
border-color: #666;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
.ProseMirror {
@ -54,7 +64,7 @@
white-space: pre-wrap;
font-variant-ligatures: none;
outline: none;
margin: 1em 1em 1em 2em;
margin: 1em 1em 1em 0;
.dark & {
color: var(--background);
@ -377,7 +387,7 @@ li.ProseMirror-selectednode::after {
}
.tooltip {
background: var(--background);
background: #fff;
box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
color: #000;
display: flex;

1
src/components/Editor/Error.scss → src/components/Editor/styles/Error.scss
View File

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

3
src/components/Editor/styles/Index.scss Normal file
View File

@ -0,0 +1,3 @@
.index {
width: 350px;
}

4
src/components/Editor/Layout.scss → src/components/Editor/styles/Layout.scss
View File

@ -1,12 +1,10 @@
.layout--editor {
.layout {
display: flex;
font-family: Muller;
font-size: 18px;
background: var(--background);
color: var(--foreground);
border-color: var(--background);
min-height: 100vh;
margin-top: -2.2rem !important;
&.dark {
background: var(--foreground);

58
src/components/Editor/Sidebar.scss → src/components/Editor/styles/Sidebar.scss
View File

@ -1,3 +1,29 @@
.sidebar-container {
color: rgb(255 255 255 / 50%);
@include font-size(1.6rem);
overflow: hidden;
position: relative;
top: 0;
p {
color: var(--foreground);
}
h4 {
@include font-size(120%);
margin-left: 1rem;
}
button {
height: auto;
min-height: 50px;
padding: 0 1rem;
width: 100%;
}
}
.sidebar-off {
background: #1f1f1f;
height: 100%;
@ -75,13 +101,12 @@
.sidebar-container button,
.sidebar-container a,
.sidebar-item {
text-align: left;
margin: 0;
outline: none;
display: flex;
align-items: center;
line-height: 24px;
font-family: Muller;
text-align: left;
}
.sidebar-container a,
@ -91,33 +116,6 @@
width: 100%;
}
.sidebar-container {
color: rgb(255 255 255 / 50%);
font-family: Muller;
@include font-size(1.6rem);
overflow: hidden;
position: relative;
top: 0;
p {
color: var(--foreground);
}
h4 {
@include font-size(120%);
margin-left: 1rem;
}
button {
height: auto;
min-height: 50px;
padding: 0 1rem;
width: 100%;
}
}
.sidebar-link {
background: none;
border: 0;
@ -143,7 +141,7 @@
cursor: not-allowed;
}
&.file {
&.draft {
color: rgb(255 255 255 / 50%);
line-height: 1.4;
margin: 0 0 1em 1.5em;

4
src/components/Feed/Beside.tsx
View File

@ -1,6 +1,6 @@
// TODO: additional entities list column + article
import { For, Show } from 'solid-js/web'
import { For, Show } from 'solid-js'
import { ArticleCard } from './Card'
import { AuthorCard } from '../Author/Card'
import { TopicCard } from '../Topic/Card'
@ -11,7 +11,7 @@ import { t } from '../../utils/intl'
interface BesideProps {
title?: string
values: any[]
values: (Shout | User | Topic | Author)[]
beside: Shout
wrapper: 'topic' | 'author' | 'article' | 'top-article'
isTopicCompact?: boolean

6
src/components/Feed/Card.tsx
View File

@ -1,6 +1,5 @@
import { t } from '../../utils/intl'
import { createMemo } from 'solid-js'
import { For, Show } from 'solid-js/web'
import { createMemo, For, Show } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { capitalize } from '../../utils'
import { translit } from '../../utils/ru2en'
@ -8,12 +7,9 @@ import { Icon } from '../Nav/Icon'
import styles from './Card.module.scss'
import { locale } from '../../stores/ui'
import { handleClientRouteLinkClick } from '../../stores/router'
import { getLogger } from '../../utils/logger'
import { clsx } from 'clsx'
import CardTopic from './CardTopic'
const log = getLogger('card component')
interface ArticleCardProps {
settings?: {
noicon?: boolean

5
src/components/Feed/Group.tsx
View File

@ -1,11 +1,12 @@
import { For, Show } from 'solid-js/web'
import type { JSX } from 'solid-js/jsx-runtime'
import { For, Show } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import './Group.scss'
interface GroupProps {
articles: Shout[]
header?: any
header?: JSX.Element
}
export default (props: GroupProps) => {

3
src/components/Feed/List.tsx
View File

@ -1,9 +1,8 @@
import { For, Suspense } from 'solid-js/web'
import { Row1 } from './Row1'
import { Row2 } from './Row2'
import { Row3 } from './Row3'
import { shuffle } from '../../utils'
import { createMemo, createSignal } from 'solid-js'
import { createMemo, createSignal, For, Suspense } from 'solid-js'
import type { JSX } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import './List.scss'

3
src/components/Feed/Row2.tsx
View File

@ -1,5 +1,4 @@
import { createComputed, createSignal, Show } from 'solid-js'
import { For } from 'solid-js/web'
import { createComputed, createSignal, Show, For } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'

5
src/components/Feed/Row3.tsx
View File

@ -1,8 +1,9 @@
import { For } from 'solid-js/web'
import type { JSX } from 'solid-js/jsx-runtime'
import { For } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
export const Row3 = (props: { articles: Shout[]; header?: any }) => {
export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
return (
<div class="floor">
<div class="wide-container row">

3
src/components/Feed/Row5.tsx
View File

@ -1,8 +1,5 @@
import type { Shout } from '../../graphql/types.gen'
import { ArticleCard } from './Card'
import { getLogger } from '../../utils/logger'
const log = getLogger('Row5')
export const Row5 = (props: { articles: Shout[] }) => {
return (

3
src/components/Feed/Slider.tsx
View File

@ -1,4 +1,3 @@
import { For } from 'solid-js/web'
import { ArticleCard } from './Card'
import { Swiper, Navigation, Pagination } from 'swiper'
import type { SwiperOptions } from 'swiper'
@ -7,7 +6,7 @@ import 'swiper/scss/navigation'
import 'swiper/scss/pagination'
import './Slider.scss'
import type { Shout } from '../../graphql/types.gen'
import { createEffect, createMemo, createSignal, Show } from 'solid-js'
import { createEffect, createMemo, createSignal, Show, For } from 'solid-js'
import { Icon } from '../Nav/Icon'
interface SliderProps {

13
src/components/Nav/AuthModal/EmailConfirm.module.scss Normal file
View File

@ -0,0 +1,13 @@
.title {
font-size: 26px;
line-height: 32px;
font-weight: 700;
color: #141414;
margin-bottom: 16px;
}
.text {
font-size: 15px;
line-height: 24px;
margin-bottom: 52px;
}

3
src/components/Nav/AuthModal/ForgotPasswordForm.tsx
View File

@ -1,8 +1,7 @@
import { Show } from 'solid-js/web'
import { t } from '../../../utils/intl'
import styles from './AuthModal.module.scss'
import { clsx } from 'clsx'
import { createSignal, JSX } from 'solid-js'
import { createSignal, JSX, Show } from 'solid-js'
import { useRouter } from '../../../stores/router'
import { email, setEmail } from './sharedLogic'
import type { AuthModalSearchParams } from './types'

3
src/components/Nav/AuthModal/LoginForm.tsx
View File

@ -1,11 +1,10 @@
import { Show } from 'solid-js/web'
import { t } from '../../../utils/intl'
import styles from './AuthModal.module.scss'
import { clsx } from 'clsx'
import { SocialProviders } from './SocialProviders'
import { signIn, signSendLink } from '../../../stores/auth'
import { ApiError } from '../../../utils/apiClient'
import { createSignal } from 'solid-js'
import { createSignal, Show } from 'solid-js'
import { isValidEmail } from './validators'
import { email, setEmail } from './sharedLogic'
import { useRouter } from '../../../stores/router'

3
src/components/Nav/AuthModal/RegisterForm.tsx
View File

@ -1,11 +1,10 @@
import { Show } from 'solid-js/web'
import { Show, createSignal } from 'solid-js'
import type { JSX } from 'solid-js'
import { t } from '../../../utils/intl'
import styles from './AuthModal.module.scss'
import { clsx } from 'clsx'
import { SocialProviders } from './SocialProviders'
import { checkEmail, register, useAuthStore } from '../../../stores/auth'
import { createSignal } from 'solid-js'
import { isValidEmail } from './validators'
import { ApiError } from '../../../utils/apiClient'
import { email, setEmail } from './sharedLogic'

4
src/components/Nav/Notifications.tsx
View File

@ -1,6 +1,6 @@
import { For, Portal, Show } from 'solid-js/web'
import { Portal } from 'solid-js/web'
import { useWarningsStore } from '../../stores/ui'
import { createMemo } from 'solid-js'
import { createMemo, For, Show } from 'solid-js'
export default () => {
const { warnings } = useWarningsStore()

3
src/components/Nav/Opener.tsx
View File

@ -1,7 +1,8 @@
import type { JSX } from 'solid-js/jsx-runtime'
import type { ModalType } from '../../stores/ui'
import { showModal } from '../../stores/ui'
export default (props: { name: ModalType; children: any }) => {
export default (props: { name: ModalType; children: JSX.Element }) => {
return (
<a href="#" onClick={() => showModal(props.name)}>
{props.children}

3
src/components/Nav/ProfileModal.tsx
View File

@ -1,10 +1,9 @@
import { For } from 'solid-js/web'
import { AuthorCard } from '../Author/Card'
import type { Author } from '../../graphql/types.gen'
import { t } from '../../utils/intl'
import { hideModal } from '../../stores/ui'
import { useAuthStore, signOut } from '../../stores/auth'
import { createMemo } from 'solid-js'
import { createMemo, For } from 'solid-js'
const quit = () => {
signOut()

3
src/components/Pages/CreatePage.tsx
View File

@ -1,10 +1,11 @@
import { newState } from '../Editor/store/context'
import { MainLayout } from '../Layouts/MainLayout'
import { CreateView } from '../Views/Create'
export const CreatePage = () => {
return (
<MainLayout>
<CreateView />
<CreateView state={newState()} />
</MainLayout>
)
}

3
src/components/Topic/Card.tsx
View File

@ -1,7 +1,6 @@
import { capitalize, plural } from '../../utils'
import { Show } from 'solid-js/web'
import style from './Card.module.scss'
import { createMemo } from 'solid-js'
import { createMemo, Show } from 'solid-js'
import type { Topic } from '../../graphql/types.gen'
import { FollowingEntity } from '../../graphql/types.gen'
import { t } from '../../utils/intl'

3
src/components/Topic/Full.tsx
View File

@ -1,5 +1,4 @@
import { createMemo } from 'solid-js'
import { Show } from 'solid-js/web'
import { createMemo, Show } from 'solid-js'
import type { Topic } from '../../graphql/types.gen'
import { FollowingEntity } from '../../graphql/types.gen'
import './Full.scss'

3
src/components/Views/AllAuthors.tsx
View File

@ -6,11 +6,8 @@ import { t } from '../../utils/intl'
import { useAuthorsStore, setAuthorsSort } from '../../stores/zine/authors'
import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
import { useAuthStore } from '../../stores/auth'
import { getLogger } from '../../utils/logger'
import '../../styles/AllTopics.scss'
const log = getLogger('AllAuthorsView')
type AllAuthorsPageSearchParams = {
by: '' | 'name' | 'shouts' | 'rating'
}

3
src/components/Views/AllTopics.tsx
View File

@ -7,9 +7,6 @@ import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
import { TopicCard } from '../Topic/Card'
import { useAuthStore } from '../../stores/auth'
import '../../styles/AllTopics.scss'
import { getLogger } from '../../utils/logger'
const log = getLogger('AllTopicsView')
type AllTopicsPageSearchParams = {
by: 'shouts' | 'authors' | 'title' | ''

52
src/components/Views/Create.tsx
View File

@ -1,17 +1,24 @@
import { Show, onCleanup, createEffect, onError, onMount, untrack } from 'solid-js'
import { createMutable, unwrap } from 'solid-js/store'
import { State, StateContext, newState } from '../Editor/store'
import { createCtrl } from '../Editor/store/ctrl'
import { Layout } from '../Editor/Layout'
import Editor from '../Editor'
import { Sidebar } from '../Editor/Sidebar'
import ErrorView from '../Editor/Error'
import { getLogger } from '../../utils/logger'
import { State, StateContext } from '../Editor/store/context'
import { createCtrl } from '../Editor/store/actions'
import { Layout } from '../Editor/components/Layout'
import { Editor } from '../Editor/components/Editor'
import { Sidebar } from '../Editor/components/Sidebar'
import ErrorView from '../Editor/components/Error'
const log = getLogger('CreateView')
const matchDark = () => window.matchMedia('(prefers-color-scheme: dark)')
export const CreateView = () => {
const [store, ctrl] = createCtrl(newState())
export const CreateView = (props: { state: State }) => {
let isMac = false
const onChangeTheme = () => ctrl.updateTheme()
onMount(() => {
isMac = window?.navigator.platform.includes('Mac')
matchDark().addEventListener('change', onChangeTheme)
onCleanup(() => matchDark().removeEventListener('change', onChangeTheme))
})
const [store, ctrl] = createCtrl({ ...props.state, isMac })
const mouseEnterCoords = createMutable({ x: 0, y: 0 })
const onMouseEnter = (e: MouseEvent) => {
@ -20,19 +27,12 @@ export const CreateView = () => {
}
onMount(async () => {
if (store.error) return
await ctrl.init()
})
onMount(() => {
if (typeof window === 'undefined') {
console.debug('[create] view mounted')
if (store.error) {
console.error(store.error)
return
}
const mediaQuery = '(prefers-color-scheme: dark)'
window.matchMedia(mediaQuery).addEventListener('change', ctrl.updateTheme)
onCleanup(() => window.matchMedia(mediaQuery).removeEventListener('change', ctrl.updateTheme))
await ctrl.init()
})
onError((error) => {
@ -47,6 +47,7 @@ export const CreateView = () => {
}
const state: State = untrack(() => unwrap(store))
ctrl.saveState(state)
console.debug('[create] status update')
return store.loading
}, store.loading)
@ -57,13 +58,8 @@ export const CreateView = () => {
data-testid={store.error ? 'error' : store.loading}
onMouseEnter={onMouseEnter}
>
<Show when={store.error}>
<ErrorView />
</Show>
<Show when={store.loading === 'initialized'}>
<Show when={!store.error}>
<Editor />
</Show>
<Show when={!store.error} fallback={<ErrorView />}>
<Editor />
<Sidebar />
</Show>
</Layout>

3
src/components/Views/Home.tsx
View File

@ -10,7 +10,6 @@ import { Beside } from '../Feed/Beside'
import RowShort from '../Feed/RowShort'
import Slider from '../Feed/Slider'
import Group from '../Feed/Group'
import { getLogger } from '../../utils/logger'
import type { Shout, Topic } from '../../graphql/types.gen'
import { Icon } from '../Nav/Icon'
import { t } from '../../utils/intl'
@ -26,8 +25,6 @@ import { locale } from '../../stores/ui'
import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
import { splitToPages } from '../../utils/splitToPages'
const log = getLogger('home view')
type HomeProps = {
randomTopics: Topic[]
recentPublishedArticles: Shout[]

3
src/components/types.ts
View File

@ -1,5 +1,5 @@
// in a separate file to avoid circular dependencies
import type { Author, Shout, Topic } from '../graphql/types.gen'
import type { Author, Chat, Shout, Topic } from '../graphql/types.gen'
// all the things (she said) that could be passed from the server
export type PageProps = {
@ -15,4 +15,5 @@ export type PageProps = {
searchQuery?: string
// other types?
searchResults?: Shout[]
chats?: Chat[]
}

6
src/graphql/mutation/article-create.ts
View File

@ -1,10 +1,8 @@
import { gql } from '@urql/core'
// TODO: sync with backend
export default gql`
mutation ArticleMutation($article: Shout!) {
createArticle(article: $article) {
mutation CreateShoutMutation($shout: ShoutInput!) {
createShout(input: $shout) {
error
shout {
_id: slug

6
src/graphql/mutation/article-destroy.ts
View File

@ -1,10 +1,8 @@
import { gql } from '@urql/core'
// TODO: sync with backend
export default gql`
mutation ArticleMutation($article_id: Int!) {
destroyArticle(article: $article_id) {
mutation DeleteShoutMutation($shout: String!) {
deleteShout(slug: $shout) {
error
}
}

4
src/graphql/mutation/article-update.ts
View File

@ -1,8 +1,8 @@
import { gql } from '@urql/core'
export default gql`
mutation ArticleMutation($article: Shout!) {
updateArticle(article: $article) {
mutation UpdateShoutMutation($shout: Shout!) {
updateShout(input: $shout) {
error
shout {
_id: slug

2
src/graphql/mutation/reaction-create.ts
View File

@ -1,7 +1,5 @@
import { gql } from '@urql/core'
// TODO: sync with backend
export default gql`
mutation CreateReactionMutation($reaction: ReactionInput!) {
createReaction(reaction: $reaction) {

2
src/graphql/mutation/reaction-destroy.ts
View File

@ -1,7 +1,5 @@
import { gql } from '@urql/core'
// TODO: sync with backend
export default gql`
mutation DeleteReactionMutation($id: Int!) {
deleteReaction(id: $id) {

2
src/graphql/mutation/reaction-update.ts
View File

@ -1,7 +1,5 @@
import { gql } from '@urql/core'
// TODO: sync with backend
export default gql`
mutation UpdateReactionMutation($reaction: ReactionInput!) {
updateReaction(reaction: $reaction) {

29
src/graphql/query/article-reactions.ts.bak
View File

@ -1,29 +0,0 @@
import { gql } from '@urql/core'
export default gql`
query ReactionsByShoutQuery($slug: String!, $limit: Int!, $offset: Int!) {
reactionsByShout(slug: $slug, limit: $limit, offset: $offset) {
id
body
createdAt
createdBy {
_id: slug
name
slug
userpic
}
updatedAt
replyTo {
id
}
kind
range
stat {
_id: viewed
viewed
reacted
rating
}
}
}
`

2
src/graphql/query/author-followers.ts
View File

@ -11,7 +11,7 @@ export default gql`
communities
links
createdAt
wasOnlineAt
lastSeen
ratings {
_id: rater
rater

2
src/graphql/query/author-following.ts
View File

@ -11,7 +11,7 @@ export default gql`
communities
links
createdAt
wasOnlineAt
lastSeen
ratings {
_id: rater
rater

2
src/graphql/query/authors-by-slugs.ts
View File

@ -11,7 +11,7 @@ export default gql`
communities
links
createdAt
wasOnlineAt
lastSeen
ratings {
_id: rater
rater

2
src/pages/[...slug].astro
View File

@ -6,7 +6,7 @@ import { initRouter } from '../stores/router'
const slug = Astro.params.slug?.toString()
if (slug.endsWith('.map')) {
return
return Astro.redirect('/404')
}
const article = await apiClient.getArticle({ slug })

2
src/pages/inbox.astro
View File

@ -11,5 +11,5 @@ initRouter(pathname, search)
---
<Zine>
<Root client:load />
<Root chats={chatrooms} client:load />
</Zine>

8
src/stores/auth.ts
View File

@ -1,25 +1,21 @@
import type { AuthResult } from '../graphql/types.gen'
import { getLogger } from '../utils/logger'
import { resetToken, setToken } from '../graphql/privateGraphQLClient'
import { apiClient } from '../utils/apiClient'
import { createSignal } from 'solid-js'
const log = getLogger('auth-store')
const [session, setSession] = createSignal<AuthResult | null>(null)
export const signIn = async (params) => {
const authResult = await apiClient.authLogin(params)
setSession(authResult)
setToken(authResult.token)
log.debug('signed in')
console.debug('signed in')
}
export const signOut = () => {
// TODO: call backend to revoke token
setSession(null)
resetToken()
log.debug('signed out')
console.debug('signed out')
}
export const [emailChecks, setEmailChecks] = createSignal<{ [email: string]: boolean }>({})

39
src/stores/create.ts
View File

@ -1,39 +0,0 @@
import { persistentAtom } from '@nanostores/persistent'
import { Reaction, ReactionKind } from '../graphql/types.gen'
import { atom, computed } from 'nanostores'
import { reactions } from './zine/reactions'
interface Draft {
createdAt: Date
body?: string
title?: string
}
interface Collab {
authors: string[] // slugs
invites?: string[]
createdAt: Date
body?: string
title?: string
}
const drafts = persistentAtom<Draft[]>('drafts', [], {
encode: JSON.stringify,
decode: JSON.parse
}) // save drafts on device
const collabs = atom<Collab[]>([]) // save collabs in backend or in p2p network
/*
const approvals = computed(
reactions,
(rdict) => Object.values(rdict)
.filter((r: Reaction) => r.kind === ReactionKind.Accept)
)
const proposals = computed<Reaction[], typeof reactions>(
reactions,
(rdict) => Object.values(rdict)
.filter((r: Reaction) => r.kind === ReactionKind.Propose)
)
*/
export { drafts, collabs /* approvals, proposals */ }

37
src/stores/editor.ts Normal file
View File

@ -0,0 +1,37 @@
import { persistentMap } from '@nanostores/persistent'
import type { Reaction } from '../graphql/types.gen'
import { atom } from 'nanostores'
import { createSignal } from 'solid-js'
import type { Draft } from '../components/Editor/store/context'
interface Collab {
authors: string[] // slugs
invites?: string[]
createdAt: Date
body?: string
title?: string
}
export const drafts = persistentMap<{ [key: string]: Draft }>(
'drafts',
{},
{
encode: JSON.stringify,
decode: JSON.parse
}
) // save drafts on device
export const collabs = atom<Collab[]>([]) // save collabs in backend or in p2p network
export const [editorReactions, setReactions] = createSignal<Reaction[]>([])
/*
const approvals = computed(
reactions,
(rdict) => Object.values(rdict)
.filter((r: Reaction) => r.kind === ReactionKind.Accept)
)
const proposals = computed<Reaction[], typeof reactions>(
reactions,
(rdict) => Object.values(rdict)
.filter((r: Reaction) => r.kind === ReactionKind.Propose)
)
*/

4
src/stores/zine/articles.ts
View File

@ -3,13 +3,9 @@ import { apiClient } from '../../utils/apiClient'
import { addAuthorsByTopic } from './authors'
import { addTopicsByAuthor } from './topics'
import { byStat } from '../../utils/sortby'
import { getLogger } from '../../utils/logger'
import { createSignal } from 'solid-js'
import { createLazyMemo } from '@solid-primitives/memo'
const log = getLogger('articles store')
const [sortedArticles, setSortedArticles] = createSignal<Shout[]>([])
const [articleEntities, setArticleEntities] = createSignal<{ [articleSlug: string]: Shout }>({})

15
src/stores/zine/authors.ts
View File

@ -1,12 +1,8 @@
import { apiClient } from '../../utils/apiClient'
import type { Author } from '../../graphql/types.gen'
import { getLogger } from '../../utils/logger'
import { createSignal } from 'solid-js'
import { createLazyMemo } from '@solid-primitives/memo'
const log = getLogger('authors store')
export type AuthorsSortBy = 'shouts' | 'name' | 'rating'
const [sortAllBy, setSortAllBy] = createSignal<AuthorsSortBy>('shouts')
@ -24,16 +20,19 @@ const sortedAuthors = createLazyMemo(() => {
// authors.sort(byCreated)
// break
// }
case 'rating':
case 'rating': {
// TODO:
break
case 'shouts':
}
case 'shouts': {
// TODO:
break
case 'name':
log.debug('sorted by name')
}
case 'name': {
console.debug('sorted by name')
authors.sort((a, b) => a.name.localeCompare(b.name))
break
}
}
return authors
})

2
src/stores/zine/reactions.ts
View File

@ -26,7 +26,7 @@ export const loadArticleReactions = async ({
limit?: number
offset?: number
}): Promise<void> => {
const data = await apiClient.getArticleReactions({ articleSlug, limit, offset })
const data = await apiClient.getReactionsForShouts({ shoutSlugs: [articleSlug], limit, offset })
// TODO: const [data, provider] = roomConnect(articleSlug, username, "reactions")
reactionsOrdered.set(data)
}

Some files were not shown because too many files have changed in this diff Show More