feat: word-wrap editor #355
Conversation
cristianoventura
requested review from
going-confetti,
e-fisher and
Llandy3d
and removed request for
a team
| import { useState, useEffect } from 'react' | ||
| import { useDebounce } from 'react-use' | ||
|
|
||
| export function useEditorWordWrapSetting(key: keyof EditorSettings) { |
There was a problem hiding this comment.
This hook can be used to handle each setting independently based on the key (wordWrapScriptPreview or wordWrapResponseContent)
| async function fetchSettings() { | ||
| const settings = await window.studio.settings.getSettings() | ||
| setEditor(settings.editor) | ||
| setWordWrap(settings.editor[key]) | ||
| } | ||
| fetchSettings() |
There was a problem hiding this comment.
I think we should use react query to fetch settings, so that they are cached and only re-requested when the cache is invalidated (after changing a setting, for example). This is probably out of scope of this PR, but would simplify working with settings elsewhere. Though I'm curious what others think.
src/schemas/appSettings.ts
Outdated
| wordWrapScriptPreview: WordWrapSchema, | ||
| wordWrapResponseContent: WordWrapSchema, |
There was a problem hiding this comment.
What about exposing these in the Settings dialog?
| <Flex p="2" gap="2" justify="end"> | ||
| <Flex p="2" gap="2" justify="between"> | ||
| <Label flexGrow="1"> | ||
| <Text size="2">Word-wrap</Text> |
There was a problem hiding this comment.
| <Text size="2">Word-wrap</Text> | |
| <Text size="2">Word wrap</Text> |
There was a problem hiding this comment.
I feel like word wrap toggle should be a part of CodeEditor component, perhaps a Toolbar component inside, with option to control it through props.
Also, I probably wouldn't go as far as having this option saved per every component, just drop it in local storage to remember my preferred view and apply in all places we show editor. It's only one click away to toggle, anyway. IMO, added complexity doesn't outweigh benefit added, but would love to hear what others think.
There was a problem hiding this comment.
I've followed @e-fisher's suggestion to keep the state in local storage. This indeed minimizes complexity. I also implemented a EditorToolbar component to hold the word wrap switch so now all instances of Monaco editor can have it.
There was a problem hiding this comment.
Agree with Llandy on moving it to the right. Maybe not just make it smaller, but use an icon with a tooltip instead?
Found a weird bug when toggle doesn't when viewing raw request response, here's a video:
CleanShot.2024-11-20.at.12.09.51.mp4
Otherwise looks great!
Description
This PR enables word-wrap for the Monaco editor in Script Preview and the Content tab of a response. The state for both are persisted individually in the settings file.
How to Test
Checklist
npm run lint) and all checks pass.npm test) and all tests pass.Screenshots (if appropriate):
Screen.Recording.2024-11-18.at.3.14.10.PM.mov
Related PR(s)/Issue(s)
Resolves #237