From b80d1b56fcd6d2db77568f2e658071eccd52ed8e Mon Sep 17 00:00:00 2001 From: Ashkan Aleshams <90326959+AshkanAleshams@users.noreply.github.com> Date: Sun, 17 Mar 2024 22:40:13 -0400 Subject: [PATCH] Update Tiptap.md --- Topics/Tech_Stacks/Tiptap/Tiptap.md | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/Topics/Tech_Stacks/Tiptap/Tiptap.md b/Topics/Tech_Stacks/Tiptap/Tiptap.md index 287fd9111..b23df9581 100644 --- a/Topics/Tech_Stacks/Tiptap/Tiptap.md +++ b/Topics/Tech_Stacks/Tiptap/Tiptap.md @@ -41,7 +41,7 @@ There are multiple methods to install Tiptap, each tailored to a specific use ca ## Intro to Tiptap in React -_Include gifs, code snippets, explainations_ + **1. Create a project** @@ -75,10 +75,9 @@ Each button in the menu bar example code below takes three arguments. Taking the - The [`className`](https://legacy.reactjs.org/docs/faq-styling.html) is `is-active` or blank depending on whether the selected text is bolded. If the `is-active` `className` is present, the bold button in the menu bar will be emphasized. Here is the code sourced from [here](https://tiptap.dev/docs/editor/installation/react): -
- Tiptap.jsx + - ``` + ```` import { Color } from '@tiptap/extension-color' import ListItem from '@tiptap/extension-list-item' import TextStyle from '@tiptap/extension-text-style' @@ -198,11 +197,11 @@ Here is the code sourced from [here](https://tiptap.dev/docs/editor/installation StarterKit.configure({ bulletList: { keepMarks: true, - keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help + keepAttributes: false, }, orderedList: { keepMarks: true, - keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help + keepAttributes: false, }, }), ] @@ -228,9 +227,7 @@ Here is the code sourced from [here](https://tiptap.dev/docs/editor/installation } extensions={extensions} content={content}> ) } - ``` - -
+ ````