@nethru/ui 2.1.37 → 2.1.38

package/base/editor/Editor.js

@@ -42,7 +42,77 @@ export default function Editor({
   const [view, setView] = useState();
   const [content, setContent] = useState('');
   const [focused, setFocused] = useState(false);
-  const theme = useMemo(() => EditorView.theme({
+  const theme = useMemo(() => makeTheme(focused, error), [focused, error]);
+  const highlight = useMemo(() => makeHighlight(), []);
+  // eslint-disable-next-line
+  const styles = useMemo(() => makeStyle(restrictWidth, ref.current), [restrictWidth, ref.current]);
+  const eslintLinter = useMemo(() => makeEslinter(format, eslintRules, onEslintUpdate, customVariables), [format, eslintRules, onEslintUpdate, customVariables]);
+  const languageExtension = useMemo(() => getLanguageExtension(format), [format]);
+  const keymapExtension = useMemo(() => getKeymapExtension(keymap), [keymap]);
+  const extensionList = useMemo(() => makeExtensions(languageExtension, eslintLinter, highlight.extension, keymapExtension, extensions, onScroll), [languageExtension, eslintLinter, highlight.extension, keymapExtension, extensions, onScroll]);
+  const handleUpdate = useCallback(viewUpdate => {
+    setFocused(viewUpdate.view.hasFocus);
+    if (onUpdate) onUpdate(viewUpdate);
+  }, [onUpdate]);
+  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(() => {
+    setContent(value);
+  }, [value]);
+  useEffect(() => {
+    highlightKeyword();
+    scrollToBottom();
+  }, [content, view, highlightKeyword, scrollToBottom]);
+  useEffect(() => {
+    if (focused && onFocus) onFocus();
+    if (!focused && onBlur) onBlur();
+  }, [focused, onFocus, onBlur]);
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(CodeMirror, {
+      value: content,
+      editable: !readOnly,
+      extensions: extensionList,
+      basicSetup: {
+        ...basicSetup,
+        highlightActiveLineGutter: false,
+        highlightActiveLine: !readOnly
+      },
+      onCreateEditor: (view, state) => setView(view),
+      onUpdate: handleUpdate,
+      theme: theme,
+      style: {
+        ...style,
+        ...styles
+      },
+      ...props
+    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
+      error: error,
+      children: helperText
+    })]
+  });
+}
+function makeTheme(focused, error) {
+  return EditorView.theme({
     '&': {
       fontSize: '13px',
       outline: 'none !important'
@@ -95,59 +165,48 @@ export default function Editor({
     }
   }, {
     dark: false
-  }), [focused, error]);
-  const styles = useMemo(() => {
-    return {
-      maxWidth: restrictWidth && ref.current ? `${ref.current.offsetWidth}px` : 'unset'
-    };
-    // eslint-disable-next-line
-  }, [restrictWidth, ref.current]);
-  const highlight = useMemo(() => {
-    const highlightEffect = StateEffect.define();
-    const decoration = Decoration.mark({
-      attributes: {
-        style: `background-color: ${yellow[100]}`
-      }
-    });
-    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 languageExtension = useMemo(() => {
-    switch (format) {
-      case 'json':
-        return json();
-      case 'nscript':
-        return undefined;
-      default:
-        return javascript({
-          jsx: true
-        });
+  });
+}
+function makeStyle(restrictWidth, instance) {
+  return {
+    maxWidth: restrictWidth && instance ? `${instance.offsetWidth}px` : 'unset'
+  };
+}
+function makeHighlight() {
+  const highlightEffect = StateEffect.define();
+  const decoration = Decoration.mark({
+    attributes: {
+      style: `background-color: ${yellow[100]}`
     }
-  }, [format]);
-  const eslintLinter = useMemo(() => {
-    const regex = /\{\{(\S+)\}\}/g;
-    return format === 'javascript' ? linter(view => {
+  });
+  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
+  };
+}
+function makeEslinter(format, eslintRules, onEslintUpdate, customVariables) {
+  const regex = /\{\{(\S+)\}\}/g;
+  if (format === 'javascript') {
+    return linter(view => {
       const text = view.state.doc.toString();
       const linter = new Linter();
       let replaced = text;
@@ -193,84 +252,60 @@ export default function Editor({
       }
       if (onEslintUpdate) onEslintUpdate(hints);
       return hints;
-    }) : undefined;
-  }, [format, eslintRules, onEslintUpdate, customVariables]);
-  const keymapExtension = useMemo(() => {
-    return [keyMapper.of(keymap), keyMapper.of(defaultKeymap)];
-  }, [keymap]);
-  const extensionList = useMemo(() => {
-    const result = [EditorView.lineWrapping, highlight.extension, ...keymapExtension];
-    if (languageExtension) result.push(languageExtension);
-    if (eslintLinter) result.push(eslintLinter);
-    if (onScroll) {
-      result.push(EditorView.domEventHandlers({
-        scroll(event, view) {
-          if (!event.target?.className.includes('cm-scroller')) return;
-          onScroll(event, view.scrollDOM);
+    });
+  } else if (format === 'json') {
+    return linter(view => {
+      if (!onEslintUpdate) return [];
+      const text = view.state.doc.toString();
+      const hints = [];
+      try {
+        JSON.parse(text);
+      } catch (e) {
+        if (e instanceof SyntaxError && 'message' in e) {
+          const match = e.message.match(/at position (\d+)/);
+          let pos = 0;
+          if (match) pos = parseInt(match[1], 10);
+          hints.push({
+            line: view.state.doc.lineAt(pos),
+            from: pos,
+            to: pos + 1,
+            severity: 'error',
+            message: e.message
+          });
         }
-      }));
-    }
-    result.push(...extensions);
-    return result;
-  }, [languageExtension, eslintLinter, highlight.extension, keymapExtension, extensions, onScroll]);
-  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)
+      }
+      onEslintUpdate(hints);
+      return hints;
     });
-  }, [view, autoScrollToBottom]);
-  useEffect(() => {
-    setContent(value);
-  }, [value]);
-  useEffect(() => {
-    highlightKeyword();
-    scrollToBottom();
-  }, [content, view, highlightKeyword, scrollToBottom]);
-  useEffect(() => {
-    if (focused && onFocus) onFocus();
-    if (!focused && onBlur) onBlur();
-  }, [focused, onFocus, onBlur]);
-  return /*#__PURE__*/_jsxs(Box, {
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(CodeMirror, {
-      value: content,
-      editable: !readOnly,
-      extensions: extensionList,
-      basicSetup: {
-        ...basicSetup,
-        highlightActiveLineGutter: false,
-        highlightActiveLine: !readOnly
-      },
-      onCreateEditor: (view, state) => setView(view),
-      onUpdate: handleUpdate,
-      theme: theme,
-      style: {
-        ...style,
-        ...styles
-      },
-      ...props
-    }), helperText && /*#__PURE__*/_jsx(FormHelperText, {
-      error: error,
-      children: helperText
-    })]
-  });
+  }
+}
+function makeExtensions(languageExtension, eslintLinter, highlightExtension, keymapExtension, extensions, onScroll) {
+  const result = [EditorView.lineWrapping, highlightExtension, ...keymapExtension];
+  if (languageExtension) result.push(languageExtension);
+  if (eslintLinter) result.push(eslintLinter);
+  if (onScroll) {
+    result.push(EditorView.domEventHandlers({
+      scroll(event, view) {
+        if (!event.target?.className.includes('cm-scroller')) return;
+        onScroll(event, view.scrollDOM);
+      }
+    }));
+  }
+  result.push(...extensions);
+  return result;
+}
+function getLanguageExtension(format) {
+  switch (format) {
+    case 'json':
+      return json();
+    case 'nscript':
+      return undefined;
+    default:
+      return javascript({
+        jsx: true
+      });
+  }
+}
+function getKeymapExtension(keymap) {
+  return [keyMapper.of(keymap), keyMapper.of(defaultKeymap)];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.37",
+  "version": "2.1.38",
   "main": "base/index.js",
   "files": [
     "/base"