vue-prism-editor - npm Package Compare versions

Comparing version 1.0.1-beta.0 to 1.0.1-beta.1

CHANGELOG.md

 # vue-prism-editor
 
+## 1.0.1-beta.1
+
+### Patch Changes
+
+- update readme
+
 ## 1.0.1-beta.0
+
 ### Patch Changes
 
 - next version

package.json

 {
   "name": "vue-prism-editor",
-  "version": "1.0.1-beta.0",
+  "version": "1.0.1-beta.1",
   "description": "A dead simple code editor with syntax highlighting and line numbers.",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -1,27 +0,167 @@
-# TSDX Bootstrap
+# Vue Prism Editor
 
-This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).
+<p align="center">
 
-## Local Development
+![version](https://img.shields.io/npm/v/vue-prism-editor.svg)
+![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/vue-prism-editor.svg)
+[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/koca/vue-prism-editor)
+[![CircleCI branch](https://circleci.com/gh/koca/vue-prism-editor/tree/master.svg?style=shield)](https://circleci.com/gh/koca/vue-prism-editor/tree/master)
 
-Below is a list of commands you will probably find useful.
+<!-- ![Codecov](https://img.shields.io/codecov/c/github/koca/vue-prism-editor.svg) -->
 
-### `npm start` or `yarn start`
+</p>
 
-Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.
+> A dead simple code editor with syntax highlighting and line numbers. 3kb/z
 
-<img src="https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif" width="600" />
+## Demo
 
-Your library will be rebuilt if you make edits.
+[prism-editor.netlify.com](https://prism-editor.netlify.com/)
 
-### `npm run build` or `yarn build`
+## Examples
 
-Bundles the package to the `dist` folder.
-The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
+- Codesandbox: [https://codesandbox.io/s/61yrlnlnmn](https://codesandbox.io/s/61yrlnlnmn)
+- Codepen: [https://codepen.io/koca/pen/QVgqyR](https://codepen.io/koca/pen/QVgqyR)
 
-<img src="https://user-images.githubusercontent.com/4060187/52168322-a98e5b00-26f6-11e9-8cf6-222d716b75ef.gif" width="600" />
+## Features
 
-### `npm test` or `yarn test`
+- Code Editing
+- Modular syntax highlighting with third party library (not limited to prismjs)
+- Indent line or selected text by pressing tab key, with customizable indentation
+- Automatic indent on new lines
+- Wrap selected text in parens, brackets, or quotes
+- Undo / Redo whole words instead of letter by letter
+- Accessible, use Ctrl+Shift+M (Mac) / Ctrl+M to toggle capturing tab key
+- Works on mobile (thanks to textarea)
+- Auto resize
+- Line numbers
+- Match line numbers styles to the theme(optional)
 
-Runs the test watcher (Jest) in an interactive mode.
-By default, runs tests related to files changed since the last commit.
+## Use Case
+
+Several browser based code editors such as Ace, CodeMirror, Monaco etc. provide the ability to embed a full-featured code editor in your web page. However, if you just need a simple editor with syntax highlighting without any of the extra features, they can be overkill as they don't usually have a small bundle size footprint. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.
+
+## Install
+
+```sh
+npm install vue-prism-editor
+```
+
+or
+
+```sh
+yarn add vue-prism-editor
+```
+
+## Usage
+
+You need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with prismjs:
+
+Register the component locally and use it (recommended)
+
+```html
+<template>
+  <prism-editor v-model="code" :highlight="highlighter" line-numbers></prism-editor>
+</template>
+
+<script>
+  // import Prism Editor
+  import { PrismEditor } from 'vue-prism-editor';
+  import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
+
+  // import highlighting library (you can use any library you want just return html string)
+  import { highlight, languages } from 'prismjs/components/prism-core';
+  import 'prismjs/components/prism-clike';
+  import 'prismjs/components/prism-javascript';
+  import "prismjs/themes/prism-tomorrow.css" // import syntax highlighting styles
+
+  export default {
+    components: {
+      PrismEditor,
+    },
+    data: () => ({ code: 'console.log("Hello World")' }),
+    methods: {
+      highlighter(code) {
+        return highlight(code, languages.js); //returns html
+      },
+    },
+  };
+</script>
+```
+
+> Note that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.
+
+Or register the component globally
+
+```js
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles
+Vue.component('PrismEditor', PrismEditor);
+```
+
+Browser usage:
+
+```html
+<!-- vue-prism-editor JavaScript -->
+<script src="https://unpkg.com/vue-prism-editor"></script>
+
+<!-- vue-prism-editor CSS -->
+<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css" />
+
+<!-- use -->
+<script>
+  Vue.component('PrismEditor', VuePrismEditor);
+  new Vue({
+    el: '#app',
+  });
+</script>
+```
+
+## Props
+
+| Name                 | Type               | Default | Options | Description                                                                                                                                   |
+| -------------------- | ------------------ | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| v-model `value`      | `string`           | `""`    | -       | Current value of the editor i.e. the code to display                                                                                          |
+| highlight            | `string => string` | -       | -       | Callback which will receive text to highlight. You'll need to return an HTML string with syntax highlighting using a library such as prismjs. |
+| lineNumbers          | `Boolean`          | `false` | -       | Whether to show line numbers                                                                                                                  |
+| readonly             | `Boolean`          | `false` | -       | Readonly                                                                                                                                      |
+| autoStyleLineNumbers | `Boolean`          | `true`  | -       | Match line numbers text color to the theme                                                                                                    |
+
+## Events
+
+| Name    | Parameters | Description                                                  |
+| ------- | ---------- | ------------------------------------------------------------ |
+| input   | `(code)`   | Fires when the code is changed.                              |
+| keydown | `(event)`  | This event is emitted when a keydown event happens in editor |
+| keyup   | `(event)`  | This event is emitted when a keyup event happens in editor   |
+| click   | `(event)`  | This event is emitted when clicking anywhere in the editor   |
+| focus   | `(event)`  | This event is emitted when focus                             |
+| blur    | `(event)`  | This event is emitted when blur                              |
+
+
+## How it works
+
+_This part is taken from [react-simple-code-editor](https://github.com/satya164/react-simple-code-editor)_
+
+It works by overlaying a syntax highlighted `<pre>` block over a `<textarea>`. When you type, select, copy text etc., you interact with the underlying `<textarea>`, so the experience feels native. This is a very simple approach compared to other editors which re-implement the behaviour.
+
+The syntax highlighting can be done by any third party library as long as it returns HTML and is fully controllable by the user.
+
+The vanilla `<textarea>` doesn't support inserting tab characters for indentation, so we re-implement it by listening to `keydown` events and programmatically updating the text. One caveat with programmatically updating the text is that we lose the undo stack, so we need to maintain our own undo stack. As a result, we can also implement improved undo behaviour such as undoing whole words similar to editors like VSCode.
+
+## Limitations
+
+Due to the way it works, it has certain limitations:
+
+- The syntax highlighted code cannot have different font family, font weight, font style, line height etc. for its content. Since the editor works by aligning the highlighted code over a `<textarea>`, changing anything that affects the layout can misalign it.
+- The custom undo stack is incompatible with undo/redo items browser's context menu. However, other full featured editors don't support browser's undo/redo menu items either.
+- The editor is not optimized for performance and large documents can affect the typing speed.
+- We hide text in the textarea using `-webkit-text-fill-color: transparent`, which works in all modern browsers (even non-webkit ones such as Firefox and Edge). On IE 10+, we use `color: transparent` which doesn't hide the cursor. Text may appear bolder in unsupported browsers.
+
+
+## Thanks
+
+[react-simple-code-editor](https://github.com/satya164/react-simple-code-editor)
+
+## License
+
+MIT

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

267995

increased by130.47%

Number of package files

21

increased by40%

Lines of code

2248

increased by84.87%

Number of lines in readme file

168

increased by500%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes