Public
Like
moiPosterImproved
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of fix-editor-input branch: v7View latest version
A tool to create and manage moi.md files for Val Town vals.
This branch addresses a critical usability issue with the editors in the MoiPoster tool. Previously, when editing input fields in the moi.md editor, the input would sometimes lose focus and freeze up, making it difficult to type smoothly. This was happening because:
- The editor was trying to update the content in real-time with every keystroke
- Each update was triggering a re-render, which would cause the input to lose focus
- This created a poor user experience with laggy inputs and focus loss
-
MoiEditor.tsx:
- Removed the
isUserEditingstate and automatic real-time updates - Added an explicit "Update Preview" button to apply changes when ready
- Simplified the change handling logic to avoid excessive state updates
- Removed the
-
QuickEditor.tsx:
- Similar to MoiEditor, replaced real-time updates with an explicit update button
- Simplified event handling to prevent focus issues
- Separated content editing from preview updates
-
MoiEditorModal.tsx:
- Added local state to better manage content changes
- Implemented debounced content updates to avoid excessive re-renders
- Improved handling of editor type switching
-
App.tsx:
- Updated to use the new content handling approach
- Added a more robust content change handler with debouncing
- Open a val in the editor
- Try typing in any of the input fields - you should now be able to type smoothly without the cursor jumping or input freezing
- When you're ready to see your changes in the preview, click the "Update Preview" button
- Save as normal when you're done editing
Tool to manage moi.md files for Val Town content.
- Browse your vals
- Create and edit moi.md files
- Preview changes
- Quickly update frontmatter
- Save directly to your Val
The moi.md file is a special Markdown file that Val Town uses to display information about your val on the platform, especially for the build.moi page.
- Add your Val Town API key
- Browse and select a val
- Create or edit the moi.md file
- Save your changes