@astii/code-editor - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "@astii/code-editor",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "dist/index.min.js",
@@ -5,0 +5,0 @@ "types": "dist/index.d.ts",

README.md

@@ -7,3 +7,3 @@ <div align="center">
 
-a JS code editor based on codeMirror, support code autoCompletion, which can be used with [@astii/expression-sandbox](https://github.com/PotatoGroup/expression-sandbox/)
+a JS code editor based on codeMirror, support code autoCompletion, which can be used with [@astii/expression-sandbox](https://www.npmjs.com/package/@astii/expression-sandbox)
 
@@ -15,6 +15,8 @@ ## Install
 
+```
+
 or
 
+```typeScript
 yarn add @astii/code-editor
-
 ```
@@ -25,13 +27,27 @@
 ```typeScript
-import React, { useEffect, useState } from 'react'
+import React, { useState, useRef } from 'react'
 import ReactDOM from 'react-dom/client'
-import { CodeEditor } from '@astii/code-editor'
-import completions from './completions'
+import { CodeEditor, CodeEditorConfig } from '@astii/code-editor'
+import styles from "./index.less"
 
 const App = () => {
-    const [value, setValue] = useState('')
-    const [_completions, setCompletions] = useState([])
-    useEffect(() => {
-        setCompletions(completions)
-    }, [])
+    const [value, setValue] = useState<string>('')
+    const editorRef = useRef()
+    const [completions, setCompletions] = useState([
+        {
+            label: "inputValue",
+            detail: "izssf",
+            docs: "sfsdfsf",
+            properties: [
+            {
+                label: "a",
+                detail: "asfs"
+            }
+            ]
+        },
+        {
+            label: "@unction",
+            docs: "sfjhbsf12424323是否会被生机勃发",
+        }
+    ])
 
@@ -41,7 +57,23 @@ const onChange = (value) => {
     }
-    return <CodeEditor value={value} completions={_completions} theme={{
-        focused: {
-            outline: "1px solid #fa6400",
-        }
-    }} onChange={onChange} />
+
+    const onClick = () => {
+        const text = "sfsfsfs";
+        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>
+  );
 }
@@ -48,0 +80,0 @@

No alert changes

Improved metrics

Total package byte prevSize

485839

increased by0.15%

Number of lines in readme file

80

increased by66.67%

No dependency changes