feat: Update speechmarkdown-js to v2.2.0 and add support for new platforms and tags #3
Conversation
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
…forms and tags - Update speechmarkdown-js from v1.0.0 to v2.2.0 - Add support for 6 new TTS platforms: Azure, SAPI, Polly, Polly Neural, W3C, ElevenLabs - Add missing Speech Markdown tags: mark and lang (section) - Update dependencies: Blueprint, Slate, gh-pages, immutable - Replace node-sass with modern Dart Sass - Add Prettier and ESLint configuration - Format entire codebase with Prettier The editor now supports all 27 Speech Markdown tags and 9 TTS platforms.
- Created VoiceSectionElement component with voice and lang properties - Added voice (section) to menu, editor renderer, and serializer - Now supports all 33 standard Speech Markdown tags (100% coverage)
- Fixed voice (section) to use dropdown for lang instead of text field
- Added raw markdown mode toggle for typing short-form syntax directly
- Added comprehensive help panel with documentation for all 33 tags
- Help panel includes examples, platform support, and short-form syntax guide
- Raw mode supports short-form syntax: (text)/'IPA'/, (text){alias}, /IPA/, **strong**, *moderate*, [break:'1s']
- Added null check for editorRef.current before calling getMarkdown() - Removed attempt to call setMarkdown() when switching back to visual mode - Visual editor remounts with existing rawMarkdown state when switching modes
- Added proper Blueprint Classes for drawer body and dialog - Improved visual hierarchy with better spacing and colors - Added styled code blocks with background colors - Added visual indicators (emojis) for notes and tips - Made tag details more readable with proper margins and padding - Added scrollable menu for tag list - Enhanced short-form syntax guide with better formatting
- Fixed toolbar alignment using flexbox with align-items and gap - Removed inline margin from Switch component - Made help panel responsive for mobile (90% width on mobile, 500px on desktop) - Added mobile-friendly font sizes and spacing throughout help panel - Reduced code duplication by creating reusable codeStyle object - Added max-width and padding to root container for mobile - Made toolbar wrap on small screens with flex-wrap
Mobile improvements: - Added mobile media query (@max-width: 768px) with reduced padding and margins - Made help panel tag menu scrollable with proper height constraints - Made help panel content scrollable when tag is selected - Made preview tabs horizontally scrollable on mobile - Added overflow-x: auto to preview-box to prevent content overflow - Reduced logo size on mobile Code cleanup: - Removed unused 'bixby' state variables from App.js - Removed unused imports from editor.js (useEffect, useCallback, useRef, Text, ReactEditor) - Removed unused InputGroup import from menu.js - Fixed emoji accessibility warnings by wrapping emojis in span with role and aria-label - Ran Prettier to format all code consistently The app now works much better on mobile devices with proper scrolling and no content overflow.
- Add platform-specific voice lists that change based on selected platform tab - Created src/data/voices.js module to centralize voice data from speechmarkdown-js - Voice lists now filter by platform (Alexa, Google Assistant, Azure, etc.) - Pass selectedPlatform prop from App.js through Editor to voice elements - Separate voice ID (for SSML) from voice name (for UI display) - Voice data structured as objects with 'id' (lowercase) and 'name' (capitalized) - UI displays capitalized voice names (e.g., 'Joanna') - SSML uses lowercase voice IDs (e.g., 'joanna') - Add copy buttons for markdown and SSML output - Copy Markdown button in toolbar - Copy SSML button in each platform tab (Alexa, Google, Azure, SAPI, Polly, Polly Neural, W3C, ElevenLabs) - Copy Text button in Plain Text tab - Uses Clipboard API with Blueprint Button component - Fix infinite loop error in voice.js - Moved modifiers array outside component to prevent recreation on every render - Updated useEffect dependencies to track specific properties instead of entire element - Fix ESLint warnings - Added eslint-disable comments for intentional React Hook dependency omissions - Removed unused Button import from voice.js
Author
|
@arjun-g This is ready for review.. Codes been updated quite a bit to deal with new dependencies.. |
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
This PR updates the speech-markdown-editor to support the latest speechmarkdown-js library (v2.2.0) and adds comprehensive platform support along with missing Speech Markdown tags.
Changes
New Platform Support
Added support for 6 new TTS platforms:
New Speech Markdown Tags
Added the missing Speech Markdown tags:
mark- SSML bookmark/marker for synchronizationlang(section) - Language section wrapperDependency Updates
speechmarkdown-jsfrom v1.0.0 to v2.2.0@blueprintjs/coreto v3.54.0slate,slate-react,slate-historyto v0.58.4gh-pagesto v6.3.0immutableto v4.3.7node-sasswith modern Dart Sasssass-loaderto v10.5.2Added...
Added Prettier configuration and formatted entire codebase
Added ESLint configuration with custom rules
Added npm scripts for formatting and linting:
npm run format- Format all codenpm run lint- Lint codenpm run lint:fix- Auto-fix linting issuesAlso added Copy buttons in top and bottom
Screenshots
The editor now displays 9 tabs for different TTS platforms, allowing users to see real-time SSML output for:
--