coracle/flotilla
1
3
Fork 9
Code Issues 33 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

Work on compose

Browse Source
This commit is contained in:
Jon Staab
2024-08-22 16:16:35 -07:00
parent 91fbc260eb
commit dc4dcb1ea2
12 changed files with 159 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/GroupCompose.svelte
+77 -54
View File
@@ -2,10 +2,15 @@
import {onMount} from 'svelte'
import type {Readable} from 'svelte/store'
import {createEditor, type Editor, EditorContent, SvelteNodeViewRenderer} from 'svelte-tiptap'
import {Extension} from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import HardBreakExtension from '@tiptap/extension-hard-break'
import {NostrExtension} from 'nostr-editor'
import type {StampedEvent} from '@welshman/util'
import {LinkExtension, Mention, Topic} from '@lib/tiptap'
import {createEvent, CHAT_MESSAGE} from '@welshman/util'
import {LinkExtension, createSuggestions, findNodes} from '@lib/tiptap'
import Icon from '@lib/components/Icon.svelte'
import Button from '@lib/components/Button.svelte'
import GroupComposeMention from '@app/components/GroupComposeMention.svelte'
import GroupComposeEvent from '@app/components/GroupComposeEvent.svelte'
import GroupComposeImage from '@app/components/GroupComposeImage.svelte'
@@ -19,12 +24,31 @@
import {searchProfiles, searchTopics, displayProfileByPubkey} from '@app/state'
let editor: Readable<Editor>
let uploading = false
const asInline = (extend: Record<string, any>) =>
({inline: true, group: 'inline', ...extend})
const addFile = () => $editor.chain().selectFiles().run()
const uploadFiles = () => $editor.chain().uploadFiles().run()
const sendMessage = () => {
console.log($editor.getJSON())
console.log(findNodes($editor.getJSON(), 'mention'))
console.log(findNodes($editor.getJSON(), 'nprofile'))
console.log(findNodes($editor.getJSON(), 'nevent'))
console.log(findNodes($editor.getJSON(), 'naddr'))
console.log(findNodes($editor.getJSON(), 'image'))
createEvent(CHAT_MESSAGE, {
content: '',
tags: [],
})
}
onMount(() => {
editor = createEditor({
autofocus: true,
extensions: [
StarterKit.configure({
blockquote: false,
@@ -36,6 +60,19 @@
listItem: false,
orderedList: false,
strike: false,
hardBreak: false,
}),
HardBreakExtension.extend({
addKeyboardShortcuts() {
return {
'Shift-Enter': () => this.editor.commands.setHardBreak(),
'Mod-Enter': () => {
uploadFiles()
return true
},
}
}
}),
LinkExtension.extend({
addNodeView: () => SvelteNodeViewRenderer(GroupComposeLink),
@@ -56,70 +93,56 @@
image: {defaultUploadUrl: 'https://nostr.build', defaultUploadType: 'nip96'},
fileUpload: {
immediateUpload: false,
sign: async (event: StampedEvent) => $signer!.sign(event),
onDrop() {
// setPending(true)
sign: (event: StampedEvent) => {
uploading = true
return $signer!.sign(event)
},
onComplete(currentEditor: any) {
console.log('Upload Completed', currentEditor.getText())
// setPending(false)
onComplete: () => {
uploading = false
sendMessage()
},
},
}),
Mention.configure(
(() => {
let suggestions: GroupComposeSuggestions
const mapProps = (props: any) => ({
term: props.query,
select: (id: string) => props.command({id}),
search: searchProfiles,
component: GroupComposeProfileSuggestion,
})
return {
getLabel: displayProfileByPubkey,
tippyOptions: {arrow: false, theme: "transparent"},
onStart: ({target, props}) => {
suggestions = new GroupComposeSuggestions({target, props: mapProps(props)})
},
onUpdate: ({props}) => suggestions.$set(mapProps(props)),
onKeyDown: ({event}) => suggestions.onKeyDown(event),
onExit: () => suggestions.$destroy(),
}
})(),
),
Topic.configure(
(() => {
let suggestions: GroupComposeSuggestions
const mapProps = (props: any) => ({
term: props.query,
select: (id: string) => props.command({id}),
search: searchTopics,
component: GroupComposeTopicSuggestion,
})
return {
tippyOptions: {arrow: false, theme: "transparent"},
onStart: ({target, props}) => {
suggestions = new GroupComposeSuggestions({target, props: mapProps(props)})
},
onUpdate: ({props}) => suggestions.$set(mapProps(props)),
onKeyDown: ({event}) => suggestions.onKeyDown(event),
onExit: () => suggestions.$destroy(),
}
})(),
),
createSuggestions('mention').configure({
char: '@',
search: searchProfiles,
select: (pubkey: string, props: any) => props.command({pubkey}),
suggestionComponent: GroupComposeProfileSuggestion,
suggestionsComponent: GroupComposeSuggestions,
}).extend({
addAttributes: () => ({pubkey: {default: null}}),
addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
}),
createSuggestions('topic').configure({
char: '#',
search: searchTopics,
select: (name: string, props: any) => props.command({name}),
suggestionComponent: GroupComposeTopicSuggestion,
suggestionsComponent: GroupComposeSuggestions,
}).extend({
addAttributes: () => ({name: {default: null}}),
addNodeView: () => SvelteNodeViewRenderer(GroupComposeMention),
}),
],
content: '',
onUpdate: () => {
// console.log('update', $editor.getJSON(), $editor.getText())
},
})
console.log($editor)
})
</script>
<div class="relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl">
<EditorContent editor={$editor} />
<div class="flex gap-2 relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl bg-neutral">
<Button on:click={addFile} class="bg-base-300 rounded-box w-10 h-10 center">
{#if uploading}
<span class="loading loading-spinner loading-xs"></span>
{:else}
<Icon icon="gallery-send" />
{/if}
</Button>
<div class="flex-grow">
<EditorContent editor={$editor} />
</div>
</div>
src/app/components/GroupComposeImage.svelte
+2 -1
View File
@@ -5,9 +5,10 @@
import Icon from '@lib/components/Icon.svelte'
export let node: NodeViewProps['node']
export let selected: NodeViewProps['selected']
</script>
<NodeViewWrapper class="inline link-content">
<NodeViewWrapper class={cx("inline link-content", {'link-content-selected': selected})}>
<Icon icon="paperclip" size={3} class="inline-block translate-y-px" />
{node.attrs.file.name}
</NodeViewWrapper>
src/app/components/GroupComposeMention.svelte
+1 -1
View File
@@ -12,5 +12,5 @@
</script>
<NodeViewWrapper class="inline">
<Link external href="https://njump.me/{node.attrs.nprofile}">@{displayProfile($profile)}</Link>
<span class="text-primary">@</span><Link external href="https://njump.me/{node.attrs.nprofile}">{displayProfile($profile)}</Link>
</NodeViewWrapper>
src/app/components/GroupComposeProfileSuggestion.svelte
+5 -3
View File
@@ -1,7 +1,9 @@
<script lang="ts">
import {deriveProfileDisplay} from '@app/state'
export let value
const display = deriveProfileDisplay(value)
</script>
<div>
@{value}
</div>
@{$display}
src/app/components/GroupComposeSuggestions.svelte
+6 -6
View File
@@ -4,6 +4,7 @@
import {throttle} from "throttle-debounce"
import {slide} from "svelte/transition"
import {clamp} from "@welshman/lib"
import {theme} from '@app/theme'
export let term
export let search
@@ -53,16 +54,15 @@
{#if items.length > 0}
<div
data-theme={$theme}
bind:this={element}
transition:slide|local={{duration: 100}}
class="mt-2 flex max-h-[350px] flex-col overflow-y-auto overflow-x-hidden border border-solid border-neutral-600">
class="mt-2 flex max-h-[350px] flex-col overflow-y-auto overflow-x-hidden shadow-xl">
{#each items as value, i (value)}
<button
class="cursor-pointer border-l-2 border-solid px-4 py-2 text-left text-neutral-100 hover:border-accent hover:bg-tinted-700"
class:bg-neutral-800={index !== i}
class:bg-tinted-700={index === i}
class:border-transparent={index !== i}
class:border-accent={index === i}
class="cursor-pointer px-4 py-2 text-left hover:bg-primary hover:text-primary-content transition-colors white-space-nowrap overflow-hidden text-ellipsis min-w-0"
class:bg-primary={index === i}
class:text-primary-content={index === i}
on:mousedown|preventDefault
on:click|preventDefault={() => select(value)}>
<svelte:component this={component} {value} />