@samemichaeltadele/tiptap-editor NPM

@samemichaeltadele/tiptap-editor

A Strapi v5 plugin that integrates a tiptap rich text editor using reactjs-tiptap-editor as its foundation.

Features

Rich text editing capabilities powered by TipTap
Modern UI components from reactjs-tiptap-editor
Full compatibility with Strapi v5
Code block support with syntax highlighting
Typography extensions
Image zoom functionality
Dark mode support

Installation

npm install @samemichaeltadele/tiptap-editor

Configuration

Enable the plugin in your Strapi configuration:

// config/plugins.js
module.exports = {
  'tiptap-editor': {
    enabled: true,
  }
};

Add the field type to your content-type:

// content-types/your-content-type/schema.json
{
  "kind": "collectionType",
  "collectionName": "your_collection",
  "info": {
    "singularName": "your-content-type",
    "pluralName": "your-content-types",
    "displayName": "Your Content Type"
  },
  "options": {
    "draftAndPublish": true
  },
  "attributes": {
    "yourTtype": {
      "type": "customField",
      "customField": "plugin::tiptap-editor.tiptap-content"
    },
  }
}

You can also add the field from the content type builder under the custom tab on the field selection dialog