From b5693182da8cd5551388cc267cce2c9ae6525a64 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Fri, 6 Dec 2024 15:00:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20LexicalEditor=E5=9C=A8form=E4=B8=AD?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LexicalEditor/plugins/ToolbarPlugin.jsx   | 30 +++++++++----------
 src/components/LexicalEditor/ui/Modal.css     |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx b/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
index 4eeb2a8..8142b96 100644
--- a/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
+++ b/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
@@ -427,27 +427,27 @@ function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockO
 
   return (
     <div className='dropdown' ref={dropDownRef}>
-      <button className='item' onClick={formatParagraph}>
+      <button type='button' className='item' onClick={formatParagraph}>
         <span className='icon paragraph' />
         <span className='text'>Normal</span>
         {blockType === 'paragraph' && <span className='active' />}
       </button>
-      <button className='item' onClick={formatLargeHeading}>
+      <button type='button' className='item' onClick={formatLargeHeading}>
         <span className='icon large-heading' />
         <span className='text'>Heading 1</span>
         {blockType === 'h1' && <span className='active' />}
       </button>
-      <button className='item' onClick={formatSmallHeading}>
+      <button type='button' className='item' onClick={formatSmallHeading}>
         <span className='icon small-heading' />
         <span className='text'>Heading 2</span>
         {blockType === 'h2' && <span className='active' />}
       </button>
-      <button className='item' onClick={formatSmallHeading3}>
+      <button type='button' className='item' onClick={formatSmallHeading3}>
         <span className='icon h3' />
         <span className='text'>Heading 3</span>
         {blockType === 'h3' && <span className='active' />}
       </button>
-      <button className='item' onClick={formatBulletList}>
+      <button type='button' className='item' onClick={formatBulletList}>
         <span className='icon bullet-list' />
         <span className='text'>Bullet List</span>
         {blockType === 'ul' && <span className='active' />}
@@ -767,7 +767,7 @@ export default function ToolbarPlugin() {
 
   return (
     <div className='toolbar' ref={toolbarRef}>
-      <button
+      <button type='button'
         disabled={!canUndo}
         onClick={() => {
           editor.dispatchCommand(UNDO_COMMAND);
@@ -776,7 +776,7 @@ export default function ToolbarPlugin() {
         aria-label='Undo'>
         <i className='format undo' />
       </button>
-      <button
+      <button type='button'
         disabled={!canRedo}
         onClick={() => {
           editor.dispatchCommand(REDO_COMMAND);
@@ -788,7 +788,7 @@ export default function ToolbarPlugin() {
       <Divider />
       {supportedBlockTypes.has(blockType) && (
         <>
-          <button className='toolbar-item block-controls' onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)} aria-label='Formatting Options'>
+          <button type='button' className='toolbar-item block-controls' onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)} aria-label='Formatting Options'>
             <span className={'icon block-type ' + blockType} />
             <span className='text'>{blockTypeToBlockName[blockType]}</span>
             <i className='chevron-down' />
@@ -815,7 +815,7 @@ export default function ToolbarPlugin() {
           editor={editor}
         />
         <Divider />
-          <button
+          <button type='button'
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
             }}
@@ -823,7 +823,7 @@ export default function ToolbarPlugin() {
             aria-label='Format Bold'>
             <i className='format bold' />
           </button>
-          <button
+          <button type='button'
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
             }}
@@ -831,7 +831,7 @@ export default function ToolbarPlugin() {
             aria-label='Format Italics'>
             <i className='format italic' />
           </button>
-          <button
+          <button type='button'
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
             }}
@@ -839,7 +839,7 @@ export default function ToolbarPlugin() {
             aria-label='Format Underline'>
             <i className='format underline' />
           </button>
-          <button
+          <button type='button'
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
             }}
@@ -847,7 +847,7 @@ export default function ToolbarPlugin() {
             aria-label='Format Strikethrough'>
             <i className='format strikethrough' />
           </button>
-          {/* <button
+          {/* <button type='button'
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
             }}
@@ -856,11 +856,11 @@ export default function ToolbarPlugin() {
           >
             <i className="format code" />
           </button> */}
-          <button onClick={insertLink} className={'toolbar-item spaced ' + (isLink ? 'active' : '')} aria-label='Insert Link'>
+          <button type='button' onClick={insertLink} className={'toolbar-item spaced ' + (isLink ? 'active' : '')} aria-label='Insert Link'>
             <i className='format link' />
           </button>
           {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
-          <button onClick={insertHorizontalRule}
+          <button type='button' onClick={insertHorizontalRule}
             // onClick={() => {
             //   editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
             // }}
diff --git a/src/components/LexicalEditor/ui/Modal.css b/src/components/LexicalEditor/ui/Modal.css
index 908500b..73613c0 100644
--- a/src/components/LexicalEditor/ui/Modal.css
+++ b/src/components/LexicalEditor/ui/Modal.css
@@ -20,7 +20,7 @@
   background-color: rgba(40, 40, 40, 0.6);
   flex-grow: 0px;
   flex-shrink: 1px;
-  z-index: 100;
+  z-index: 1200;
 }
 .Modal__modal {
   padding: 20px;