Content Editable

Installation

npm i @softwarexperts/content-editor

Usage

The library exposes a Provider that will store the shared state between different Text components and the Text component itself.

The first thing to do is to add the Provider in the root of the application:

import { ContentProvider } from '@softwarexperts/content-editor'

function MyApp() {
  return (
    <ContentProvider
      trustedDomains={["https://your-editor-domain.com"]}
    >
      <MyComponent />
    </ContentProvider>
  )
}

Notice that we have to pass the trusted domains to the Provider. Trusted domains are those that will be allowed to send messages to the website in order to serialize the state.

Then we can use the Text component in children components:

import { Text } from '@softwarexperts/content-editor'

function MyComponent() {
  return (
    <div>
      <Text
        id="my-text"
        placeholder="Write something..."
        className="my-text"
        style={{
          width: "100%",
          height: "100px",
          border: "1px solid black",
          padding: "10px",
          boxSizing: "border-box",
        }}
      />
    </div>
  )
}