Tinymce - React - how to change the editor from readonly to enabled - reactjs

Having trouble understanding the API docs and how to implement them in React.
When the editor is rendered on the page I have it default to the disabled prop as {true}. How do I programmatically enable the editor. In my case, this would be done from a button the page. Also, I will then be looking on how to extract the data from the editor when a save button is clicked.
Any advise would be appreciated.

Related

How to create custom tooltip in React Quill Editor?

I'm integrating a custom toolbar that has the link action
When user want to add a link to specific text, I want to override the tooltip behavior of Quill editor from default UI
to a UI like this
I've been searching for the solution and found that this can only be done by creating a new theme, but I don't find the documentation for customizing this part in React Quill.
Any help/idea is appreciated.

Action not visible in page layout setup

I have created an action to show a lightning component on the contact record:
When I go to the page layout editor I am not able to see the button to add to the page layout.
I tried with global action but that also doesn't seem to be working.
What am I missing?
We are able to see the button in Mobile & Lightning Actions in the Page Layout Edit page

React Modal Dialog appearing only while inspection

I am new to react and I am using a modal dialog. It is visible when I am inspecting it on browser but not visible generally. What could be the issue?
(Can't paste code since it is work related)
Are you using css z-index at all ? I would use createPortal() approach see the React docs to learn how to do that https://reactjs.org/docs/portals.html

How to not deselect react-select when clicking dev tools to style it

My typical workflow when choosing styles for a component is to use the dev-tools in the browser to play around with the styles until I'm happy with the look, and then copy the chosen styles permanently back to the code.
But if I want to see the dropdown in react-select, I need to click it. When I click back to the dev-tool, the dropdown disappears as the component is de-selected.
Is there a way to keep the dropdown open as I style it?
Here's a sandbox if you want to try: https://codesandbox.io/s/4rlmrp38j7
I just found the prop menuIsOpen which will force the dropdown to stay open.
However, if there is a way using the dev-tools or another method I'd be interested in that too and will happily mark that as more robust and correct than this answer.
You would recommend you to use some extension to inspect the code React:
for chrome
for firefox
Then in react-select v1 you can set isOpen and in v2 menuIsOpen to true without changing you code.
I will also suggest to take a look at this page and directly in the source code on the repo github to have an idea of the default style.

how to create a custom splash page in salesforce?

Need to show a popup message in home page only for the first time a user logs into salesforce....
its more like a splash page.
it can be a jquery popup as well..
can i do it using a visualforce page ??? if yes, please give ur suggestions
can we do it using the sidebar component in salesforce ???
I thought of showing it using a sidebar component by keeping a custom field in user object...everytime he logs in i will check the custom field and the show the popup...since this popup will be shown only for the first time is there anyother better solution instead of querying the user object evertime..
thanks.
You can use window.open method of Javascript and for the sidebar provide your scroll option.
If you want to get fancy to have customized look you can just use jquery modal with some style on document ready.
We can use cookie to store if this is the first time or salesforce user object can tell you this is the first time

Resources