feat: 调整Markdown编辑器样式以增强可读性和一致性 #249
Annotations
10 errors and 1 warning
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/rerender.tsx > renders src/MarkdownEditor/demos/rerender.tsx correctly 1` mismatched
- Expected
+ Received
@@ -51,11 +51,11 @@
</span>
</span>
</span>
</h2>
<p
- class="ant-md-editor-drag-el"
+ class="ant-md-editor-drag-el typewriter"
data-be="paragraph"
data-slate-node="element"
>
<span
data-slate-node="text"
@@ -67,33 +67,11 @@
draggable="false"
>
<span
data-slate-string="true"
>
- 腾讯 ，全称深圳市腾讯计算机系统有限公司 ，是由五位创始人共同创立的 ，他们是马化腾、张志东、许晨晔、陈一丹和曾李青 。 以下是关于这些创始人的详细信息： 马化腾 马化腾 ，1971 年 10 月 29 日出生于广东省东方县（现海南省东方市 )八所港 ，广东汕头人 ，汉族 ，无党派人士 。他毕业于深圳大学电子工程系计算机专业 。马化腾是腾讯科技（深圳 )有限公司的创始人、董事会主席、首席执行官 ，并曾是中华人民共和国第十二、十三届全国人民代表大会代表 。马化腾在 1998 年 11 月 11 日与合伙人共同注册成立了腾讯 ，并在 2004 年 6 月 16 日带领腾讯在香港联合交易所有限公司主板上市 。 张志东 张志东 ，马化腾的同学 ，被称为 QQ 之父 。他的计算机技术非常出色 ，曾是深圳大学最拔尖的学生之一 。张志东在腾讯担任 CTO ，并在 2014 年 9 月离职 ，转任腾讯公司终身荣誉顾问及腾讯学院荣誉院长等职位 。
- </span>
- </span>
- </span>
- </p>
- <p
- class="ant-md-editor-drag-el typewriter"
- data-be="paragraph"
- data-slate-node="element"
- >
- <span
- data-slate-node="text"
- >
- <span
- class=" "
- data-be="text"
- data-slate-leaf="true"
- draggable="false"
- >
- <span
- data-slate-string="true"
- >
- <!
+ 腾讯 ，全称深圳市腾讯计算机系统有限公司 ，是由五位创始人共同创立的 ，他们是马化腾、张志东、许晨晔、陈一丹和曾李青 。 以下是关于这些创始人的详细信息： 马化腾 马化腾 ，1971 年 10 月 29 日出生于广东省东方县（现海南省东方市 )八所港 ，广东汕头人 ，汉族 ，无党派人士 。
</span>
</span>
</span>
</p>
</div>
❯ tests/demo/demo.test.tsx:58:38
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/render.tsx > renders src/MarkdownEditor/demos/render.tsx correctly 1` mismatched
- Expected
+ Received
@@ -295,11 +295,11 @@
class="ant-card-body"
>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: block;"
@@ -357,11 +357,11 @@
data-slate-node="element"
style="display: flex; gap: 1px; max-width: 100%; min-width: 0; margin-bottom: 12px;"
>
<div
class="ant-md-editor-drag-el ant-md-editor-table ant-md-editor-content-table"
- style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 16px; display: flex; min-width: 0; box-shadow: none;"
+ style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 0.5em; display: flex; min-width: 0; box-shadow: none;"
>
<span
class="ant-md-editor-drag-handle"
contenteditable="false"
>
@@ -734,11 +734,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 52px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 52px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -760,11 +760,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -786,11 +786,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -812,11 +812,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/readonly.tsx > renders src/MarkdownEditor/demos/readonly.tsx correctly 1` mismatched
- Expected
+ Received
@@ -27,11 +27,11 @@
zindex="-1"
>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: none;"
@@ -61,11 +61,11 @@
data-slate-node="element"
style="flex: 1; min-width: 256px;"
>
<div
class="chart-box"
- style="display: flex; flex-direction: column; border-radius: 18px; overflow: auto;"
+ style="display: flex; flex-direction: column; border-radius: 0.5em; overflow: auto;"
>
<div
style="position: relative;"
>
<div
@@ -152,11 +152,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 28px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 28px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -172,11 +172,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 84px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 84px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -192,11 +192,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 28px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 28px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -212,11 +212,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 60px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 60px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -232,11 +232,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 28px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 28px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -252,11 +252,11 @@
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/pure.tsx > renders src/MarkdownEditor/demos/pure.tsx correctly 1` mismatched
❯ tests/demo/demo.test.tsx:58:38
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/preview.tsx > renders src/MarkdownEditor/demos/preview.tsx correctly 1` mismatched
- Expected
+ Received
@@ -1382,11 +1382,11 @@
</span>
</h2>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: block;"
@@ -1415,11 +1415,11 @@
data-slate-node="element"
style="display: flex; gap: 1px; max-width: 100%; min-width: 0; margin-bottom: 12px;"
>
<div
class="ant-md-editor-drag-el ant-md-editor-table ant-md-editor-content-table"
- style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 16px; display: flex; min-width: 0; box-shadow: none;"
+ style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 0.5em; display: flex; min-width: 0; box-shadow: none;"
>
<span
class="ant-md-editor-drag-handle"
contenteditable="false"
>
@@ -1792,11 +1792,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 52px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 52px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -1818,11 +1818,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -1844,11 +1844,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -1870,11 +1870,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -1896,11 +1896,11 @@
class="group"
data-be="td"
data-slate-node="element"
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/ppt.tsx > renders src/MarkdownEditor/demos/ppt.tsx correctly 1` mismatched
- Expected
+ Received
@@ -6,44 +6,45 @@
test
</div>
<div
aria-label="segmented control"
class="ant-segmented"
- role="listbox"
+ role="radiogroup"
style="position: fixed; z-index: 1000; top: 0px;"
+ tabindex="0"
>
<div
class="ant-segmented-group"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
+ name="test-id"
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
- role="option"
title="编辑模式"
>
编辑模式
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
+ name="test-id"
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
- role="option"
title="幻灯片模式"
>
幻灯片模式
</div>
</label>
@@ -913,11 +914,11 @@
</span>
</h2>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: none;"
@@ -946,11 +947,11 @@
data-slate-node="element"
style="display: flex; gap: 1px; max-width: 100%; min-width: 0; margin-bottom: 12px;"
>
<div
class="ant-md-editor-drag-el ant-md-editor-table ant-md-editor-content-table"
- style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 16px; display: flex; min-width: 0; box-shadow: none;"
+ style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 0.5em; display: flex; min-width: 0; box-shadow: none;"
>
<div
style="width: 100%; max-width: 100%; overflow: auto; flex: 1; min-width: 0;"
>
<table
@@ -1295,11 +1296,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 52px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 52px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -1321,11 +1322,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 84px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 84px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/minPreview.tsx > renders src/MarkdownEditor/demos/minPreview.tsx correctly 1` mismatched
- Expected
+ Received
@@ -124,11 +124,11 @@
</span>
</h2>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: none;"
@@ -157,11 +157,11 @@
data-slate-node="element"
style="display: flex; gap: 1px; max-width: 100%; min-width: 0; margin-bottom: 12px;"
>
<div
class="ant-md-editor-drag-el ant-md-editor-table ant-md-editor-content-table"
- style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 16px; display: flex; min-width: 0; box-shadow: none;"
+ style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 0.5em; display: flex; min-width: 0; box-shadow: none;"
>
<div
style="width: 100%; max-width: 100%; overflow: auto; flex: 1; min-width: 0;"
>
<table
@@ -506,11 +506,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 52px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 52px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -532,11 +532,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -558,11 +558,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -584,11 +584,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -61
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/min.tsx > renders src/MarkdownEditor/demos/min.tsx correctly 1` mismatched
- Expected
+ Received
@@ -206,11 +206,11 @@
</span>
</h2>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: none;"
@@ -239,11 +239,11 @@
data-slate-node="element"
style="display: flex; gap: 1px; max-width: 100%; min-width: 0; margin-bottom: 12px;"
>
<div
class="ant-md-editor-drag-el ant-md-editor-table ant-md-editor-content-table"
- style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 16px; display: flex; min-width: 0; box-shadow: none;"
+ style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 0.5em; display: flex; min-width: 0; box-shadow: none;"
>
<div
style="width: 100%; max-width: 100%; overflow: auto; flex: 1; min-width: 0;"
>
<table
@@ -588,11 +588,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 52px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 52px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -614,11 +614,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -640,11 +640,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -666,11 +666,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -692,11 +692,11 @
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/min-render.tsx > renders src/MarkdownEditor/demos/min-render.tsx correctly 1` mismatched
- Expected
+ Received
@@ -183,11 +183,11 @@
</span>
</h2>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: none;"
@@ -216,11 +216,11 @@
data-slate-node="element"
style="display: flex; gap: 1px; max-width: 100%; min-width: 0; margin-bottom: 12px;"
>
<div
class="ant-md-editor-drag-el ant-md-editor-table ant-md-editor-content-table"
- style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 16px; display: flex; min-width: 0; box-shadow: none;"
+ style="max-width: 100%; width: 100%; border: 1px solid #e8e8e8; border-radius: 0.5em; display: flex; min-width: 0; box-shadow: none;"
>
<div
style="width: 100%; max-width: 100%; overflow: auto; flex: 1; min-width: 0;"
>
<table
@@ -565,11 +565,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 52px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 52px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -591,11 +591,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -617,11 +617,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -643,11 +643,11 @@
class="group"
data-be="td"
data-slate-node="element"
>
<div
- style="min-width: 76px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 76px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
|
|
Run tests:
tests/demo/demo.test.tsx#L58
Error: Snapshot `Rendering demo: src/MarkdownEditor/demos/max-chart.tsx > renders src/MarkdownEditor/demos/max-chart.tsx correctly 1` mismatched
- Expected
+ Received
@@ -24,11 +24,11 @@
zindex="-1"
>
<div
data-be="card"
data-slate-node="element"
- style="display: flex; gap: 1px;"
+ style="display: flex; gap: 1px; max-width: 100%;"
>
<span
data-be="card-before"
data-slate-node="element"
style="min-width: 4px; height: 100%; position: relative; z-index: 99; display: none;"
@@ -58,11 +58,11 @@
data-slate-node="element"
style="flex: 1; min-width: 256px;"
>
<div
class="chart-box"
- style="display: flex; flex-direction: column; border-radius: 18px; overflow: auto;"
+ style="display: flex; flex-direction: column; border-radius: 0.5em; overflow: auto;"
>
<div
style="position: relative;"
>
<div
@@ -167,11 +167,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 100px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 100px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -187,11 +187,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 116px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 116px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -207,11 +207,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 148px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 148px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: start;"
>
<span
data-slate-node="text"
>
<span
@@ -227,11 +227,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 44px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 44px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -247,11 +247,11 @@
</span>
</span>
</span>
</div>
<div
- style="min-width: 68px; text-wrap: wrap; max-width: 200px;"
+ style="min-width: 68px; text-wrap: wrap; max-width: 200px; display: flex; justify-content: end;"
>
<span
data-slate-node="text"
>
<span
@@ -267,11 +267,11 @@
</span>
</span>
</span>
</div>
<div
-
|
|
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
Loading