Preferring span instead of paragraph - react-markdown - javascript

When I put some text in markdown, by default it is wrapped inside paragraph, what makes some problems sometimes (when we don't want to have margins from paragraph and be forced to remove them manually each time). My question is - are we able to force react-markdown to work in that way, that it puts paragraphs only when there is a line break before? So
"Blabla" should be wrapped in span and
"\nBlabla" should be wrapped in paragraph
Right now, every text is by default wrapped in paragraph in react-markdown (and I know that it is correct from markdown docs perspective, but problematic for devs and UI)

Related

How can I define a layout for Quill content?

How can you make an editor within editor with Quill? Imagine a scenario: there is some text with formating, then there is an embed (image/video/...) with some formated text on the right. And then there is some text again. So HTML would look like:
<editor>
<regular_quill_stuff></regular_quill_stuff>
<customEmbed> // some CSS flex here
<container contenteditable="false"><image></image></container>
<container><regular_quill_stuff_in></regular_quill_stuff_in></container>
</customEmbed>
<regular_quill_stuff></regular_quill_stuff>
</editor>
NOTES:
in 'regular_quill_stuff_in' user should be able too use the same toolbar but inserting embeds should be disabled.
when you remove embed blot from outside, 'regular_quill_stuff_in' contents should be moved to 'regular_quill_stuff'.
I've tried making some custom blot based on Block, Code and Scroll but I can't really understand how to make it work, and many low level stuff isn't documented very well. Then I tried to create another instance of Quill on a dom node, but it was very buggy becouse main quill was reciving events from within . I was able to fix it with auto-enabling/disabling Quills based on user focusing divs, but it still was buggy, not to mention passing information between two Quills and edit history and deltas were very incoistent.
Surely there has to be a way to make it easier.
Styling and organizing HTML elements on a page is done using CSS stylesheets. Basically, elements get values for their class and id attributes, so that they can be selected to have a desired stylization applied.
This same process is done with any WYSIWYG rich text editor. The buttons on the editor toolbar are responsible for not only adding new content, but also changing what is already present. For some, this involves changing or applying classes to the desired snippet.
We can see this happening in Quill using the alignment format. If you write the following line in Quill:
This is a simple test.
As a result, you will have the following HTML markup in the editor:
<p>This is a simple test.</p>
Selecting a portion of this text and using/applying the alignment format to, for example, center, will cause a class to be applied to the paragraph, and the result will be as follows:
<p class="ql-align-center">This is a simple test.</p>
So what does this mean? This means you can define your own formats to apply classes that are in charge of arranging the layout of Quill content the way you want.
Compared to what you said, the idea is not to add the content to a
container, but to add a CSS class capable of organizing the content.
You can choose to apply attributors, or define new elements for it. But this kind of process requires testing and more testing. I'm not sure how you want to organize things, or what features you want to add. Therefore, for this to be implemented correctly, you will need to test formats and styles for the different HTML elements present as the editor content.
I suggest you start with simple things, such as text, a paragraph. Try to create an attributor that can apply classes to paragraphs. When you can do that, try something else, such as images, videos, the embed elements. You will find varied results, and this will show that you have to test and test until the desired result is found.
As a help, copy the alignment code, but change it to a desired class. More information on this can be found at the following links:
Creating a custom class attributer in QuillJS
Using Quill.js To Build A WYSIWYG Editor For Your
Website
Example for custom class attributor
To learn how to define new formats through blots, see the following links:
Quill-Examples-and-FAQ
Quill GitHub - Parchment
Cloning Medium with
Parchment

How to update HTML after page is loaded?

I have a script that takes text from a hidden div:
var content = column.find(".hidden").text().split('');, and splices it with random 1s and 0s to give a decryption effect. The script writes to another div: column.children(".code").text(content);
So I'm ripping text from .hidden, turning it into an array, splicing it (within setInterval() so it's animated) with a binary array, and putting it into a visible div. The problem here is I can't get any HTML inside the visible div, so I can't include linebreaks or any other useful things. I tried using .html() instead of .text(), but then it puts html into the visible div, instead of actually formatting the page with it. I tried to .append() the changes, but it never even showed up because I probably did it wrong. I was told I may be able to do this through node manipulation, but nothing I tried worked.
So the question is: How can I update the DOM so it shows the final HTML, change the text without destroying the html, insert properly formated HTML at the end, or some other solution I can't think of because I have no idea what I'm doing.
Edit: Here is a relevant fiddle. http://jsfiddle.net/13t31w5p/
The correct syntax to add content to an existing element is:
/**
* .append()
* {#link http://api.jquery.com/append/}
*/
$('div.mydiv').append('this text will be added at the end of the div. ')
Note that the .text() and .html() methods are more or less "conversion" scripts that manipulate existing content. Click the links to read more about them.
If this doesn't answer your question, please provide a bit more of a verbose example of what you're doing -- perhaps you could include the relevant code snippets and put them in something like JSFiddle or Gist.

Is there a way to only replace the innerText of all elements on a page?

Background
Based on today's XKCD I created the below script:
javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+)*/gmi,'curse').replace(/language/gmi,'word');
If you go to a site (e.g. http://en.wikipedia.org/wiki/Programming_language) and paste the above code (re-adding the javascript: if required) this performs a regex replace on the document's content, whilst preserving most formatting, creating some fun reading.
However, the look of the site is affected; presumably because I'm replacing innerHTML rather than just innerText (I guess; though not sure).
I can't simply replace innerText as all elements include their child's innerText in their own; doing this on the body element would remove all formatting, and doing it on every element would duplicate huge amounts of content.
Question
Is there a way to iterate through all nodes in an HTML document, via (minimal) javascript, replacing words in their immediate child text values whilst preserving their remaining content?
The Javascript that you have doesn't change the page at all. It reads the content of the body into a string, then changes the string. That doesn't affect the content.
The reason that the page changes is that the value of the script is the value of the string, so that is used as content for a new page. As that is just a HTML snippet without the head tag where all the styles and scripts are defined, you get an unstyled page with just the content.
If you want to change the page, you should put the string back as content in the body, then use void(0); as the last statement to prevent the creation of a new page:
javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+)*/gmi,'curse').replace(/language/gmi,'word');document.getElementsByTagName('body')[0].innerHTML=a;void(0);

which tag got priority between div and span tag in html?

This question maybe an iteration! But, still I'm not satisfied with the explanation I found.
My question is: what would be consequences if I use span tag rather div tag? Both are non-semantic tag, I know that. Normally, we use div as a container and span for in-line markup. what if I only use span tag as a container?
Is there any priority at CSS for both the tags? I just want to be more clear about it.
what would be consequences if I use span tag rather div tag?
Different CSS is applied by default (display: inline instead of display: block being the main (and possibly only) difference).
Your HTML might become invalid (depending on where you put the element and what you put inside it).
Normally, we use div as a container and span for in-line markup. what if I only use span tag as a container?
It depends what you try to have it contain. Text? Links? Cites? A pile of other things? That's all fine. Divs? Paragraphs? Tables? A different pile of other things? Invalid HTML and you might get unexpected behaviour when the browser tries to generate a DOM from it.
Is there any priority at CSS for both the tags?
No. Selector specificity only cares that you use a type selector (or some other kind of selector), not what particular type the element is.
See the cascade for more details of how CSS determines which rules apply to an element.
The main difference between <div> and <span> is how they are rendered by the browser by default (this can be changed with CSS). The former takes up 100% of the available width and causes a line break, while the latter tries to squeeze the content into the smallest area allowed.
Here's an image for reference:
Like #amadan said, there are no differences in CSS priority.

JavaScript change first instance of paragraph style with another

I need help writing a JavaScript that will search for the first instance of a paragraph style in each text box and then replace it with another paragraph style. If there's a way to do that with a grep, that'd be good too. Any ideas?
Thanks!
Some work points you should face developing this
1st all the script inherits the Application class.
get the page you are working on - class Page
Get all the pageItems - ItemPage or PageItem (I don't remember now)
Loop through pageItems and get all the textframes within the document - TextFrame Class
Using a loop get from all the textframes the first paragraph. something like
pageItem[i].textFrame[i].paragraph[0]
Put the paragraph in a variable, use the documentation on the script and change the desired styles
A good reading reference for you
Jongware page

Categories