Fix novel styling affecting other TipTap instances

[arthureberledev]

With the current implementation, every single instance of TipTap inside an application is affected by the styling of this library.

This is due the global .Prosemirror styling in the prosemirror.css file, e.g.

.ProseMirror {
  @apply novel-p-12 novel-px-8 sm:novel-px-12;
}
.ProseMirror .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--novel-stone-400);
  pointer-events: none;
  height: 0;
}
.ProseMirror .is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--novel-stone-400);
  height: 0;
}

As an easy fix, I've introduced a custom .novel-tiptap css class and included it inside the defaultEditorProps object and replaced the .ProseMirror classes (where applicable without side effects):

.novel-tiptap .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--novel-stone-400);
  pointer-events: none;
  height: 0;
}
.novel-tiptap .is-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--novel-stone-400);
  pointer-events: none;
  height: 0;
}

I've also moved the novel-p-12 novel-px-8 sm:novel-px-12 part to the defaultEditorProps object, since I've found it odd, that there were 2 places where the editor was styled with tailwindcss. This also allows to override the padding, which was not possible before.

[vercel[bot]]

@arthureberledev is attempting to deploy a commit to the Elegance Team on Vercel.

A member of the Team first needs to authorize it.

[andrewdoro]

0.2.0-canary.0 https://novel.sh/docs/guides/tailwind/setup#add-styles this can be fixed now at library consumer level