@cyberyozh/text-editor 0.1.1

package/src/styles/editor/emoji-picker.css

@@ -0,0 +1,113 @@
+.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;
+}

package/src/styles/editor/index.css

@@ -0,0 +1,9 @@
+@import "./variables.css";
+@import "./base.css";
+@import "./typography.css";
+@import "./controls.css";
+@import "./menus.css";
+@import "./utilities.css";
+@import "./states.css";
+@import "./callout-menu.css";
+@import "./emoji-picker.css";

package/src/styles/editor/menus.css

@@ -0,0 +1,16 @@
+.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;
+}

package/src/styles/editor/states.css

@@ -0,0 +1,43 @@
+.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;
+}

package/src/styles/editor/typography.css

@@ -0,0 +1,165 @@
+.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);
+}

package/src/styles/editor/utilities.css

@@ -0,0 +1,71 @@
+.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);
+}

package/src/styles/editor/variables.css

@@ -0,0 +1,70 @@
+:root {
+  /* ═══ BASE / GLOBAL VARIABLES ═══ */
+
+  /* Colors */
+  --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/DIALOG VARIABLES ═══ */
+  /* Primary Actions */
+  --ui-color-primary: #6366f1;
+  --ui-color-primary-dark: #4f46e5;
+  --ui-shadow-primary: 0 2px 4px rgba(99, 102, 241, 0.3);
+
+  /* Text */
+  --ui-text-primary: #333333;
+  --ui-text-secondary: #666666;
+  --ui-text-disabled: #999999;
+  --ui-text-white: #ffffff;
+
+  /* Secondary Actions (alternative buttons, backgrounds, borders) */
+  --ui-secondary-bg: #f0f0f0;
+  --ui-secondary-bg-hover: #e8e8e8;
+  --ui-secondary-bg-active: #dcdcdc;
+
+  /* Info State */
+  --ui-info-bg: #f5f7ff;
+  --ui-info-border: #e0e7ff;
+
+  /* Error State */
+  --ui-error-bg: #fee4e2;
+  --ui-error-border: #fcd5d0;
+  --ui-error-text: #7a271a;
+
+  /* Surfaces */
+  --tiptap-bg-surface: #fff;
+  --tiptap-bg-surface-menu: #fff;
+
+  /* States */
+  --tiptap-state-control-active-color: #fff;
+  --tiptap-state-control-disabled-color: #aaabb7;
+
+  /* Typography */
+  --tiptap-font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
+  --tiptap-font-size: 18px;
+
+  /* Sizes & Spacing */
+  --tiptap-radius: 8px;
+  --tiptap-spacing: 16px;
+
+  /* Copyable Text Mark */
+  --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;
+}

package/src/styles/extensions/callout.css

@@ -0,0 +1,155 @@
+: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 Variants */
+.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 */
+.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 */
+.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 Text Formatting */
+.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;
+}