Tiptap Lib in React. How do I add border to EditorContent?

Issue

I'm having difficult to edit editor section style

I'm using https://tiptap.dev/docs/editor/ Lib in Recat

Now I render editor with this

<EditorContent 
className='editor'
editor={props.editor}/>

my css

.editor p{
    margin: 1em 0;
    /* border: 1px solid #000; */
    /* border-radius: 2px; */
}

result when not click in textbox

result when click in textbox

I want to custom css style for that. Any documentations for this?

Solution

Tiptap, a rich-text editor framework for Vue.js. To add a border to the EditorContent component, you can customize the styles using CSS. However, keep in mind that Tiptap doesn't provide direct styling for the editor content out of the box, so you'll have to apply styles to the HTML elements generated by Tiptap.🔥

Here's an example of how you can add a border to the EditorContent:

<template>
  <EditorContent :editor="editor" class="custom-editor-content" />
</template>

<style scoped>
/* Add your custom styles for the editor content */
.custom-editor-content {
  border: 1px solid #000;
  border-radius: 2px;
  padding: 10px; /* Optional: Add some padding for better aesthetics */
}

/* Customize other elements as needed */
.custom-editor-content p {
 margin: 1em 0;
}
</style>

In this example, the custom-editor-content class is applied to the EditorContent component, and the CSS rules inside the tag will be scoped to affect only the elements within that component.🌟

🟢🟡🟣 You can explore Tiptap Docs: https://tiptap.dev/docs/editor/guide/styling

Answered By - Md Shah Jalal