fix link highlighting with mention present (#1544)

+1

package.json

··· 63 63 "@tiptap/extension-paragraph": "^2.0.0-beta.220", 64 64 "@tiptap/extension-placeholder": "^2.0.0-beta.220", 65 65 "@tiptap/extension-text": "^2.0.0-beta.220", 66 + "@tiptap/html": "^2.1.11", 66 67 "@tiptap/pm": "^2.0.0-beta.220", 67 68 "@tiptap/react": "^2.0.0-beta.220", 68 69 "@tiptap/suggestion": "^2.0.0-beta.220",

+23 -73

src/view/com/composer/text-input/TextInput.web.tsx

··· 17 17 import {isUriImage, blobToDataUri} from 'lib/media/util' 18 18 import {Emoji} from './web/EmojiPicker.web' 19 19 import {LinkDecorator} from './web/LinkDecorator' 20 + import {generateJSON} from '@tiptap/html' 20 21 21 22 export interface TextInputRef { 22 23 focus: () => void ··· 52 53 ref, 53 54 ) { 54 55 const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark') 56 + const extensions = React.useMemo( 57 + () => [ 58 + Document, 59 + LinkDecorator, 60 + Mention.configure({ 61 + HTMLAttributes: { 62 + class: 'mention', 63 + }, 64 + suggestion: createSuggestion({autocompleteView}), 65 + }), 66 + Paragraph, 67 + Placeholder.configure({ 68 + placeholder, 69 + }), 70 + Text, 71 + History, 72 + Hardbreak, 73 + ], 74 + [autocompleteView, placeholder], 75 + ) 55 76 56 77 React.useEffect(() => { 57 78 textInputWebEmitter.addListener('publish', onPressPublish) ··· 68 89 69 90 const editor = useEditor( 70 91 { 71 - extensions: [ 72 - Document, 73 - LinkDecorator, 74 - Mention.configure({ 75 - HTMLAttributes: { 76 - class: 'mention', 77 - }, 78 - suggestion: createSuggestion({autocompleteView}), 79 - }), 80 - Paragraph, 81 - Placeholder.configure({ 82 - placeholder, 83 - }), 84 - Text, 85 - History, 86 - Hardbreak, 87 - ], 92 + extensions, 88 93 editorProps: { 89 94 attributes: { 90 95 class: modeClass, ··· 107 112 } 108 113 }, 109 114 }, 110 - content: textToEditorJson(richtext.text.toString()), 115 + content: generateJSON(richtext.text.toString(), extensions), 111 116 autofocus: 'end', 112 117 editable: true, 113 118 injectCSS: true, ··· 180 185 text += `@${json.attrs?.id || ''}` 181 186 } 182 187 return text 183 - } 184 - 185 - function textToEditorJson(text: string): JSONContent { 186 - if (text === '' || text.length === 0) { 187 - return { 188 - text: '', 189 - } 190 - } 191 - 192 - const lines = text.split('\n') 193 - const docContent: JSONContent[] = [] 194 - 195 - for (const line of lines) { 196 - if (line.trim() === '') { 197 - continue // skip empty lines 198 - } 199 - 200 - const paragraphContent: JSONContent[] = [] 201 - let position = 0 202 - 203 - while (position < line.length) { 204 - if (line[position] === '@') { 205 - // Handle mentions 206 - let endPosition = position + 1 207 - while (endPosition < line.length && /\S/.test(line[endPosition])) { 208 - endPosition++ 209 - } 210 - const mentionId = line.substring(position + 1, endPosition) 211 - paragraphContent.push({ 212 - type: 'mention', 213 - attrs: {id: mentionId}, 214 - }) 215 - position = endPosition 216 - } else { 217 - // Handle regular text 218 - let endPosition = line.indexOf('@', position) 219 - if (endPosition === -1) endPosition = line.length 220 - paragraphContent.push({ 221 - type: 'text', 222 - text: line.substring(position, endPosition), 223 - }) 224 - position = endPosition 225 - } 226 - } 227 - 228 - docContent.push({ 229 - type: 'paragraph', 230 - content: paragraphContent, 231 - }) 232 - } 233 - 234 - return { 235 - type: 'doc', 236 - content: docContent, 237 - } 238 188 } 239 189 240 190 const styles = StyleSheet.create({

+6 -7

src/view/com/composer/text-input/web/LinkDecorator.ts

··· 16 16 17 17 import {Mark} from '@tiptap/core' 18 18 import {Plugin, PluginKey} from '@tiptap/pm/state' 19 - import {findChildren} from '@tiptap/core' 20 19 import {Node as ProsemirrorNode} from '@tiptap/pm/model' 21 20 import {Decoration, DecorationSet} from '@tiptap/pm/view' 22 21 import {isValidDomain} from 'lib/strings/url-helpers' ··· 36 35 function getDecorations(doc: ProsemirrorNode) { 37 36 const decorations: Decoration[] = [] 38 37 39 - findChildren(doc, node => node.type.name === 'paragraph').forEach( 40 - paragraphNode => { 41 - const textContent = paragraphNode.node.textContent 38 + doc.descendants((node, pos) => { 39 + if (node.isText && node.text) { 40 + const textContent = node.textContent 42 41 43 42 // links 44 43 iterateUris(textContent, (from, to) => { 45 44 decorations.push( 46 - Decoration.inline(paragraphNode.pos + from, paragraphNode.pos + to, { 45 + Decoration.inline(pos + from, pos + to, { 47 46 class: 'autolink', 48 47 }), 49 48 ) 50 49 }) 51 - }, 52 - ) 50 + } 51 + }) 53 52 54 53 return DecorationSet.create(doc, decorations) 55 54 }

+14

yarn.lock

··· 4972 4972 resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.1.6.tgz#23f36114ee164e3da2fd326145ac7b7f8bd34c56" 4973 4973 integrity sha512-CqV0N6ngoXZFeJGlQ86FSZJ/0k7+BN3S6aSUcb5DRAKsSEv/Ga1LvSG24sHy+dwjTuj3EtRPJSVZTFcSB17ZSA== 4974 4974 4975 + "@tiptap/html@^2.1.11": 4976 + version "2.1.11" 4977 + resolved "https://registry.yarnpkg.com/@tiptap/html/-/html-2.1.11.tgz#998421b526f200d01c549f37eb8fae2a0d1f0ed6" 4978 + integrity sha512-VKmBb1c3YN9hZfBzkV+QERf3ZWBUHHxjv2/BOr/Dw6mbb6+0iA1nxO9vQYPUb+xAmlm0n8vWwc7YQ8rxBwTKWQ== 4979 + dependencies: 4980 + zeed-dom "^0.9.19" 4981 + 4975 4982 "@tiptap/pm@^2.0.0-beta.220": 4976 4983 version "2.1.6" 4977 4984 resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.1.6.tgz#4c196a7147fedd71316ef3413bb0e98d5c97726d" ··· 19226 19233 version "1.0.0" 19227 19234 resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251" 19228 19235 integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g== 19236 + 19237 + zeed-dom@^0.9.19: 19238 + version "0.9.26" 19239 + resolved "https://registry.yarnpkg.com/zeed-dom/-/zeed-dom-0.9.26.tgz#f0127d1024b34a1233a321bd6d0275b3ba998b30" 19240 + integrity sha512-HWjX8rA3Y/RI32zby3KIN1D+mgskce+She4K7kRyyx62OiVxJ5FnYm8vWq0YVAja3Tf2S1M0XAc6O2lRFcMgcQ== 19241 + dependencies: 19242 + css-what "^6.1.0" 19229 19243 19230 19244 zeego@^1.6.2: 19231 19245 version "1.7.0"

Configure Feed

Configure Feed