Spaceweb Editor

v6.2.2

HTMLEditor

• HTMLEditor is a richText WYSIWYG Editor. It has all the features of Text Editor and contains some advanced features. It provides customizable features which you can modify according to your needs.

  Below example has all the extensions enabled for the HTMLEditor.

  //lib
  import { useCallback } from 'react';
  import type { ReactElement } from 'react';
  
  //components
  import { HTMLEditor } from '@sprinklrjs/spaceweb-editor';
  import { Box } from '@sprinklrjs/spaceweb/box';
  
  //constants
  import { ON_CHANGE } from '@sprinklrjs/spaceweb-editor/actionTypes';
  import { EXTENSIONS } from '@sprinklrjs/spaceweb-editor/constants/extensions';
  
  //types
  import { HTMLEditorAction } from '@sprinklrjs/spaceweb-editor/types';
  
  const HTML_EDITOR_FEATURES = {
    [EXTENSIONS.BLOCKQUOTE]: {
      enabled: true,
      placement: 'formattingFooter',
    },
    [EXTENSIONS.HORIZONTAL_RULE]: {
      enabled: true,
    },
    [EXTENSIONS.DROP_CURSOR]: {
      enabled: true,
    },
    [EXTENSIONS.CODE]: {
      enabled: true,
    },
    [EXTENSIONS.IFRAME]: {
      enabled: true,
    },
    [EXTENSIONS.TABLE]: {
      enabled: true,
    },
    [EXTENSIONS.TABLE_CELL]: {
      enabled: true,
    },
    [EXTENSIONS.TABLE_ROW]: {
      enabled: true,
    },
    [EXTENSIONS.TABLE_HEADER]: {
      enabled: true,
    },
    [EXTENSIONS.CALLOUT]: {
      enabled: true,
    },
    [EXTENSIONS.FONT_FAMILY]: {
      enabled: true,
    },
    [EXTENSIONS.FONT_SIZE]: {
      enabled: true,
      placement: 'formattingFooter',
    },
    [EXTENSIONS.INDENT]: {
      enabled: true,
    },
    [EXTENSIONS.TEXT_COLOR]: {
      enabled: true,
      placement: 'formattingFooter',
      customColor: false,
    },
    [EXTENSIONS.FONT_STYLE]: {
      enabled: true,
    },
    [EXTENSIONS.HIGHLIGHT]: {
      enabled: true,
      customColor: false,
      placement: 'formattingFooter',
    },
    [EXTENSIONS.IMAGE]: {
      enabled: true,
      placement: 'floatingMenu',
    },
    [EXTENSIONS.VIDEO]: {
      enabled: true,
      placement: 'formattingFooter',
    },
  };
  
  export default (): ReactElement => {
    const handleAction = useCallback((action: HTMLEditorAction) => {
      if (action.type === ON_CHANGE) {
        console.log(action.payload);
      }
      
      if (action.type === ON_UPLOAD_IMAGE || action.type === ON_UPLOAD_VIDEO) {
        console.log(action);
      }
    }, []);
  
    return (
      <Box className="mt-4 border-1 spr-border-03 border-solid text-14">
        <HTMLEditor
          initialHeight={200}
          placeholder="Enter Text"
          onAction={handleAction}
          className="px-3 pt-2"
          formattingFooterState="visible"
          showFloatingMenu
          showBubbleMenu
          features={HTML_EDITOR_FEATURES}
        />
      </Box>
    );
  };

• List of All Available Extensions

  • Default Extensions

    • 1. Paragraph
    • 2. Heading
    • 3. Bold
    • 4. Image
    • 5. Italic
    • 6. Link
    • 7. Suggestion
    • 8. Strike
    • 9. Text Align
    • 10. Underline
    • 11. Ordered List
    • 12. Bulleted List
    • 13. Text Color
    • 14. AtomicTextContent
    • 15. AtomicLinkContent

    Additional Extensions

    • 1. Blockquote
    • 2. Code
    • 3. DropCursor
    • 4. FontFamily
    • 5. Horizontal Rule
    • 6. Iframe
    • 7. Table
    • 8. Table Row
    • 9. Table Cell
    • 10. Table Header
    • 11. Callout
    • 12. Font Size
    • 13. Indent
    • 14. HighLight
    • 15. Video

  Default extensions are already enabled when you use HTMLEditor, but you will have to enable additional extensions. You can also disable default extension and configure all extensions through feature config map.

• RegisterCallbacks

  The schema of HTMLEditor is very strict, you cannot change the content of the editor once it mounts. So to overcome this we have exposed Editor API through RegisterCallbacks which you can use to programmatically add or change content or focus the editor. The callbacks available are focus, appendContent and resetContent.

  You can use Editor API callbacks through:-

  1. ref: All commands are available through callback instance which is bind to the ref passed to the HTMLEditor or TextEditor.

  2. registerCallbacks prop (deprecated): This prop is a callback function which executes when the editor mounts and passes callbacks as params to it. You can also return a callback from it which is run when the editor unmounts or is destroyed.

  The example below shows the usage for callbacks, and how to insert content of each type.

  RegisterCallbacks Example

  Focus EndInsert TextInsert RichTextInsert ImageReset Content

  JS

  TS

  focus

  This commands sets the focus back to the editor. When a user clicks on a button outside the editor, the browser sets the focus to the button, in most cases you want the focus back to the editor again. In the below example when you click on button it bring focus back to the editor.

  Name	Type	Default	Description
  focusPosition	'start' | 'end' | 'all' | number | boolean | null (false)	By default the cursor position is restored to previous one.	Focus the editor and places cursor at the given position

  appendContent

  This command inserts content in the editor. This command is pretty flexible and can be configured according to your need.

  Name	Type	Default	Description
  content	string | { id?: string, label: string } (for AtomicTextContent) | { src : string, alt?: string, title?: string } ( for ImageContent)		The content to be inserted in Editor.
  position	'end'|number		The position at which the content is inserted
  preserveWhiteSpace	boolean | 'full'	full	Pass "full" to preserve whitespace entirely and pass true to preserveWhiteSpace, but normalize newline to spaces, and false to collapse whitespace.
  type	'text' | 'richText' | 'atomicTextContent'		The type of content to be inserted
  updateSelection	boolean	true	The cursor position is updated if true

  resetContent

  This command replaces the editor content with a new one. Its basically the same as setting hte content on initialization.

  Name	Type	Default	Description
  content	string		The content with which the editor content will be replaced
  emitUpdate	boolean	false	ON_CHANGE action is emitted if true
  focusPosition	'end'|number		The cursor position after the content is replaced

• Overrides

  Through overrides you can customize Formatting Footer and Floating Menu of the Editor. The config for overrides is

  {
    FormattingFooter: Override<{
      placement?: 'top'|'bottom';
      isSticky?: boolean;
      overrides?: {
        Root: Override<{
          className: string;
        }>;
        BaseFormattingFooter: BaseFormattingFooterOverrides;
        FormattingFooterContainerOverrides: Override<{
          className: string;
        }>;
      }
    }>;
    FloatingMenu?: Override<{
      className?: string;
    }>;
  }

  FormattingFooter

  The default placement of formattingFooter is at the bottom, but you can change it to top using overrides. In the example the placement is change to top.

  FormattingFooter Placement

  JS

  TS

  You can also absolutely position formattingFooter with respect to a relative container. You can achieve this by passing isSticky: true; through overrides. ScrollOffset is used when you want scrolling to take place to get the cursor into view when the distance (in pixels) between the cursor and the end of the visible viewport is greater than the provided offset. You can provide the styles for positioning Formatting Footer through Root Overrides in FormattingFooter overrides.

  Sticky Formatting Footer

  JS

  TS

  If you want to add margin, padding, border or any other styles which could increase the height of the formatting, you should add it through FormattingContainer overrides and not in Root overrides because the height of formattingFooter is used in internal calculation and applying these styles to the Root could cause the height to be calculated incorrectly.

  You can add you custom options in FormattingFooter through StartEnhancer and EndEnhancer in BaseFormattingFooter Overrides. You can also add styles to it through overrides also. Currently there are overrides support for Redo, Undo, Divider and Clear Formatting option in FormattingFooter. In future we will be adding full overrides support for all the options present in FormattingFooter. Below example shows overrides for BaseFormattingFooter.

  {
    className?: string;
    StartEnhancer?: () => ReactElement;
    EndEnhancer?: () => ReactElement;
    overrides?: {
      Divider?: Overrides<{
        className?: Styles;
      }>;
      ClearFormatting?: Overrides<{
        onClearFormatting?: () => void;
        isDisabled?: boolean;
        overrides?: Override<{
          IconButton?: Override<IconButtonProps>;
          Icon?: Override<Spr.StringAnyMap>;
        }>
      }>;
      Undo?: Overrides<{
        onUndo?: () => void;
        isDisabled?: boolean;
        overrides?: Override<{
          IconButton?: Override<IconButtonProps>;
          Icon?: Override<Spr.StringAnyMap>;
        }>
      }>;
      Redo?: Overrides<{
        onRedo?: () => void;
        isDisabled?: boolean;
        overrides?: Override<{
          IconButton?: Override<IconButtonProps>;
          Icon?: Override<Spr.StringAnyMap>;
        }>
      }>;
    }
  }

  Overrides BaseFormattingFooter

  JS

  TS

  Floating Menu

  FloatingMenu is shown at the start of empty paragraph and contains some text formatting options. You can also override the styles of floating menu. In the below example we have modified the styles of floating menu to show it at left of cursor.

  Overrides FloatingMenu

  JS

  TS

HTMLEditor props

HTMLEditor exports

You can import this module like so:

import {HTMLEditor} from 'spaceweb-editor'

It exports the following components or utility functions:

• HTMLEditor