vue3-ace-editor - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

index.js

 import ace from 'ace-builds';
-import 'ace-builds/webpack-resolver';
 import { capitalize, defineComponent, markRaw, h } from 'vue';
@@ -32,2 +31,7 @@ import ResizeObserver from 'resize-observer-polyfill';
         readonly: Boolean,
+        wrap: Boolean,
+        printMargin: {
+            type: [Boolean, Number],
+            default: true,
+        },
     },
@@ -45,2 +49,4 @@ emits: ['update:value', 'init', ...Events],
             theme: 'ace/theme/' + this.theme,
+            wrap: this.wrap,
+            printMargin: this.printMargin,
             ...this.options,
@@ -99,4 +105,10 @@ }));
         },
+        wrap(val) {
+            this._editor.setWrapBehavioursEnabled(val);
+        },
+        printMargin(val) {
+            this._editor.setOption('printMargin', val);
+        },
     }
 });
 //# sourceMappingURL=index.js.map

index.ts

 import ace from 'ace-builds';
 import type { Ace } from 'ace-builds';
-import 'ace-builds/webpack-resolver';
 import { capitalize, defineComponent, markRaw, h } from 'vue';
@@ -37,2 +36,7 @@ import ResizeObserver from 'resize-observer-polyfill';
     readonly: Boolean,
+    wrap: Boolean,
+    printMargin: {
+      type: [Boolean, Number],
+      default: true,
+    },
   },
@@ -50,2 +54,4 @@ emits: ['update:value', 'init', ...Events],
       theme: 'ace/theme/' + this.theme,
+      wrap: this.wrap,
+      printMargin: this.printMargin,
       ...this.options,
@@ -103,3 +109,9 @@ }));
     },
+    wrap(this: VAceEditorInstance, val: boolean) {
+      this._editor.setWrapBehavioursEnabled(val);
+    },
+    printMargin(this: VAceEditorInstance, val: boolean | number) {
+      this._editor.setOption('printMargin', val);
+    },
   }
 });

package.json

 {
   "name": "vue3-ace-editor",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Like vue2-ace-editor but more functional and supports Vue 3",
@@ -18,4 +18,4 @@ "main": "index.js",
   "devDependencies": {
-    "typescript": "^4.0.3"
+    "typescript": "^4.1.3"
   }
 }

README.md

@@ -36,6 +36,11 @@ vue3-ace-editor
     ```html
-    <v-ace-editor v-model="content" @init="editorInit" lang="html" theme="chrome" />
+    <v-ace-editor
+        v-model:value="content"
+        @init="editorInit"
+        lang="html"
+        theme="chrome"
+        style="height: 300px" />
     ```
 
-    prop `v-model`  is required
+    prop `v-model:value` is required. `<v-ace-editor>` has no height by default, its height must be specified manually
 
@@ -47,3 +52,2 @@ prop `lang`, `theme` is same as [ace-editor's doc](https://github.com/ajaxorg/ace)
 1. This component uses [ace-builds](https://www.npmjs.com/package/ace-builds) directly, instead of the outdated wrapper [brace](https://www.npmjs.com/package/brace)
-1. Ace modes and themes are automatically resolved using `ace-builds/webpack-resolver`, no manual-import required.
 1. DOM size changes are detected automatically using [ResizeObserver](resize-observer-polyfill), thus no `width` / `height` props needed.
@@ -53,7 +57,20 @@ 1. For easier usage, more props / events added / emitted.
     1. Prop `placeholder`: A hint to the user of what can be entered in the control.
+    1. Prop `wrap`: Indicates whether the control wraps text
+    1. Prop `printMargin`: A short hand of `showPrintMargin` and `printMarginColumn`
     1. All ace events emitted. Docs can be found here: <https://ace.c9.io/#api=editor&nav=api>
     1. Some commonly used methods `focus`, `blur`, `selectAll` provided as shortcuts.
 
+## Breaking change
+
+Using of `ace-builds/webpack-resolver` is removed due to bug https://github.com/CarterLi/vue3-ace-editor/issues/3. You MUST import `theme` and `mode` yourself. eg.
+
+```js
+import 'ace-builds/src-noconflict/mode-text';
+import 'ace-builds/src-noconflict/theme-chrome';
+```
+
+Find all supported themes and modes in `node_modules/ace-builds/src-noconflict`
+
 ## LICENSE
 
 MIT

types.d.ts

@@ -17,2 +17,4 @@ import { ComponentPublicInstance } from 'vue';
   readonly readonly: boolean;
+  readonly wrap: boolean;
+  readonly printMargin: boolean | number;
 }
@@ -19,0 +21,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14457

increased by12.72%

Lines of code

278

increased by10.32%

Number of lines in readme file

74

increased by29.82%

No dependency changes