@cyberyozh/text-editor 0.1.1

package/src/styles/extensions/code-block.css

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

package/src/styles/extensions/commands-list.css

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

package/src/styles/extensions/custom-quote.css

@@ -0,0 +1,103 @@
+[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;
+}

package/src/styles/extensions/details.css

@@ -0,0 +1,87 @@
+/* Editor view with custom button */
+[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: "▶";
+}
+
+[data-type="details"] > div {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+}
+
+[data-type="details"].is-open > button {
+  transform: rotate(90deg);
+}
+
+/* Native HTML details element (server-rendered) */
+.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;
+}
+
+/* Custom marker styling using ::before since ::marker doesn't support transform */
+.tiptap details.details summary::before {
+  display: inline-block;
+  flex-shrink: 0;
+  content: "▶";
+  color: var(--tiptap-color-primary);
+  font-size: 16px;
+  transition: transform 150ms ease-in-out;
+}
+
+.tiptap details.details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+/* Hide the default marker */
+.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;
+}

package/src/styles/extensions/figure.css

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

package/src/styles/extensions/index.css

@@ -0,0 +1,11 @@
+@import './figure.css';
+@import './table.css';
+@import './details.css';
+@import './myth-reality.css';
+@import './custom-quote.css';
+@import './callout.css';
+@import './code-block.css';
+@import './prompt.css';
+@import './video.css';
+@import './math.css';
+@import './commands-list.css';

package/src/styles/extensions/math.css

@@ -0,0 +1,32 @@
+/* Inline Math */
+.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);
+}
+
+/* Block Math */
+.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);
+}

package/src/styles/extensions/myth-reality.css

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

package/src/styles/extensions/prompt.css

@@ -0,0 +1,75 @@
+: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;
+}