Support overriding lint panel UI #12

Closed

bradymadden97 wants to merge 1 commit from main into main

bradymadden97 commented

2023-01-26 23:11:20 +01:00

(Migrated from github.com)

Additional background here

I'm from Replit, and we're interested in extending the lint panel to support our own custom UI and component library. We've done this in the past with search (supported by this commit), and I tried to mimic that behavior here.

I tested this change through the following:

Cloned github.com/codemirror/dev to my local machine and followed the instructions to get my local environment setup
Made the changes in this PR
Updated /demo/demo.ts to use the new changes:

import { EditorView, basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { lintPanel, setDiagnostics } from "@codemirror/lint";

(() => {
  const dom = document.createElement('div');
  dom.className = "cm-panel-lint";
  dom.innerText = "My own diagnostics pane";

  const view = new EditorView({
    doc: 'console.log("Hello world")',
    extensions: [basicSetup, javascript(), lintPanel({
      createPanel: () => {
        return {
          top: false,
          dom,
          mount() {
            dom.focus();
          },
        };
      }
    })],
    parent: document.querySelector("#editor")!,
  });

  view.dispatch(
    setDiagnostics(view.state, [
      {
        from: 0,
        to: 2,
        severity: "error",
        message: "Error #1",
      },
    ])
  );
})();

Tested the new UI, and could trigger my custom component to show up with Cmd + Shift + M:

https://user-images.githubusercontent.com/16962017/214962040-41a65e8b-37bb-48eb-be77-ca3b58786301.mov

Commented out the createPanel override, and the default still worked as intended:

https://user-images.githubusercontent.com/16962017/214962029-348ac888-be81-4174-8aec-0e87a8d3b161.mov

Definitely open to feedback or suggestions here! I'd be interested in also adding:

Updating Cmd + Shift + M to "toggle" lint pane from current state, rather than just open it.
Ability to jump to 'previous' selection using 'Shift+F8', to correspond with jumping to next selection with F8

Thanks!

[Additional background here](https://discuss.codemirror.net/t/override-lint-pane-in-codemirror-lint/5606) I'm from Replit, and we're interested in extending the lint panel to support our own custom UI and component library. We've done this in the past with search ([supported by this commit](https://github.com/codemirror/search/commit/ebc1eb58b70a537705df2101473d19d9c6f09e86)), and I tried to mimic that behavior here. I tested this change through the following: 1) Cloned github.com/codemirror/dev to my local machine and followed the instructions to get my local environment setup 2) Made the changes in this PR 3) Updated `/demo/demo.ts` to use the new changes: ``` import { EditorView, basicSetup } from "codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { lintPanel, setDiagnostics } from "@codemirror/lint"; (() => { const dom = document.createElement('div'); dom.className = "cm-panel-lint"; dom.innerText = "My own diagnostics pane"; const view = new EditorView({ doc: 'console.log("Hello world")', extensions: [basicSetup, javascript(), lintPanel({ createPanel: () => { return { top: false, dom, mount() { dom.focus(); }, }; } })], parent: document.querySelector("#editor")!, }); view.dispatch( setDiagnostics(view.state, [ { from: 0, to: 2, severity: "error", message: "Error #1", }, ]) ); })(); ``` 4) Tested the new UI, and could trigger my custom component to show up with `Cmd + Shift + M`: https://user-images.githubusercontent.com/16962017/214962040-41a65e8b-37bb-48eb-be77-ca3b58786301.mov 5) Commented out the `createPanel` override, and the default still worked as intended: https://user-images.githubusercontent.com/16962017/214962029-348ac888-be81-4174-8aec-0e87a8d3b161.mov Definitely open to feedback or suggestions here! I'd be interested in also adding: - Updating `Cmd + Shift + M` to "toggle" lint pane from current state, rather than just open it. - Ability to jump to 'previous' selection using 'Shift+F8', to correspond with jumping to next selection with F8 Thanks!

marijnh commented

2023-01-27 16:53:06 +01:00

(Migrated from github.com)

Would adjusting your keymap to not use the built-in openLinePanel, and just using a custom commands that opens a panel entirely managed by your extension work for you?

Would adjusting your keymap to not use the built-in `openLinePanel`, and just using a custom commands that opens a panel entirely managed by your extension work for you?

bradymadden97 commented

2023-01-27 19:13:44 +01:00

(Migrated from github.com)

That would likely work, you're right. I'll try it. Thanks!

Pull request closed

Please reopen this pull request to perform a merge.

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

codemirror/lint!12

No description provided.

Rows
Columns