[STT-1586] - Replace hardcoded editor shortcuts with configurable custom editor controls#5117
Open
BrianMwangi21 wants to merge 19 commits intosuperdesk:developfrom
Open
[STT-1586] - Replace hardcoded editor shortcuts with configurable custom editor controls#5117BrianMwangi21 wants to merge 19 commits intosuperdesk:developfrom
BrianMwangi21 wants to merge 19 commits intosuperdesk:developfrom
Conversation
- Add FeatureRegistry for dynamic feature registration - Support configurable inline styles and character insertions - Add cross-platform keyboard shortcuts using 'primary' modifier - Remove hardcoded shortcuts from Editor3Component - Update superdesk-ui-framework to 6.1.3 for new icons - Add IShortcutConfig, ICustomInlineStyle, ICharacterInsertion interfaces - Update format option naming: EDITOR_TAG_*, INSERT_CHAR_*
- Remove migrateLegacyConfig() from FeatureRegistry - Remove shortcut property from customEditorTags type definition - All clients must now use customEditorFeatures config
…ui-framework 6.1.3
The previous reverse-map approach in normalizeCssTagSpans matched pasted spans against individual CSS property+value pairs and stopped at the first match. When FeatureRegistry.getStyleMap() started including display: inline-block in the style map, both COMPANY and PERSON tags shared that value. Since PERSON was registered last, its entry overwrote COMPANY's in the reverse map, causing all COMPANY tags to be misidentified as PERSON on paste. Replace the single-property reverse lookup with full-fingerprint matching: for each pasted <span>, every CSS property in a registered style's fingerprint must match before that style is applied. Shared properties like display: inline-block no longer cause false positives because the discriminating property (borderBlockEnd) is always checked too.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a config-driven “custom editor features” engine for editor3 so clients can define custom inline styles and character insertions (e.g., thin space and n-dash) via appConfig.authoring.customEditorFeatures, replacing previously hardcoded shortcuts/styling.
Changes:
- Added
FeatureRegistryto register custom inline styles + character insertions (toolbar buttons + keyboard shortcuts) from config. - Updated editor3 toolbar, formatting-option plumbing, and key-command handling to use registered features.
- Improved HTML paste parsing for custom tag detection by switching to full CSS “fingerprint” matching; updated tests accordingly.
Reviewed changes
Copilot reviewed 15 out of 17 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/core/superdesk-api.d.ts | Adds type definitions for config-driven custom editor features and formatting-option identifiers. |
| scripts/core/editor3/reducers/editor3.tsx | Adds a generic INSERT_CHARACTER reducer action for character insertion. |
| scripts/core/editor3/html/tests/from-html.spec.ts | Updates/extends tests for CSS fingerprint-based custom tag detection. |
| scripts/core/editor3/html/from-html/index.ts | Reworks custom tag normalization to match full CSS fingerprints (multiple properties). |
| scripts/core/editor3/helpers/inlineStyles.ts | Sources custom inline styles from FeatureRegistry instead of hardcoded tag config. |
| scripts/core/editor3/get-formatting-options-for-table.tsx | Ensures dynamic feature formatting options are allowed in table-like blocks where relevant. |
| scripts/core/editor3/components/toolbar/index.tsx | Renders character-insertion toolbar buttons from FeatureRegistry; wires insert action. |
| scripts/core/editor3/components/toolbar/StyleButton.tsx | Builds icons/tooltips for custom inline styles from FeatureRegistry. |
| scripts/core/editor3/components/toolbar/IconButton.tsx | Changes event handling to use onMouseDown (preventing default) for toolbar icon clicks. |
| scripts/core/editor3/components/tests/editor3.spec.tsx | Updates keyboard shortcut tests to use config-driven commands/options. |
| scripts/core/editor3/components/customStyleMap.tsx | Gets custom tag style map from FeatureRegistry instead of old tag config. |
| scripts/core/editor3/components/Editor3Component.tsx | Replaces hardcoded shortcut logic with FeatureRegistry matching and feature-based commands. |
| scripts/core/editor3/actions/editor3.tsx | Adds insertCharacter (and wrappers) action creators. |
| scripts/core/editor3/FeatureRegistry.ts | New registry that reads config, registers features, matches shortcuts, and formats shortcut display. |
| scripts/apps/workspace/content/components/get-content-profiles-form-config.tsx | Derives custom editor tags and formatting option labels from FeatureRegistry. |
| package.json | Bumps superdesk-ui-framework to 6.1.3 (icons for n-dash / thin space). |
| package-lock.json | Locks updated superdesk-ui-framework (and dependent lockfile updates). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 15 out of 17 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ession fix Adds runtime validation to CustomEditorControls: warns on duplicate format IDs, shortcut collisions, and missing character insertions. Fixes keyboard shortcuts not firing on macOS when Alt/Option modifies e.key by falling back to the physical key via nativeEvent.code (React 16 SyntheticKeyboardEvent does not expose e.code directly). Fixes backspace regression caused by an extra break statement preventing fall-through to RichUtils.handleKeyCommand. Shows "Option" instead of "Alt" in shortcut tooltips on macOS, and handles special key labels like Space and arrow keys. Removes the obsolete customEditorTags type from the API definition.
eos87
changed the title
Contributor
|
Related to #5008 |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 15 out of 17 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
Purpose
As part of adding the thin space and ndash to the toolbar, this PR implement a config-driven custom editor features engine to replace hardcoded keyboard shortcuts and styling in the editor3 system. This allows different Superdesk clients to define their own custom editor features without modifying client-core code.
What has changed
CustomEditorControlswhich is a central registry for custom editor features that reads fromappConfig.authoring.customEditorFeaturessuperdesk-ui-framework: Bumped to 6.1.3 for new icons (n-dash, thin_space)Steps to test
Screenshots
Checklist
Resolves: STT-1586