Calliope-editor NPM

Calliope

An extensible WYSWYG editor based on Lexical.

What is Calliope?

Calliope Editor is a ready-to-use editor based on lexical. It is intended to be easy to use and ships with several ready to use plugins.

It does not contain a graphical interface beyond that of the editor itself, and is therefore not tied to any particular UI.

Built in plugins

Code highlight and code formatting.
Drag and drop images.
Emojis (english default).
Floating link editor.
Table cell.
Mentions
Citation block
Speech to text
Text spoiler
Block spoiler (collapsible)
Insert tweets
Insert videos (Youtube, Facebook, Dailymotion, Soundcloud, Twitch).
Basic formatting (bold, italic, underline, strikethrough, superscript, subscript).
Text coloring (font and background).
Different font types
Different block types (heading, bullet list, numbered list, check list, quote and code block).

Installation

Install the yarn pacakge.

yarn add calliope-editor

Import the editor

import { CalliopeEditor } from 'calliope-editor';

Usage

The editor component takes three parameters

config (required) : an object containing configuration options (detailed below).
containerRef (required): a react ref used to manipulate the editor.
setFormats (optional): a function used to set the formats applied to the selected text. Useful when building UIs.

<CalliopeEditor
  config={config}
  containerRef={containerRef}
  setFormats={setFormats}
/>

Configuration

The configuration object (config parameter) looks like this.

{
  placeholderText: t('toolbar.placeholderText'),
  initialState: initialState,
  isReadOnly: false,
  autoFocus: true,
  onError: (error) => {
    throw error;
  },
  plugins: [],
  imageConfig: {
    addCaptionText: t('internal.addCaption'),
    defaultCaptionText: t('internal.enterCaption'),
  },
  twitterConfig: {
    loadingComponent: ({ tweetId }) => (
      <p>
        {t('internal.loadingTweet')}...(ID={tweetId})
      </p>
    ),
  },
  collapsibleConfig: {
    open: true,
  },
  citation: {
    sourceLinkComponent: ({ sourceLink }) => (
      <a href={sourceLink} className="source-link-component">
        <FontAwesomeIcon icon={sourceIcon} size="lg" />
      </a>
    ) /*,
    authorComponent: ({ author }) => (
      <a href={author.link} className="author-link-container">
        <AccountAvatar
          avatar={author.avatar}
          username={author.name}
          size="5px"
          shape="circle"
        />
        <span className="author-link-quote">{author.name}</span>
      </a>
    ),*/,
  },
  mentions: {
    onSearchChange: onSearchChange,
    onAddMention: (mention) => {
      setMentions([...mentions, mention.name]);
    },
    onRemoveMention: ({ name, link }) => {
      const newMentions = mentions.filter((m) => m !== name);
      setMentions(newMentions);
    },
    entryComponent: ({ option: { avatar, name, link } }) => (
      <>
        <AccountAvatar avatar={avatar} username={name} size="5px" shape="circle" />
        &nbsp; <strong className="user-name-mentions">{name}</strong>
      </>
    ),
    mentionsData: suggestions,
  },
  emojiConfig: {
    emojiData: emojiData,
  },
  dragAndDropImage: {
    handleDroppedFile: async (file) => {
      const resp = await uploadFileToServer(file);
      const { src } = resp;

      if (src === null) {
        notification.error({
          message: 'Failed to upload File',
          description: "Couldn't upload file to the server (file type not allowed).",
          placement: 'topRight',
        });
        return;
      }
      const imageSrc = `/static/uploads/${src}`;
      containerRef.current.executeCommand('INSERT_IMAGE', {
        src: imageSrc,
        altText: file.name,
      });
    },
  },
}

Utility functions

Accesible using the containerRef ref.

Editor commands

Valid code languages

The following code languages are accepted by the highlighter. The value column indicates the value passed as the parameter of the CHANGE_CODE_LANGUAGE command.