fix(ui): remove @toast-ui/react-editor dependency and migrate to BlockEditor

[harsh-vador]

Fixes 27314

Describe your changes:

Summary

• Replaces all usages of the deprecated RichTextEditorPreviewer (Toast-UI based) with RichTextEditorPreviewerV1 (BlockEditor/TipTap) in ServiceDocPanel, SSODocPanel, and ArticleViewer
• Removes @toast-ui/react-editor from package.json along with all supporting files (CustomHtmlRederer/, RichTextEditorPreviewer.tsx, its test, and its .less)
• Adds a processServiceDocMarkdown preprocessor in ServiceDocPanel to convert the custom $$section/$(id="...") syntax (used in service .md doc files) into <section data-id="..."> HTML, preserving the scroll-to-field highlighting feature
• Replaces toast-ui-specific CSS (.toastui-editor-contents) with self-contained typography styles in service-doc-panel.less

Screen.Recording.2026-04-20.at.3.35.37.PM.mov

Screen.Recording.2026-04-20.at.3.36.04.PM.mov

Type of change:

• Bug fix
• Improvement
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes <issue-number>: <short explanation>
• I have commented on my code, particularly in hard-to-understand areas.
• For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

---

Summary by Gitar

• Test maintenance:
  • Updated SearchIndexApplication.spec.ts to use getByTestId('service-requirements') instead of the legacy #search-indexing-application selector.

_{This will update automatically on new commits.}

[github-actions]

🔴 Playwright Results — 1 failure(s), 22 flaky

✅ 3664 passed · ❌ 1 failed · 🟡 22 flaky · ⏭️ 89 skipped

Shard	Passed	Failed	Flaky	Skipped
🔴 Shard 1	479	1	1	4
🟡 Shard 2	647	0	6	7
🟡 Shard 3	656	0	3	1
🟡 Shard 4	631	0	3	27
🟡 Shard 5	610	0	1	42
🟡 Shard 6	641	0	8	8

Genuine Failures (failed on all attempts)

❌ Pages/SearchIndexApplication.spec.ts › Search Index Application (shard 1)

Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoContainText�[2m(�[22m�[32mexpected�[39m�[2m)�[22m failed

Locator: locator('#search-indexing-application')
Expected substring: �[32m"Search Indexing Application"�[39m
Timeout: 15000ms
Error: element(s) not found

Call log:
�[2m  - Expect "toContainText" with timeout 15000ms�[22m
�[2m  - waiting for locator('#search-indexing-application')�[22m

🟡 22 flaky test(s) (passed on retry)

• Pages/AuditLogs.spec.ts › should apply both User and EntityType filters simultaneously (shard 1, 2 retries)
• Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
• Features/DataQuality/TestCaseImportExportE2eFlow.spec.ts › Admin: Complete export-import-validate flow (shard 2, 1 retry)
• Features/DataQuality/TestCaseImportExportE2eFlow.spec.ts › EditAll User: Complete export-import-validate flow (shard 2, 1 retry)
• Features/DataQuality/TestCaseResultPermissions.spec.ts › User with TEST_CASE.EDIT_ALL can see edit action on test case (shard 2, 1 retry)
• Features/DataQuality/TestCaseResultPermissions.spec.ts › User with only VIEW cannot PATCH results (shard 2, 1 retry)
• Features/Glossary/GlossaryWorkflow.spec.ts › should inherit reviewers from glossary when term is created (shard 2, 1 retry)
• Features/RestoreEntityInheritedFields.spec.ts › Validate restore with Inherited domain and data products assigned (shard 3, 1 retry)
• Features/RestoreEntityInheritedFields.spec.ts › Validate restore with Inherited domain and data products assigned (shard 3, 1 retry)
• Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
• Pages/Customproperties-part2.spec.ts › entityReferenceList shows item count, scrollable list, no expand toggle (shard 4, 1 retry)
• Pages/DataContracts.spec.ts › Create Data Contract and validate for Database (shard 4, 1 retry)
• Pages/DataContractsSemanticRules.spec.ts › Validate Owner Rule Is_Set (shard 4, 1 retry)
• Pages/Glossary.spec.ts › Add and Remove Assets (shard 5, 1 retry)
• Pages/GlossaryImportExport.spec.ts › Check for Circular Reference in Glossary Import (shard 6, 1 retry)
• Pages/Lineage/DataAssetLineage.spec.ts › verify create lineage for entity - Search Index (shard 6, 1 retry)
• Pages/Lineage/DataAssetLineage.spec.ts › verify create lineage for entity - Data Model (shard 6, 1 retry)
• Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
• Pages/Lineage/LineageRightPanel.spec.ts › Verify custom properties tab IS visible for supported type: searchIndex (shard 6, 1 retry)
• Pages/Tag.spec.ts › Verify Owner Add Delete (shard 6, 1 retry)
• Pages/Users.spec.ts › Update token expiration for Data Consumer (shard 6, 1 retry)
• VersionPages/EntityVersionPages.spec.ts › Directory (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	63.3% (59160/93452)	43.59% (31375/71975)	46.45% (9414/20265)

[gitar-bot]

Code Review ✅ Approved 1 resolved / 1 findings

Migration to BlockEditor removes the @toast-ui/react-editor dependency and resolves the CSS selector injection vulnerability caused by unescaped fieldName values. No remaining issues found.

✅ 1 resolved

✅ Security: CSS selector injection via unescaped fieldName in querySelector

📄 openmetadata-ui/src/main/resources/ui/src/components/common/ServiceDocPanel/ServiceDocPanel.tsx:191
On line 191, fieldName is interpolated directly into a CSS attribute selector: document.querySelector(\[data-id="${fieldName}"]`). If fieldNamecontains CSS selector metacharacters (e.g.,", ], `), it could break the selector or cause unexpected behavior. While activeField currently comes from internal form state (not direct user input), this is a defensive-coding concern — any future change that routes URL parameters or external input into activeField would create a real injection vector.

Use CSS.escape() to sanitize the value before interpolation.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
924 New issues
0 Accepted issues

Measures
14 Security Hotspots
0.0% Coverage on New Code
3.9% Duplication on New Code

See analysis details on SonarQube Cloud