feat: word-wrap editor #355

cristianoventura · 2024-11-18T20:52:47Z

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

open Script Preview and toggle the word-wrap switch
open the response content of a JSON request and toggle word-wrap
re-open the app and check that the previous state was persisted

Checklist

I have performed a self-review of my code.
[] I have added tests for my changes.
I have run linter locally (npm run lint) and all checks pass.
I have run tests locally (npm test) and all tests pass.
I have commented on my code, particularly in hard-to-understand areas.

Screenshots (if appropriate):

Screen.Recording.2024-11-18.at.3.14.10.PM.mov

Related PR(s)/Issue(s)

Resolves #237

cristianoventura · 2024-11-18T20:57:08Z

src/hooks/useEditorWordWrapSetting.ts

+import { useState, useEffect } from 'react'
+import { useDebounce } from 'react-use'
+
+export function useEditorWordWrapSetting(key: keyof EditorSettings) {


This hook can be used to handle each setting independently based on the key (wordWrapScriptPreview or wordWrapResponseContent)

going-confetti · 2024-11-19T11:21:12Z

src/hooks/useEditorWordWrapSetting.ts

+    async function fetchSettings() {
+      const settings = await window.studio.settings.getSettings()
+      setEditor(settings.editor)
+      setWordWrap(settings.editor[key])
+    }
+    fetchSettings()


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.

going-confetti · 2024-11-19T11:22:18Z

src/schemas/appSettings.ts

+  wordWrapScriptPreview: WordWrapSchema,
+  wordWrapResponseContent: WordWrapSchema,


What about exposing these in the Settings dialog?

going-confetti · 2024-11-19T11:23:39Z

src/views/Generator/GeneratorSidebar/ScriptPreview.tsx

-      <Flex p="2" gap="2" justify="end">
+      <Flex p="2" gap="2" justify="between">
+        <Label flexGrow="1">
+          <Text size="2">Word-wrap</Text>


Suggested change

<Text size="2">Word-wrap</Text>

<Text size="2">Word wrap</Text>

e-fisher

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.

This reverts commit f0abb51.

cristianoventura

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.

cc @going-confetti

Llandy3d

Looks good! 🙌

I wonder if it makes sense to have it on a smaller size on the right side of the bar UI wise because I assume it is a "set and forget" element 🤔

e-fisher

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!

cristianoventura · 2024-11-20T16:50:01Z

I've moved the word wrap switch to an IconButton aligned at the end of the toolbar.

@e-fisher I noticed that this only happens for JSON >= than 10000 characters. It could be related to internal performance and how Monaco handles it. I'm still trying to figure out how to solve this issue.

cristianoventura · 2024-11-20T20:11:22Z

src/components/Monaco/ReactMonacoEditor.tsx

  const [toolbarState, setToolbarState] = useState<ToolbarState>({
    wordWrap: 'off',
  })

+  // Monaco automatically applies word wrap if the content length of a line is >= 10000 characters
+  // In this case, we disable the word wrap button so the internal state is respected
+  const shouldEnableWordWrapButton = () => {


@e-fisher This was an interesting find. If any line has a content length >= 10000 characters, Monaco overrides the wordWrap option. This is likely related to stopRenderingLineAfter but changing this option doesn't seem to have any effect on this case specifically other than hiding the rest of the line content.

This was the solution I came up with by disabling the word wrap button and respecting Monaco's internal state. You can test with HTML content as well such as the home page of grafana.com.

Let me know what you think.

Interesting!
I think respecting that makes sense 🤔

e-fisher

Great find, and sorry for taking you down the rabbit hole! 😅

I would wrap the line calculation in useMemo to avoid running on every re-render, but otherwise looks good!

cristianoventura added 4 commits November 18, 2024 11:25

word-wrap script preview

6761fff

word-wrap response content

5c1bbdb

save editor settings by key

f0abb51

reusable hook for editor wordwrap

fb33b9a

cristianoventura self-assigned this Nov 18, 2024

cristianoventura requested a review from a team as a code owner November 18, 2024 20:52

cristianoventura requested review from going-confetti, e-fisher and Llandy3d and removed request for a team November 18, 2024 20:52

cristianoventura commented Nov 18, 2024

View reviewed changes

going-confetti reviewed Nov 19, 2024

View reviewed changes

e-fisher reviewed Nov 19, 2024

View reviewed changes

cristianoventura added 3 commits November 19, 2024 09:42

Revert "save editor settings by key"

4926760

This reverts commit f0abb51.

implement editor toolbar

b00249f

save toolbar state in local storage

0122089

cristianoventura commented Nov 19, 2024

View reviewed changes

cristianoventura requested review from e-fisher and going-confetti November 19, 2024 20:02

cristianoventura added 2 commits November 19, 2024 15:03

typo

e36f9dd

fix flex height and width

244634d

Llandy3d previously approved these changes Nov 20, 2024

View reviewed changes

e-fisher reviewed Nov 20, 2024

View reviewed changes

cristianoventura added 2 commits November 20, 2024 10:10

use iconbutton instead of switcher

5d6ea23

replace hardcoded colors with variables

cc080da

cristianoventura dismissed Llandy3d’s stale review via cc080da November 20, 2024 16:44

cristianoventura added 2 commits November 20, 2024 15:06

respect monaco word wrap internal state

5c48969

improve commenting

f61c455

cristianoventura commented Nov 20, 2024

View reviewed changes

improve readability

d89f015

cristianoventura requested review from e-fisher and Llandy3d November 20, 2024 20:15

Llandy3d previously approved these changes Nov 20, 2024

View reviewed changes

e-fisher previously approved these changes Nov 21, 2024

View reviewed changes

memoize line calculation

bb64059

cristianoventura dismissed stale reviews from e-fisher and Llandy3d via bb64059 November 21, 2024 14:57

cristianoventura requested review from e-fisher and Llandy3d November 21, 2024 14:57

Llandy3d approved these changes Nov 21, 2024

View reviewed changes

cristianoventura merged commit 61a25ff into main Nov 21, 2024
2 checks passed

cristianoventura deleted the feat/word-wrap-monaco-editor branch November 21, 2024 16:44

cristianoventura mentioned this pull request Nov 21, 2024

fix: onMount prop conflict with ReactMonacoEditor component #359

Merged

5 tasks

github-actions bot mentioned this pull request Jan 14, 2025

chore(main): release 0.11.0 #405

Closed

croco-bot mentioned this pull request Jan 24, 2025

chore(main): release 0.13.0 #432

Merged

This was referenced Feb 13, 2025

chore(main): release 0.14.0 #489

Merged

chore(main): release 0.15.0 #496

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: word-wrap editor #355

feat: word-wrap editor #355

cristianoventura commented Nov 18, 2024

cristianoventura Nov 18, 2024

going-confetti Nov 19, 2024

going-confetti Nov 19, 2024

going-confetti Nov 19, 2024

e-fisher left a comment

cristianoventura left a comment •

edited

Loading

Llandy3d left a comment

e-fisher left a comment

cristianoventura commented Nov 20, 2024 •

edited

Loading

cristianoventura Nov 20, 2024 •

edited

Loading

Llandy3d Nov 20, 2024

e-fisher left a comment

		wordWrapScriptPreview: WordWrapSchema,
		wordWrapResponseContent: WordWrapSchema,

	<Text size="2">Word-wrap</Text>
	<Text size="2">Word wrap</Text>

feat: word-wrap editor #355

feat: word-wrap editor #355

Conversation

cristianoventura commented Nov 18, 2024

Description

How to Test

Checklist

Screenshots (if appropriate):

Related PR(s)/Issue(s)

cristianoventura Nov 18, 2024

Choose a reason for hiding this comment

going-confetti Nov 19, 2024

Choose a reason for hiding this comment

going-confetti Nov 19, 2024

Choose a reason for hiding this comment

going-confetti Nov 19, 2024

Choose a reason for hiding this comment

e-fisher left a comment

Choose a reason for hiding this comment

cristianoventura left a comment • edited Loading

Choose a reason for hiding this comment

Llandy3d left a comment

Choose a reason for hiding this comment

e-fisher left a comment

Choose a reason for hiding this comment

cristianoventura commented Nov 20, 2024 • edited Loading

cristianoventura Nov 20, 2024 • edited Loading

Choose a reason for hiding this comment

Llandy3d Nov 20, 2024

Choose a reason for hiding this comment

e-fisher left a comment

Choose a reason for hiding this comment

cristianoventura left a comment •

edited

Loading

cristianoventura commented Nov 20, 2024 •

edited

Loading

cristianoventura Nov 20, 2024 •

edited

Loading