rich-react-editor/public/App.css

react editor with support of image and multi languages

.ant-dropdown-menu-item-active {
  background-color: #b5ede0;
}

.React-editor-container {
  position: relative;
  border: 1px solid #e6ecf5;
  border-radius: 4px;
}

.text-only .note-editing-area .note-editable {
  padding: 6px !important;
}

.text-only .note-editor .note-toolbar {
  display: none;
}

.fullscreen .React-editor-container__language-btn-box {
  z-index: 1051;
  position: fixed;
}

.React-editor-container__language-btn-box {
  background-color: #f3f3f369;
  padding: 0 7px;
  margin: auto;
  position: absolute;
  top: 5px;
  border: 1px solid #eee;
  border-radius: 4px;
  left: 6px;
  cursor: pointer;
  z-index: 1;
  display: flex;
  height: 30px;
  width: 100px;
  align-items: center;
  overflow: hidden;
}

.React-editor-container__language-btn-box span {
  font-size: smaller;
  text-overflow: ellipsis;
  overflow: hidden;
}

.React-editor-container__language-btn-box i {
  color: #000 !important;
  font-size: 16px !important;
  margin-right: 05px;
  margin-top: 0;
}

.ant-dropdown-menu {
  max-height: 250px;
  overflow-y: scroll;
}

/* Blocks of code */
.note-editable pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Account for some code outputs that place code tags in pre tags */
.note-editable code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}

.note-icon-caret,
.note-current-fontsize {
  color: #000;
}