suneditor 2.46.2 → 3.0.0-alpha.1

package/src/assets/suneditor-content.css

@@ -0,0 +1,646 @@
+: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-on-back: #c7deff;
+	--se-edit-active: #4592ff;
+	--se-edit-hover: #80bdff;
+}
+
+/* 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;
+	word-break: normal;
+	word-wrap: break-word;
+	padding: 16px;
+	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;
+}
+
+/* RTL - editable */
+.sun-editor-editable.se-rtl,
+.sun-editor-editable.se-rtl * {
+	direction: rtl;
+}
+
+.sun-editor-editable .se-component > figure {
+	direction: initial;
+}
+
+/** controllers on tag */
+.sun-editor-editable td,
+.sun-editor-editable th,
+.sun-editor-editable figure,
+.sun-editor-editable figcaption,
+.sun-editor-editable img,
+.sun-editor-editable iframe,
+.sun-editor-editable video,
+.sun-editor-editable audio {
+	position: relative;
+}
+
+/** span */
+.sun-editor-editable span {
+	display: inline;
+	vertical-align: baseline;
+	margin: 0;
+	padding: 0;
+}
+
+/* katex */
+.sun-editor-editable span.katex {
+	display: inline-block;
+}
+
+.sun-editor-editable span.katex * {
+	direction: ltr;
+}
+
+/* a */
+.sun-editor-editable a {
+	color: var(--se-edit-anchor);
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.sun-editor-editable span[style~='color:'] a {
+	color: inherit;
+}
+
+.sun-editor-editable a:hover,
+.sun-editor-editable a:focus {
+	cursor: pointer;
+	color: var(--se-edit-anchor-on-font);
+	text-decoration: underline;
+}
+
+.sun-editor-editable a.on {
+	color: var(--se-edit-anchor-on-font);
+	background-color: var(--se-edit-anchor-on-back);
+}
+
+/* pre */
+.sun-editor-editable pre {
+	display: block;
+	padding: 8px;
+	margin: 0 0 10px;
+	font-family: monospace;
+	color: var(--se-edit-font-sub);
+	line-height: 1.45;
+	background-color: var(--se-edit-background-sub);
+	border: 1px solid var(--se-edit-border-light);
+	border-radius: 2px;
+	white-space: pre-wrap !important;
+	word-wrap: break-word;
+	overflow: visible;
+}
+
+/* ol, ul */
+.sun-editor-editable ol {
+	list-style-position: outside;
+	display: block;
+	list-style-type: decimal;
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	padding-inline-start: 40px;
+}
+
+.sun-editor-editable ul {
+	list-style-position: outside;
+	display: block;
+	list-style-type: disc;
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	padding-inline-start: 40px;
+}
+
+.sun-editor-editable li {
+	display: list-item;
+	text-align: -webkit-match-parent;
+	margin-bottom: 5px;
+}
+
+/* nested list ol, ul */
+.sun-editor-editable ol ol,
+.sun-editor-editable ol ul,
+.sun-editor-editable ul ol,
+.sun-editor-editable ul ul {
+	margin: 0;
+}
+
+.sun-editor-editable ol ol,
+.sun-editor-editable ul ol {
+	list-style-type: lower-alpha;
+}
+
+.sun-editor-editable ol ol ol,
+.sun-editor-editable ul ol ol,
+.sun-editor-editable ul ul ol {
+	list-style-type: upper-roman;
+}
+
+.sun-editor-editable ul ul,
+.sun-editor-editable ol ul {
+	list-style-type: circle;
+}
+
+.sun-editor-editable ul ul ul,
+.sun-editor-editable ol ul ul,
+.sun-editor-editable ol ol ul {
+	list-style-type: square;
+}
+
+/* sub, sup */
+.sun-editor-editable sub,
+.sun-editor-editable sup {
+	font-size: 75%;
+	line-height: 0;
+}
+
+.sun-editor-editable sub {
+	vertical-align: sub;
+}
+
+.sun-editor-editable sup {
+	vertical-align: super;
+}
+
+/** format style */
+/* p */
+.sun-editor-editable p {
+	display: block;
+	margin: 0 0 10px;
+}
+
+/* div */
+.sun-editor-editable div {
+	display: block;
+	margin: 0;
+	padding: 0;
+}
+
+/* blockquote */
+.sun-editor-editable blockquote {
+	display: block;
+	font-family: inherit;
+	font-size: inherit;
+	color: #999;
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+	margin-inline-start: 0;
+	margin-inline-end: 0;
+	border-style: solid;
+	border-width: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+	border-color: var(--se-edit-border-dark);
+	padding-left: 20px;
+	padding-right: 5px;
+	border-left-width: 5px;
+	border-right-width: 0px;
+}
+
+.sun-editor-editable blockquote blockquote {
+	border-color: var(--se-edit-border-dark-n1);
+}
+
+.sun-editor-editable blockquote blockquote blockquote {
+	border-color: var(--se-edit-border-dark-n2);
+}
+
+.sun-editor-editable blockquote blockquote blockquote blockquote {
+	border-color: var(--se-edit-border-light);
+}
+
+/* RTL - blockquote */
+.sun-editor-editable.se-rtl blockquote {
+	padding-left: 5px;
+	padding-right: 20px;
+	border-left-width: 0px;
+	border-right-width: 5px;
+}
+
+/* h1 */
+.sun-editor-editable h1 {
+	display: block;
+	font-size: 2em;
+	margin-block-start: 0.67em;
+	margin-block-end: 0.67em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+/* h2 */
+.sun-editor-editable h2 {
+	display: block;
+	font-size: 1.5em;
+	margin-block-start: 0.83em;
+	margin-block-end: 0.83em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+/* h3 */
+.sun-editor-editable h3 {
+	display: block;
+	font-size: 1.17em;
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+/* h4 */
+.sun-editor-editable h4 {
+	display: block;
+	font-size: 1em;
+	margin-block-start: 1.33em;
+	margin-block-end: 1.33em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+/* h5 */
+.sun-editor-editable h5 {
+	display: block;
+	font-size: 0.83em;
+	margin-block-start: 1.67em;
+	margin-block-end: 1.67em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+/* h6 */
+.sun-editor-editable h6 {
+	display: block;
+	font-size: 0.67em;
+	margin-block-start: 2.33em;
+	margin-block-end: 2.33em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+/* hr */
+.sun-editor-editable hr {
+	display: flex;
+	border-width: 1px 0 0;
+	border-color: black;
+	border-image: initial;
+	height: 20px;
+	margin-top: 20px;
+	margin-bottom: 0;
+}
+
+.sun-editor-editable hr.__se__solid {
+	border-style: solid none none;
+}
+
+.sun-editor-editable hr.__se__dotted {
+	border-style: dotted none none;
+}
+
+.sun-editor-editable hr.__se__dashed {
+	border-style: dashed none none;
+}
+
+.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);
+}
+
+/* table */
+.sun-editor-editable table {
+	display: table;
+	table-layout: auto !important;
+	border-width: 1px;
+	border-style: solid;
+	border-color: var(--se-edit-border-light);
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	background-color: var(--se-edit-background);
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+
+/* RTL - table */
+.sun-editor-editable.se-rtl table {
+	margin: 0 0 10px auto;
+	background-color: var(--se-edit-background);
+	border-collapse: separate;
+}
+
+.sun-editor-editable table caption {
+	caption-side: initial;
+	text-align: unset;
+	padding: 0.5em;
+	margin: 0;
+	background-color: var(--se-edit-background-sub);
+	border: 1px solid var(--se-edit-border-light);
+	outline: none;
+}
+.sun-editor-editable table caption.se-table-caption-top {
+	caption-side: top;
+	border-bottom: 0;
+}
+.sun-editor-editable table caption.se-table-caption-bottom {
+	caption-side: bottom;
+	border-top: 0;
+}
+
+.sun-editor-editable table thead {
+	border-bottom: 2px solid var(--se-edit-font);
+}
+
+.sun-editor-editable table tr {
+	position: relative;
+	box-sizing: border-box;
+}
+
+.sun-editor-editable table th {
+	background-color: #f3f3f3;
+}
+
+.sun-editor-editable table th,
+.sun-editor-editable table td {
+	border-width: 1px;
+	border-style: solid;
+	border-color: var(--se-edit-border-light);
+	padding: 0.4em;
+	background-clip: padding-box;
+	background-color: inherit;
+	vertical-align: middle;
+}
+
+/** table style class */
+.sun-editor-editable table.se-table-layout-fixed {
+	table-layout: fixed !important;
+}
+
+.sun-editor-editable.se-disabled * {
+	user-select: none;
+	-o-user-select: none;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+/** component */
+.sun-editor-editable .se-component {
+	display: flex;
+	padding: 1px;
+	margin: 0 0 10px;
+	background-color: inherit;
+}
+
+/* file upload component */
+.sun-editor-editable .se-component.se-file-figure > figure {
+	padding: 1em;
+	outline: 1px solid #bbb;
+}
+
+.sun-editor-editable .se-component.se-file-figure > figure > a[data-se-file-download] {
+	color: var(--se-edit-font);
+	margin: 0 4px;
+}
+.sun-editor-editable .se-component.se-file-figure > figure > a::before {
+	content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLDE4SDRWOEgyME0yMCw2SDEyTDEwLDRINEMyLjg5LDQgMiw0Ljg5IDIsNlYxOEEyLDIgMCAwLDAgNCwyMEgyMEEyLDIgMCAwLDAgMjIsMThWOEMyMiw2Ljg5IDIxLjEsNiAyMCw2WiIgLz48L3N2Zz4=');
+	display: inline-block;
+	width: 1.5em;
+	height: auto;
+	vertical-align: middle;
+}
+
+/* float */
+.sun-editor-editable .__se__float-left {
+	float: left;
+	margin-right: 4px;
+}
+
+.sun-editor-editable .__se__float-right {
+	float: right;
+	margin-left: 4px;
+}
+
+.sun-editor-editable .__se__float-center {
+	float: center;
+}
+
+.sun-editor-editable .__se__float-none {
+	float: none;
+}
+
+/** image, video .. */
+.sun-editor-editable img,
+.sun-editor-editable iframe,
+.sun-editor-editable video,
+.sun-editor-editable audio {
+	display: block;
+	margin: 0;
+	padding: 0;
+	width: auto;
+	height: auto;
+	max-width: 100%;
+	cursor: default;
+}
+
+/** image, video iframe figure cover */
+.sun-editor-editable .se-image-container,
+.sun-editor-editable .se-video-container {
+	width: auto;
+	height: auto;
+	max-width: 100%;
+}
+
+.sun-editor-editable figure {
+	display: block;
+	outline: none;
+	min-width: 20px;
+	padding: 0;
+	margin: 0;
+}
+.sun-editor-editable .se-component figure {
+	padding: 0;
+}
+
+.sun-editor-editable .se-flex-component {
+	width: 100%;
+	min-width: min-content;
+	max-width: 100%;
+	margin: 0 0 10px;
+}
+
+.sun-editor-editable .se-inline-component {
+	display: inline-block;
+	width: auto;
+	min-width: min-content;
+	max-width: max-content;
+	margin: 0;
+	padding: 0;
+}
+
+.sun-editor-editable figure.se-scroll-figure-x {
+	overflow-x: auto;
+	padding: 0 1px;
+}
+.sun-editor-editable figure.se-scroll-figure-y {
+	overflow-y: auto;
+	padding: 1px 0;
+}
+.sun-editor-editable figure.se-scroll-figure-xy {
+	overflow-x: auto;
+	overflow-y: auto;
+	padding: 1px;
+}
+
+.sun-editor-editable .__se__float-left figure,
+.sun-editor-editable .__se__float-right figure,
+.sun-editor-editable .__se__float-center figure {
+	margin: auto !important;
+}
+
+.sun-editor-editable figure figcaption {
+	padding: 1em 0.5em;
+	margin: 0;
+	background-color: var(--se-edit-background-sub);
+	outline: none;
+}
+
+.sun-editor-editable figure figcaption p {
+	line-height: 2;
+	margin: 0;
+}
+
+/* image */
+.sun-editor-editable .se-image-container a img {
+	padding: 1px;
+	margin: 1px;
+	outline: 1px solid var(--se-edit-active);
+}
+
+/** video */
+.sun-editor-editable .se-video-container iframe,
+.sun-editor-editable .se-video-container video {
+	outline: 1px solid #9e9e9e;
+	position: absolute;
+	top: 0;
+	left: 0;
+	border: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.sun-editor-editable .se-video-container figure {
+	left: 0px;
+	width: 100%;
+	max-width: 100%;
+}
+
+/** audio */
+.sun-editor-editable audio {
+	width: 300px;
+	height: 54px;
+}
+
+.sun-editor-editable audio.active {
+	outline: 2px solid var(--se-edit-hover);
+}
+
+/** -- 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);
+	padding: 4px 0;
+}
+
+/* Spaced */
+.sun-editor-editable .__se__p-spaced,
+.sun-editor .__se__p-spaced {
+	letter-spacing: 1px;
+}
+
+/* Neon (https://codepen.io/GeorgePark/pen/MrjbEr) */
+.sun-editor-editable .__se__p-neon,
+.sun-editor .__se__p-neon {
+	font-weight: 200;
+	font-style: italic;
+	background: #000;
+	color: #fff;
+	padding: 6px 4px;
+	border: 2px solid #fff;
+	border-radius: 6px;
+	text-transform: uppercase;
+	animation: neonFlicker 1.5s infinite alternate;
+}
+
+@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;
+	}
+}
+
+/* -- Text styles custom -- */
+/* 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);
+}
+
+/* Code */
+.sun-editor-editable .__se__t-code,
+.sun-editor .__se__t-code {
+	font-family: monospace;
+	color: var(--se-edit-font-sub);
+	background-color: rgba(27, 31, 35, 0.05);
+	border-radius: 6px;
+	padding: 0.2em 0.4em;
+}