search

phcode-dev / phoenix

Phoenix is a modern open-source Code Editor for the web, built for the browser.
https://phcode.io
GNU Affero General Public License v3.0
1.7k stars 118 forks source link

[feat] Vertical rulers/guidelines for line char limit ux #1237

Closed abose closed 6 months ago

abose commented 10 months ago

Describe the problem

There should be a way to set a vertical grid line as in the picture below for better UX in char limits. This should be available out of the box.

image

Describe the solution you'd like

It is currently supported with the rulers add-on in codemirror. Minimal code:

in brackets.js

require("thirdparty/CodeMirror/addon/display/rulers");

in Editor.js

...
this._codeMirror = new CodeMirror(container, {
            rulers: [{color: "#f5f577", column: 110, lineStyle: "solid !important"}],
...

Docs:

  1. https://codemirror.net/5/doc/manual.html#addon_rulers
  2. sample code: https://github.com/codemirror/codemirror5/blob/master/demo/rulers.html

Activation

  1. Should have a setting to disable/enable/Auto mode.
  2. Should be in Auto mode by default.
  3. In Auto Mode, If ESLint/prettier rc/ any style-related JSON is present in the project, we will draw gridlines based on the project config. If there are no such prefs, we don't draw grid lines.

Alternatives considered

The Guidelines extension in the extension store does similar thing, but it does not correctly draw the line on the character position expected on zoom. This is because it manually does the line placement calculation based on font sizes and that can be wrong. Best to use the above in build CM5 add-on that takes care of everything.

Additional context

No response

abose commented 6 months ago

Closing as the feature is done. See details here: https://github.com/phcode-dev/phoenix/pull/1524 ESLint impl is pending