优化FootnoteDefinition组件样式，添加导出图标并调整间距；更新CSS以支持响应式宽度

Author: chenshuai2144

src/MarkdownEditor/editor/elements/FootnoteDefinition.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { ExportOutlined } from '@ant-design/icons';
+import React, { useMemo } from 'react';
 import { Node } from 'slate';
 import { ElementProps, FootnoteDefinitionNode } from '../../el';
 import { useEditorStore } from '../store';
@@ -24,6 +25,7 @@ export const FootnoteDefinition = (
           fontSize: '12px',
           margin: '5px 0',
           display: 'flex',
+          gap: 4,
         }}
         contentEditable={false}
         data-be={'footnoteDefinition'}
@@ -39,11 +41,17 @@ export const FootnoteDefinition = (
           style={{
             color: '#1677ff',
             textDecoration: 'none',
-            marginLeft: '5px',
             cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
           }}
+          target="_blank"
+          rel="noopener noreferrer"
         >
           {props.children}
+
+          <ExportOutlined />
         </a>
       </div>
     );

src/MarkdownEditor/index.css

@@ -120,7 +120,7 @@
   border: 1px solid #0000001a;
   margin-bottom: 0.5em;
   font-size: 14px;
-  min-width: 320px;
+  min-width: min(320px, 100%);
 }
 
 .ace-container.frontmatter:before {

tests/demo/__snapshots__/src/MarkdownEditor/demos/FncTooltip.snap

@@ -455,12 +455,14 @@
             contenteditable="false"
             data-be="footnoteDefinition"
             data-slate-node="element"
-            style="font-size: 12px; margin: 5px 0px; display: flex;"
+            style="font-size: 12px; margin: 5px 0px; display: flex; gap: 4px;"
           >
             1.
             <a
               href="#md-editor-ref1"
-              style="color: rgb(22, 119, 255); text-decoration: none; margin-left: 5px; cursor: pointer;"
+              rel="noopener noreferrer"
+              style="color: rgb(22, 119, 255); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 2px;"
+              target="_blank"
             >
               <span
                 data-slate-node="text"
@@ -495,6 +497,26 @@
                   </span>
                 </span>
               </span>
+              <span
+                aria-label="export"
+                class="anticon anticon-export"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="export"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.1-256.3z"
+                  />
+                </svg>
+              </span>
             </a>
           </div>
           <div

tests/demo/__snapshots__/src/MarkdownEditor/demos/footnoteReference.snap

@@ -200,12 +200,14 @@
             contenteditable="false"
             data-be="footnoteDefinition"
             data-slate-node="element"
-            style="font-size: 12px; margin: 5px 0px; display: flex;"
+            style="font-size: 12px; margin: 5px 0px; display: flex; gap: 4px;"
           >
             doc_0.
             <a
               href="#md-editor-refdoc_0"
-              style="color: rgb(22, 119, 255); text-decoration: none; margin-left: 5px; cursor: pointer;"
+              rel="noopener noreferrer"
+              style="color: rgb(22, 119, 255); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 2px;"
+              target="_blank"
             >
               <span
                 data-slate-node="text"
@@ -225,19 +227,41 @@
                   </span>
                 </span>
               </span>
+              <span
+                aria-label="export"
+                class="anticon anticon-export"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="export"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.1-256.3z"
+                  />
+                </svg>
+              </span>
             </a>
           </div>
           <div
             class="ant-md-editor-drag-el empty"
             contenteditable="false"
             data-be="footnoteDefinition"
             data-slate-node="element"
-            style="font-size: 12px; margin: 5px 0px; display: flex;"
+            style="font-size: 12px; margin: 5px 0px; display: flex; gap: 4px;"
           >
             doc_1.
             <a
               href="#md-editor-refdoc_1"
-              style="color: rgb(22, 119, 255); text-decoration: none; margin-left: 5px; cursor: pointer;"
+              rel="noopener noreferrer"
+              style="color: rgb(22, 119, 255); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 2px;"
+              target="_blank"
             >
               <span
                 data-slate-node="text"
@@ -257,6 +281,26 @@
                   </span>
                 </span>
               </span>
+              <span
+                aria-label="export"
+                class="anticon anticon-export"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="export"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.1-256.3z"
+                  />
+                </svg>
+              </span>
             </a>
           </div>
           <div

tests/demo/__snapshots__/src/MarkdownEditor/demos/min-render.snap

@@ -9695,12 +9695,14 @@
                 contenteditable="false"
                 data-be="footnoteDefinition"
                 data-slate-node="element"
-                style="font-size: 12px; margin: 5px 0px; display: flex;"
+                style="font-size: 12px; margin: 5px 0px; display: flex; gap: 4px;"
               >
                 1.
                 <a
                   href="#md-editor-ref1"
-                  style="color: rgb(22, 119, 255); text-decoration: none; margin-left: 5px; cursor: pointer;"
+                  rel="noopener noreferrer"
+                  style="color: rgb(22, 119, 255); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 2px;"
+                  target="_blank"
                 >
                   <span
                     data-slate-node="text"
@@ -9718,19 +9720,41 @@
                       </span>
                     </span>
                   </span>
+                  <span
+                    aria-label="export"
+                    class="anticon anticon-export"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="export"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.1-256.3z"
+                      />
+                    </svg>
+                  </span>
                 </a>
               </div>
               <div
                 class="ant-md-editor-drag-el"
                 contenteditable="false"
                 data-be="footnoteDefinition"
                 data-slate-node="element"
-                style="font-size: 12px; margin: 5px 0px; display: flex;"
+                style="font-size: 12px; margin: 5px 0px; display: flex; gap: 4px;"
               >
                 2.
                 <a
                   href="#md-editor-ref2"
-                  style="color: rgb(22, 119, 255); text-decoration: none; margin-left: 5px; cursor: pointer;"
+                  rel="noopener noreferrer"
+                  style="color: rgb(22, 119, 255); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 2px;"
+                  target="_blank"
                 >
                   <span
                     data-slate-node="text"
@@ -9748,6 +9772,26 @@
                       </span>
                     </span>
                   </span>
+                  <span
+                    aria-label="export"
+                    class="anticon anticon-export"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="export"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.1-256.3z"
+                      />
+                    </svg>
+                  </span>
                 </a>
               </div>
             </div>

tests/demo/__snapshots__/src/MarkdownEditor/demos/min.snap

@@ -6855,12 +6855,14 @@
               contenteditable="false"
               data-be="footnoteDefinition"
               data-slate-node="element"
-              style="font-size: 12px; margin: 5px 0px; display: flex;"
+              style="font-size: 12px; margin: 5px 0px; display: flex; gap: 4px;"
             >
               1.
               <a
                 href="#md-editor-ref1"
-                style="color: rgb(22, 119, 255); text-decoration: none; margin-left: 5px; cursor: pointer;"
+                rel="noopener noreferrer"
+                style="color: rgb(22, 119, 255); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 2px;"
+                target="_blank"
               >
                 <span
                   data-slate-node="text"
@@ -6878,19 +6880,41 @@
                     </span>
                   </span>
                 </span>
+                <span
+                  aria-label="export"
+                  class="anticon anticon-export"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="export"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.1-256.3z"
+                    />
+                  </svg>
+                </span>
               </a>
             </div>
             <div
               class="ant-md-editor-drag-el"
               contenteditable="false"
               data-be="footnoteDefinition"
               data-slate-node="element"
-              style="font-size: 12px; margin: 5px 0px; display: flex;"
+              style="font-size: 12px; margin: 5px 0px; display: flex; gap: 4px;"
             >
               2.
               <a
                 href="#md-editor-ref2"
-                style="color: rgb(22, 119, 255); text-decoration: none; margin-left: 5px; cursor: pointer;"
+                rel="noopener noreferrer"
+                style="color: rgb(22, 119, 255); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 2px;"
+                target="_blank"
               >
                 <span
                   data-slate-node="text"
@@ -6908,6 +6932,26 @@
                     </span>
                   </span>
                 </span>
+                <span
+                  aria-label="export"
+                  class="anticon anticon-export"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="export"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M880 912H144c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h360c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H184v656h656V520c0-4.4 3.6-8 8-8h56c4.4 0 8 3.6 8 8v360c0 17.7-14.3 32-32 32zM770.87 199.13l-52.2-52.2a8.01 8.01 0 014.7-13.6l179.4-21c5.1-.6 9.5 3.7 8.9 8.9l-21 179.4c-.8 6.6-8.9 9.4-13.6 4.7l-52.4-52.4-256.2 256.2a8.03 8.03 0 01-11.3 0l-42.4-42.4a8.03 8.03 0 010-11.3l256.1-256.3z"
+                    />
+                  </svg>
+                </span>
               </a>
             </div>
           </div>