I'm curious if it's possible to nest blockquote in draft js? At the moment I'm using convertFromHTML to convert a series of nested blockquote tags into ContentState but it seems only the first blockquote is being counted.
Thanks!
You can nest inline styles but you might have to provide your own blockRenderMap to do so. Check out the LaTex example, and draft-js-plugins
In draft js the blockquote is a BlockType and block cannot nest block so you cannot approach it.
But you can use custom inline-style or custom block to simulate it. Inline style can nest and you can make some text display: 'block'; borderLeft: 2px solid #ccc; through draft js decorator. And you can create a react component that can receive a tree like data and render as a nested blockquote, use it as a custom block will also approach your goal.
Blockquote is block type element in HTML, generally block don't nest block element so I wonder what content need nest blockquote?
Related
I'm writing a desktop application with Electron and ReactJS that edits CSS files. I need to scan the CSS looking for a class selector, and then clear the following declaration block and add some new properties.
The tricky part is matching the class in the selector. I need the class to be the actual target (not a parent), but there might be multiple comma-separated selectors, and so I need to check all of them. For example, in this file I'm searching for the containerApp class:
.section-main .section-right , .menu .container-manu , .containerApp .container-nav {
background: black;
}
.section-main2 .section-left , .menu .container-manu , .section-group-d .containerApp {
background: red;
}
The first block doesn't match because .containerApp is only mentioned as the parent of the real target, .container-nav. The second block does match, and I would want to remove the background: red; and replace it with something else.
What's the best way to go about doing this CSS matching and rewriting?
What is the difference between Polymer's light DOM and local DOM?
From the docs(1):
The DOM that an element creates and manages is called its local DOM.
This is distinct from the element's children which are sometimes called its light DOM for clarity.
This doesn't seem to help much. Isn't the light DOM supposed to contain the children and if so what does the local DOM contain?
[1] https://www.polymer-project.org/1.0/docs/devguide/local-dom
Here's an example to explain the difference. Suppose you have the following custom element:
<dom-module id="x-foo">
<template>
<div>I am local dom</div>
<content></content>
</template>
<script>
Polymer({
is: 'x-foo'
});
</script>
</dom-module>
And you use it like this in your document:
<x-foo>I am light dom</x-foo>
What ever you put into the template of the element is local dom. What you put as children to your custom element when you use it is light dom. So, the local dom is determined by the creator of the element, while the light dom is set by the user of the element. Of course, when you both create and use your own custom elements you have some flexibility what to put where.
If you create a component <a-component>, then it has its own markup (it's template) which is the local DOM. The template can contain <content></content> tags (one unnamed and multiple named ones) where children are projected to. Content added as children is shown in the light DOM.
When we have an <a-component> with it's local DOM
<dom-module id="a-component">
<template>
<div>A</div>
<content></content>
<div>B</div>
</template>
</dom-module>
and we use it like
<a-component>
<div>C</div>
</a-component>
then <div>C</div> is shown in the light DOM. The resulting DOM in the browser then looks like
<div>A</div>
<div>C</div>
<div>B</div>
Where <div>A</div> and <div>B</div> are called the local DOM when seen from within <a-component> and shady or shadow DOM when seen from the outside of the component and <div>C</div> is in the light DOM.
If we take again this markup we would add to the page
<a-component>
<div>C</div>
</a-component>
You see that <div>C</div> is directly added by the user of the component while <div>A</div> and <div>B</div> are hidden (in the shadow) and revealed only later when <a-component> is processed by the browser.
The distinction of shady and shadow is about if full shadow DOM is enabled or not for Polymer. Shady emulates shadow to some degree but with some notable differences, this is why it got a different name.
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.
I want to remove the injected CSSResource in GWT application.
I used the following code MyClass.INSTANCE.ensureInjected();
I want the above CSSResource for a particular page only. So the remaining pages should be work as per the actual css/theme.
Once I inject this then its applicable for the whole application. How can I overcome this?
You can inject your css bundle using directly StyleInjector utility class, instead of the ensureInjected() method
Then you will have a reference of the injected element which you can remove when you want.
// Equivalent to MyClass.INSTANCE.ensureInjected()
StyleElement e = StyleInjector.injectStylesheet(MyClass.INSTANCE.css().getText());
// Remove the injected css element
e.removeFromParent();
Theoretically you could try to remove the injected style block from the DOM, but this would be quite difficult (and maybe not very reliable).
Much better to organize your 'special' CSS style sheet in a different way:
Turn selectors like
.some {
color: green;
}
.other {
color: red;
}
into
.special .some {
color: green;
}
.special .other {
color: red;
}
and then add/remove the 'special' class e.g. to/from your body element to activate/deactivate the special styles.
If you have embedded the same GWT application in more than 1 page and you want a different behavior based on the given page, you can for example call the
MyClass.INSTANCE.ensureInjected();
if a bootstrap parameter is set.
In the host page, set the parameter, like YourGwtApp.nocahe.js?css=inject and read it as it's explained here
In the onLoadMethod, call the ensureInjected accordingly to your bootstrap parameter.
Is it possible to create Ajax.ActionLink which has instead of text, the whole DIV?
I'd like to map div on Ajax.ActionLink
I don't think that this will work using the standard MVC Ajax scripts. I believe that the MVC javascript is created to use an <a> element by default. On a different note, embedding a div tag within an <a> is not valid XHTML. What are you trying to achieve?
Using Jquery is probably the easiet way you want to go. As an example:
<div onclick="SomeAjaxFunction()">some div content</div>
function SomeAjaxFunction()
{
$.get('<%= Url.Action("SomeAction", "InSomeController") %>', function(data) {
$('.result').html(data); // assuming a partial view
alert('Load was performed.');
});
}
However, if you are dead set on using MS Ajax, to work with divs, you need to possibly look at the Sys.Mvc.MvcHelpers._asyncRequest function and do some of your own re-wrapping to make it usable. I have not tried or tested this, so use at your own risk. (Stick with the Jquery, there is far better help and support available.)