Re-organize the imports and types for codemirror
This is just a bit of refactoring to sync the upstream plugin code with
Google's internal version, which required some adaptations for how the
BUILD and the imports are handled.
Release-Notes: skip
Google-Bug-Id: b/234805062
Change-Id: If6a141cf0132c1d0560cfc6b19a07fc7de0c9bbd
diff --git a/web/codemirror-imports.ts b/web/codemirror-imports.ts
new file mode 100644
index 0000000..6db3037
--- /dev/null
+++ b/web/codemirror-imports.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import 'codemirror';
+
+import {EditorConfiguration} from 'codemirror';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'codemirror-element': CodeMirrorElement;
+ }
+}
+
+/**
+ * The type `codemirror.EditorConfiguration` is just outdated, so we have to add
+ * some props manually here.
+ */
+export interface CodeMirrorConfig extends EditorConfiguration {
+ autoCloseBrackets?: boolean;
+ matchBrackets?: boolean;
+ showTabs?: boolean;
+ showTrailingSpace?: boolean;
+ lineSeparator?: string;
+ rulers?: false | ReadonlyArray<number | Ruler> | undefined;
+}
+
+/**
+ * <codemirror-element> is defined in a separate javascript bundle, so let's
+ * define its interface here.
+ */
+interface CodeMirrorElement extends HTMLElement {
+ lineNum?: number;
+ params?: CodeMirrorConfig;
+}
+
+interface Ruler {
+ column: number;
+ className?: string | undefined;
+ color?: string | undefined;
+ lineStyle?: string | undefined;
+ width?: string | undefined;
+}
diff --git a/web/element/codemirror-element.ts b/web/element/codemirror-element.ts
index 34068fa..3cdd668 100644
--- a/web/element/codemirror-element.ts
+++ b/web/element/codemirror-element.ts
@@ -4,9 +4,11 @@
* SPDX-License-Identifier: Apache-2.0
*/
import './codemirror-imports';
+
import {EditorConfiguration} from 'codemirror';
import {css, html, LitElement} from 'lit';
import {customElement, property, query} from 'lit/decorators.js';
+
import {codemirrorStyles} from './codemirror-css';
import {dialogStyles} from './dialog-css';
import {foldgutterStyles} from './foldgutter-css';
diff --git a/web/gr-editor.ts b/web/gr-editor.ts
index fb59a66..04a0425 100644
--- a/web/gr-editor.ts
+++ b/web/gr-editor.ts
@@ -3,14 +3,13 @@
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
-import 'codemirror';
-import 'codemirror/addon/display/rulers';
+import './codemirror-imports';
import '@gerritcodereview/typescript-api/gerrit';
-import {EditorConfiguration} from 'codemirror';
import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
import {html, LitElement} from 'lit';
import {customElement, property, query} from 'lit/decorators.js';
+import {CodeMirrorConfig} from './codemirror-imports';
import {setScriptSrc} from './safe-script';
declare global {
@@ -39,18 +38,6 @@
}
/**
- * The type `codemirror.EditorConfiguration` is just outdated, so we have to add
- * some props manually here.
- */
-interface CodeMirrorConfig extends EditorConfiguration {
- autoCloseBrackets?: boolean;
- matchBrackets?: boolean;
- showTabs?: boolean;
- showTrailingSpace?: boolean;
- lineSeparator?: string;
-}
-
-/**
* This component just loads the CodeMirror js bundle lazily and converts the
* Gerrit preferences into CodeMirror params.
*/
