Package Exports

react-tinacms-editor
react-tinacms-editor/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tinacms-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-tinacms-editor

This package provides a WYSIWYM Editor for HTML and Markdown.

Install

yarn add react-tinacms-editor

Field Plugins

This package provides two field plugins for TinaCMS: MarkdownFieldPlugin and HtmlFieldPlugin.

Registering the new Field Plugins

in your _app.{js,tsx}

<TinaCMS
    apiURL={...}
    
    cmsCallback={(cms) => {
      import("react-tinacms-editor").then(({ MarkdownFieldPlugin }) => {
        cms.plugins.add(MarkdownFieldPlugin);
      });
      // or
      import("react-tinacms-editor").then(({ HtmlFieldPlugin }) => {
        cms.plugins.add(HtmlFieldPlugin);
      });
      //...
    }}
   //...

Using in a form

And then in your schema.ts file you can use these in the ui.component portion of a field

{
  type: 'string',
  label: 'mainContent',
  name: 'body',
  // isBody is used to tell the backend to write this to the body of the markdown or MDX file.
  isBody: true
  ui: {
    component: "markdown",
  }
},

Or for the html plugin

{
  type: 'string',
  label: 'mainContent',
  name: 'body',
  // isBody is used to tell the backend to write this to the body of the markdown or MDX file.
  isBody: true
  ui: {
    component: "html",
  }
},