diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 5a671d6ad3..8cb0bcd4f1 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -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 */
diff --git a/package.json b/package.json
index b62fad03f6..9d995de712 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
index dfe1e26a18..395263af87 100644
--- a/src/view/com/composer/text-input/TextInput.web.tsx
+++ b/src/view/com/composer/text-input/TextInput.web.tsx
@@ -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 = 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,
diff --git a/src/view/com/composer/text-input/web/LinkDecorator.ts b/src/view/com/composer/text-input/web/LinkDecorator.ts
new file mode 100644
index 0000000000..531e8d5a06
--- /dev/null
+++ b/src/view/com/composer/text-input/web/LinkDecorator.ts
@@ -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 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]+)|((?[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)
+ }
+}
diff --git a/web/index.html b/web/index.html
index 603e3954d4..e8f4eb47eb 100644
--- a/web/index.html
+++ b/web/index.html
@@ -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 */