@nethru/ui 1.0.77 → 1.0.79

package/dist/Section.js

@@ -1,11 +1,13 @@
 import { Paper } from "@mui/material";
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function Section({
+const Section = /*#__PURE__*/forwardRef(({
   children,
   sx,
   ...props
-}) {
+}, ref) => {
   return /*#__PURE__*/_jsx(Paper, {
+    ref: ref,
     variant: "outlined",
     square: false,
     sx: {
@@ -16,4 +18,5 @@ export default function Section({
     ...props,
     children: children
   });
-}
+});
+export default Section;

package/dist/{Editor.js → editor/Editor.js}

@@ -3,6 +3,7 @@ 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 { nScript } from './nScript';
 import { Decoration, EditorView } from "@codemirror/view";
 import { RegExpCursor, SearchCursor } from '@codemirror/search';
 import { StateEffect, StateField } from "@codemirror/state";
@@ -15,7 +16,7 @@ export default function Editor({
   helperText,
   basicSetup,
   extensions = [],
-  jsonFormat = false,
+  format = 'javascript',
   keyword,
   isRegExp = false,
   autoScrollToBottom = false,
@@ -78,10 +79,20 @@ export default function Editor({
       extension: extension
     };
   }, []);
+  const languageExtension = useMemo(() => {
+    switch (format) {
+      case 'json':
+        return json();
+      case 'nscript':
+        return nScript;
+      default:
+        return javascript({
+          jsx: true
+        });
+    }
+  }, [format]);
   const extensionList = useMemo(() => {
-    const result = [jsonFormat ? json() : javascript({
-      jsx: true
-    }), EditorView.lineWrapping, highlight.extension];
+    const result = [languageExtension, EditorView.lineWrapping, highlight.extension];
     if (onScroll) {
       result.push(EditorView.domEventHandlers({
         scroll(event, view) {
@@ -92,7 +103,7 @@ export default function Editor({
     }
     result.push(...extensions);
     return result;
-  }, [jsonFormat, highlight.extension, extensions, onScroll]);
+  }, [languageExtension, highlight.extension, extensions, onScroll]);
   const handleUpdate = viewUpdate => {
     setFocused(viewUpdate.view.hasFocus);
     if (onUpdate) onUpdate(viewUpdate);
@@ -128,7 +139,7 @@ export default function Editor({
   useEffect(() => {
     if (focused && onFocus) onFocus();
     if (!focused && onBlur) onBlur();
-  }, [focused]);
+  }, [focused, onFocus, onBlur]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
     children: [/*#__PURE__*/_jsx(CodeMirror, {

package/dist/editor/nScript.js

@@ -0,0 +1,274 @@
+/* eslint-disable */
+import { LanguageSupport, StreamLanguage, syntaxTree } from "@codemirror/language";
+import { nScriptKeywords } from "./nScriptKeywords";
+
+// 현재 코드에서 사용하는 이름: 테마 스타일(색상)이름
+var color = {
+  comment: "comment",
+  number: "number",
+  string: "string",
+  keyword: "keyword",
+  // 스크립트 변수
+  variable: "attributeValue",
+  // API 변수(속성)
+  function: "propertyName",
+  // API 함수
+  customer: "variableName",
+  // 고객사 변수 (읽기 전용)
+  operator: "squareBracket",
+  // 일반 연산자
+  punctuation: "punctuation" // 범위 관련 연산자
+};
+
+// 기본 키워드
+var defaultKeywords = ["if", "else"];
+var operators = "+-/*%=|&<>~^?!";
+var punc = ":;,.(){}[]";
+var regexName = /^[a-zA-Z_]\w*/;
+var regexColon = /[\s:]+/;
+
+// 기본 토큰 처리기
+function tokenBase(stream, state, prev) {
+  if (stream.sol()) state.indented = stream.indentation();
+  if (stream.eatSpace()) return null;
+  var ch = stream.peek();
+  // 주석
+  if (ch == "/") {
+    if (stream.match("//")) {
+      stream.skipToEnd();
+      return color.comment;
+    }
+    if (stream.match("/*")) {
+      state.tokenize.push(tokenComment);
+      return tokenComment(stream, state);
+    }
+  }
+  // 숫자
+  if ('0' <= ch && ch <= '9') {
+    stream.match(/^\d+/);
+    return color.number;
+  }
+  // 스크립트 변수
+  if (ch == '@' || ch == '#') {
+    stream.next();
+    stream.match(regexName);
+    stream.match(regexColon);
+    stream.match(regexName);
+    return color.variable;
+  }
+  // 테이블 변수
+  if (ch == '`') {
+    stream.next();
+    stream.match(regexName);
+    return color.variable;
+  }
+  // 고객사 변수
+  if (ch == '$') {
+    stream.next();
+    stream.match(regexName);
+    stream.match(regexColon);
+    stream.match(regexName);
+    return color.customer;
+  }
+  // 빠른 문자열 매개변수
+  if (ch == ':') {
+    stream.next();
+    stream.eatSpace();
+    stream.match(regexName);
+    return color.string;
+  }
+  // 일반 연산자
+  if (operators.indexOf(ch) > -1) {
+    stream.next();
+    return color.operator;
+  }
+  // 범위 관련 연산자
+  if (punc.indexOf(ch) > -1) {
+    stream.next();
+    stream.match("..");
+    return color.punctuation;
+  }
+  // 문자열
+  var stringMatch;
+  if (stringMatch = stream.match(/("""|"|')/)) {
+    var tokenize = tokenString.bind(null, stringMatch[0]);
+    state.tokenize.push(tokenize);
+    return tokenize(stream, state);
+  }
+  // 예약어
+  if (stream.match(regexName)) {
+    var ident = stream.current();
+    var api = nScriptKeywords.find(api => api.k === ident);
+    if (api) {
+      if (api.t.at(0) == '-') return color.keyword;else return color.function;
+    }
+    if (defaultKeywords.find(key => key === ident)) return color.keyword;
+    return null;
+  }
+  stream.next();
+  return null;
+}
+
+// 문자열 템플릿 토큰 처리기
+function tokenUntilClosingParen() {
+  var depth = 0;
+  return function (stream, state, prev) {
+    var inner = tokenBase(stream, state, prev);
+    if (inner == color.punctuation) {
+      let cur = stream.current();
+      if (cur == "(" || cur == "{") {
+        // 소괄호 중괄호 모두 지원
+        ++depth;
+      } else if (cur == ")" || cur == "}") {
+        // 소괄호 중괄호 모두 지원
+        if (depth == 0) {
+          stream.backUp(1);
+          state.tokenize.pop();
+          return state.tokenize[state.tokenize.length - 1](stream, state);
+        } else --depth;
+      }
+    }
+    return inner;
+  };
+}
+
+// 문자열 토큰 처리기
+function tokenString(openQuote, stream, state) {
+  var singleLine = openQuote.length == 1;
+  var ch,
+    escaped = false;
+  while (ch = stream.peek()) {
+    if (escaped) {
+      stream.next();
+      if (ch == "(" || ch == "{") {
+        // 소괄호 중괄호 모두 지원
+        state.tokenize.push(tokenUntilClosingParen());
+        return color.string;
+      }
+      escaped = false;
+    } else if (stream.match(openQuote)) {
+      state.tokenize.pop();
+      return color.string;
+    } else {
+      stream.next();
+      escaped = ch == "$"; // 코틀린 방식 문자열 템플릿
+    }
+  }
+
+  if (singleLine) {
+    state.tokenize.pop();
+  }
+  return color.string;
+}
+
+// 주석 토큰 처리기
+function tokenComment(stream, state) {
+  var ch;
+  while (ch = stream.next()) {
+    if (ch === "/" && stream.eat("*")) {
+      state.tokenize.push(tokenComment);
+    } else if (ch === "*" && stream.eat("/")) {
+      state.tokenize.pop();
+      break;
+    }
+  }
+  return color.comment;
+}
+function Context(prev, align, indented) {
+  this.prev = prev;
+  this.align = align;
+  this.indented = indented;
+}
+function pushContext(state, stream) {
+  var align = stream.match(/^\s*($|\/[\/\*]|[)}\]])/, false) ? null : stream.column() + 1;
+  state.context = new Context(state.context, align, state.indented);
+}
+function popContext(state) {
+  if (state.context) {
+    state.indented = state.context.indented;
+    state.context = state.context.prev;
+  }
+}
+
+// nScript 파서 메인 처리기
+export const nScriptParser = {
+  name: "nScript",
+  startState: function () {
+    return {
+      prev: null,
+      context: null,
+      indented: 0,
+      tokenize: []
+    };
+  },
+  token: function (stream, state) {
+    var prev = state.prev;
+    state.prev = null;
+    var tokenize = state.tokenize[state.tokenize.length - 1] || tokenBase;
+    var style = tokenize(stream, state, prev);
+    if (!style || style == color.comment) state.prev = prev;else if (!state.prev) state.prev = style;
+    if (style == color.punctuation) {
+      var bracket = /[\(\[\{]|([\]\)\}])/.exec(stream.current());
+      if (bracket) (bracket[1] ? popContext : pushContext)(state, stream);
+    }
+    return style;
+  },
+  indent: function (state, textAfter, iCx) {
+    var cx = state.context;
+    if (!cx) return 0;
+    var closing = /^[\]\}\)]/.test(textAfter);
+    if (cx.align != null) return cx.align - (closing ? 1 : 0);
+    return cx.indented + (closing ? 0 : iCx.unit);
+  },
+  languageData: {
+    indentOnInput: /^\s*[\)\}\]]$/,
+    commentTokens: {
+      line: "//",
+      block: {
+        open: "/*",
+        close: "*/"
+      }
+    },
+    //closeBrackets: {brackets: ["(", "[", "{", "'", '"', "`"]}
+    closeBrackets: {
+      brackets: ["(", "[", "{", "'", '"']
+    }
+  }
+};
+export const nScriptLanguage = StreamLanguage.define(nScriptParser);
+
+// nScript 자동 완성 메인 처리기
+function nScriptCompletion(context) {
+  const {
+    state,
+    pos
+  } = context;
+  const nodeBefore = syntaxTree(state).resolveInner(pos, -1);
+  const typeName = nodeBefore.type.name;
+  //console.log(typeName);
+
+  // 주석이나 문자열 등은 스킵
+  if (typeName === color.comment || typeName === color.string || typeName === color.variable || typeName === color.customer) return null;
+  let word = context.matchBefore(/\w*/);
+  if (word.from == word.to && !context.explicit) return null;
+  return {
+    from: word.from,
+    options: [...nScriptKeywords.map(it => ({
+      //section: it.i,
+      //displayLabel: it.i + "." + it.k,
+      label: it.k,
+      type: it.t.at(0) == '-' ? it.t.at(3) == 'c' ? "constant" : "variable" : "function",
+      detail: it.t,
+      info: it.i + "." + it.k + it.t + " " + it.d,
+      boost: 1
+    })), ...defaultKeywords.map(it => ({
+      label: it,
+      type: "keyword",
+      boost: 0
+    }))]
+  };
+}
+export const nScriptExtension = nScriptLanguage.data.of({
+  autocomplete: nScriptCompletion
+});
+export const nScript = new LanguageSupport(nScriptLanguage, [nScriptExtension]);