Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@brightyard/wappler_tiptap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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, and more.

Installation

1. Install the Package

To install the package, follow https://community.wappler.io/t/how-to-install-and-use-custom-wappler-extensions/49982 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:

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

You can enable YouTube video embedding by setting the Enable YouTube video attribute to true. This allows users to 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

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

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

In this example, the mention items are dynamically loaded from a Server Connect action in Wappler.

3. Table Support

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

4. Image Upload

This extension supports image uploads with both base64 encoding or server-side uploads (not functioning right now). To enable image upload functionality, set the Enable Image Upload attribute to true.

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

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`

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

To dynamically set the content of the editor, use the setContent method.

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

2. Toggle Readonly

To toggle the read-only state of the editor, use the toggleReadonly method.

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

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 the mentionable items are dynamically loaded from a Server Connect action.
YouTube video embedding is enabled.
The toolbar includes bold, italic, underline, table, bullet list, and ordered list buttons.

License

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

@brightyard/wappler_tiptap