Add the possibility to set markdown editor placeholder and disabled s…

[giuscris]

This pull request enhances the editor input components in the panel by improving support for disabled and read-only states, adding placeholder functionality, and refining styling for better accessibility and user experience. The changes span TypeScript, SCSS, and dependency updates, focusing on making both Markdown and CodeMirror editors more robust and user-friendly.

Editor functionality and accessibility improvements:

• Both the Markdown and CodeMirror editors now properly support disabled and readOnly states, ensuring the editors become non-editable and update their UI accordingly. The toolbar toggle button and menu items also reflect the disabled state. (panel/src/ts/components/inputs/editor-input.ts [1] [2] [3] [4]; panel/src/ts/components/inputs/editor/code/view.ts [5] [6] [7]; panel/src/ts/components/inputs/editor/markdown/menu.ts [8] [9]; panel/src/ts/components/inputs/editor/markdown/view.ts [10] [11] [12]

• Placeholders are now supported in both Markdown and CodeMirror editors, improving usability when the input is empty. For Markdown, a custom ProseMirror plugin displays the placeholder. (panel/src/ts/components/inputs/editor-input.ts [1] [2]; panel/src/ts/components/inputs/editor/code/view.ts [3] [4]; panel/src/ts/components/inputs/editor/markdown/placeholder.ts [5]; panel/src/ts/components/inputs/editor/markdown/view.ts [6] [7]

Styling and user interface:

• SCSS styles have been updated to visually indicate disabled states for both the editor and toolbar buttons, and to improve placeholder appearance and line padding in the editors. (panel/src/scss/components/forms/_forms-editor.scss [1] [2] [3] [4]

Code quality and maintainability:

• Refactored the initialization and state handling of editor containers and options for clarity and robustness, including safer parent node checks and consistent option passing. (panel/src/ts/components/inputs/editor-input.ts panel/src/ts/components/inputs/editor-input.tsL68-R68)

Dependencies:

• Added @codemirror/state as a dependency to support the new editor features. (panel/package.json [1] panel/pnpm-lock.yaml [2]

[Copilot]

Pull Request Overview

This PR adds support for placeholder text and disabled state functionality to both the markdown and code editors in the panel. The changes enable editors to display placeholder text when empty and to be dynamically enabled/disabled through a consistent API.

Key Changes

• Added placeholder plugin for ProseMirror-based markdown editor with custom styling
• Implemented editable state management for both markdown and code editors using their respective APIs (ProseMirror props and CodeMirror facets/compartments)
• Enhanced menu toolbar to respect editor disabled state by disabling buttons appropriately

Reviewed Changes

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

Show a summary per file

File	Description
panel/src/ts/components/inputs/editor/markdown/placeholder.ts	New plugin that displays placeholder text in empty markdown editors using ProseMirror decorations
panel/src/ts/components/inputs/editor/markdown/view.ts	Refactored constructor to accept options object including editable state and placeholder, added editable getter/setter
panel/src/ts/components/inputs/editor/markdown/menu.ts	Updated menu to check editor's editable state and disable buttons/dropdowns accordingly
panel/src/ts/components/inputs/editor/code/view.ts	Added CodeView options interface, implemented editable getter/setter using CodeMirror's Compartment API, integrated placeholder extension
panel/src/ts/components/inputs/editor-input.ts	Enhanced to pass placeholder and disabled state to editors, added disabled getter/setter, improved null safety with optional chaining
panel/src/scss/components/forms/_forms-editor.scss	Added styles for placeholder text and disabled editor state with appropriate visual feedback
panel/package.json	Added @codemirror/state dependency for Compartment API usage
panel/pnpm-lock.yaml	Updated lockfile with new @codemirror/state dependency

Files not reviewed (1)

• panel/pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.