Editable text boxes cleanup

[farley13]

There are a few issues here:

1. Instead of always using textboxes styled to look like paragraphs - we should use actual paragraph tags. Ideally these would switch when you click on a paragraph tag and you have permission to edit. Otherwise if they are only set when you have permission to edit - that will likely be enough
2. If we can't do a switch when you click to edit - we should ensure the styling for textbox is applied in the initial load, not just by javascript on page load. currently you can briefly see the scrollsbars pop in and then disappear.

Given 1 and 2 - we shouldn't be able to edit text when we don't have permissions as you can currently (though can't save obviously).

[farley13]

@akarasev - so still seeing a few issues here -

1. we should apply the auto-expand code when the text editor is made visible - currently if the h3 for instances goes onto more than one line - it can look like it's just disappears when you go to edit it. You can only see one line at a time as a result. The auto-expand code is the thing that would increase the size of the textbox when you hit enter in the old version of this code.
2. The styling seems to change on text between the two kinds - this is minor - but ideally the two have almost the same css classes
3. It's not possible to add new lines to the final paragraph - doing something like

"My first paragraph

my second paragraph"

is rendered as <p> My first paragraph my second paragraph </p> - I think we should render it as either `

My first paragraph

my second paragraph

` or `

My first paragraph

my second paragraph

` 4. It looks like the text is still editable when you are logged out - I logged in, made some changes. Logged out and when visiting that article, still was able to edit the text.

[akarasev]

Instead of developing custom code to fix those issues, I have used a plugin X-editable. This approach works much better.

[farley13]

@akarasev - this is looking much better - I think 2 could still use a cleanup - maybe we can increase the size of the text in the editor via CSS?

[farley13]

@akarasev - I also see the same text being used when I switch back and forth between slides - and it doesn't look like it's saving the text... :(

[akarasev]

I can't save the article with two section. I have an error:

db_1      | STATEMENT:  update "article_sections" set "name" = $1, "display_order" = $2 where "article_sections"."id" = 1
web_1     | 03:48:36 [error] application - Unknown error
web_1     | org.postgresql.util.PSQLException: ERROR: duplicate key value violates unique constraint "article_sections_name_article_id_key"
web_1     |   Detail: Key (name, article_id)=(New Section, 1) already exists.

Why did it happen?

Anyway, changing text in slides seems to be fixed, now. Please, take a look at your environment.

CSS issue. We could use inputclass as described here, but other bootstrap css needs to be fixed as well, because if I'll just add h2 and h3, x-editable buttons looks corrupted.

[akarasev]

CSS almost fixed. I've disabled buttons for single line inputs and added classes to render input text. Now, to submit edited text, hit enter. The last problem is to add !important to the h2 and h3 classes. I'm not familiar with sass. Please, tell me where it can be done?

[farley13]

@akarasev - so on the error - I think that's something I can improve in my branch - it's complaining because there is already a slide named "New Section" - if you rename the first slide (to say "My First Slide" and save, it should work.

For css - you can add it to application_styles.scss - it supports vanilla css - so that should work fine.

[farley13]

@akarasev - on the h2,h3 editors - can you update it so in addition to enter - clicking outside the text also updates the text. Meaning only the X inside the text box will cancel the update.

[farley13]

@akarasev - When editing slide 2 - I am still getting slide 1's text in the editor. Without editing - things look good - they switch back and forth - but once I start editing - I see the old text instead of the current text.

repo steps:

create 2 slides. edit heading for 1 to be slide 1, edit heading for 2 to be slide 2. Go back to slide 1. Edit 1, it shows "slide 1" but once the editor loads, the text in the editor will be "slide 2". This might be due to form posts or similar? On confirmation you might set both text and value (I know for textarea this was required).

[akarasev]

I was able to reproduce it. Interesting thing, it's related to slides, but not to article's title. Will try to find out the reason.