Merge branch 'master' into autocomplete-ln-addr

This commit is contained in:
Keyan 2023-10-12 13:16:54 -05:00 committed by GitHub
commit 6cb813f421
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 163 additions and 114 deletions

View File

@ -7,6 +7,7 @@ import Info from './info'
import { numWithUnits } from '../lib/format' import { numWithUnits } from '../lib/format'
import styles from './adv-post-form.module.css' import styles from './adv-post-form.module.css'
import { useMe } from './me' import { useMe } from './me'
import { useRouter } from 'next/router'
const EMPTY_FORWARD = { nym: '', pct: '' } const EMPTY_FORWARD = { nym: '', pct: '' }
@ -19,6 +20,7 @@ export function AdvPostInitial ({ forward, boost }) {
export default function AdvPostForm () { export default function AdvPostForm () {
const me = useMe() const me = useMe()
const router = useRouter()
return ( return (
<AccordianItem <AccordianItem
@ -81,7 +83,7 @@ export default function AdvPostForm () {
) )
}} }}
</VariableInput> </VariableInput>
{me && {me && router.query.type === 'discussion' &&
<Checkbox <Checkbox
label={ label={
<div className='d-flex align-items-center'>crosspost to nostr <div className='d-flex align-items-center'>crosspost to nostr

View File

@ -91,6 +91,7 @@ export function InputSkeleton ({ label, hint }) {
) )
} }
const DEFAULT_MENTION_INDICES = { start: -1, end: -1 }
export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setHasImgLink, onKeyDown, innerRef, ...props }) { export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setHasImgLink, onKeyDown, innerRef, ...props }) {
const [tab, setTab] = useState('write') const [tab, setTab] = useState('write')
const [, meta, helpers] = useField(props) const [, meta, helpers] = useField(props)
@ -122,7 +123,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
}, [innerRef, selectionRange.start, selectionRange.end]) }, [innerRef, selectionRange.start, selectionRange.end])
const [mentionQuery, setMentionQuery] = useState() const [mentionQuery, setMentionQuery] = useState()
const [mentionIndices, setMentionIndices] = useState({ start: -1, end: -1 }) const [mentionIndices, setMentionIndices] = useState(DEFAULT_MENTION_INDICES)
const [userSuggestDropdownStyle, setUserSuggestDropdownStyle] = useState({}) const [userSuggestDropdownStyle, setUserSuggestDropdownStyle] = useState({})
const insertMention = useCallback((name) => { const insertMention = useCallback((name) => {
const { start, end } = mentionIndices const { start, end } = mentionIndices
@ -133,7 +134,79 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
helpers.setValue(updatedValue) helpers.setValue(updatedValue)
setSelectionRange({ start: first.length, end: first.length }) setSelectionRange({ start: first.length, end: first.length })
innerRef.current.focus() innerRef.current.focus()
}, [mentionIndices, innerRef, helpers]) }, [mentionIndices, innerRef, helpers?.setValue])
const onChangeInner = useCallback((formik, e) => {
if (onChange) onChange(formik, e)
if (setHasImgLink) {
setHasImgLink(mdHas(e.target.value, ['link', 'image']))
}
// check for mention editing
const { value, selectionStart } = e.target
let priorSpace = -1
for (let i = selectionStart - 1; i >= 0; i--) {
if (/\s|\n/.test(value[i])) {
priorSpace = i
break
}
}
let nextSpace = value.length
for (let i = selectionStart; i <= value.length; i++) {
if (/\s|\n/.test(value[i])) {
nextSpace = i
break
}
}
const currentSegment = value.substring(priorSpace + 1, nextSpace)
// set the query to the current character segment and note where it appears
if (/^@[\w_]*$/.test(currentSegment)) {
setMentionQuery(currentSegment)
setMentionIndices({ start: priorSpace + 1, end: nextSpace })
const { top, left } = textAreaCaret(e.target, e.target.selectionStart)
setUserSuggestDropdownStyle({
position: 'absolute',
top: `${top + Number(window.getComputedStyle(e.target).lineHeight.replace('px', ''))}px`,
left: `${left}px`
})
} else {
setMentionQuery(undefined)
setMentionIndices(DEFAULT_MENTION_INDICES)
}
}, [onChange, setHasImgLink, setMentionQuery, setMentionIndices, setUserSuggestDropdownStyle])
const onKeyDownInner = useCallback((userSuggestOnKeyDown) => {
return (e) => {
const metaOrCtrl = e.metaKey || e.ctrlKey
if (metaOrCtrl) {
if (e.key === 'k') {
// some browsers use CTRL+K to focus search bar so we have to prevent that behavior
e.preventDefault()
insertMarkdownLinkFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
if (e.key === 'b') {
// some browsers use CTRL+B to open bookmarks so we have to prevent that behavior
e.preventDefault()
insertMarkdownBoldFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
if (e.key === 'i') {
// some browsers might use CTRL+I to do something else so prevent that behavior too
e.preventDefault()
insertMarkdownItalicFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
if (e.key === 'Tab' && e.altKey) {
e.preventDefault()
insertMarkdownTabFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
}
if (!metaOrCtrl) {
userSuggestOnKeyDown(e)
}
if (onKeyDown) onKeyDown(e)
}
}, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown])
return ( return (
<FormGroup label={label} className={groupClassName}> <FormGroup label={label} className={groupClassName}>
@ -159,76 +232,10 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
dropdownStyle={userSuggestDropdownStyle} dropdownStyle={userSuggestDropdownStyle}
>{({ onKeyDown: userSuggestOnKeyDown, resetSuggestions }) => ( >{({ onKeyDown: userSuggestOnKeyDown, resetSuggestions }) => (
<InputInner <InputInner
{...props} onChange={(formik, e) => {
if (onChange) onChange(formik, e)
if (setHasImgLink) {
setHasImgLink(mdHas(e.target.value, ['link', 'image']))
}
// check for mention editing
const { value, selectionStart } = e.target
let priorSpace = -1
for (let i = selectionStart - 1; i >= 0; i--) {
if (/\s|\n/.test(value[i])) {
priorSpace = i
break
}
}
let nextSpace = value.length
for (let i = selectionStart; i <= value.length; i++) {
if (/\s|\n/.test(value[i])) {
nextSpace = i
break
}
}
const currentSegment = value.substring(priorSpace + 1, nextSpace)
// set the query to the current character segment and note where it appears
if (/^@[\w_]*$/.test(currentSegment)) {
setMentionQuery(currentSegment)
setMentionIndices({ start: priorSpace + 1, end: nextSpace })
} else {
setMentionQuery(undefined)
setMentionIndices({ start: -1, end: -1 })
}
const { top, left } = textAreaCaret(e.target, e.target.selectionStart)
setUserSuggestDropdownStyle({
position: 'absolute',
top: `${top + Number(window.getComputedStyle(e.target).lineHeight.replace('px', ''))}px`,
left: `${left}px`
})
}}
innerRef={innerRef} innerRef={innerRef}
onKeyDown={(e) => { {...props}
const metaOrCtrl = e.metaKey || e.ctrlKey onChange={onChangeInner}
if (metaOrCtrl) { onKeyDown={onKeyDownInner(userSuggestOnKeyDown)}
if (e.key === 'k') {
// some browsers use CTRL+K to focus search bar so we have to prevent that behavior
e.preventDefault()
insertMarkdownLinkFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
if (e.key === 'b') {
// some browsers use CTRL+B to open bookmarks so we have to prevent that behavior
e.preventDefault()
insertMarkdownBoldFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
if (e.key === 'i') {
// some browsers might use CTRL+I to do something else so prevent that behavior too
e.preventDefault()
insertMarkdownItalicFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
if (e.key === 'Tab' && e.altKey) {
e.preventDefault()
insertMarkdownTabFormatting(innerRef.current, helpers.setValue, setSelectionRange)
}
}
if (!metaOrCtrl) {
userSuggestOnKeyDown(e)
}
if (onKeyDown) onKeyDown(e)
}}
onBlur={resetSuggestions} onBlur={resetSuggestions}
/>)} />)}
</UserSuggest> </UserSuggest>
@ -301,6 +308,32 @@ function InputInner ({
const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + props.name : undefined const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + props.name : undefined
const onKeyDownInner = useCallback((e) => {
const metaOrCtrl = e.metaKey || e.ctrlKey
if (metaOrCtrl) {
if (e.key === 'Enter') formik?.submitForm()
}
if (onKeyDown) onKeyDown(e)
}, [formik?.submitForm, onKeyDown])
const onChangeInner = useCallback((e) => {
field?.onChange(e)
if (storageKey) {
window.localStorage.setItem(storageKey, e.target.value)
}
if (onChange) {
onChange(formik, e)
}
}, [field?.onChange, storageKey, onChange])
const onBlurInner = useCallback((e) => {
field?.onBlur?.(e)
onBlur && onBlur(e)
}, [field?.onBlur, onBlur])
useEffect(() => { useEffect(() => {
if (overrideValue) { if (overrideValue) {
helpers.setValue(overrideValue) helpers.setValue(overrideValue)
@ -332,31 +365,12 @@ function InputInner ({
<InputGroup hasValidation className={inputGroupClassName}> <InputGroup hasValidation className={inputGroupClassName}>
{prepend} {prepend}
<BootstrapForm.Control <BootstrapForm.Control
onKeyDown={(e) => {
const metaOrCtrl = e.metaKey || e.ctrlKey
if (metaOrCtrl) {
if (e.key === 'Enter') formik?.submitForm()
}
if (onKeyDown) onKeyDown(e)
}}
ref={innerRef} ref={innerRef}
{...field} {...props} {...field}
onChange={(e) => { {...props}
field.onChange(e) onKeyDown={onKeyDownInner}
onChange={onChangeInner}
if (storageKey) { onBlur={onBlurInner}
window.localStorage.setItem(storageKey, e.target.value)
}
if (onChange) {
onChange(formik, e)
}
}}
onBlur={(e) => {
field.onBlur?.(e)
onBlur && onBlur(e)
}}
isInvalid={invalid} isInvalid={invalid}
isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error} isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
/> />
@ -394,6 +408,7 @@ function InputInner ({
) )
} }
const INITIAL_SUGGESTIONS = { array: [], index: 0 }
export function UserSuggest ({ export function UserSuggest ({
query, onSelect, dropdownStyle, children, query, onSelect, dropdownStyle, children,
transformUser = user => user, selectWithTab = true, filterUsers = () => true transformUser = user => user, selectWithTab = true, filterUsers = () => true
@ -419,7 +434,6 @@ export function UserSuggest ({
} }
}) })
const INITIAL_SUGGESTIONS = { array: [], index: 0 }
const [suggestions, setSuggestions] = useState(INITIAL_SUGGESTIONS) const [suggestions, setSuggestions] = useState(INITIAL_SUGGESTIONS)
const resetSuggestions = useCallback(() => setSuggestions(INITIAL_SUGGESTIONS), []) const resetSuggestions = useCallback(() => setSuggestions(INITIAL_SUGGESTIONS), [])
@ -623,7 +637,7 @@ export function Form ({
} }
}, []) }, [])
function clearLocalStorage (values) { const clearLocalStorage = useCallback((values) => {
Object.keys(values).forEach(v => { Object.keys(values).forEach(v => {
window.localStorage.removeItem(storageKeyPrefix + '-' + v) window.localStorage.removeItem(storageKeyPrefix + '-' + v)
if (Array.isArray(values[v])) { if (Array.isArray(values[v])) {
@ -636,7 +650,7 @@ export function Form ({
}) })
} }
}) })
} }, [storageKeyPrefix])
// if `invoiceable` is set, // if `invoiceable` is set,
// support for payment per invoice if they are lurking or don't have enough balance // support for payment per invoice if they are lurking or don't have enough balance
@ -648,6 +662,19 @@ export function Form ({
onSubmit = useInvoiceable(onSubmit, { callback: clearLocalStorage, ...options }) onSubmit = useInvoiceable(onSubmit, { callback: clearLocalStorage, ...options })
} }
const onSubmitInner = useCallback(async (values, ...args) => {
try {
if (onSubmit) {
const options = await onSubmit(values, ...args)
if (!storageKeyPrefix || options?.keepLocalStorage) return
clearLocalStorage(values)
}
} catch (err) {
console.log(err)
toaster.danger(err.message || err.toString?.())
}
}, [onSubmit, toaster, clearLocalStorage, storageKeyPrefix])
return ( return (
<Formik <Formik
initialValues={initial} initialValues={initial}
@ -655,18 +682,7 @@ export function Form ({
validationSchema={schema} validationSchema={schema}
initialTouched={validateImmediately && initial} initialTouched={validateImmediately && initial}
validateOnBlur={false} validateOnBlur={false}
onSubmit={async (values, ...args) => { onSubmit={onSubmitInner}
try {
if (onSubmit) {
const options = await onSubmit(values, ...args)
if (!storageKeyPrefix || options?.keepLocalStorage) return
clearLocalStorage(values)
}
} catch (err) {
console.log(err)
toaster.danger(err.message || err.toString?.())
}
}}
innerRef={innerRef} innerRef={innerRef}
> >
<FormikForm {...props} noValidate> <FormikForm {...props} noValidate>

View File

@ -6,7 +6,6 @@ import { useQuery } from '@apollo/client'
import { SETTINGS } from '../fragments/users' import { SETTINGS } from '../fragments/users'
async function discussionToEvent (item) { async function discussionToEvent (item) {
const pubkey = await window.nostr.getPublicKey()
const createdAt = Math.floor(Date.now() / 1000) const createdAt = Math.floor(Date.now() / 1000)
return { return {
@ -14,8 +13,7 @@ async function discussionToEvent (item) {
kind: 30023, kind: 30023,
content: item.text, content: item.text,
tags: [ tags: [
['d', `https://stacker.news/items/${item.id}`], ['d', item.id.toString()],
['a', `30023:${pubkey}:https://stacker.news/items/${item.id}`, 'wss://relay.nostr.band'],
['title', item.title], ['title', item.title],
['published_at', createdAt.toString()] ['published_at', createdAt.toString()]
] ]

View File

@ -1,5 +1,27 @@
const { PrismaClient } = require('@prisma/client') const { PrismaClient } = require('@prisma/client')
const prisma = new PrismaClient() const prisma = new PrismaClient()
function selectRandomly (items) {
return items[Math.floor(Math.random() * items.length)]
}
async function addComments (parentIds, nComments, userIds, commentText) {
const clonedParentIds = [...parentIds]
const clonedUserIds = [...userIds]
for (let i = 0; i < nComments; i++) {
const selectedParent = selectRandomly(clonedParentIds)
const selectedUserId = selectRandomly(clonedUserIds)
const newComment = await prisma.item.create({
data: {
parentId: selectedParent,
userId: selectedUserId,
text: commentText
}
})
clonedParentIds.push(newComment.id)
}
}
async function main () { async function main () {
const k00b = await prisma.user.upsert({ const k00b = await prisma.user.upsert({
where: { name: 'k00b' }, where: { name: 'k00b' },
@ -155,6 +177,17 @@ async function main () {
} }
} }
}) })
const bigCommentPost = await prisma.item.create({
data: {
title: 'a discussion post with a lot of comments',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
userId: k00b.id,
subName: 'bitcoin'
}
})
addComments([bigCommentPost.id], 200, [k00b.id, anon.id, satoshi.id, greg.id, stan.id], 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.')
} }
main() main()
.catch(e => { .catch(e => {