@nethru/ui 1.0.55 → 1.0.57

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,14 @@ export default function Editor({
   basicSetup,
   extensions = [],
   jsonFormat = false,
+  keyword,
+  isRegExp = 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 +34,63 @@ 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]);
   useEffect(() => {
-    setTimeout(() => setContent(value), 100);
-  }, [value]);
+    setTimeout(() => {
+      setContent(value);
+      highlightKeyword();
+    }, 100);
+  }, [value, view, highlightKeyword]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
     children: [/*#__PURE__*/_jsx(CodeMirror, {
@@ -42,12 +98,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/dist/Frame.js

@@ -1,4 +1,3 @@
-import { useEffect, useRef, useState } from "react";
 import { Box } from '@mui/material';
 import { SidebarContextProvider } from './sidebar/SidebarContext';
 import { variables } from './variables';
@@ -13,8 +12,6 @@ export default function Frame({
   menu,
   menuIcons = {}
 }) {
-  const ref = useRef();
-  const [width, setWidth] = useState('unset');
   const containerStyles = {
     display: 'flex',
     flexGrow: 1,
@@ -27,17 +24,6 @@ export default function Frame({
     overflow: 'auto',
     padding: '20px 40px'
   };
-  useEffect(() => {
-    if (!ref.current) return;
-    const observer = new ResizeObserver(entries => {
-      const width = entries.length > 0 ? entries[0].borderBoxSize[0].inlineSize : 0;
-      setWidth(width > 0 ? `${width}px` : 'unset');
-    });
-    observer.observe(ref.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [appBar, /*#__PURE__*/_jsxs(Box, {
       sx: containerStyles,
@@ -46,13 +32,9 @@ export default function Frame({
         icons: menuIcons,
         children: sideBar
       }), /*#__PURE__*/_jsxs(Box, {
-        ref: ref,
         component: "section",
         sx: contentStyles,
         children: [/*#__PURE__*/_jsx("main", {
-          style: {
-            maxWidth: width
-          },
           children: children
         }), footer]
       })]

package/package.json

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