Skip to content

Fixes for Internal Linking/AtLinkPlugin and Firefox #1492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
francesmcmullin wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fixes for Internal Linking/AtLinkPlugin and Firefox #1492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a8e2e7
Cherrypick tests for Firefox internal linking from e8509ca
francesmcmullin Mar 28, 2025
72ba340
Fix firefox @ event before editor update
francesmcmullin Mar 28, 2025
0d583a5
Fix infinite loop in AtLinkPlugin
francesmcmullin Mar 28, 2025
23047d3
Fix first char in AtLinkNode shifting cursor back in Firefox
francesmcmullin Mar 28, 2025
8bccd30
Fixed firefox paste testing
francesmcmullin Mar 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
228 changes: 130 additions & 98 deletions packages/koenig-lexical/src/plugins/AtLinkPlugin.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,90 @@ function noResultOptions() {
}];
}

const handleAtDetected = (editor) => {
let replaceAt = false;

editor.getEditorState().read(() => {
// get the current selection
const selection = $getSelection();
if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
return;
}

const anchor = selection.anchor;
if (anchor.type !== 'text') {
return;
}

const anchorNode = anchor.getNode();
if (!anchorNode.isSimpleText()) {
return;
}

let anchorOffset = anchor.offset;
let textBeforeAnchor = anchorNode.getTextContent().slice(0, anchorOffset);
let textAfterAnchor = anchorNode.getTextContent().slice(anchorOffset);

// adjust before/after text if we're immediately preceded/followed by a text node
// because that content needs to be accounted for in our regex match
const prevSibling = anchorNode.getPreviousSibling();
const nextSibling = anchorNode.getNextSibling();

if (anchorOffset === 0 && $isTextNode(prevSibling)) {
textBeforeAnchor = prevSibling.getTextContent();
}

if (anchorOffset === anchorNode.getTextContent().length && $isTextNode(nextSibling)) {
textAfterAnchor = nextSibling.getTextContent();
}

const textBeforeRegExp = /(^|\s)@$/;
const textAfterRegExp = /^($|\s|\.)/;

if (
textBeforeRegExp.test(textBeforeAnchor)
&& textAfterRegExp.test(textAfterAnchor)
) {
replaceAt = true;
}
});

if (replaceAt) {
editor.update(() => {
// selection should now be where the '@' character was
const selection = $getSelection();

// store current node's format so it can be re-applied to the eventual link node
const linkFormat = selection.anchor.getNode().getFormat();

// delete the '@' character
selection.deleteCharacter(true);

// prep the at-link node
const atLinkNode = $createAtLinkNode();
atLinkNode.setLinkFormat(linkFormat);
const zwnjNode = $createZWNJNode();
atLinkNode.append(zwnjNode);
const atLinkSearchNode = $createAtLinkSearchNode('');
atLinkNode.append(atLinkSearchNode);

// insert it
selection.insertNodes([atLinkNode]);

// ensure we still have a cursor and it's inside the search node
atLinkNode.select(1, 1);

const searchNode = atLinkNode.getChildAtIndex(1);
const rangeSelection = $getSelection();
if ($isRangeSelection(rangeSelection)) {
rangeSelection.anchor.set(searchNode.getKey(), 0, 'element');
rangeSelection.focus.set(searchNode.getKey(), 0, 'element');
}
});
return true;
}
};

// Manages at-link search nodes and display of the search results panel when appropriate
export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}) => {
const [editor] = useLexicalComposerContext();
Expand All @@ -80,98 +164,20 @@ export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}) => {
}

if (event.inputType === 'insertText' && event.data === '@') {
let replaceAt = false;

editor.getEditorState().read(() => {
// get the current selection
const selection = $getSelection();
if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
return;
}

const anchor = selection.anchor;
if (anchor.type !== 'text') {
return;
}

const anchorNode = anchor.getNode();
if (!anchorNode.isSimpleText()) {
return;
}

let anchorOffset = anchor.offset;
let textBeforeAnchor = anchorNode.getTextContent().slice(0, anchorOffset);
let textAfterAnchor = anchorNode.getTextContent().slice(anchorOffset);

// adjust before/after text if we're immediately preceded/followed by a text node
// because that content needs to be accounted for in our regex match
const prevSibling = anchorNode.getPreviousSibling();
const nextSibling = anchorNode.getNextSibling();

if (anchorOffset === 0 && $isTextNode(prevSibling)) {
textBeforeAnchor = prevSibling.getTextContent();
}

if (anchorOffset === anchorNode.getTextContent().length && $isTextNode(nextSibling)) {
textAfterAnchor = nextSibling.getTextContent();
}

const textBeforeRegExp = /(^|\s)@$/;
const textAfterRegExp = /^($|\s|\.)/;

if (
textBeforeRegExp.test(textBeforeAnchor)
&& textAfterRegExp.test(textAfterAnchor)
) {
replaceAt = true;
}
});

if (replaceAt) {
editor.update(() => {
// selection should now be where the '@' character was
const selection = $getSelection();

// store current node's format so it can be re-applied to the eventual link node
const linkFormat = selection.anchor.getNode().getFormat();

// delete the '@' character
selection.deleteCharacter(true);

// prep the at-link node
const atLinkNode = $createAtLinkNode();
atLinkNode.setLinkFormat(linkFormat);
const zwnjNode = $createZWNJNode();
atLinkNode.append(zwnjNode);
const atLinkSearchNode = $createAtLinkSearchNode('');
atLinkNode.append(atLinkSearchNode);

// insert it
selection.insertNodes([atLinkNode]);

// ensure we still have a cursor and it's inside the search node
atLinkNode.select(1, 1);

const searchNode = atLinkNode.getChildAtIndex(1);
const rangeSelection = $getSelection();
if ($isRangeSelection(rangeSelection)) {
rangeSelection.anchor.set(searchNode.getKey(), 0, 'element');
rangeSelection.focus.set(searchNode.getKey(), 0, 'element');
}
});
}
handleAtDetected(editor);
}
};

// weirdly the 'input' event doesn't fire for the first character typed in a paragraph
const handleAtBeforeInput = (event) => {
if (event.inputType === 'insertText' && event.data === '@') {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection) && selection.isCollapsed() && !selection.anchor.getNode().getPreviousSibling()) {
handleAtInsert(event);
}
});
const atHandled = handleAtDetected(editor);

if (!atHandled) { // Firefox gives us the beforeinput event before the editor state is updated - catch the next update instead
const deregister = editor.registerUpdateListener(() => {
handleAtDetected(editor);
deregister();
});
}
}
};

Expand All @@ -189,12 +195,20 @@ export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}) => {
// - update plugin state with search query based on at-link-search node text content
// - remove at-link nodes when they don't have focus (i.e. using arrow keys to move out of them)
React.useEffect(() => {
return editor.registerUpdateListener(() => {
return editor.registerUpdateListener(({prevEditorState}) => {
// do nothing if we're in the middle of composing text
if (editor.isComposing()) {
return;
}

let prevSelectionType;
let prevSelectionOffset;
prevEditorState.read(() => {
const selection = $getSelection();
prevSelectionType = selection?.anchor?.getNode().getType();
prevSelectionOffset = selection?.anchor?.offset;
});

editor.update(() => {
const atLinkNodes = $nodesOfType(AtLinkNode);
const selection = $getSelection();
Expand Down Expand Up @@ -243,8 +257,10 @@ export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}) => {
selectedAtLinkNode.select(1, 1);
const rangeSelection = $getSelection();
if ($isRangeSelection(rangeSelection)) {
rangeSelection.anchor.set(searchNode.getKey(), 0, 'element');
rangeSelection.focus.set(searchNode.getKey(), 0, 'element');
if (!(prevSelectionType === 'at-link-search' && prevSelectionOffset === 0)) { // Avoid infinite loop
rangeSelection.anchor.set(searchNode.getKey(), 0);
rangeSelection.focus.set(searchNode.getKey(), 0);
}
}
}

Expand Down Expand Up @@ -316,6 +332,11 @@ export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}) => {
return true;
}
}

if ($isAtLinkNode(anchorNode) && anchorNode.getTextContent() === '') {
$removeAtLink(anchorNode, {focus: true});
return true;
}
}
return false;
},
Expand Down Expand Up @@ -393,15 +414,26 @@ export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}) => {
});

// consolidate multiple search nodes from previous step into single node
const searchNode = atLinkNode.getChildAtIndex(1);
const currentText = searchNode.getTextContent();
let consolidatedText = currentText;
atLinkNode.getChildren().forEach((child, index) => {
if (index > 1) {
consolidatedText += child.getTextContent();
child.remove();
}
// NB: Leave the first non-empty search node in-tact if possible

let searchNodes = atLinkNode.getChildren().slice(1);
const currentText = searchNodes.map(node => node.getTextContent()).join();
if (currentText !== '') {
searchNodes.forEach((node) => {
if (!node.getTextContent()) {
node.remove();
}
});
searchNodes = atLinkNode.getChildren().slice(1);
}

const [searchNode, ...restNodes] = searchNodes;
let consolidatedText = searchNode.getTextContent();
restNodes.forEach((node) => {
consolidatedText += node.getTextContent();
node.remove();
});

if (consolidatedText !== currentText) {
searchNode.setTextContent(consolidatedText);
}
Expand Down
Loading