Feature Reqquest - Add Font Size and Word Wrap settings to editor pre… by sureshknxtwave · Pull Request #735 · accordproject/template-playground

sureshknxtwave · 2026-02-23T07:23:43Z

Add font size and word wrap settings to Playground editors

Closes #<720>

This pull request adds configurable font size and word wrap options to the Playground’s code editors, improving accessibility and overall developer experience. Users can now adjust editor readability based on their screen size and personal preferences, and these settings persist across page reloads.

Changes

Added persistent editor settings for font size and word wrap in the global store.
Extended the Settings modal with:
- A font size dropdown (12px–20px, default 14px).
- A word wrap toggle (enabled by default).
Updated all three Monaco editors (Template Markdown, Concerto Model, JSON Data) to consume and apply the new settings consistently.

Flags

Editor settings are applied globally to all editors for consistency.
No new dependencies were introduced; the implementation relies on native Monaco Editor options.

Author Checklist

Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
Vital features and changes captured in unit and/or integration tests.
Commit messages follow AP format.
Extend the documentation, if necessary.
Merging to main from fork:feature-request.

…ferences - completed

netlify · 2026-02-23T07:23:49Z

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	`46fe54c`
🔍 Latest deploy log	https://app.netlify.com/projects/ap-template-playground/deploys/699c00825ed0f9000826324b
😎 Deploy Preview	https://deploy-preview-735--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Shubh-Raj · 2026-02-23T10:45:20Z

This is a duplicate of #721

Copilot

Pull request overview

This PR adds configurable font size and word wrap settings to the Playground's Monaco code editors, enhancing accessibility and user experience. The settings are persisted to localStorage and applied consistently across all three editors (Markdown, Concerto, and JSON).

Changes:

Added editorSettings state with fontSize (12-20px) and wordWrap ('on'/'off') to the global store with localStorage persistence
Extended the Settings modal with a font size dropdown and word wrap toggle switch
Updated all three Monaco editors to consume and apply the new settings via editor options

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/store/store.ts	Added editorSettings state, persistence helpers, and setter function for font size and word wrap
src/editors/MarkdownEditor.tsx	Integrated editorSettings into Monaco editor options and refactored code structure
src/editors/JSONEditor.tsx	Integrated editorSettings into Monaco editor options and refactored code structure
src/editors/ConcertoEditor.tsx	Integrated editorSettings into Monaco editor options, refactored code structure, and removed Concerto keywords
src/components/SettingsModal.tsx	Added Font Size dropdown and Word Wrap toggle controls to the settings UI

Copilot · 2026-02-24T12:29:44Z

src/store/store.ts

      isTemplateCollapsed: false,
      isDataCollapsed: false,
      showLineNumbers: getInitialLineNumbers(),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment


The eslint-disable comment for unsafe-assignment is unnecessary here for the same reason as above. Consider removing this comment to maintain consistency and code cleanliness.

Suggested change

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

Copilot · 2026-02-24T12:29:45Z

src/components/SettingsModal.tsx

+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            onChange={(value) => setEditorSettings({ fontSize: value })}


The eslint-disable comment for unsafe-assignment is unnecessary. The Select onChange handler receives a number value which matches the fontSize type. Consider removing this comment to keep the codebase clean.

Suggested change

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

onChange={(value) => setEditorSettings({ fontSize: value })}

onChange={(value: number) => setEditorSettings({ fontSize: value })}

Copilot · 2026-02-24T12:29:45Z

src/store/store.ts

+  editorSettings: {
+  fontSize: number;
+  wordWrap: 'on' | 'off';
+};
+setEditorSettings: (
+  partial: Partial<AppState['editorSettings']>
+) => void;


The new editor settings functionality (fontSize and wordWrap) lacks test coverage. Based on the existing test pattern for showLineNumbers in src/tests/store/showLineNumbers.test.tsx, similar tests should be added to verify: 1) default values are correct (fontSize: 14, wordWrap: 'on'), 2) setEditorSettings updates the state correctly, 3) settings persist to localStorage, and 4) settings are loaded from localStorage on initialization.

Copilot · 2026-02-24T12:29:46Z

src/components/SettingsModal.tsx

+        {/* Font Size */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            <h4 className="font-medium text-sm sm:text-base" style={{ color: textColor }}>
+              Font Size
+            </h4>
+            <p className={`text-xs sm:text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+              Adjust editor font size
+            </p>
          </div>
+          <Select
+            value={editorSettings.fontSize}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            onChange={(value) => setEditorSettings({ fontSize: value })}
+            style={{ width: 110 }}
+            options={FONT_SIZES.map((size) => ({
+              label: `${size}px`,
+              value: size,
+            }))}
+          />
        </div>
+
+        <hr className={isDarkMode ? 'border-gray-600' : 'border-gray-200'} />
+
+        {/* Word Wrap */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            <h4 className="font-medium text-sm sm:text-base" style={{ color: textColor }}>
+              Word Wrap
+            </h4>
+            <p className={`text-xs sm:text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+              Wrap long lines in editors
+            </p>
+          </div>
+          <Switch
+            checked={editorSettings.wordWrap === 'on'}
+            onChange={(checked) =>
+              setEditorSettings({ wordWrap: checked ? 'on' : 'off' })
+            }
+          />
+        </div>


The new Font Size and Word Wrap settings in the SettingsModal lack test coverage. Based on the existing test pattern in src/tests/components/SettingsModal.test.tsx, tests should be added to verify: 1) the Font Size and Word Wrap settings are rendered with correct labels and descriptions, 2) the Font Size dropdown shows the correct options (12-20px), 3) the Word Wrap switch reflects the correct state, and 4) the controls are interactive and update the store correctly.

Copilot · 2026-02-24T12:29:46Z

src/editors/ConcertoEditor.tsx

  "scalar",
  "extends",
-  "default",
  "participant",


The "default" keyword has been removed from the concertoKeywords array. This appears to be an unintentional change unrelated to the font size and word wrap feature. The "default" keyword is a valid Concerto language keyword used to specify default values for optional properties. This removal will break syntax highlighting for the "default" keyword in Concerto models.

Copilot · 2026-02-24T12:29:46Z

src/editors/ConcertoEditor.tsx

      string: [
        [/[^\\"]+/, "string"],
-        [/@escapes/, "string.escape"],
        [/\\./, "string.escape.invalid"],


The escapes pattern and its usage in the string tokenizer have been removed. The escapes pattern was used to properly tokenize escape sequences in strings. Without it, valid escape sequences like \n, \t, ", etc. will not be properly highlighted as escape sequences in the Concerto editor. This is an unintentional change that degrades the editor's syntax highlighting capabilities.

Copilot · 2026-02-24T12:29:46Z

src/store/store.ts

+const getInitialEditorSettings = () => {
+  const defaults = {
+    fontSize: 14,
+    wordWrap: 'on' as 'on' | 'off',
+  };
+
+  if (typeof window !== 'undefined') {
+    try {
+      const saved = localStorage.getItem('editor-settings');
+      if (saved) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return { ...defaults, ...(JSON.parse(saved)) };


The eslint-disable comment for unsafe-return is unnecessary here. The function getInitialEditorSettings returns a properly typed object with explicit type annotations. The spread operation merges the defaults with the parsed saved settings, which is safe and correctly typed. Consider removing this comment to keep the codebase clean.

Suggested change

const getInitialEditorSettings = () => {

const defaults = {

fontSize: 14,

wordWrap: 'on' as 'on' | 'off',

};

if (typeof window !== 'undefined') {

try {

const saved = localStorage.getItem('editor-settings');

if (saved) {

// eslint-disable-next-line @typescript-eslint/no-unsafe-return

return { ...defaults, ...(JSON.parse(saved)) };

const getInitialEditorSettings = (): { fontSize: number; wordWrap: 'on' | 'off' } => {

const defaults: { fontSize: number; wordWrap: 'on' | 'off' } = {

fontSize: 14,

wordWrap: 'on',

};

if (typeof window !== 'undefined') {

try {

const saved = localStorage.getItem('editor-settings');

if (saved) {

const parsed = JSON.parse(saved) as Partial<{ fontSize: number; wordWrap: 'on' | 'off' }>;

return { ...defaults, ...parsed };

Copilot · 2026-02-24T12:29:47Z

src/store/store.ts

+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const initialEditorSettings = getInitialEditorSettings();


The eslint-disable comment for unsafe-assignment is unnecessary. The getInitialEditorSettings function returns a properly typed object, and TypeScript can infer the correct type. Consider removing this comment to keep the codebase clean.

Feature Reqquest - Add Font Size and Word Wrap settings to editor pre…

46fe54c

…ferences - completed

sureshknxtwave requested a review from a team as a code owner February 23, 2026 07:23

mttrbrts requested a review from Copilot February 24, 2026 12:24

Copilot started reviewing on behalf of mttrbrts February 24, 2026 12:24 View session

Copilot AI reviewed Feb 24, 2026

View reviewed changes

github-actions bot mentioned this pull request Mar 4, 2026

Monthly issue metrics report accordproject/.github#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature Reqquest - Add Font Size and Word Wrap settings to editor pre…#735

Feature Reqquest - Add Font Size and Word Wrap settings to editor pre…#735
sureshknxtwave wants to merge 1 commit intoaccordproject:mainfrom
sureshknxtwave:feature-request

sureshknxtwave commented Feb 23, 2026 •

edited

Loading

Uh oh!

netlify bot commented Feb 23, 2026 •

edited

Loading

Uh oh!

Shubh-Raj commented Feb 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
		onChange={(value) => setEditorSettings({ fontSize: value })}

	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
	onChange={(value) => setEditorSettings({ fontSize: value })}
	onChange={(value: number) => setEditorSettings({ fontSize: value })}

		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
		const initialEditorSettings = getInitialEditorSettings();

Uh oh!

Conversation

sureshknxtwave commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Closes #<720>

Changes

Flags

Author Checklist

Uh oh!

netlify bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ap-template-playground ready!

Uh oh!

Shubh-Raj commented Feb 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sureshknxtwave commented Feb 23, 2026 •

edited

Loading

netlify bot commented Feb 23, 2026 •

edited

Loading