react-text-editor-kit/application/src/css/style.module.css

React Text Editor Kit is a customizable rich text editor component for React applications. It provides a flexible and easy-to-use interface for users to create and edit content with various formatting options. And also easy to integrate in react applicati

:root {
  --editor-background-color: #fff;
  --editor-border-color: #eee;
  --editor-text-color: #414141;
  --editor-toolbar-button-background: #fff;
  --editor-toolbar-text-color: #414141;
  --editor-toolbar-button-hover-background: #efefef;
  --editor-toolbar-button-selected-background: #dee0e2;
  --editor-svg-color: #414141;
  --editor-save-button-background: rgb(9, 134, 62);
}

html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.reactEditorMain img {
  max-width: 100%;
  height: auto;
}

.reactEditorMain .selectOption p,
.reactEditorMain .selectOption pre,
.reactEditorMain .selectOption h2,
.reactEditorMain .selectOption h3,
.reactEditorMain .selectOption h4,
.reactEditorMain .selectOption h5,
.reactEditorMain .selectOption h6,
.reactEditorMain .selectOption blockquote,
.reactEditorMain .selectOption h1 {
  margin: 0;
  color: var(--editor-toolbar-text-color) !important;
}

.reactEditorMain {
  background-color: var(--editor-background-color);
  border: 2px solid var(--editor-border-color);
  color: var(--editor-text-color);
  line-height: 16px !important;
  font-family: system-ui !important;
  border-radius: 10px;
}

.mlMainContentBox p {
  margin: 0 0 1em 0 !important;
}

.reactEditorMain .actionComponents {
  margin: 0px 12px;
  box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1),
    0 8px 8px -4px rgba(34, 47, 62, 0.07);
}
.reactEditorMain .wysiwygEditorToolbar {
  /* border-bottom: 1px solid var(--editor-border-color); */
  font-size: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0px;
  position: relative;
}
.reactEditorMain .wysiwygEditorToolbarWrapper {
  background-position: center top 42px;
  background-size: calc(100% - 0px * 2) calc(100% - 0px);
  background-attachment: local;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    #e3e3e3 0 1px,
    transparent 1px 44px
  );
  background-repeat: no-repeat;
}

.reactEditorMain .wysiwygEditorToolbar .hr1 {
  position: absolute;
  width: 98%;
  border-color: var(--editor-border-color);
  border: none;
  border-top: 1px solid var(--editor-border-color);
  height: 1px;
  display: none;
  top: 32px;
  margin: 0;
}

.reactEditorMain .wysiwygEditorToolbar .hr2 {
  top: 64px;
}

.reactEditorMain .wysiwygEditorToolbar .buttonGroup {
  display: inline-block;
  border-right: 1px solid var(--editor-border-color);
}
.reactEditorMain .wysiwygEditorToolbar button {
  background: var(--editor-toolbar-button-background);
  outline: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 10px;
  color: var(--editor-toolbar-text-color);
  line-height: 16px;
}
.reactEditorMain .wysiwygEditorToolbarWrapper button {
  margin-block: 6px;
}
.wysiwygEditorToolbar button:disabled,
.wysiwygEditorToolbar button.disabled {
  cursor: not-allowed;
}
.wysiwygEditorToolbar button:disabled svg,
.wysiwygEditorToolbar button.disabled svg {
  fill: #9fa2a6;
}

.wysiwygEditorToolbar button:hover {
  background-color: var(--editor-toolbar-button-hover-background);
}

.wysiwygEditorToolbar input {
  background-color: transparent;
  border: 1px solid var(--editor-border-color);
  outline: none;
  cursor: pointer;
}

.wysiwygEditorToolbar select,
.wysiwygEditorToolbar select:focus-visible {
  border: none !important;
  outline: none;
}

.mlMainContentBox {
  padding: 8px 12px;
  margin: 2px;
  height: 250px;
  overflow: auto;
  resize: vertical;
  max-width: 100% !important;
  line-height: normal;
}

.reactEditorMain .placeholderText {
  opacity: 0.8;
  font-style: italic;
}

.mlMainContentBox h1,
.mlMainContentBox h2,
.mlMainContentBox h3,
.mlMainContentBox h4,
.mlMainContentBox h5,
.mlMainContentBox h6,
.mlMainContentBox p {
  margin-top: 0;
  color: var(--editor-text-color);
}

.mlMainContentBox h1 {
  font-size: 2em;
}

.mlMainContentBox h2 {
  font-size: 1.5em;
}

.mlMainContentBox h3 {
  font-size: 1.17em;
}

.mlMainContentBox h4 {
  font-size: 1em;
}

.mlMainContentBox h5 {
  font-size: 0.83em;
}

.mlMainContentBox h6 {
  font-size: 0.67em;
}

.mlMainContentBox p {
  font-size: 1em;
}

.linkImage {
  height: 80px;
  width: 80px;
  object-fit: cover;
  border: 1px solid var(--editor-border-color);
  border-radius: 5px;
}

.linkImageBox {
  height: 80px;
  width: 80px;
  position: relative;
  margin-top: 10px;
}
.linkImageCross {
  position: absolute;
  top: -5px;
  right: -7px;
  height: 20px;
  width: 20px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding-bottom: 3px;
}

.mlMainContentBox:focus-visible {
  outline: none;
}

.wysiwygEditorSource {
  width: 98%;
  height: 80%;
  outline: none;
  padding: 10px;
  font-family: "Courier New", Monospace !important;
  font-size: small;
  white-space: pre-wrap;
  margin: 0;
  display: block;
  font-size: 16px;
  resize: none;
}

/* Modal.css */

.modalOverlay {
  font-family: system-ui !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.imageModelOverlay {
  z-index: 999999;
}

.fillScreenView {
  z-index: 999999;
}

.modelTitle {
  display: flex;
  justify-content: space-between;
}

.modelTitle h2 {
  margin: 0;
}

.modelTitle svg {
  font-size: 25px;
  cursor: pointer;
}

.modalPopup {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 85%;
  color: #000;
  border-radius: 5px;
}

.fillScreenView .modalPopup {
  max-width: 100% !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 0 !important;
}

.modalPopup hr {
  margin-bottom: 0;
}

.modalCloseBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 16px;
}

.wysiwygEditorToolbar button svg {
  fill: var(--editor-svg-color);
  color: var(--editor-svg-color);
  display: inline-block;
  height: 15px;
  width: 14px;
}

.reactEditorMain .customSelect {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  color: var(--editor-toolbar-text-color);
  line-height: 16px;
}

.reactEditorMain .customSelectFormat {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  line-height: 16px;
  margin-inline: 2px;
  background-color: #f7f7f7 !important;
}
.reactEditorMain .customSelectFormat:hover {
  background-color: var(--editor-toolbar-button-hover-background) !important;
}
.reactEditorMain .customSelectFormat .selectSelected {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reactEditorMain .customSelectFormat .selectSelected svg {
  width: 10px;
  height: 10px;
  margin-inline-start: 12px;
  opacity: 0.5;
}

.reactEditorMain .mainColorComponent svg {
  height: 15px !important;
}

.reactEditorMain .selectItems {
  position: absolute;
  background-color: #fff;
  border: 1px solid var(--editor-border-color);
  border-radius: 2px;
  z-index: 2;
  width: 160px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  top: 29px;
  left: 0;
  display: none;
}

.reactEditorMain .selectItems button {
  display: flex !important;
  width: 100%;
  padding: 7px;
  font-family: system-ui !important;
}

.reactEditorMain .pItems .selectItems {
  left: 142px;
}

.reactEditorMain .selectItemsFormat {
  position: absolute;
  background-color: var(--editor-background-color);
  border: 1px solid var(--editor-border-color);
  border-top: none;
  border-radius: 2px;
  z-index: 1;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  left: 0;
  top: 30px;
}

.reactEditorMain .selectItemsFormat .selectOption:hover {
  background-color: var(--editor-toolbar-button-hover-background) !important;
}

.reactEditorMain .selectItemsFormat h1 {
  font-size: 32px !important;
  font-weight: 600;
  line-height: 32px;
}
.reactEditorMain .selectItemsFormat h2 {
  font-size: 28px !important;
  font-weight: 600;
  line-height: 28px;
}
.reactEditorMain .selectItemsFormat h3 {
  font-size: 24px !important;
  font-weight: 600;
  line-height: 24px;
}
.reactEditorMain .selectItemsFormat h4 {
  font-size: 20px !important;
  line-height: 20px;
}
.reactEditorMain .selectItemsFormat h5 {
  font-size: 16px !important;
}
.reactEditorMain .selectItemsFormat h6 {
  font-size: 14px;
}

.reactEditorMain .selectItems.show {
  display: block;
}

.reactEditorMain .selectItems .selectOption,
.reactEditorMain .selectItemsFormat .selectOption {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 16px;
  white-space: nowrap;
}

.reactEditorMain .selectItems .selectInsert svg {
  height: 20px;
  width: 20px;
  margin-right: 7px;
  color: var(--editor-svg-color);
  fill: var(--editor-svg-color);
}

.reactEditorMain .selectItems button svg {
  height: 16px !important;
  width: 16px !important;
  margin-top: 2px;
}

.reactEditorMain .selectItems .selectInsert span {
  margin-top: 2px;
}

.reactEditorMain .selectedOption {
  background-color: var(--editor-toolbar-button-selected-background) !important;
}

.reactEditorMain .selectItems .selectOption:hover,
.reactEditorMain .selectInsert:hover {
  background-color: var(--editor-toolbar-button-hover-background) !important;
}

.formControlInput {
  font-family: system-ui !important;
  width: 100%;
  padding: 7px;
  border: 1px solid var(--editor-border-color);
  border-radius: 3px;
}

.formControlInput:focus-visible {
  outline: none;
}

.saveButton {
  background-color: var(--editor-save-button-background);
  color: #fff;
  padding: 7px 14px;
  border: none;
  margin-top: 10px;
  border-radius: 3px;
  cursor: pointer;
}

.saveButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cancel__btn {
  background-color: red;
  color: #fff;
  padding: 7px 14px;
  border: none;
  margin-top: 10px;
  border-radius: 3px;
  cursor: pointer;
}

.selectType button {
  padding: 6px 20px;
  background-color: var(--editor-toolbar-button-background);
  border: 1px solid var(--editor-border-color);
  cursor: pointer;
}

.selectType button.selectedType {
  background-color: #efefef;
}

.specialCharBox {
  display: flex;
  flex-wrap: wrap;
}

.specialChar {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
}

.specialChar:hover {
  background-color: #dee0e2;
}

.reactEditorMain .selectInsert {
  min-width: 120px;
  font-size: 16px;
  text-align: left;
  padding: 8px 10px;
  white-space: nowrap;
  display: flex;
  border-top: 1px solid var(--editor-border-color) !important;
  color: var(--editor-text-color) !important;
  background-color: var(--editor-background-color);
  border-radius: 0 !important;
  margin: 0 !important;
}

/* width */
.reactEditorMain ::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.reactEditorMain ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.reactEditorMain ::-webkit-scrollbar-thumb {
  background: #c4c4c4;
}

/* Handle on hover */
.reactEditorMain ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.fullScreenModel {
  width: 95% !important;
  height: 85vh;
}

.mlMainContentBox blockquote {
  border-left: 2px solid var(--editor-border-color);
  border-left-width: 5px;
  margin-left: 1.5rem;
  padding: 2px 0;
  padding-left: 1rem;
  font-style: italic;
  font-family: Georgia, Times, "Times New Roman", serif;
  color: var(--editor-text-color);
}

.reactEditorMain .selectItemsNested.left {
  left: -100%;
}

.reactEditorMain .selectFormationDropdown {
  position: absolute;
  background-color: var(--editor-background-color);
  border: 1px solid var(--editor-border-color);
  border-radius: 4px;
  left: 154px;
  display: none;
  min-width: 140px;
  z-index: 2;
  max-height: 200px;
  overflow-x: hidden;
}

.reactEditorMain .fontSizeDropdown {
  min-width: 90px;
}

.reactEditorMain .fontSizeDropdown .selectOption {
  padding: 10px;
  border-bottom: 1px solid var(--editor-border-color);
  font-size: 16px;
  width: 98%;
  margin: 0;
  border-radius: 0 !important;
  font-family: system-ui !important;
}

.reactEditorMain .selectFormationDropdown.show {
  display: block;
}

.reactEditorMain .fontFamilyOption {
  display: block;
  width: 99%;
  padding: 9px !important;
  border-top: 1px solid var(--editor-border-color) !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.reactEditorMain .fontFamilyOption:hover {
  background-color: var(--editor-toolbar-button-hover-background);
}

.reactEditorMain .bottomColoredLine {
  height: 3px;
  width: 14px;
  background-color: var(--editor-svg-color);
}

.reactEditorMain .mainColorComponent {
  position: relative;
  display: inline-block;
}

.reactEditorMain .openColorBox {
  position: absolute;
  height: 140px;
  width: 140px;
  background-color: var(--editor-background-color);
  border: 1px solid var(--editor-border-color);
  top: 30px;
  left: -1px;
  display: none;
  z-index: 1;
}

.reactEditorMain .colorBoxGrid button {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.reactEditorMain .openColorBox.show {
  display: block;
}

.reactEditorMain .colorBox {
  height: 28px;
  width: 28px;
  cursor: pointer;
  background-color: var(--editor-background-color);
}

.reactEditorMain .customColorPicker {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reactEditorMain .customColorPicker svg {
  height: 20px;
}

.reactEditorMain .increaseIconSize svg {
  height: 20px !important;
  width: 17px !important;
  /* margin-top: 3px; */
}

.reactEditorMain .increaseIconSize button {
  padding: 3px 10px;
}

.reactEditorMain .colorBox:hover {
  transform: scale(1.2);
  transition: transform 0.5s ease;
}

.reactEditorMain .verticalLine {
  height: 32px;
  width: 12px;
  /* background-color: var(--editor-border-color); */
}

.reactEditorMain .reactEditorMt2 {
  margin-top: 2px;
}
.reactEditorMt10 {
  margin-top: 10px;
}
.reactEditorMain .reactEditorMe5 {
  margin-right: 5px;
}

.reactEditorTextEnd {
  text-align: right;
}

.reactEditorMain .reactEditorTextLeft {
  text-align: left;
}

.reactEditorMain .reactEditorDFlex,
.reactEditorDFlex {
  display: flex;
}

.reactEditorMain .reactEditorW47,
.reactEditorW47 {
  width: 47%;
}

.reactEditorMain .reactEditorW45,
.reactEditorW45 {
  width: 40%;
}

.reactEditorMain .justifyContentBetween,
.justifyContentBetween {
  justify-content: space-between;
}

.reactEditorMain .reactEditorFlexColumn,
.reactEditorFlexColumn {
  flex-direction: column;
}

.editorErrorMessage {
  color: red;
}

.mlMainContentBox:empty:before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}
[contenteditable][data-mlx-editor-empty="true"]::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
  position: absolute;
}

.fullScreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--editor-toolbar-button-background);
  overflow: hidden;
  z-index: 99999 !important;
}

.rightClickPopupBackground {
  position: absolute;
  cursor: pointer;
  background-color: var(--editor-toolbar-button-background);
  border: 1px solid var(--editor-border-color);
  border-radius: 5px;
  z-index: 1000;
  min-width: 100px;
  padding: 3px 0px;
}

.rightClickPopupBackground hr {
  margin: 0;
  border: none;
  border-top: 1px solid var(--editor-border-color);
  width: 100%;
}

.rightClickPopup {
  padding: 5px 10px;
  font-family: system-ui;
  font-size: 15px;
  color: var(--editor-text-color);
}

.rightClickPopup:hover {
  background: var(--editor-toolbar-button-hover-background);
}

.rightClickPopup svg {
  margin-right: 5px;
  height: 20px;
  width: 20px;
  vertical-align: bottom;
}

.rightClickPopup.openLink svg {
  height: 15px;
  margin-bottom: 1px;
}

.lockUnlockIcon svg {
  height: 16px;
  margin-top: 38px;
  cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.content__editable__container {
  position: relative;
}

.image__submit__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 10px;
}

.image__submit__container img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  background-color: rgb(0 0 0 / 13%);
  object-fit: cover;
}

.image__cropper_btn {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.image__cropper__box img {
  background-color: rgb(0 0 0 / 13%);
}

.image__preview__box {
  position: relative;
}

.image__preview__box:last-child {
  max-height: 400px;
  overflow: auto;
}

.image__preview__box svg {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 20px;
  fill: #fff;
}

.disabledToolbar {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.disabledButton {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed !important;
}

.warning_container {
  border: 1px solid #e8e8e8;
  display: inline;
  padding: 18px;
  border-radius: 4px;
  background: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 10px);
  font-size: 16px;
  font-family: system-ui;
}