@mybricks/expression

a code editor based on codemirror which can parse and evaluate expression.

Install

$ npm install @mybricks/expression

Usage

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom/client";
import { CodeEditor, CodeEditorConfig } from "@mybricks/expression";
import styles from "./index.less";

const App = () => {
  const [value, setValue] = useState<string>("");
  const editorRef = useRef();
  const [completions, setCompletions] = useState([
    {
      label: "inputValue",
      detail: "input value",
      docs: "输入内容",
      properties: [
        {
          label: "a",
          detail: "A",
        },
      ],
    },
    {
      label: "@unction",
      docs: "demo",
    },
  ]);

  const onChange = (value) => {
    setValue(value);
  };

  const onClick = () => {
    const text = "insert a text";
    editorRef.current.insertDoc(text); //insert doc to position of cursor
    editorRef.current.getDoc(); //get doc
  };

  return (
    <div>
      <CodeEditor
        ref={editorRef}
        className={styles.wrap}
        value={value}
        completions={completions}
        onChange={onChange}
      />
      <button type="button" onClick={onClick}>
        insert
      </button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root") as Element);
root.render(<App />);

Options

| options | type | default | | ----------- | ----------------------- | ------- | | value | string | - | | placeholder | string | - | | onChange | (value: string) => void | - | | options | Object | - |

LICENSE

MIT