dasmikko / strapi-tiptap-editor

A drop-in replacement for the strapi editor

Strapi TipTap Editor

A drop-in replacement for the strapi editor.

Notice!

This project isn't actively maintained, as I want to move away from Strapi. If you are interested in taking over this project, feel free to contact me.

What is this?

It's a dead simple, and easy to use drop-in replacement for the built-in strapi WYSIWYG editor. It's build upon the TipTap editor. It saves as plain HTML, making it easy to use with various frontends.

Why make this?

The main reason was, that I thought that the built-in WYSIWYG editor in strapi could be better. I needed to support tables and css columns. Another requirement was also make it outputted pure html, and has a nice and easy to user interface. I don't want to keep toggling between editor mode and preview mode, just to see what I'm making.

Requirements

It's build for Strapi v4.

It has been tested to work with v4.5.5 and I assume it should keep working with later versions.

Cool! But how do I use it?

Luckily it's very easy to use. Just follow these instructions:

# Install the dependency
npm install strapi-tiptap-editor

# Add the following to the webpack config (/src/admin/webpack.config.js)
# This is due to tippy.js doesn't have an ES6 module, and a tiptap depencency imports it (thanks for the help @giu1io)
config.plugins.push(new webpack.NormalModuleReplacementPlugin(
  /^tippy\.js$/,
  'tippy.js/dist/tippy-bundle.umd.min.js'
))

# Build the Strapi Admin
npm run build

You are now using the new editor!

You can verify it, by looking at the plugins page inside Strapi

I'm having issues, or have a suggestion!

Ouch, that's no good if you have an issue! Suggestions are more than welcome, and feel free to go to the issues tab, and submit your issue/suggestion, and I will look at it as soon as possible!

strapi-tiptap-editor's Issues

[question/suggestion] How to trigger refresh editor's content rendering

Hi,
first of all thank you for this awesome plugin, it works like a charm with ver 4.4.5 (the latest at this time).

I was wondering if there's a way to trigger the rendering of new content. I have a lifecycle hook that needs to update the text inserted, I can see from the logs that the content of this specific field is properly updated (through event.params.data.myfield = updatedHtml; in the lifecycle hook) but the content in the editor is not updated. I need to go back and click on edit a second time.

Is there a way to automatically update the editor's content ?

black font color with new DarkTheme

hello,
The font color or the text area with the new dark theme of strapi is black and it is not very readable

Directional keys do not work on a component

The arrow keys do not work in a component, when I add text to a field and try to move in the field, the arrow keys do not work.
The error only happens on fields that are added within a component, either repeatable or simple.

Not working with strapi v4.5.6

i cannot even build the app...

npm run build
fails

[Bug] Error: Adding different instances of a keyed

Currently, I'm using the [email protected] on Strapi 4.3.3 and isn't works.
I'm having this internal issue:

Superscript and Subscript option missing

Just checking if this two options Superscript and Subscript will be made available soon

https://tiptap.dev/api/marks/superscript
https://tiptap.dev/api/marks/subscript

Hard breaks are not kept even if HardBreak plugin is enabled

Hi,
strapi-tiptap-editor ver. 0.9.6 seems to not keep <br> even if HardBreak plugin is enabled (@tiptap/[email protected] is pulled in).

I have a field with HTML that has <br> but the content is displayed on a single line. If I edit it in the Tip Tap editor by splitting the content on a new line, I see that the markup applied is <p> and not <br>

[Docs] Missing releases changelog

Description

Hello @dasmikko, maybe it's important to make a release changelog for keep documented the changes applied in the plugin from the current tiptap-editor version.

If you want help, I can help you to create a changelog section.
Cheers,

cannot move cursor via arrow keys in components

When I use the plugin and add a richText field to a (repeatable) component, I cannot move the cursor via the keyboard's arrow keys, only by clicking the desired position within the text directly. When I disable the plugin, in the default markdown editor navigation via keyboard works. Tested with strapi 4.1.7 and 4.1.11, Node 16

Is it possible to add tiptap extensions on a per project basis?

Hi,

is it currently possible to add tiptap extensions?
I have a couple of custom extensions, I developed some time ago for tip tap and would like to add thos in a new project where I would like to continue using tiptap within Strapi.

Any standardized way to extend the editor instance with our own extensions?

Crashes since v4.1.10

Since the update to v.4.1.10 (and v.4.1.11) I can't open dynamic-zones containing the tiptap-editor.
I get:

And a white screen when built.

I've tried deleting my yarn.lock, node_modules, build and .cache folder and still the same issue occurs.

Please add support for Base64 Image

Hello thanks for taking this package to Strapi, but I am in a problem since we are using base64 in some images but the editor removes them according to the doc should I add this https://tiptap.dev/api/nodes/image#allow-base64:

ImageExtension.configure({
     inline: true,
     allowBase64: true,
}),

to the Image config, or is there any way I can add these config from strapi without having to modify the code?

Browser dark theme interferes with editor text color

Hey,

Looks like browser's dark theme is interfering with the editor styles.
Below are text color styles which browsers are using in different cases.

Strapi and Tiptap versions

"@strapi/strapi": "4.1.7",
"strapi-tiptap-editor": "0.7.4",

Tested on Windows with Chrome, Firefox, and Edge

Browser & Strapi in dark mode = dark editor text on dark background)

@media (prefers-color-scheme: dark)
<style>
.bGOtGv .ProseMirror {
    color: rgb(24, 24, 38);
}

Browser in light mode & Strapi in dark mode works correctly = light editor text on dark background

@media (prefers-color-scheme: light)
.bGOtGv .ProseMirror {
  color: rgb(255, 255, 255);
}

[question/suggestion] Link to Entry

Great work! But..

Isn't it kind of a deal-breaker, that we are not able to link to entries?

It's pretty hard to manage hundreds of links across multiple components if they are not updated automatically.

Just my 2 cents.

[suggestion] Add customizable set of colors as settings

First of all, thanks for this great plugin! Awesome work!

My suggestion is to add the option to add your own set of colors in the settings tab. This makes it easier to use pre defined brand colors in the text editor.

For example: I want to color my text with my brand color.

• Current "problem": I have to manually copy/paste the HEX/RGB code

For me this isn't a problem, but for clients this might be user unfriendly.

Not working with strapi version latest

Hello,

strapi version : 4.5.3
tiptap version : 0.9.6
I have this error if a schema contains a richtext type =>

Have you an issue ?

Thanks

Ability to modify toolbar interface styles?

Are the icons styled according to Strapi's design system? They are extremely difficult to make out when they're placed inside button styles. BTW, this is my main gripe with Strapi's default editor.

Is there anyway to make the icons more approachable akin to TipTap's own website?

[Feature request] Horizontal Line

Would love to have this feature!
It's actually already implemented by typing (---), but a symbol in the menu would be great.

Text alignment right - setting button: not working

Text alignment right - setting button: not working

Edit Source

Hey, unsure if this is in the plugin presently (let me know if I'm wrong, I cannot find how), but it'd be really helpful to be able to "edit source" on this widget. So for example, to be able to edit it as the html source itself so I can add custom classes, javascript, html etc.

If I'm missing how, please let me know. If not, I suggest that as a future feature!

Failed to add horizontal Line

Getting the following error in the console when trying to add a horizontal line:

RangeError: Adding different instances of a keyed plugin (plugin$)

on strapi 4.6.0 after
Install the dependency
npm install strapi-tiptap-editor
and
Build the Strapi Admin
npm run build

start dev server.
npm run develop

I got this error:

RangeError: Adding different instances of a keyed plugin (plugin$)
    at main.c8ae448b.js:3448:28828
    at Array.forEach (<anonymous>)
    at new V1 (main.c8ae448b.js:3448:28774)
    at V1.value (main.c8ae448b.js:3448:30624)
    at v.createView (main.c8ae448b.js:3441:3229)
    at new v2 (main.c8ae448b.js:3441:1039)
    at new v (main.c8ae448b.js:3443:21456)
    at main.c8ae448b.js:3443:27230
    at k6 (main.c8ae448b.js:1136:6971)
    at o.unstable_runWithPriority (main.c8ae448b.js:1164:3947)

[Bug] Multiple formatted text fields cannot be used

Strapi Version: 4.3.8
Tested Plugin Version: 0.9.0 , 0.8.1
Browser: Chrome, Firefox

What is the issue?

In all single types where I have inserted more than one formatted text field, only a white page appears.

Steps to Repoduce?

Add two formatted text fields to a singletype, then open this singletype to edit it. A white page appears.

When I remove the plugin, everything works fine again. After adding it, the error occurs again. Tested in a development environment and in a productive environment. (env variable)

With Plugin installed: If I delete the second text field, everythings works fine again. I add second text field error white site appears.

Error Messages?

Yes in Browser Console.

Uncaught Error: Minified React error #301; visit https://reactjs.org/docs/error-decoder.html?invariant=301 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Data Structure:

Alt to images

Hello, thank you for a great library.
Is there any way to attach alt text to images?

[bug] Internationalization

While switching between two locales, the editor shows the content of the locale before.
[Locale: German] -> Editor shows German content

• switch to English -
  [Locale: English] -> Editor shows German content
• switch to German -
  [Locale: German] -> Editor shows English content

It only shows the correct content for the locale when reloading.

Scope starts with ‘.’ or ‘_’: _ueberdosis

Hello there, I am facing the issue while trying to deploy my app. I have found the related issue on TipTap repo.
ueberdosis/tiptap#3000

[bug] Internationalization is back

The bug with Internationalization is back. See #4
Tested with 0.7.3 and 0.7.7.
When i refresh the page the good content is shown.

Can you also show the world icon when Internationalization is enabled.

Add support for cmd/cntrl Z (undo,redo)

Maybe I'm dumb, but CMD+Z doesn't do anything. Some undo functionality would be top

Integration with Strapi Admin Dashboard v.4.4.6

Hi,
I installed the editor using 'npm i strapi-tiptap-editor' but in development mode, strapi is not picking up the editor directly. Is there any configuration needed after that in config/plugins.js?

Is it possible to add id's in order to use anchors on the Headings?

I've installed this to add some Rich text editor functionality, and can easily add headings etc, but can't add an id onto them to use them as internal anchor points when linking to the page. For example, a Table of Contents component.

Is this possible?

[suggestion] Add Iframe extension

For embeds (https://tiptap.dev/experiments/embeds), the Iframe extension is required. As of now, I can't find a proper way to include Youtube videos for example.

So, it would be great, if you could add support for it.

Inline `code` styling issues

Hello.
First of all, thanks for this wonderful plugin. I've been using tiptap a lot lately and it was painful not to have it inside Strapi.
I've noticed the code styling gets overriden by some CSS reset directives:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit; /* here */
  vertical-align: baseline;
}

I've managed to fix this by simply specifying the font family explicitly in the stlying.
However a few questions appear:

Font family

There's a specified JetBrainsMono font family in the pre directive:

pre {
  background: #0d0d0d;
  color: #fff;
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

Is that font supposed to be included in the package? I don't have it installed on my machine and it simply defaults to monospace to me.

Background

Also. the code directive states:

code {
  background-color: rgba(#616161, 0.1);
  color: #616161;
}

But the built output loses the background color

.iGEXnP .ProseMirror code {
  color: rgb(97, 97, 97);
}

This shouldn't happen either, right?

---

If it's okay with you I can make a PR adressing all of this stuff.

[question/suggestion] Inline-code, Image caption, Raw HTML...

Thanks for your contribute.

I think these functions are very commonly used:

• Inline-code
• Images's caption
• Raw HTML Snippet

Do you have plans to develop these features? Or what should I do to make the editor support these styles?

Horizontal Ruler Not Visible

Horizontal ruler <hr> not visible in the editor when input with "---" markdown.

Being caused by following in css.

.ProseMirror hr {
    border: none;
}

Not working with Node 18 (last LTS)

I got the following error: [email protected]: The engine "node" is incompatible with this module. Expected version ">=12.x.x <=16.x.x". Got "18.12.1"

[question/suggestion] How to add TextStyle extension

Thanks for this awesome package! It makes everything easy.

I do have a question, how to add text style extension to use in strapi? TextStyle came in as an extension for tiptap, but not sure how to config it to use in strapi-tiptap-editor

Custom configuration for test-styles and tags?

I'm looking for a way to add custom-configuration for additional styles.

Ie we're using h3 with two styles and I'd love to be able to use those by having Heading 3 as well as an Heading 3 (alt) option.
Is that something that can be done? Happy to look into myself if I get a hint on where to add this.
Thanks!

onHeadingChange is not defined , strapi V 4.1.5 strapi-tiptap-editor 0.7.2

hi,
when i try to choose something different to paragaph

i get this error

Not working with strapi 4.6.0

warning "strapi-tiptap-editor > @strapi/[email protected]" has unmet peer dependency "react@^17.0.1". warning "strapi-tiptap-editor > @strapi/[email protected]" has unmet peer dependency "react-dom@^17.0.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-model@^1.18.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-model@^1.18.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-gapcursor@^1.3.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-commands@^1.3.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-keymap@^1.2.0". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-model@^1.18.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-schema-list@^1.2.2". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-transform@^1.7.0". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-view@^1.28.2". warning "strapi-tiptap-editor > [email protected]" has unmet peer dependency "react@*". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "react@^17.0.0 || ^18.0.0". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "react-dom@^17.0.0 || ^18.0.0". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "@tiptap/prosemirror-tables@^1.1.3". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-model@^1.18.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1". warning "strapi-tiptap-editor > @tiptap/[email protected]" has unmet peer dependency "prosemirror-view@^1.28.2". warning "strapi-tiptap-editor > @tiptap/react > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1". warning "strapi-tiptap-editor > @tiptap/react > @tiptap/[email protected]" has unmet peer dependency "prosemirror-state@^1.4.1".

Even after installing all dependencies are still not working, causing a blank page in the Strapi admin panel after picking editor content.

[question/suggestion] Link target blank

Hey,

thank you for your work on this plugin, it makes using Strapi way better :)

One question/suggestion: Could you please add the ability to decide if a link has target blank or not?

Thank you very much!

Saving as JSON format

It will be nice to save the data as JSON.
You could e.g. add on boolean field "Save as JSON".

[Suggestion] Adding a word count

As a blogger who is using Strapi CMS for my backend with your Plugin installed.
I feel having the word count displayed on the right-hand side will help us to know the length of our content with ease and this will help to boost other writer's speed who are trying to write a certain amount of characters/word count.

I look forward to seeing this implemented in the next update.
Best Regards
Joshua Oyewole

Unsplash & Giphy support

Hello, thank you for an awesome plugin. Works great. One thing related to images tho. I try to make a quick blog on a budget. So I can't afford to store images by myself. An obvious choice would be to use Unsplash and Giphy. Is there any chance to make your plugin work with it? maybe smth similar like this - https://github.com/kwinyyyc/strapi-plugin-zeasy-image-api

[question/suggestion] How to add highlight extension?

Highlight came in as an extension for tiptap, but not sure how add or config it to use in strapi-tiptap-editor.

Blank white screen when navigating to Content Manager page after updating to 0.7.0

Hello, after updating to 0.7.0, when I navigate to the Content Manager section of the site, the page would begin to render for a split-second, then turn blank.

I noticed that just saving the settings in Settings > Strapi Tiptap Editor > Settings cleared up the issue and allowed me to visit the Content Manager section. I was able to reproduce this both locally and on a live personal project. Then confirmed on a fresh project with only a few Rich Text fields and only strapi-tiptap-editor installed.

I'm using Node 16.13.1, let me know if there's any additional info that'd be helpful. Thanks!

[Feature Request] Option to remove nofollow from links

@dasmikko
Currently, by default all the links contain rel="noopener noreferrer nofollow" and there is no option to change the same in Strapi CMS.

We are facing issues in SEO as the links in the rich text editor are not crawled due to nofollow
Please add an option so as to change it as per requirement.

Remove style property from paragraph when no column layout

[question] Is there a possibility to remove style="column-count: 1" from paragraph element when I don't choose layout column?

Feature Request: Option to use hard line breaks

https://tiptap.dev/api/nodes/hard-break

Errors with Strapi 4.4.3

There are 2 major errors after installing this plugin that prevent me from reaching the content modeling area of Strapi.

main.de2e0941.js:9535 TypeError: Property description must be an object: -
    at defineProperties (<anonymous>)
    at i (main.de2e0941.js:24:32388)
    at t (main.de2e0941.js:9008:24884)
    at r (main.de2e0941.js:9008:21485)
    at cs (content-type-builder.17529402.chunk.js:788:21117)
    at e5 (main.de2e0941.js:9533:54803)
    at N3 (main.de2e0941.js:9537:9232)
    at D3 (main.de2e0941.js:9537:992)
    at n6 (main.de2e0941.js:9537:920)
    at g5 (main.de2e0941.js:9537:771)
D5 @ main.de2e0941.js:9535
main.de2e0941.js:9565 Uncaught TypeError: Property description must be an object: -
    at defineProperties (<anonymous>)
    at i (main.de2e0941.js:24:32388)
    at t (main.de2e0941.js:9008:24884)
    at r (main.de2e0941.js:9008:21485)
    at cs (content-type-builder.17529402.chunk.js:788:21117)
    at e5 (main.de2e0941.js:9533:54803)
    at N3 (main.de2e0941.js:9537:9232)
    at D3 (main.de2e0941.js:9537:992)
    at n6 (main.de2e0941.js:9537:920)
    at g5 (main.de2e0941.js:9537:771)

[bug] Double spaces

When I insert a double space in " " in the editor and save and go back in the editors gets very buggy.

To recreate (using Chrome)

• Create a new post
• insert asdf asdf in the editor.
• Save and close
• Go back in. You can now select the text.
• Insert one more space in between asdf and asdf
• Save and close
• Go back in and you cannot select the text, cursor just jumps to the end.