hl037 / vue-contenteditable

This plugin provides a `<contenteditable/>` element supporting `v-model`. It also provides some (optional) features, like preventing html input / paste or new lines.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

its better to use ` :noHtml :noNl`, instead of `:noHTML :noNL`

scil opened this issue · comments

commented

like this:

        <contenteditable tag="span" 
                         style="padding: 2px;" 
                         v-model="item.title"
                         :no-NL="true" />

otherwize, vue dev report sth like vue camelCased props need to use their kebab-case equivalents when using in-DOM templates

///////////////////////
// update 2021.12.01
////////////////////////

Now i can use :no-nl in html web page

        <contenteditable tag="div"  v-model="comments" :no-nl="false" :no-html="true" />

because I open node_modules\vue-contenteditable\dist\contenteditable.umd.js then replace noHTML with noHtml, replace noNL with noNl.
then run npx patch-package vue-contenteditable to save the patch.

It would even be :no-n-l then...

I think it's not really a huge problem, and anyway, it's only a documentation point... I guess you are free to do as you want.

Since it was :noNL from the start and there are many downloads on npm, I don't feel confident about introducing a breaking change. (because it should be renamed noNl to get :no-nl.

As long as it's just a warning (except for in-dom template... but in this case the dash way will work), I would stay with it.

commented

this is my patch file from npx patch-package vue-contenteditable

diff --git a/node_modules/vue-contenteditable/dist/contenteditable.umd.js b/node_modules/vue-contenteditable/dist/contenteditable.umd.js
index ab8ed47..a72d0e8 100644
--- a/node_modules/vue-contenteditable/dist/contenteditable.umd.js
+++ b/node_modules/vue-contenteditable/dist/contenteditable.umd.js
@@ -69,11 +69,11 @@
         default : true,
       },
       'value' : String,
-      'noHTML' : {
+      'noHtml' : {
         type : Boolean,
         default : true,
       },
-      'noNL' : {
+      'noNl' : {
         type : Boolean,
         default : false,
       },
@@ -89,13 +89,13 @@
     },
     methods : {
       current_content: function current_content(){
-        return this.noHTML ? 
+        return this.noHtml ? 
           this.$refs.element.innerText
           :
           this.$refs.element.innerHTML;
       },
       update_content: function update_content(newcontent){
-        if(this.noHTML) {
+        if(this.noHtml) {
           this.$refs.element.innerText = newcontent;
         }
         else {
@@ -108,7 +108,7 @@
       onPaste: function onPaste(event) {
         event.preventDefault();
         var text = (event.originalEvent || event).clipboardData.getData('text/plain');
-        if(this.noNL) {
+        if(this.noNl) {
           text = replaceAll(text, '\r\n', ' ');
           text = replaceAll(text, '\n', ' ');
           text = replaceAll(text, '\r', ' ');
@@ -117,7 +117,7 @@
         this.fwdEv(event);
       },
       onKeypress: function onKeypress(event) {
-        if(event.key == 'Enter' && this.noNL) {
+        if(event.key == 'Enter' && this.noNl) {
           event.preventDefault();
           this.$emit('returned', this.current_content);
         }

@scil
I changed it on version 4.0.2, it's now :noHtml and :noNl so that you can use no-html and no-nl, as you suggested. enjoy ! =)