mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 10:38:16 +08:00
chore: 调整公式输入交互并补充编辑器模版文档 (#10034)
This commit is contained in:
liaoxuezhi
GitHub
parent
ec1cf05e39
commit
1a6a680020
@ -18,6 +18,15 @@
|
||||
},
|
||||
{
|
||||
"path": "./packages/office-viewer"
|
||||
},
|
||||
{
|
||||
"path": "./packages/amis-editor-core"
|
||||
},
|
||||
{
|
||||
"path": "./packages/amis-editor"
|
||||
},
|
||||
{
|
||||
"path": "./packages/amis-theme-editor-helper"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
775
examples/doc.css
775
examples/doc.css
@ -1,751 +1,17 @@
|
||||
/* csshint-disable */
|
||||
@font-face {
|
||||
font-family: octicons-link;
|
||||
src: url(data:font/woff;charset=utf-8;base64,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)
|
||||
format('woff');
|
||||
.markdown-body {
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.markdown-body {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown {
|
||||
padding: 25px 45px 25px;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
color: #333;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti',
|
||||
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
min-width: 200px;
|
||||
/* max-width: 980px; */
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
.markdown-body a:not(.btn) {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
.markdown-body a:active:not(.btn),
|
||||
.markdown-body a:hover:not(.btn) {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.markdown-body > h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.markdown-body svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-body code,
|
||||
.markdown-body kbd,
|
||||
.markdown-body pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.markdown-body button:-moz-focusring,
|
||||
.markdown-body [type='button']:-moz-focusring,
|
||||
.markdown-body [type='reset']:-moz-focusring,
|
||||
.markdown-body [type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
.markdown-body [type='checkbox'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body table:not(.table) {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.markdown-body table:not(.table) td,
|
||||
.markdown-body table:not(.table) th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean,
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
/* .markdown-body a:not(.btn) {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body a:hover:not(.btn),
|
||||
.markdown-body a:active:not(.btn) {
|
||||
color: #4078c0;
|
||||
text-decoration: underline;
|
||||
} */
|
||||
|
||||
.markdown-body hr {
|
||||
height: 0;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-body hr::before {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.markdown-body hr::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.markdown-body > h1,
|
||||
.markdown-body > h2,
|
||||
.markdown-body > h3,
|
||||
.markdown-body > h4,
|
||||
.markdown-body > h5,
|
||||
.markdown-body > h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown-body > h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.markdown-body > h2 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.markdown-body > h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown-body > h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown-body > h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body > h6 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.markdown-body ul ul ol,
|
||||
.markdown-body ul ol ol,
|
||||
.markdown-body ol ul ol,
|
||||
.markdown-body ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.markdown-body dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font: 12px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
.markdown-body .pl-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-1 {
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-2 {
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-3 {
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-4 {
|
||||
padding-left: 24px !important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-5 {
|
||||
padding-left: 36px !important;
|
||||
}
|
||||
|
||||
.markdown-body .pl-6 {
|
||||
padding-left: 48px !important;
|
||||
}
|
||||
|
||||
.markdown-body .form-select::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.markdown-body:before {
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.markdown-body:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.markdown-body > *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body > *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body a.anchor {
|
||||
display: inline-block;
|
||||
padding-right: 2px;
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
.markdown-body a.anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.markdown-body > h1,
|
||||
.markdown-body > h2,
|
||||
.markdown-body > h3,
|
||||
.markdown-body > h4,
|
||||
.markdown-body > h5,
|
||||
.markdown-body > h6 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.markdown-body > h1 .octicon-link,
|
||||
.markdown-body > h2 .octicon-link,
|
||||
.markdown-body > h3 .octicon-link,
|
||||
.markdown-body > h4 .octicon-link,
|
||||
.markdown-body > h5 .octicon-link,
|
||||
.markdown-body > h6 .octicon-link {
|
||||
color: #000;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.markdown-body > h1:hover .anchor,
|
||||
.markdown-body > h2:hover .anchor,
|
||||
.markdown-body > h3:hover .anchor,
|
||||
.markdown-body > h4:hover .anchor,
|
||||
.markdown-body > h5:hover .anchor,
|
||||
.markdown-body > h6:hover .anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body > h1:hover .anchor .octicon-link,
|
||||
.markdown-body > h2:hover .anchor .octicon-link,
|
||||
.markdown-body > h3:hover .anchor .octicon-link,
|
||||
.markdown-body > h4:hover .anchor .octicon-link,
|
||||
.markdown-body > h5:hover .anchor .octicon-link,
|
||||
.markdown-body > h6:hover .anchor .octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.markdown-body > h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2.25em;
|
||||
line-height: 1.2;
|
||||
border-bottom: 1px solid #dee5e7;
|
||||
}
|
||||
|
||||
.markdown-body > h1 .anchor {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body > h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.225;
|
||||
border-bottom: 1px solid #dee5e7;
|
||||
}
|
||||
|
||||
.markdown-body > h2 .anchor {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body > h3 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.43;
|
||||
}
|
||||
|
||||
.markdown-body > h3 .anchor {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.markdown-body > h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-body > h4 .anchor {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.markdown-body > h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body > h5 .anchor {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.markdown-body > h6 {
|
||||
font-size: 1em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.markdown-body h6 .anchor {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.markdown-body p,
|
||||
.markdown-body blockquote,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body dl,
|
||||
.markdown-body table,
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
margin: 16px 0;
|
||||
background-color: #e7e7e7;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.markdown-body ul:not(.dropdown-menu):not(.nav),
|
||||
.markdown-body ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body li > p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.markdown-body dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
padding: 0 15px;
|
||||
color: #777;
|
||||
border-left: 4px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-body blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body table:not(.table) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
word-break: normal;
|
||||
/* word-break: keep-all; */
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-body table:not(.table) th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body table:not(.table) th,
|
||||
.markdown-body table:not(.table) td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-body table:not(.table) tr {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.markdown-body table:not(.table) tr:nth-child(2n) {
|
||||
background-color: var(--colors-neutral-fill-9);
|
||||
}
|
||||
|
||||
.markdown-body table td:first-child,
|
||||
.markdown-body table th:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: var(--colors-neutral-fill-11);
|
||||
border-left: 0px !important;
|
||||
}
|
||||
|
||||
.markdown-body table td:first-child::after,
|
||||
.markdown-body table th:first-child::after {
|
||||
box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
width: 30px;
|
||||
transform: translate(100%);
|
||||
transition: box-shadow 0.3s;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.markdown-body table tr:nth-child(2n) td:first-child {
|
||||
background-color: var(--colors-neutral-fill-9);
|
||||
}
|
||||
|
||||
/* modified by zhangjun08
|
||||
* 更改文档中的图片展示样式
|
||||
*/
|
||||
.markdown-body img {
|
||||
max-width: 90%;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
box-sizing: content-box;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.markdown-body img {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown-body code:before,
|
||||
.markdown-body code:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: '\00a0';
|
||||
}
|
||||
|
||||
.markdown-body pre > code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body .highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre,
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
display: inline;
|
||||
max-width: initial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body pre code:before,
|
||||
.markdown-body pre code:after {
|
||||
content: normal;
|
||||
}
|
||||
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.markdown-body .pl-c1,
|
||||
.markdown-body .pl-s .pl-v {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.markdown-body .pl-e,
|
||||
.markdown-body .pl-en {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.markdown-body .pl-s .pl-s1,
|
||||
.markdown-body .pl-smi {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ent {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.markdown-body .pl-k {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.markdown-body .pl-pds,
|
||||
.markdown-body .pl-s,
|
||||
.markdown-body .pl-s .pl-pse .pl-s1,
|
||||
.markdown-body .pl-sr,
|
||||
.markdown-body .pl-sr .pl-cce,
|
||||
.markdown-body .pl-sr .pl-sra,
|
||||
.markdown-body .pl-sr .pl-sre {
|
||||
color: #183691;
|
||||
}
|
||||
|
||||
.markdown-body .pl-v {
|
||||
color: #ed6a43;
|
||||
}
|
||||
|
||||
.markdown-body .pl-id {
|
||||
color: #b52a1d;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ii {
|
||||
background-color: #b52a1d;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
.markdown-body .pl-sr .pl-cce {
|
||||
color: #63a35c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body .pl-ml {
|
||||
color: #693a17;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mh,
|
||||
.markdown-body .pl-mh .pl-en,
|
||||
.markdown-body .pl-ms {
|
||||
color: #1d3e81;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mq {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi {
|
||||
color: #333;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mb {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body .pl-md {
|
||||
background-color: #ffecec;
|
||||
color: #bd2c00;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mi1 {
|
||||
background-color: #eaffea;
|
||||
color: #55a532;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mdr {
|
||||
color: #795da3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body .pl-mo {
|
||||
color: #1d3e81;
|
||||
}
|
||||
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
.markdown-body .full-commit .btn-outline:not(:disabled):hover {
|
||||
color: #4078c0;
|
||||
border: 1px solid #4078c0;
|
||||
}
|
||||
|
||||
.markdown-body :checked + .radio-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-color: #4078c0;
|
||||
}
|
||||
|
||||
.markdown-body .octicon {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item + .task-list-item {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item input {
|
||||
margin: 0 0.2em 0.25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
border-bottom-color: #eee;
|
||||
padding: 25px 45px 0;
|
||||
}
|
||||
|
||||
.doc-play-ground {
|
||||
@ -765,25 +31,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body .CodeMirror pre {
|
||||
padding: 0 4px;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-body .CodeMirror,
|
||||
.markdown-body .CodeMirror * {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.markdown-body .CodeMirror-lines {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body .tree-view ul {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body > .amis-preview {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -19,6 +19,10 @@
|
||||
/>
|
||||
<link rel="stylesheet" href="prismjs/themes/prism.css" />
|
||||
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../node_modules/github-markdown-css/github-markdown-light.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./doc.css" />
|
||||
|
||||
<link rel="stylesheet" href="./style.scss" />
|
||||
|
||||
@ -333,7 +333,7 @@ body {
|
||||
|
||||
a.anchor {
|
||||
padding-top: 100px;
|
||||
margin-top: -100px;
|
||||
margin-top: -94px;
|
||||
}
|
||||
|
||||
&-nav,
|
||||
|
||||
@ -26,6 +26,10 @@
|
||||
/>
|
||||
<link rel="stylesheet" href="/node_modules/katex/dist/katex.min.css" />
|
||||
<link rel="stylesheet" href="/node_modules/prismjs/themes/prism.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/node_modules/github-markdown-css/github-markdown-light.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="/examples/doc.css" />
|
||||
|
||||
<link rel="stylesheet" href="/examples/style.scss" />
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"@types/react": "^18.0.24",
|
||||
"@types/react-dom": "^18.0.8",
|
||||
"@types/react-syntax-highlighter": "^15.5.11",
|
||||
"@vitejs/plugin-react": "^2.2.0",
|
||||
"amis-publish": "^1.0.1",
|
||||
"copy-to-clipboard": "3.3.1",
|
||||
@ -82,6 +83,7 @@
|
||||
"fis3-prepackager-stand-alone-pack": "^1.0.0",
|
||||
"fis3-preprocessor-js-require-css": "^0.1.3",
|
||||
"fis3-preprocessor-js-require-file": "^0.1.3",
|
||||
"github-markdown-css": "^5.5.1",
|
||||
"husky": "^8.0.0",
|
||||
"jest": "^29.0.3",
|
||||
"jest-environment-jsdom": "^29.0.3",
|
||||
@ -97,7 +99,10 @@
|
||||
"prismjs": "^1.29.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-markdown": "^9.0.1",
|
||||
"react-overlays": "5.1.1",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"rollup": "^2.79.1",
|
||||
"rollup-pluginutils": "^2.8.2",
|
||||
"setprototypeof": "^1.2.0",
|
||||
|
||||
@ -9,8 +9,11 @@
|
||||
.btn-configured {
|
||||
position: relative;
|
||||
justify-content: left;
|
||||
padding-right: 32px;
|
||||
padding-left: 4px;
|
||||
padding: var(--button-size-sm-paddingTop) 32px
|
||||
var(--button-size-sm-paddingBottom) 4px;
|
||||
line-height: var(--button-size-sm-lineHeight);
|
||||
height: var(--button-size-sm-height);
|
||||
|
||||
& > span {
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
@ -28,7 +31,8 @@
|
||||
bottom: 0;
|
||||
right: var(--button-size-default-paddingRight);
|
||||
margin: auto 0 !important;
|
||||
font-size: 14px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: var(--Form-input-clearBtn-color);
|
||||
&:hover {
|
||||
fill: var(--Form-input-clearBtn-color-onHover);
|
||||
|
||||
@ -2,6 +2,7 @@ import * as React from 'react';
|
||||
import {AlertComponent, ToastComponent, ContextMenu} from 'amis';
|
||||
// @ts-ignore
|
||||
import AMisSchemaEditor from './Editor';
|
||||
import {Link} from 'react-router-dom';
|
||||
export default class App extends React.PureComponent {
|
||||
render() {
|
||||
// 备注: 如果需要改用antd主题，还需要将index.html换成index-antd.html
|
||||
@ -9,7 +10,10 @@ export default class App extends React.PureComponent {
|
||||
return (
|
||||
<div className="Editor-Demo">
|
||||
<div id="headerBar" className="Editor-header">
|
||||
<div className="Editor-title">amis 可视化编辑器</div>
|
||||
<div className="Editor-title">
|
||||
amis 可视化编辑器
|
||||
<Link to="/basic">面板模版</Link>
|
||||
</div>
|
||||
</div>
|
||||
<AMisSchemaEditor theme={curTheme} />
|
||||
<ToastComponent theme={curTheme} />
|
||||
|
||||
83
packages/amis-editor/examples/component/Doc.tsx
Normal file
83
packages/amis-editor/examples/component/Doc.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
|
||||
import {darcula} from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
|
||||
import 'amis';
|
||||
import '../../src/index';
|
||||
import PanelPreview from './PanelPreview';
|
||||
export interface DocProps {
|
||||
children?: string | null | undefined;
|
||||
}
|
||||
|
||||
export function mdComment(fun: Function) {
|
||||
const txt = fun.toString();
|
||||
debugger;
|
||||
return txt;
|
||||
}
|
||||
|
||||
function str2schema(code: string) {
|
||||
const fn = new Function('getSchemaTpl', 'tipedLabel', `return [${code}]`);
|
||||
return fn.call(null, getSchemaTpl, tipedLabel);
|
||||
}
|
||||
|
||||
export default function Doc({children}: DocProps) {
|
||||
return (
|
||||
<div className="markdown">
|
||||
<div className="markdown-body">
|
||||
<Markdown
|
||||
children={children}
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
pre(props) {
|
||||
if ((props.children as any)?.props?.className) {
|
||||
return <>{props.children}</>;
|
||||
}
|
||||
|
||||
return <code>{props.children}</code>;
|
||||
},
|
||||
code(props) {
|
||||
const {children, className, node, ref, ...rest} = props;
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
|
||||
if (match?.[1] === 'schema') {
|
||||
const schema = str2schema(children as string);
|
||||
|
||||
return (
|
||||
<div className="schema-tpl-preview">
|
||||
<code>
|
||||
<SyntaxHighlighter
|
||||
{...rest}
|
||||
PreTag="div"
|
||||
children={String(children).replace(/\n$/, '')}
|
||||
language={'jsx'}
|
||||
style={darcula}
|
||||
/>
|
||||
</code>
|
||||
|
||||
<PanelPreview schema={schema} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return match ? (
|
||||
<SyntaxHighlighter
|
||||
{...rest}
|
||||
PreTag="div"
|
||||
children={String(children).replace(/\n$/, '')}
|
||||
language={match[1]}
|
||||
style={darcula}
|
||||
/>
|
||||
) : (
|
||||
<code {...rest} className={className}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
packages/amis-editor/examples/component/PanelPreview.tsx
Normal file
60
packages/amis-editor/examples/component/PanelPreview.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import {JsonView, render} from 'amis';
|
||||
import cx from 'classnames';
|
||||
import React from 'react';
|
||||
export interface PanelPreviewProps {
|
||||
schema: any;
|
||||
}
|
||||
|
||||
export default function (props: PanelPreviewProps) {
|
||||
const schema = React.useMemo(() => {
|
||||
return {
|
||||
type: 'form',
|
||||
mode: 'normal',
|
||||
wrapWithPanel: false,
|
||||
className: cx('config-form-content', 'ae-Settings-content'),
|
||||
wrapperComponent: 'div',
|
||||
body: Array.isArray(props.schema) ? props.schema : [props.schema],
|
||||
submitOnChange: true,
|
||||
submitOnInit: true
|
||||
};
|
||||
}, [JSON.stringify(props.schema)]);
|
||||
const [data, setData] = React.useState({});
|
||||
const onFinished = React.useCallback((data: any) => {
|
||||
setData(data);
|
||||
return false;
|
||||
}, []);
|
||||
const onJsonEdit = React.useCallback((e: any) => {
|
||||
setData(e.updated_src);
|
||||
}, []);
|
||||
const dom = React.useRef<HTMLDivElement | null>(null);
|
||||
// const popOverContainer = React.useCallback(() => {
|
||||
// return dom.current;
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<div className="PanelPreview" ref={dom}>
|
||||
<div className="AMISCSSWrapper editor-right-panel">
|
||||
{render(
|
||||
schema,
|
||||
{
|
||||
data: data,
|
||||
onFinished: onFinished
|
||||
// popOverContainer
|
||||
},
|
||||
{
|
||||
// theme: 'cxd' // 右侧属性配置面板固定使用cxd主题展示
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<JsonView
|
||||
name={false}
|
||||
src={data}
|
||||
theme={'rjv-default'}
|
||||
enableClipboard={false}
|
||||
onEdit={onJsonEdit}
|
||||
onDelete={onJsonEdit}
|
||||
onAdd={onJsonEdit}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
packages/amis-editor/examples/route/Basic.md
Normal file
21
packages/amis-editor/examples/route/Basic.md
Normal file
@ -0,0 +1,21 @@
|
||||
# 基本模版
|
||||
|
||||
## 表单项名字
|
||||
|
||||
`formItemName`
|
||||
|
||||
```schema
|
||||
getSchemaTpl('formItemName', {
|
||||
value: 'name'
|
||||
})
|
||||
```
|
||||
|
||||
## 表单项展示模式
|
||||
|
||||
`formItemMode`
|
||||
|
||||
```schema
|
||||
getSchemaTpl('formItemMode', {
|
||||
|
||||
})
|
||||
```
|
||||
117
packages/amis-editor/examples/route/Formula.md
Normal file
117
packages/amis-editor/examples/route/Formula.md
Normal file
@ -0,0 +1,117 @@
|
||||
# 公式相关
|
||||
|
||||
公式输入相关组件规范说明。
|
||||
|
||||
## 显隐表达式
|
||||
|
||||
比如：`visibleOn`, `disabledOn` 因为存在两种表达式的写法，所以这里需要明确区分。
|
||||
|
||||
- 没有初始值时出现「点击编写表达式」按钮，点击会弹出一个表达式编辑器。
|
||||
- 初始值存在时，且为 js 表达式（即不是 `${` 和 `}`包裹的）时，直接用文本输入框展示与输入。
|
||||
- 初始值存在时，且为 `${` 和 `}`包裹的公式表达式时，用公式编辑器展示，同时点击后，会弹出一个表达式编辑器，能直接回显当前公式
|
||||
- 公式弹窗内部始终是公式语法，不存在模版拼接语法。
|
||||
- 当 js 表达式被删除后，只能用新版公式编辑器了。
|
||||
|
||||
```schema
|
||||
getSchemaTpl('expressionFormulaControl', {
|
||||
label: '无默认值',
|
||||
name: 'var1'
|
||||
}),
|
||||
|
||||
getSchemaTpl('expressionFormulaControl', {
|
||||
label: '默认值为旧语法',
|
||||
name: 'var2',
|
||||
value: 'data.a == 1'
|
||||
}),
|
||||
|
||||
getSchemaTpl('expressionFormulaControl', {
|
||||
label: '默认值为新语法',
|
||||
name: 'var3',
|
||||
value: '\\${a == 1 ? "1" : a == 2 ? "二" : a == 3 ? "三" : "一个很长的表达式"}'
|
||||
})
|
||||
```
|
||||
|
||||
## 文本输入框默认值
|
||||
|
||||
默认展示为文本输入框，通过点击 `+fx` 来添加公式片段，公式部分高亮展示，是整体高亮，而不是表达式内部 token 高亮（变量名、操作符、字面量等会用不同的方式高亮）。整体高亮内部不细化高亮，展示 tooltip 时再细化高亮，并且点击后开始编辑点击部分公式，注意这里是编辑局部公式，而不是整个默认值输入框。
|
||||
|
||||
值格式中如果没有出现 `${` 和 `}` 包裹的公式，则认为是普通文本，如果存在，则会做公式处理。当时用户直接通过文本输入框输入公式时，会当成时输入普通文本，如果用户输入了 `$` 符号，要将其转成 `\\$`，这样就不会被误认为是公式了。要添加公式片段，用户必须通过点击 `+fx` 按钮添加。`+fx` 可以添加多个片段。
|
||||
|
||||
```schema
|
||||
getSchemaTpl('tplFormulaControl', {
|
||||
name: 'value',
|
||||
label: '默认值'
|
||||
}),
|
||||
|
||||
getSchemaTpl('tplFormulaControl', {
|
||||
name: 'value2',
|
||||
label: '默认值',
|
||||
value: 'My name is \\${name}'
|
||||
})
|
||||
```
|
||||
|
||||
## 多行文本输入框默认值
|
||||
|
||||
```schema
|
||||
getSchemaTpl('textareaDefaultValue', {
|
||||
name: 'var1',
|
||||
value: 'My name is \\${name}'
|
||||
})
|
||||
```
|
||||
|
||||
## 数字输入框默认值
|
||||
|
||||
默认展示为数字输入框，通过点击 `fx` 输入公式，因为不是文本，无法拼接，所以默认值要么是公式，要么是静态值。
|
||||
|
||||
```schema
|
||||
getSchemaTpl('valueFormula', {
|
||||
mode: 'vertical',
|
||||
rendererSchema: (schema) => ({
|
||||
type: 'input-number',
|
||||
...schema,
|
||||
displayMode: 'base'
|
||||
}),
|
||||
valueType: 'number' // 期望数值类型
|
||||
})
|
||||
```
|
||||
|
||||
## 日期输入框默认值
|
||||
|
||||
```schema
|
||||
getSchemaTpl('valueFormula', {
|
||||
mode: 'vertical',
|
||||
rendererSchema: (schema) => ({
|
||||
type: 'input-date',
|
||||
...schema
|
||||
}),
|
||||
placeholder: '请选择静态值',
|
||||
header: '表达式或相对值',
|
||||
DateTimeType: 1,
|
||||
label: tipedLabel('默认值', '支持例如: <code>now、+3days、-2weeks、+1hour、+2years</code> 等（minute|min|hour|day|week|month|year|weekday|second|millisecond）这种相对值用法')
|
||||
})
|
||||
```
|
||||
|
||||
## 选项类输入框默认值
|
||||
|
||||
```schema
|
||||
getSchemaTpl('valueFormula', {
|
||||
rendererSchema: (schema) => ({
|
||||
...schema,
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
}),
|
||||
// 默认值组件设计有些问题，自动发起了请求，接口数据作为了默认值选项，接口形式应该是设置静态值或者FX
|
||||
needDeleteProps: ['source'],
|
||||
// 当数据源是自定义静态选项时，不额外配置默认值，在选项上直接勾选即可，放开会有个bug：当去掉勾选时，默认值配置组件不清空，只是schema清空了value
|
||||
visibleOn: 'this.selectFirst !== true && this.source != null'
|
||||
})
|
||||
```
|
||||
@ -286,3 +286,31 @@ $disabled-bg-color: #f7f7f9; // 禁用背景颜色
|
||||
#root > .a-Select-popover {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.schema-tpl-preview {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
> *:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background-color: rgb(43, 43, 43);
|
||||
}
|
||||
}
|
||||
|
||||
.PanelPreview {
|
||||
background-color: #fff;
|
||||
padding: 0 20px 20px 20px;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
flex-shrink: 0;
|
||||
|
||||
> .editor-right-panel {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
> .react-json-view {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
href="../../../node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
|
||||
/>
|
||||
<link rel="stylesheet" title="cxd" href="../amis-ui/scss/themes/cxd.scss" />
|
||||
<link rel="stylesheet" title="cxd" href="../amis-ui/scss/helper.scss" />
|
||||
<link rel="stylesheet" href="../amis-editor-core/scss/editor.scss" />
|
||||
<link rel="stylesheet" href="../../../examples/doc.css" />
|
||||
<link rel="stylesheet" href="./examples/style.scss" />
|
||||
|
||||
@ -2,11 +2,207 @@
|
||||
* @file entry of this example.
|
||||
* @author fex
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import React from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import App from './examples/App';
|
||||
|
||||
import {Layout, AsideNav, Spinner, NotFound} from 'amis-ui';
|
||||
import {eachTree, TreeArray, TreeItem} from 'amis-core';
|
||||
import {
|
||||
HashRouter as Router,
|
||||
Route,
|
||||
Redirect,
|
||||
Switch,
|
||||
Link,
|
||||
NavLink
|
||||
} from 'react-router-dom';
|
||||
import Doc from './examples/component/Doc';
|
||||
|
||||
function MDComponent(fN: () => Promise<{default: {raw: string}}>) {
|
||||
return React.lazy(() =>
|
||||
fN().then(ret => ({default: () => <Doc children={ret.default.raw} />}))
|
||||
);
|
||||
}
|
||||
|
||||
const pages: TreeArray = [
|
||||
{
|
||||
label: '面板模版',
|
||||
children: [
|
||||
{
|
||||
label: '基础',
|
||||
path: '/basic',
|
||||
component: MDComponent(() => import('./examples/route/Basic.md'))
|
||||
},
|
||||
|
||||
{
|
||||
label: '公式',
|
||||
path: '/formula',
|
||||
component: MDComponent(() => import('./examples/route/Formula.md'))
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
function getPath(path: string) {
|
||||
return path ? (path[0] === '/' ? path : `/${path}`) : '';
|
||||
}
|
||||
|
||||
function isActive(link: any, location: any) {
|
||||
return !!(link.path && getPath(link.path) === location.pathname);
|
||||
}
|
||||
|
||||
export function navigations2route(
|
||||
navigations: any,
|
||||
additionalProperties?: any
|
||||
) {
|
||||
let routes: any = [];
|
||||
|
||||
navigations.forEach((root: any) => {
|
||||
root.children &&
|
||||
eachTree(root.children, (item: any) => {
|
||||
if (item.path && item.component) {
|
||||
routes.push(
|
||||
additionalProperties ? (
|
||||
<Route
|
||||
key={routes.length + 1}
|
||||
path={item.path[0] === '/' ? item.path : `/${item.path}`}
|
||||
render={(props: any) => (
|
||||
<item.component {...additionalProperties} {...props} />
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Route
|
||||
key={routes.length + 1}
|
||||
path={item.path[0] === '/' ? item.path : `/${item.path}`}
|
||||
component={item.component}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return routes;
|
||||
}
|
||||
|
||||
export function Main() {
|
||||
function renderAside() {
|
||||
return (
|
||||
<AsideNav
|
||||
navigations={pages.map((item: any) => ({
|
||||
...item,
|
||||
children: item.children
|
||||
? item.children.map((item: any) => ({
|
||||
...item,
|
||||
className: 'is-top'
|
||||
}))
|
||||
: []
|
||||
}))}
|
||||
renderLink={({
|
||||
link,
|
||||
active,
|
||||
toggleExpand,
|
||||
classnames: cx,
|
||||
depth
|
||||
}: any) => {
|
||||
let children: any[] = [];
|
||||
|
||||
if (link.children && link.children.length) {
|
||||
children.push(
|
||||
<span
|
||||
key="expand-toggle"
|
||||
className={cx('AsideNav-itemArrow')}
|
||||
onClick={e => toggleExpand(link, e)}
|
||||
></span>
|
||||
);
|
||||
}
|
||||
|
||||
link.badge &&
|
||||
children.push(
|
||||
<b
|
||||
key="badge"
|
||||
className={cx(
|
||||
`AsideNav-itemBadge`,
|
||||
link.badgeClassName || 'bg-info'
|
||||
)}
|
||||
>
|
||||
{link.badge}
|
||||
</b>
|
||||
);
|
||||
|
||||
if (link.icon) {
|
||||
children.push(
|
||||
<i key="icon" className={cx(`AsideNav-itemIcon`, link.icon)} />
|
||||
);
|
||||
}
|
||||
|
||||
children.push(
|
||||
<span className={cx('AsideNav-itemLabel')} key="label">
|
||||
{link.label}
|
||||
</span>
|
||||
);
|
||||
|
||||
return link.path ? (
|
||||
/^https?\:/.test(link.path) ? (
|
||||
<a target="_blank" href={link.path} rel="noopener">
|
||||
{children}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
to={
|
||||
getPath(link.path) ||
|
||||
(link.children && getPath(link.children[0].path))
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
) : (
|
||||
<a onClick={link.children ? () => toggleExpand(link) : undefined}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}}
|
||||
isActive={(link: any) => isActive(link, location)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<React.Suspense
|
||||
fallback={<Spinner overlay spinnerClassName="m-t-lg" size="lg" />}
|
||||
>
|
||||
<Switch>
|
||||
<Route
|
||||
component={React.lazy(() => import('./examples/App'))}
|
||||
exact
|
||||
path="/"
|
||||
/>
|
||||
<Layout
|
||||
header={
|
||||
<div id="headerBar" className="box-shadow bg-dark">
|
||||
<div className={`cxd-Layout-brand`}>编辑器面板示例</div>
|
||||
<Link to="/">回到编辑器</Link>
|
||||
</div>
|
||||
}
|
||||
aside={renderAside()}
|
||||
>
|
||||
<React.Suspense
|
||||
fallback={<Spinner overlay spinnerClassName="m-t-lg" size="lg" />}
|
||||
>
|
||||
<Switch>
|
||||
{navigations2route(pages)}
|
||||
<Route render={() => <NotFound description="Not found" />} />
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</Layout>
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export function bootstrap(mountTo: HTMLElement, initalState: any) {
|
||||
const root = createRoot(mountTo);
|
||||
root.render(<App />);
|
||||
root.render(<Main />);
|
||||
}
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {autobind, FormControlProps} from 'amis-core';
|
||||
import {autobind, FormControlProps, isExpression} from 'amis-core';
|
||||
import cx from 'classnames';
|
||||
import {FormItem, Button, Icon, PickerContainer} from 'amis';
|
||||
import {FormulaCodeEditor, FormulaEditor} from 'amis-ui';
|
||||
import {FormulaCodeEditor, FormulaEditor, InputBox} from 'amis-ui';
|
||||
import type {VariableItem} from 'amis-ui';
|
||||
import {reaction} from 'mobx';
|
||||
import {getVariables} from 'amis-editor-core';
|
||||
@ -139,6 +139,7 @@ export default class ExpressionFormulaControl extends React.Component<
|
||||
render() {
|
||||
const {value, className, variableMode, header, size, ...rest} = this.props;
|
||||
const {formulaPickerValue, variables} = this.state;
|
||||
const isNewExpression = isExpression(value);
|
||||
|
||||
// 自身字段
|
||||
const selfName = this.props?.data?.name;
|
||||
@ -171,7 +172,9 @@ export default class ExpressionFormulaControl extends React.Component<
|
||||
size={size ?? 'lg'}
|
||||
>
|
||||
{({onClick}: {onClick: (e: React.MouseEvent) => any}) =>
|
||||
formulaPickerValue ? (
|
||||
value && !isNewExpression ? (
|
||||
<InputBox value={value} onChange={rest.onChange} />
|
||||
) : formulaPickerValue ? (
|
||||
<Button
|
||||
className="btn-configured"
|
||||
tooltip={{
|
||||
@ -202,6 +205,7 @@ export default class ExpressionFormulaControl extends React.Component<
|
||||
<FormulaCodeEditor
|
||||
singleLine
|
||||
readOnly
|
||||
highlightMode="expression"
|
||||
value={value}
|
||||
variables={variables}
|
||||
evalMode={false}
|
||||
@ -215,6 +219,7 @@ export default class ExpressionFormulaControl extends React.Component<
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
className="btn-set-expression"
|
||||
onClick={e => this.handleOnClick(e, onClick)}
|
||||
>
|
||||
|
||||
@ -657,9 +657,9 @@ export default class FormulaControl extends React.Component<
|
||||
children: () => (
|
||||
<FormulaCodeEditor
|
||||
readOnly
|
||||
value={value}
|
||||
value={exprValue}
|
||||
variables={variables}
|
||||
evalMode={false}
|
||||
evalMode={true}
|
||||
editorTheme="dark"
|
||||
editorOptions={{
|
||||
lineNumbers: false
|
||||
@ -682,6 +682,7 @@ export default class FormulaControl extends React.Component<
|
||||
functions={[]}
|
||||
variables={variables}
|
||||
evalMode={false}
|
||||
highlightMode="expression"
|
||||
readOnly
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -10,6 +10,7 @@ import type {VariableItem, CodeMirror} from 'amis-ui';
|
||||
import {Icon, Button, FormItem, TooltipWrapper} from 'amis';
|
||||
import {autobind, FormControlProps} from 'amis-core';
|
||||
import {FormulaPlugin, editorFactory} from './textarea-formula/plugin';
|
||||
import {renderFormulaValue} from './FormulaControl';
|
||||
import FormulaPicker, {
|
||||
CustomFormulaPickerProps
|
||||
} from './textarea-formula/FormulaPicker';
|
||||
@ -387,6 +388,12 @@ export class TplFormulaControl extends React.Component<
|
||||
} = this.state;
|
||||
|
||||
const FormulaPickerCmp = customFormulaPicker ?? FormulaPicker;
|
||||
const highlightValue = FormulaEditor.highlightValue(
|
||||
formulaPickerValue,
|
||||
variables
|
||||
) || {
|
||||
html: formulaPickerValue
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -439,23 +446,11 @@ export class TplFormulaControl extends React.Component<
|
||||
|
||||
<TooltipWrapper
|
||||
trigger="hover"
|
||||
placement="left"
|
||||
placement="top"
|
||||
style={{fontSize: '12px'}}
|
||||
tooltip={{
|
||||
tooltipTheme: 'dark',
|
||||
tooltipClassName: 'btn-configured-tooltip',
|
||||
children: () => (
|
||||
<FormulaCodeEditor
|
||||
readOnly
|
||||
value={formulaPickerValue}
|
||||
variables={variables}
|
||||
evalMode={true}
|
||||
editorTheme="dark"
|
||||
editorOptions={{
|
||||
lineNumbers: false
|
||||
}}
|
||||
/>
|
||||
)
|
||||
children: () => renderFormulaValue(highlightValue)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
@ -1325,11 +1325,12 @@ setSchemaTpl('pageSubTitle', {
|
||||
type: 'textarea'
|
||||
});
|
||||
|
||||
setSchemaTpl('textareaDefaultValue', () => {
|
||||
setSchemaTpl('textareaDefaultValue', (options: any) => {
|
||||
return getSchemaTpl('textareaFormulaControl', {
|
||||
label: '默认值',
|
||||
name: 'value',
|
||||
mode: 'normal'
|
||||
mode: 'normal',
|
||||
...options
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -633,13 +633,19 @@
|
||||
}
|
||||
|
||||
.cm-field {
|
||||
background: #007bff;
|
||||
background: #28a745;
|
||||
}
|
||||
.cm-func {
|
||||
color: #ae4597;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
}
|
||||
.cm-expression {
|
||||
background-color: #007bff;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cm-error-token {
|
||||
background-position: left bottom;
|
||||
background-repeat: repeat-x;
|
||||
@ -656,8 +662,9 @@
|
||||
|
||||
&--singleLine {
|
||||
max-width: 100%;
|
||||
line-height: 20px;
|
||||
> .CodeMirror {
|
||||
height: 21px;
|
||||
height: 20px;
|
||||
|
||||
.CodeMirror-hscrollbar,
|
||||
.CodeMirror-vscrollbar {
|
||||
@ -665,15 +672,20 @@
|
||||
}
|
||||
|
||||
.CodeMirror-sizer {
|
||||
min-height: 21px !important;
|
||||
min-height: 20px !important;
|
||||
min-width: auto !important;
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
height: 21px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.CodeMirror-sizer + div {
|
||||
// 不设置可以用触摸板滚动，将代码滚不见了
|
||||
height: 0 !important;
|
||||
}
|
||||
.CodeMirror-lines {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -51,6 +51,12 @@ export interface CodeEditorProps
|
||||
|
||||
editorOptions?: any;
|
||||
|
||||
/**
|
||||
* expression 即高亮表达式整体
|
||||
* formula 即高亮表达式内部
|
||||
*/
|
||||
highlightMode?: 'expression' | 'formula';
|
||||
|
||||
/**
|
||||
* 用于提示的变量集合，默认为空
|
||||
*/
|
||||
@ -88,7 +94,8 @@ function CodeEditor(props: CodeEditorProps, ref: any) {
|
||||
editorTheme,
|
||||
theme: defaultTheme,
|
||||
editorOptions,
|
||||
placeholder
|
||||
placeholder,
|
||||
highlightMode
|
||||
} = props;
|
||||
const pluginRef = React.useRef<FormulaPlugin>();
|
||||
|
||||
@ -165,6 +172,7 @@ function CodeEditor(props: CodeEditorProps, ref: any) {
|
||||
plugin.setEvalMode(!!evalMode);
|
||||
plugin.setFunctions(functions || []);
|
||||
plugin.setVariables(variables || []);
|
||||
plugin.setHighlightMode(highlightMode || 'formula');
|
||||
editorDidMount?.(cm, editor, plugin);
|
||||
plugin.autoMarkText();
|
||||
|
||||
|
||||
@ -151,6 +151,9 @@ export interface FormulaPickerProps
|
||||
onClick: (e: React.MouseEvent) => void;
|
||||
setState: (state: any) => void;
|
||||
isOpened: boolean;
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
disabled?: boolean;
|
||||
}) => JSX.Element;
|
||||
|
||||
onConfirm?: (value?: any) => void;
|
||||
@ -169,6 +172,7 @@ export interface FormulaPickerState {
|
||||
isOpened: boolean;
|
||||
value: any;
|
||||
editorValue: string;
|
||||
onConfirm?: (value?: any) => void;
|
||||
isError: boolean | string;
|
||||
variables?: Array<VariableItem>;
|
||||
functions?: Array<FuncGroup>;
|
||||
@ -217,7 +221,7 @@ export class FormulaPicker extends React.Component<
|
||||
async componentDidUpdate(prevProps: FormulaPickerProps) {
|
||||
const {value} = this.props;
|
||||
|
||||
if (value !== prevProps.value) {
|
||||
if (value !== prevProps.value && !this.state.isOpened) {
|
||||
this.setState({
|
||||
value: typeof value === 'string' || !this.isTextInput() ? value : '',
|
||||
editorValue: this.value2EditorValue(this.props)
|
||||
@ -373,6 +377,7 @@ export class FormulaPicker extends React.Component<
|
||||
|
||||
confirm(value: any, ast?: any) {
|
||||
const {mixedMode} = this.props;
|
||||
const stateOnConfirm = this.state.onConfirm;
|
||||
const validate = this.validate(value);
|
||||
|
||||
if (validate === true) {
|
||||
@ -389,8 +394,12 @@ export class FormulaPicker extends React.Component<
|
||||
: `\${${value}}`;
|
||||
}
|
||||
|
||||
this.setState({value: result}, () => {
|
||||
this.close(undefined, () => this.handleConfirm());
|
||||
this.setState({value: result, onConfirm: undefined}, () => {
|
||||
this.close(undefined, () => {
|
||||
stateOnConfirm
|
||||
? stateOnConfirm(this.state.value)
|
||||
: this.handleConfirm();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.setState({isError: validate});
|
||||
@ -399,12 +408,16 @@ export class FormulaPicker extends React.Component<
|
||||
|
||||
@autobind
|
||||
async handleClick() {
|
||||
const {variables, data} = this.props;
|
||||
return this.openEditor(this.value2EditorValue(this.props));
|
||||
}
|
||||
|
||||
@autobind
|
||||
async openEditor(editorValue: string, onConfirm?: (value: any) => void) {
|
||||
const state = {
|
||||
...(await this.props.onPickerOpen?.(this.props)),
|
||||
editorValue: this.value2EditorValue(this.props),
|
||||
isOpened: true
|
||||
editorValue,
|
||||
isOpened: true,
|
||||
onConfirm
|
||||
};
|
||||
|
||||
if (state.functions) {
|
||||
@ -519,7 +532,10 @@ export class FormulaPicker extends React.Component<
|
||||
children({
|
||||
isOpened: this.state.isOpened,
|
||||
onClick: this.handleClick,
|
||||
setState: this.updateState
|
||||
setState: this.updateState,
|
||||
value,
|
||||
onChange: this.handleInputChange,
|
||||
disabled
|
||||
})
|
||||
) : (
|
||||
<div
|
||||
|
||||
@ -63,6 +63,8 @@ export class FormulaPlugin {
|
||||
*/
|
||||
evalMode: boolean = true;
|
||||
|
||||
highlightMode: 'expression' | 'formula' = 'formula';
|
||||
|
||||
disableAutoMark = false;
|
||||
|
||||
constructor(
|
||||
@ -90,6 +92,10 @@ export class FormulaPlugin {
|
||||
this.evalMode = evalMode;
|
||||
}
|
||||
|
||||
setHighlightMode(highlightMode: 'expression' | 'formula') {
|
||||
this.highlightMode = highlightMode;
|
||||
}
|
||||
|
||||
setDisableAutoMark(disableAutoMark: boolean) {
|
||||
this.disableAutoMark = disableAutoMark;
|
||||
this.autoMarkText(true);
|
||||
@ -238,6 +244,7 @@ export class FormulaPlugin {
|
||||
const value = editor.getValue();
|
||||
const functions = this.functions;
|
||||
const variables = this.variables;
|
||||
const highlightMode = this.highlightMode;
|
||||
|
||||
// 把旧的清掉
|
||||
this.widgets.forEach(widget => editor.removeLineWidget(widget));
|
||||
@ -252,6 +259,25 @@ export class FormulaPlugin {
|
||||
variableMode: false
|
||||
});
|
||||
traverseAst(ast, (ast: any): any => {
|
||||
if (highlightMode === 'expression') {
|
||||
if (ast.type === 'script') {
|
||||
this.markText(
|
||||
{
|
||||
line: ast.start.line - 1,
|
||||
ch: ast.start.column - 1
|
||||
},
|
||||
{
|
||||
line: ast.end.line - 1,
|
||||
ch: ast.end.column - 1
|
||||
},
|
||||
value.substring(ast.start.index + 2, ast.end.index - 1),
|
||||
'cm-expression',
|
||||
value
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (ast.type === 'func_call') {
|
||||
const funName = ast.identifier;
|
||||
const exists = functions.some(item =>
|
||||
|
||||
6
packages/amis-ui/src/custom.d.ts
vendored
6
packages/amis-ui/src/custom.d.ts
vendored
@ -4,7 +4,11 @@ declare module '*.svg' {
|
||||
}
|
||||
|
||||
declare module '*.md' {
|
||||
const content: any;
|
||||
const content: {
|
||||
toc: any;
|
||||
html: string;
|
||||
raw: string;
|
||||
};
|
||||
export default content;
|
||||
}
|
||||
|
||||
|
||||
@ -81,6 +81,7 @@ renderer.link = function (href: string, title: string, text: string) {
|
||||
};
|
||||
|
||||
function markdown2js(content: string, file: string) {
|
||||
var raw = content;
|
||||
var m = rYml.exec(content);
|
||||
var info: any = {};
|
||||
if (m && m[1]) {
|
||||
@ -214,6 +215,7 @@ function markdown2js(content: string, file: string) {
|
||||
}
|
||||
) +
|
||||
'</div>';
|
||||
info.raw = raw;
|
||||
info.toc = toc;
|
||||
|
||||
return 'export default ' + JSON.stringify(info, null, 2) + ';';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user