Rich text + code editor API; dogfood CodeEditor in Playground#5272
Open
shai-almog wants to merge 7 commits into
Open
Rich text + code editor API; dogfood CodeEditor in Playground#5272shai-almog wants to merge 7 commits into
shai-almog wants to merge 7 commits into
Conversation
…n Playground Introduces two cross-platform native visual editors and proves the code editor in the Codename One Playground. Core (com.codename1.ui): - RichTextArea: WYSIWYG rich text / HTML editor (bold/italic/lists/links/colors/ headings, get/set HTML, change events, placeholder). - CodeEditor: IDE-style editor with syntax highlighting, line-number gutter, light/dark themes, bracket/quote auto-close, async code completion (CodeCompletionProvider/CodeCompletion) and diagnostics (CodeDiagnostic: squiggly underlines + gutter markers + tooltips). - AbstractEditorComponent: a semantic command/query/event channel with two interchangeable backends - a 100% cross-platform BrowserComponent fallback (works on every platform, native VKB + physical keyboard for free) and an optional native backend a port can supply (CodenameOneImplementation createNativeEditorPeer / editorPeerCommand / editorPeerQuery). CodeEditor also exposes setEngineURL(...) so an app can back it with a richer editor engine. Builders: detect com.codename1.ui.CodeEditor usage and gate optional CodeMirror bundling only when the API is used (AndroidGradleBuilder/IPhoneBuilder + CN1_USE_CODEMIRROR placeholder in the iOS header). Mirror to BuildDaemon copies is tracked separately (out of this repo). Tests: 33 deterministic unit tests (RichTextAreaTest, CodeEditorTest) driven by a new editor SPI backing in TestCodenameOneImplementation; screenshot-test screens for both editors registered in the hellocodenameone suite (JS-port-skipped like BrowserComponent). Docs: new RichTextArea + CodeEditor developer-guide sections with authentic screenshots. Playground: PlaygroundBrowserEditor now uses CodeEditor on every non-web platform (replacing the bare TextArea), with completion fed from the same CN1 API metadata (PlaygroundCompletion), diagnostics, theme sync and Java/CSS modes. The web port keeps Monaco unchanged (no regression), and a TextArea fallback engages automatically where the platform web widget cannot initialise. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Developer Guide build artifacts are available for download from this workflow run:
Developer Guide quality checks: |
Collaborator
Author
|
Compared 138 screenshots: 138 matched. Native Android coverage
✅ Native Android screenshot tests passed. Native Android coverage
Benchmark ResultsDetailed Performance Metrics
|
Contributor
Cloudflare Preview
|
Collaborator
Author
|
Compared 136 screenshots: 136 matched. |
Collaborator
Author
Native Linux port (arm64)Compared 136 screenshots: 134 matched, 2 missing references.
|
Collaborator
Author
|
Compared 130 screenshots: 130 matched. |
Collaborator
Author
|
Compared 134 screenshots: 134 matched. Benchmark ResultsDetailed Performance Metrics
|
Collaborator
Author
|
Compared 136 screenshots: 136 matched. Benchmark Results
Detailed Performance Metrics
|
Collaborator
Author
|
Compared 213 screenshots: 213 matched. |
Collaborator
Author
|
Compared 135 screenshots: 135 matched. |
Collaborator
Author
|
Compared 133 screenshots: 133 matched. Benchmark Results
Build and Run Timing
Detailed Performance Metrics
|
Collaborator
Author
|
Compared 137 screenshots: 137 matched. Benchmark Results
Build and Run Timing
Detailed Performance Metrics
|
- iOS: RichTextArea showed black because the native web widget is created transparent (WKWebView opaque=NO) and the editor page had no background, so the dark peer showed through. Give the page an opaque white background and pin color-scheme:light (also on CodeEditor) so device dark mode does not invert it. - SpotBugs (build-test 8): remove the unread pendingText/pendingHtml fields, make CodeEditorHtml.PAGE a runtime constant (static initializer) so the ~13KB string is not inlined/duplicated into other classes, and convert the three flagged anonymous callbacks into named static nested classes. - Vale (developer guide): fix five contraction/style alerts in the new sections. - Screenshot tests: remove RichTextArea/CodeEditor screenshot screens. The BrowserComponent-backed editors hang the screenshot suite on tvOS/watchOS (no reliable web view there, and those sub-platforms can't be distinguished from iOS at runtime). The 33 unit tests + engine rendering already cover the editors. - Playground: revert the CodeEditor dogfood from this PR. The Playground smoke test intentionally builds against the released CN1 (which lacks CodeEditor), so the integration can't compile there yet; it lands once CodeEditor ships in a release. Proven locally against the in-repo core. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- PMD gate (build-test): add the required @OverRide annotations, make CodeEditorHtml final, and convert index for-loops to foreach. - LanguageTool gate (build): hyphenate "cross-platform" in the dev guide. - Re-add RichTextArea/CodeEditor screenshot screens with a hard-bounded capture (fires shortly after the editor is ready, or after a few seconds regardless) so platforms that can't render/capture the web peer produce a screenshot instead of stalling the suite. Goldens to be recorded from CI artifacts. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Checkstyle: re-indent the CodeEditorHtml.PAGE static-initializer continuation
to 12 spaces (the static {} block adds an indentation level).
- Record RichTextArea/CodeEditor screenshot goldens from the CI artifacts for
every platform that runs the suite: ios, ios-metal, ios-tv, ios-watch,
mac-native and javascript. The capture is rendered on iOS/Metal (real editor
with syntax highlighting + gutter), and a deterministic blank/black peer on
platforms that don't capture peer-component pixels (tvOS/watchOS/JS) - all
stable goldens. A small per-test .tolerance absorbs web-render AA variance.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
✅ Continuous Quality ReportTest & Coverage
Static Analysis
Generated automatically by the PR CI workflow. |
These suites also run the editor tests (Android/iOS native WebView renders the editor; Linux/Windows capture a deterministic blank peer). Their gate tolerates a missing golden so CI was green, but the screenshots showed up as new -- record them from the CI artifacts so every platform's golden set is complete.
The CodeEditor page used color-scheme 'light dark'; on iOS the WKWebView base background then follows the device appearance, so a capture that beats the page's first paint shows black in dark appearance (RichTextArea already pinned 'light' and was unaffected). Pin CodeEditor to color-scheme 'light' too, and lengthen the screenshot settle/bound so the rendered content is reliably on screen before capture. Goldens (rendered state) are unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds two cross-platform native visual editors to Codename One.
RichTextArea— a WYSIWYG rich text / HTML editor: bold/italic/underline, lists, links, fore/highlight colors, headings,get/setHtml, change events, placeholder.CodeEditor— an IDE-style editor: syntax highlighting (java/kotlin/js/python/css/xml/json/c), line-number gutter, light/dark themes, bracket/quote auto-close, async code completion (CodeCompletionProvider/CodeCompletion), and diagnostics (CodeDiagnostic→ squiggly underlines + gutter markers + tooltips).Both sit on
AbstractEditorComponent, which speaks a semantic command/query/event channel with two interchangeable backends:BrowserComponentengine (self-contained HTML/JS in the core jar) — iOS (WKWebView), Android (WebView), desktop (CEF), web (iframe), with native virtual-keyboard + physical-keyboard handling for free.CodenameOneImplementation#createNativeEditorPeer/editorPeerCommand/editorPeerQuery).CodeEditor#setEngineURL(...)also lets an app back the editor with a richer engine.Conditional CodeMirror bundling
The Android/iOS builders detect
com.codename1.ui.CodeEditorusage and gate optional CodeMirror bundling only when the API is used (CN1_USE_CODEMIRROR). The out-of-repo BuildDaemon copies are tracked separately.Tests & docs
RichTextAreaTest,CodeEditorTest) via a new editor SPI backing inTestCodenameOneImplementation— green.RichTextArea+CodeEditordeveloper-guide sections with authentic screenshots.Verification
-source 1.5); maven-plugin builds; SpotBugs clean.CodeEditorengine renders correctly (verified by rendering the exact engine HTML: syntax highlighting, a red wavy diagnostic squiggle + gutter marker, and the completion popup).Notes / deferred
opaque=NO); the editor page now paints an opaque background and pinscolor-schemeso the dark peer no longer shows through.CodeEditor), so it can't compile there until the API ships in a release. Follow-up.🤖 Generated with Claude Code