Replace web editor link behavior (#1319)

* Replace web editor link behavior (close #1293) (close #1292)

* Update link decorator to match rich text link detector
zio/stable
Paul Frazee 2023-08-28 18:40:45 -07:00 committed by GitHub
parent 2c60a0328d
commit cc2838761b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 127 additions and 31 deletions

View File

@ -113,9 +113,9 @@
.ProseMirror .mention {
color: #0085ff;
}
.ProseMirror a {
.ProseMirror a,
.ProseMirror .autolink {
color: #0085ff;
cursor: pointer;
}
/* OLLIE: TODO -- this is not accessible */
/* Remove focus state on inputs */

View File

@ -56,7 +56,6 @@
"@tiptap/extension-document": "^2.0.0-beta.220",
"@tiptap/extension-hard-break": "^2.0.3",
"@tiptap/extension-history": "^2.0.3",
"@tiptap/extension-link": "^2.0.0-beta.220",
"@tiptap/extension-mention": "^2.0.0-beta.220",
"@tiptap/extension-paragraph": "^2.0.0-beta.220",
"@tiptap/extension-placeholder": "^2.0.0-beta.220",

View File

@ -1,12 +1,11 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {RichText} from '@atproto/api'
import {RichText, AppBskyRichtextFacet} from '@atproto/api'
import EventEmitter from 'eventemitter3'
import {useEditor, EditorContent, JSONContent} from '@tiptap/react'
import {Document} from '@tiptap/extension-document'
import History from '@tiptap/extension-history'
import Hardbreak from '@tiptap/extension-hard-break'
import {Link} from '@tiptap/extension-link'
import {Mention} from '@tiptap/extension-mention'
import {Paragraph} from '@tiptap/extension-paragraph'
import {Placeholder} from '@tiptap/extension-placeholder'
@ -17,6 +16,7 @@ import {createSuggestion} from './web/Autocomplete'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {isUriImage, blobToDataUri} from 'lib/media/util'
import {Emoji} from './web/EmojiPicker.web'
import {LinkDecorator} from './web/LinkDecorator'
export interface TextInputRef {
focus: () => void
@ -74,11 +74,7 @@ export const TextInput = React.forwardRef(
{
extensions: [
Document,
Link.configure({
protocols: ['http', 'https'],
autolink: true,
linkOnPaste: false,
}),
LinkDecorator,
Mention.configure({
HTMLAttributes: {
class: 'mention',
@ -128,9 +124,20 @@ export const TextInput = React.forwardRef(
newRt.detectFacetsWithoutResolution()
setRichText(newRt)
const newSuggestedLinks = new Set(editorJsonToLinks(json))
if (!isEqual(newSuggestedLinks, suggestedLinks)) {
onSuggestedLinksChanged(newSuggestedLinks)
const set: Set<string> = new Set()
if (newRt.facets) {
for (const facet of newRt.facets) {
for (const feature of facet.features) {
if (AppBskyRichtextFacet.isLink(feature)) {
set.add(feature.uri)
}
}
}
}
if (!isEqual(set, suggestedLinks)) {
onSuggestedLinksChanged(set)
}
},
},
@ -237,22 +244,6 @@ function textToEditorJson(text: string): JSONContent {
}
}
function editorJsonToLinks(json: JSONContent): string[] {
let links: string[] = []
if (json.content?.length) {
for (const node of json.content) {
links = links.concat(editorJsonToLinks(node))
}
}
const link = json.marks?.find(m => m.type === 'link')
if (link?.attrs?.href) {
links.push(link.attrs.href)
}
return links
}
const styles = StyleSheet.create({
container: {
flex: 1,

View File

@ -0,0 +1,106 @@
/**
* TipTap is a stateful rich-text editor, which is extremely useful
* when you _want_ it to be stateful formatting such as bold and italics.
*
* However we also use "stateless" behaviors, specifically for URLs
* where the text itself drives the formatting.
*
* This plugin uses a regex to detect URIs and then applies
* link decorations (a <span> with the "autolink") class. That avoids
* adding any stateful formatting to TipTap's document model.
*
* We then run the URI detection again when constructing the
* RichText object from TipTap's output and merge their features into
* the facet-set.
*/
import {Mark} from '@tiptap/core'
import {Plugin, PluginKey} from '@tiptap/pm/state'
import {findChildren} from '@tiptap/core'
import {Node as ProsemirrorNode} from '@tiptap/pm/model'
import {Decoration, DecorationSet} from '@tiptap/pm/view'
import {isValidDomain} from 'lib/strings/url-helpers'
export const LinkDecorator = Mark.create({
name: 'link-decorator',
priority: 1000,
keepOnSplit: false,
inclusive() {
return true
},
addProseMirrorPlugins() {
return [linkDecorator()]
},
})
function getDecorations(doc: ProsemirrorNode) {
const decorations: Decoration[] = []
findChildren(doc, node => node.type.name === 'paragraph').forEach(
paragraphNode => {
const textContent = paragraphNode.node.textContent
// links
iterateUris(textContent, (from, to) => {
decorations.push(
Decoration.inline(paragraphNode.pos + from, paragraphNode.pos + to, {
class: 'autolink',
}),
)
})
},
)
return DecorationSet.create(doc, decorations)
}
function linkDecorator() {
const linkDecoratorPlugin: Plugin = new Plugin({
key: new PluginKey('link-decorator'),
state: {
init: (_, {doc}) => getDecorations(doc),
apply: (transaction, decorationSet) => {
if (transaction.docChanged) {
return getDecorations(transaction.doc)
}
return decorationSet.map(transaction.mapping, transaction.doc)
},
},
props: {
decorations(state) {
return linkDecoratorPlugin.getState(state)
},
},
})
return linkDecoratorPlugin
}
function iterateUris(str: string, cb: (from: number, to: number) => void) {
let match
const re =
/(^|\s|\()((https?:\/\/[\S]+)|((?<domain>[a-z][a-z0-9]*(\.[a-z0-9]+)+)[\S]*))/gim
while ((match = re.exec(str))) {
let uri = match[2]
if (!uri.startsWith('http')) {
const domain = match.groups?.domain
if (!domain || !isValidDomain(domain)) {
continue
}
uri = `https://${uri}`
}
let from = str.indexOf(match[2], match.index)
let to = from + match[2].length + 1
// strip ending puncuation
if (/[.,;!?]$/.test(uri)) {
uri = uri.slice(0, -1)
to--
}
if (/[)]$/.test(uri) && !uri.includes('(')) {
uri = uri.slice(0, -1)
to--
}
cb(from, to)
}
}

View File

@ -117,9 +117,9 @@
.ProseMirror .mention {
color: #0085ff;
}
.ProseMirror a {
.ProseMirror a,
.ProseMirror .autolink {
color: #0085ff;
cursor: pointer;
}
/* OLLIE: TODO -- this is not accessible */
/* Remove focus state on inputs */