forked from coracle/flotilla
Small fixes/performance improvements
This commit is contained in:
Jon Staab
+1
-1
@@ -108,7 +108,7 @@ export const loginWithNip46 = async ({
|
||||
connectSecret?: string
|
||||
}) => {
|
||||
const broker = Nip46Broker.get({relays, clientSecret, signerPubkey})
|
||||
const result = await broker.connect(signerPubkey, connectSecret, NIP46_PERMS)
|
||||
const result = await broker.connect(connectSecret, NIP46_PERMS)
|
||||
|
||||
// TODO: remove ack result
|
||||
if (!["ack", connectSecret].includes(result)) return false
|
||||
|
||||
@@ -1,56 +1,54 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {createEditor, EditorContent} from "svelte-tiptap"
|
||||
import {writable} from "svelte/store"
|
||||
import {isMobile} from "@lib/html"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import {getEditorOptions, getEditorTags} from "@lib/editor"
|
||||
import {getPubkeyHints} from "@app/commands"
|
||||
import {getEditor} from "@app/editor"
|
||||
|
||||
export let onSubmit: any
|
||||
export let content = ""
|
||||
export let editor = createEditor(
|
||||
getEditorOptions({
|
||||
submit,
|
||||
getPubkeyHints,
|
||||
submitOnEnter: true,
|
||||
autofocus: !isMobile,
|
||||
}),
|
||||
)
|
||||
export let editor: ReturnType<typeof getEditor> | undefined = undefined
|
||||
|
||||
function submit() {
|
||||
if ($loading) return
|
||||
const uploading = writable(false)
|
||||
|
||||
let element: HTMLElement
|
||||
|
||||
const uploadFiles = () => $editor!.chain().selectFiles().run()
|
||||
|
||||
const submit = () => {
|
||||
if ($uploading) return
|
||||
|
||||
onSubmit({
|
||||
content: $editor.getText({blockSeparator: "\n"}),
|
||||
tags: getEditorTags($editor),
|
||||
content: $editor!.getText({blockSeparator: "\n"}).trim(),
|
||||
tags: $editor!.storage.welshman.getEditorTags(),
|
||||
})
|
||||
|
||||
$editor.chain().clearContent().run()
|
||||
$editor!.chain().clearContent().run()
|
||||
}
|
||||
|
||||
$: loading = $editor?.storage.fileUpload.loading
|
||||
|
||||
onMount(() => {
|
||||
$editor.commands.setContent(content)
|
||||
editor = getEditor({autofocus: !isMobile, aggressive: true, element, submit, uploading})
|
||||
|
||||
$editor!.chain().setContent(content).run()
|
||||
})
|
||||
</script>
|
||||
|
||||
<form
|
||||
class="relative z-feature flex gap-2 p-2"
|
||||
on:submit|preventDefault={$loading ? undefined : submit}>
|
||||
on:submit|preventDefault={$uploading ? undefined : submit}>
|
||||
<Button
|
||||
data-tip="Add an image"
|
||||
class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
|
||||
disabled={$loading}
|
||||
on:click={$editor.commands.selectFiles}>
|
||||
{#if $loading}
|
||||
disabled={$uploading}
|
||||
on:click={uploadFiles}>
|
||||
{#if $uploading}
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
{:else}
|
||||
<Icon icon="gallery-send" />
|
||||
{/if}
|
||||
</Button>
|
||||
<div class="chat-editor flex-grow overflow-hidden">
|
||||
<EditorContent editor={$editor} />
|
||||
<div bind:this={element} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import type {Readable} from "svelte/store"
|
||||
import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
|
||||
import {writable} from "svelte/store"
|
||||
import {randomId} from "@welshman/lib"
|
||||
import {createEvent, EVENT_DATE, EVENT_TIME} from "@welshman/util"
|
||||
import {createEvent, EVENT_TIME} from "@welshman/util"
|
||||
import {publishThunk, dateToSeconds} from "@welshman/app"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Field from "@lib/components/Field.svelte"
|
||||
@@ -12,16 +11,17 @@
|
||||
import ModalFooter from "@lib/components/ModalFooter.svelte"
|
||||
import DateTimeInput from "@lib/components/DateTimeInput.svelte"
|
||||
import {PROTECTED} from "@app/state"
|
||||
import {getPubkeyHints} from "@app/commands"
|
||||
import {getEditorOptions, getEditorTags} from "@lib/editor"
|
||||
import {getEditor} from "@app/editor"
|
||||
import {pushToast} from "@app/toast"
|
||||
|
||||
export let url
|
||||
|
||||
const uploading = writable(false)
|
||||
|
||||
const back = () => history.back()
|
||||
|
||||
const submit = () => {
|
||||
if ($loading) return
|
||||
if ($uploading) return
|
||||
|
||||
if (!title) {
|
||||
return pushToast({
|
||||
@@ -37,16 +37,15 @@
|
||||
})
|
||||
}
|
||||
|
||||
const kind = isAllDay ? EVENT_DATE : EVENT_TIME
|
||||
const event = createEvent(kind, {
|
||||
content: $editor.getText({blockSeparator: "\n"}),
|
||||
const event = createEvent(EVENT_TIME, {
|
||||
content: $editor.getText({blockSeparator: "\n"}).trim(),
|
||||
tags: [
|
||||
["d", randomId()],
|
||||
["title", title],
|
||||
["location", location],
|
||||
["start", dateToSeconds(start).toString()],
|
||||
["end", dateToSeconds(end).toString()],
|
||||
...getEditorTags($editor),
|
||||
...$editor.storage.welshman.getEditorTags(),
|
||||
PROTECTED,
|
||||
],
|
||||
})
|
||||
@@ -55,17 +54,15 @@
|
||||
history.back()
|
||||
}
|
||||
|
||||
let editor: Readable<Editor>
|
||||
const isAllDay = false
|
||||
let element: HTMLElement
|
||||
let editor: ReturnType<typeof getEditor>
|
||||
let title = ""
|
||||
let location = ""
|
||||
let start: Date
|
||||
let end: Date
|
||||
|
||||
$: loading = $editor?.storage.fileUpload.loading
|
||||
|
||||
onMount(() => {
|
||||
editor = createEditor(getEditorOptions({submit, getPubkeyHints}))
|
||||
editor = getEditor({submit, element, uploading})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -86,13 +83,13 @@
|
||||
slot="input"
|
||||
class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
|
||||
<div class="input-editor flex-grow overflow-hidden">
|
||||
<EditorContent editor={$editor} />
|
||||
<div bind:this={element} />
|
||||
</div>
|
||||
<Button
|
||||
data-tip="Add an image"
|
||||
class="center btn tooltip"
|
||||
on:click={$editor.commands.selectFiles}>
|
||||
{#if $loading}
|
||||
on:click={() => $editor.chain().selectFiles().run()}>
|
||||
{#if $uploading}
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
{:else}
|
||||
<Icon icon="gallery-send" />
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
import {type Instance} from "tippy.js"
|
||||
import {append, remove, uniq} from "@welshman/lib"
|
||||
import {profileSearch} from "@welshman/app"
|
||||
import {Suggestions} from "@welshman/editor"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Tippy from "@lib/components/Tippy.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Suggestions from "@lib/editor/Suggestions.svelte"
|
||||
import SuggestionProfile from "@lib/editor/SuggestionProfile.svelte"
|
||||
import ProfileSuggestion from "@app/editor/ProfileSuggestion.svelte"
|
||||
import ProfileName from "@app/components/ProfileName.svelte"
|
||||
import ProfileDetail from "@app/components/ProfileDetail.svelte"
|
||||
import {pushModal} from "@app/modal"
|
||||
@@ -78,7 +78,7 @@
|
||||
term,
|
||||
select: selectPubkey,
|
||||
search: profileSearch,
|
||||
component: SuggestionProfile,
|
||||
component: ProfileSuggestion,
|
||||
class: "rounded-box",
|
||||
style: `left: 4px; width: ${input?.clientWidth + 12}px`,
|
||||
}}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import type {Readable} from "svelte/store"
|
||||
import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
|
||||
import {writable} from "svelte/store"
|
||||
import {createEvent, THREAD} from "@welshman/util"
|
||||
import {publishThunk} from "@welshman/app"
|
||||
import {isMobile} from "@lib/html"
|
||||
@@ -12,15 +11,16 @@
|
||||
import ModalFooter from "@lib/components/ModalFooter.svelte"
|
||||
import {pushToast} from "@app/toast"
|
||||
import {GENERAL, tagRoom, PROTECTED} from "@app/state"
|
||||
import {getPubkeyHints} from "@app/commands"
|
||||
import {getEditorOptions, getEditorTags} from "@lib/editor"
|
||||
import {getEditor} from "@app/editor"
|
||||
|
||||
export let url
|
||||
|
||||
const uploading = writable(false)
|
||||
|
||||
const back = () => history.back()
|
||||
|
||||
const submit = () => {
|
||||
if ($loading) return
|
||||
if ($uploading) return
|
||||
|
||||
if (!title) {
|
||||
return pushToast({
|
||||
@@ -29,7 +29,7 @@
|
||||
})
|
||||
}
|
||||
|
||||
const content = $editor.getText({blockSeparator: "\n"})
|
||||
const content = $editor.getText({blockSeparator: "\n"}).trim()
|
||||
|
||||
if (!content.trim()) {
|
||||
return pushToast({
|
||||
@@ -38,7 +38,12 @@
|
||||
})
|
||||
}
|
||||
|
||||
const tags = [["title", title], tagRoom(GENERAL, url), ...getEditorTags($editor), PROTECTED]
|
||||
const tags = [
|
||||
...$editor.storage.welshman.getEditorTags(),
|
||||
tagRoom(GENERAL, url),
|
||||
["title", title],
|
||||
PROTECTED,
|
||||
]
|
||||
|
||||
publishThunk({
|
||||
relays: [url],
|
||||
@@ -49,14 +54,11 @@
|
||||
}
|
||||
|
||||
let title: string
|
||||
let editor: Readable<Editor>
|
||||
|
||||
$: loading = $editor?.storage.fileUpload.loading
|
||||
let element: HTMLElement
|
||||
let editor: ReturnType<typeof getEditor>
|
||||
|
||||
onMount(() => {
|
||||
editor = createEditor(
|
||||
getEditorOptions({submit, getPubkeyHints, placeholder: "What's on your mind?"}),
|
||||
)
|
||||
editor = getEditor({submit, element, uploading, placeholder: "What's on your mind?"})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -81,14 +83,14 @@
|
||||
<Field>
|
||||
<p slot="label">Message*</p>
|
||||
<div slot="input" class="note-editor flex-grow overflow-hidden">
|
||||
<EditorContent editor={$editor} />
|
||||
<div bind:this={element} />
|
||||
</div>
|
||||
</Field>
|
||||
<Button
|
||||
data-tip="Add an image"
|
||||
class="tooltip tooltip-left absolute bottom-1 right-2"
|
||||
on:click={$editor.commands.selectFiles}>
|
||||
{#if $loading}
|
||||
{#if $uploading}
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
{:else}
|
||||
<Icon icon="paperclip" size={3} />
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import type {Readable} from "svelte/store"
|
||||
import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
|
||||
import {writable} from "svelte/store"
|
||||
import {isMobile} from "@lib/html"
|
||||
import {fly, slideAndFade} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import ModalFooter from "@lib/components/ModalFooter.svelte"
|
||||
import {getEditorOptions, getEditorTags} from "@lib/editor"
|
||||
import {getPubkeyHints, publishComment} from "@app/commands"
|
||||
import {publishComment} from "@app/commands"
|
||||
import {tagRoom, GENERAL, PROTECTED} from "@app/state"
|
||||
import {getEditor} from "@app/editor"
|
||||
import {pushToast} from "@app/toast"
|
||||
|
||||
export let url
|
||||
@@ -17,13 +16,15 @@
|
||||
export let onClose
|
||||
export let onSubmit
|
||||
|
||||
const uploading = writable(false)
|
||||
|
||||
const submit = () => {
|
||||
if ($loading) return
|
||||
if ($uploading) return
|
||||
|
||||
const content = $editor.getText({blockSeparator: "\n"})
|
||||
const tags = [...getEditorTags($editor), tagRoom(GENERAL, url), PROTECTED]
|
||||
const content = $editor.getText({blockSeparator: "\n"}).trim()
|
||||
const tags = [...$editor.storage.welshman.getEditorTags(), tagRoom(GENERAL, url), PROTECTED]
|
||||
|
||||
if (!content.trim()) {
|
||||
if (!content) {
|
||||
return pushToast({
|
||||
theme: "error",
|
||||
message: "Please provide a message for your reply.",
|
||||
@@ -33,12 +34,11 @@
|
||||
onSubmit(publishComment({event, content, tags, relays: [url]}))
|
||||
}
|
||||
|
||||
let editor: Readable<Editor>
|
||||
|
||||
$: loading = $editor?.storage.fileUpload.loading
|
||||
let editor: ReturnType<typeof getEditor>
|
||||
let element: HTMLElement
|
||||
|
||||
onMount(() => {
|
||||
editor = createEditor(getEditorOptions({submit, getPubkeyHints, autofocus: !isMobile}))
|
||||
editor = getEditor({element, submit, uploading, autofocus: !isMobile})
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -49,13 +49,13 @@
|
||||
class="card2 sticky bottom-2 z-feature mx-2 mt-4 bg-neutral">
|
||||
<div class="relative">
|
||||
<div class="note-editor flex-grow overflow-hidden">
|
||||
<EditorContent editor={$editor} />
|
||||
<div bind:this={element} />
|
||||
</div>
|
||||
<Button
|
||||
data-tip="Add an image"
|
||||
class="tooltip tooltip-left absolute bottom-1 right-2"
|
||||
on:click={$editor.commands.selectFiles}>
|
||||
{#if $loading}
|
||||
{#if $uploading}
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
{:else}
|
||||
<Icon icon="paperclip" size={3} />
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
import {deriveProfileDisplay} from "@welshman/app"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
|
||||
const display = deriveProfileDisplay(node.attrs.pubkey)
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper as="span">
|
||||
<button class="tiptap-object {selected ? 'tiptap-active' : ''}">
|
||||
@{$display}
|
||||
</button>
|
||||
</NodeViewWrapper>
|
||||
@@ -3,18 +3,16 @@
|
||||
import {
|
||||
userFollows,
|
||||
deriveUserWotScore,
|
||||
deriveProfile,
|
||||
deriveHandleForPubkey,
|
||||
displayHandle,
|
||||
deriveProfileDisplay,
|
||||
} from "@welshman/app"
|
||||
import Avatar from "@lib/components/Avatar.svelte"
|
||||
import WotScore from "@lib/components/WotScore.svelte"
|
||||
import ProfileCircle from "@app/components/ProfileCircle.svelte"
|
||||
|
||||
export let value
|
||||
|
||||
const pubkey = value
|
||||
const profile = deriveProfile(pubkey)
|
||||
const profileDisplay = deriveProfileDisplay(pubkey)
|
||||
const handle = deriveHandleForPubkey(pubkey)
|
||||
const score = deriveUserWotScore(pubkey)
|
||||
@@ -24,11 +22,11 @@
|
||||
|
||||
<div class="flex max-w-full gap-3">
|
||||
<div class="py-1">
|
||||
<Avatar src={$profile?.picture} size={10} />
|
||||
<ProfileCircle {pubkey} />
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-bold overflow-hidden text-ellipsis">
|
||||
<div class="text-bold overflow-hidden text-ellipsis text-base">
|
||||
{$profileDisplay}
|
||||
</div>
|
||||
<WotScore score={$score} active={following} />
|
||||
@@ -0,0 +1,102 @@
|
||||
import type {Writable} from "svelte/store"
|
||||
import {derived} from "svelte/store"
|
||||
import {createEditor, SvelteNodeViewRenderer} from "svelte-tiptap"
|
||||
import {ctx} from "@welshman/lib"
|
||||
import type {StampedEvent} from "@welshman/util"
|
||||
import {signer, profileSearch} from "@welshman/app"
|
||||
import {MentionSuggestion, WelshmanExtension} from "@welshman/editor"
|
||||
import {getSetting, userSettingValues} from "@app/state"
|
||||
import ProfileSuggestion from "./ProfileSuggestion.svelte"
|
||||
import EditMention from "./EditMention.svelte"
|
||||
|
||||
export const getUploadType = () => getSetting<"nip96" | "blossom">("upload_type")
|
||||
|
||||
export const getUploadUrl = () => {
|
||||
const {upload_type, nip96_urls, blossom_urls} = userSettingValues.get()
|
||||
|
||||
return upload_type === "nip96"
|
||||
? nip96_urls[0] || "https://nostr.build"
|
||||
: blossom_urls[0] || "https://cdn.satellite.earth"
|
||||
}
|
||||
|
||||
export const signWithAssert = async (template: StampedEvent) => {
|
||||
const event = await signer.get().sign(template)
|
||||
|
||||
return event!
|
||||
}
|
||||
|
||||
export const getEditor = ({
|
||||
aggressive = false,
|
||||
autofocus = false,
|
||||
charCount,
|
||||
content = "",
|
||||
element,
|
||||
placeholder = "",
|
||||
submit,
|
||||
uploading,
|
||||
wordCount,
|
||||
}: {
|
||||
aggressive?: boolean
|
||||
autofocus?: boolean
|
||||
charCount?: Writable<number>
|
||||
content?: string
|
||||
element: HTMLElement
|
||||
placeholder?: string
|
||||
submit: () => void
|
||||
uploading?: Writable<boolean>
|
||||
wordCount?: Writable<number>
|
||||
}) =>
|
||||
createEditor({
|
||||
element,
|
||||
content,
|
||||
autofocus,
|
||||
extensions: [
|
||||
WelshmanExtension.configure({
|
||||
submit,
|
||||
sign: signWithAssert,
|
||||
defaultUploadType: getUploadType(),
|
||||
defaultUploadUrl: getUploadUrl(),
|
||||
extensions: {
|
||||
placeholder: {
|
||||
config: {
|
||||
placeholder,
|
||||
},
|
||||
},
|
||||
breakOrSubmit: {
|
||||
config: {
|
||||
aggressive,
|
||||
},
|
||||
},
|
||||
fileUpload: {
|
||||
config: {
|
||||
onDrop() {
|
||||
uploading?.set(true)
|
||||
},
|
||||
onComplete() {
|
||||
uploading?.set(false)
|
||||
},
|
||||
},
|
||||
},
|
||||
nprofile: {
|
||||
extend: {
|
||||
addNodeView: () => SvelteNodeViewRenderer(EditMention),
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
MentionSuggestion({
|
||||
editor: (this as any).editor,
|
||||
search: derived(profileSearch, s => s.searchValues),
|
||||
getRelays: (pubkey: string) => ctx.app.router.FromPubkeys([pubkey]).getUrls(),
|
||||
component: ProfileSuggestion,
|
||||
}),
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
onUpdate({editor}) {
|
||||
wordCount?.set(editor.storage.wordCount.words)
|
||||
charCount?.set(editor.storage.wordCount.chars)
|
||||
},
|
||||
})
|
||||
+20
-15
@@ -1,7 +1,7 @@
|
||||
import {derived} from "svelte/store"
|
||||
import {synced} from "@welshman/store"
|
||||
import {synced, throttled} from "@welshman/store"
|
||||
import {pubkey} from "@welshman/app"
|
||||
import {prop, sortBy, now} from "@welshman/lib"
|
||||
import {prop, identity, now} from "@welshman/lib"
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import {MESSAGE} from "@welshman/util"
|
||||
import {makeSpacePath, makeChatPath, makeThreadPath, makeRoomPath} from "@app/routes"
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
THREAD_FILTER,
|
||||
COMMENT_FILTER,
|
||||
chats,
|
||||
getEventsForUrl,
|
||||
getUrlsForEvent,
|
||||
userRoomsByUrl,
|
||||
repositoryStore,
|
||||
} from "@app/state"
|
||||
@@ -25,11 +25,12 @@ export const setChecked = (key: string) => checked.update(state => ({...state, [
|
||||
// Derived notifications state
|
||||
|
||||
export const notifications = derived(
|
||||
[pubkey, checked, chats, userRoomsByUrl, repositoryStore],
|
||||
([$pubkey, $checked, $chats, $userRoomsByUrl, $repository]) => {
|
||||
const hasNotification = (path: string, events: TrustedEvent[]) => {
|
||||
const [latestEvent] = sortBy($e => -$e.created_at, events)
|
||||
|
||||
throttled(
|
||||
1000,
|
||||
derived([pubkey, checked, chats, userRoomsByUrl, repositoryStore, getUrlsForEvent], identity),
|
||||
),
|
||||
([$pubkey, $checked, $chats, $userRoomsByUrl, $repository, $getUrlsForEvent]) => {
|
||||
const hasNotification = (path: string, latestEvent: TrustedEvent | undefined) => {
|
||||
if (!latestEvent || latestEvent.pubkey === $pubkey) {
|
||||
return false
|
||||
}
|
||||
@@ -50,29 +51,33 @@ export const notifications = derived(
|
||||
for (const {pubkeys, messages} of $chats) {
|
||||
const chatPath = makeChatPath(pubkeys)
|
||||
|
||||
if (hasNotification(chatPath, messages)) {
|
||||
if (hasNotification(chatPath, messages[0])) {
|
||||
paths.add("/chat")
|
||||
paths.add(chatPath)
|
||||
}
|
||||
}
|
||||
|
||||
const allThreadEvents = $repository.query([THREAD_FILTER, COMMENT_FILTER])
|
||||
const allMessageEvents = $repository.query([{kinds: [MESSAGE]}])
|
||||
|
||||
for (const [url, rooms] of $userRoomsByUrl.entries()) {
|
||||
const spacePath = makeSpacePath(url)
|
||||
const threadPath = makeThreadPath(url)
|
||||
const threadFilters = [THREAD_FILTER, COMMENT_FILTER]
|
||||
const threadEvents = getEventsForUrl($repository, url, threadFilters)
|
||||
const latestEvent = allThreadEvents.find(e => $getUrlsForEvent(e.id).includes(url))
|
||||
|
||||
if (hasNotification(threadPath, threadEvents)) {
|
||||
if (hasNotification(threadPath, latestEvent)) {
|
||||
paths.add(spacePath)
|
||||
paths.add(threadPath)
|
||||
}
|
||||
|
||||
for (const room of rooms) {
|
||||
const roomPath = makeRoomPath(url, room)
|
||||
const roomFilters = [{kinds: [MESSAGE], "#h": [room]}]
|
||||
const roomEvents = getEventsForUrl($repository, url, roomFilters)
|
||||
const latestEvent = allMessageEvents.find(
|
||||
e =>
|
||||
$getUrlsForEvent(e.id).includes(url) && e.tags.find(t => t[0] === "h" && t[1] === room),
|
||||
)
|
||||
|
||||
if (hasNotification(roomPath, roomEvents)) {
|
||||
if (hasNotification(roomPath, latestEvent)) {
|
||||
paths.add(spacePath)
|
||||
paths.add(roomPath)
|
||||
}
|
||||
|
||||
+5
-2
@@ -1,20 +1,23 @@
|
||||
import {get} from "svelte/store"
|
||||
import {partition, assoc, now, ago, MONTH} from "@welshman/lib"
|
||||
import {MESSAGE, DELETE, THREAD, COMMENT} from "@welshman/util"
|
||||
import type {Subscription} from "@welshman/net"
|
||||
import type {AppSyncOpts} from "@welshman/app"
|
||||
import {subscribe, repository, pull, hasNegentropy} from "@welshman/app"
|
||||
import {userRoomsByUrl, getEventsForUrl} from "@app/state"
|
||||
import {userRoomsByUrl, getUrlsForEvent} from "@app/state"
|
||||
|
||||
// Utils
|
||||
|
||||
export const pullConservatively = ({relays, filters}: AppSyncOpts) => {
|
||||
const $getUrlsForEvent = get(getUrlsForEvent)
|
||||
const [smart, dumb] = partition(hasNegentropy, relays)
|
||||
const promises = [pull({relays: smart, filters})]
|
||||
const allEvents = repository.query(filters, {shouldSort: false})
|
||||
|
||||
// Since pulling from relays without negentropy is expensive, limit how many
|
||||
// duplicates we repeatedly download
|
||||
for (const url of dumb) {
|
||||
const events = getEventsForUrl(repository, url, filters)
|
||||
const events = allEvents.filter(e => $getUrlsForEvent(e.id).includes(url))
|
||||
|
||||
if (events.length > 100) {
|
||||
filters = filters.map(assoc("since", events[10]!.created_at))
|
||||
|
||||
+2
-1
@@ -607,7 +607,8 @@ export const userSettingValues = withGetter(
|
||||
derived(userSettings, $s => $s?.values || defaultSettings),
|
||||
)
|
||||
|
||||
export const getSetting = (key: keyof Settings["values"]) => userSettingValues.get()[key]
|
||||
export const getSetting = <T = any>(key: keyof Settings["values"]) =>
|
||||
userSettingValues.get()[key] as T
|
||||
|
||||
export const userMembership = withGetter(
|
||||
derived([pubkey, membershipByPubkey], ([$pubkey, $membershipByPubkey]) => {
|
||||
|
||||
@@ -4,10 +4,9 @@
|
||||
import {type Instance} from "tippy.js"
|
||||
import {identity} from "@welshman/lib"
|
||||
import {createSearch} from "@welshman/app"
|
||||
import {Suggestions, SuggestionString} from "@welshman/editor"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Tippy from "@lib/components/Tippy.svelte"
|
||||
import Suggestions from "@lib/editor/Suggestions.svelte"
|
||||
import SuggestionString from "@lib/editor/SuggestionString.svelte"
|
||||
|
||||
export let value: string
|
||||
export let options: string[]
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import {clip} from "@app/toast"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
|
||||
const copy = () => clip(node.attrs.lnbc)
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper class="inline">
|
||||
<Button on:click={copy} class={cx("link-content", {"link-content-selected": selected})}>
|
||||
<Icon icon="bolt" size={3} class="inline-block translate-y-px" />
|
||||
{node.attrs.lnbc.slice(0, 16)}...
|
||||
</Button>
|
||||
</NodeViewWrapper>
|
||||
@@ -1,42 +0,0 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
import {always, nthEq} from "@welshman/lib"
|
||||
import {parse, renderAsText, ParsedType} from "@welshman/content"
|
||||
import {type TrustedEvent, fromNostrURI, Address} from "@welshman/util"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import {deriveEvent, entityLink} from "@app/state"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
|
||||
const renderLink = (href: string, display: string) => display
|
||||
|
||||
const displayEvent = (e: TrustedEvent) => {
|
||||
const content = e?.tags.find(nthEq(0, "alt"))?.[1] || e?.content || ""
|
||||
|
||||
if (content.length < 1) {
|
||||
return fromNostrURI(nevent || naddr).slice(0, 16) + "..."
|
||||
}
|
||||
|
||||
const parsed = parse({...e, content})
|
||||
|
||||
// Try stripping entities, but if we get nothing back go ahead and show them
|
||||
const renderEntity = always(parsed.find(p => p.type === ParsedType.Text) ? "" : "[quote]")
|
||||
|
||||
return renderAsText(parsed, {renderLink, renderEntity})
|
||||
}
|
||||
|
||||
$: ({identifier, pubkey, kind, id, relays = [], nevent, naddr} = node.attrs)
|
||||
$: event = deriveEvent(id || new Address(kind, pubkey, identifier).toString(), relays)
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper class="inline">
|
||||
<Link
|
||||
external
|
||||
href={entityLink(node.attrs.nevent)}
|
||||
class={cx("link-content", {"link-content-selected": selected})}>
|
||||
{displayEvent($event)}
|
||||
</Link>
|
||||
</NodeViewWrapper>
|
||||
@@ -1,18 +0,0 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper class={cx("link-content inline", {"link-content-selected": selected})}>
|
||||
{#if node.attrs.uploading}
|
||||
<span class="loading loading-spinner loading-xs translate-y-[2px] scale-75" />
|
||||
{:else}
|
||||
<Icon icon="paperclip" size={3} class="inline-block translate-y-px" />
|
||||
{/if}
|
||||
{node.attrs.file.name}
|
||||
</NodeViewWrapper>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
import {displayProfile} from "@welshman/util"
|
||||
import {deriveProfile} from "@welshman/app"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import {pubkeyLink} from "@app/state"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
export let selected: NodeViewProps["selected"]
|
||||
|
||||
$: profile = deriveProfile(node.attrs.pubkey, node.attrs.relays)
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper class="inline">
|
||||
<Link
|
||||
external
|
||||
href={pubkeyLink(node.attrs.pubkey, node.attrs.relays)}
|
||||
class={cx("link-content", {"link-content-selected": selected})}>
|
||||
@{displayProfile($profile)}
|
||||
</Link>
|
||||
</NodeViewWrapper>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type {NodeViewProps} from "@tiptap/core"
|
||||
import {NodeViewWrapper} from "svelte-tiptap"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
|
||||
export let node: NodeViewProps["node"]
|
||||
</script>
|
||||
|
||||
<NodeViewWrapper class="link-content inline">
|
||||
{#if node.attrs.uploading}
|
||||
<span class="loading loading-spinner loading-xs translate-y-[2px] scale-75" />
|
||||
{:else}
|
||||
<Icon icon="paperclip" size={3} class="inline-block translate-y-px" />
|
||||
{/if}
|
||||
{node.attrs.file.name}
|
||||
</NodeViewWrapper>
|
||||
@@ -1,395 +0,0 @@
|
||||
import type {CommandProps, Editor} from "@tiptap/core"
|
||||
import {Extension} from "@tiptap/core"
|
||||
import {now} from "@welshman/lib"
|
||||
import type {StampedEvent, SignedEvent} from "@welshman/util"
|
||||
import type {ImageAttributes, VideoAttributes} from "nostr-editor"
|
||||
import {readServerConfig, uploadFile} from "nostr-tools/nip96"
|
||||
import {getToken} from "nostr-tools/nip98"
|
||||
import type {Node} from "prosemirror-model"
|
||||
import {Plugin, PluginKey} from "prosemirror-state"
|
||||
import {writable} from "svelte/store"
|
||||
|
||||
declare module "@tiptap/core" {
|
||||
interface Commands<ReturnType> {
|
||||
uploadFile: {
|
||||
selectFiles: () => ReturnType
|
||||
uploadFiles: () => ReturnType
|
||||
getMetaTags: () => string[][]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface FileUploadOptions {
|
||||
allowedMimeTypes: string[]
|
||||
expiration: number
|
||||
immediateUpload: boolean
|
||||
hash: (file: File) => Promise<string>
|
||||
sign?: (event: StampedEvent) => Promise<SignedEvent | undefined>
|
||||
onDrop: (currentEditor: Editor, file: File, pos: number) => void
|
||||
onComplete: (currentEditor: Editor) => void
|
||||
}
|
||||
|
||||
interface UploadTask {
|
||||
url?: string
|
||||
sha256?: string
|
||||
error?: string
|
||||
}
|
||||
|
||||
function bufferToHex(buffer: ArrayBuffer) {
|
||||
return Array.from(new Uint8Array(buffer))
|
||||
.map(b => b.toString(16).padStart(2, "0"))
|
||||
.join("")
|
||||
}
|
||||
|
||||
export const FileUploadExtension = Extension.create<FileUploadOptions>({
|
||||
name: "fileUpload",
|
||||
|
||||
addStorage() {
|
||||
return {
|
||||
loading: writable(false),
|
||||
tags: [] as string[][],
|
||||
}
|
||||
},
|
||||
|
||||
addOptions() {
|
||||
return {
|
||||
allowedMimeTypes: [
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"video/mp4",
|
||||
"video/mpeg",
|
||||
"video/webm",
|
||||
],
|
||||
immediateUpload: true,
|
||||
expiration: 60000,
|
||||
async hash(file: File) {
|
||||
return bufferToHex(await crypto.subtle.digest("SHA-256", await file.arrayBuffer()))
|
||||
},
|
||||
onDrop() {},
|
||||
onComplete() {},
|
||||
}
|
||||
},
|
||||
|
||||
addCommands() {
|
||||
return {
|
||||
selectFiles: () => props => {
|
||||
props.tr.setMeta("selectFiles", true)
|
||||
return true
|
||||
},
|
||||
uploadFiles: () => (props: CommandProps) => {
|
||||
props.tr.setMeta("uploadFiles", true)
|
||||
return true
|
||||
},
|
||||
getMetaTags: () =>
|
||||
((props: CommandProps) => {
|
||||
const tags: string[][] = []
|
||||
// make sure the file uploaded is still in the editor content
|
||||
props.editor.state.doc.descendants(node => {
|
||||
if (!(node.type.name === "image" || node.type.name === "video")) {
|
||||
return
|
||||
}
|
||||
const tag = props.editor.storage.fileUpload.tags.find((t: string[]) =>
|
||||
t[1].includes(node.attrs.src),
|
||||
)
|
||||
if (tag) {
|
||||
tags.push(tag)
|
||||
}
|
||||
})
|
||||
return tags
|
||||
}) as any,
|
||||
}
|
||||
},
|
||||
|
||||
addProseMirrorPlugins() {
|
||||
const uploader = new Uploader(this.editor, this.options)
|
||||
return [
|
||||
new Plugin({
|
||||
key: new PluginKey("fileUploadPlugin"),
|
||||
state: {
|
||||
init() {
|
||||
return {}
|
||||
},
|
||||
apply(tr) {
|
||||
setTimeout(() => {
|
||||
if (tr.getMeta("selectFiles")) {
|
||||
uploader.selectFiles()
|
||||
tr.setMeta("selectFiles", null)
|
||||
} else if (tr.getMeta("uploadFiles")) {
|
||||
uploader.uploadFiles()
|
||||
tr.setMeta("uploadFiles", null)
|
||||
}
|
||||
})
|
||||
return {}
|
||||
},
|
||||
},
|
||||
props: {
|
||||
handleDrop: (_, event) => {
|
||||
return uploader.handleDrop(event)
|
||||
},
|
||||
},
|
||||
}),
|
||||
]
|
||||
},
|
||||
})
|
||||
|
||||
class Uploader {
|
||||
constructor(
|
||||
public editor: Editor,
|
||||
private options: FileUploadOptions,
|
||||
) {}
|
||||
|
||||
get view() {
|
||||
return this.editor.view
|
||||
}
|
||||
|
||||
addFile(file: File, pos: number) {
|
||||
if (
|
||||
!this.options.allowedMimeTypes.some(amt => amt.split("*").every(s => file.type.includes(s)))
|
||||
) {
|
||||
return false
|
||||
}
|
||||
const {tr} = this.view.state
|
||||
const [mimetype] = file.type.split("/")
|
||||
const node = this.view.state.schema.nodes[mimetype].create({
|
||||
file,
|
||||
src: URL.createObjectURL(file),
|
||||
alt: "",
|
||||
uploading: false,
|
||||
uploadError: null,
|
||||
})
|
||||
tr.insert(pos, node)
|
||||
this.view.dispatch(tr)
|
||||
|
||||
if (this.options.immediateUpload) {
|
||||
this.editor.storage.fileUpload.loading.set(true)
|
||||
this.upload(node).then(() => this.editor.storage.fileUpload.loading.set(false))
|
||||
}
|
||||
this.options.onDrop(this.editor, file, pos)
|
||||
return true
|
||||
}
|
||||
|
||||
findNodePosition(node: Node) {
|
||||
let pos = -1
|
||||
this.view.state.doc.descendants((n, p) => {
|
||||
if (n === node) {
|
||||
pos = p
|
||||
return false
|
||||
}
|
||||
})
|
||||
return pos
|
||||
}
|
||||
|
||||
findNodes(uploading: boolean) {
|
||||
const nodes = [] as [Node, number][]
|
||||
this.view.state.doc.descendants((node, pos) => {
|
||||
if (!(node.type.name === "image" || node.type.name === "video")) {
|
||||
return
|
||||
}
|
||||
if (node.attrs.sha256) {
|
||||
return
|
||||
}
|
||||
if ((node.attrs.uploading || false) !== uploading) {
|
||||
return
|
||||
}
|
||||
nodes.push([node, pos])
|
||||
})
|
||||
return nodes
|
||||
}
|
||||
|
||||
updateNodeAttributes(nodeRef: Node, attrs: Record<string, unknown>) {
|
||||
const {tr} = this.editor.view.state
|
||||
|
||||
const pos = this.findNodePosition(nodeRef)
|
||||
if (pos === -1) return
|
||||
|
||||
Object.entries(attrs).forEach(
|
||||
([key, value]) => value !== undefined && tr.setNodeAttribute(pos, key, value),
|
||||
)
|
||||
this.view.dispatch(tr)
|
||||
}
|
||||
|
||||
onUploadDone(nodeRef: Node, response: UploadTask) {
|
||||
this.findNodes(true).forEach(([node, pos]) => {
|
||||
if (node.attrs.src === nodeRef.attrs.src) {
|
||||
this.updateNodeAttributes(node, {
|
||||
uploading: false,
|
||||
src: response.url,
|
||||
sha256: response.sha256,
|
||||
uploadError: response.error,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async upload(node: Node) {
|
||||
const {sign, hash, expiration} = this.options
|
||||
|
||||
const {
|
||||
file,
|
||||
alt,
|
||||
uploadType,
|
||||
uploadUrl: serverUrl,
|
||||
} = node.attrs as ImageAttributes | VideoAttributes
|
||||
|
||||
this.updateNodeAttributes(node, {uploading: true, uploadError: null})
|
||||
|
||||
try {
|
||||
if (uploadType === "nip96") {
|
||||
const res = (await uploadNIP96({file, alt, sign: sign!, serverUrl}))!
|
||||
|
||||
// add the tags as received from nip-96 to the storage
|
||||
this.editor.storage.fileUpload.tags.push(["imeta", ...res.tags!])
|
||||
this.onUploadDone(node, res)
|
||||
} else {
|
||||
const res = await uploadBlossom({file, serverUrl, hash, sign, expiration})
|
||||
this.editor.storage.fileUpload.tags.push([
|
||||
"imeta",
|
||||
`url ${res.url}`,
|
||||
`size ${res.size}`,
|
||||
`m ${res.type}`,
|
||||
`x ${res.sha256}`,
|
||||
])
|
||||
this.onUploadDone(node, res)
|
||||
}
|
||||
} catch (error) {
|
||||
const msg = error as string
|
||||
this.onUploadDone(node, {error: msg})
|
||||
throw new Error(msg as string)
|
||||
}
|
||||
}
|
||||
|
||||
async uploadFiles() {
|
||||
const tasks = this.findNodes(false).map(([node]) => {
|
||||
return this.upload(node)
|
||||
})
|
||||
try {
|
||||
this.editor.storage.fileUpload.loading.set(true)
|
||||
await Promise.all(tasks)
|
||||
this.options.onComplete(this.editor)
|
||||
} finally {
|
||||
this.editor.storage.fileUpload.loading.set(false)
|
||||
}
|
||||
}
|
||||
|
||||
selectFiles() {
|
||||
const input = document.createElement("input")
|
||||
input.type = "file"
|
||||
input.multiple = true
|
||||
input.accept = this.options.allowedMimeTypes.join(",")
|
||||
input.onchange = event => {
|
||||
const files = (event.target as HTMLInputElement).files
|
||||
if (files) {
|
||||
Array.from(files).forEach(file => {
|
||||
if (file) {
|
||||
const pos = this.view.state.selection.from + 1
|
||||
this.addFile(file, pos)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
input.click()
|
||||
}
|
||||
|
||||
handleDrop(event: DragEvent) {
|
||||
event.preventDefault()
|
||||
|
||||
const pos = this.view.posAtCoords({left: event.clientX, top: event.clientY})?.pos
|
||||
|
||||
if (pos === undefined) return false
|
||||
|
||||
const file = event.dataTransfer?.files?.[0]
|
||||
if (file) {
|
||||
this.addFile(file, pos)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface NIP96Options {
|
||||
file: File
|
||||
alt?: string
|
||||
serverUrl: string
|
||||
expiration?: number
|
||||
sign: (event: StampedEvent) => Promise<SignedEvent | undefined>
|
||||
}
|
||||
|
||||
export async function uploadNIP96(options: NIP96Options) {
|
||||
try {
|
||||
const server = await readServerConfig(options.serverUrl)
|
||||
const authorization = await getToken(server.api_url, "POST", options.sign as any, true)
|
||||
const res = await uploadFile(options.file, server.api_url, authorization, {
|
||||
alt: options.alt || "",
|
||||
expiration: options.expiration?.toString() || "",
|
||||
content_type: options.file.type,
|
||||
})
|
||||
if (res.status === "error") {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
const url = res.nip94_event?.tags.find(x => x[0] === "url")?.[1] || ""
|
||||
const sha256 = res.nip94_event?.tags.find(x => x[0] === "x")?.[1] || ""
|
||||
return {
|
||||
url,
|
||||
sha256,
|
||||
tags: res.nip94_event?.tags.flatMap(item => item.join(" ")),
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
}
|
||||
}
|
||||
|
||||
export interface BlossomOptions {
|
||||
file: File
|
||||
serverUrl: string
|
||||
expiration?: number
|
||||
hash?: (file: File) => Promise<string>
|
||||
sign?: (event: StampedEvent) => Promise<SignedEvent | undefined>
|
||||
}
|
||||
|
||||
export interface BlossomResponse {
|
||||
sha256: string
|
||||
size: number
|
||||
type: string
|
||||
uploaded: number
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface BlossomResponseError {
|
||||
message: string
|
||||
}
|
||||
|
||||
export async function uploadBlossom(options: BlossomOptions) {
|
||||
if (!options.hash) {
|
||||
throw new Error("No hash function provided")
|
||||
}
|
||||
if (!options.sign) {
|
||||
throw new Error("No signer provided")
|
||||
}
|
||||
const created_at = now()
|
||||
const hash = await options.hash(options.file)
|
||||
const event = await options.sign({
|
||||
kind: 24242,
|
||||
content: `Upload ${options.file.name}`,
|
||||
created_at,
|
||||
tags: [
|
||||
["t", "upload"],
|
||||
["x", hash],
|
||||
["size", options.file.size.toString()],
|
||||
["expiration", (created_at + (options.expiration || 60000)).toString()],
|
||||
],
|
||||
})
|
||||
const data = JSON.stringify(event)
|
||||
const base64 = btoa(data)
|
||||
const authorization = `Nostr ${base64}`
|
||||
const res = await fetch(options.serverUrl + "/upload", {
|
||||
method: "PUT",
|
||||
body: options.file,
|
||||
headers: {
|
||||
authorization,
|
||||
},
|
||||
})
|
||||
const json = await res.json()
|
||||
if (res.status === 200) {
|
||||
return json as BlossomResponse
|
||||
}
|
||||
throw new Error((json as BlossomResponseError).message)
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let value
|
||||
</script>
|
||||
|
||||
{value}
|
||||
@@ -1,99 +0,0 @@
|
||||
<svelte:options accessors />
|
||||
|
||||
<script lang="ts">
|
||||
import {fly, slide} from "svelte/transition"
|
||||
import {clamp, throttle} from "@welshman/lib"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import {theme} from "@app/theme"
|
||||
|
||||
export let term
|
||||
export let search
|
||||
export let select
|
||||
export let component
|
||||
export let loading = false
|
||||
export let allowCreate = false
|
||||
|
||||
let index = 0
|
||||
let element: Element
|
||||
let items: string[] = []
|
||||
|
||||
$: populateItems(term)
|
||||
|
||||
const populateItems = throttle(300, term => {
|
||||
items = $search.searchValues(term).slice(0, 5)
|
||||
})
|
||||
|
||||
const setIndex = (newIndex: number, block: any) => {
|
||||
index = clamp([0, items.length - 1], newIndex)
|
||||
}
|
||||
|
||||
export const onKeyDown = (e: any) => {
|
||||
if (["Enter", "Tab"].includes(e.code)) {
|
||||
const value = items[index]
|
||||
|
||||
if (value) {
|
||||
select(value)
|
||||
return true
|
||||
} else if (term && allowCreate) {
|
||||
select(term)
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
if (e.code === "Space" && term && allowCreate) {
|
||||
select(term)
|
||||
return true
|
||||
}
|
||||
|
||||
if (e.code === "ArrowUp") {
|
||||
setIndex(index - 1, "start")
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
if (e.code === "ArrowDown") {
|
||||
setIndex(index + 1, "start")
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if term}
|
||||
<div
|
||||
data-theme={$theme}
|
||||
bind:this={element}
|
||||
transition:fly|local={{duration: 200}}
|
||||
class="mt-2 max-h-[350px] overflow-y-auto overflow-x-hidden shadow-xl {$$props.class} bg-alt"
|
||||
style={$$props.style}>
|
||||
{#if term && allowCreate && !items.includes(term)}
|
||||
<button
|
||||
class="white-space-nowrap block w-full min-w-0 cursor-pointer overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-all hover:brightness-150"
|
||||
on:mousedown|preventDefault
|
||||
on:click|preventDefault={() => select(term)}>
|
||||
Use "<svelte:component this={component} value={term} />"
|
||||
</button>
|
||||
{/if}
|
||||
{#each items as value, i (value)}
|
||||
<button
|
||||
class="white-space-nowrap block flex w-full min-w-0 cursor-pointer items-center overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-all hover:brightness-150"
|
||||
on:mousedown|preventDefault
|
||||
on:click|preventDefault={() => select(value)}>
|
||||
{#if index === i}
|
||||
<div transition:slide|local={{axis: "x"}} class="flex items-center pr-2">
|
||||
<Icon icon="alt-arrow-right" />
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:component this={component} {value} />
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if loading}
|
||||
<div transition:slide|local class="flex gap-2 px-4 py-2">
|
||||
<div>
|
||||
<i class="fa fa-circle-notch fa-spin" />
|
||||
</div>
|
||||
Loading more options...
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -1,104 +0,0 @@
|
||||
import type {SvelteComponent, ComponentType} from "svelte"
|
||||
import type {Readable} from "svelte/store"
|
||||
import tippy, {type Instance} from "tippy.js"
|
||||
import type {Editor} from "@tiptap/core"
|
||||
import {PluginKey} from "@tiptap/pm/state"
|
||||
import Suggestion from "@tiptap/suggestion"
|
||||
import type {Search} from "@welshman/app"
|
||||
|
||||
export type SuggestionsOptions = {
|
||||
char: string
|
||||
name: string
|
||||
editor: Editor
|
||||
search: Readable<Search<any, any>>
|
||||
select: (value: any, props: any) => void
|
||||
allowCreate?: boolean
|
||||
suggestionComponent: ComponentType
|
||||
suggestionsComponent: ComponentType
|
||||
}
|
||||
|
||||
export const createSuggestions = (options: SuggestionsOptions) =>
|
||||
Suggestion({
|
||||
char: options.char,
|
||||
editor: options.editor,
|
||||
pluginKey: new PluginKey(`suggest-${options.name}`),
|
||||
command: ({editor, range, props}) => {
|
||||
// increase range.to by one when the next node is of type "text"
|
||||
// and starts with a space character
|
||||
const nodeAfter = editor.view.state.selection.$to.nodeAfter
|
||||
const overrideSpace = nodeAfter?.text?.startsWith(" ")
|
||||
|
||||
if (overrideSpace) {
|
||||
range.to += 1
|
||||
}
|
||||
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.insertContentAt(range, [
|
||||
{type: options.name, attrs: props},
|
||||
{type: "text", text: " "},
|
||||
])
|
||||
.run()
|
||||
|
||||
window.getSelection()?.collapseToEnd()
|
||||
},
|
||||
allow: ({state, range}) => {
|
||||
const $from = state.doc.resolve(range.from)
|
||||
const type = state.schema.nodes[options.name]
|
||||
|
||||
return !!$from.parent.type.contentMatch.matchType(type)
|
||||
},
|
||||
render: () => {
|
||||
let popover: Instance[]
|
||||
let suggestions: SvelteComponent
|
||||
|
||||
const mapProps = (props: any) => ({
|
||||
term: props.query,
|
||||
search: options.search,
|
||||
allowCreate: options.allowCreate,
|
||||
component: options.suggestionComponent,
|
||||
select: (value: string) => options.select(value, props),
|
||||
})
|
||||
|
||||
return {
|
||||
onStart: props => {
|
||||
const target = document.createElement("div")
|
||||
|
||||
popover = tippy("body", {
|
||||
getReferenceClientRect: props.clientRect as any,
|
||||
appendTo: document.querySelector("dialog[open]") || document.body,
|
||||
content: target,
|
||||
showOnCreate: true,
|
||||
interactive: true,
|
||||
trigger: "manual",
|
||||
placement: "bottom-start",
|
||||
})
|
||||
|
||||
suggestions = new options.suggestionsComponent({target, props: mapProps(props)})
|
||||
},
|
||||
onUpdate: props => {
|
||||
suggestions.$set(mapProps(props))
|
||||
|
||||
if (props.clientRect) {
|
||||
popover[0].setProps({
|
||||
getReferenceClientRect: props.clientRect as any,
|
||||
})
|
||||
}
|
||||
},
|
||||
onKeyDown: props => {
|
||||
if (props.event.key === "Escape") {
|
||||
popover[0].hide()
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
return Boolean(suggestions.onKeyDown?.(props.event))
|
||||
},
|
||||
onExit: () => {
|
||||
popover[0].destroy()
|
||||
suggestions.$destroy()
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -1,155 +0,0 @@
|
||||
import {nprofileEncode} from "nostr-tools/nip19"
|
||||
import {SvelteNodeViewRenderer} from "svelte-tiptap"
|
||||
import Placeholder from "@tiptap/extension-placeholder"
|
||||
import Code from "@tiptap/extension-code"
|
||||
import CodeBlock from "@tiptap/extension-code-block"
|
||||
import Document from "@tiptap/extension-document"
|
||||
import Dropcursor from "@tiptap/extension-dropcursor"
|
||||
import Gapcursor from "@tiptap/extension-gapcursor"
|
||||
import History from "@tiptap/extension-history"
|
||||
import Paragraph from "@tiptap/extension-paragraph"
|
||||
import Text from "@tiptap/extension-text"
|
||||
import HardBreakExtension from "@tiptap/extension-hard-break"
|
||||
import {
|
||||
Bolt11Extension,
|
||||
NProfileExtension,
|
||||
NEventExtension,
|
||||
NAddrExtension,
|
||||
ImageExtension,
|
||||
VideoExtension,
|
||||
TagExtension,
|
||||
} from "nostr-editor"
|
||||
import type {StampedEvent} from "@welshman/util"
|
||||
import {toNostrURI} from "@welshman/util"
|
||||
import {signer, profileSearch} from "@welshman/app"
|
||||
import {FileUploadExtension} from "./FileUpload"
|
||||
import {createSuggestions} from "./Suggestions"
|
||||
import EditMention from "./EditMention.svelte"
|
||||
import EditEvent from "./EditEvent.svelte"
|
||||
import EditImage from "./EditImage.svelte"
|
||||
import EditBolt11 from "./EditBolt11.svelte"
|
||||
import EditVideo from "./EditVideo.svelte"
|
||||
import Suggestions from "./Suggestions.svelte"
|
||||
import SuggestionProfile from "./SuggestionProfile.svelte"
|
||||
import {asInline} from "./util"
|
||||
import {getSetting} from "@app/state"
|
||||
|
||||
export {
|
||||
createSuggestions,
|
||||
EditMention,
|
||||
EditEvent,
|
||||
EditImage,
|
||||
EditBolt11,
|
||||
EditVideo,
|
||||
Suggestions,
|
||||
SuggestionProfile,
|
||||
}
|
||||
export * from "./util"
|
||||
|
||||
type UploadType = "nip96" | "blossom"
|
||||
|
||||
type EditorOptions = {
|
||||
submit: () => void
|
||||
getPubkeyHints: (pubkey: string) => string[]
|
||||
submitOnEnter?: boolean
|
||||
placeholder?: string
|
||||
autofocus?: boolean
|
||||
uploadType?: UploadType
|
||||
defaultUploadUrl?: string
|
||||
}
|
||||
|
||||
export const getEditorOptions = ({
|
||||
submit,
|
||||
getPubkeyHints,
|
||||
submitOnEnter,
|
||||
placeholder = "",
|
||||
autofocus = false,
|
||||
uploadType = getSetting("upload_type") as UploadType,
|
||||
defaultUploadUrl = getSetting("upload_type") == "nip96"
|
||||
? (getSetting("nip96_urls") as string[])[0] || "https://nostr.build"
|
||||
: (getSetting("blossom_urls") as string[])[0] || "https://cdn.satellite.earth",
|
||||
}: EditorOptions) => ({
|
||||
autofocus,
|
||||
content: "",
|
||||
extensions: [
|
||||
Code,
|
||||
CodeBlock,
|
||||
Document,
|
||||
Dropcursor,
|
||||
Gapcursor,
|
||||
History,
|
||||
Paragraph,
|
||||
Text,
|
||||
TagExtension,
|
||||
Placeholder.configure({placeholder}),
|
||||
HardBreakExtension.extend({
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
"Shift-Enter": () => this.editor.commands.setHardBreak(),
|
||||
"Mod-Enter": () => {
|
||||
if (this.editor.getText().trim()) {
|
||||
submit()
|
||||
return true
|
||||
}
|
||||
|
||||
return this.editor.commands.setHardBreak()
|
||||
},
|
||||
Enter: () => {
|
||||
if (submitOnEnter && this.editor.getText().trim()) {
|
||||
submit()
|
||||
return true
|
||||
}
|
||||
|
||||
return this.editor.commands.setHardBreak()
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
Bolt11Extension.extend(asInline({addNodeView: () => SvelteNodeViewRenderer(EditBolt11)})),
|
||||
NProfileExtension.extend({
|
||||
addNodeView: () => SvelteNodeViewRenderer(EditMention),
|
||||
renderText: props => toNostrURI(props.node.attrs.nprofile),
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
createSuggestions({
|
||||
char: "@",
|
||||
name: "nprofile",
|
||||
editor: this.editor,
|
||||
search: profileSearch,
|
||||
select: (pubkey: string, props: any) => {
|
||||
const relays = getPubkeyHints(pubkey)
|
||||
const nprofile = nprofileEncode({pubkey, relays})
|
||||
|
||||
return props.command({pubkey, nprofile, relays})
|
||||
},
|
||||
suggestionComponent: SuggestionProfile,
|
||||
suggestionsComponent: Suggestions,
|
||||
}),
|
||||
]
|
||||
},
|
||||
}),
|
||||
NEventExtension.extend(
|
||||
asInline({
|
||||
addNodeView: () => SvelteNodeViewRenderer(EditEvent),
|
||||
renderText: (props: any) => toNostrURI(props.node.attrs.nevent),
|
||||
}),
|
||||
),
|
||||
NAddrExtension.extend(
|
||||
asInline({
|
||||
addNodeView: () => SvelteNodeViewRenderer(EditEvent),
|
||||
renderText: (props: any) => toNostrURI(props.node.attrs.nevent),
|
||||
}),
|
||||
),
|
||||
ImageExtension.extend(
|
||||
asInline({addNodeView: () => SvelteNodeViewRenderer(EditImage)}),
|
||||
).configure({defaultUploadUrl, defaultUploadType: uploadType}),
|
||||
VideoExtension.extend(
|
||||
asInline({addNodeView: () => SvelteNodeViewRenderer(EditVideo)}),
|
||||
).configure({defaultUploadUrl, defaultUploadType: uploadType}),
|
||||
FileUploadExtension.configure({
|
||||
immediateUpload: true,
|
||||
allowedMimeTypes: ["image/*", "video/*"],
|
||||
sign: (event: StampedEvent) => signer.get()!.sign(event),
|
||||
}),
|
||||
],
|
||||
})
|
||||
@@ -1,96 +0,0 @@
|
||||
import type {JSONContent, PasteRuleMatch, InputRuleMatch} from "@tiptap/core"
|
||||
import {Editor} from "@tiptap/core"
|
||||
import {ctx} from "@welshman/lib"
|
||||
import {Address} from "@welshman/util"
|
||||
import {repository} from "@welshman/app"
|
||||
|
||||
export const asInline = (extend: Record<string, any>) => ({
|
||||
inline: true,
|
||||
group: "inline",
|
||||
...extend,
|
||||
})
|
||||
|
||||
export const createInputRuleMatch = <T extends Record<string, unknown>>(
|
||||
match: RegExpMatchArray,
|
||||
data: T,
|
||||
): InputRuleMatch => ({index: match.index!, text: match[0], match, data})
|
||||
|
||||
export const createPasteRuleMatch = <T extends Record<string, unknown>>(
|
||||
match: RegExpMatchArray,
|
||||
data: T,
|
||||
): PasteRuleMatch => ({index: match.index!, text: match[0], match, data})
|
||||
|
||||
export const findNodes = (type: string, json: JSONContent) => {
|
||||
const results: JSONContent[] = []
|
||||
|
||||
for (const node of json.content || []) {
|
||||
if (node.type === type) {
|
||||
results.push(node)
|
||||
}
|
||||
|
||||
for (const result of findNodes(type, node)) {
|
||||
results.push(result)
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
|
||||
export const findMarks = (type: string, json: JSONContent) => {
|
||||
const results: JSONContent[] = []
|
||||
|
||||
for (const node of json.content || []) {
|
||||
for (const mark of node.marks || []) {
|
||||
if (mark.type === type) {
|
||||
results.push(mark)
|
||||
}
|
||||
}
|
||||
|
||||
for (const result of findMarks(type, node)) {
|
||||
results.push(result)
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
|
||||
export const getEditorTags = (editor: Editor) => {
|
||||
const json = editor.getJSON()
|
||||
|
||||
const topicTags = findMarks("tag", json).map(({attrs}: any) => [
|
||||
"t",
|
||||
attrs.tag.replace(/^#/, "").toLowerCase(),
|
||||
])
|
||||
|
||||
const naddrTags = findNodes("naddr", json).map(
|
||||
({attrs: {kind, pubkey, identifier, relays = []}}: any) => {
|
||||
const address = new Address(kind, pubkey, identifier).toString()
|
||||
|
||||
return ["q", address, ctx.app.router.FromRelays(relays).getUrl(), pubkey]
|
||||
},
|
||||
)
|
||||
|
||||
const neventTags = findNodes("nevent", json).map(({attrs: {id, author, relays = []}}: any) => {
|
||||
const event = repository.getEvent(id)
|
||||
const pubkey = author || repository.getEvent(id)?.pubkey || ""
|
||||
const scenario = event ? ctx.app.router.Event(event) : ctx.app.router.FromPubkeys([pubkey])
|
||||
|
||||
return ["q", id, scenario.getUrl(), pubkey]
|
||||
})
|
||||
|
||||
const mentionTags = findNodes("nprofile", json).map(({attrs: {pubkey, relays = []}}: any) => [
|
||||
"p",
|
||||
pubkey,
|
||||
ctx.app.router.FromRelays(relays).getUrl(),
|
||||
"",
|
||||
])
|
||||
|
||||
const imetaTags = findNodes("image", json).map(({attrs: {src, sha256}}: any) => [
|
||||
"imeta",
|
||||
`url ${src}`,
|
||||
`x ${sha256}`,
|
||||
`ox ${sha256}`,
|
||||
])
|
||||
|
||||
return [...topicTags, ...naddrTags, ...neventTags, ...mentionTags, ...imetaTags]
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
getPubkeyTagValues,
|
||||
getListTags,
|
||||
} from "@welshman/util"
|
||||
import {throttled, custom} from "@welshman/store"
|
||||
import {custom} from "@welshman/store"
|
||||
import {
|
||||
relays,
|
||||
handles,
|
||||
@@ -204,8 +204,8 @@
|
||||
setupAnalytics()
|
||||
|
||||
ready = initStorage("flotilla", 4, {
|
||||
relays: {keyPath: "url", store: throttled(3000, relays)},
|
||||
handles: {keyPath: "nip05", store: throttled(3000, handles)},
|
||||
relays: storageAdapters.fromCollectionStore("url", relays, {throttle: 3000}),
|
||||
handles: storageAdapters.fromCollectionStore("nip05", handles, {throttle: 3000}),
|
||||
freshness: storageAdapters.fromObjectStore(freshness, {
|
||||
throttle: 3000,
|
||||
migrate: migrateFreshness,
|
||||
@@ -251,6 +251,7 @@
|
||||
let unsubSpaces: any
|
||||
|
||||
userMembership.subscribe($membership => {
|
||||
console.log("subscribe")
|
||||
unsubSpaces?.()
|
||||
unsubSpaces = listenForNotifications()
|
||||
})
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<script lang="ts">
|
||||
import {nip19} from "nostr-tools"
|
||||
import {onDestroy} from "svelte"
|
||||
import type {Readable} from "svelte/store"
|
||||
import {derived} from "svelte/store"
|
||||
import type {Editor} from "svelte-tiptap"
|
||||
import {page} from "$app/stores"
|
||||
import {sleep, ctx} from "@welshman/lib"
|
||||
import type {TrustedEvent, EventContent} from "@welshman/util"
|
||||
@@ -17,6 +15,7 @@
|
||||
import Spinner from "@lib/components/Spinner.svelte"
|
||||
import PageBar from "@lib/components/PageBar.svelte"
|
||||
import Divider from "@lib/components/Divider.svelte"
|
||||
import type {getEditor} from "@app/editor"
|
||||
import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
|
||||
import ChannelName from "@app/components/ChannelName.svelte"
|
||||
import ChannelMessage from "@app/components/ChannelMessage.svelte"
|
||||
@@ -92,7 +91,7 @@
|
||||
let loading = sleep(5000)
|
||||
let element: HTMLElement
|
||||
let scroller: Scroller
|
||||
let editor: Readable<Editor>
|
||||
let editor: ReturnType<typeof getEditor>
|
||||
|
||||
const elements = derived(events, $events => {
|
||||
const $elements = []
|
||||
|
||||
Reference in New Issue
Block a user