diff options
| -rw-r--r-- | bskyweb/templates/base.html | 4 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/view/com/composer/text-input/TextInput.web.tsx | 43 | ||||
| -rw-r--r-- | src/view/com/composer/text-input/web/LinkDecorator.ts | 106 | ||||
| -rw-r--r-- | web/index.html | 4 |
5 files changed, 127 insertions, 31 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 5a671d6ad..8cb0bcd4f 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 b62fad03f..9d995de71 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 dfe1e26a1..395263af8 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<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, 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 000000000..531e8d5a0 --- /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 <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) + } +} diff --git a/web/index.html b/web/index.html index 603e3954d..e8f4eb47e 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 */ |