@cyberyozh/text-editor 0.1.1

package/dist/styles/index.css

@@ -0,0 +1,2068 @@
+/* src/editor/components/button/button.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: 14px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+  user-select: none;
+}
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.button-primary {
+  background-color: var(--ui-color-primary);
+  color: var(--ui-text-white);
+}
+.button-primary:hover:not(:disabled) {
+  background-color: var(--ui-color-primary-dark);
+  box-shadow: var(--ui-shadow-primary);
+}
+.button-secondary {
+  border: 1px solid var(--ui-secondary-bg-hover);
+  background-color: var(--ui-secondary-bg);
+  color: var(--ui-text-primary);
+}
+.button-secondary:hover:not(:disabled) {
+  border-color: var(--ui-secondary-bg-hover);
+  background-color: var(--ui-secondary-bg-hover);
+}
+.button-secondary:active:not(:disabled) {
+  background-color: var(--ui-secondary-bg-active);
+}
+.button-loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+/* src/editor/components/input/input.css */
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  gap: 4px;
+}
+.input-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+.input-field {
+  padding: 8px 12px;
+  border: 1px solid var(--ui-secondary-bg-hover);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: all 0.2s ease-out;
+}
+.input-field:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: var(--ui-shadow-primary);
+}
+.input-field:disabled {
+  background-color: var(--ui-secondary-bg);
+  color: var(--ui-text-disabled);
+  cursor: not-allowed;
+}
+.input-error {
+  margin-top: 4px;
+  color: var(--ui-error-text-simple);
+  font-size: 12px;
+}
+
+/* src/editor/components/common-modal/common-modal.css */
+.modal-overlay {
+  display: flex;
+  z-index: 10000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: modal-fadeIn 0.2s ease-out;
+}
+@keyframes modal-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.modal-content {
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow: auto;
+  border-radius: 8px;
+  background-color: var(--ui-text-white);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: modal-slideIn 0.2s ease-out;
+}
+@keyframes modal-slideIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.modal-close-button {
+  display: flex;
+  z-index: 1001;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background-color: transparent;
+  color: var(--ui-text-secondary);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+}
+.modal-close-button svg {
+  width: 20px;
+  height: 20px;
+}
+.modal-close-button:hover {
+  background-color: var(--ui-secondary-bg);
+  color: var(--ui-text-primary);
+}
+.modal-close-button:active {
+  background-color: var(--ui-secondary-bg-hover);
+}
+.modal-inner-content {
+  padding: 24px;
+}
+
+/* src/editor/dialogs/add-katex-dialog/add-katex-dialog.css */
+.katex-dialog-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+.katex-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px soliv var(--tiptap-color-border);
+}
+.katex-dialog-content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+.katex-dialog-description {
+  margin: 0;
+  color: var(--ui-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.katex-dialog-description a {
+  color: var(--ui-color-primary);
+  text-decoration: none;
+  transition: color 150ms ease-in-out;
+}
+.katex-dialog-description a:hover {
+  color: var(--ui-color-primary-dark);
+  text-decoration: underline;
+}
+.katex-dialog-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.katex-dialog-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+.katex-dialog-textarea {
+  padding: 8px 12px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: monospace;
+  resize: vertical;
+  transition: border-color 150ms ease-in-out;
+}
+.katex-dialog-textarea:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tiptap-color-primary-subtle);
+}
+.katex-dialog-textarea::placeholder {
+  color: var(--tiptap-color-text-placeholder);
+}
+.katex-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.katex-dialog-button-cancel {
+  padding: 8px 16px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.katex-dialog-button-cancel:hover {
+  border-color: var(--ui-secondary-bg-active);
+  background-color: var(--ui-secondary-bg);
+}
+.katex-dialog-button-submit {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--ui-color-primary);
+  color: var(--ui-text-white);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.katex-dialog-button-submit:hover {
+  background-color: var(--ui-color-primary-dark);
+}
+.katex-dialog-button-submit:active {
+  transform: scale(0.98);
+}
+
+/* src/editor/dialogs/add-link-dialog/add-link-dialog.css */
+.link-dialog-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+.link-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px soliv var(--tiptap-color-border);
+}
+.link-dialog-content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+.link-dialog-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.link-dialog-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+.link-dialog-input {
+  padding: 8px 12px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 150ms ease-in-out;
+}
+.link-dialog-input:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tiptap-color-primary-subtle);
+}
+.link-dialog-input::placeholder {
+  color: var(--tiptap-color-text-placeholder);
+}
+.link-dialog-error {
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+.link-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.link-dialog-button-cancel {
+  padding: 8px 16px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.link-dialog-button-cancel:hover {
+  border-color: var(--ui-secondary-bg-active);
+  background-color: var(--ui-secondary-bg);
+}
+.link-dialog-button-submit {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--ui-color-primary);
+  color: var(--ui-text-white);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.link-dialog-button-submit:hover {
+  background-color: var(--ui-color-primary-dark);
+}
+.link-dialog-button-submit:active {
+  transform: scale(0.98);
+}
+
+/* src/editor/dialogs/add-video-dialog/add-video-dialog.css */
+.video-dialog-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+.video-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px solid var(--tiptap-color-border);
+}
+.video-dialog-content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+.video-dialog-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.video-dialog-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+.video-dialog-input {
+  padding: 8px 12px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 150ms ease-in-out;
+}
+.video-dialog-input:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tiptap-color-primary-subtle);
+}
+.video-dialog-input::placeholder {
+  color: var(--tiptap-color-text-placeholder);
+}
+.video-dialog-input:disabled {
+  background-color: var(--ui-secondary-bg);
+  color: var(--tiptap-color-text-disabled);
+  cursor: not-allowed;
+}
+.video-dialog-help-text {
+  padding: 12px;
+  border: 1px solid var(--ui-info-border);
+  border-radius: 4px;
+  background-color: var(--ui-info-bg);
+  font-size: 13px;
+}
+.video-dialog-help-title {
+  margin: 0 0 8px 0;
+  color: var(--ui-text-primary);
+  font-weight: 500;
+}
+.video-dialog-platform-list {
+  margin: 0;
+  padding-left: 20px;
+  color: var(--ui-text-secondary);
+  list-style-type: disc;
+}
+.video-dialog-platform-list li {
+  margin: 4px 0;
+}
+.video-dialog-error {
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+.video-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.video-dialog-button-cancel {
+  padding: 8px 16px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.video-dialog-button-cancel:hover {
+  border-color: var(--ui-secondary-bg-active);
+  background-color: var(--ui-secondary-bg);
+}
+.video-dialog-button-cancel:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.video-dialog-button-submit {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--ui-color-primary);
+  color: var(--ui-text-white);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.video-dialog-button-submit:hover {
+  background-color: var(--ui-color-primary-dark);
+}
+.video-dialog-button-submit:active {
+  transform: scale(0.98);
+}
+.video-dialog-button-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* src/editor/dialogs/image-dialog/image-dialog.css */
+.image-dialog-title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+.image-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px solid var(--tiptap-color-border);
+}
+.image-dialog-form-container {
+  margin-bottom: 16px;
+}
+.image-dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.image-dialog-preview {
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 12px;
+  border-radius: 12px;
+}
+.image-dialog-preview-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: center;
+}
+.image-dialog-preview-wrapper:hover .image-dialog-delete-button {
+  display: flex;
+}
+.image-dialog-delete-button {
+  display: none;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-size: 20px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: all 0.2s ease-out;
+}
+.image-dialog-delete-button svg {
+  width: 16px;
+  height: 16px;
+}
+.image-dialog-delete-button:hover {
+  background-color: var(--ui-secondary-bg);
+  opacity: 1;
+}
+.image-dialog-drag-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 150px;
+  border: 2px dashed #cccccc;
+  border-radius: 10px;
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+}
+.image-dialog-drag-area-active {
+  border-color: var(--ui-color-primary);
+  background-color: var(--ui-info-bg);
+}
+.image-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.image-dialog-cancel-button {
+  background: var(--ui-secondary-bg);
+  color: var(--ui-text-primary);
+}
+
+/* src/styles/components.css */
+
+/* src/styles/extensions/figure.css */
+.tiptap figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 24px auto;
+}
+.figure-image-container {
+  display: inline-block;
+  position: relative;
+}
+.figure-image-container img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+}
+.figure-edit-button {
+  display: flex;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 50%;
+  background: var(--tiptap-bg-surface-menu);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  color: var(--ui-text-primary);
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.2s ease;
+}
+.figure-edit-button svg {
+  width: 16px;
+  height: 16px;
+}
+.figure-image-container:hover .figure-edit-button,
+.figure-selected .figure-edit-button {
+  opacity: 1;
+}
+.figure-edit-button:hover {
+  border-color: var(--tiptap-color-primary);
+  color: var(--tiptap-color-primary);
+}
+.figure-edit-button:active {
+  transform: scale(0.95);
+}
+.tiptap figure figcaption {
+  margin-top: 12px;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.32px;
+  text-align: center;
+}
+
+/* src/styles/extensions/table.css */
+:root {
+  --tiptap-table-header-bg--light: #f2f7fe;
+  --tiptap-table-header-bg--dark: #0d6efd26;
+  --tiptap-table-border--light: #e0e0e3;
+  --tiptap-table-border--dark: #0d6efd26;
+}
+.tableWrapper {
+  margin: 32px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.tableWrapper {
+  scrollbar-color: black transparent;
+  scrollbar-width: thin;
+}
+.tableWrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.tableWrapper::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background: transparent;
+}
+.tableWrapper::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: black;
+}
+.tableWrapper::-webkit-scrollbar-thumb:hover {
+  background: #333;
+}
+.tiptap table {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  overflow: hidden;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.tiptap table p {
+  margin: 0 !important;
+}
+.tiptap table tr {
+  position: relative;
+}
+.tiptap th {
+  position: relative;
+  background-color: var(--tiptap-table-header-bg--light);
+  text-align: center;
+}
+.tiptap th p {
+  font-weight: 500;
+}
+[data-theme=dark] .tiptap th {
+  background-color: var(--tiptap-table-header-bg--dark);
+}
+.tiptap td,
+.tiptap th {
+  box-sizing: border-box;
+  position: relative;
+  padding: 16px 24px;
+  border: 1px solid var(--tiptap-table-border--light);
+  text-align: center;
+  vertical-align: top;
+}
+[data-theme=dark] .tiptap td,
+[data-theme=dark] .tiptap th {
+  border-color: var(--tiptap-table-border--dark);
+}
+.tiptap[contenteditable=true] td:hover,
+.tiptap[contenteditable=true] th:hover {
+  background-color: var(--tiptap-color-primary-subtle);
+}
+.tiptap .column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  width: 4px;
+  background-color: var(--tiptap-color-primary-light);
+  pointer-events: none;
+}
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+.table-indicator {
+  z-index: 101;
+  position: fixed;
+  margin: 0 !important;
+  pointer-events: auto;
+}
+.table-indicator__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 12px;
+  padding: 0;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: 4px;
+  background-color: var(--tiptap-bg-surface-menu);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  color: var(--tiptap-color-primary);
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.table-indicator__button:hover {
+  background-color: var(--tiptap-color-primary);
+  color: white;
+}
+.table-indicator__button--row {
+  width: 12px;
+  height: 24px;
+}
+.table-context-menu {
+  z-index: 102;
+  position: fixed;
+  animation: slideIn 150ms ease-out;
+  pointer-events: auto;
+}
+@keyframes slideIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.table-context-menu__content {
+  display: flex;
+  flex-direction: column;
+  width: 275px;
+  max-height: 300px;
+  padding: 12px;
+  overflow-y: auto;
+  gap: 6px;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: var(--tiptap-radius);
+  background-color: var(--tiptap-bg-surface-menu);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  scrollbar-color: black transparent;
+  scrollbar-width: thin;
+}
+.table-context-menu__content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.table-context-menu__content::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background: transparent;
+}
+.table-context-menu__content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: black;
+}
+.table-context-menu__content::-webkit-scrollbar-thumb:hover {
+  background: #333;
+}
+.table-context-menu__button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 12px;
+  gap: 8px;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  background: transparent;
+  color: var(--tiptap-color-primary);
+  font-weight: 500;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+.table-context-menu__button:hover {
+  outline: none;
+  background-color: var(--tiptap-color-primary);
+  color: var(--tiptap-state-control-active-color);
+}
+.table-context-menu__button:active {
+  outline: none;
+  background-color: var(--tiptap-color-primary);
+  color: var(--tiptap-state-control-active-color);
+}
+.table-context-menu__button--danger {
+  color: var(--tiptap-color-primary-error);
+}
+.table-context-menu__button--danger:hover {
+  outline: none;
+  background-color: var(--ui-error-bg);
+  color: var(--tiptap-color-primary-error);
+}
+.table-context-menu__button--danger:active {
+  outline: none;
+  background-color: var(--tiptap-color-primary-error);
+  color: white;
+}
+.table-context-menu__button svg {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+.table-context-menu__divider {
+  height: 1px;
+  margin: 6px 0;
+  background-color: var(--tiptap-color-border);
+}
+
+/* src/styles/extensions/details.css */
+[data-type=details] {
+  display: flex;
+  align-items: baseline;
+  margin: 24px 0;
+  padding: 8px;
+  gap: 8px;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: 8px;
+}
+[data-type=details] > button {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--tiptap-color-primary);
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+[data-type=details] > button::before {
+  position: relative;
+  bottom: 2px;
+  content: "\25b6";
+}
+[data-type=details] > div {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+}
+[data-type=details].is-open > button {
+  transform: rotate(90deg);
+}
+.tiptap details.details {
+  align-items: baseline;
+  margin: 24px 0;
+  padding: 8px;
+  gap: 8px;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: 8px;
+}
+.tiptap details.details summary {
+  display: flex;
+  flex: 1;
+  align-items: baseline;
+  gap: 8px;
+  border: none;
+  outline: none;
+  background: transparent;
+  list-style: none;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.tiptap details.details summary::before {
+  display: inline-block;
+  flex-shrink: 0;
+  content: "\25b6";
+  color: var(--tiptap-color-primary);
+  font-size: 16px;
+  transition: transform 150ms ease-in-out;
+}
+.tiptap details.details[open] summary::before {
+  transform: rotate(90deg);
+}
+.tiptap details.details summary::-webkit-details-marker {
+  display: none;
+}
+.tiptap details.details > div[data-type=detailsContent] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 12px;
+  padding-left: 20px;
+  gap: 8px;
+}
+
+/* src/styles/extensions/myth-reality.css */
+:root {
+  --tiptap-myth-bg--light: #fff0ef;
+  --tiptap-myth-bg--dark: #ff000014;
+  --tiptap-reality-bg--light: #f0fdf9;
+  --tiptap-reality-bg--dark: #1bae7514;
+}
+[data-myth-reality] {
+  display: flex;
+  flex-direction: column;
+  margin: 32px 0;
+  gap: 16px;
+}
+[data-myth-reality-block] {
+  flex: 1;
+  padding: 24px;
+  padding-left: 20px;
+  border-radius: 10px;
+}
+[data-myth-reality-block]:first-child .myth-reality-block-content {
+  padding-left: 16px;
+  border-left: 3px solid #ff363a;
+}
+[data-myth-reality-block]:first-child {
+  border-radius: 10px;
+  background-color: var(--tiptap-myth-bg--light);
+}
+[data-theme=dark] [data-myth-reality-block]:first-child {
+  background-color: var(--tiptap-myth-bg--dark);
+}
+[data-myth-reality-block]:last-child .myth-reality-block-content {
+  padding-left: 16px;
+  border-left: 3px solid #30cf40;
+}
+[data-myth-reality-block]:last-child {
+  background-color: var(--tiptap-reality-bg--light);
+}
+[data-theme=dark] [data-myth-reality-block]:last-child {
+  background-color: var(--tiptap-reality-bg--dark);
+}
+.myth-reality-block-content p:first-child {
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.myth-reality-block-content ul p,
+.myth-reality-block-content li p {
+  margin-bottom: 0;
+  font-size: var(--tiptap-font-size);
+}
+
+/* src/styles/extensions/custom-quote.css */
+[data-custom-quote] {
+  display: flex;
+  flex-direction: column;
+  margin: 24px 0;
+  padding: 8px;
+  border-radius: 8px;
+  text-align: center;
+}
+.custom-quote-divider {
+  width: 100%;
+  height: 1px;
+}
+.custom-quote-svg-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 24px 0;
+  color: var(--tiptap-color-primary);
+}
+.custom-quote-svg-wrapper svg {
+  width: 48px;
+  height: 48px;
+}
+[data-custom-quote-text] {
+  display: flex;
+  flex-direction: column;
+  max-width: 700px;
+  margin: 0 auto 16px;
+}
+[data-custom-quote-text] .is-empty::before {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  content: attr(data-placeholder);
+  color: var(--tiptap-color-text-placeholder);
+  pointer-events: none;
+}
+[data-custom-quote-text] p {
+  margin: 0;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 140%;
+  letter-spacing: -0.36px;
+}
+[data-custom-quote-author] {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 4px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: -0.14px;
+}
+[data-custom-quote-author] .is-empty::before {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  content: attr(data-placeholder);
+  color: var(--tiptap-color-text-placeholder);
+  pointer-events: none;
+}
+[data-custom-quote-author] p {
+  margin: 0;
+  color: #000;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.43;
+  text-align: center;
+}
+[data-custom-quote-sign] {
+  display: flex;
+  flex-direction: column;
+  color: #6a6a6a;
+  font-size: 12px;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+[data-custom-quote-sign] .is-empty::before {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  content: attr(data-placeholder);
+  color: var(--tiptap-color-text-placeholder);
+  pointer-events: none;
+}
+[data-custom-quote-sign] p {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+/* src/styles/extensions/callout.css */
+:root {
+  --tiptap-callout-success-bg--light: #f0fdf9;
+  --tiptap-callout-success-text--light: #08493f;
+  --tiptap-callout-success-bg--dark: #1bae7514;
+  --tiptap-callout-success-text--dark: #fff;
+  --tiptap-callout-info-bg--light: #ebefff;
+  --tiptap-callout-info-text--light: #00359e;
+  --tiptap-callout-info-bg--dark: #0d6efd15;
+  --tiptap-callout-info-text--dark: #fff;
+  --tiptap-callout-error-bg--light: #fee4e2;
+  --tiptap-callout-error-text--light: #7a271a;
+  --tiptap-callout-error-bg--dark: #ff000014;
+  --tiptap-callout-error-text--dark: #fff;
+  --tiptap-callout-warning-bg--light: #fffaeb;
+  --tiptap-callout-warning-text--light: #772917;
+  --tiptap-callout-warning-bg--dark: #ffbf0014;
+  --tiptap-callout-warning-text--dark: #fff;
+}
+.callout-node {
+  display: flex;
+  margin: 32px 0;
+  padding: 16px;
+  gap: 10px;
+  border-radius: 8px;
+}
+.callout-node:has(.callout-content h2),
+.callout-node:has(.callout-content h3),
+.callout-node:has(.callout-content h4),
+.callout-node:has(.callout-content h5),
+.callout-node:has(.callout-content h6) {
+  align-items: baseline;
+}
+.callout-node p {
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: -0.28px;
+}
+.callout-node.callout-info {
+  background-color: var(--tiptap-callout-info-bg--light);
+  color: var(--tiptap-callout-info-text--light);
+}
+[data-theme=dark] .callout-node.callout-info {
+  background-color: var(--tiptap-callout-info-bg--dark);
+  color: var(--tiptap-callout-success-text--dark);
+}
+.callout-node.callout-warning {
+  background-color: var(--tiptap-callout-warning-bg--light);
+  color: var(--tiptap-callout-warning-text--light);
+}
+[data-theme=dark] .callout-node.callout-warning {
+  background-color: var(--tiptap-callout-warning-bg--dark);
+  color: var(--tiptap-callout-success-text--dark);
+}
+.callout-node.callout-success {
+  background-color: var(--tiptap-callout-success-bg--light);
+  color: var(--tiptap-callout-success-text--light);
+}
+[data-theme=dark] .callout-node.callout-success {
+  background-color: var(--tiptap-callout-success-bg--dark);
+  color: var(--tiptap-callout-success-text--dark);
+}
+.callout-node.callout-error {
+  background-color: var(--tiptap-callout-error-bg--light);
+  color: var(--tiptap-callout-error-text--light);
+}
+[data-theme=dark] .callout-node.callout-error {
+  background-color: var(--tiptap-callout-error-bg--dark);
+  color: var(--tiptap-callout-success-text--dark);
+}
+.callout-icon-button {
+  outline: none;
+}
+.tiptap .callout-icon {
+  display: block;
+  margin-top: 2px;
+  font-size: 20px;
+}
+.tiptap .callout-icon svg {
+  width: 20px;
+  height: 20px;
+}
+.callout-content-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+.callout-content {
+  color: inherit;
+}
+.callout-content p {
+  margin: 8px 0;
+  color: inherit;
+}
+.callout-content p:first-child {
+  margin-top: 0;
+}
+.callout-content p:last-child {
+  margin-bottom: 0;
+}
+.callout-content ul,
+.callout-content ol {
+  margin: 8px 0 8px 20px;
+  color: inherit;
+}
+.callout-content li {
+  margin: 4px 0;
+  color: inherit;
+}
+.callout-content strong,
+.callout-content b {
+  color: inherit;
+}
+.callout-content em,
+.callout-content i {
+  color: inherit;
+}
+.callout-content a {
+  color: inherit;
+  text-decoration: underline;
+}
+.callout-content ul,
+.callout-content ol {
+  padding-left: 0;
+}
+
+/* src/styles/extensions/code-block.css */
+:root {
+  --tiptap-code-block-background: #111927;
+  --tiptap-code-block-border: #404040;
+  --tiptap-code-block-text: #e0e0e0;
+  --tiptap-code-block-copy-button: #eaecef;
+  --tiptap-code-block-copy-button-hover: #cdc8c8;
+  --tiptap-code-block-font-family: "Fira Code", monospace;
+}
+.tiptap-code-block-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 32px 0;
+  padding: 24px;
+  overflow: hidden;
+  border-radius: var(--tiptap-radius);
+  background-color: var(--tiptap-code-block-background);
+}
+.tiptap-code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 16px;
+  gap: 12px;
+  border-bottom: 1px solid var(--tiptap-code-block-border);
+}
+.tiptap-code-block-language-select {
+  flex: 1;
+  max-width: 50%;
+  padding: 6px 12px;
+  border: 1px solid var(--tiptap-code-block-border);
+  border-radius: 4px;
+  background-color: var(--tiptap-code-block-background);
+  color: var(--tiptap-code-block-text);
+  font-size: 14px;
+  font-family: var(--tiptap-code-block-font-family);
+  cursor: pointer;
+}
+.tiptap-code-block-language-select:focus {
+  border-color: var(--tiptap-color-primary);
+  outline: none;
+  background-color: var(--tiptap-color-primary-subtle);
+}
+.tiptap-code-block-language-select option {
+  background-color: var(--tiptap-code-block-background);
+  color: var(--tiptap-code-block-text);
+}
+.tiptap-code-block-language-text {
+  display: inline-block;
+  flex: 1;
+  max-width: 50%;
+  color: var(--tiptap-code-block-text);
+  font-family: var(--tiptap-code-block-font-family);
+}
+.tiptap-code-block-copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: var(--tiptap-code-block-copy-button);
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+.tiptap-code-block-copy-button svg {
+  width: 24px;
+  height: 24px;
+}
+.tiptap-code-block-copy-button:hover {
+  color: var(--tiptap-code-block-copy-button-hover);
+}
+.tiptap-code-block {
+  margin: 0;
+  padding: 24px 0;
+  overflow-x: auto;
+  color: var(--tiptap-code-block-text);
+  font-size: var(--tiptap-font-size);
+  line-height: 1.5;
+  font-family: var(--tiptap-code-block-font-family);
+}
+.tiptap-code-block::-webkit-scrollbar {
+  height: 8px;
+}
+.tiptap-code-block::-webkit-scrollbar-track {
+  background-color: var(--tiptap-code-block-background);
+}
+.tiptap-code-block::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: var(--tiptap-code-block-border);
+}
+.tiptap-code-block::-webkit-scrollbar-thumb:hover {
+  background-color: var(--tiptap-color-primary);
+}
+
+/* src/styles/extensions/prompt.css */
+:root {
+  --tiptap-prompt-background--light: #f2f7fe;
+  --tiptap-prompt-content-background--light: #fff;
+  --tiptap-prompt-background--dark: #0d6efd26;
+  --tiptap-prompt-content-background--dark: #101012;
+  --tiptap-prompt-action-color: #0d6efd;
+  --tiptap-prompt-border-radius: 20px;
+  --tiptap-prompt-content-border-radius: 12px;
+  --tiptap-prompt-padding: 24px;
+  --tiptap-prompt-content-padding: 16px;
+  --tiptap-prompt-max-height: 220px;
+  --tiptap-prompt-font-family: "Fira Code", monospace;
+  --tiptap-prompt-font-size: 16px;
+  --tiptap-prompt-header-font-size: 20px;
+}
+[data-prompt] {
+  display: flex;
+  flex-direction: column;
+  margin: 24px 0;
+  padding: var(--tiptap-prompt-padding);
+  gap: 8px;
+  border-radius: var(--tiptap-prompt-border-radius);
+  background-color: var(--tiptap-prompt-background--light);
+}
+[data-theme=dark] [data-prompt] {
+  background-color: var(--tiptap-prompt-background--dark);
+}
+.prompt-header-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  gap: 8px;
+  font-weight: 600;
+  font-size: var(--tiptap-prompt-header-font-size);
+}
+.prompt-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--tiptap-prompt-max-height);
+  padding: var(--tiptap-prompt-content-padding);
+  overflow-y: auto;
+  gap: 8px;
+  border-radius: var(--tiptap-prompt-content-border-radius);
+  background-color: var(--tiptap-prompt-content-background--light);
+  font-weight: 400;
+  font-size: var(--tiptap-prompt-font-size);
+  line-height: 24px;
+  font-family: var(--tiptap-prompt-font-family);
+}
+[data-theme=dark] .prompt-content-wrapper {
+  background-color: var(--tiptap-prompt-content-background--dark);
+}
+.prompt-copy-icon-wrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--tiptap-prompt-action-color);
+  cursor: pointer;
+}
+.prompt-copy-icon-wrapper svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* src/styles/extensions/video.css */
+[data-video] {
+  display: flex;
+  flex-direction: column;
+  margin: 24px 0;
+  padding: 0;
+  border-radius: 8px;
+}
+.video-player-wrapper {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+  border-radius: 12px;
+  background-color: #000;
+}
+.video-iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 12px;
+}
+.video-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  max-width: 640px;
+  padding: 20px;
+  border-radius: 12px;
+  background-color: #f5f5f5;
+  color: #666;
+  font-size: 14px;
+  text-align: center;
+}
+.video-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #999;
+  font-size: 14px;
+}
+.video-content {
+  margin-top: 8px;
+}
+
+/* src/styles/extensions/math.css */
+.tiptap .tiptap-mathematics-render[data-type=inline-math] {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: all 150ms ease-in-out;
+}
+.tiptap[contenteditable=true] .tiptap-mathematics-render[data-type=inline-math] {
+  cursor: pointer;
+}
+.tiptap[contenteditable=true] .tiptap-mathematics-render[data-type=inline-math]:hover {
+  background-color: var(--tiptap-color-primary-subtle);
+}
+.tiptap .tiptap-mathematics-render[data-type=block-math] {
+  display: block;
+  margin: 16px 0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 150ms ease-in-out;
+}
+.tiptap[contenteditable=true] .tiptap-mathematics-render[data-type=block-math] {
+  cursor: pointer;
+}
+.tiptap[contenteditable=true] .tiptap-mathematics-render[data-type=block-math]:hover {
+  background-color: var(--tiptap-color-primary-subtle);
+}
+
+/* src/styles/extensions/commands-list.css */
+.commands-list-container {
+  display: flex;
+  z-index: 50;
+  flex-direction: column;
+  width: 280px;
+  max-height: 300px;
+  padding: 12px;
+  overflow-y: auto;
+  gap: 6px;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: var(--tiptap-radius);
+  background-color: var(--tiptap-bg-surface-menu);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  scrollbar-color: black transparent;
+  scrollbar-width: thin;
+}
+.commands-list-container::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.commands-list-container::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background: transparent;
+}
+.commands-list-container::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: black;
+}
+.commands-list-container::-webkit-scrollbar-thumb:hover {
+  background: #333;
+}
+.commands-list-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 12px;
+  gap: 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--tiptap-color-primary);
+  font-weight: 500;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+.commands-list-item:hover {
+  outline: 1px solid var(--tiptap-color-primary-light);
+  background-color: var(--tiptap-color-primary-subtle);
+}
+.commands-list-item.active {
+  outline: none;
+  background-color: var(--tiptap-color-primary);
+  color: var(--tiptap-state-control-active-color);
+}
+.commands-list-icon svg {
+  width: 24px;
+  height: 24px;
+}
+.commands-list-title {
+  flex: 1;
+  font-weight: 500;
+}
+.commands-list-empty {
+  padding: 20px 12px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--tiptap-color-text-placeholder);
+  font-size: 14px;
+  text-align: center;
+}
+
+/* src/styles/extensions/index.css */
+
+/* src/styles/editor/variables.css */
+:root {
+  --tiptap-color-primary: #6366f1;
+  --tiptap-color-primary-light: #6366f150;
+  --tiptap-color-primary-subtle: rgba(99, 102, 241, 0.08);
+  --tiptap-color-link: #0059df;
+  --tiptap-color-primary-error: #f04438;
+  --tiptap-color-border: #f2f4f7;
+  --tiptap-color-divider: #aaabb7;
+  --tiptap-color-text-disabled: #aaabb7;
+  --tiptap-color-text-placeholder: #aaabb7;
+  --ui-color-primary: #6366f1;
+  --ui-color-primary-dark: #4f46e5;
+  --ui-shadow-primary: 0 2px 4px rgba(99, 102, 241, 0.3);
+  --ui-text-primary: #333333;
+  --ui-text-secondary: #666666;
+  --ui-text-disabled: #999999;
+  --ui-text-white: #ffffff;
+  --ui-secondary-bg: #f0f0f0;
+  --ui-secondary-bg-hover: #e8e8e8;
+  --ui-secondary-bg-active: #dcdcdc;
+  --ui-info-bg: #f5f7ff;
+  --ui-info-border: #e0e7ff;
+  --ui-error-bg: #fee4e2;
+  --ui-error-border: #fcd5d0;
+  --ui-error-text: #7a271a;
+  --tiptap-bg-surface: #fff;
+  --tiptap-bg-surface-menu: #fff;
+  --tiptap-state-control-active-color: #fff;
+  --tiptap-state-control-disabled-color: #aaabb7;
+  --tiptap-font-family:
+    "Golos Text",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  --tiptap-font-size: 18px;
+  --tiptap-radius: 8px;
+  --tiptap-spacing: 16px;
+  --tiptap-copyable-bg--light: #f5f5f5;
+  --tiptap-copyable-bg--dark: #1a1a1a;
+  --tiptap-copyable-border--light: #cbcbcb;
+  --tiptap-copyable-border--dark: #3a3a3a;
+  --tiptap-copyable-border-hover--light: #b0b5bd;
+  --tiptap-copyable-border-hover--dark: #4a5a6a;
+  --tiptap-copyable-bg-hover--light: #ececec;
+  --tiptap-copyable-bg-hover--dark: #252525;
+}
+
+/* src/styles/editor/base.css */
+.tiptap-content-wrapper {
+  position: relative;
+  margin: 0 !important;
+}
+.tiptap {
+  padding: var(--tiptap-spacing);
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: var(--tiptap-radius);
+  font-size: var(--tiptap-font-size);
+  font-family: var(--tiptap-font-family);
+}
+.tiptap:focus {
+  border-color: var(--tiptap-color-primary-light);
+  outline: none;
+}
+.tiptap-content-wrapper.has-error .tiptap {
+  border-color: var(--tiptap-color-primary-error);
+}
+.tiptap-error-message {
+  margin: 8px 0 0 0 !important;
+  color: var(--tiptap-color-primary-error);
+  font-size: 14px;
+}
+.tiptap[data-tiptap-render],
+.tiptap[contenteditable=false] {
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.tiptap[data-tiptap-render] [data-placeholder].is-empty,
+.tiptap[contenteditable=false] [data-placeholder].is-empty {
+  display: none;
+}
+
+/* src/styles/editor/typography.css */
+.tiptap p {
+  margin: 0;
+  font-weight: 400;
+  font-size: var(--tiptap-font-size);
+  line-height: 140%;
+  letter-spacing: 0;
+}
+.tiptap > * {
+  letter-spacing: 0;
+}
+.tiptap p:not(:last-child),
+.tiptap ul:not(:last-child),
+.tiptap ol:not(:last-child),
+.tiptap blockquote:not(:last-child) {
+  margin-bottom: var(--tiptap-spacing);
+}
+.tiptap h2 {
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 130%;
+  letter-spacing: -0.72px;
+}
+.tiptap h3 {
+  font-weight: 600;
+  font-size: 28px;
+  line-height: 130%;
+  letter-spacing: -0.56px;
+}
+.tiptap h4 {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 130%;
+  letter-spacing: -0.48px;
+}
+.tiptap h5 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 130%;
+  letter-spacing: -0.4px;
+}
+.tiptap h6 {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 140%;
+  letter-spacing: -0.36px;
+}
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  margin: 0;
+}
+.tiptap h1,
+.tiptap h2,
+.tiptap h3 {
+  margin-bottom: 20px;
+}
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  margin-bottom: 12px;
+}
+.tiptap ul,
+.tiptap ol {
+  padding-left: 32px;
+}
+.tiptap ul:not(:last-child),
+.tiptap ol:not(:last-child),
+.tiptap blockquote:not(:last-child) {
+  margin: 16px 0;
+}
+.tiptap strong {
+  font-weight: 600;
+}
+.tiptap li:not(:last-child) {
+  margin-bottom: 6px;
+}
+.tiptap blockquote {
+  margin: 0;
+  padding: 10px 0 10px 16px;
+  border-left: 1px solid var(--tiptap-color-primary-light);
+}
+.tiptap blockquote::before {
+  width: 0;
+}
+.tiptap hr {
+  margin: 24px 0;
+  border: none;
+  border-top: 1px solid var(--tiptap-color-divider);
+}
+.tiptap a {
+  color: var(--tiptap-color-link);
+  text-decoration: none;
+}
+.tiptap[data-tiptap-render] a:hover,
+.tiptap[contenteditable=false] a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tiptap mark {
+  padding: 0 4px;
+  border-radius: 4px;
+}
+.tiptap .is-empty::before {
+  height: 0;
+  float: left;
+  content: attr(data-placeholder);
+  color: var(--tiptap-color-text-placeholder);
+  pointer-events: none;
+}
+.tiptap[contenteditable=true] span.copyable {
+  pointer-events: none;
+}
+.tiptap span.copyable {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 4px;
+  border: 1px solid var(--tiptap-copyable-border--light);
+  border-radius: 4px;
+  background: var(--tiptap-copyable-bg--light);
+  line-height: 24px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+[data-theme=dark] .tiptap span.copyable {
+  border-color: var(--tiptap-copyable-border--dark);
+  background-color: var(--tiptap-copyable-bg--dark);
+}
+.tiptap span.copyable:hover {
+  border-color: var(--tiptap-copyable-border-hover--light);
+  background: var(--tiptap-copyable-bg-hover--light);
+}
+[data-theme=dark] .tiptap span.copyable:hover {
+  border-color: var(--tiptap-copyable-border-hover--dark);
+  background-color: var(--tiptap-copyable-bg-hover--dark);
+}
+
+/* src/styles/editor/controls.css */
+.tiptap-controls-row {
+  display: flex;
+  gap: 12px;
+}
+.tiptap-controls-row:not(:last-child) {
+  margin-bottom: 12px;
+}
+.tiptap-controls-group {
+  display: flex;
+  width: fit-content;
+  padding: 6px;
+  gap: 12px;
+  border: 1px solid var(--tiptap-color-primary-subtle);
+  border-radius: 4px;
+}
+.bubble-menu .tiptap-controls-group {
+  padding: 4px;
+}
+.tiptap-control-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  color: var(--tiptap-color-primary);
+  cursor: pointer;
+}
+.tiptap-control-button svg {
+  width: 24px;
+  height: 24px;
+}
+.bubble-menu .tiptap-control-button svg {
+  width: 18px;
+  height: 18px;
+}
+.tiptap-control-button:disabled {
+  color: var(--tiptap-color-text-disabled);
+  cursor: not-allowed;
+}
+.tiptap-control-button:hover {
+  outline: 1px solid var(--tiptap-color-primary-light);
+}
+.tiptap-control-button.is-active {
+  background-color: var(--tiptap-color-primary);
+  color: var(--tiptap-state-control-active-color);
+}
+
+/* src/styles/editor/menus.css */
+.bubble-menu {
+  display: flex;
+  z-index: 10000;
+  position: relative;
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: var(--tiptap-radius);
+  background-color: var(--tiptap-bg-surface-menu);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.tiptap-content-wrapper:has(.hide-text-selection) ::selection {
+  background: #d5d4d450;
+}
+
+/* src/styles/editor/utilities.css */
+.tiptap .copy-button {
+  display: flex;
+  border: none;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+}
+.tiptap .copy-button.copy-icon-white {
+  color: white;
+}
+.tiptap .copy-button.copy-icon-prompt {
+  color: var(--tiptap-prompt-action-color);
+}
+.copy-icon,
+.copy-icon-success {
+  display: flex;
+}
+.tiptap__drag-handle-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 24px;
+  transform: translateX(-8px);
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: 4px;
+  background-color: #fff;
+  color: var(--tiptap-color-primary);
+  cursor: grab;
+  user-select: none;
+}
+.tiptap__drag-handle-button svg {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+.tiptap__drag-handle-button:active {
+  cursor: grabbing;
+}
+.tiptap__character-count {
+  display: flex;
+  position: absolute;
+  right: 16px;
+  bottom: -14px;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 8px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 8px;
+  background-color: #fff;
+  color: var(--ui-text-secondary);
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: 0.4px;
+}
+.tiptap-content-wrapper:has(.tiptap:focus) .tiptap__character-count {
+  border-color: var(--tiptap-color-primary-light);
+}
+.tiptap-content-wrapper.has-error:has(.tiptap:focus) .tiptap__character-count,
+.tiptap-content-wrapper.has-error .tiptap__character-count {
+  border-color: var(--tiptap-color-primary-error);
+}
+
+/* src/styles/editor/states.css */
+.tiptap [data-prompt].is-empty::before,
+.tiptap [data-myth-reality].is-empty::before,
+.tiptap [data-myth-reality-block].is-empty::before,
+.tiptap [data-type=detailsContent].is-empty::before,
+.tiptap [data-type=details].is-empty::before,
+.tiptap .react-renderer.is-empty::before,
+.tiptap blockquote.is-empty::before,
+.tiptap .tableWrapper.is-empty::before,
+.tiptap table p.is-empty::before,
+.tiptap td.is-empty::before,
+.tiptap th.is-empty::before,
+.tiptap tr.is-empty::before,
+.tiptap li p.is-empty::before {
+  display: none;
+}
+.ProseMirror-selectednode:not(p.is-empty) {
+  border-radius: 4px;
+  outline: 5px solid var(--tiptap-color-primary-light);
+  background-color: var(--tiptap-color-primary-subtle);
+}
+.tiptap table .selectedCell {
+  background-color: var(--tiptap-color-primary-subtle);
+}
+.tiptap .tiptap-mathematics-render.ProseMirror-selectednode,
+.tiptap .node-promptHeader.ProseMirror-selectednode,
+.tiptap .node-promptContent.ProseMirror-selectednode,
+.tiptap .node-promptV2Header.ProseMirror-selectednode,
+.tiptap .node-promptV2Content.ProseMirror-selectednode,
+.tiptap .node-customQuoteText.ProseMirror-selectednode,
+.tiptap .node-customQuoteSign.ProseMirror-selectednode,
+.tiptap .node-customQuoteAuthor.ProseMirror-selectednode {
+  outline: none;
+  background-color: transparent;
+}
+.tiptap[data-tiptap-render] .ProseMirror-selectednode,
+.tiptap[contenteditable=false] .ProseMirror-selectednode {
+  outline: none;
+  background-color: transparent;
+}
+
+/* src/styles/editor/callout-menu.css */
+.tiptap__drag-handle-color-menu {
+  display: flex;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 196px;
+  margin-left: 8px;
+  padding: 8px;
+  gap: 4px;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: 8px;
+  background: var(--tiptap-bg-surface-menu);
+}
+.tiptap__color-menu-title {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.tiptap__color-menu-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 4px;
+}
+.tiptap__color-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  border: none;
+  border-radius: 8px;
+  border-color: transparent;
+  outline: none;
+  background: var(--tiptap-bg-surface-menu);
+  cursor: pointer;
+  transition: border 0.15s ease;
+}
+.tiptap__color-option:hover {
+  border: 1px solid var(--tiptap-color-primary-light);
+}
+.tiptap__color-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 29px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 1.4;
+}
+.tiptap__color-menu-custom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--tiptap-color-primary-light);
+}
+.tiptap__color-menu-custom-label {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+/* src/styles/editor/emoji-picker.css */
+.tiptap__emoji-picker-wrapper .EmojiPickerReact {
+  border: 1px solid var(--tiptap-color-primary-light);
+  box-shadow: 0 2px 8px #00000026;
+}
+.tiptap__emoji-picker-wrapper {
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  margin-left: 8px;
+}
+.tiptap__emoji-picker-wrapper .EmojiPickerReact {
+  --epr-emoji-size: 24px;
+}
+.tiptap__emoji-picker-wrapper .epr-category-nav {
+  padding-top: 0;
+  padding-bottom: 6px;
+}
+.tiptap__emoji-picker-wrapper .epr-category-label {
+  padding: 4px 8px;
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: none;
+}
+.tiptap__emoji-picker-wrapper .epr_346qu6 {
+  padding: 0 0 8px 0;
+}
+.tiptap__emoji-picker-wrapper .epr-search-container input {
+  border: none;
+  border-bottom: 1px solid var(--tiptap-color-primary-light);
+  border-radius: 0;
+  background: var(--tiptap-bg-surface-menu);
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: -0.14px;
+}
+.tiptap__emoji-picker-wrapper .epr-search-container input::placeholder {
+  color: var(--ui-text-secondary);
+}
+.tiptap__emoji-picker-wrapper .epr-search-container input:focus {
+  border-color: var(--tiptap-color-primary-light);
+}
+.tiptap__emoji-picker-wrapper .epr-icn-search {
+  left: 4px;
+  width: 24px;
+  height: 24px;
+  background-size: 24px;
+}
+.tiptap__emoji-picker-wrapper .epr-emoji-category-label {
+  height: auto;
+  margin: 0;
+  padding: 4px 10px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 120%;
+}
+.tiptap__emoji-picker-wrapper .epr-emoji-list {
+  padding: 0;
+}
+.tiptap__emoji-picker-wrapper .epr-btn {
+  border: none;
+  outline: none;
+}
+.tiptap__emoji-picker-wrapper .epr-btn:focus::before {
+  border: none;
+  outline: none;
+}
+.callout-icon-wrapper {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+}
+.callout-icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.callout-icon-button:disabled {
+  cursor: default;
+}
+.callout-icon-button:not(:disabled):hover .callout-icon {
+  opacity: 0.8;
+}
+.callout-icon img {
+  display: block;
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+/* src/styles/editor/index.css */
+
+/* src/styles/styles.css */