johnpuddephatt / gutentap

Tiptap based block editor

gutentap

Demo here

Project setup

Install with npm install gutentap.

import { GutenTap }  from "gutentap"
import 'gutentap/style.css'

<GutenTap v-model="content" mode="json" />

Mode can be json or html.

To do

• Make package an installable library
• Add HTML/JSON 'mode' property
• Fix bullet/numbered list toggle
• Small/touch screen optimisation
• Add table tools (new row/delete row etc)
• Create vue components for key UI elements – e.g. dropdown menus
• Improve titles/tooltips with some sort of popover (tippy?)
• Add property to block tools determining if they can be converted
• add […] menu to end of floating toolbar: delete block, duplicate block
• import blockquote separately to starter kit and extend it to only support paragraph tags
• block width tool works on nested paragraphs (e.g. inside blockquote)
• block width tool double icon when applied to blockquote (look at logic for showing icons... isActiveTest which uses .isActive() https://tiptap.dev/api/editor#is-active we can specify block type which should help – feed in top level block? )
• explore fix for buggyness of inline* for tablecell content
• harmonize approach for finding/selecting parent block - e.g. https://github.com/ueberdosis/tiptap/blob/8c6751f0c638effb22110b62b40a1632ea6867c9/packages/core/src/commands/deleteNode.ts

gutentap's Issues

License file?

Just saw your Reddit post. Very nice! I'd love to try this in an app I'm building but there's no license file. Is it MIT? Would you be able to add one?

Expose "editable" property

Hello, this is an amazing project!

Q: Is there a way to expose the editor's editable propery (and maybe others)? I'm trying to create an instance of GutenTap editor that can be toggled between read/edit mode.

Perhaps a new prop? Or using defineExpose?

Nuxt 3 support

I really like this project.

How to use this in Nuxt 3?

Dragging issues?

This seems really good. But - there might be an issue with dragging. If I'm dragging a paragraph (or anything), it seems to disappear after dropping it.

https://gutentap.letsdance.agency/

Placeholder

How to change placeholder?