collective / uwosh.snippets

Adds dynamically-updated rich text snippets to Plone. Update a snippet to display the change everywhere the snippet is used (pages, news items, events, anywhere rich text and TinyMCE appear).
4 stars 3 forks source link

The span tag induced by a snippet leads to a break line #13

Open dbitouze opened 7 years ago

dbitouze commented 7 years ago

With the following HTML code of a snippet I created:

le <span class="snippet-tag snippet-tag-document" contenteditable="false" data-type="snippet_tag" data-snippet-id="91703cee2a2b458dbe0c8103be2651d8">Snippet:[ID=91703cee2a2b458dbe0c8103be2651d8]</span>

the word "le" and the following snippet are not on the same line.

tkimnguyen commented 7 years ago

According to https://www.google.com/search?client=safari&rls=en&q=span+tag+new+line&ie=UTF-8&oe=UTF-8#q=span+no+line+break the solution is to add some CSS:

white-space:nowrap;

dbitouze commented 7 years ago

I tried this CSS instruction but, as shown by the joined images, it doesn't give the expected result: still a line break where not wanted and not line breaks where wanted.

plone-5-snippets plone-5-snippets-bis

tkimnguyen commented 7 years ago

I think in the above screen shots your word "le" is wrapped by a p and then the snippet appears in its own p so you might need to specify the nowrap for the p tag instead of for body

dbitouze commented 7 years ago

It doesn't help: if nowrap is specified for the p tag, the previous part of the sentence is missing the line break between "de" and "production" (and the line break between "le" and the snippet still occurs).

tkimnguyen commented 6 years ago

I think the problem here is that storing snippets as Documents (pages) ends up wrapping them with a <p> tag; that is something TinyMCE seems to be doing, even if you try to remove it.

tkimnguyen commented 6 years ago

Ah, if you edit the Document (Page) and change the Text field to type text/x-web-textile you can remove the <p> tag around the text and it saves correctly without the tag.

screen shot 2017-08-27 at 10 19 03 am


$ bin/instance -OSnippets debug
Starting debugger (the name "app" is bound to the top-level Zope object)
>>> from zope.component.hooks import getSite
>>> site = getSite()
>>> snippet=site['.snippets']['snippet-1']
>>> snippet.text.output
u'October 16, 2017'
>>>