@uiw/codemirror-extensions-events - npm Package Compare versions

Comparing version 4.21.22 to 4.21.23

cjs/index.d.ts

 import { ViewPlugin, EditorView } from '@codemirror/view';
 export type Events<K extends keyof HTMLElementEventMap> = Record<K, (this: HTMLElement, event: HTMLElementEventMap[K]) => void>;
+interface DOMElementProps extends Partial<HTMLElement> {
+}
+type Options<T extends keyof HTMLElementEventMap> = {
+    /**
+     * Bind events on different dom nodes.
+     * - `scroll` The DOM element that wraps the entire editor view.
+     * - `dom` The DOM element that can be styled to scroll. (Note that it may not have been, so you can't assume this is scrollable.)
+     * - `content` The editable DOM element holding the editor content. You should not, usually, interact with this content directly though the DOM, since the editor will immediately undo most of the changes you make.
+     */
+    type?: 'scroll' | 'dom' | 'content';
+    events?: Events<T>;
+    props?: DOMElementProps;
+};
+export declare function element<T extends keyof HTMLElementEventMap>(opts: Options<T>): ViewPlugin<{
+    dom?: HTMLElement | undefined;
+    view: EditorView;
+    destroy(): void;
+}>;
 /**
@@ -30,1 +48,2 @@ * The DOM element that can be styled to scroll.
 }>;
+export {};

cjs/index.js

@@ -9,2 +9,3 @@ "use strict";
 exports.dom = dom;
+exports.element = element;
 exports.scroll = scroll;
@@ -15,6 +16,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _view = require("@codemirror/view");
-function events(opts) {
+function element(opts) {
   var _opts$type = opts.type,
     type = _opts$type === void 0 ? 'scroll' : _opts$type,
-    events = opts.events;
+    events = opts.events,
+    props = opts.props;
   return _view.ViewPlugin.fromClass( /*#__PURE__*/function () {
@@ -34,2 +36,10 @@ function _class(view) {
       }
+
+      // Apply props to the DOM element
+      if (this.dom && props) {
+        var keys = Object.keys(props);
+        keys.forEach(function (key) {
+          _this.dom[key] = props[key];
+        });
+      }
       Object.keys(events || {}).forEach(function (keyname) {
@@ -60,3 +70,3 @@ if (events && events[keyname] && _this.dom) {
 function dom(opts) {
-  return events({
+  return element({
     type: 'dom',
@@ -70,3 +80,3 @@ events: opts
 function scroll(opts) {
-  return events({
+  return element({
     type: 'scroll',
@@ -82,3 +92,3 @@ events: opts
 function content(opts) {
-  return events({
+  return element({
     type: 'content',
@@ -85,0 +95,0 @@ events: opts

esm/index.d.ts

 import { ViewPlugin, EditorView } from '@codemirror/view';
 export type Events<K extends keyof HTMLElementEventMap> = Record<K, (this: HTMLElement, event: HTMLElementEventMap[K]) => void>;
+interface DOMElementProps extends Partial<HTMLElement> {
+}
+type Options<T extends keyof HTMLElementEventMap> = {
+    /**
+     * Bind events on different dom nodes.
+     * - `scroll` The DOM element that wraps the entire editor view.
+     * - `dom` The DOM element that can be styled to scroll. (Note that it may not have been, so you can't assume this is scrollable.)
+     * - `content` The editable DOM element holding the editor content. You should not, usually, interact with this content directly though the DOM, since the editor will immediately undo most of the changes you make.
+     */
+    type?: 'scroll' | 'dom' | 'content';
+    events?: Events<T>;
+    props?: DOMElementProps;
+};
+export declare function element<T extends keyof HTMLElementEventMap>(opts: Options<T>): ViewPlugin<{
+    dom?: HTMLElement | undefined;
+    view: EditorView;
+    destroy(): void;
+}>;
 /**
@@ -30,1 +48,2 @@ * The DOM element that can be styled to scroll.
 }>;
+export {};

esm/index.js

 import { ViewPlugin } from '@codemirror/view';
-function events(opts) {
+export function element(opts) {
   var {
     type = 'scroll',
-    events
+    events,
+    props
   } = opts;
@@ -19,2 +20,10 @@ return ViewPlugin.fromClass(class {
       }
+
+      // Apply props to the DOM element
+      if (this.dom && props) {
+        var keys = Object.keys(props);
+        keys.forEach(key => {
+          this.dom[key] = props[key];
+        });
+      }
       Object.keys(events || {}).forEach(keyname => {
@@ -40,3 +49,3 @@ if (events && events[keyname] && this.dom) {
 export function dom(opts) {
-  return events({
+  return element({
     type: 'dom',
@@ -50,3 +59,3 @@ events: opts
 export function scroll(opts) {
-  return events({
+  return element({
     type: 'scroll',
@@ -62,3 +71,3 @@ events: opts
 export function content(opts) {
-  return events({
+  return element({
     type: 'content',
@@ -65,0 +74,0 @@ events: opts

package.json

 {
   "name": "@uiw/codemirror-extensions-events",
-  "version": "4.21.22",
+  "version": "4.21.23",
   "description": "Events Extensions for CodeMirror6.",
@@ -5,0 +5,0 @@ "homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/events",

README.md

@@ -20,17 +20,31 @@ <!--rehype:ignore:start-->
 import * as events from '@uiw/codemirror-extensions-events';
+import { element } from '@uiw/codemirror-extensions-events';
 
 const extension1 = events.scroll({
   scroll: (evn) => {
-    console.log(evn.target.scrollTop);
+    /* ... */
   },
 });
 
+const extension1 = events.dom({
+  click: (evn) => {
+    /* ... */
+  },
+});
+
 const extension2 = events.content({
   focus: (evn) => {
-    console.log('focus');
+    /* ... */
   },
   blur: (evn) => {
-    console.log('blur');
+    /* ... */
   },
 });
+
+const extension3 = element({
+  type: 'content',
+  props: {
+    inputMode: 'none',
+  },
+});
 ```
@@ -42,3 +56,4 @@
 import CodeMirror from '@uiw/react-codemirror';
-import { events } from '@uiw/codemirror-extensions-events';
+import * as events from '@uiw/codemirror-extensions-events';
+import { element } from '@uiw/codemirror-extensions-events';
 
@@ -63,3 +78,18 @@ function App() {
 
-  return <CodeMirror value="console.log('hello world!');" height="200px" extensions={[eventExt, eventExt2]} />;
+  return (
+    <CodeMirror
+      value="console.log('hello world!');"
+      height="200px"
+      extensions={[
+        element({
+          type: 'content',
+          props: {
+            inputMode: 'none',
+          },
+        }),
+        eventExt,
+        eventExt2,
+      ]}
+    />
+  );
 }
@@ -72,3 +102,3 @@ export default App;
 import { EditorState } from '@codemirror/state';
-import { events } from '@uiw/codemirror-extensions-events';
+import * as events from '@uiw/codemirror-extensions-events';
 
@@ -75,0 +105,0 @@ const eventExt = events.content({

src/index.ts

@@ -7,2 +7,3 @@ import { ViewPlugin, EditorView } from '@codemirror/view';
 
+interface DOMElementProps extends Partial<HTMLElement> {}
 type Options<T extends keyof HTMLElementEventMap> = {
@@ -17,6 +18,7 @@ /**
   events?: Events<T>;
+  props?: DOMElementProps;
 };
 
-function events<T extends keyof HTMLElementEventMap>(opts: Options<T>) {
-  const { type = 'scroll', events } = opts;
+export function element<T extends keyof HTMLElementEventMap>(opts: Options<T>) {
+  const { type = 'scroll', events, props } = opts;
   return ViewPlugin.fromClass(
@@ -35,2 +37,11 @@ class {
         }
+
+        // Apply props to the DOM element
+        if (this.dom && props) {
+          const keys = Object.keys(props) as (keyof typeof props)[];
+          keys.forEach((key) => {
+            (this.dom as any)[key] = props[key];
+          });
+        }
+
         (Object.keys(events || {}) as Array<keyof typeof events>).forEach((keyname) => {
@@ -57,3 +68,3 @@ if (events && events[keyname] && this.dom) {
 export function dom<T extends keyof HTMLElementEventMap>(opts: Events<T>) {
-  return events({ type: 'dom', events: opts });
+  return element({ type: 'dom', events: opts });
 }
@@ -64,3 +75,3 @@ /**
 export function scroll<T extends keyof HTMLElementEventMap>(opts: Events<T>) {
-  return events({ type: 'scroll', events: opts });
+  return element({ type: 'scroll', events: opts });
 }
@@ -73,3 +84,3 @@ /**
 export function content<T extends keyof HTMLElementEventMap>(opts: Events<T>) {
-  return events({ type: 'content', events: opts });
+  return element({ type: 'content', events: opts });
 }

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

Total package byte prevSize

16316

increased by22.82%

Lines of code

330

increased by24.06%

Number of lines in readme file

177

increased by20.41%

No dependency changes