@nethru/ui 1.0.56 → 1.0.58

package/dist/Editor.js

@@ -1,9 +1,12 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Typography } from "@mui/material";
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { EditorView } from "@codemirror/view";
-import { Box, Typography } from "@mui/material";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { RegExpCursor, SearchCursor } from '@codemirror/search';
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration } from "@codemirror/view";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Editor({
@@ -14,11 +17,15 @@ export default function Editor({
   basicSetup,
   extensions = [],
   jsonFormat = false,
+  keyword,
+  isRegExp = false,
+  autoScrollToBottom = false,
   onUpdate,
   style,
   ...props
 }) {
   const ref = useRef();
+  const [view, setView] = useState();
   const [content, setContent] = useState('');
   const [focused, setFocused] = useState(false);
   const styles = useMemo(() => {
@@ -28,13 +35,70 @@ export default function Editor({
     };
     // eslint-disable-next-line
   }, [readOnly, error, focused, ref.current]);
+  const highlight = useMemo(() => {
+    const highlightEffect = StateEffect.define();
+    const decoration = Decoration.mark({
+      attributes: {
+        style: "background-color:#e9db5d" //#90caf9
+      }
+    });
+
+    const extension = StateField.define({
+      create() {
+        return Decoration.none;
+      },
+      update(value, transaction) {
+        value = value.map(transaction.changes);
+        for (let effect of transaction.effects) {
+          if (effect.is(highlightEffect)) {
+            value = value.update({
+              add: effect.value,
+              sort: true
+            });
+          }
+        }
+        return value;
+      },
+      provide: field => EditorView.decorations.from(field)
+    });
+    return {
+      effect: highlightEffect,
+      decoration: decoration,
+      extension: extension
+    };
+  }, []);
   const handleUpdate = viewUpdate => {
     setFocused(viewUpdate.view.hasFocus);
     if (onUpdate) onUpdate(viewUpdate);
   };
+  const highlightKeyword = useCallback(() => {
+    if (!view || !keyword) return;
+    const {
+      effect,
+      decoration
+    } = highlight;
+    const cursor = isRegExp ? new RegExpCursor(view.state.doc, keyword) : new SearchCursor(view.state.doc, keyword, undefined, undefined, s => s.toLowerCase());
+    while (true) {
+      cursor.next();
+      if (cursor.done) break;
+      view.dispatch({
+        effects: effect.of([decoration.range(cursor.value.from, cursor.value.to)])
+      });
+    }
+  }, [view, highlight, keyword, isRegExp]);
+  const scrollToBottom = useCallback(() => {
+    if (!view || !autoScrollToBottom) return;
+    view.dispatch({
+      effects: EditorView.scrollIntoView(view.state.doc.length)
+    });
+  }, [view, autoScrollToBottom]);
   useEffect(() => {
-    setTimeout(() => setContent(value), 100);
-  }, [value]);
+    setTimeout(() => {
+      setContent(value);
+      highlightKeyword();
+      scrollToBottom();
+    }, 100);
+  }, [value, view, highlightKeyword, scrollToBottom]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
     children: [/*#__PURE__*/_jsx(CodeMirror, {
@@ -42,12 +106,13 @@ export default function Editor({
       editable: !readOnly,
       extensions: [jsonFormat ? json() : javascript({
         jsx: true
-      }), EditorView.lineWrapping, ...extensions],
+      }), EditorView.lineWrapping, highlight.extension, ...extensions],
       basicSetup: {
         ...basicSetup,
         highlightActiveLineGutter: false,
         highlightActiveLine: !readOnly
       },
+      onCreateEditor: (view, state) => setView(view),
       onUpdate: handleUpdate,
       style: {
         ...style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "main": "dist/index.js",
   "files": [
     "/dist"