@cyberyozh/text-editor 0.1.1

package/src/styles/extensions/table.css

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

package/src/styles/extensions/video.css

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

package/src/styles/styles.css

@@ -0,0 +1,3 @@
+@import "./components.css";
+@import "./extensions/index.css";
+@import "./editor/index.css";

package/src/translations/en.json

@@ -0,0 +1,158 @@
+{
+  "history": {
+    "undo": "Undo",
+    "redo": "Redo"
+  },
+  "headings": {
+    "h2": "Heading 2",
+    "h3": "Heading 3",
+    "h4": "Heading 4",
+    "h5": "Heading 5",
+    "h6": "Heading 6"
+  },
+  "media": {
+    "addImage": "Image",
+    "imageTitle": "Image title",
+    "imageAlt": "Alt text",
+    "deleteImage": "Delete image",
+    "previewLabel": "Preview",
+    "addLink": "Insert link",
+    "addVideo": "Video",
+    "addKatex": "Formula (KaTeX)"
+  },
+  "link": {
+    "title": "Link text",
+    "titleError": "Enter link text",
+    "titlePlaceholder": "Enter text to display...",
+    "url": "Link URL",
+    "urlPlaceholder": "https://example.com",
+    "addLink": "Add link",
+    "editLink": "Edit link",
+    "removeLink": "Remove link",
+    "invalidUrl": "Invalid URL",
+    "emptyUrl": "Enter link URL",
+    "addLinkTitle": "Add link",
+    "removeLinkTitle": "Remove link"
+  },
+  "lists": {
+    "bulletList": "Bullet list",
+    "orderedList": "Numbered list",
+    "details": "Details"
+  },
+  "blocks": {
+    "callout": "Callout",
+    "calloutSelectStyle": "Select style",
+    "calloutCustomColor": "Custom color",
+    "blockquote": "Quote",
+    "codeBlock": "Code block",
+    "customQuote": "Custom quote",
+    "horizontalRule": "Divider",
+    "mythReality": "Myth/Reality",
+    "prompt": "Prompt"
+  },
+  "mythReality": {
+    "myth": "Myth",
+    "reality": "Reality"
+  },
+  "customQuote": {
+    "textPlaceholder": "Enter quote text…",
+    "authorPlaceholder": "Enter author name…",
+    "signPlaceholder": "Enter role or source…"
+  },
+  "prompt": {
+    "headerPlaceholder": "Enter header…",
+    "contentPlaceholder": "Enter prompt…"
+  },
+  "codeBlock": {
+    "selectLanguage": "Select language",
+    "copyCode": "Copy code",
+    "copied": "Copied!"
+  },
+  "textFormatting": {
+    "superscript": "Superscript",
+    "subscript": "Subscript",
+    "bold": "Bold",
+    "italic": "Italic",
+    "underline": "Underline",
+    "strikethrough": "Strikethrough",
+    "clearFormatting": "Clear formatting",
+    "textColor": "Text color",
+    "highlightColor": "Highlight color",
+    "copyableText": "Copyable text"
+  },
+  "alignment": {
+    "alignLeft": "Align left",
+    "alignCenter": "Align center",
+    "alignRight": "Align right"
+  },
+  "table": {
+    "table": "Table",
+    "insertRowBefore": "Insert row above",
+    "insertRowAfter": "Insert row below",
+    "deleteRow": "Delete row",
+    "insertColumnBefore": "Insert column left",
+    "insertColumnAfter": "Insert column right",
+    "deleteColumn": "Delete column",
+    "toggleHeaderRow": "Toggle header row",
+    "toggleHeaderColumn": "Toggle header column",
+    "mergeCells": "Merge cells",
+    "splitCell": "Split cell"
+  },
+  "imageUpload": {
+    "dragActive": "Drop file here",
+    "dragInactive": "Drag file or click to select"
+  },
+  "imageDialog": {
+    "addTitle": "Add image",
+    "editTitle": "Edit image",
+    "captionLabel": "Image caption",
+    "captionPlaceholder": "Description under image...",
+    "save": "Save",
+    "add": "Add"
+  },
+  "videoUpload": {
+    "title": "Add video",
+    "urlLabel": "Video URL",
+    "urlPlaceholder": "Paste video URL here",
+    "supportedPlatforms": "Supported platforms:",
+    "emptyUrl": "Please enter video URL",
+    "unsupportedUrl": "Unsupported video URL. Please check URL and try again.",
+    "validationError": "Error validating video URL. Please try again.",
+    "add": "Add video",
+    "cancel": "Cancel",
+    "validating": "Validating..."
+  },
+  "katex": {
+    "addTitle": "Add KaTeX formula",
+    "editTitle": "Edit KaTeX formula",
+    "description": "Enter mathematical expression in KaTeX format. See",
+    "documentationLink": "KaTeX documentation",
+    "documentationLinkSuffix": "for syntax reference.",
+    "label": "Mathematical expression",
+    "placeholder": "e.g., x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}",
+    "add": "Add formula",
+    "update": "Update formula"
+  },
+  "floatingMenu": {
+    "addCustomQuote": "Add custom quote",
+    "addMythReality": "Add Myth/Reality block",
+    "addPrompt": "Add prompt",
+    "addSuccessCallout": "Add success callout",
+    "addInfoCallout": "Add info callout",
+    "addWarningCallout": "Add warning callout",
+    "addErrorCallout": "Add error callout"
+  },
+  "editor": {
+    "commandMenuPlaceholder": "Press \"/\" for commands...",
+    "detailsSummaryPlaceholder": "Summary...",
+    "emojiSearchPlaceholder": "Search...",
+    "noCommandsFound": "No commands found"
+  },
+  "characterCount": {
+    "characters": ["character", "characters", "characters"],
+    "words": ["word", "words", "words"]
+  },
+  "common": {
+    "cancel": "Cancel"
+  }
+}

package/src/translations/ru.json

@@ -0,0 +1,158 @@
+{
+  "history": {
+    "undo": "Отменить",
+    "redo": "Повторить"
+  },
+  "headings": {
+    "h2": "Заголовок 2",
+    "h3": "Заголовок 3",
+    "h4": "Заголовок 4",
+    "h5": "Заголовок 5",
+    "h6": "Заголовок 6"
+  },
+  "media": {
+    "addImage": "Изображение",
+    "imageTitle": "Название (title изображение)",
+    "imageAlt": "Alt",
+    "deleteImage": "Удалить изображение",
+    "previewLabel": "Предпросмотр",
+    "addLink": "Вставить ссылку",
+    "addVideo": "Видео",
+    "addKatex": "Формула (KaTeX)"
+  },
+  "link": {
+    "title": "Текст ссылки",
+    "titleError": "Введение текст ссылки",
+    "titlePlaceholder": "Введите текст для отображения...",
+    "url": "URL ссылки",
+    "urlPlaceholder": "https://example.com",
+    "addLink": "Добавить ссылку",
+    "editLink": "Редактировать ссылку",
+    "removeLink": "Удалить ссылку",
+    "invalidUrl": "Неверный URL",
+    "emptyUrl": "Введите URL ссылки",
+    "addLinkTitle": "Добавить ссылку",
+    "removeLinkTitle": "Удалить ссылку"
+  },
+  "lists": {
+    "bulletList": "Ненумерованный список",
+    "orderedList": "Нумерованный список",
+    "details": "Сворачиваемый блок"
+  },
+  "blocks": {
+    "callout": "Коллаут",
+    "calloutSelectStyle": "Выбрать стиль",
+    "calloutCustomColor": "Свой цвет",
+    "blockquote": "Цитата",
+    "codeBlock": "Блок кода",
+    "customQuote": "Расширенная цитата",
+    "horizontalRule": "Разделитель",
+    "mythReality": "Миф/Реальность",
+    "prompt": "Промпт"
+  },
+  "mythReality": {
+    "myth": "Миф",
+    "reality": "Реальность"
+  },
+  "customQuote": {
+    "textPlaceholder": "Введите текст цитаты…",
+    "authorPlaceholder": "Введите имя автора…",
+    "signPlaceholder": "Укажите роль или источник…"
+  },
+  "prompt": {
+    "headerPlaceholder": "Введите заголовок…",
+    "contentPlaceholder": "Введите промпт…"
+  },
+  "codeBlock": {
+    "selectLanguage": "Выберите язык",
+    "copyCode": "Копировать код",
+    "copied": "Скопировано!"
+  },
+  "textFormatting": {
+    "superscript": "Верхний индекс",
+    "subscript": "Нижний индекс",
+    "bold": "Жирный",
+    "italic": "Курсив",
+    "underline": "Подчеркивание",
+    "strikethrough": "Перечеркивание",
+    "clearFormatting": "Очистить форматирование",
+    "textColor": "Цвет текста",
+    "highlightColor": "Цвет выделения",
+    "copyableText": "Копируемый текст"
+  },
+  "alignment": {
+    "alignLeft": "Выравниваение слева",
+    "alignCenter": "Выравнивание по центру",
+    "alignRight": "Выравнивание справа"
+  },
+  "table": {
+    "table": "Таблица",
+    "insertRowBefore": "Вставить строку выше",
+    "insertRowAfter": "Вставить строку ниже",
+    "deleteRow": "Удалить строку",
+    "insertColumnBefore": "Вставить столбец слева",
+    "insertColumnAfter": "Вставить столбец справа",
+    "deleteColumn": "Удалить столбец",
+    "toggleHeaderRow": "Строка заголовок",
+    "toggleHeaderColumn": "Столбец заголовок",
+    "mergeCells": "Объединить ячейки",
+    "splitCell": "Разделить ячейку"
+  },
+  "imageUpload": {
+    "dragActive": "Отпустите файл здесь",
+    "dragInactive": "Перетащите файл или кликните, чтобы выбрать"
+  },
+  "imageDialog": {
+    "addTitle": "Добавление картинки",
+    "editTitle": "Редактирование изображения",
+    "captionLabel": "Подпись к изображению",
+    "captionPlaceholder": "Описание под изображением...",
+    "save": "Сохранить",
+    "add": "Добавить"
+  },
+  "videoUpload": {
+    "title": "Добавить видео",
+    "urlLabel": "URL видео",
+    "urlPlaceholder": "Вставьте URL видео здесь",
+    "supportedPlatforms": "Поддерживаемые платформы:",
+    "emptyUrl": "Пожалуйста, введите URL видео",
+    "unsupportedUrl": "Неподдерживаемый URL видео. Пожалуйста, проверьте URL и попробуйте снова.",
+    "validationError": "Ошибка при проверке URL видео. Пожалуйста, попробуйте снова.",
+    "add": "Добавить видео",
+    "cancel": "Отменить",
+    "validating": "Проверка..."
+  },
+  "katex": {
+    "addTitle": "Добавить формулу KaTeX",
+    "editTitle": "Редактировать формулу KaTeX",
+    "description": "Введите математическое выражение в формате KaTeX. Смотрите",
+    "documentationLink": "документацию KaTeX",
+    "documentationLinkSuffix": "для справки по синтаксису.",
+    "label": "Математическое выражение",
+    "placeholder": "например, x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}",
+    "add": "Добавить формулу",
+    "update": "Обновить формулу"
+  },
+  "floatingMenu": {
+    "addCustomQuote": "Добавить расширенную цитату",
+    "addMythReality": "Добавить блок Миф/Реальность",
+    "addPrompt": "Добавить промпт",
+    "addSuccessCallout": "Добавить коллаут (успех)",
+    "addInfoCallout": "Добавить коллаут (инфо)",
+    "addWarningCallout": "Добавить коллаут (идея)",
+    "addErrorCallout": "Добавить коллаут (ошибка)"
+  },
+  "editor": {
+    "commandMenuPlaceholder": "Нажмите \"/\" для вызова команд...",
+    "detailsSummaryPlaceholder": "Заголовок...",
+    "emojiSearchPlaceholder": "Поиск...",
+    "noCommandsFound": "Команды не найдены"
+  },
+  "characterCount": {
+    "characters": ["символ", "символа", "символов"],
+    "words": ["слово", "слова", "слов"]
+  },
+  "common": {
+    "cancel": "Отменить"
+  }
+}

package/src/types/image-handler.ts

@@ -0,0 +1,33 @@
+export interface ImageUploadResult {
+  fileId?: string;
+  fileUrl?: string;
+}
+
+export interface ImageUploadHandler {
+  (file: File): Promise<ImageUploadResult>;
+}
+
+export interface ImageGetHandler {
+  (fileId: string): string | null;
+}
+
+export interface ImageHandlers {
+  upload: ImageUploadHandler;
+  getImage?: ImageGetHandler;
+}
+
+export interface FigureAttrs {
+  fileId?: string;
+  src?: string;
+  alt?: string;
+  title?: string;
+  caption?: string;
+  width?: number | null;
+  height?: number | null;
+}
+
+export interface TiptapImageAttrs extends FigureAttrs {}
+
+export interface ImageDialogConfig {
+  onUpload: ImageUploadHandler;
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './image-handler';

package/src/utils/copy-to-clipboard.ts

@@ -0,0 +1,23 @@
+export const copyToClipboard = (text: string): Promise<void> => {
+  if (navigator.clipboard && window.isSecureContext) {
+    return navigator.clipboard.writeText(text);
+  }
+
+  return new Promise((resolve, reject) => {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+
+    try {
+      textarea.select();
+      document.execCommand("copy");
+      resolve();
+    } catch (error) {
+      reject(error);
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  });
+};