fix: LexicalEditor在form中使用

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);
             // }}

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;