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}