Code

API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
variant	'default' | 'full-width'	❌
layout	'wrap' | 'overflow'	❌
centeredToolbar	boolean	❌
defaultContent	ReactNode | string	❌
content	ReactNode | string	❌
macros	string[]	❌
schema	WysiwygExtensionsSchema	❌
onChange	(e: { html?: string; text?: string; markdown?: string }) => void;	❌

variant

Used to set a different width, wether the default width or the 100% of the parent container.

layout

The way the toolbar behaves. If 'wrap' then elements are wrapped, if not an automatic overflow is shown.

centeredToolbar

Used to render a centered toolbar.

You can use this prop ONLY if the variant passed is full-width, and the viewport is large. Otherwise, an overflow is passed when rendering smaller viewports.

defaultContent and content

The defaultContent prop is used to render the initial content. The content prop, is normally a state connected to the onChange listener, which updates the state using a controlled approach..

macros

A string array passed to render predefined strings.

onChange

Function executed everytime the content in the editor changes.

schema

The schema is a prop used to personalize the way you want to render your Wysiwyg,

WysiwygExtensionsSchema

You can define your own schema by following this interface.

type WysiwygExtensionsSchema = {
  viewControls?: boolean;

  textFormatting?:
    | boolean
    | {
        textSizes?: boolean;
        bold?: boolean;
        italic?: boolean;
        underline?: boolean;
        strikeThrough?: boolean;
        textColor?: boolean;
      };

  layout?:
    | boolean
    | {
        alignMent?: boolean;
        indent?: boolean;
        outdent?: boolean;
      };

  content?:
    | boolean
    | {
        emoji?: boolean;
        lists?: boolean;
        link?: boolean;
        codeAndCodeBlock?: boolean;
        media?: boolean;
        horizontalRule?: boolean;
      };
};

Custom schema examples

const SchemaExampleOne = {
  viewControls: false,
  textFormatting: {
    textSizes: true,
    bold: true,
    italic: true,
    underline: false,
    strikeThrough: false,
    textColor: false,
  },
  layout: {
    alignMent: true,
    indent: false,
    outdent: false,
  },
  content: false
};

const SchemaExampleTwo = {
  viewControls: true,
  //this would render all the options in the textFormatting object
  textFormatting: true,
  //this would not render any layout option
  layout: false,
  content: {
    media: true,
    emoji: true
  }
};