docs: update

hunghg255 · hunghg255 · commit df1e53caaf7f · 2025-12-31T16:02:53.000+07:00
diff --git a/docs/extensions/Attachment/index.md b/docs/extensions/Attachment/index.md
@@ -59,9 +59,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextAttachment /> {/* [!code ++] */}
-    </div>
+    <RichTextAttachment /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Blockquote/index.md b/docs/extensions/Blockquote/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextBlockquote /> {/* [!code ++] */}
-    </div>
+    <RichTextBlockquote /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Bold/index.md b/docs/extensions/Bold/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextBold /> {/* [!code ++] */}
-    </div>
+    <RichTextBold /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/BulletList/index.md b/docs/extensions/BulletList/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextBulletList /> {/* [!code ++] */}
-    </div>
+    <RichTextBulletList /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Callout/index.md b/docs/extensions/Callout/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextCallout /> {/* [!code ++] */}
-    </div>
+    <RichTextCallout /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Clear/index.md b/docs/extensions/Clear/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextClear /> {/* [!code ++] */}
-    </div>
+    <RichTextClear /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Code/index.md b/docs/extensions/Code/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextCode /> {/* [!code ++] */}
-    </div>
+    <RichTextCode /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/CodeBlock/index.md b/docs/extensions/CodeBlock/index.md
@@ -68,9 +68,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextCodeBlock /> {/* [!code ++] */}
-    </div>
+    <RichTextCodeBlock /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/CodeView/index.md b/docs/extensions/CodeView/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextCodeView /> {/* [!code ++] */}
-    </div>
+    <RichTextCodeView /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Color/index.md b/docs/extensions/Color/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextColor /> {/* [!code ++] */}
-    </div>
+    <RichTextColor /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Column/index.md b/docs/extensions/Column/index.md
@@ -63,9 +63,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextColumn /> {/* [!code ++] */}
-    </div>
+    <RichTextColumn /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Drawer/index.md b/docs/extensions/Drawer/index.md
@@ -58,9 +58,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextDrawer /> {/* [!code ++] */}
-    </div>
+    <RichTextDrawer /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Emoji/index.md b/docs/extensions/Emoji/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextEmoji /> {/* [!code ++] */}
-    </div>
+    <RichTextEmoji /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Excalidraw/index.md b/docs/extensions/Excalidraw/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextExcalidraw /> {/* [!code ++] */}
-    </div>
+    <RichTextExcalidraw /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/ExportPdf/index.md b/docs/extensions/ExportPdf/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextExportPdf /> {/* [!code ++] */}
-    </div>
+    <RichTextExportPdf /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/ExportWord/index.md b/docs/extensions/ExportWord/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextExportWord /> {/* [!code ++] */}
-    </div>
+    <RichTextExportWord /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/FontFamily/index.md b/docs/extensions/FontFamily/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextFontFamily /> {/* [!code ++] */}
-    </div>
+    <RichTextFontFamily /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/FontSize/index.md b/docs/extensions/FontSize/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextFontSize /> {/* [!code ++] */}
-    </div>
+    <RichTextFontSize /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Heading/index.md b/docs/extensions/Heading/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextHeading /> {/* [!code ++] */}
-    </div>
+    <RichTextHeading /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Highlight/index.md b/docs/extensions/Highlight/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextHighlight /> {/* [!code ++] */}
-    </div>
+    <RichTextHighlight /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/HorizontalRule/index.md b/docs/extensions/HorizontalRule/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextHorizontalRule /> {/* [!code ++] */}
-    </div>
+    <RichTextHorizontalRule /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Iframe/index.md b/docs/extensions/Iframe/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextIframe /> {/* [!code ++] */}
-    </div>
+    <RichTextIframe /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Image/index.md b/docs/extensions/Image/index.md
@@ -74,9 +74,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextImage /> {/* [!code ++] */}
-    </div>
+    <RichTextImage /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/ImageGif/index.md b/docs/extensions/ImageGif/index.md
@@ -58,9 +58,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextImageGif /> {/* [!code ++] */}
-    </div>
+    <RichTextImageGif /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/ImportWord/index.md b/docs/extensions/ImportWord/index.md
@@ -71,9 +71,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextImportWord /> {/* [!code ++] */}
-    </div>
+    <RichTextImportWord /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Indent/index.md b/docs/extensions/Indent/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextIndent /> {/* [!code ++] */}
-    </div>
+    <RichTextIndent /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Italic/index.md b/docs/extensions/Italic/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextItalic /> {/* [!code ++] */}
-    </div>
+    <RichTextItalic /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Katex/index.md b/docs/extensions/Katex/index.md
@@ -58,9 +58,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextKatex /> {/* [!code ++] */}
-    </div>
+    <RichTextKatex /> {/* [!code ++] */}
   )
 }
 
@@ -84,26 +82,3 @@ const App = () => {
 };
 ```
 
-## Configuration bubble menu
-
-```tsx
-import { BubbleMenuKatex } from 'reactjs-tiptap-editor/bubble-extra'; // [!code ++]
-
-const App = () => {
-
-  return  <RichTextEditor
-    bubbleMenu={{
-      render({ extensionsNames, editor, disabled }, bubbleDefaultDom) {
-        return <>
-          {bubbleDefaultDom}
-
-          {extensionsNames.includes('katex')  ? <BubbleMenuKatex disabled={disabled}
-            editor={editor}
-            key="katex"
-          /> : null}
-        </>
-      },
-    }}
-  />
-}
-```
diff --git a/docs/extensions/LineHeight/index.md b/docs/extensions/LineHeight/index.md
@@ -55,9 +55,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextLineHeight /> {/* [!code ++] */}
-    </div>
+    <RichTextLineHeight /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Link/index.md b/docs/extensions/Link/index.md
@@ -57,9 +57,7 @@ const extensions = [
 
 const RichTextToolbar = () => {
   return (
-    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
-      <RichTextLink /> {/* [!code ++] */}
-    </div>
+    <RichTextLink /> {/* [!code ++] */}
   )
 }
 
diff --git a/docs/extensions/Mention/index.md b/docs/extensions/Mention/index.md
@@ -35,6 +35,7 @@ import { Mention } from 'reactjs-tiptap-editor/mention'; // [!code ++]
 // Import CSS
 import 'reactjs-tiptap-editor/style.css';
 
+// Mock Data for Mention
 const MOCK_USERS = [{
     id: '0',
     label: 'hunghg255',
diff --git a/docs/extensions/Mermaid/index.md b/docs/extensions/Mermaid/index.md
diff --git a/docs/extensions/MoreMark/index.md b/docs/extensions/MoreMark/index.md
diff --git a/docs/extensions/OrderedList/index.md b/docs/extensions/OrderedList/index.md
diff --git a/docs/extensions/SearchAndReplace/index.md b/docs/extensions/SearchAndReplace/index.md
diff --git a/docs/extensions/SlashCommand/index.md b/docs/extensions/SlashCommand/index.md
diff --git a/docs/extensions/Strike/index.md b/docs/extensions/Strike/index.md
diff --git a/docs/extensions/Table/index.md b/docs/extensions/Table/index.md
diff --git a/docs/extensions/TaskList/index.md b/docs/extensions/TaskList/index.md
diff --git a/docs/extensions/TextAlign/index.md b/docs/extensions/TextAlign/index.md
diff --git a/docs/extensions/TextDirection/index.md b/docs/extensions/TextDirection/index.md
diff --git a/docs/extensions/TextUnderline/index.md b/docs/extensions/TextUnderline/index.md
diff --git a/docs/extensions/Twitter/index.md b/docs/extensions/Twitter/index.md
diff --git a/docs/extensions/Video/index.md b/docs/extensions/Video/index.md
diff --git a/docs/guide/bubble-menu.md b/docs/guide/bubble-menu.md

Original file line number	Diff line number	Diff line change
`@@ -59,9 +59,7 @@ const extensions = [`
`59`	`59`
`60`	`60`	`const RichTextToolbar = () => {`
`61`	`61`	`return (`
`62`		`- <div className="flex items-center gap-2 flex-wrap border-b border-solid">`
`63`		`- <RichTextAttachment /> {/* [!code ++] */}`
`64`		`- </div>`
	`62`	`+ <RichTextAttachment /> {/* [!code ++] */}`
`65`	`63`	`)`
`66`	`64`	`}`
`67`	`65`
Original file line number	Diff line number	Diff line change
`@@ -57,9 +57,7 @@ const extensions = [`
`57`	`57`
`58`	`58`	`const RichTextToolbar = () => {`
`59`	`59`	`return (`
`60`		`- <div className="flex items-center gap-2 flex-wrap border-b border-solid">`
`61`		`- <RichTextBlockquote /> {/* [!code ++] */}`
`62`		`- </div>`
	`60`	`+ <RichTextBlockquote /> {/* [!code ++] */}`
`63`	`61`	`)`
`64`	`62`	`}`
`65`	`63`
Original file line number	Diff line number	Diff line change
`@@ -55,9 +55,7 @@ const extensions = [`
`55`	`55`
`56`	`56`	`const RichTextToolbar = () => {`
`57`	`57`	`return (`
`58`		`- <div className="flex items-center gap-2 flex-wrap border-b border-solid">`
`59`		`- <RichTextCallout /> {/* [!code ++] */}`
`60`		`- </div>`
	`58`	`+ <RichTextCallout /> {/* [!code ++] */}`
`61`	`59`	`)`
`62`	`60`	`}`
`63`	`61`
Original file line number	Diff line number	Diff line change
`@@ -68,9 +68,7 @@ const extensions = [`
`68`	`68`
`69`	`69`	`const RichTextToolbar = () => {`
`70`	`70`	`return (`
`71`		`- <div className="flex items-center gap-2 flex-wrap border-b border-solid">`
`72`		`- <RichTextCodeBlock /> {/* [!code ++] */}`
`73`		`- </div>`
	`71`	`+ <RichTextCodeBlock /> {/* [!code ++] */}`
`74`	`72`	`)`
`75`	`73`	`}`
`76`	`74`