suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/assets/suneditor-contents.css

@@ -1,42 +1,31 @@
-:root {
-	--se-edit-font-size: 13px;
-	--se-edit-font: #333;
-	--se-edit-font-sub: #666;
-	--se-edit-background: #fff;
-	--se-edit-background-sub: #f9f9f9;
-	--se-edit-border-light: #e1e1e1;
-	--se-edit-border-dark: #b1b1b1;
-	--se-edit-border-dark-n1: #c1c1c1;
-	--se-edit-border-dark-n2: #d1d1d1;
-	--se-edit-anchor: #004cff;
-	--se-edit-anchor-on-back: #e8f7ff;
-	--se-edit-anchor-on-font: #0093ff;
-	--se-edit-hr-color: #333;
-	--se-edit-hr-on-back: #c7deff;
-	--se-edit-active: #4592ff;
-	--se-edit-hover: #80bdff;
-}
+@import url('design/index.css');
 
 /* suneditor content */
 .sun-editor-editable {
 	font-family: Helvetica Neue;
 	font-size: var(--se-edit-font-size);
-	color: var(--se-edit-font);
-	background-color: var(--se-edit-background);
-	line-height: 1.5;
+	color: var(--se-edit-font-color);
+	background-color: var(--se-edit-background-color);
 	word-break: normal;
 	word-wrap: break-word;
-	padding: 16px;
+	padding: var(--se-edit-inner-padding);
 	margin: 0;
 }
 
 .sun-editor-editable * {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	font-family: inherit;
 	font-size: inherit;
 	color: inherit;
+	line-height: var(--se-edit-line-height);
+}
+
+.sun-editor-editable.se-type-document-editable {
+	padding: var(--se-edit-inner-padding-doc-type);
+}
+.sun-editor-editable.se-document-page-mirror-a4 {
+	width: 21cm;
+	padding: var(--se-edit-inner-padding-doc-type);
 }
 
 /* RTL - editable */
@@ -45,9 +34,52 @@
 	direction: rtl;
 }
 
+/** component - figure */
 .sun-editor-editable .se-component > figure {
 	direction: initial;
 }
+.sun-editor-editable .se-component > figure > * {
+	margin: 0 !important;
+}
+
+/** component - figure - embed(blockquote) loading */
+.sun-editor-editable .se-component > figure > blockquote {
+	margin: 0;
+	position: relative;
+	min-height: 100px;
+}
+.sun-editor-editable .se-component > figure > blockquote::before {
+	display: block;
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 30px;
+	height: 30px;
+	border: 3px solid #f3f3f3;
+	border-top: 3px solid #3498db;
+	border-radius: 50%;
+	-webkit-animation: spin 1s linear infinite;
+	animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+	0% {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+	100% {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
+
+@keyframes spin {
+	0% {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+	100% {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}
 
 /** controllers on tag */
 .sun-editor-editable td,
@@ -69,14 +101,17 @@
 	padding: 0;
 }
 
-/* katex */
-.sun-editor-editable span.katex {
+/* math */
+.sun-editor-editable span.se-math {
 	display: inline-block;
 }
-
-.sun-editor-editable span.katex * {
+.sun-editor-editable span.se-math * {
 	direction: ltr;
 }
+/* mathjax */
+.sun-editor-editable span > .MathJax {
+	margin: 0.5em 0 !important;
+}
 
 /* a */
 .sun-editor-editable a {
@@ -101,15 +136,26 @@
 	background-color: var(--se-edit-anchor-on-back);
 }
 
+.sun-editor-editable a[data-se-anchor] {
+	cursor: default;
+	display: inline-block;
+	height: 20px;
+	width: 20px;
+	padding: 0 10px;
+	background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSI+CjxnIGlkPSJzdXJmYWNlMSI+CjxwYXRoIHN0eWxlPSIgc3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87ZmlsbDpyZ2IoMCUsMCUsMCUpO2ZpbGwtb3BhY2l0eToxOyIgZD0iTSAxNC4xNjc5NjkgMTUgTCAxMCAxMy4xODM1OTQgTCA1LjgzMjAzMSAxNSBMIDUuODMyMDMxIDQuMTY3OTY5IEwgMTQuMTY3OTY5IDQuMTY3OTY5IE0gMTQuMTY3OTY5IDIuNSBMIDUuODMyMDMxIDIuNSBDIDQuOTE0MDYyIDIuNSA0LjE2Nzk2OSAzLjI0NjA5NCA0LjE2Nzk2OSA0LjE2Nzk2OSBMIDQuMTY3OTY5IDE3LjUgTCAxMCAxNSBMIDE1LjgzMjAzMSAxNy41IEwgMTUuODMyMDMxIDQuMTY3OTY5IEMgMTUuODMyMDMxIDMuMjQyMTg4IDE1LjA4MjAzMSAyLjUgMTQuMTY3OTY5IDIuNSBaIE0gMTQuMTY3OTY5IDIuNSAiLz4KPC9nPgo8L3N2Zz4K')
+		no-repeat;
+	vertical-align: bottom;
+}
+
 /* pre */
 .sun-editor-editable pre {
 	display: block;
 	padding: 8px;
 	margin: 0 0 10px;
 	font-family: monospace;
-	color: var(--se-edit-font-sub);
+	color: var(--se-edit-font-pre);
 	line-height: 1.45;
-	background-color: var(--se-edit-background-sub);
+	background-color: var(--se-edit-background-pre);
 	border: 1px solid var(--se-edit-border-light);
 	border-radius: 2px;
 	white-space: pre-wrap !important;
@@ -122,10 +168,15 @@
 	list-style-position: outside;
 	display: block;
 	list-style-type: decimal;
+	-webkit-margin-before: 1em;
 	margin-block-start: 1em;
+	-webkit-margin-after: 1em;
 	margin-block-end: 1em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
+	-webkit-padding-start: 40px;
 	padding-inline-start: 40px;
 }
 
@@ -133,10 +184,15 @@
 	list-style-position: outside;
 	display: block;
 	list-style-type: disc;
+	-webkit-margin-before: 1em;
 	margin-block-start: 1em;
+	-webkit-margin-after: 1em;
 	margin-block-end: 1em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
+	-webkit-padding-start: 40px;
 	padding-inline-start: 40px;
 }
 
@@ -210,10 +266,14 @@
 	display: block;
 	font-family: inherit;
 	font-size: inherit;
-	color: #999;
+	color: var(--se-edit-font-quote);
+	-webkit-margin-before: 1em;
 	margin-block-start: 1em;
+	-webkit-margin-after: 1em;
 	margin-block-end: 1em;
+	-webkit-margin-start: 0;
 	margin-inline-start: 0;
+	-webkit-margin-end: 0;
 	margin-inline-end: 0;
 	border-style: solid;
 	border-width: 0;
@@ -250,9 +310,13 @@
 .sun-editor-editable h1 {
 	display: block;
 	font-size: 2em;
+	-webkit-margin-before: 0.67em;
 	margin-block-start: 0.67em;
+	-webkit-margin-after: 0.67em;
 	margin-block-end: 0.67em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
 	font-weight: bold;
 }
@@ -261,9 +325,13 @@
 .sun-editor-editable h2 {
 	display: block;
 	font-size: 1.5em;
+	-webkit-margin-before: 0.83em;
 	margin-block-start: 0.83em;
+	-webkit-margin-after: 0.83em;
 	margin-block-end: 0.83em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
 	font-weight: bold;
 }
@@ -272,9 +340,13 @@
 .sun-editor-editable h3 {
 	display: block;
 	font-size: 1.17em;
+	-webkit-margin-before: 1em;
 	margin-block-start: 1em;
+	-webkit-margin-after: 1em;
 	margin-block-end: 1em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
 	font-weight: bold;
 }
@@ -283,9 +355,13 @@
 .sun-editor-editable h4 {
 	display: block;
 	font-size: 1em;
+	-webkit-margin-before: 1.33em;
 	margin-block-start: 1.33em;
+	-webkit-margin-after: 1.33em;
 	margin-block-end: 1.33em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
 	font-weight: bold;
 }
@@ -294,9 +370,13 @@
 .sun-editor-editable h5 {
 	display: block;
 	font-size: 0.83em;
+	-webkit-margin-before: 1.67em;
 	margin-block-start: 1.67em;
+	-webkit-margin-after: 1.67em;
 	margin-block-end: 1.67em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
 	font-weight: bold;
 }
@@ -305,9 +385,13 @@
 .sun-editor-editable h6 {
 	display: block;
 	font-size: 0.67em;
+	-webkit-margin-before: 2.33em;
 	margin-block-start: 2.33em;
+	-webkit-margin-after: 2.33em;
 	margin-block-end: 2.33em;
+	-webkit-margin-start: 0px;
 	margin-inline-start: 0px;
+	-webkit-margin-end: 0px;
 	margin-inline-end: 0px;
 	font-weight: bold;
 }
@@ -317,6 +401,7 @@
 	display: flex;
 	border-width: 1px 0 0;
 	border-color: var(--se-edit-hr-color);
+	-o-border-image: initial;
 	border-image: initial;
 	height: 20px;
 	margin-top: 20px;
@@ -337,7 +422,6 @@
 
 .sun-editor-editable hr.on {
 	border-color: var(--se-edit-active);
-	-webkit-box-shadow: 0 0 0 0.1rem var(--se-edit-hr-on-back);
 	box-shadow: 0 0 0 0.1rem var(--se-edit-hr-on-back);
 }
 
@@ -351,7 +435,7 @@
 	width: 100%;
 	max-width: 100%;
 	margin: 0;
-	background-color: var(--se-edit-background);
+	background-color: var(--se-edit-background-color);
 	border-spacing: 0;
 	border-collapse: collapse;
 }
@@ -359,8 +443,7 @@
 /* RTL - table */
 .sun-editor-editable.se-rtl table {
 	margin: 0 0 10px auto;
-	background-color: var(--se-edit-background);
-	border-collapse: separate;
+	background-color: var(--se-edit-background-color);
 }
 
 .sun-editor-editable table caption {
@@ -368,7 +451,7 @@
 	text-align: unset;
 	padding: 0.5em;
 	margin: 0;
-	background-color: var(--se-edit-background-sub);
+	background-color: var(--se-edit-background-pre);
 	border: 1px solid var(--se-edit-border-light);
 	outline: none;
 }
@@ -382,7 +465,7 @@
 }
 
 .sun-editor-editable table thead {
-	border-bottom: 2px solid var(--se-edit-font);
+	border-bottom: 2px solid var(--se-edit-font-color);
 }
 
 .sun-editor-editable table tr {
@@ -419,6 +502,25 @@
 	-ms-user-select: none;
 }
 
+/* component read only */
+.sun-editor-editable .se-component:not(.se-input-component),
+.sun-editor-editable hr {
+	-webkit-user-modify: read-only;
+	-moz-user-modify: read-only;
+	-webkit-user-select: all;
+	-moz-user-select: all;
+	-ms-user-select: all;
+	user-select: all;
+}
+.sun-editor-editable figure figcaption {
+	-webkit-user-modify: read-write;
+	-moz-user-modify: read-write;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
 /** component */
 .sun-editor-editable .se-component {
 	display: flex;
@@ -434,7 +536,7 @@
 }
 
 .sun-editor-editable .se-component.se-file-figure > figure > a[data-se-file-download] {
-	color: var(--se-edit-font);
+	color: var(--se-edit-font-color);
 	margin: 0 4px;
 }
 .sun-editor-editable .se-component.se-file-figure > figure > a::before {
@@ -499,7 +601,7 @@
 
 .sun-editor-editable .se-flex-component {
 	width: 100%;
-	min-width: min-content;
+	min-width: auto;
 	max-width: 100%;
 	margin: 0 0 10px;
 }
@@ -507,7 +609,11 @@
 .sun-editor-editable .se-inline-component {
 	display: inline-block;
 	width: auto;
+	min-width: -webkit-min-content;
+	min-width: -moz-min-content;
 	min-width: min-content;
+	max-width: -webkit-max-content;
+	max-width: -moz-max-content;
 	max-width: max-content;
 	margin: 0;
 	padding: 0;
@@ -536,7 +642,7 @@
 .sun-editor-editable figure figcaption {
 	padding: 1em 0.5em;
 	margin: 0;
-	background-color: var(--se-edit-background-sub);
+	background-color: var(--se-edit-background-pre);
 	outline: none;
 }
 
@@ -555,7 +661,7 @@
 /** video */
 .sun-editor-editable .se-video-container iframe,
 .sun-editor-editable .se-video-container video {
-	outline: 1px solid #9e9e9e;
+	outline: 1px solid var(--se-edit-outline);
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -576,12 +682,20 @@
 	height: 54px;
 }
 
-/** -- Paragraph styles custom -- */
+/** page break */
+.sun-editor-editable .se-page-break {
+	visibility: hidden;
+	page-break-before: always;
+	margin: 0;
+	padding: 0;
+}
+
+/** ---------- Paragraph styles custom ---------- */
 /* Bordered */
 .sun-editor-editable .__se__p-bordered,
 .sun-editor .__se__p-bordered {
-	border-top: solid 1px var(--se-edit-border-dark);
-	border-bottom: solid 1px var(--se-edit-border-dark);
+	border-top: solid 1px #b1b1b1;
+	border-bottom: solid 1px #b1b1b1;
 	padding: 4px 0;
 }
 
@@ -602,9 +716,30 @@
 	border: 2px solid #fff;
 	border-radius: 6px;
 	text-transform: uppercase;
+	-webkit-animation: neonFlicker 1.5s infinite alternate;
 	animation: neonFlicker 1.5s infinite alternate;
 }
 
+@-webkit-keyframes neonFlicker {
+	0%,
+	19%,
+	21%,
+	23%,
+	25%,
+	54%,
+	56%,
+	100% {
+		text-shadow: -0.2rem -0.2rem 1rem #fff, 0.2rem 0.2rem 1rem #fff, 0 0 2px #f40, 0 0 4px #f40, 0 0 6px #f40, 0 0 8px #f40, 0 0 10px #f40;
+		box-shadow: 0 0 0.5px #fff, inset 0 0 0.5px #fff, 0 0 2px #08f, inset 0 0 2px #08f, 0 0 4px #08f, inset 0 0 4px #08f;
+	}
+	20%,
+	24%,
+	55% {
+		text-shadow: none;
+		box-shadow: none;
+	}
+}
+
 @keyframes neonFlicker {
 	0%,
 	19%,
@@ -629,14 +764,14 @@
 /* Shadow */
 .sun-editor-editable .__se__t-shadow,
 .sun-editor .__se__t-shadow {
-	text-shadow: -0.2rem -0.2rem 1rem var(--se-edit-background, 0.2rem 0.2rem 1rem --se-edit-background, 0 0 0.2rem #999, 0 0 0.4rem #888, 0 0 0.6rem #777) 0 0 0.8rem var(--se-edit-font-sub, 0 0 1rem #555);
+	text-shadow: -0.2rem -0.2rem 1rem #fff, 0.2rem 0.2rem 1rem #fff, 0 0 0.2rem #999, 0 0 0.4rem #888, 0 0 0.6rem #777, 0 0 0.8rem #666, 0 0 1rem #555;
 }
 
 /* Code */
 .sun-editor-editable .__se__t-code,
 .sun-editor .__se__t-code {
 	font-family: monospace;
-	color: var(--se-edit-font-sub);
+	color: #666;
 	background-color: rgba(27, 31, 35, 0.05);
 	border-radius: 6px;
 	padding: 0.2em 0.4em;