feat: add onStatistics props.

Author: jaywcjlove

core/README.md

@@ -307,6 +307,8 @@ export interface ReactCodeMirrorProps
   indentWithTab?: boolean;
   /** Fired whenever a change occurs to the document. */
   onChange?(value: string, viewUpdate: ViewUpdate): void;
+  /** Some data on the statistics editor. */
+  onStatistics?(data: Statistics): void;
   /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
   onUpdate?(viewUpdate: ViewUpdate): void;
   /**
@@ -359,6 +361,29 @@ export interface BasicSetupOptions {
 }
 ```
 
+```ts
+import { EditorSelection, SelectionRange } from '@codemirror/state';
+import { ViewUpdate } from '@codemirror/view';
+export interface Statistics {
+  /** Get the number of lines in the editor. */
+  lineCount: number;
+  /** Cursor Position */
+  selection: EditorSelection;
+  /** Retrieves a list of all current selections. */
+  ranges: readonly SelectionRange[];
+  /** Get the currently selected code. */
+  selectionCode: string;
+  /**
+   * The length of the given array should be the same as the number of active selections.
+   * Replaces the content of the selections with the strings in the array.
+   */
+  selections: string[];
+  /** Return true if any text is selected. */
+  selectedText: boolean;
+}
+export declare const getStatistics: (view: ViewUpdate) => Statistics;
+```
+
 ## Packages
 
 | Name                                | NPM Version                                                                                                                                           | Website                                                                                |

core/src/index.tsx

@@ -2,10 +2,12 @@ import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { useCodeMirror } from './useCodeMirror';
+import { Statistics } from './utils';
 import { BasicSetupOptions } from './basicSetup';
 
 export * from './basicSetup';
 export * from './useCodeMirror';
+export * from './utils';
 
 export interface ReactCodeMirrorProps
   extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
@@ -49,6 +51,8 @@ export interface ReactCodeMirrorProps
   indentWithTab?: boolean;
   /** Fired whenever a change occurs to the document. */
   onChange?(value: string, viewUpdate: ViewUpdate): void;
+  /** Some data on the statistics editor. */
+  onStatistics?(data: Statistics): void;
   /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
   onUpdate?(viewUpdate: ViewUpdate): void;
   /**
@@ -78,6 +82,7 @@ const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((pr
     selection,
     extensions = [],
     onChange,
+    onStatistics,
     onUpdate,
     autoFocus,
     theme = 'light',
@@ -115,6 +120,7 @@ const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((pr
     readOnly,
     selection,
     onChange,
+    onStatistics,
     onUpdate,
     extensions,
   });

core/src/useCodeMirror.ts

@@ -4,6 +4,7 @@ import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { basicSetup } from './basicSetup';
+import { getStatistics } from './utils';
 import { ReactCodeMirrorProps } from '.';
 
 export interface UseCodeMirror extends ReactCodeMirrorProps {
@@ -15,6 +16,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     value,
     selection,
     onChange,
+    onStatistics,
     onUpdate,
     extensions = [],
     autoFocus,
@@ -61,6 +63,7 @@ export function useCodeMirror(props: UseCodeMirror) {
       const value = doc.toString();
       onChange(value, vu);
     }
+    onStatistics && onStatistics(getStatistics(vu));
   });
 
   let getExtensions = [updateListener, defaultThemeOption];

core/src/utils.ts

@@ -0,0 +1,29 @@
+import { EditorSelection, SelectionRange } from '@codemirror/state';
+import { ViewUpdate } from '@codemirror/view';
+
+export interface Statistics {
+  /** Get the number of lines in the editor. */
+  lineCount: number;
+  /** Cursor Position */
+  selection: EditorSelection;
+  /** Retrieves a list of all current selections. */
+  ranges: readonly SelectionRange[];
+  /** Get the currently selected code. */
+  selectionCode: string;
+  /**
+   * The length of the given array should be the same as the number of active selections.
+   * Replaces the content of the selections with the strings in the array.
+   */
+  selections: string[];
+  /** Return true if any text is selected. */
+  selectedText: boolean;
+}
+
+export const getStatistics = (view: ViewUpdate): Statistics => ({
+  lineCount: view.state.doc.lines,
+  selection: view.state.selection,
+  ranges: view.state.selection.ranges,
+  selectionCode: view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to),
+  selections: view.state.selection.ranges.map((r) => view.state.sliceDoc(r.from, r.to)),
+  selectedText: view.state.selection.ranges.some((r) => !r.empty),
+});

www/src/pages/home/index.tsx

@@ -169,7 +169,7 @@ export default function App() {
         </Github>
         <Npm.Version
           scope="@uiw"
-          packageName="react-shields"
+          packageName="react-codemirror"
           href="https://www.npmjs.com/package/@uiw/react-codemirror"
         />
       </Footer>