@oix1987/yjd 1.0.2 → 1.0.3

package/dist/styles.css

@@ -0,0 +1,2123 @@
+/* ===================================
+   Rich Editor - Component Styles
+   ===================================*/
+
+/* === CORE EDITOR === */
+.yjd-rich-editor {
+  position: relative;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 0 auto;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+@layer base {
+  .yjd-rich-editor .toolbar-container button,
+  .yjd-rich-editor .toolbar-container input,
+  .yjd-rich-editor .toolbar-container select,
+  .yjd-rich-editor .toolbar-container optgroup,
+  .yjd-rich-editor .toolbar-container textarea,
+  .yjd-rich-editor .toolbar-container ::file-selector-button {
+    font: normal 500 14px/1.4 "Inter", Arial, sans-serif !important;
+    letter-spacing: normal !important;
+    font-feature-settings: normal !important;
+    font-variation-settings: normal !important;
+  }
+    /* Ensure emoji button font size is applied with high specificity */
+    .yjd-rich-editor .emoji-picker-popup .emoji-button,
+    .yjd-rich-editor .emoji-picker-popup button.emoji-button {
+      font-size: 20px !important;
+    }
+}
+@layer base {
+
+  .yjd-rich-editor .rich-editor-popup-container button,
+  .yjd-rich-editor .rich-editor-popup-container input,
+  .yjd-rich-editor .rich-editor-popup-container select,
+  .yjd-rich-editor .rich-editor-popup-container optgroup,
+  .yjd-rich-editor .rich-editor-popup-container textarea,
+  .yjd-rich-editor .rich-editor-popup-container ::file-selector-button {
+    font: normal 500 14px/1.4 "Inter", Arial, sans-serif !important;
+    letter-spacing: normal !important;
+    font-feature-settings: normal !important;
+    font-variation-settings: normal !important;
+  }
+    /* Ensure emoji button font size is applied with high specificity */
+    .yjd-rich-editor .emoji-picker-popup .emoji-button,
+    .yjd-rich-editor .emoji-picker-popup button.emoji-button {
+      font-size: 20px !important;
+    }
+}
+
+.yjd-rich-editor .rich-editor-area {
+  flex: 1 1 auto;
+  min-height: 40px;
+  font-size: 16px;
+  line-height: 1.7;
+  outline: none;
+  padding: 20px 20px 20px 20px;
+  background: #fff;
+  color: #2c3e50;
+  font-family: inherit;
+  overflow-y: auto;
+  box-sizing: border-box;
+  border: none;
+  text-align: left;
+  position: relative;
+}
+
+/* Placeholder styles for contentEditable */
+.yjd-rich-editor .rich-editor-area[data-placeholder]:before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+  pointer-events: none;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  font-style: italic;
+  display: none;
+  z-index: 1;
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+.yjd-rich-editor .rich-editor-area[data-placeholder].placeholder-visible:before {
+  display: block;
+}
+
+.yjd-rich-editor .rich-editor-area {
+  font-size: 16px;
+  line-height: 1.7;
+  font-family: inherit;
+  color: #2c3e50;
+  padding: 20px 20px;
+  box-sizing: border-box;
+}
+
+/* inline elements */
+.yjd-rich-editor .rich-editor-area b,
+.yjd-rich-editor .rich-editor-area strong {
+  font-weight: bold;
+}
+
+.yjd-rich-editor .rich-editor-area i,
+.yjd-rich-editor .rich-editor-area em {
+  font-style: italic;
+}
+
+.yjd-rich-editor .rich-editor-area u {
+  text-decoration: underline;
+}
+
+.yjd-rich-editor .rich-editor-area a {
+  color: #2563eb;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* block text */
+.yjd-rich-editor .rich-editor-area p {
+  margin: 0 0 1em;
+}
+
+/* headings */
+.yjd-rich-editor .rich-editor-area h1 {
+  font-size: 2em;
+  font-weight: bold;
+  margin: 0.67em 0;
+}
+
+.yjd-rich-editor .rich-editor-area h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin: 0.75em 0;
+}
+
+.yjd-rich-editor .rich-editor-area h3 {
+  font-size: 1.25em;
+  font-weight: bold;
+  margin: 0.83em 0;
+}
+
+.yjd-rich-editor .rich-editor-area h4 {
+  font-size: 1.1em;
+  font-weight: bold;
+  margin: 1em 0;
+}
+
+.yjd-rich-editor .rich-editor-area h5 {
+  font-size: 1em;
+  font-weight: bold;
+  margin: 1.25em 0;
+}
+
+.yjd-rich-editor .rich-editor-area h6 {
+  font-size: 0.875em;
+  font-weight: bold;
+  margin: 1.5em 0;
+  color: #555;
+}
+
+/* lists */
+.yjd-rich-editor .rich-editor-area ul,
+.yjd-rich-editor .rich-editor-area ol {
+  margin: 0 0 1em 2em;
+  padding: 0;
+}
+
+.yjd-rich-editor .rich-editor-area li {
+  margin: 0.25em 0;
+}
+
+/* code & pre */
+.yjd-rich-editor .rich-editor-area pre,
+.yjd-rich-editor .rich-editor-area code {
+  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
+  background: #f1f2f3;
+  padding: 4px 6px;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.yjd-rich-editor .rich-editor-area pre {
+  display: block;
+  white-space: pre;
+  margin: 1em 0;
+}
+
+.yjd-rich-editor .rich-editor-area code {
+  display: inline;
+}
+
+/* blockquote */
+.yjd-rich-editor .rich-editor-area blockquote {
+  border-left: 4px solid #d1d5db;
+  margin: 1em 0;
+  padding: 4px 12px;
+  color: #555;
+  font-style: italic;
+  background: #f9fafb;
+}
+.yjd-rich-editor .rich-editor-area sub {
+  font-size: 0.75em;
+  vertical-align: sub;
+  line-height: 1;
+}
+
+.yjd-rich-editor .rich-editor-area sup {
+  font-size: 0.75em;
+  vertical-align: super;
+  line-height: 1;
+}
+.yjd-rich-editor .rich-editor-area  a{
+  cursor: pointer;
+}
+.yjd-rich-editor .rich-editor-area pre {
+  background-color: #f1f2f3;
+  width: 96%;
+  padding: 10px 2% 10px 2%;
+  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
+  overflow-x: auto;
+  white-space: pre;
+  word-wrap: normal;
+}
+/* Force contentEditable to create P tags instead of DIV on Enter */
+.yjd-rich-editor .rich-editor-area div {
+  display: block;
+}
+
+.yjd-rich-editor .rich-editor-area:empty::before {
+  content: '';
+  display: block;
+}
+
+.yjd-rich-editor .rich-editor-statusbar {
+  position: relative;
+  z-index: 1000;
+  padding: 4px 12px;
+  border-top: 1px solid #d1d5db;
+  background: #f9fafb;
+  font-size: 13px;
+  color: #6b7280;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: inherit;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+/* === TOOLBAR === */
+.yjd-rich-editor .rich-editor-toolbar-container{
+  border-bottom: 1px solid #d1d5db;
+  position: relative;
+  z-index: 1000; /* Ensure toolbars are above resize handles */
+}
+.yjd-rich-editor .rich-editor-toolbar-1{
+    padding:8px 16px;
+    display:flex;
+    justify-content:space-between;
+    gap:20px;
+    flex-wrap:wrap;
+    background:#FCFCFC;
+    align-items:center;
+    min-height:48px;
+    padding-bottom:8px;
+    box-sizing:border-box;
+    width:100%;
+    overflow:hidden;
+    z-index: 1000; /* Higher than resize handles */
+    position: relative;
+}
+.yjd-rich-editor .rich-editor-toolbar-2{
+  display:none;
+  padding: 8px 16px;
+  justify-content: space-between;
+  gap: 20px;
+  flex-wrap: wrap;
+  background: #FCFCFC;
+  align-items: center;
+  min-height: 48px;
+  padding-bottom: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  z-index: 1000; /* Higher than resize handles */
+  position: relative;
+}
+.yjd-rich-editor .rich-editor-toolbar-2.visible{
+  display:flex;
+}
+
+/* === TOOLBAR GROUPS === */
+.yjd-rich-editor .toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* === TOOLBAR BUTTONS === */
+
+.yjd-rich-editor .rich-editor-toolbar-btn{
+  height: 20px;
+  min-width: 22px;
+  width: 22px;
+  display: inline-flex;
+  border-radius: 4px;
+  font-size: 14px;
+  align-items: center;
+  background:transparent;
+  justify-content: center;
+  font-weight: 500;
+  border: none;
+}
+.yjd-rich-editor .custom-select-button span{
+  justify-content: left !important;
+}
+.yjd-rich-editor .custom-select-button:focus  {
+  outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+  
+}
+.yjd-rich-editor .rich-editor-toolbar-btn span{
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn:hover {
+  background: #EEEEEE !important;
+  cursor: pointer;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn.active{
+  background: #EEEEEE !important;
+  color: #136FDF !important;
+}
+
+.yjd-rich-editor .rich-editor-toolbar-btn.active svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg {
+  fill: #136FDF !important;
+}
+
+.yjd-rich-editor .rich-editor-toolbar-btn.active svg path,
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path {
+  fill: #136FDF !important;
+}
+
+
+
+/* Specific icon styles for better visibility */
+.yjd-rich-editor .rich-editor-toolbar-btn.list-btn .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.emoji-btn .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.image-btn .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.video-btn .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.tag-btn .icon svg,
+.yjd-rich-editor .rich-editor-toolbar-btn.import-btn .icon svg {
+  width: 16px;
+  height: 16px;
+  fill: #454545;
+}
+
+/*block toolbar*/
+.yjd-rich-editor .block-toolbar-btn{
+  border:none;
+  border-radius:4px;
+  padding:4px;
+  background:transparent;
+  cursor:pointer;
+  font-size:14px;
+  font-weight:500;
+  align-items:center;
+  justify-content:center;
+  display:inline-flex;
+}
+.yjd-rich-editor .block-toolbar-btn:hover{
+  background:#EEEEEE;
+}
+.yjd-rich-editor .block-toolbar-btn.active{
+  background:#CCCCCC;
+  color: #136FDF !important;
+}
+
+.yjd-rich-editor .block-toolbar-btn.active svg,
+.yjd-rich-editor .block-toolbar-btn.active .icon svg {
+  fill: #136FDF !important;
+}
+
+.yjd-rich-editor .block-toolbar-btn.active svg path,
+.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
+  fill: #136FDF !important;
+}
+
+/* Block toolbar container and arrow */
+.yjd-rich-editor .block-toolbar-container {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  padding: 8px;
+  background: #fff;
+  border-radius: 6.9px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
+}
+
+.yjd-rich-editor .block-toolbar-arrow {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #fff;
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+}
+
+/* Table toolbar container and arrow */
+.yjd-rich-editor .table-toolbar-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
+}
+
+.yjd-rich-editor .table-toolbar-arrow {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #fff;
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+}
+
+/* Update block toolbar to use flexbox for proper layout */
+.yjd-rich-editor .block-toolbar {
+  display: none;
+  position: absolute;
+  z-index: 1001;
+  background: transparent;
+  border: none;
+  border-radius: 6.9px;
+  box-sizing: border-box;
+  padding: 0;
+  gap: 0;
+  flex-direction: column;
+  align-items: center;
+}
+
+.yjd-rich-editor .block-toolbar.visible {
+  display: flex;
+}
+/* === COLOR PICKER === */
+.yjd-rich-editor .color-picker-popup {
+  position: absolute;
+  background: #fff;
+  display:none;
+  border-radius: 6.9px;
+  padding: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .color-picker-popup.visible{
+  display:block !important;
+}
+
+/* === CUSTOM SELECT === */
+.yjd-rich-editor .custom-select-popup, .yjd-rich-editor .heading-select-popup, .yjd-rich-editor .capitalization-select-popup, .yjd-rich-editor .font-family-select-popup, .yjd-rich-editor .line-height-select-popup, .yjd-rich-editor .text-size-select-popup {
+  position: absolute;
+  background: #fff;
+  display: none;
+  border: 1px solid #d1d5db;
+  border-radius: 6.9px;
+  padding: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  z-index: 1002;
+  max-height: 200px;
+  overflow-y: auto;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .custom-select-popup.visible, .yjd-rich-editor .heading-select-popup.visible, .yjd-rich-editor .font-family-select-popup.visible, .yjd-rich-editor .line-height-select-popup.visible, .yjd-rich-editor .capitalization-select-popup.visible, .yjd-rich-editor .text-size-select-popup.visible {
+  display: block !important;
+}
+
+.yjd-rich-editor .link-popup ,.yjd-rich-editor .image-popup,.yjd-rich-editor .video-popup, .yjd-rich-editor .tag-popup {
+  width: 299px;
+}
+.yjd-rich-editor .item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+
+.yjd-rich-editor .heading-select-popup {
+  width: 190px;
+  max-width: 100vw;
+}
+
+.yjd-rich-editor .capitalization-select-popup {
+  width: 150px;
+  max-width: 100vw;
+}
+
+.yjd-rich-editor .font-family-select-popup {
+  width: 190px;
+  max-width: 100vw;
+}
+
+.yjd-rich-editor .line-height-select-popup {
+  width: 80px;
+  max-width: 100vw;
+}
+
+.yjd-rich-editor .text-size-select-popup {
+  width: 150px;
+  max-width: 100vw;
+}
+
+.yjd-rich-editor .custom-select-item-button {
+  width: 100%;
+  padding: 4px 4px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #111827;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* Allow interaction with select item buttons */
+  pointer-events: auto;
+}
+
+.yjd-rich-editor .custom-select-item-button:hover {
+  background: #EEEEEE;
+}
+
+.yjd-rich-editor .custom-select-item-button.current {
+  font-weight: 500;
+  background: #EEEEEE !important;
+}
+.yjd-rich-editor .custom-select-item-button .item-checkmark{
+  display:none;
+}
+.yjd-rich-editor .custom-select-item-button.current .item-checkmark{
+  display:block;
+}
+.yjd-rich-editor .item-text {
+  flex: 1;
+}
+.yjd-rich-editor .dropdown-icon{
+  display: inline-flex !important;
+  align-items: center ;
+  justify-content: center ;
+}
+
+
+.yjd-rich-editor .color-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 6px 4px;
+  margin-bottom: 12px;
+}
+
+.yjd-rich-editor .color-button {
+  width: 24px;
+  height: 24px;
+  border:none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+  margin: 0;
+  /* Allow interaction with color buttons */
+  pointer-events: auto;
+}
+
+.yjd-rich-editor .color-button:hover {
+  transform: scale(1.1);
+  border-color: #374151;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.yjd-rich-editor .custom-color-container {
+  position: relative;
+  padding-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 0;
+  /* đảm bảo ::before không che nội dung */
+}
+
+.yjd-rich-editor .custom-color-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -8px;
+  width: calc(100% + 16px);
+  /* 8px trái + 8px phải */
+  height: 0;
+  border-top: 1px solid #e5e7eb;
+  z-index: -1;
+  /* đặt phía sau nội dung */
+}
+
+.yjd-rich-editor .custom-color-label {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 0;
+}
+
+
+.yjd-rich-editor .yjd-input-title{
+  margin: 0;
+  color: #252424;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+.yjd-rich-editor .yjd-input-label{
+  color: #252424;
+  margin: 0;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+.yjd-rich-editor .yjd-input-group{
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.yjd-rich-editor .yjd-input {
+  padding: 10px;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 37px;
+  border-radius: 10px;
+  border: 1px solid #E1E1E1;
+  box-sizing: border-box;
+  color: #252424 !important;
+  font-size: 14px;
+  /* Allow interaction with inputs */
+  pointer-events: auto;
+}
+.yjd-rich-editor .yjd-input:focus {
+  outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+.yjd-rich-editor .yjd-button-container{
+  display: flex ;
+  justify-content: flex-end;
+  gap: 4px;
+}
+.yjd-rich-editor .yjd-button-confirm{
+  padding: 8px 15px;
+  align-items: center;
+  border-radius: 6px;
+  background: #181616;
+  box-shadow: 0px 1px 3.3px 0px rgba(0, 0, 0, 0.04);
+  /* Allow interaction with buttons */
+  pointer-events: auto;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  cursor: pointer;
+}
+.yjd-rich-editor .yjd-button-cancel{
+  border-radius: 6px;
+  align-items: center;
+  padding: 8px 15px;
+  border: 1px solid #E0E0E0;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 3.3px 0px rgba(0, 0, 0, 0.04);
+  color: #2A2727;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  cursor: pointer;
+}
+.yjd-rich-editor .button-disable{
+  cursor: not-allowed;
+}
+/* === LINK POPUP === */
+.yjd-rich-editor .link-popup {
+  position: absolute;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  display: none;
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
+  z-index: 1000;
+  margin: 0;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .link-popup.visible {
+  display: block !important;
+}
+
+.yjd-rich-editor .link-popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+.yjd-rich-editor .yjd-input-upload-group{
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.yjd-rich-editor .yjd-custom-upload-button {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid #E1E1E1;
+  background: #FFF;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.yjd-rich-editor .yjd-suggestions-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.yjd-rich-editor .yjd-suggestion-button{
+  border: none;
+  display: flex;
+  padding: 4px 10px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 30px;
+  background:  #F5F5F5;
+  cursor: pointer;
+  font-size: 14px;
+  color: #252424 !important;
+}
+.yjd-rich-editor .yjd-select-input{
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  padding: 10px 10px 10px 10px;
+  border-radius: 10px;
+  border: 1px solid #E1E1E1;
+  max-height: 37px;
+  align-items: center;
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"%3E%3Cpath d="M4.55859 7.94141C4.80273 8.18555 5.19922 8.18555 5.44336 7.94141L9.19336 4.19141C9.4375 3.94727 9.4375 3.55078 9.19336 3.30664C8.94922 3.0625 8.55274 3.0625 8.30859 3.30664L5 6.61523L1.69141 3.30859C1.44727 3.06445 1.05078 3.06445 0.806641 3.30859C0.5625 3.55273 0.5625 3.94922 0.806641 4.19336L4.55664 7.94336L4.55859 7.94141Z" fill="%23A4A7AE" /%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 10px;
+  font-size: 14px;
+  color: #252424 !important;
+}
+.yjd-rich-editor .yjd-select-input:focus {
+  outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+
+
+/* === TABLE POPUP === */
+.yjd-rich-editor .table-popup {
+  position: absolute;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  display: none;
+  border: 1px solid #d1d5db;
+  border-radius: 6.9px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .table-popup.visible {
+  display: block !important;
+}
+
+.yjd-rich-editor .table-popup-content {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+}
+
+.yjd-rich-editor .table-popup-content>* {
+  position: relative;
+  width: 100%;
+}
+
+/* Kẻ đường phân cách giữa các phần tử, kéo dài vượt padding */
+.yjd-rich-editor .table-popup-content>*:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  /* nửa khoảng cách của gap: 12px */
+  left: -8px;
+  /* tràn ra ngoài padding 8px */
+  right: -8px;
+  height: 1px;
+  background-color: #e5e7eb;
+}
+
+.yjd-rich-editor .table-grid-selector {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 1px;
+  border-bottom: 1px solid rgb(238, 238, 238);
+}
+
+.yjd-rich-editor .table-size-display{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Lato', sans-serif;
+  color: #252424 !important;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.yjd-rich-editor .table-grid-cell {
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border: 1px solid rgb(238, 238, 238);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  border-radius: 2px;
+}
+
+.yjd-rich-editor .table-grid-cell:hover,
+.yjd-rich-editor .table-grid-cell.highlighted {
+  background: #EEEEEE;
+}
+
+/* === TABLE STYLES === */
+.yjd-rich-editor .rich-editor-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 1.5;
+  position: relative;
+  display: table;
+  table-layout: auto;
+}
+
+.yjd-rich-editor .rich-editor-table td {
+  border: 1px solid #d1d5db;
+  padding: 8px 12px;
+  min-height: 28px;
+  vertical-align: top;
+  background: #fff;
+}
+
+.yjd-rich-editor .rich-editor-table td:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+  background: #fefefe;
+}
+
+/* === TABLE TOOLBAR === */
+.yjd-rich-editor .table-toolbar {
+  position: absolute;
+  display: none;
+  z-index: 1002;
+  background: transparent;
+  border: none;
+  border-radius: 6.9px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.yjd-rich-editor .table-toolbar-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.yjd-rich-editor .table-toolbar.visible {
+  display: block;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.yjd-rich-editor .table-toolbar-btn {
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #374151;
+  border:none;
+  background:transparent;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.yjd-rich-editor .table-toolbar-btn:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.yjd-rich-editor .table-toolbar-btn:active {
+  background: #e5e7eb;
+  border-color: #9ca3af;
+  color: #136FDF !important;
+}
+
+/* Responsive table toolbar */
+@media (max-width: 768px) {
+  .yjd-rich-editor .table-toolbar-container {
+    flex-wrap: wrap;
+    max-width: 200px;
+    gap: 2px;
+  }
+  
+  .yjd-rich-editor .table-toolbar-btn {
+    height: 24px;
+    min-width: 24px;
+    font-size: 10px;
+    padding: 2px 4px;
+  }
+}
+
+/* === TEXT ALIGN PICKER === */
+.yjd-rich-editor .text-align-picker-popup {
+  position: absolute;
+  background: #fff;
+  display: none;
+  border: 1px solid #d1d5db;
+  border-radius: 6.9px;
+  padding: 8px 4px 0 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none; 
+  user-select: none;
+}
+
+.yjd-rich-editor .text-align-picker-popup.visible {
+  display: block !important;
+}
+
+.yjd-rich-editor .align-button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 98px;
+  height: 115px;
+  
+}
+.yjd-rich-editor .align-button .icon-wrapper{
+  display: flex;
+  margin-left: 8px;
+  align-items: center;
+  justify-content: center;
+}
+.yjd-rich-editor .align-button .label-text{
+  color: #252424;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.yjd-rich-editor .align-button {
+  height: 24px;
+  border-radius: 3.456px;
+  background: #fff;
+  border: none;
+  align-items: center;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  padding: 0;
+  gap: 4px;
+  /* Allow interaction with align buttons */
+  pointer-events: auto;
+}
+
+.yjd-rich-editor .align-button:hover {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.yjd-rich-editor .align-button.active {
+  background: #e5e7eb;
+  border-color: #6b7280;
+}
+
+.yjd-rich-editor .align-button svg {
+  width: 16px;
+  height: 16px;
+  color: #374151;
+}
+
+.yjd-rich-editor .align-button.active svg {
+  color: #1f2937;
+}
+
+/* === LIST PICKER === */
+.yjd-rich-editor .list-picker-popup {
+  position: absolute;
+  background: #fff;
+  display: none;
+  border-radius: 6.9px;
+  padding: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .list-picker-popup.visible {
+  display: block !important;
+}
+
+.yjd-rich-editor .list-button-container {
+  display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+  gap: 12px 8px;
+}
+
+.yjd-rich-editor .list-button {
+
+  border: none;
+  border-radius: 3.46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  padding: 4px;
+}
+
+.yjd-rich-editor .list-button:hover {
+  background: #f3f4f6;
+}
+
+.yjd-rich-editor .list-button.active {
+  background: #eeeeee;
+}
+
+.yjd-rich-editor .list-button svg {
+  height: 16px;
+  color: #374151;
+}
+
+.yjd-rich-editor .list-button.active svg {
+  color: #fff;
+}
+
+/* === LIST FORMATTING === */
+.yjd-rich-editor .rich-editor-area ul.checklist {
+  list-style: none;
+  padding-left: 0;
+}
+
+.yjd-rich-editor .rich-editor-area ul.checklist li {
+  position: relative;
+  padding-left: 25px;
+  margin-bottom: 4px;
+}
+
+.yjd-rich-editor .rich-editor-area ul.checklist li input[type="checkbox"] {
+  position: absolute;
+  left: 0;
+  top: 2px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.yjd-rich-editor .rich-editor-area ul {
+  margin: 12px 0;
+  padding-left: 20px;
+}
+
+.yjd-rich-editor .rich-editor-area ol {
+  margin: 12px 0;
+  padding-left: 20px;
+}
+
+.yjd-rich-editor .rich-editor-area li {
+  margin-bottom: 4px;
+  line-height: 1.6;
+}
+
+/* === INDENT FORMATTING === */
+.yjd-rich-editor .rich-editor-area .indented {
+  transition: padding-left 0.2s ease;
+}
+
+.yjd-rich-editor .rich-editor-area [style*="padding-left"] {
+  transition: padding-left 0.2s ease;
+}
+
+/* Indent button styles */
+.yjd-rich-editor .indent-increase-btn svg,
+.yjd-rich-editor .indent-decrease-btn svg {
+  width: 16px;
+  height: 16px;
+  fill: #454545;
+}
+
+.yjd-rich-editor .indent-increase-btn:hover svg,
+.yjd-rich-editor .indent-decrease-btn:hover svg {
+  fill: #454545;
+}
+
+.yjd-rich-editor .indent-increase-btn:disabled,
+.yjd-rich-editor .indent-decrease-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yjd-rich-editor .indent-increase-btn:disabled svg,
+.yjd-rich-editor .indent-decrease-btn:disabled svg {
+  fill: #9ca3af;
+}
+
+/* === EMOJI PICKER === */
+.yjd-rich-editor .emoji-picker-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  border-radius: 8px;
+  padding: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  display: none;
+  overflow-y: auto;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none; 
+  user-select: none;
+}
+
+.yjd-rich-editor .emoji-picker-popup.visible {
+  display: block;
+}
+
+.yjd-rich-editor .emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 4px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.yjd-rich-editor .emoji-text-message{
+  margin-top: 4px;
+  color: #71787C;
+  text-align: center;
+  font-family: 'Segoe UI', Arial, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.yjd-rich-editor .emoji-button {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 20px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  /* Allow interaction with buttons */
+  pointer-events: auto;
+}
+
+.yjd-rich-editor .emoji-button:hover {
+  background-color: #f3f4f6;
+}
+
+.yjd-rich-editor .emoji {
+  font-size: 1.1em;
+  line-height: 1;
+}
+
+/* === IMAGE POPUP === */
+.yjd-rich-editor .image-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  display: none;
+  margin: 0;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .image-popup.visible {
+  display: block;
+}
+
+.yjd-rich-editor .image-popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+
+
+.yjd-rich-editor .image-input-container {
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.yjd-rich-editor .image-input-hidden{
+  display: none;
+}
+
+
+/* === VIDEO POPUP === */
+.yjd-rich-editor .video-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  display: none;
+  margin: 0;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .video-popup.visible {
+  display: block;
+}
+
+.yjd-rich-editor .video-popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+.yjd-rich-editor .video-input-container {
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* === INSERTED MEDIA === */
+.yjd-rich-editor .inserted-image,
+.yjd-rich-editor .inserted-video {
+  max-width: 100%;
+  height: auto;
+  margin: 4px 0;
+  border-radius: 4px;
+  display: block;
+}
+
+.yjd-rich-editor .inserted-video {
+  background: #000;
+}
+
+/* === TAG POPUP === */
+.yjd-rich-editor .tag-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  display: none;
+  margin: 0;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.tag-popup {
+  max-height: 80vh;
+  /* không vượt quá 80% chiều cao viewport */
+  overflow-y: auto;
+  /* chỉ cuộn khi cần */
+}
+
+.tag-suggestions-container {
+  max-height: 200px;
+  /* nếu nhiều gợi ý thì chỉ cho hiển thị tối đa 200px */
+  overflow-y: auto;
+}
+.yjd-rich-editor .tag-popup.visible {
+  display: block;
+}
+
+.yjd-rich-editor .tag-popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+
+.yjd-rich-editor .tag-type-container{
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* === CUSTOM TAGS === */
+.yjd-rich-editor .custom-tag {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 12px;
+  font-size: 0.85em;
+  font-weight: 500;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.yjd-rich-editor .custom-tag.tag-mention {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.yjd-rich-editor .custom-tag.tag-hashtag {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.yjd-rich-editor .custom-tag.tag-custom {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.yjd-rich-editor .custom-tag:hover {
+  opacity: 0.8;
+}
+
+/* === IMPORT POPUP === */
+.yjd-rich-editor .import-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  display: none;
+  width: 400px;
+  max-width: 90vw;
+  /* Prevent focus and click on popup container */
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .import-popup.visible {
+  display: block;
+}
+
+.yjd-rich-editor .import-popup-content {
+  padding: 20px;
+}
+
+.yjd-rich-editor .import-popup-title {
+  margin: 0 0 20px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.yjd-rich-editor .import-type-container {
+  margin-bottom: 20px;
+}
+
+.yjd-rich-editor .import-input-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+}
+
+.yjd-rich-editor .import-type-select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  color: #374151;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.yjd-rich-editor .import-type-select:focus {
+  outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+
+.yjd-rich-editor .import-file-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  color: #374151;
+  margin-bottom: 16px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.yjd-rich-editor .import-file-input:disabled {
+  background-color: #f3f4f6;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.yjd-rich-editor .import-file-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+
+.yjd-rich-editor .import-file-info {
+  padding: 12px;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #374151;
+}
+
+.yjd-rich-editor .import-file-info div {
+  margin-bottom: 4px;
+}
+
+.yjd-rich-editor .import-file-info div:last-child {
+  margin-bottom: 0;
+}
+
+.yjd-rich-editor .import-button-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.yjd-rich-editor .import-button {
+  padding: 10px 20px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.yjd-rich-editor .import-button:hover {
+  background-color: #f3f4f6;
+}
+
+.yjd-rich-editor .import-button.import-button-main {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.yjd-rich-editor .import-button.import-button-main:hover {
+  background-color: #2563eb;
+}
+
+.yjd-rich-editor .import-button.import-button-main:disabled {
+  background-color: #9ca3af;
+  border-color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.yjd-rich-editor .import-button.cancel-button {
+  background-color: white;
+  color: #6b7280;
+}
+
+.yjd-rich-editor .import-button.cancel-button:hover {
+  background-color: #f9fafb;
+}
+
+/* === IMPORTED CONTENT === */
+.yjd-rich-editor .imported-content {
+  margin: 16px 0;
+  padding: 16px;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+  background-color: #f9fafb;
+}
+
+.yjd-rich-editor .imported-content.html-content {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.yjd-rich-editor .imported-content.excel-content {
+  border-color: #10b981;
+  background-color: #f0fdf4;
+}
+
+.yjd-rich-editor .imported-content.text-content {
+  border-color: #f59e0b;
+  background-color: #fffbeb;
+}
+
+.yjd-rich-editor .imported-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.yjd-rich-editor .imported-table th,
+.yjd-rich-editor .imported-table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.yjd-rich-editor .imported-table th {
+  background-color: #f3f4f6;
+  font-weight: 600;
+  color: #374151;
+}
+
+.yjd-rich-editor .imported-table tr:hover {
+  background-color: #f9fafb;
+}
+
+.yjd-rich-editor .imported-content p {
+  margin: 8px 0;
+  line-height: 1.6;
+  color: #374151;
+}
+
+.yjd-rich-editor .imported-content p:first-child {
+  margin-top: 0;
+}
+
+.yjd-rich-editor .imported-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* === CODE VIEW === */
+.yjd-rich-editor .code-view-textarea {
+  width: 100%;
+  height: 500px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px;
+  background-color: #f8fafc;
+  color: #374151;
+  resize: vertical;
+  border: none;
+  outline: none;
+  white-space: pre;
+  word-wrap: break-word;
+  tab-size: 2;
+  box-sizing: border-box;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .yjd-rich-editor .code-view-textarea {
+    font-size: 13px;
+    padding: 12px;
+  }
+  
+  .yjd-rich-editor.code-view-active::after {
+    top: 5px;
+    right: 5px;
+    font-size: 11px;
+    padding: 3px 6px;
+  }
+}
+
+/* === RESIZE HANDLES === */
+.yjd-rich-editor .resize-handles-container {
+  position: absolute;
+  pointer-events: none;
+  z-index: 997; /* Lower than all toolbar elements */
+  display: none;
+}
+
+.yjd-rich-editor .resize-handles-container.active {
+  display: block;
+}
+
+.yjd-rich-editor .resize-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #3b82f6;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  pointer-events: auto;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+  z-index: 999; /* Higher than container but lower than toolbars */
+}
+
+.yjd-rich-editor .resize-handle:hover {
+  background-color: #2563eb;
+  transform: scale(1.2);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.yjd-rich-editor .resize-handle-nw {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+
+.yjd-rich-editor .resize-handle-ne {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+
+.yjd-rich-editor .resize-handle-sw {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+
+.yjd-rich-editor .resize-handle-se {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+
+/* Resizing state styles */
+.yjd-rich-editor .inserted-image.resizing,
+.yjd-rich-editor .inserted-video.resizing,
+.yjd-rich-editor .rich-editor-table.resizing {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  opacity: 0.8;
+}
+
+.yjd-rich-editor .inserted-image.resizing {
+  -webkit-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.yjd-rich-editor .inserted-video.resizing {
+  -webkit-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.yjd-rich-editor .rich-editor-table.resizing {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.yjd-rich-editor .rich-editor-table.resizing td {
+  pointer-events: none;
+}
+
+/* Selection indicator for resizable elements */
+.yjd-rich-editor .inserted-image:hover,
+.yjd-rich-editor .inserted-video:hover,
+.yjd-rich-editor .rich-editor-table:hover {
+  outline: 1px solid #3b82f6;
+  outline-offset: 1px;
+  cursor: pointer;
+}
+
+
+
+/* Responsive resize handles */
+@media (max-width: 768px) {
+  .yjd-rich-editor .resize-handle {
+    width: 12px;
+    height: 12px;
+  }
+  
+  .yjd-rich-editor .resize-handle-nw {
+    top: -6px;
+    left: -6px;
+  }
+  
+  .yjd-rich-editor .resize-handle-ne {
+    top: -6px;
+    right: -6px;
+  }
+  
+  .yjd-rich-editor .resize-handle-sw {
+    bottom: -6px;
+    left: -6px;
+  }
+  
+  .yjd-rich-editor .resize-handle-se {
+    bottom: -6px;
+    right: -6px;
+  }
+}
+
+
+
+/* === RESPONSIVE DESIGN === */
+/* Mobile and Tablet Styles - Screens smaller than 850px */
+@media (max-width: 849px) {
+  /* Editor wrapper adjustments */
+  .yjd-rich-editor {
+    margin: 0;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+    .yjd-rich-editor .link-popup,
+    .yjd-rich-editor .image-popup,
+    .yjd-rich-editor .video-popup,
+    .yjd-rich-editor .tag-popup {
+      width: unset !important;
+    }
+  /* Editor area adjustments */
+  .yjd-rich-editor .rich-editor-area {
+    padding: 12px;
+    min-height: 150px;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  /* Status bar adjustments */
+  .yjd-rich-editor .rich-editor-statusbar {
+    padding: 6px 8px;
+    font-size: 11px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+
+  /* Popup and dropdown adjustments */
+  .yjd-rich-editor .editor-popup,
+  .yjd-rich-editor .editor-dropdown {
+    position: fixed !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 90% !important;
+    max-width: 320px !important;
+    max-height: 80vh !important;
+    overflow-y: auto;
+    z-index: 10000;
+  }
+
+  .yjd-rich-editor .editor-popup::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+  }
+
+  /* Color picker adjustments */
+  .yjd-rich-editor .color-picker {
+    width: 100% !important;
+    max-width: 280px !important;
+  }
+
+  .yjd-rich-editor .color-picker-grid {
+    grid-template-columns: repeat(6, 1fr) !important;
+    gap: 8px !important;
+  }
+
+  .yjd-rich-editor .color-picker-item {
+    width: 32px !important;
+    height: 32px !important;
+  }
+
+  /* Table popup adjustments */
+  .yjd-rich-editor .table-popup {
+    max-width: 300px !important;
+  }
+
+  .yjd-rich-editor .table-size-grid {
+    grid-template-columns: repeat(8, 1fr) !important;
+    gap: 2px !important;
+  }
+
+  .yjd-rich-editor .table-size-cell {
+    width: 24px !important;
+    height: 24px !important;
+  }
+
+  /* List picker adjustments */
+  .yjd-rich-editor .list-picker {
+    width: 100% !important;
+    max-width: 250px !important;
+  }
+
+  .yjd-rich-editor .list-picker-btn {
+    padding: 12px !important;
+    font-size: 14px !important;
+  }
+
+  /* Text align picker adjustments */
+  .yjd-rich-editor .text-align-picker {
+    width: 100% !important;
+    max-width: 200px !important;
+  }
+
+  /* Media popups adjustments */
+  .yjd-rich-editor .image-popup,
+  .yjd-rich-editor .video-popup,
+  .yjd-rich-editor .link-popup,
+  .yjd-rich-editor .import-popup {
+    width: 90% !important;
+    max-width: 350px !important;
+  }
+
+  .yjd-rich-editor .media-upload-area {
+    min-height: 100px !important;
+    padding: 20px !important;
+  }
+
+  /* Tag popup */
+  .yjd-rich-editor .tag-popup {
+    width: 90% !important;
+    max-width: 320px !important;
+  }
+
+
+
+  /* Emoji picker adjustments */
+  .yjd-rich-editor .emoji-picker {
+    width: 100% !important;
+    max-width: 300px !important;
+    max-height: 350px !important;
+  }
+
+  .yjd-rich-editor .emoji-grid {
+    grid-template-columns: repeat(8, 1fr) !important;
+    gap: 4px !important;
+  }
+
+  .yjd-rich-editor .emoji-item {
+    width: 32px !important;
+    height: 32px !important;
+    font-size: 18px !important;
+  }
+
+  /* Code view adjustments */
+  .yjd-rich-editor .code-view-textarea {
+    font-size: 12px !important;
+    padding: 8px !important;
+    line-height: 1.3 !important;
+  }
+
+  /* Content formatting adjustments */
+  .yjd-rich-editor .rich-editor-area h1 {
+    font-size: 1.5em !important;
+    margin: 0.5em 0 !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area h2 {
+    font-size: 1.3em !important;
+    margin: 0.5em 0 !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area h3 {
+    font-size: 1.1em !important;
+    margin: 0.5em 0 !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area p {
+    margin: 0.8em 0 !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area ul,
+  .yjd-rich-editor .rich-editor-area ol {
+    padding-left: 20px !important;
+    margin: 0.8em 0 !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area blockquote {
+    padding-left: 12px !important;
+    margin: 0.8em 0 !important;
+    font-size: 14px !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area table {
+    font-size: 13px !important;
+    overflow-x: auto !important;
+    display: block !important;
+    white-space: nowrap !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area th,
+  .yjd-rich-editor .rich-editor-area td {
+    padding: 6px 8px !important;
+    min-width: 60px !important;
+  }
+
+
+}
+
+@media (max-width: 290px) {
+  .yjd-rich-editor .emoji-picker {
+    max-width: calc(100vw - 20px) !important;
+  }
+
+  .yjd-rich-editor .emoji-grid {
+    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)) !important;
+  }
+}
+
+/* Print styles */
+@media print {
+  .yjd-rich-editor .rich-editor-toolbar-1,
+  .yjd-rich-editor .rich-editor-toolbar-2,
+  .yjd-rich-editor .rich-editor-statusbar {
+    display: none !important;
+  }
+
+  .yjd-rich-editor {
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  .yjd-rich-editor .rich-editor-area {
+    padding: 0 !important;
+    background: white !important;
+    color: black !important;
+  }
+}
+
+/* === POPUP CONTAINER === */
+.yjd-rich-editor .rich-editor-popup-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1005;
+  overflow: visible;
+  max-height: 90%;
+    /* không vượt quá chiều cao editor */
+  overflow-y: auto;
+    /* chỉ cuộn khi nội dung vượt quá */
+}
+
+/* Allow interaction with interactive elements inside popups */
+.yjd-rich-editor .emoji-picker-popup button,
+.yjd-rich-editor .color-picker-popup button,
+.yjd-rich-editor .custom-select-popup button,
+.yjd-rich-editor .heading-select-popup button,
+.yjd-rich-editor .capitalization-select-popup button,
+.yjd-rich-editor .font-family-select-popup button,
+.yjd-rich-editor .line-height-select-popup button,
+.yjd-rich-editor .text-size-select-popup button,
+.yjd-rich-editor .link-popup button,
+.yjd-rich-editor .link-popup input,
+.yjd-rich-editor .link-popup select,
+.yjd-rich-editor .image-popup button,
+.yjd-rich-editor .image-popup input,
+.yjd-rich-editor .image-popup select,
+.yjd-rich-editor .video-popup button,
+.yjd-rich-editor .video-popup input,
+.yjd-rich-editor .video-popup select,
+.yjd-rich-editor .tag-popup button,
+.yjd-rich-editor .tag-popup input,
+.yjd-rich-editor .tag-popup select,
+.yjd-rich-editor .table-popup button,
+.yjd-rich-editor .table-popup input,
+.yjd-rich-editor .text-align-picker-popup button,
+.yjd-rich-editor .list-picker-popup button,
+.yjd-rich-editor .import-popup button,
+.yjd-rich-editor .import-popup input,
+.yjd-rich-editor .import-popup select,
+.yjd-rich-editor .yjd-button-confirm,
+.yjd-rich-editor .yjd-button-cancel,
+.yjd-rich-editor .yjd-input,
+.yjd-rich-editor .yjd-select-input,
+.yjd-rich-editor .yjd-custom-upload-button,
+.yjd-rich-editor .yjd-suggestion-button,
+.yjd-rich-editor .list-button,
+.yjd-rich-editor .table-toolbar-btn,
+.yjd-rich-editor .custom-color-input,
+.yjd-rich-editor .import-type-select,
+.yjd-rich-editor .custom-tag,
+.yjd-rich-editor .image-input-hidden,
+.yjd-rich-editor .video-input-hidden,
+.yjd-rich-editor .tag-type-select,
+.yjd-rich-editor .tag-value-input,
+.yjd-rich-editor .import-input,
+.yjd-rich-editor .import-file-input,
+.yjd-rich-editor .import-url-input,
+.yjd-rich-editor .import-text-input,
+.yjd-rich-editor .import-html-input,
+.yjd-rich-editor .import-json-input,
+.yjd-rich-editor .import-markdown-input,
+.yjd-rich-editor .import-csv-input,
+.yjd-rich-editor .import-xml-input,
+.yjd-rich-editor .import-yaml-input,
+.yjd-rich-editor .import-toml-input {
+  pointer-events: auto !important;
+}
+
+.yjd-rich-editor .rich-editor-popup-container > * {
+  pointer-events: auto;
+}
+
+/* Ensure popups in container have proper positioning */
+.yjd-rich-editor .rich-editor-popup-container .link-popup,
+.yjd-rich-editor .rich-editor-popup-container .color-picker-popup,
+.yjd-rich-editor .rich-editor-popup-container .emoji-picker-popup,
+.yjd-rich-editor .rich-editor-popup-container .image-popup,
+.yjd-rich-editor .rich-editor-popup-container .video-popup,
+.yjd-rich-editor .rich-editor-popup-container .table-popup,
+.yjd-rich-editor .rich-editor-popup-container .tag-popup,
+.yjd-rich-editor .rich-editor-popup-container .import-popup,
+.yjd-rich-editor .rich-editor-popup-container .text-align-picker-popup,
+.yjd-rich-editor .rich-editor-popup-container .list-picker-popup,
+.yjd-rich-editor .rich-editor-popup-container .custom-select-popup {
+  position: absolute !important;
+  z-index: 1001 !important;
+}