can't interact with editor

[odigity]

I wanted to try this out, so I created a new Django v3.2.13 project and created a single model:

class Story(models.Model):
    title    = models.CharField(max_length=255)
    contents = TipTapTextField()

When I try to add a story in Django Admin, I see a resizable white rectangle that looks like a text box - however, I can't interact with it at all. Clicking does nothing, not even placing a cursor.

I tried both Firefox and Chromium on Ubuntu 20.04.

[sereneinserenade]

I would need more info. What does the network tab of the devtools say about request to skypack CDN. I suspect that the files are taking too much time in loading it...

[odigity]

I opened the network tab and clicked Add. The list was too long to capture in a single screenshot, so there's two slightly-overlapping ones:

I also chose "Save All As HAR File", but GitHub won't let me attach it.

However, I think a better clue is the contents of the Console:

[sereneinserenade]

have you provided it with the tiptapOutputFormat parameter? take a look here

django_tiptap/django_tiptap/templates/forms/tiptap_textarea.html

Lines 1350 to 1354 in ba895a9

	// {% if widget.config.tiptapOutputFormat == "html" %}
	let initialEditorContent = textArea.value.trim()
	// {% elif widget.config.tiptapOutputFormat == "json" %}
	let initialEditorContent = JSON.parse(textArea.value)
	// {% endif %}

. if you don't provide anything, it would not be able to set that variable and so it'll throw an error.

valid values are "html" or "json"

[odigity]

have you provided it with the tiptapOutputFormat parameter?

I didn't know that was required. Based on the README,md, all I did was:

1. add "django_tiptap" to INSTALLED_APPS
2. add a model field of type django_tiptap.fields.TipTapTextField

Where/how am I supposed to set the value? Is it in the config? Because the config section of README.md indicates that DJANGO_TIPTAP_CONFIG["tiptapOutputFormat"] already defaults to "html".

[sereneinserenade]

Locally it works for me, maybe @solen0id might be able to help out on this one

[farin]

Django 5, letest package, same error
Uncaught ReferenceError: initialEditorContent is not defined

and editor doesn't work

[enzedonline]

I had this problem (also using Django 5) then noticed that the css hadn't been included anywhere. Needed to add the following to my form template -

<link rel="stylesheet" href="{% static 'django_tiptap/css/styles.css' %}">

Once I had that, the form renders (although the toolbar only starts to render once the widget gets focus). The formatting is all over the place for the toolbar, though I think this may just be that the svg's aren't particularly consistent in size and centering.

There's a problem with the tippy dropdown for table. It renders off-screen (and hidden) if the button is at the right. Seems some text/fields missing from it as well:

The form template also has a syntax error - line 3-4, the include directive is split over 2 lines so is not interpreted by django, should be:

{% include "django/forms/widgets/attrs.html" %}