Consider Using Draft.js for rich text editing on the web app, then convert the output to a json object with Draft.js convertToRaw function and store it in the database.
if the consumer of the rich text is a react-native mobile application, what is the best approach to represent the rich text?
is there any robust work or library that iterate through the json object and export native Text and Image components?
also there are some libraries that export the json object to html:
https://github.com/sstur/draft-js-export-html
https://github.com/rkpasia/draft-js-exporter
the exported html then can be represented with a webview component. is this a reliable approach?
another way for representation would be putting react in react-native webview and use Draft.js Editor with readOnly prop. but I don't have any idea which way to go!
This seems to be the best approach.
You must fetch the json and write a parser that understands Draft.js model (inlineStyleRanges, entityRanges, entityMap,...) and based on that, exports to native components.
At work we had the same problem, so we've developed a library that does the job, it's called react-native-draftjs-render.
It has a sample project where you can see how it works and understand how to use it. It is also available on npm.
If you already have the html version and want to use it, you will also need a parser to convert the html into native components. react-native-htmlview seems to do it but I've never used.
Render native components is better than using webviews (they are very limited and slow), so I don't recommend this approach.
We use redraft to approach that rich text from draft-js render to HTML5 and Weex(rax). And I am sure you can use it achieve your goal because the redraft is just a convert function with zero dependencies, you can custom the render element like div in HTML or View in React Native.
Related
I want to convert an HTML page written with Vue.js to a vector-based PDF client-side. I understand there are solutions in the backend, however, in my case I specifically want client-side. I have very complex Vue components and styling which I would like to print to pdf. I tried multiple approaches and I could not find a solution.
Here is what I tried: -
The easiest way I found is window.print().
The issue with this approach, is that there is no other way to invoke the download functionality directly without going through the pop-dialog. Another issue I found window.onafterprint and window.onbeforeprint event listeners don't work on firefox but work in chrome. In firefox, both events fire at the same time. regardless, I do not like the default dialog, I would rather build my own.
I retrieved the HTML and CSS from the DOM using this.$el.innerHTML, and window.getComputedStyle(element) and saved them to a variable, then converted to blob and downloaded it with javascript.
this solution worked, however only in DEV build, since I bundle my app with Vite, the computed styles don't render on the DOM as I expected when in Production build; which I believe is due to the way Vite bundles CSS for optimization. Therefore the result will only be HTML with no styling.
I used the popular vue-html2pdf library and it is straightforward.
the issue with this approach is the fact it simply renders HTML and CSS to an image the saves as a pdf, therefore the output will be an image-based-pdf. which is not my preferred kind of pdf.
I cannot find any library that takes in HTML and CSS and covert to a Vector-based pdf on the client-side.
I wish to use Algolia to setup InstantSearch in my React Native project. I am using this tutorial to learn the basics.
It appears in their RefinementList and InfiniteHits components there is a parameter: refine. This parameter seems to play a key role in the functionality of this tutorial's app.
Where can I get an example of how this refine() method would look like?
Please help me with some resources. An explanation of this refine() method would also help.
Thanks!
I think there's a typo in the documentation at the time of this writing (for which I opened a pull request), and the name of the actual prop is refineNext.
The documented InfiniteHits example from the React Native guide uses a connector, which is a lower-level abstraction allowing users to fully control the UI. This is what allows you to use React Native code for the UI while having access to the InfiniteHits data and logic. You can read more about the connectInfiniteHits connector in the documentation.
The provided refineNext function lets you load more results. It doesn't take any arguments, all you need to do is call it whenever you want to load more results from Algolia. In the example, it's being used in the onEndReached callback of React Native's FlatList component, whenever the hasMore provided prop is true. This allows loading more results once when the scroll position gets within onEndReachedThreshold of the rendered content.
First, I do not speak English well.
I would like to add draft-js rich-text-editor to react-native.
However, when I browse the materials, I have difficulties because of the only data related to react.
Can not add draft-js in react-native?
I do not want to add draft-js-render.
I want to add a text-editor.
The component we use in the resume.com React Native app is the react-native-pell-rich-editor component, which was the best free and open source component I could find for this problem. It was also the simplest and most consistent/flexible HTML parser I found. We use a draft JS editor on the main resume.com site, but this component was better for React Native.
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.