mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-30 00:41:12 +00:00
Render mentions in notes
This commit is contained in:
parent
8e80a32b0d
commit
200a9ae153
@ -1,5 +1,6 @@
|
|||||||
Bugs
|
Bugs
|
||||||
|
|
||||||
|
- [ ] Add setting to disable previews
|
||||||
- [ ] Completely redo notes fetching, it's buggy as heck
|
- [ ] Completely redo notes fetching, it's buggy as heck
|
||||||
- [ ] Add alerts for replies to posts the user liked
|
- [ ] Add alerts for replies to posts the user liked
|
||||||
- [ ] Support bech32 keys/add guide on how to convert
|
- [ ] Support bech32 keys/add guide on how to convert
|
||||||
|
@ -5,7 +5,8 @@
|
|||||||
import {slide} from 'svelte/transition'
|
import {slide} from 'svelte/transition'
|
||||||
import {navigate} from 'svelte-routing'
|
import {navigate} from 'svelte-routing'
|
||||||
import {ellipsize} from 'hurdak/src/core'
|
import {ellipsize} from 'hurdak/src/core'
|
||||||
import {hasParent, toHtml, findLink} from 'src/util/html'
|
import {hasParent, findLink} from 'src/util/html'
|
||||||
|
import {renderNote} from 'src/util/notes'
|
||||||
import Preview from 'src/partials/Preview.svelte'
|
import Preview from 'src/partials/Preview.svelte'
|
||||||
import Anchor from 'src/partials/Anchor.svelte'
|
import Anchor from 'src/partials/Anchor.svelte'
|
||||||
import {dispatch} from "src/state/dispatch"
|
import {dispatch} from "src/state/dispatch"
|
||||||
@ -118,11 +119,7 @@
|
|||||||
</p>
|
</p>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="text-ellipsis overflow-hidden">
|
<p class="text-ellipsis overflow-hidden">
|
||||||
{#if note.content.length > 500 && !showEntire}
|
{@html renderNote(note, {showEntire})}
|
||||||
{ellipsize(note.content, 500)}
|
|
||||||
{:else}
|
|
||||||
{@html toHtml(note.content)}
|
|
||||||
{/if}
|
|
||||||
{#if link}
|
{#if link}
|
||||||
<div class="mt-2" on:click={e => e.stopPropagation()}>
|
<div class="mt-2" on:click={e => e.stopPropagation()}>
|
||||||
<Preview endpoint={`${$settings.dufflepudUrl}/link/preview`} url={link} />
|
<Preview endpoint={`${$settings.dufflepudUrl}/link/preview`} url={link} />
|
||||||
|
@ -4,8 +4,7 @@
|
|||||||
import {navigate} from 'svelte-routing'
|
import {navigate} from 'svelte-routing'
|
||||||
import {prop, uniq, pluck, reverse, uniqBy, sortBy, last} from 'ramda'
|
import {prop, uniq, pluck, reverse, uniqBy, sortBy, last} from 'ramda'
|
||||||
import {formatTimestamp} from 'src/util/misc'
|
import {formatTimestamp} from 'src/util/misc'
|
||||||
import {toHtml} from 'src/util/html'
|
import {createScroller, renderNote} from 'src/util/notes'
|
||||||
import {createScroller} from 'src/util/notes'
|
|
||||||
import UserBadge from 'src/partials/UserBadge.svelte'
|
import UserBadge from 'src/partials/UserBadge.svelte'
|
||||||
import {Listener, Cursor, epoch} from 'src/state/nostr'
|
import {Listener, Cursor, epoch} from 'src/state/nostr'
|
||||||
import {accounts, ensureAccounts} from 'src/state/app'
|
import {accounts, ensureAccounts} from 'src/state/app'
|
||||||
@ -145,7 +144,7 @@
|
|||||||
<p class="text-sm text-light">{formatTimestamp(m.created_at)}</p>
|
<p class="text-sm text-light">{formatTimestamp(m.created_at)}</p>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="ml-6">{@html toHtml(m.content)}</div>
|
<div class="ml-6">{@html renderNote(m, {showEntire: true})}</div>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -82,7 +82,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<Tabs tabs={['notes', 'likes', 'network']} {activeTab} {setActiveTab} />
|
<Tabs tabs={['notes', 'likes', 'network']} {activeTab} {setActiveTab} />
|
||||||
{#if activeTab === 'notes'}
|
{#if activeTab === 'notes'}
|
||||||
<Notes notes={notes} filter={console.log({kinds: [1], authors: [pubkey]}) || {kinds: [1], authors: [pubkey]}} />
|
<Notes notes={notes} filter={{kinds: [1], authors: [pubkey]}} />
|
||||||
{:else if activeTab === 'likes'}
|
{:else if activeTab === 'likes'}
|
||||||
<Likes notes={likes} author={pubkey} />
|
<Likes notes={likes} author={pubkey} />
|
||||||
{:else if activeTab === 'network'}
|
{:else if activeTab === 'network'}
|
||||||
|
@ -72,11 +72,3 @@ export const escapeHtml = html => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const findLink = t => first(t.match(/https?:\/\/([\w.-]+)[^ ]*/))
|
export const findLink = t => first(t.match(/https?:\/\/([\w.-]+)[^ ]*/))
|
||||||
|
|
||||||
export const toHtml = content => {
|
|
||||||
return escapeHtml(content)
|
|
||||||
.replace(/\n/g, '<br />')
|
|
||||||
.replace(/https?:\/\/([\w.-]+)[^ ]*/g, (url, domain) => {
|
|
||||||
return `<a href="${url}" target="_blank noopener" class="underline">${domain}</a>`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
@ -1,12 +1,32 @@
|
|||||||
import {identity, uniq, concat, propEq, uniqBy, prop, groupBy, find, last, pluck} from 'ramda'
|
import {identity, uniq, concat, propEq, uniqBy, prop, groupBy, find, last, pluck} from 'ramda'
|
||||||
import {debounce} from 'throttle-debounce'
|
import {debounce} from 'throttle-debounce'
|
||||||
import {get} from 'svelte/store'
|
import {get} from 'svelte/store'
|
||||||
import {switcherFn, createMap} from 'hurdak/lib/hurdak'
|
import {switcherFn, ellipsize, createMap} from 'hurdak/lib/hurdak'
|
||||||
import {timedelta, sleep} from "src/util/misc"
|
import {timedelta, sleep} from "src/util/misc"
|
||||||
|
import {escapeHtml} from 'src/util/html'
|
||||||
import {user} from 'src/state/user'
|
import {user} from 'src/state/user'
|
||||||
import {epoch, filterMatches, Listener, channels, findReply, findRoot} from 'src/state/nostr'
|
import {epoch, filterMatches, Listener, channels, findReply, findRoot} from 'src/state/nostr'
|
||||||
import {accounts, ensureAccounts} from 'src/state/app'
|
import {accounts, ensureAccounts} from 'src/state/app'
|
||||||
|
|
||||||
|
export const renderNote = (note, {showEntire = false}) => {
|
||||||
|
const shouldEllipsize = note.content.length > 500 && !showEntire
|
||||||
|
const content = shouldEllipsize ? ellipsize(note.content, 500) : note.content
|
||||||
|
const $accounts = get(accounts)
|
||||||
|
|
||||||
|
return escapeHtml(content)
|
||||||
|
.replace(/\n/g, '<br />')
|
||||||
|
.replace(/https?:\/\/([\w.-]+)[^ ]*/g, (url, domain) => {
|
||||||
|
return `<a href="${url}" target="_blank noopener" class="underline">${domain}</a>`
|
||||||
|
})
|
||||||
|
.replace(/#\[(\d+)\]/g, (tag, i) => {
|
||||||
|
const pubkey = note.tags[parseInt(i)][1]
|
||||||
|
const user = $accounts[pubkey]
|
||||||
|
const name = user?.name || pubkey.slice(0, 8)
|
||||||
|
|
||||||
|
return `@<a href="/users/${pubkey}/notes" class="underline">${name}</a>`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export const getMuffleValue = pubkey => {
|
export const getMuffleValue = pubkey => {
|
||||||
const $user = get(user)
|
const $user = get(user)
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user