Auto-applied inline tools

[fynnfeldpausch]

Is there a way to auto-convert user input at the time of writing without using the inline toolbar but rather by listening to the user input. Let me give you a few examples to make things clearer:

• auto-link a URL at the time it is entered
• support user mentions triggered by starting input with a @ character
• support hashtag autocompletion triggered by starting a word with a # character
• support emoji selection triggered by starting a word with a : character

I do not want to add an inline tool to provide a button to trigger those use cases. I want to automatically apply / trigger them while the user is creating input.

Any help is appreciated.

[chadsteele]

I gave up trying to cause this in real-time, but instead applied it after blur or save() ... it's too hard to manage the cursor when injecting a bunch of html, like <a>, etc. Here's my code. In my case, I want to convert #hashtags and @mentions to bsky.social links.
Also, the textonly variable and creating a list of replacements instead of processing regex immediately is essential for avoiding html you've already processed.

Hope it helps.

document.querySelectorAll(".ce-paragraph").forEach((el) => {
				const textOnly = Array.from(el.childNodes)
					.filter((node) => node.nodeType === Node.TEXT_NODE)
					.map((node) => node.textContent)
					.join(" ")

				const urls = textOnly.match(
					/https?\:\/\/[\w\-._~!$&()*+,;=:@\/?]+/g
				)
				const hashtags = textOnly.match(/#(\w+)/g)
				const mentions = textOnly.match(/@([\w.]+)/g)
				let html = el.innerHTML

				log({
					processHashTags: el.textContent,
					textOnly,
					el,
					html,
					urls,
					hashtags,
					mentions,
				})

				urls?.forEach((url) => {
					html = html.replace(
						url,
						`<a target="_blank" href="${url}">${url}</a>`
					)
				})
				hashtags?.forEach((hashtag) => {
					const href = `https://bsky.app/hashtag/${hashtag.slice(1)}`
					html = html.replace(
						hashtag,
						`<a class="hashtag" target="_blank" href="${href}">${hashtag}</a>`
					)
				})
				mentions?.forEach((mention) => {
					const href = `https://bsky.app/profile/${mention.slice(1)}`
					html = html.replace(
						mention,
						`<a class="hashtag" target="_blank" href="${href}">${mention}</a>`
					)
				})
				if (html !== el.innerHTML) {
					log({processHashTags: el.innerHTML, html})
					el.innerHTML = html
				}
			})