jackadams / meteor-editable-text Goto Github PK

I get this error when using the editable text widget in either textarea or wysiwyg mode. It seems to be generated by the EditableText.drillDown method, which receives an undefined value for the data context. I'm passing the document in to the template as its context parameter.

Despite the error the widget seems to work properly though. Am I doing something wrong?

Here's a MeteorPad with the error: http://meteorpad.com/pad/GKiMvvKWCTMnni6Qg/EditableTest

I have a collection as follows in my Meteor app

{ "_id" : ObjectId("55943a2488bde2cc2ea084c7"), "adminId" : "ZuSzdGWxixaePMWyB",
"details" : [ { "header" : "h1", "body" : "b1" }, { "header" : "h2", "body" : "
b2" } ], "test" : "tes" }

I need to show all the headers and bodies of details section in one page. My HTML looks as follows.

{{> editableText collection="CollegeProfiles" field="header" removeEmpty=true placeholder="title" substitute=''}

My js looks as follows...
Template.admin_profile.helpers ({
profileDetails : function() {
var doc_profile = CollegeProfilesCollection.findOne({adminId:Meteor.userId()});
if(doc_profile)
{
return doc_profile.details;
}

}

});

I am able to view the headers, but when I edit , it does not updates. Could you help.

Hi,

it would be awesome to be able to set useMethods to true or false on a per widget basis.

What are you thoughts on this?

My rationale is that I don't really like the duplication of security logic that comes with having to maintain allow/deny rules AND server-side rules simultaneously.
For this reason, I'm running with allow/deny rules (specifically ongoworks:security) only and have useMethods = false per default.

However, in some cases where I need more control, it would be great to set useMethods to true for just one widget, or maybe even pass a meteor method name like autoform does?

First and foremost, thank you for this great package!

Is there currently any way to make the editable-text widget work with an array of subdocuments?

Specifically, I have an array of comments that are stored on an object like so:

"comments" : [ 
        {
            "createdAt" : ISODate("2015-03-27T14:24:47.087Z"),
            "createdBy" : "PKgGc6kfJeik2BASM",
            "privacy" : "Public",
            "text" : "heyho buddies!",
            "id" : "Wd2YTRF6Mpoz9RaAa"
        }, 
        {
            "createdAt" : ISODate("2015-03-27T14:24:57.419Z"),
            "createdBy" : "CYTYJXMWCZ8PavMxk",
            "privacy" : "Public",
            "text" : "Yoho Test!",
            "id" : "XffaMTGPwP4YQRp5o"
        }
    ],

...and I would like to add {{> editableText}} widgets for the text of every comment on the parent collection.

Maybe there should be a seperate "emptyText" field to display something when the user cannot edit, and the field is blank; because having a "new post" pencil icon when users cannot actually add a new post or text is a bit confusing.

I would submit a pull request for this, but the widget is a bit gnarly and I could just wrap it in my client code if it's not a feature you'd like to include

https://atmospherejs.com/meteor/audit-argument-checks reports a missing check at least here:

I20150201-13:44:52.311(1)? Exception while invoking method '_editableTextWrite' Error: Did not    check() all arguments during call to '_editableTextWrite'

Thx for this great package!

Hi, I'm trying to prevent from editing without owner's permission.
I have added this function, and works alright.

EditableText.userCanEdit = function(doc,Collection) {
  return this.context.user_id === Meteor.userId(); // same as: doc.user_id === Meteor.userId();
}

But whenever I click the new post or new comment button, it doesn't do anything, is there anything I missed? Thank for helping!

I have a callback name updateTimeStamp. The EditableText.registerCallbacks block of code save under a file call EditableText.js`` located atclient/lib/config```.

When i use the updateTimeStamp on afterUpdate="updateTimeStamp", the console show below error message
Could not execute callback. Reason: no callback function called "updateTimeStamp" has been registered via EditableText.registerCallbacks.

It seem like the callback doesn't registered. Anyway to fix this issue?

Hi there,

first of all thank you very much for the great package. However, I am finding it difficult to implementing this in an each loop. Pardon my tardy post but I am not familiar with posting on git.

I am trying to use editable text in an array of objects deep inside of Meteor.user().profile and its structure is as follows:

"details" : [
{
"_id" : "2ewr5C8rzRgamvisH",
"quantity" : 1
},
{
"_id" : "5EMP9S8oeHLxP2rMC",
"quantity" : 1
},
]

html:

{{#each details}}
{{#with currentUser}}
{{> editableText collection="users" field="quantity" context=parent type="number"}}
{{/with}}
{{/each}}

js:

parent:function(){
return Template.parentData();
}

Currently, I am able to display the data correctly. However, it is not 'editing' the value. Do you know what I doing wrong and what can I do?

Thank you very much in advance for reading this.

I am using CFS (https://github.com/CollectionFS/Meteor-CollectionFS) for file storage and want to use editable-text to edit the embedded document within the collection. Seems like the package is not targeted at this use case, but doesn't seem like it would be too difficult to modify. This is my template call I am using to show / edit the file's title which is stored in meta.title

<h1>{{> editableText collection='cfs.media.filerecord' field='meta.title'}}</h1>

It shows the item properly, but is failing a Method check():

Exception while invoking method '_editableTextWrite' Error: Match error: Expected plain object
I20150119-15:31:36.362(-5)?     at checkSubtree (packages/check/match.js:279:1)
I20150119-15:31:36.363(-5)?     at check (packages/check/match.js:32:1)
I20150119-15:31:36.363(-5)?     at [object Object].Meteor.methods._editableTextWrite (packages/babrahams:editable-text/lib/editable_text_common.js:154:1)

As #49 : this.oldValue is always undefined regardless of using beforeUpdate or afterUpdate.

EditableText.registerCallbacks({
  beNumeric: function(){
    console.log(this.oldValue);
    console.log(this.newValue);
  }
});

results in:

I20150922-16:53:47.511(1)? undefined
I20150922-16:53:47.511(1)? 12

Here's how I'm triggering the callback:

<td>
  {{> editableText inputStyle="inStyle" beforeUpdate="beNumeric" type="number" collection="funnyfolks" field="jokes.read.aloud.times"}}
</td>

I'm using 0.8.4 and I know you said this was fixed but it seems not to be. Am I missing something?

I need to do some data validation on a few fields on set up a callback to check before & after values. Trouble is, this.oldValue seems to have been removed. Maybe it's only available on certain callback hooks, or maybe it's been superceded - please let us know.

Or - is there a recommended method of data validation and I'm trying to reinvent the wheel here?

Awesome work BTW.

Exception while simulating the effect of invoking '_editableTextWrite' TypeError: Cannot read property 'simpleSchema' of undefined {stack: (...), message: "Cannot read property 'simpleSchema' of undefined"} TypeError: Cannot read property 'simpleSchema' of undefined
at Meteor.methods._editableTextWrite (http://localhost:3000/packages/babrahams_editable-text.js?07c4e9224552dff65d6bf4ebcbe46ff408cd5770:840:96)
at http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:4269:25
at _.extend.withValue (http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:955:17)
at _.extend.apply (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:4260:54)
at _groundUtil.Connection.apply (http://localhost:3000/packages/ground_db.js?02d5a5d038e85d67206767bd48d08764a8c94da1:998:31)
at _.extend.call (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:4138:17)
at Object.EditableText.update (http://localhost:3000/packages/babrahams_editable-text.js?07c4e9224552dff65d6bf4ebcbe46ff408cd5770:333:12)
at Object.EditableText._makeUpdate (http://localhost:3000/packages/babrahams_editable-text.js?07c4e9224552dff65d6bf4ebcbe46ff408cd5770:499:27)
at Object.EditableText.okCancelEvents.ok (http://localhost:3000/packages/babrahams_editable-text.js?07c4e9224552dff65d6bf4ebcbe46ff408cd5770:597:28)
at Object.EditableText._okCancelEvents.events.(anonymous function) (http://localhost:3000/packages/babrahams_editable-text.js?07c4e9224552dff65d6bf4ebcbe46ff408cd5770:432:16)
editable_text.js:77

Meteor.makeErrorType.errorClass {error: 500, reason: "Internal server error", details: undefined, message: "Internal server error [500]", errorType: "Meteor.Error"…}

Hello,
When using meteor-editable-text and entering text data into a {{editable-text ...}} template field that includes text that is "escapeable" (e.g. ampersand, etc.), the characters are getting .escape()'d and displayed .unescape()'d. For example, "chicken & rice" is displaying during edit mode as a "chicken & rice", and in non-edit mode as "chicken & rice". Shouldn't the character display normally in both modes?
Thanks for your input!
Stan

A field from my doc needs to be converted to a new format before being displayed, then converted back to its original format after it is updated.

I am trying to use the following
{{> editableText collection="deals" field="signDate" value=signDateInNewFormat editingValue=signDateInNewFormat acceptEmpty=true beforeUpdate="storeInOrigFormat"}}

When I use the above in my template the doc field is converted to my new format while being displayed and edited, but the beforeUpdate hook does not seem to work correctly. The function I specify is called, but newValue is always null. If I use this.newValue in its place, then the converted newValue, when returned, is ignored anyway.

Using the parameter editingValue, or leaving it out also seems to make no difference, and I'm not even sure if it is required.

Whenever I try setting EditableText.useMethods to false, I get the following error on any attempted field update:

 Uncaught TypeError: Cannot read property '0' of undefined   editable_text.js:97 
 EditableText.update    editable_text.js:241
 EditableText._makeUpdate   editable_text.js:356
 EditableText.okCancelEvents.ok editable_text.js:174
 EditableText._okCancelEvents.events.(anonymous function)   template.js:278
 (anonymous function)   view.js:760
 (anonymous function)   view.js:414
 Blaze._withCurrentView view.js:759
 (anonymous function)   events.js:47
 (anonymous function)   jquery.js:4665
 jQuery.event.dispatch  jquery.js:4333
 jQuery.event.add.elemData.handle

Can you reproduce?

Happy to help debugging with all I can here.

I forked Leaderboard example from MeteorPad:

http://meteorpad.com/pad/7WTXgLi5awBdGT7gu/Copy%20of%20Leaderboard

I've made the Score column editable using meteor-editable-text.

When I go and edit a player's score, it does not update the database. The old Score value is still shown for the player.

What have I done wrong?

Trying my best to replicate here:

Basically, I think I'm misunderstanding something basic about how to register callbacks.
As far as I understand I just need to write a callback function in my javascript like

EditableText.registerCallbacks({
  test : function() {
    console.log("test");
  }
});

and call it in my html like

{{> editableText collection="posts" field="message" placeholder="Post message" removeEmpty=true afterUpdate="test" wysiwyg=true substitute='<i class="fa fa-pencil"></i>'}}

On meteorpad it silently fails, but in my app I get the following error :

errorClass {error: "Could not execute callback. Reason: no callback fu…en registered via EditableText.registerCallbacks.", reason: undefined, details: undefined, message: "[Could not execute callback. Reason: no callback f…n registered via EditableText.registerCallbacks.]", errorType: "Meteor.Error"…}
details: undefined
error: "Could not execute callback. Reason: no callback function called "test" has been registered via      EditableText.registerCallbacks."
errorType: "Meteor.Error"
message: "[Could not execute callback. Reason: no callback function called "test" has been registered via EditableText.registerCallbacks.]"
reason: undefined

http://meteorpad.com/pad/aaZjjWaqYqz6eramZ/Copy%20of%20Editable%20Test%202%20(1)

I have the following in a template

{{> editableText collection="contacts" field="firstName" acceptEmpty=true beforeUpdate="addUpdateDate"}}

And in my lib folder where I define the contacts collection i have

EditableText.registerCallbacks(
{
addUpdateDate: function(doc) { return _.extend(doc,{updated: new Date()}); }
});

When I click to edit the editable field it works, and the doc is updated with the new contact firstName, but the 'updated' field is not updated. I can't determine why the updated field is not saved when the doc is updated.

I looked at doc within the addUpdateDate function and the function is triggered, and updated is indeed being set in doc to the current time. But after the update, the new time is not in the doc - it does not get modified by the update.

I should point out I am also using Collection2; and updated, as well as a few other fields are required fields, but they do show up if I look at doc in above the callback.

Also, not really related, but in the callback, is it really required that I return doc, as I am doing, since extend updates the doc object in-place anyway.

I'm getting an error when editing a field, which I suspect is related to the Astronomy package (https://github.com/jagi/meteor-astronomy), as it changes the collection into a class, possibly? I'm not really sure, let me know if you have any ideas.

Exception while simulating the effect of invoking '_editableTextWrite' M…r.m…e.errorClass {message: "Match error: Expected plain object", path: "", sanitizedError: M…r.m…e.errorClass, errorType: "Match.Error"} Error: Match error: Expected plain object at checkSubtree (http://localhost:3000/packages/check.js?ac81167b8513b85b926c167bba423981b0c4cf9c:314:11) at check (http://localhost:3000/packages/check.js?ac81167b8513b85b926c167bba423981b0c4cf9c:67:5) at Meteor.methods._editableTextWrite (http://localhost:3000/packages/babrahams_editable-text.js?187254c172a9dfe0c1a79510d9302ede8f2ac602:850:96) at http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:4269:25 at _.extend.withValue (http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:955:17) at _.extend.apply (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:4260:54) at _.extend.call (http://localhost:3000/packages/ddp.js?d1840d3ba04c65ffade261f362e26699b7509706:4138:17) at Object.EditableText.update (http://localhost:3000/packages/babrahams_editable-text.js?187254c172a9dfe0c1a79510d9302ede8f2ac602:338:12) at Object.EditableText._makeUpdate (http://localhost:3000/packages/babrahams_editable-text.js?187254c172a9dfe0c1a79510d9302ede8f2ac602:511:27) at Object.EditableText.okCancelEvents.ok (http://localhost:3000/packages/babrahams_editable-text.js?187254c172a9dfe0c1a79510d9302ede8f2ac602:611:28)

Hello,

I'm using a callback for data validation on this.newValue, but nested fields are a problem with $set.

Here's the editable field

<td>
  {{> editableText inputStyle="inStyle" beforeUpdate="beNumeric" type="number" collection="funnyfolks" field="jokes.read.aloud.times"}}
</td>

Here's the callback;

EditableText.registerCallbacks({
  beNumeric: function(doc){
    console.log("old value: " + this.oldValue);
    console.log("new value: " + this.newValue);
    if(this.newValue>100){
      //value exceeds max so set it
      var f = this.field;
      var obj = {};
      obj[f] = 100
      return _.extend(doc,{$set:obj});
    }
    else{
      return doc;
    }
  }
});

When a value greater than some predetermined value (in this case 100) is set then the callback should set this.field to the max value allowed.

But the document field does not get updated.

We have some editable text on our screen (without wysiwyg). On the first click event, the text becomes editable by inserting an input field, with all text selected. When I click a second time, with the expectation of placing a text cursor in a specific location within the text, the input field is removed.

E.g. I have the text 'editble' displayed in a paragraph on the page, which needs an "a" between "t" and "b". When I click the 'editable' paragraph, the input field appears, with all text selected. I then click between "t" and "b", so that I can add the correct letter "a" within the string. The result of the click removes the editable text area.

How can users place a text cursor in a specific location within an editable input field?

Do I miss something or is there currently no way for a executed registered callback on update to know what changed?

Something like oldvalue / newvalue.

First of thanks for this widget. It made my work very simple, and made it very easy to implement features that I wouldn't have added other wise.

Before commit e06d0b5
There used to be a status object which included the error details in the ''this'' in afterUpdate hook, using which I used to display the error.

EditableText.registerCallbacks({
  validateProfileUpdate: function (doc) {
    console.log(this)
    var errors = {}
    if (this.status.error) {
      errors[this.field] = this.status.error.message
      Session.set('userProfileUpdateErrors', errors)
      // $('span.et-YzJr8BEAKfm2kvwhQ').click()
      var selector = '.'+this.class
      //var inputSelector = '.'+this.inputClass
      var newValue = this.newValue
      setTimeout(function () {
        $(selector).click()
        $(selector).val(newValue)
      }, 0);
    } else {
      errors[this.field] = null
      Session.set('userProfileUpdateErrors', errors)
    }

  }
});

Since the change on September 8th, there is no status object. Is it a bug?
If not what is the alternate?

1

on http://editable-text-demo.meteor.com/

underlining text doesn't stay underlined after saving.

after making text a superscript or subscript there is no way to return it to a regular size.

Thanks!

is there a way to define multiple userCanEdit function like "myCompany" for Company collection, and "myAccount" for Account collection.

Examples:

{{> editableText userCanEdit=myCompany collection="Company" field="textField" wysiwyg=true}}

{{> editableText userCanEdit=myAccount collection="Account" field="textField" wysiwyg=true}}

This code doesn't update the profile.city field:
{{> editableText collection="Meteor.users" field="profile.city" userCanEdit=userEditProfile}}

I have not made any changes to allow/deny rules for user profiles. Any idea how to solve this?

I'm using MaterializeCSS and want to use the datepicker class on an editable text input but when setting the inputClass="datepicker" nothing happens. I have the javascript already included for the datepicker to work but it seems the inputClass is not working.

{{> editableText collection="users" field="profile.birthday" acceptEmpty=true inputClass="datepicker" type="date"}}

{{> editableText collection="posts" field="body" afterUpdate="logIt"}}
is working in version 0.7.7 but NOT working in version 0.7.11

packages list
working: http://prntscr.com/69zbjo
NOT working (after meteor update): http://prntscr.com/69zboq

the code remains the same, just updated the package,
I used your example editable-text-demo for this test, latest meteor

I followed the doc and mousein doesn't work and the mouseover or mouseenter don't work either!
Hope to fix this!

Hi, first of all thanks for this project. I like it a lot.

I would like to say that I am trying to port the project to semantic-ui. I have rewritten the html file (if you want I can post it here so you can see it) and add some code:

Template.wysiwyg.rendered = ->
  $('.ui.dropdown').dropdown()

Template.wysiwyg.events
  'mousedown .ui.dropdown': (e,t)->
    e.preventDefault()

I was wondering if I should take care of something especial or if it's essentially modify the html (I still have some problems I hope to resolve soon).

I've tried everything I can think of. Specifically, I want the user to enter some dollar figure, and in the end, I want to to use the accounting package, formatMoney method, to make sure in the end the user ends up with a nicely-formatted currency.

But I cannot even make the input change to 'foo', let alone a formatted currency.

When i try align center and then focus out text remains unchanged.
You can see it in this example http://editable-text.meteor.com/

Thanks for all your help on this.

As mentioned elsewhere, my data is a numeric field. When not editing I call a helper that adds thousands separators, commas, to the number. When editing I display it as the original numeric value without commas. It is the edited numeric value (also numeric) that gets stored back into the db. This work great using the following.

{{> editableText collection="deals" field="cap" value=capH editingValue=cap acceptEmpty=true}}

But even with the latest changes I notice a small issue. If I click on a value such as 99 then click out without editing, it correctly recognizes that the data has not been changed. But if I click on a value such as 1000 (displayed before editing as 1,000 and during editing as 1000) then click out without editing, it thinks it has been changed.

I suspect something in the logic is noticing that the display value is non-numeric which is triggering a change, even though the editingValue and what is sotred in the db is actually numeric. Perhaps the logic should be looking at editingValue not value to determine the type of the db value?

Most of the fields that I want to make editable have existing helpers that do minimal transformations on the data when displayed on the page. For example, in my application, several of the numeric fields are displayed using helpers such as the following

numHelper: function() { return this.num.toLocaleString(); } // which adds commas

I would like to format my number when being displayed using the above helper, but display the number without formatting while editing. Is that possible?

Hi,

I have a workaround already for this but I think the afterUpdate / afterInsert callback doesn't work as expected. I've assigned a callback for both afterUpdate and afterInsert as follows:

afterUpdate="generateLabels"

In the callback the document received is the one prior editing and not the one after the edit i.e. the one which has been introduced in the database. I have checked using the code below

EditableText.registerCallbacks({
    generateLabels: function(ideaDoc) {
        console.log (ideaDoc.title);
        console.log (Ideas.findOne({_id: ideaDoc._id}).title);
    }
});

Is there a way to set global setting to configure htmlSantizer option like allowTags & allowAttributes.

What about using something like parseFloat instead of parseInt?

Uncaught RangeError: Maximum call stack size exceededjQuery.event.dispatch @ jquery.js:4633jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333jQuery.event.trigger @ jquery.js:4574(anonymous function) @ jquery.js:5284jQuery.extend.each @ jquery.js:384jQuery.fn.jQuery.each @ jquery.js:136jQuery.fn.extend.trigger @ jquery.js:5283Blaze.body.events.click .editable-text-trigger, mousedown .editable-text-trigger, dblclick .editable-text-trigger @ babrahams_editable-text.js?f6db1a3230ee128b81360db67020b6b09716a20f:593(anonymous function) @ lib.js:21jQuery.event.dispatch @ jquery.js:4665jQuery.event.add.elemData.handle @ jquery.js:4333

Hi, when I'm editing a field and click AltGr to introduce a special character (e.g. # or @ in Spanish keyboard) the edit cancels and I cannot introduce the character. I think it has to do with the okCancelEvents but I don't know how to solve it.

Any suggestion on how could I overcome this problem?

Hi,

I would like to use typeahead (https://atmospherejs.com/sergeyt/typeahead) along with meteor-editable-text. Do you think is feasible? Have you tried something similar?

I have look at it but I don't know how to integrate meteor-editable-text syntax with the one on typeahead

<input class="form-control typeahead" name="team" type="text"
       placeholder="NBA and NHL teams"
       autocomplete="off" spellcheck="off"
       data-sets="teams"/>

Thanks

Three requests:

1. I want to hook in further functionality, like conditional formatting, while editing.
2. I'd also like to hook into when wysiwyg is toggled.
3. I'd like to be able to focus on my field in edit mode after create

What's the best way to do these? If there isn't one I'd like to request it. Thanks!

What is the recommended way of handling date strings as editable text?

I have several fields in my schema that are defined as Dates. The format of the date fields is, for example,
2015 Sep 15
If I use standard inserts and updates through methods, I am getting the results I am looking for - actual dates are (with local timezone portion) passed to the server.

But I assume that if I use editable-text features that what is being sent is actually a string with no timezone indicator, which gets interpreted at the server as using the server's timezone instead. Is this what is happening?

How can I ensure that Date strings changed through editable text are interpreted with the local timezone on both submission and display?

I tried to use the userCanEdit option with a helper function that checks if the current User has a role with the necessary rights. After that didn't work I tested the option like this:

{{> editableText userCanEdit=false collection="myCollection" field="textField" doc=currentDocument wysiwyg=true}}

and I was still able to edit the text. Am I not seeing or understanding something?
I would be grateful for help.

Thank you for this great package. Helped me a lot!

Hi all,

I am attempting to use editable-text to allow users to change the title of a "stream" (chat room). When clicked, the text turns into an input box as expected, but if the text is edited, I get this stack trace upon losing focus (or enter being pressed) and the input field does not revert to plain text. There is no error if the text is not edited, and the input field does revert.

Uncaught RangeError: Maximum call stack size exceeded     ejson.js:455
EJSON.clone                                               ejson.js:455
(anonymous function)                                      ejson.js:494
_.each._.forEach                                     underscore.js:113 

Those last three calls are repeated over and over. What is causing this recursive loop?

For reference, here is the Jade template:

template(name='messagesList')
  #messages
    h1
      +editableText(collection='streams' field='name')
    each messages
      +message

I am using the following versions:

babrahams:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

You can see the issue for yourself by going to my beta app, creating an account, creating a stream (using the text field on the left panel), and then clicking on the title 'New stream'.

Please let me know if there's any other helpful information I can provide.

What about have a possibility (by e.g. buttonclick) to set a webpage in "edit" mode, so that all editable-text fields turn into inputs.

With that, you could easily navigate by tab key between the fields.
After that you can press a "save button" (like it is for textarea) to bulk-save those fields.

Hello,

I tested your example http://editable-text.meteor.com/ on IE11 with IE9, IE10 and Edge compatibility modes and I couldn't give an URL in

<input class="span2" type="text" data-edit="createLink" placeholder="URL">

Taken from a comment by @rogchap in #25:

I have all my collections created in a local package (which is shared across multiple meteor apps), therefore dburles:mongo-collection-instances (which is used by this package) has no affect on my collections, causing the above/similar error when calling Mongo.Collection.get(<collection-name>).

Simple fix: add mongo-collection-instances to my local package's package.json:

api.use('dburles:mongo-collection-instances');

if the field I want is in a cell in a table, I would like to be able to click to edit the cell, even if the cell content is empty