diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx
index a3d37c45d..1997ba297 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx
@@ -6,6 +6,7 @@ import { sanitizeUrl } from '../../Lexical/Utils/sanitizeUrl'
import { TOGGLE_LINK_COMMAND } from '@lexical/link'
import { useCallback, useState } from 'react'
import { GridSelection, LexicalEditor, NodeSelection, RangeSelection } from 'lexical'
+import { classNames } from '@standardnotes/snjs'
type Props = {
linkUrl: string
@@ -13,9 +14,10 @@ type Props = {
setEditMode: (isEditMode: boolean) => void
editor: LexicalEditor
lastSelection: RangeSelection | GridSelection | NodeSelection | null
+ isAutoLink: boolean
}
-const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection }: Props) => {
+const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection, isAutoLink }: Props) => {
const [editedLinkUrl, setEditedLinkUrl] = useState('')
const handleLinkSubmission = () => {
@@ -80,7 +82,10 @@ const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection }:
) : (
{linkUrl}
-
-
+ {!isAutoLink && (
+ <>
+
+
+ >
+ )}
)
}
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx
index fa7476dc2..71fa94369 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx
@@ -28,7 +28,15 @@ import { getPositionedPopoverStyles } from '@/Components/Popover/GetPositionedPo
import { getAdjustedStylesForNonPortalPopover } from '@/Components/Popover/Utils/getAdjustedStylesForNonPortal'
import LinkEditor from './LinkEditor'
-function FloatingLinkEditor({ editor, anchorElem }: { editor: LexicalEditor; anchorElem: HTMLElement }): JSX.Element {
+function FloatingLinkEditor({
+ editor,
+ anchorElem,
+ isAutoLink,
+}: {
+ editor: LexicalEditor
+ anchorElem: HTMLElement
+ isAutoLink: boolean
+}): JSX.Element {
const editorRef = useRef(null)
const [linkUrl, setLinkUrl] = useState('')
const [isEditMode, setEditMode] = useState(false)
@@ -154,6 +162,7 @@ function FloatingLinkEditor({ editor, anchorElem }: { editor: LexicalEditor; anc
setEditMode={setEditMode}
editor={editor}
lastSelection={lastSelection}
+ isAutoLink={isAutoLink}
/>
)
@@ -162,6 +171,7 @@ function FloatingLinkEditor({ editor, anchorElem }: { editor: LexicalEditor; anc
function useFloatingLinkEditorToolbar(editor: LexicalEditor, anchorElem: HTMLElement): JSX.Element | null {
const [activeEditor, setActiveEditor] = useState(editor)
const [isLink, setIsLink] = useState(false)
+ const [isAutoLink, setIsAutoLink] = useState(false)
const updateToolbar = useCallback(() => {
const selection = $getSelection()
@@ -170,11 +180,17 @@ function useFloatingLinkEditorToolbar(editor: LexicalEditor, anchorElem: HTMLEle
const linkParent = $findMatchingParent(node, $isLinkNode)
const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode)
- if (linkParent != null && autoLinkParent == null) {
+ if (linkParent != null) {
setIsLink(true)
} else {
setIsLink(false)
}
+
+ if (autoLinkParent != null) {
+ setIsAutoLink(true)
+ } else {
+ setIsAutoLink(false)
+ }
}
}, [])
@@ -197,7 +213,12 @@ function useFloatingLinkEditorToolbar(editor: LexicalEditor, anchorElem: HTMLEle
)
}, [editor, updateToolbar])
- return isLink ? createPortal(, anchorElem) : null
+ return isLink
+ ? createPortal(
+ ,
+ anchorElem,
+ )
+ : null
}
export default function FloatingLinkEditorPlugin({
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
index c707d3a8f..18fadaae9 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -7,7 +7,7 @@
*/
import { $isCodeHighlightNode } from '@lexical/code'
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'
+import { $isLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { mergeRegister, $findMatchingParent, $getNearestNodeOfType } from '@lexical/utils'
import {
@@ -92,6 +92,7 @@ function TextFormatFloatingToolbar({
anchorElem,
isText,
isLink,
+ isAutoLink,
isBold,
isItalic,
isUnderline,
@@ -109,6 +110,7 @@ function TextFormatFloatingToolbar({
isCode: boolean
isItalic: boolean
isLink: boolean
+ isAutoLink: boolean
isStrikethrough: boolean
isSubscript: boolean
isSuperscript: boolean
@@ -276,6 +278,7 @@ function TextFormatFloatingToolbar({
linkUrl={linkUrl}
isEditMode={isLinkEditMode}
setEditMode={setIsLinkEditMode}
+ isAutoLink={isAutoLink}
editor={editor}
lastSelection={lastSelection}
/>
@@ -387,6 +390,7 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
const [activeEditor, setActiveEditor] = useState(editor)
const [isText, setIsText] = useState(false)
const [isLink, setIsLink] = useState(false)
+ const [isAutoLink, setIsAutoLink] = useState(false)
const [isBold, setIsBold] = useState(false)
const [isItalic, setIsItalic] = useState(false)
const [isUnderline, setIsUnderline] = useState(false)
@@ -471,6 +475,11 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
} else {
setIsLink(false)
}
+ if ($isAutoLinkNode(parent) || $isAutoLinkNode(node)) {
+ setIsAutoLink(true)
+ } else {
+ setIsAutoLink(false)
+ }
if (!$isCodeHighlightNode(selection.anchor.getNode()) && selection.getTextContent() !== '') {
setIsText($isTextNode(node))
@@ -515,6 +524,7 @@ function useFloatingTextFormatToolbar(editor: LexicalEditor, anchorElem: HTMLEle
anchorElem={anchorElem}
isText={isText}
isLink={isLink}
+ isAutoLink={isAutoLink}
isBold={isBold}
isItalic={isItalic}
isStrikethrough={isStrikethrough}