vue-prism-editor - npm Package Compare versions

Comparing version 1.2.2 to 2.0.0-alpha.0

CHANGELOG.md

 # vue-prism-editor
 
+## 2.0.0-alpha.0
+
+### Major Changes
+
+- Vue 3 support https://github.com/koca/vue-prism-editor/pull/95
+
 ## 1.2.2
@@ -4,0 +10,0 @@

dist/Editor.d.ts

@@ -1,2 +0,1 @@
-import Vue from 'vue';
 import './styles.css';
@@ -25,3 +24,40 @@ export interface EditorProps {
 }
-export declare const PrismEditor: import("vue/types/vue").ExtendedVue<Vue, {
+export declare const PrismEditor: import("vue").DefineComponent<{
+    lineNumbers: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoStyleLineNumbers: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    highlight: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    tabSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    insertSpaces: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ignoreTabKey: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, {
     capture: boolean;
@@ -32,2 +68,6 @@ history: History;
 }, {
+    isEmpty(): boolean;
+    content(): string;
+    lineNumbersCount(): number;
+}, {
     setLineNumbersHeight(): void;
@@ -44,11 +84,7 @@ styleLineNumbers(): void;
     handleKeyDown(e: KeyboardEvent): void;
-}, {
-    isEmpty: boolean;
-    content: string;
-    lineNumbersCount: number;
-}, {
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, globalThis.Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     lineNumbers: boolean;
     autoStyleLineNumbers: boolean;
     readonly: boolean;
-    value: string;
+    modelValue: string;
     highlight: Function;
@@ -59,2 +95,11 @@ tabSize: number;
     placeholder: string;
+} & {}>, {
+    lineNumbers: boolean;
+    autoStyleLineNumbers: boolean;
+    readonly: boolean;
+    modelValue: string;
+    tabSize: number;
+    insertSpaces: boolean;
+    ignoreTabKey: boolean;
+    placeholder: string;
 }>;

dist/prismeditor.cjs.development.js

@@ -5,6 +5,4 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var vue = require('vue');
 
-var Vue = _interopDefault(require('vue'));
-
 function _extends() {
@@ -43,3 +41,3 @@ _extends = Object.assign || function (target) {
 var isMacLike = 'navigator' in global && /*#__PURE__*/ /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-var PrismEditor = /*#__PURE__*/Vue.extend({
+var PrismEditor = /*#__PURE__*/vue.defineComponent({
   props: {
@@ -58,3 +56,3 @@ lineNumbers: {
     },
-    value: {
+    modelValue: {
       type: String,
@@ -96,3 +94,3 @@ "default": ''
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
@@ -268,3 +266,3 @@ handler: function handler(newVal) {
       input.selectionEnd = record.selectionEnd;
-      this.$emit('input', record.value); // this.props.onValueChange(record.value);
+      this.$emit('update:modelValue', record.value); // this.props.onValueChange(record.value);
     },
@@ -283,3 +281,3 @@ handleChange: function handleChange(e) {
 
-      this.$emit('input', value); // this.props.onValueChange(value);
+      this.$emit('update:modelValue', value); // this.props.onValueChange(value);
     },
@@ -318,11 +316,8 @@ _undoEdit: function _undoEdit() {
           insertSpaces = this.insertSpaces,
-          ignoreTabKey = this.ignoreTabKey;
+          ignoreTabKey = this.ignoreTabKey; // onKeyDown(e);
 
-      if (this.$listeners.keydown) {
-        // onKeyDown(e);
-        this.$emit('keydown', e);
+      this.$emit('keydown', e);
 
-        if (e.defaultPrevented) {
-          return;
-        }
+      if (e.defaultPrevented) {
+        return;
       }
@@ -501,21 +496,17 @@
   },
-  render: function render(h) {
+  render: function render() {
     var _this3 = this;
 
-    var lineNumberWidthCalculator = h('div', {
-      attrs: {
-        "class": 'prism-editor__line-width-calc',
-        style: 'height: 0px; visibility: hidden; pointer-events: none;'
-      }
+    var lineNumberWidthCalculator = vue.h('div', {
+      "class": 'prism-editor__line-width-calc',
+      style: 'height: 0px; visibility: hidden; pointer-events: none;'
     }, '999');
-    var lineNumbers = h('div', {
-      staticClass: 'prism-editor__line-numbers',
+    var lineNumbers = vue.h('div', {
+      "class": 'prism-editor__line-numbers',
       style: {
         'min-height': this.lineNumbersHeight
       },
-      attrs: {
-        'aria-hidden': 'true'
-      }
+      'aria-hidden': 'true'
     }, [lineNumberWidthCalculator, Array.from(Array(this.lineNumbersCount).keys()).map(function (_, index) {
-      return h('div', {
+      return vue.h('div', {
         attrs: {
@@ -526,53 +517,43 @@ "class": 'prism-editor__line-number token comment'
     })]);
-    var textarea = h('textarea', {
+    var textarea = vue.h('textarea', {
       ref: 'textarea',
-      on: {
-        input: this.handleChange,
-        keydown: this.handleKeyDown,
-        click: function click($event) {
-          _this3.$emit('click', $event);
-        },
-        keyup: function keyup($event) {
-          _this3.$emit('keyup', $event);
-        },
-        focus: function focus($event) {
-          _this3.$emit('focus', $event);
-        },
-        blur: function blur($event) {
-          _this3.$emit('blur', $event);
-        }
+      onInput: this.handleChange,
+      onKeydown: this.handleKeyDown,
+      onClick: function onClick($event) {
+        _this3.$emit('click', $event);
       },
-      staticClass: 'prism-editor__textarea',
+      onKeyup: function onKeyup($event) {
+        _this3.$emit('keyup', $event);
+      },
+      onFocus: function onFocus($event) {
+        _this3.$emit('focus', $event);
+      },
+      onBlur: function onBlur($event) {
+        _this3.$emit('blur', $event);
+      },
       "class": {
+        'prism-editor__textarea': true,
         'prism-editor__textarea--empty': this.isEmpty
       },
-      attrs: {
-        spellCheck: 'false',
-        autocapitalize: 'off',
-        autocomplete: 'off',
-        autocorrect: 'off',
-        'data-gramm': 'false',
-        placeholder: this.placeholder,
-        'data-testid': 'textarea',
-        readonly: this.readonly
-      },
-      domProps: {
-        value: this.codeData
-      }
+      spellCheck: 'false',
+      autocapitalize: 'off',
+      autocomplete: 'off',
+      autocorrect: 'off',
+      'data-gramm': 'false',
+      placeholder: this.placeholder,
+      'data-testid': 'textarea',
+      readonly: this.readonly,
+      value: this.codeData
     });
-    var preview = h('pre', {
+    var preview = vue.h('pre', {
       ref: 'pre',
-      staticClass: 'prism-editor__editor',
-      attrs: {
-        'data-testid': 'preview'
-      },
-      domProps: {
-        innerHTML: this.content
-      }
+      "class": 'prism-editor__editor',
+      'data-testid': 'preview',
+      innerHTML: this.content
     });
-    var editorContainer = h('div', {
-      staticClass: 'prism-editor__container'
+    var editorContainer = vue.h('div', {
+      "class": 'prism-editor__container'
     }, [textarea, preview]);
-    return h('div', {
-      staticClass: 'prism-editor-wrapper'
+    return vue.h('div', {
+      "class": 'prism-editor-wrapper'
     }, [this.lineNumbers && lineNumbers, editorContainer]);
@@ -579,0 +560,0 @@ }

dist/prismeditor.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("vue"))&&"object"==typeof t&&"default"in t?t.default:t;function i(){return(i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}var s="navigator"in global&&/Win/i.test(navigator.platform),n="navigator"in global&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),r=e.extend({props:{lineNumbers:{type:Boolean,default:!1},autoStyleLineNumbers:{type:Boolean,default:!0},readonly:{type:Boolean,default:!1},value:{type:String,default:""},highlight:{type:Function,required:!0},tabSize:{type:Number,default:2},insertSpaces:{type:Boolean,default:!0},ignoreTabKey:{type:Boolean,default:!1},placeholder:{type:String,default:""}},data:function(){return{capture:!0,history:{stack:[],offset:-1},lineNumbersHeight:"20px",codeData:""}},watch:{value:{immediate:!0,handler:function(t){this.codeData=t||""}},content:{immediate:!0,handler:function(){var t=this;this.lineNumbers&&this.$nextTick((function(){t.setLineNumbersHeight()}))}},lineNumbers:function(){var t=this;this.$nextTick((function(){t.styleLineNumbers(),t.setLineNumbersHeight()}))}},computed:{isEmpty:function(){return 0===this.codeData.length},content:function(){return this.highlight(this.codeData)+"<br />"},lineNumbersCount:function(){return this.codeData.split(/\r\n|\n/).length}},mounted:function(){this._recordCurrentState(),this.styleLineNumbers()},methods:{setLineNumbersHeight:function(){this.lineNumbersHeight=getComputedStyle(this.$refs.pre).height},styleLineNumbers:function(){if(this.lineNumbers&&this.autoStyleLineNumbers){var t=this.$refs.pre,e=this.$el.querySelector(".prism-editor__line-numbers"),i=window.getComputedStyle(t);this.$nextTick((function(){var s="border-top-left-radius",n="border-bottom-left-radius";e&&(e.style[s]=i[s],e.style[n]=i[n],t.style[s]="0",t.style[n]="0",["background-color","margin-top","padding-top","font-family","font-size","line-height"].forEach((function(t){e.style[t]=i[t]})),e.style["margin-bottom"]="-"+i["padding-top"])}))}},_recordCurrentState:function(){var t=this.$refs.textarea;t&&this._recordChange({value:t.value,selectionStart:t.selectionStart,selectionEnd:t.selectionEnd})},_getLines:function(t,e){return t.substring(0,e).split("\n")},_applyEdits:function(t){var e=this.$refs.textarea,s=this.history.stack[this.history.offset];s&&e&&(this.history.stack[this.history.offset]=i({},s,{selectionStart:e.selectionStart,selectionEnd:e.selectionEnd})),this._recordChange(t),this._updateInput(t)},_recordChange:function(t,e){void 0===e&&(e=!1);var s=this.history,n=s.stack,r=s.offset;if(n.length&&r>-1){this.history.stack=n.slice(0,r+1);var a=this.history.stack.length;if(a>100){var o=a-100;this.history.stack=n.slice(o,a),this.history.offset=Math.max(this.history.offset-o,0)}}var l=Date.now();if(e){var h=this.history.stack[this.history.offset];if(h&&l-h.timestamp<3e3){var u,d,c=/[^a-z0-9]([a-z0-9]+)$/i,f=null===(u=this._getLines(h.value,h.selectionStart).pop())||void 0===u?void 0:u.match(c),p=null===(d=this._getLines(t.value,t.selectionStart).pop())||void 0===d?void 0:d.match(c);if(f&&p&&p[1].startsWith(f[1]))return void(this.history.stack[this.history.offset]=i({},t,{timestamp:l}))}}this.history.stack.push(i({},t,{timestamp:l})),this.history.offset++},_updateInput:function(t){var e=this.$refs.textarea;e&&(e.value=t.value,e.selectionStart=t.selectionStart,e.selectionEnd=t.selectionEnd,this.$emit("input",t.value))},handleChange:function(t){var e=t.target,i=e.value;this._recordChange({value:i,selectionStart:e.selectionStart,selectionEnd:e.selectionEnd},!0),this.$emit("input",i)},_undoEdit:function(){var t=this.history,e=t.offset,i=t.stack[e-1];i&&(this._updateInput(i),this.history.offset=Math.max(e-1,0))},_redoEdit:function(){var t=this.history,e=t.stack,i=t.offset,s=e[i+1];s&&(this._updateInput(s),this.history.offset=Math.min(i+1,e.length-1))},handleKeyDown:function(t){var e=this.tabSize,i=this.insertSpaces,r=this.ignoreTabKey;if(!this.$listeners.keydown||(this.$emit("keydown",t),!t.defaultPrevented)){27===t.keyCode&&(t.target.blur(),this.$emit("blur",t));var a=t.target,o=a.value,l=a.selectionStart,h=a.selectionEnd,u=(i?" ":"\t").repeat(e);if(9===t.keyCode&&!r&&this.capture)if(t.preventDefault(),t.shiftKey){var d=this._getLines(o,l),c=d.length-1,f=this._getLines(o,h).length-1,p=o.split("\n").map((function(t,e){return e>=c&&e<=f&&t.startsWith(u)?t.substring(u.length):t})).join("\n");o!==p&&this._applyEdits({value:p,selectionStart:d[c].startsWith(u)?l-u.length:l,selectionEnd:h-(o.length-p.length)})}else if(l!==h){var y=this._getLines(o,l),m=y.length-1,g=this._getLines(o,h).length-1,v=y[m];this._applyEdits({value:o.split("\n").map((function(t,e){return e>=m&&e<=g?u+t:t})).join("\n"),selectionStart:/\S/.test(v)?l+u.length:l,selectionEnd:h+u.length*(g-m+1)})}else{var b=l+u.length;this._applyEdits({value:o.substring(0,l)+u+o.substring(h),selectionStart:b,selectionEnd:b})}else if(8===t.keyCode){var _=l!==h;if(o.substring(0,l).endsWith(u)&&!_){t.preventDefault();var k=l-u.length;this._applyEdits({value:o.substring(0,l-u.length)+o.substring(h),selectionStart:k,selectionEnd:k})}}else if(13===t.keyCode){if(l===h){var C=this._getLines(o,l).pop(),S=null==C?void 0:C.match(/^\s+/);if(S&&S[0]){t.preventDefault();var E="\n"+S[0],K=l+E.length;this._applyEdits({value:o.substring(0,l)+E+o.substring(h),selectionStart:K,selectionEnd:K})}}}else if(57===t.keyCode||219===t.keyCode||222===t.keyCode||192===t.keyCode){var N;57===t.keyCode&&t.shiftKey?N=["(",")"]:219===t.keyCode?N=t.shiftKey?["{","}"]:["[","]"]:222===t.keyCode?N=t.shiftKey?['"','"']:["'","'"]:192!==t.keyCode||t.shiftKey||(N=["`","`"]),l!==h&&N&&(t.preventDefault(),this._applyEdits({value:o.substring(0,l)+N[0]+o.substring(l,h)+N[1]+o.substring(h),selectionStart:l,selectionEnd:h+2}))}else!(n?t.metaKey&&90===t.keyCode:t.ctrlKey&&90===t.keyCode)||t.shiftKey||t.altKey?(n?t.metaKey&&90===t.keyCode&&t.shiftKey:s?t.ctrlKey&&89===t.keyCode:t.ctrlKey&&90===t.keyCode&&t.shiftKey)&&!t.altKey?(t.preventDefault(),this._redoEdit()):77!==t.keyCode||!t.ctrlKey||n&&!t.shiftKey||(t.preventDefault(),this.capture=!this.capture):(t.preventDefault(),this._undoEdit())}}},render:function(t){var e=this,i=t("div",{attrs:{class:"prism-editor__line-width-calc",style:"height: 0px; visibility: hidden; pointer-events: none;"}},"999"),s=t("div",{staticClass:"prism-editor__line-numbers",style:{"min-height":this.lineNumbersHeight},attrs:{"aria-hidden":"true"}},[i,Array.from(Array(this.lineNumbersCount).keys()).map((function(e,i){return t("div",{attrs:{class:"prism-editor__line-number token comment"}},""+ ++i)}))]),n=t("textarea",{ref:"textarea",on:{input:this.handleChange,keydown:this.handleKeyDown,click:function(t){e.$emit("click",t)},keyup:function(t){e.$emit("keyup",t)},focus:function(t){e.$emit("focus",t)},blur:function(t){e.$emit("blur",t)}},staticClass:"prism-editor__textarea",class:{"prism-editor__textarea--empty":this.isEmpty},attrs:{spellCheck:"false",autocapitalize:"off",autocomplete:"off",autocorrect:"off","data-gramm":"false",placeholder:this.placeholder,"data-testid":"textarea",readonly:this.readonly},domProps:{value:this.codeData}}),r=t("pre",{ref:"pre",staticClass:"prism-editor__editor",attrs:{"data-testid":"preview"},domProps:{innerHTML:this.content}}),a=t("div",{staticClass:"prism-editor__container"},[n,r]);return t("div",{staticClass:"prism-editor-wrapper"},[this.lineNumbers&&s,a])}});exports.PrismEditor=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("vue");function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}var i="navigator"in global&&/Win/i.test(navigator.platform),s="navigator"in global&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),n=t.defineComponent({props:{lineNumbers:{type:Boolean,default:!1},autoStyleLineNumbers:{type:Boolean,default:!0},readonly:{type:Boolean,default:!1},modelValue:{type:String,default:""},highlight:{type:Function,required:!0},tabSize:{type:Number,default:2},insertSpaces:{type:Boolean,default:!0},ignoreTabKey:{type:Boolean,default:!1},placeholder:{type:String,default:""}},data:function(){return{capture:!0,history:{stack:[],offset:-1},lineNumbersHeight:"20px",codeData:""}},watch:{modelValue:{immediate:!0,handler:function(t){this.codeData=t||""}},content:{immediate:!0,handler:function(){var t=this;this.lineNumbers&&this.$nextTick((function(){t.setLineNumbersHeight()}))}},lineNumbers:function(){var t=this;this.$nextTick((function(){t.styleLineNumbers(),t.setLineNumbersHeight()}))}},computed:{isEmpty:function(){return 0===this.codeData.length},content:function(){return this.highlight(this.codeData)+"<br />"},lineNumbersCount:function(){return this.codeData.split(/\r\n|\n/).length}},mounted:function(){this._recordCurrentState(),this.styleLineNumbers()},methods:{setLineNumbersHeight:function(){this.lineNumbersHeight=getComputedStyle(this.$refs.pre).height},styleLineNumbers:function(){if(this.lineNumbers&&this.autoStyleLineNumbers){var t=this.$refs.pre,e=this.$el.querySelector(".prism-editor__line-numbers"),i=window.getComputedStyle(t);this.$nextTick((function(){var s="border-top-left-radius",n="border-bottom-left-radius";e&&(e.style[s]=i[s],e.style[n]=i[n],t.style[s]="0",t.style[n]="0",["background-color","margin-top","padding-top","font-family","font-size","line-height"].forEach((function(t){e.style[t]=i[t]})),e.style["margin-bottom"]="-"+i["padding-top"])}))}},_recordCurrentState:function(){var t=this.$refs.textarea;t&&this._recordChange({value:t.value,selectionStart:t.selectionStart,selectionEnd:t.selectionEnd})},_getLines:function(t,e){return t.substring(0,e).split("\n")},_applyEdits:function(t){var i=this.$refs.textarea,s=this.history.stack[this.history.offset];s&&i&&(this.history.stack[this.history.offset]=e({},s,{selectionStart:i.selectionStart,selectionEnd:i.selectionEnd})),this._recordChange(t),this._updateInput(t)},_recordChange:function(t,i){void 0===i&&(i=!1);var s=this.history,n=s.stack,r=s.offset;if(n.length&&r>-1){this.history.stack=n.slice(0,r+1);var a=this.history.stack.length;if(a>100){var o=a-100;this.history.stack=n.slice(o,a),this.history.offset=Math.max(this.history.offset-o,0)}}var l=Date.now();if(i){var h=this.history.stack[this.history.offset];if(h&&l-h.timestamp<3e3){var u,d,c=/[^a-z0-9]([a-z0-9]+)$/i,f=null===(u=this._getLines(h.value,h.selectionStart).pop())||void 0===u?void 0:u.match(c),p=null===(d=this._getLines(t.value,t.selectionStart).pop())||void 0===d?void 0:d.match(c);if(f&&p&&p[1].startsWith(f[1]))return void(this.history.stack[this.history.offset]=e({},t,{timestamp:l}))}}this.history.stack.push(e({},t,{timestamp:l})),this.history.offset++},_updateInput:function(t){var e=this.$refs.textarea;e&&(e.value=t.value,e.selectionStart=t.selectionStart,e.selectionEnd=t.selectionEnd,this.$emit("update:modelValue",t.value))},handleChange:function(t){var e=t.target,i=e.value;this._recordChange({value:i,selectionStart:e.selectionStart,selectionEnd:e.selectionEnd},!0),this.$emit("update:modelValue",i)},_undoEdit:function(){var t=this.history,e=t.offset,i=t.stack[e-1];i&&(this._updateInput(i),this.history.offset=Math.max(e-1,0))},_redoEdit:function(){var t=this.history,e=t.stack,i=t.offset,s=e[i+1];s&&(this._updateInput(s),this.history.offset=Math.min(i+1,e.length-1))},handleKeyDown:function(t){var e=this.tabSize,n=this.insertSpaces,r=this.ignoreTabKey;if(this.$emit("keydown",t),!t.defaultPrevented){27===t.keyCode&&(t.target.blur(),this.$emit("blur",t));var a=t.target,o=a.value,l=a.selectionStart,h=a.selectionEnd,u=(n?" ":"\t").repeat(e);if(9===t.keyCode&&!r&&this.capture)if(t.preventDefault(),t.shiftKey){var d=this._getLines(o,l),c=d.length-1,f=this._getLines(o,h).length-1,p=o.split("\n").map((function(t,e){return e>=c&&e<=f&&t.startsWith(u)?t.substring(u.length):t})).join("\n");o!==p&&this._applyEdits({value:p,selectionStart:d[c].startsWith(u)?l-u.length:l,selectionEnd:h-(o.length-p.length)})}else if(l!==h){var y=this._getLines(o,l),m=y.length-1,g=this._getLines(o,h).length-1,v=y[m];this._applyEdits({value:o.split("\n").map((function(t,e){return e>=m&&e<=g?u+t:t})).join("\n"),selectionStart:/\S/.test(v)?l+u.length:l,selectionEnd:h+u.length*(g-m+1)})}else{var b=l+u.length;this._applyEdits({value:o.substring(0,l)+u+o.substring(h),selectionStart:b,selectionEnd:b})}else if(8===t.keyCode){var _=l!==h;if(o.substring(0,l).endsWith(u)&&!_){t.preventDefault();var k=l-u.length;this._applyEdits({value:o.substring(0,l-u.length)+o.substring(h),selectionStart:k,selectionEnd:k})}}else if(13===t.keyCode){if(l===h){var C=this._getLines(o,l).pop(),S=null==C?void 0:C.match(/^\s+/);if(S&&S[0]){t.preventDefault();var E="\n"+S[0],K=l+E.length;this._applyEdits({value:o.substring(0,l)+E+o.substring(h),selectionStart:K,selectionEnd:K})}}}else if(57===t.keyCode||219===t.keyCode||222===t.keyCode||192===t.keyCode){var N;57===t.keyCode&&t.shiftKey?N=["(",")"]:219===t.keyCode?N=t.shiftKey?["{","}"]:["[","]"]:222===t.keyCode?N=t.shiftKey?['"','"']:["'","'"]:192!==t.keyCode||t.shiftKey||(N=["`","`"]),l!==h&&N&&(t.preventDefault(),this._applyEdits({value:o.substring(0,l)+N[0]+o.substring(l,h)+N[1]+o.substring(h),selectionStart:l,selectionEnd:h+2}))}else!(s?t.metaKey&&90===t.keyCode:t.ctrlKey&&90===t.keyCode)||t.shiftKey||t.altKey?(s?t.metaKey&&90===t.keyCode&&t.shiftKey:i?t.ctrlKey&&89===t.keyCode:t.ctrlKey&&90===t.keyCode&&t.shiftKey)&&!t.altKey?(t.preventDefault(),this._redoEdit()):77!==t.keyCode||!t.ctrlKey||s&&!t.shiftKey||(t.preventDefault(),this.capture=!this.capture):(t.preventDefault(),this._undoEdit())}}},render:function(){var e=this,i=t.h("div",{class:"prism-editor__line-width-calc",style:"height: 0px; visibility: hidden; pointer-events: none;"},"999"),s=t.h("div",{class:"prism-editor__line-numbers",style:{"min-height":this.lineNumbersHeight},"aria-hidden":"true"},[i,Array.from(Array(this.lineNumbersCount).keys()).map((function(e,i){return t.h("div",{attrs:{class:"prism-editor__line-number token comment"}},""+ ++i)}))]),n=t.h("textarea",{ref:"textarea",onInput:this.handleChange,onKeydown:this.handleKeyDown,onClick:function(t){e.$emit("click",t)},onKeyup:function(t){e.$emit("keyup",t)},onFocus:function(t){e.$emit("focus",t)},onBlur:function(t){e.$emit("blur",t)},class:{"prism-editor__textarea":!0,"prism-editor__textarea--empty":this.isEmpty},spellCheck:"false",autocapitalize:"off",autocomplete:"off",autocorrect:"off","data-gramm":"false",placeholder:this.placeholder,"data-testid":"textarea",readonly:this.readonly,value:this.codeData}),r=t.h("pre",{ref:"pre",class:"prism-editor__editor","data-testid":"preview",innerHTML:this.content}),a=t.h("div",{class:"prism-editor__container"},[n,r]);return t.h("div",{class:"prism-editor-wrapper"},[this.lineNumbers&&s,a])}});exports.PrismEditor=n;
 //# sourceMappingURL=prismeditor.cjs.production.min.js.map

dist/prismeditor.esm.js

@@ -1,2 +0,2 @@
-import Vue from 'vue';
+import { defineComponent, h } from 'vue';
 
@@ -36,3 +36,3 @@ function _extends() {
 var isMacLike = 'navigator' in global && /*#__PURE__*/ /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-var PrismEditor = /*#__PURE__*/Vue.extend({
+var PrismEditor = /*#__PURE__*/defineComponent({
   props: {
@@ -51,3 +51,3 @@ lineNumbers: {
     },
-    value: {
+    modelValue: {
       type: String,
@@ -89,3 +89,3 @@ "default": ''
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
@@ -261,3 +261,3 @@ handler: function handler(newVal) {
       input.selectionEnd = record.selectionEnd;
-      this.$emit('input', record.value); // this.props.onValueChange(record.value);
+      this.$emit('update:modelValue', record.value); // this.props.onValueChange(record.value);
     },
@@ -276,3 +276,3 @@ handleChange: function handleChange(e) {
 
-      this.$emit('input', value); // this.props.onValueChange(value);
+      this.$emit('update:modelValue', value); // this.props.onValueChange(value);
     },
@@ -311,11 +311,8 @@ _undoEdit: function _undoEdit() {
           insertSpaces = this.insertSpaces,
-          ignoreTabKey = this.ignoreTabKey;
+          ignoreTabKey = this.ignoreTabKey; // onKeyDown(e);
 
-      if (this.$listeners.keydown) {
-        // onKeyDown(e);
-        this.$emit('keydown', e);
+      this.$emit('keydown', e);
 
-        if (e.defaultPrevented) {
-          return;
-        }
+      if (e.defaultPrevented) {
+        return;
       }
@@ -494,19 +491,15 @@
   },
-  render: function render(h) {
+  render: function render() {
     var _this3 = this;
 
     var lineNumberWidthCalculator = h('div', {
-      attrs: {
-        "class": 'prism-editor__line-width-calc',
-        style: 'height: 0px; visibility: hidden; pointer-events: none;'
-      }
+      "class": 'prism-editor__line-width-calc',
+      style: 'height: 0px; visibility: hidden; pointer-events: none;'
     }, '999');
     var lineNumbers = h('div', {
-      staticClass: 'prism-editor__line-numbers',
+      "class": 'prism-editor__line-numbers',
       style: {
         'min-height': this.lineNumbersHeight
       },
-      attrs: {
-        'aria-hidden': 'true'
-      }
+      'aria-hidden': 'true'
     }, [lineNumberWidthCalculator, Array.from(Array(this.lineNumbersCount).keys()).map(function (_, index) {
@@ -521,51 +514,41 @@ return h('div', {
       ref: 'textarea',
-      on: {
-        input: this.handleChange,
-        keydown: this.handleKeyDown,
-        click: function click($event) {
-          _this3.$emit('click', $event);
-        },
-        keyup: function keyup($event) {
-          _this3.$emit('keyup', $event);
-        },
-        focus: function focus($event) {
-          _this3.$emit('focus', $event);
-        },
-        blur: function blur($event) {
-          _this3.$emit('blur', $event);
-        }
+      onInput: this.handleChange,
+      onKeydown: this.handleKeyDown,
+      onClick: function onClick($event) {
+        _this3.$emit('click', $event);
       },
-      staticClass: 'prism-editor__textarea',
+      onKeyup: function onKeyup($event) {
+        _this3.$emit('keyup', $event);
+      },
+      onFocus: function onFocus($event) {
+        _this3.$emit('focus', $event);
+      },
+      onBlur: function onBlur($event) {
+        _this3.$emit('blur', $event);
+      },
       "class": {
+        'prism-editor__textarea': true,
         'prism-editor__textarea--empty': this.isEmpty
       },
-      attrs: {
-        spellCheck: 'false',
-        autocapitalize: 'off',
-        autocomplete: 'off',
-        autocorrect: 'off',
-        'data-gramm': 'false',
-        placeholder: this.placeholder,
-        'data-testid': 'textarea',
-        readonly: this.readonly
-      },
-      domProps: {
-        value: this.codeData
-      }
+      spellCheck: 'false',
+      autocapitalize: 'off',
+      autocomplete: 'off',
+      autocorrect: 'off',
+      'data-gramm': 'false',
+      placeholder: this.placeholder,
+      'data-testid': 'textarea',
+      readonly: this.readonly,
+      value: this.codeData
     });
     var preview = h('pre', {
       ref: 'pre',
-      staticClass: 'prism-editor__editor',
-      attrs: {
-        'data-testid': 'preview'
-      },
-      domProps: {
-        innerHTML: this.content
-      }
+      "class": 'prism-editor__editor',
+      'data-testid': 'preview',
+      innerHTML: this.content
     });
     var editorContainer = h('div', {
-      staticClass: 'prism-editor__container'
+      "class": 'prism-editor__container'
     }, [textarea, preview]);
     return h('div', {
-      staticClass: 'prism-editor-wrapper'
+      "class": 'prism-editor-wrapper'
     }, [this.lineNumbers && lineNumbers, editorContainer]);
@@ -572,0 +555,0 @@ }

dist/prismeditor.umd.development.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
-  (global = global || self, factory(global.PrismEditor = {}, global.Vue));
-}(this, (function (exports, Vue) { 'use strict';
+  (global = global || self, factory(global.PrismEditor = {}, global.vue));
+}(this, (function (exports, vue) { 'use strict';
 
   var global = typeof self !== undefined ? self : this;
 
-  Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
-
   function _extends() {
@@ -44,3 +42,3 @@ _extends = Object.assign || function (target) {
   var isMacLike = 'navigator' in global && /*#__PURE__*/ /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-  var PrismEditor = /*#__PURE__*/Vue.extend({
+  var PrismEditor = /*#__PURE__*/vue.defineComponent({
     props: {
@@ -59,3 +57,3 @@ lineNumbers: {
       },
-      value: {
+      modelValue: {
         type: String,
@@ -97,3 +95,3 @@ "default": ''
     watch: {
-      value: {
+      modelValue: {
         immediate: true,
@@ -269,3 +267,3 @@ handler: function handler(newVal) {
         input.selectionEnd = record.selectionEnd;
-        this.$emit('input', record.value); // this.props.onValueChange(record.value);
+        this.$emit('update:modelValue', record.value); // this.props.onValueChange(record.value);
       },
@@ -284,3 +282,3 @@ handleChange: function handleChange(e) {
 
-        this.$emit('input', value); // this.props.onValueChange(value);
+        this.$emit('update:modelValue', value); // this.props.onValueChange(value);
       },
@@ -319,11 +317,8 @@ _undoEdit: function _undoEdit() {
             insertSpaces = this.insertSpaces,
-            ignoreTabKey = this.ignoreTabKey;
+            ignoreTabKey = this.ignoreTabKey; // onKeyDown(e);
 
-        if (this.$listeners.keydown) {
-          // onKeyDown(e);
-          this.$emit('keydown', e);
+        this.$emit('keydown', e);
 
-          if (e.defaultPrevented) {
-            return;
-          }
+        if (e.defaultPrevented) {
+          return;
         }
@@ -502,21 +497,17 @@
     },
-    render: function render(h) {
+    render: function render() {
       var _this3 = this;
 
-      var lineNumberWidthCalculator = h('div', {
-        attrs: {
-          "class": 'prism-editor__line-width-calc',
-          style: 'height: 0px; visibility: hidden; pointer-events: none;'
-        }
+      var lineNumberWidthCalculator = vue.h('div', {
+        "class": 'prism-editor__line-width-calc',
+        style: 'height: 0px; visibility: hidden; pointer-events: none;'
       }, '999');
-      var lineNumbers = h('div', {
-        staticClass: 'prism-editor__line-numbers',
+      var lineNumbers = vue.h('div', {
+        "class": 'prism-editor__line-numbers',
         style: {
           'min-height': this.lineNumbersHeight
         },
-        attrs: {
-          'aria-hidden': 'true'
-        }
+        'aria-hidden': 'true'
       }, [lineNumberWidthCalculator, Array.from(Array(this.lineNumbersCount).keys()).map(function (_, index) {
-        return h('div', {
+        return vue.h('div', {
           attrs: {
@@ -527,53 +518,43 @@ "class": 'prism-editor__line-number token comment'
       })]);
-      var textarea = h('textarea', {
+      var textarea = vue.h('textarea', {
         ref: 'textarea',
-        on: {
-          input: this.handleChange,
-          keydown: this.handleKeyDown,
-          click: function click($event) {
-            _this3.$emit('click', $event);
-          },
-          keyup: function keyup($event) {
-            _this3.$emit('keyup', $event);
-          },
-          focus: function focus($event) {
-            _this3.$emit('focus', $event);
-          },
-          blur: function blur($event) {
-            _this3.$emit('blur', $event);
-          }
+        onInput: this.handleChange,
+        onKeydown: this.handleKeyDown,
+        onClick: function onClick($event) {
+          _this3.$emit('click', $event);
         },
-        staticClass: 'prism-editor__textarea',
+        onKeyup: function onKeyup($event) {
+          _this3.$emit('keyup', $event);
+        },
+        onFocus: function onFocus($event) {
+          _this3.$emit('focus', $event);
+        },
+        onBlur: function onBlur($event) {
+          _this3.$emit('blur', $event);
+        },
         "class": {
+          'prism-editor__textarea': true,
           'prism-editor__textarea--empty': this.isEmpty
         },
-        attrs: {
-          spellCheck: 'false',
-          autocapitalize: 'off',
-          autocomplete: 'off',
-          autocorrect: 'off',
-          'data-gramm': 'false',
-          placeholder: this.placeholder,
-          'data-testid': 'textarea',
-          readonly: this.readonly
-        },
-        domProps: {
-          value: this.codeData
-        }
+        spellCheck: 'false',
+        autocapitalize: 'off',
+        autocomplete: 'off',
+        autocorrect: 'off',
+        'data-gramm': 'false',
+        placeholder: this.placeholder,
+        'data-testid': 'textarea',
+        readonly: this.readonly,
+        value: this.codeData
       });
-      var preview = h('pre', {
+      var preview = vue.h('pre', {
         ref: 'pre',
-        staticClass: 'prism-editor__editor',
-        attrs: {
-          'data-testid': 'preview'
-        },
-        domProps: {
-          innerHTML: this.content
-        }
+        "class": 'prism-editor__editor',
+        'data-testid': 'preview',
+        innerHTML: this.content
       });
-      var editorContainer = h('div', {
-        staticClass: 'prism-editor__container'
+      var editorContainer = vue.h('div', {
+        "class": 'prism-editor__container'
       }, [textarea, preview]);
-      return h('div', {
-        staticClass: 'prism-editor-wrapper'
+      return vue.h('div', {
+        "class": 'prism-editor-wrapper'
       }, [this.lineNumbers && lineNumbers, editorContainer]);
@@ -580,0 +561,0 @@ }

dist/prismeditor.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],e):e((t=t||self).PrismEditor={},t.Vue)}(this,(function(t,e){"use strict";var i=void 0!==typeof self?self:this;function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var n="navigator"in i&&/Win/i.test(navigator.platform),r="navigator"in i&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),a=e.extend({props:{lineNumbers:{type:Boolean,default:!1},autoStyleLineNumbers:{type:Boolean,default:!0},readonly:{type:Boolean,default:!1},value:{type:String,default:""},highlight:{type:Function,required:!0},tabSize:{type:Number,default:2},insertSpaces:{type:Boolean,default:!0},ignoreTabKey:{type:Boolean,default:!1},placeholder:{type:String,default:""}},data:function(){return{capture:!0,history:{stack:[],offset:-1},lineNumbersHeight:"20px",codeData:""}},watch:{value:{immediate:!0,handler:function(t){this.codeData=t||""}},content:{immediate:!0,handler:function(){var t=this;this.lineNumbers&&this.$nextTick((function(){t.setLineNumbersHeight()}))}},lineNumbers:function(){var t=this;this.$nextTick((function(){t.styleLineNumbers(),t.setLineNumbersHeight()}))}},computed:{isEmpty:function(){return 0===this.codeData.length},content:function(){return this.highlight(this.codeData)+"<br />"},lineNumbersCount:function(){return this.codeData.split(/\r\n|\n/).length}},mounted:function(){this._recordCurrentState(),this.styleLineNumbers()},methods:{setLineNumbersHeight:function(){this.lineNumbersHeight=getComputedStyle(this.$refs.pre).height},styleLineNumbers:function(){if(this.lineNumbers&&this.autoStyleLineNumbers){var t=this.$refs.pre,e=this.$el.querySelector(".prism-editor__line-numbers"),i=window.getComputedStyle(t);this.$nextTick((function(){var s="border-top-left-radius",n="border-bottom-left-radius";e&&(e.style[s]=i[s],e.style[n]=i[n],t.style[s]="0",t.style[n]="0",["background-color","margin-top","padding-top","font-family","font-size","line-height"].forEach((function(t){e.style[t]=i[t]})),e.style["margin-bottom"]="-"+i["padding-top"])}))}},_recordCurrentState:function(){var t=this.$refs.textarea;t&&this._recordChange({value:t.value,selectionStart:t.selectionStart,selectionEnd:t.selectionEnd})},_getLines:function(t,e){return t.substring(0,e).split("\n")},_applyEdits:function(t){var e=this.$refs.textarea,i=this.history.stack[this.history.offset];i&&e&&(this.history.stack[this.history.offset]=s({},i,{selectionStart:e.selectionStart,selectionEnd:e.selectionEnd})),this._recordChange(t),this._updateInput(t)},_recordChange:function(t,e){void 0===e&&(e=!1);var i=this.history,n=i.stack,r=i.offset;if(n.length&&r>-1){this.history.stack=n.slice(0,r+1);var a=this.history.stack.length;if(a>100){var o=a-100;this.history.stack=n.slice(o,a),this.history.offset=Math.max(this.history.offset-o,0)}}var l=Date.now();if(e){var h=this.history.stack[this.history.offset];if(h&&l-h.timestamp<3e3){var u,d,c=/[^a-z0-9]([a-z0-9]+)$/i,f=null===(u=this._getLines(h.value,h.selectionStart).pop())||void 0===u?void 0:u.match(c),p=null===(d=this._getLines(t.value,t.selectionStart).pop())||void 0===d?void 0:d.match(c);if(f&&p&&p[1].startsWith(f[1]))return void(this.history.stack[this.history.offset]=s({},t,{timestamp:l}))}}this.history.stack.push(s({},t,{timestamp:l})),this.history.offset++},_updateInput:function(t){var e=this.$refs.textarea;e&&(e.value=t.value,e.selectionStart=t.selectionStart,e.selectionEnd=t.selectionEnd,this.$emit("input",t.value))},handleChange:function(t){var e=t.target,i=e.value;this._recordChange({value:i,selectionStart:e.selectionStart,selectionEnd:e.selectionEnd},!0),this.$emit("input",i)},_undoEdit:function(){var t=this.history,e=t.offset,i=t.stack[e-1];i&&(this._updateInput(i),this.history.offset=Math.max(e-1,0))},_redoEdit:function(){var t=this.history,e=t.stack,i=t.offset,s=e[i+1];s&&(this._updateInput(s),this.history.offset=Math.min(i+1,e.length-1))},handleKeyDown:function(t){var e=this.tabSize,i=this.insertSpaces,s=this.ignoreTabKey;if(!this.$listeners.keydown||(this.$emit("keydown",t),!t.defaultPrevented)){27===t.keyCode&&(t.target.blur(),this.$emit("blur",t));var a=t.target,o=a.value,l=a.selectionStart,h=a.selectionEnd,u=(i?" ":"\t").repeat(e);if(9===t.keyCode&&!s&&this.capture)if(t.preventDefault(),t.shiftKey){var d=this._getLines(o,l),c=d.length-1,f=this._getLines(o,h).length-1,p=o.split("\n").map((function(t,e){return e>=c&&e<=f&&t.startsWith(u)?t.substring(u.length):t})).join("\n");o!==p&&this._applyEdits({value:p,selectionStart:d[c].startsWith(u)?l-u.length:l,selectionEnd:h-(o.length-p.length)})}else if(l!==h){var y=this._getLines(o,l),m=y.length-1,v=this._getLines(o,h).length-1,g=y[m];this._applyEdits({value:o.split("\n").map((function(t,e){return e>=m&&e<=v?u+t:t})).join("\n"),selectionStart:/\S/.test(g)?l+u.length:l,selectionEnd:h+u.length*(v-m+1)})}else{var b=l+u.length;this._applyEdits({value:o.substring(0,l)+u+o.substring(h),selectionStart:b,selectionEnd:b})}else if(8===t.keyCode){var _=l!==h;if(o.substring(0,l).endsWith(u)&&!_){t.preventDefault();var k=l-u.length;this._applyEdits({value:o.substring(0,l-u.length)+o.substring(h),selectionStart:k,selectionEnd:k})}}else if(13===t.keyCode){if(l===h){var C=this._getLines(o,l).pop(),E=null==C?void 0:C.match(/^\s+/);if(E&&E[0]){t.preventDefault();var S="\n"+E[0],K=l+S.length;this._applyEdits({value:o.substring(0,l)+S+o.substring(h),selectionStart:K,selectionEnd:K})}}}else if(57===t.keyCode||219===t.keyCode||222===t.keyCode||192===t.keyCode){var x;57===t.keyCode&&t.shiftKey?x=["(",")"]:219===t.keyCode?x=t.shiftKey?["{","}"]:["[","]"]:222===t.keyCode?x=t.shiftKey?['"','"']:["'","'"]:192!==t.keyCode||t.shiftKey||(x=["`","`"]),l!==h&&x&&(t.preventDefault(),this._applyEdits({value:o.substring(0,l)+x[0]+o.substring(l,h)+x[1]+o.substring(h),selectionStart:l,selectionEnd:h+2}))}else!(r?t.metaKey&&90===t.keyCode:t.ctrlKey&&90===t.keyCode)||t.shiftKey||t.altKey?(r?t.metaKey&&90===t.keyCode&&t.shiftKey:n?t.ctrlKey&&89===t.keyCode:t.ctrlKey&&90===t.keyCode&&t.shiftKey)&&!t.altKey?(t.preventDefault(),this._redoEdit()):77!==t.keyCode||!t.ctrlKey||r&&!t.shiftKey||(t.preventDefault(),this.capture=!this.capture):(t.preventDefault(),this._undoEdit())}}},render:function(t){var e=this,i=t("div",{attrs:{class:"prism-editor__line-width-calc",style:"height: 0px; visibility: hidden; pointer-events: none;"}},"999"),s=t("div",{staticClass:"prism-editor__line-numbers",style:{"min-height":this.lineNumbersHeight},attrs:{"aria-hidden":"true"}},[i,Array.from(Array(this.lineNumbersCount).keys()).map((function(e,i){return t("div",{attrs:{class:"prism-editor__line-number token comment"}},""+ ++i)}))]),n=t("textarea",{ref:"textarea",on:{input:this.handleChange,keydown:this.handleKeyDown,click:function(t){e.$emit("click",t)},keyup:function(t){e.$emit("keyup",t)},focus:function(t){e.$emit("focus",t)},blur:function(t){e.$emit("blur",t)}},staticClass:"prism-editor__textarea",class:{"prism-editor__textarea--empty":this.isEmpty},attrs:{spellCheck:"false",autocapitalize:"off",autocomplete:"off",autocorrect:"off","data-gramm":"false",placeholder:this.placeholder,"data-testid":"textarea",readonly:this.readonly},domProps:{value:this.codeData}}),r=t("pre",{ref:"pre",staticClass:"prism-editor__editor",attrs:{"data-testid":"preview"},domProps:{innerHTML:this.content}}),a=t("div",{staticClass:"prism-editor__container"},[n,r]);return t("div",{staticClass:"prism-editor-wrapper"},[this.lineNumbers&&s,a])}});t.PrismEditor=a,Object.defineProperty(t,"__esModule",{value:!0});let o=null;"undefined"!=typeof window?o=window.Vue:void 0!==i&&(o=i.Vue),o&&o.component("PrismEditor",a)}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],e):e((t=t||self).PrismEditor={},t.vue)}(this,(function(t,e){"use strict";var i=void 0!==typeof self?self:this;function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}var n="navigator"in i&&/Win/i.test(navigator.platform),r="navigator"in i&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),o=e.defineComponent({props:{lineNumbers:{type:Boolean,default:!1},autoStyleLineNumbers:{type:Boolean,default:!0},readonly:{type:Boolean,default:!1},modelValue:{type:String,default:""},highlight:{type:Function,required:!0},tabSize:{type:Number,default:2},insertSpaces:{type:Boolean,default:!0},ignoreTabKey:{type:Boolean,default:!1},placeholder:{type:String,default:""}},data:function(){return{capture:!0,history:{stack:[],offset:-1},lineNumbersHeight:"20px",codeData:""}},watch:{modelValue:{immediate:!0,handler:function(t){this.codeData=t||""}},content:{immediate:!0,handler:function(){var t=this;this.lineNumbers&&this.$nextTick((function(){t.setLineNumbersHeight()}))}},lineNumbers:function(){var t=this;this.$nextTick((function(){t.styleLineNumbers(),t.setLineNumbersHeight()}))}},computed:{isEmpty:function(){return 0===this.codeData.length},content:function(){return this.highlight(this.codeData)+"<br />"},lineNumbersCount:function(){return this.codeData.split(/\r\n|\n/).length}},mounted:function(){this._recordCurrentState(),this.styleLineNumbers()},methods:{setLineNumbersHeight:function(){this.lineNumbersHeight=getComputedStyle(this.$refs.pre).height},styleLineNumbers:function(){if(this.lineNumbers&&this.autoStyleLineNumbers){var t=this.$refs.pre,e=this.$el.querySelector(".prism-editor__line-numbers"),i=window.getComputedStyle(t);this.$nextTick((function(){var s="border-top-left-radius",n="border-bottom-left-radius";e&&(e.style[s]=i[s],e.style[n]=i[n],t.style[s]="0",t.style[n]="0",["background-color","margin-top","padding-top","font-family","font-size","line-height"].forEach((function(t){e.style[t]=i[t]})),e.style["margin-bottom"]="-"+i["padding-top"])}))}},_recordCurrentState:function(){var t=this.$refs.textarea;t&&this._recordChange({value:t.value,selectionStart:t.selectionStart,selectionEnd:t.selectionEnd})},_getLines:function(t,e){return t.substring(0,e).split("\n")},_applyEdits:function(t){var e=this.$refs.textarea,i=this.history.stack[this.history.offset];i&&e&&(this.history.stack[this.history.offset]=s({},i,{selectionStart:e.selectionStart,selectionEnd:e.selectionEnd})),this._recordChange(t),this._updateInput(t)},_recordChange:function(t,e){void 0===e&&(e=!1);var i=this.history,n=i.stack,r=i.offset;if(n.length&&r>-1){this.history.stack=n.slice(0,r+1);var o=this.history.stack.length;if(o>100){var a=o-100;this.history.stack=n.slice(a,o),this.history.offset=Math.max(this.history.offset-a,0)}}var l=Date.now();if(e){var h=this.history.stack[this.history.offset];if(h&&l-h.timestamp<3e3){var u,d,c=/[^a-z0-9]([a-z0-9]+)$/i,f=null===(u=this._getLines(h.value,h.selectionStart).pop())||void 0===u?void 0:u.match(c),p=null===(d=this._getLines(t.value,t.selectionStart).pop())||void 0===d?void 0:d.match(c);if(f&&p&&p[1].startsWith(f[1]))return void(this.history.stack[this.history.offset]=s({},t,{timestamp:l}))}}this.history.stack.push(s({},t,{timestamp:l})),this.history.offset++},_updateInput:function(t){var e=this.$refs.textarea;e&&(e.value=t.value,e.selectionStart=t.selectionStart,e.selectionEnd=t.selectionEnd,this.$emit("update:modelValue",t.value))},handleChange:function(t){var e=t.target,i=e.value;this._recordChange({value:i,selectionStart:e.selectionStart,selectionEnd:e.selectionEnd},!0),this.$emit("update:modelValue",i)},_undoEdit:function(){var t=this.history,e=t.offset,i=t.stack[e-1];i&&(this._updateInput(i),this.history.offset=Math.max(e-1,0))},_redoEdit:function(){var t=this.history,e=t.stack,i=t.offset,s=e[i+1];s&&(this._updateInput(s),this.history.offset=Math.min(i+1,e.length-1))},handleKeyDown:function(t){var e=this.tabSize,i=this.insertSpaces,s=this.ignoreTabKey;if(this.$emit("keydown",t),!t.defaultPrevented){27===t.keyCode&&(t.target.blur(),this.$emit("blur",t));var o=t.target,a=o.value,l=o.selectionStart,h=o.selectionEnd,u=(i?" ":"\t").repeat(e);if(9===t.keyCode&&!s&&this.capture)if(t.preventDefault(),t.shiftKey){var d=this._getLines(a,l),c=d.length-1,f=this._getLines(a,h).length-1,p=a.split("\n").map((function(t,e){return e>=c&&e<=f&&t.startsWith(u)?t.substring(u.length):t})).join("\n");a!==p&&this._applyEdits({value:p,selectionStart:d[c].startsWith(u)?l-u.length:l,selectionEnd:h-(a.length-p.length)})}else if(l!==h){var y=this._getLines(a,l),m=y.length-1,v=this._getLines(a,h).length-1,g=y[m];this._applyEdits({value:a.split("\n").map((function(t,e){return e>=m&&e<=v?u+t:t})).join("\n"),selectionStart:/\S/.test(g)?l+u.length:l,selectionEnd:h+u.length*(v-m+1)})}else{var b=l+u.length;this._applyEdits({value:a.substring(0,l)+u+a.substring(h),selectionStart:b,selectionEnd:b})}else if(8===t.keyCode){var _=l!==h;if(a.substring(0,l).endsWith(u)&&!_){t.preventDefault();var k=l-u.length;this._applyEdits({value:a.substring(0,l-u.length)+a.substring(h),selectionStart:k,selectionEnd:k})}}else if(13===t.keyCode){if(l===h){var C=this._getLines(a,l).pop(),E=null==C?void 0:C.match(/^\s+/);if(E&&E[0]){t.preventDefault();var S="\n"+E[0],K=l+S.length;this._applyEdits({value:a.substring(0,l)+S+a.substring(h),selectionStart:K,selectionEnd:K})}}}else if(57===t.keyCode||219===t.keyCode||222===t.keyCode||192===t.keyCode){var N;57===t.keyCode&&t.shiftKey?N=["(",")"]:219===t.keyCode?N=t.shiftKey?["{","}"]:["[","]"]:222===t.keyCode?N=t.shiftKey?['"','"']:["'","'"]:192!==t.keyCode||t.shiftKey||(N=["`","`"]),l!==h&&N&&(t.preventDefault(),this._applyEdits({value:a.substring(0,l)+N[0]+a.substring(l,h)+N[1]+a.substring(h),selectionStart:l,selectionEnd:h+2}))}else!(r?t.metaKey&&90===t.keyCode:t.ctrlKey&&90===t.keyCode)||t.shiftKey||t.altKey?(r?t.metaKey&&90===t.keyCode&&t.shiftKey:n?t.ctrlKey&&89===t.keyCode:t.ctrlKey&&90===t.keyCode&&t.shiftKey)&&!t.altKey?(t.preventDefault(),this._redoEdit()):77!==t.keyCode||!t.ctrlKey||r&&!t.shiftKey||(t.preventDefault(),this.capture=!this.capture):(t.preventDefault(),this._undoEdit())}}},render:function(){var t=this,i=e.h("div",{class:"prism-editor__line-width-calc",style:"height: 0px; visibility: hidden; pointer-events: none;"},"999"),s=e.h("div",{class:"prism-editor__line-numbers",style:{"min-height":this.lineNumbersHeight},"aria-hidden":"true"},[i,Array.from(Array(this.lineNumbersCount).keys()).map((function(t,i){return e.h("div",{attrs:{class:"prism-editor__line-number token comment"}},""+ ++i)}))]),n=e.h("textarea",{ref:"textarea",onInput:this.handleChange,onKeydown:this.handleKeyDown,onClick:function(e){t.$emit("click",e)},onKeyup:function(e){t.$emit("keyup",e)},onFocus:function(e){t.$emit("focus",e)},onBlur:function(e){t.$emit("blur",e)},class:{"prism-editor__textarea":!0,"prism-editor__textarea--empty":this.isEmpty},spellCheck:"false",autocapitalize:"off",autocomplete:"off",autocorrect:"off","data-gramm":"false",placeholder:this.placeholder,"data-testid":"textarea",readonly:this.readonly,value:this.codeData}),r=e.h("pre",{ref:"pre",class:"prism-editor__editor","data-testid":"preview",innerHTML:this.content}),o=e.h("div",{class:"prism-editor__container"},[n,r]);return e.h("div",{class:"prism-editor-wrapper"},[this.lineNumbers&&s,o])}});t.PrismEditor=o,Object.defineProperty(t,"__esModule",{value:!0});let a=null;"undefined"!=typeof window?a=window.Vue:void 0!==i&&(a=i.Vue),a&&a.component("PrismEditor",o)}));
 //# sourceMappingURL=prismeditor.umd.production.min.js.map

package.json

 {
   "name": "vue-prism-editor",
-  "version": "1.2.2",
+  "version": "2.0.0-alpha.0",
   "description": "A dead simple code editor with syntax highlighting and line numbers.",
@@ -44,3 +44,3 @@ "author": {
     "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/vue": "^5.0.4",
+    "@testing-library/vue": "^5.1.0",
     "@types/prismjs": "^1.16.1",
@@ -54,6 +54,7 @@ "@vue/cli-plugin-unit-jest": "^4.4.4",
     "typescript": "^3.9.3",
+    "vue": "^3.0.0",
     "vue-jest": "^3.0.5"
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+    "vue": "^3.0.0"
   },
@@ -60,0 +61,0 @@ "dependencies": {},

src/Editor.ts

@@ -1,2 +0,3 @@
-import Vue, { VNode } from 'vue';
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { defineComponent, h } from 'vue';
 
@@ -44,3 +45,3 @@ import './styles.css';
 
-export const PrismEditor = Vue.extend({
+export const PrismEditor = defineComponent({
   props: {
@@ -59,3 +60,3 @@ lineNumbers: {
     },
-    value: {
+    modelValue: {
       type: String,
@@ -97,3 +98,3 @@ default: '',
   watch: {
-    value: {
+    modelValue: {
       immediate: true,
@@ -267,3 +268,3 @@ handler(newVal: string): void {
 
-      this.$emit('input', record.value);
+      this.$emit('update:modelValue', record.value);
       // this.props.onValueChange(record.value);
@@ -282,3 +283,3 @@ },
       );
-      this.$emit('input', value);
+      this.$emit('update:modelValue', value);
       // this.props.onValueChange(value);
@@ -314,9 +315,7 @@ },
 
-      if (this.$listeners.keydown) {
-        // onKeyDown(e);
-        this.$emit('keydown', e);
+      // onKeyDown(e);
+      this.$emit('keydown', e);
 
-        if (e.defaultPrevented) {
-          return;
-        }
+      if (e.defaultPrevented) {
+        return;
       }
@@ -521,10 +520,8 @@
   },
-  render(h): VNode {
+  render() {
     const lineNumberWidthCalculator = h(
       'div',
       {
-        attrs: {
-          class: 'prism-editor__line-width-calc',
-          style: 'height: 0px; visibility: hidden; pointer-events: none;',
-        },
+        class: 'prism-editor__line-width-calc',
+        style: 'height: 0px; visibility: hidden; pointer-events: none;',
       },
@@ -536,9 +533,7 @@ '999'
       {
-        staticClass: 'prism-editor__line-numbers',
+        class: 'prism-editor__line-numbers',
         style: {
           'min-height': this.lineNumbersHeight,
         },
-        attrs: {
-          'aria-hidden': 'true',
-        },
+        'aria-hidden': 'true',
       },
@@ -555,49 +550,39 @@ [
       ref: 'textarea',
-      on: {
-        input: this.handleChange,
-        keydown: this.handleKeyDown,
-        click: ($event: MouseEvent) => {
-          this.$emit('click', $event);
-        },
-        keyup: ($event: KeyboardEvent) => {
-          this.$emit('keyup', $event);
-        },
-        focus: ($event: FocusEvent) => {
-          this.$emit('focus', $event);
-        },
-        blur: ($event: FocusEvent) => {
-          this.$emit('blur', $event);
-        },
+      onInput: this.handleChange,
+      onKeydown: this.handleKeyDown,
+      onClick: ($event: MouseEvent) => {
+        this.$emit('click', $event);
       },
-      staticClass: 'prism-editor__textarea',
+      onKeyup: ($event: KeyboardEvent) => {
+        this.$emit('keyup', $event);
+      },
+      onFocus: ($event: FocusEvent) => {
+        this.$emit('focus', $event);
+      },
+      onBlur: ($event: FocusEvent) => {
+        this.$emit('blur', $event);
+      },
       class: {
+        'prism-editor__textarea': true,
         'prism-editor__textarea--empty': this.isEmpty,
       },
-      attrs: {
-        spellCheck: 'false',
-        autocapitalize: 'off',
-        autocomplete: 'off',
-        autocorrect: 'off',
-        'data-gramm': 'false',
-        placeholder: this.placeholder,
-        'data-testid': 'textarea',
-        readonly: this.readonly,
-      },
-      domProps: {
-        value: this.codeData,
-      },
+      spellCheck: 'false',
+      autocapitalize: 'off',
+      autocomplete: 'off',
+      autocorrect: 'off',
+      'data-gramm': 'false',
+      placeholder: this.placeholder,
+      'data-testid': 'textarea',
+      readonly: this.readonly,
+      value: this.codeData,
     });
     const preview = h('pre', {
       ref: 'pre',
-      staticClass: 'prism-editor__editor',
-      attrs: {
-        'data-testid': 'preview',
-      },
-      domProps: {
-        innerHTML: this.content,
-      },
+      class: 'prism-editor__editor',
+      'data-testid': 'preview',
+      innerHTML: this.content,
     });
-    const editorContainer = h('div', { staticClass: 'prism-editor__container' }, [textarea, preview]);
-    return h('div', { staticClass: 'prism-editor-wrapper' }, [this.lineNumbers && lineNumbers, editorContainer]);
+    const editorContainer = h('div', { class: 'prism-editor__container' }, [textarea, preview]);
+    return h('div', { class: 'prism-editor-wrapper' }, [this.lineNumbers && lineNumbers, editorContainer]);
   },
 });

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

270269

decreased by-0.88%

Dev dependency count

12

increased by9.09%

Lines of code

2233

decreased by-1.11%

Number of low quality alerts

3

increased by50%

No dependency changes