Skip to content

Add support for configuring link target behavior in Rich Text Editor#10430

Merged
pavinduLakshan merged 8 commits into
wso2:masterfrom
Mahima-Sanketh-Git:fix-25367-rich-text-link-target-support
Jul 16, 2026
Merged

Add support for configuring link target behavior in Rich Text Editor#10430
pavinduLakshan merged 8 commits into
wso2:masterfrom
Mahima-Sanketh-Git:fix-25367-rich-text-link-target-support

Conversation

@Mahima-Sanketh-Git

Copy link
Copy Markdown
Contributor

Purpose

Fixes wso2/product-is#25367

Problem

In the new self-signup flow, links created through the Rich Text Editor are always configured to open in a new browser tab (target="_blank").

As a result, the Sign In link displayed in the Sign Up page is treated as an external link and opens in a new tab, which differs from the behavior in the old portal where navigation happens in the same tab.

Solution

This PR enhances the Rich Text Editor link editor by introducing support for configuring the link target.

Changes include:

  • Added a checkbox option to control link target behavior.
  • Added support for _blank and _self targets.
  • Persist link target configuration in Lexical link nodes.
  • Automatically manage the rel attribute based on the selected target.
  • Added contextual tooltip guidance for the link target option.
  • Preserved existing behavior by keeping "Open in new tab" enabled by default.

Result

Administrators can now decide whether a configured link should:

  • Open in the same tab (_self)
  • Open in a new tab (_blank)

This enables self-signup Sign In links to behave consistently with the legacy portal experience.

Testing

  • Verified creating links with "Open in new tab" enabled.
  • Verified creating links with "Open in new tab" disabled.
  • Verified editing existing links preserves target configuration.
  • Verified rel="noopener noreferrer" is applied only for _blank.
  • Verified navigation behavior in self-signup pages.

@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a per-link _blank/_self target control to the flow builder rich-text editor. The link plugin gains linkTarget state, reads it from selected Lexical nodes, applies it via TOGGLE_SAFE_LINK_COMMAND and a new checkbox UI, the adapter renderer patches anchors with the configured target and rel, and the registration template's Sign in link is switched to _self.

Changes

Rich Text Link Target Control

Layer / File(s) Summary
i18n type extensions and translations
modules/i18n/src/models/namespaces/flows-ns.ts, modules/i18n/src/translations/en-US/portals/flows.ts
flowsNS.core.elements.richText.linkEditor gains four new string fields (linkTargetLabel, linkTargetHint, newTabHint, sameTabHint) and the corresponding en-US translation strings are added.
Link editor: linkTarget state, sync, and UI control
features/admin.flow-builder-core.v1/components/resource-property-panel/rich-text/helper-plugins/link-plugin.tsx
Imports checkbox/tooltip UI components, introduces linkTarget React state defaulting to "_blank", syncs it from getTarget() on the selected Lexical link node, updates TOGGLE_SAFE_LINK_COMMAND to stamp target and conditional rel on the link node, adds linkTarget to the effect dependency array, and renders a "Link Target" checkbox with tooltip in edit mode.
Adapter: linkTarget rendering and sanitization
identity-apps-core/react-ui-core/src/components/adapters/rich-text-field-adapter.js
Refactors HTML preparation to a mutable html variable; when config.linkTarget is set, parses the HTML, patches every anchor's target and rel, re-serializes, updates DOMPurify.sanitize to allow rel, and adds config.linkTarget to the useMemo dependency array.
Registration template: sign-in link updated to _self
features/admin.registration-flow-builder.v1/data/templates.json
Removes inline target="_blank"/rel="noopener noreferrer" from the "Already have an account? Sign in" anchor and adds linkTarget: "_self" to the component config.
🚥 Pre-merge checks | ✅ 6
✅ Passed checks (6 passed)
Check name Status Explanation
Title check ✅ Passed The title directly and concisely summarizes the main change: adding configurable link target behavior to the Rich Text Editor, which is the core objective of the PR.
Description check ✅ Passed The description is comprehensive and well-structured, covering purpose, problem, solution, testing, and results. It includes a reference to the linked issue and provides clear context for the changes made.
Linked Issues check ✅ Passed The PR successfully addresses issue #25367 by implementing configurable link target behavior. The solution enables administrators to control whether links open in the same tab or new tab, directly resolving the behavioral inconsistency identified in the issue.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing link target configuration. The modifications span the link editor UI, Lexical node persistence, HTML sanitization, i18n support, template updates, and changeset documentation—all necessary for the feature implementation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Changeset Required ✅ Passed Changeset file .changeset/goofy-llamas-fix.md is present with all affected packages listed with proper patch version updates.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • 🛠️ create changeset

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
features/admin.flow-builder-core.v1/components/resource-property-panel/rich-text/helper-plugins/link-plugin.tsx (1)

538-545: ⚠️ Potential issue | 🟠 Major

Restore editor selection before dispatching the link command.

The code at lines 538–540 calls lastSelection?.clone?.() but discards the result without applying it. Since $setSelection is not imported, the cloned selection is never restored to the editor before TOGGLE_SAFE_LINK_COMMAND executes, causing the command to run with an incorrect or missing selection context.

Proposed fix
+import { $setSelection } from "lexical";
@@
-                                    editor.update(()=>{
-                                        lastSelection?.clone?.();
-                                    });
+                                    editor.update(() => {
+                                        if (lastSelection !== null) {
+                                            $setSelection(lastSelection.clone());
+                                        }
+                                    });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@features/admin.flow-builder-core.v1/components/resource-property-panel/rich-text/helper-plugins/link-plugin.tsx`
around lines 538 - 545, The cloned selection from lastSelection is not being
applied back to the editor before the TOGGLE_SAFE_LINK_COMMAND is dispatched.
Import the $setSelection function from the lexical library and use it to restore
the cloned selection to the editor by calling
$setSelection(lastSelection?.clone?.()) within the editor.update() block,
ensuring the selection context is correct when TOGGLE_SAFE_LINK_COMMAND
executes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@features/admin.flow-builder-core.v1/components/resource-property-panel/rich-text/helper-plugins/link-plugin.tsx`:
- Around line 495-505: Replace the `any` type annotations on both currentUrl and
linkNode variables to use proper TypeScript types instead. For the currentUrl
variable assigned from getCurrentUrl(), determine the actual return type of that
function and use it. For the linkNode variable in the ternary expression with
$isLinkNode(node), use the proper LinkNode type or the correct return type from
that function. Remove all `any` type annotations and replace them with explicit
proper types to maintain type-safety throughout the checkbox update logic path.

---

Outside diff comments:
In
`@features/admin.flow-builder-core.v1/components/resource-property-panel/rich-text/helper-plugins/link-plugin.tsx`:
- Around line 538-545: The cloned selection from lastSelection is not being
applied back to the editor before the TOGGLE_SAFE_LINK_COMMAND is dispatched.
Import the $setSelection function from the lexical library and use it to restore
the cloned selection to the editor by calling
$setSelection(lastSelection?.clone?.()) within the editor.update() block,
ensuring the selection context is correct when TOGGLE_SAFE_LINK_COMMAND
executes.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: c6fb15f0-4256-42ef-a20b-d60c58148f64

📥 Commits

Reviewing files that changed from the base of the PR and between 35a8412 and 21e300d.

📒 Files selected for processing (6)
  • apps/console/.env.local
  • features/admin.flow-builder-core.v1/components/resource-property-panel/rich-text/helper-plugins/link-plugin.tsx
  • features/admin.registration-flow-builder.v1/data/templates.json
  • identity-apps-core/react-ui-core/src/components/adapters/rich-text-field-adapter.js
  • modules/i18n/src/models/namespaces/flows-ns.ts
  • modules/i18n/src/translations/en-US/portals/flows.ts

Comment thread apps/console/.env.local Outdated
@CLAassistant

CLAassistant commented Jun 19, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

}
}
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

@pavinduLakshan pavinduLakshan left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add changeset as well for the changed packages.

PS: the typecheck job is failing. Let's fix that too.

@codecov

codecov Bot commented Jun 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.71%. Comparing base (4477091) to head (30fbb42).
⚠️ Report is 117 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #10430      +/-   ##
==========================================
+ Coverage   72.62%   72.71%   +0.08%     
==========================================
  Files         469      469              
  Lines       70633    70866     +233     
  Branches      240      240              
==========================================
+ Hits        51300    51533     +233     
  Misses      19222    19222              
  Partials      111      111              
Files with missing lines Coverage Δ
...dules/i18n/src/translations/en-US/portals/flows.ts 100.00% <100.00%> (ø)

... and 4 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Mahima-Sanketh-Git
Mahima-Sanketh-Git force-pushed the fix-25367-rich-text-link-target-support branch from d0280c3 to cb4abb1 Compare June 23, 2026 06:47
Comment thread .changeset/goofy-llamas-fix.md Outdated
@pavinduLakshan
pavinduLakshan merged commit 9ef6717 into wso2:master Jul 16, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

All links added in rich text component in flows opens in new tab in the browser

3 participants