@codemirror/panel - npm Package Compare versions

Comparing version 0.18.0 to 0.18.1

CHANGELOG.md

@@ -0,1 +1,13 @@
+## 0.18.1 (2021-03-15)
+
+### Breaking changes
+
+Panels no longer use the `class` property on the spec object (just apply the class yourself when creating the DOM element).
+
+### New features
+
+It is no longer necessary to call `panels()` to use the panel extension (`showPanel` automatically enables it).
+
+`showPanel` now accepts null as input value, which doesn't produce a panel.
+
 ## 0.18.0 (2021-03-03)
@@ -2,0 +14,0 @@

dist/index.d.ts

@@ -5,17 +5,64 @@ import { ViewUpdate, EditorView } from '@codemirror/view';
 declare type PanelConfig = {
+    /**
+    By default, panels will be placed inside the editor's DOM
+    structure. You can use this option to override where panels with
+    `top: true` are placed.
+    */
     topContainer?: HTMLElement;
+    /**
+    Override where panels with `top: false` are placed.
+    */
     bottomContainer?: HTMLElement;
 };
+/**
+Configures the panel-managing extension.
+*/
 declare function panels(config?: PanelConfig): Extension;
+/**
+Object that describes an active panel.
+*/
 interface Panel {
+    /**
+    The element representing this panel. The library will add the
+    `"cm-panel"` DOM class to this.
+    */
     dom: HTMLElement;
+    /**
+    Optionally called after the panel has been added to the editor.
+    */
     mount?(): void;
+    /**
+    Update the DOM for a given view update.
+    */
     update?(update: ViewUpdate): void;
-    class?: string;
+    /**
+    Whether the panel should be at the top or bottom of the editor.
+    Defaults to false.
+    */
     top?: boolean;
+    /**
+    An optional number that is used to determine the ordering when
+    there are multiple panels. Those with a lower `pos` value will
+    come first. Defaults to 0.
+    */
     pos?: number;
 }
-declare const showPanel: Facet<(view: EditorView) => Panel, readonly ((view: EditorView) => Panel)[]>;
-declare function getPanel(view: EditorView, panel: (view: EditorView) => Panel): Panel | null;
+/**
+Get the active panel created by the given constructor, if any.
+This can be useful when you need access to your panels' DOM
+structure.
+*/
+declare function getPanel(view: EditorView, panel: PanelConstructor): Panel | null;
+/**
+A function that initializes a panel. Used in
+[`showPanel`](https://codemirror.net/6/docs/ref/#panel.showPanel).
+*/
+declare type PanelConstructor = (view: EditorView) => Panel;
+/**
+Opening a panel is done by providing a constructor function for
+the panel through this facet. (The panel is closed again when its
+constructor is no longer provided.) Values of `null` are ignored.
+*/
+declare const showPanel: Facet<PanelConstructor | null, readonly (PanelConstructor | null)[]>;
 
-export { Panel, getPanel, panels, showPanel };
+export { Panel, PanelConstructor, getPanel, panels, showPanel };

dist/index.js

@@ -14,24 +14,22 @@ import { ViewPlugin, PluginField, EditorView } from '@codemirror/view';
 });
-/// Enables the panel-managing extension.
+/**
+Configures the panel-managing extension.
+*/
 function panels(config) {
-    let ext = [panelPlugin, baseTheme];
-    if (config)
-        ext.push(panelConfig.of(config));
-    return ext;
+    return config ? [panelConfig.of(config)] : [];
 }
-/// Opening a panel is done by providing a constructor function for
-/// the panel through this facet. (The panel is closed again when its
-/// constructor is no longer provided.)
-const showPanel = Facet.define();
-/// Get the active panel created by the given constructor, if any.
-/// This can be useful when you need access to your panels' DOM
-/// structure.
+/**
+Get the active panel created by the given constructor, if any.
+This can be useful when you need access to your panels' DOM
+structure.
+*/
 function getPanel(view, panel) {
     let plugin = view.plugin(panelPlugin);
-    let index = view.state.facet(showPanel).indexOf(panel);
-    return plugin && index > -1 ? plugin.panels[index] : null;
+    let index = plugin ? plugin.specs.indexOf(panel) : -1;
+    return index > -1 ? plugin.panels[index] : null;
 }
 const panelPlugin = ViewPlugin.fromClass(class {
     constructor(view) {
-        this.specs = view.state.facet(showPanel);
+        this.input = view.state.facet(showPanel);
+        this.specs = this.input.filter(s => s);
         this.panels = this.specs.map(spec => spec(view));
@@ -45,2 +43,3 @@ let conf = view.state.facet(panelConfig);
             p.dom.classList.add("cm-panel");
+            // FIXME drop on next breaking release
             if (p.class)
@@ -64,4 +63,5 @@ p.dom.classList.add(p.class);
         this.bottom.syncClasses();
-        let specs = update.state.facet(showPanel);
-        if (specs != this.specs) {
+        let input = update.state.facet(showPanel);
+        if (input != this.input) {
+            let specs = input.filter(x => x);
             let panels = [], top = [], bottom = [], mount = [];
@@ -88,2 +88,3 @@ for (let spec of specs) {
                 p.dom.classList.add("cm-panel");
+                // FIXME drop on next breaking release
                 if (p.class)
@@ -194,3 +195,11 @@ p.dom.classList.add(p.class);
 });
+/**
+Opening a panel is done by providing a constructor function for
+the panel through this facet. (The panel is closed again when its
+constructor is no longer provided.) Values of `null` are ignored.
+*/
+const showPanel = Facet.define({
+    enables: [panelPlugin, baseTheme]
+});
 
 export { getPanel, panels, showPanel };

package.json

 {
   "name": "@codemirror/panel",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "UI panels for the CodeMirror code editor",
   "scripts": {
     "test": "echo 'No tests'",
-    "prepare": "tsc -p tsconfig.local.json && rollup -c"
+    "prepare": "cm-buildhelper src/panel.ts"
   },
@@ -33,5 +33,3 @@ "keywords": [
   "devDependencies": {
-    "rollup": "^2.35.1",
-    "rollup-plugin-dts": "^2.0.1",
-    "typescript": "^4.1.3"
+    "@codemirror/buildhelper": "^0.1.0"
   },
@@ -38,0 +36,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

1

decreased by-66.67%

Lines of code

465

increased by10.98%

Worsened metrics

Total package byte prevSize

19731

decreased by-39.42%

Number of package files

8

decreased by-20%

No dependency changes