Custom TipTap Editor Extension for Wappler

This is a custom TipTap editor extension designed to be used with Wappler. It includes features such as dynamic mentions, YouTube video embedding, table support, image upload, and more. New custom commands like setting a hard break, inserting content dynamically, and clearing the editor are also included.

Note: This extension is not ready for production and is exposed for other Wapplers to review and suggest improvements.

Installation

1. Install the Package

Follow this guide to copy the necessary files to your Wappler project's extensions folder.

2. Add the Component to Wappler

You can add the custom TipTap editor component to your Wappler project by following these steps:

1. Include the TipTap editor in your Wappler page using Wappler's App Structure panel:

   <dmx-tiptap id="your-editor-id"></dmx-tiptap>

Features

1. YouTube Video Embedding

Enable YouTube video embedding by setting the Enable YouTube video attribute to true. Users can paste YouTube video links directly into the editor, which will automatically embed them.

<dmx-tiptap id="your-editor-id" enable-youtube="true"></dmx-tiptap>

2. Mentions

Enable the mention functionality, which provides a dropdown of suggested items when typing @. This is controlled through the enableMentions attribute, and you can bind dynamic data for mentionable items via the mentionItems attribute.

<dmx-tiptap
  id="your-editor-id"
  enable-mentions="true"
  dmx-bind:mention-items="serverConnect.data.users"
></dmx-tiptap>

3. Table Support

The editor includes table functionality out of the box. You can insert and manage tables, add/remove rows and columns, and perform other table-related actions.

4. Image Upload

Supports image uploads with base64 encoding or server-side uploads (currently in progress). To enable image upload functionality, set the imageUpload attribute to true.

<dmx-tiptap id="your-editor-id" image-upload="true"></dmx-tiptap>

5. Hard Break

A hard line break can be inserted into the editor using the setHardBreak method.

dmx-on:click="your-editor-id.setHardBreak()"

6. Clear Content

You can clear all content in the editor using the clearContent method.

dmx-on:click="your-editor-id.clearContent()"

7. Set Content with Line

You can insert new content, add a paragraph, and dynamically add a horizontal line using the setContentWithLine method.

dmx-on:click="your-editor-id.setContentWithLine('Some new content')"

Pro Extensions (Optional)

If you have access to TipTap Pro extensions, you can enable additional features such as emoji support and file handling.

Setting Up TipTap Pro Extensions

1. Configure NPM to use TipTap's private registry:

   Follow the Global CI/CD instructions at https://cloud.tiptap.dev/pro-extensions to use the pro extensions.

2. Install the Pro extensions:

   npm install @tiptap-pro/extension-emoji @tiptap-pro/extension-file-handler

3. Enable Pro Extensions in the Component: To enable Pro extensions, such as emoji or file handling, ensure you have the following setup:

   "peerDependencies": {
      "@tiptap-pro/extension-emoji": "^2.11.2",
      "@tiptap-pro/extension-file-handler": "^2.11.2"
   }

   This allows you to integrate additional Pro features seamlessly without bundling them into your core package.

Configuration Options

1. Editor Properties

| Property | Description | Default Value | | ---------------- | -------------------------------------------- | ------------------------ | | id | The ID of the editor component. | - | | value | The initial content for the editor. | "" | | placeholder | Placeholder text shown when editor is empty. | "Start typing here..." | | readonly | Whether the editor is in read-only mode. | false | | enableMentions | Enables mentions functionality. | false | | mentionItems | A list of items to be used for mentions. | [] | | enableYoutube | Enables YouTube video embedding. | false | | imageUpload | Enables image upload functionality. | false |

2. Toolbar Properties

You can configure the toolbar options by passing a comma-separated list of buttons through the buttons attribute:

<dmx-tiptap
  id="your-editor-id"
  buttons="bold, italic, underline, table"
></dmx-tiptap>

Methods

1. Set Content

Dynamically set the content of the editor using the setContent method.

dmx-on:click="your-editor-id.setContent('New content')"

2. Insert Horizontal Rule

Add a horizontal line using the setHorizontalRule method.

dmx-on:click="your-editor-id.setHorizontalRule()"

3. Clear Content

Clear all content in the editor using the clearContent method.

dmx-on:click="your-editor-id.clearContent()"

4. Set Content with Line

Insert new content, a paragraph, and a horizontal line.

dmx-on:click="your-editor-id.setContentWithLine('Some new content')"

5. Toggle Readonly

Toggle the read-only state of the editor using the toggleReadonly method.

dmx-on:click="your-editor-id.toggleReadonly()"

6. Focus Editor

Focus the editor at a specific position: start, end, or another custom position.

dmx-on:click="your-editor-id.focusEditor('end')"

Example Usage

<dmx-tiptap
  id="myEditor"
  enable-mentions="true"
  dmx-bind:mention-items="serverConnect.data.users"
  enable-youtube="true"
  buttons="bold, italic, underline, table, bullet-list, ordered-list"
></dmx-tiptap>

In this example:

• Mentions are enabled, and mentionable items are dynamically loaded from a Server Connect action.
• YouTube video embedding is enabled.
• The toolbar includes buttons for bold, italic, underline, table, bullet list, and ordered list.

License

MIT License. Please feel free to use and modify this component as needed.