feat(dncl): improve UX when unexpectedly in Japanese (DNCL) mode#702
Merged
Conversation
Add `exitDnclModeExternallyRequested` state and two new actions (`requestExternalExitDnclMode` / `clearExternalExitDnclModeRequest`) to dncl-mode.js so that external components (e.g. ExtensionButton) can signal ruby-tab to exit DNCL mode without directly calling `handleToggleDnclMode`. Closes part of #701. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…callback Replace window.alert with window.confirm in DNCL mode. When the user confirms, dispatch onRequestExitDnclMode (Redux signal) and open the extension library. Cancel leaves the mode unchanged. Refs #701. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add DnclModeNotice component (blocks tab warning banner with "Rubyふりがなモードに戻す" button and confirm dialog) - Wire onRequestExitDnclMode callback: dispatches setDnclMode(false) and requestExternalExitDnclMode to gui container - Pass onRequestExitDnclMode to ExtensionButton and DnclModeNotice in gui.jsx - Update .prettierignore and smalruby-prettier-files.md for new files Refs #701. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…rapper Move the notice inside the blocksWrapper Box and use position:absolute so it floats over the top of the blocks panel without displacing the workspace area. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…lly requested When the user clicks the extension button or the notice banner to exit DNCL mode, redux sets exitDnclModeExternallyRequested=true. When the Ruby tab subsequently opens and hits the wasDncl path, it checks this flag and skips calling handleToggleDnclMode(), leaving the editor in furigana/ruby mode. The flag is cleared via onClearExitDnclModeRequest after being consumed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace dnclExtensionDisabled alert string with dnclExtensionConfirm confirm dialog text in en/ja/ja-Hira locales - Add gui.dnclModeNotice.message and gui.dnclModeNotice.exitButton - Right-align notice (flex-end) so message appears in the workspace area and is not hidden behind the block toolbox panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Use right:0 / left:auto so the notice floats only in the workspace area, not behind the block toolbox panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Without this, shouldComponentUpdate returned false when only dnclMode changed, preventing componentDidUpdate from running and the toolbox from refreshing. Now the blocks toolbox immediately shows the full set of categories when DNCL mode is exited from the Code tab. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ers.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/feat/issue-701-dncl-exit-ux/ |
- Run prettier on ruby-tab.jsx to fix lint failure - Add exitDnclModeExternallyRequested to dnclMode mock state in ruby-tab-project-changed.test.js to fix TypeError Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
github-actions Bot
pushed a commit
that referenced
this pull request
May 22, 2026
…1-dncl-exit-ux feat(dncl): improve UX when unexpectedly in Japanese (DNCL) mode
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
alertではなくconfirmダイアログを表示し、OKを選択するとふりがなモードに戻して拡張機能ライブラリを開くChanges
Phase 1 — Redux signal
reducers/dncl-mode.js:exitDnclModeExternallyRequestedフラグを追加（外部からの DNCL 終了要求を Ruby タブに伝えるシグナル）Phase 2 — Extension button confirm
components/extension-button/extension-button.jsx:alert→confirmに変更、OKでonRequestExitDnclMode+onExtensionButtonClickを呼ぶPhase 3 — DnclModeNotice banner
components/dncl-mode-notice/(新規): ワークスペース右上に position:absolute で浮くバナーcomponents/gui/gui.jsx: DnclModeNotice を blocksWrapper 内に配置containers/gui.jsx:onRequestExitDnclModeを mapDispatchToProps に追加Phase 4 — Ruby tab wasDncl skip
containers/ruby-tab.jsx: Ruby タブの wasDncl パスでexitDnclModeExternallyRequested=trueのときhandleToggleDnclMode()をスキップして DNCL の再有効化を抑止Phase 5 — Locales
locales/en.js/ja.js/ja-Hira.js: confirm ダイアログ文とバナー文を追加Bug fix — shouldComponentUpdate
containers/blocks.jsx:shouldComponentUpdateにdnclModeが含まれておらず、Redux の dnclMode 変化で toolbox が即時更新されなかった問題を修正Test plan
test/unit/reducers/dncl-mode-reducer.test.js（10件）test/unit/components/extension-button-dncl.test.jsx（5件）test/unit/components/dncl-mode-notice.test.jsx（6件）🤖 Generated with Claude Code