@cyberyozh/text-editor 0.1.1

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@cyberyozh/text-editor",
+  "version": "0.1.1",
+  "description": "Rich text editor library based on Tiptap for CyberYozh",
+  "author": "CyberYozh",
+  "license": "MIT",
+  "main": "dist/render.js",
+  "types": "dist/render.d.ts",
+  "exports": {
+    "./render": {
+      "types": "./dist/render.d.ts",
+      "import": "./dist/render.mjs",
+      "require": "./dist/render.js"
+    },
+    "./render/client": {
+      "types": "./dist/render/client.d.ts",
+      "import": "./dist/render/client.mjs",
+      "require": "./dist/render/client.js"
+    },
+    "./editor": {
+      "types": "./dist/editor.d.ts",
+      "import": "./dist/editor.mjs",
+      "require": "./dist/editor.js"
+    },
+    "./styles": "./dist/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "dev": "tsup --watch",
+    "dev:link": "npm run build && npm link && npm run dev",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "npm run build && changeset publish",
+    "release:complete": "git add . && git commit -m \"chore: release v$(node -p \"require('./package.json').version\")\" && npm run release && git push --follow-tags"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "@tiptap/core": "^3.10.6",
+    "@tiptap/extension-blockquote": "^3.10.6",
+    "@tiptap/extension-bubble-menu": "^3.10.6",
+    "@tiptap/extension-code": "^3.10.6",
+    "@tiptap/extension-code-block-lowlight": "^3.10.6",
+    "@tiptap/extension-details": "^3.10.6",
+    "@tiptap/extension-drag-handle-react": "^3.10.6",
+    "@tiptap/extension-floating-menu": "^3.10.6",
+    "@tiptap/extension-hard-break": "^3.10.6",
+    "@tiptap/extension-highlight": "^3.10.6",
+    "@tiptap/extension-horizontal-rule": "^3.10.6",
+    "@tiptap/extension-image": "^3.10.6",
+    "@tiptap/extension-link": "^3.10.6",
+    "@tiptap/extension-list": "^3.10.6",
+    "@tiptap/extension-mathematics": "^3.10.6",
+    "@tiptap/extension-node-range": "^3.10.6",
+    "@tiptap/extension-subscript": "^3.10.6",
+    "@tiptap/extension-superscript": "^3.10.6",
+    "@tiptap/extension-table": "^3.10.6",
+    "@tiptap/extension-text-align": "^3.10.6",
+    "@tiptap/extensions": "^3.10.6",
+    "@tiptap/html": "^3.10.6",
+    "@tiptap/pm": "^3.10.6",
+    "@tiptap/react": "^3.10.6",
+    "@tiptap/starter-kit": "^3.10.6",
+    "@tiptap/static-renderer": "^3.10.6",
+    "@tiptap/suggestion": "^3.10.6",
+    "emoji-picker-react": "^4.15.1",
+    "highlight.js": "^11.11.0",
+    "katex": "^0.16.25",
+    "lowlight": "^3.3.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.7",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^8",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  }
+}

package/src/editor/commands/items.ts

@@ -0,0 +1,374 @@
+import type { Editor } from "@tiptap/react";
+
+import {
+  TiptapMenuLink,
+  TiptapMenuAddImage,
+  TiptapMenuBlockquote,
+  TiptapMenuBulletList,
+  TiptapMenuCalloutError,
+  TiptapMenuCalloutInfo,
+  TiptapMenuCalloutSuccess,
+  TiptapMenuCalloutWarning,
+  TiptapMenuCodeBlock,
+  TiptapMenuCustomQuote,
+  TiptapMenuDetails,
+  TiptapMenuH2,
+  TiptapMenuH3,
+  TiptapMenuH4,
+  TiptapMenuH5,
+  TiptapMenuH6,
+  TiptapMenuHorizontalRule,
+  TiptapMenuMath,
+  TiptapMenuMythReality,
+  TiptapMenuOrderedList,
+  TiptapMenuPrompt,
+  TiptapMenuRedo,
+  TiptapMenuSubscript,
+  TiptapMenuSuperscript,
+  TiptapMenuTable,
+  TiptapMenuUndo,
+  TiptapMenuVideo,
+} from "../../icons";
+
+import type { TiptapTranslations } from "../../utils/get-translations";
+
+export interface CommandMenuItem {
+  id: string;
+  title: string;
+  icon: React.ComponentType;
+  onClick: (editor: Editor) => void;
+  isActive?: (editor: Editor) => boolean;
+  isDisabled?: (editor: Editor) => boolean;
+  group?: string;
+  dialogCommand?: "image" | "video" | "link" | "katex";
+}
+
+export const getCommandItems = (
+  translations: TiptapTranslations,
+  hasImageHandlers: boolean
+): CommandMenuItem[] => [
+  // Undo/Redo group
+  // {
+  //   id: "undo",
+  //   title: translations.history.undo,
+  //   icon: TiptapMenuUndo,
+  //   onClick: (editor) => editor.chain().focus().undo().run(),
+  //   isDisabled: (editor) => !editor.can().undo(),
+  //   group: "history",
+  // },
+  // {
+  //   id: "redo",
+  //   title: translations.history.redo,
+  //   icon: TiptapMenuRedo,
+  //   onClick: (editor) => editor.chain().focus().redo().run(),
+  //   isDisabled: (editor) => !editor.can().redo(),
+  //   group: "history",
+  // },
+  // Headings group
+  {
+    id: "heading-2",
+    title: translations.headings.h2,
+    icon: TiptapMenuH2,
+    onClick: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 2 }),
+    group: "headings",
+  },
+  {
+    id: "heading-3",
+    title: translations.headings.h3,
+    icon: TiptapMenuH3,
+    onClick: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 3 }),
+    group: "headings",
+  },
+  {
+    id: "heading-4",
+    title: translations.headings.h4,
+    icon: TiptapMenuH4,
+    onClick: (editor) => editor.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 4 }),
+    group: "headings",
+  },
+  {
+    id: "heading-5",
+    title: translations.headings.h5,
+    icon: TiptapMenuH5,
+    onClick: (editor) => editor.chain().focus().toggleHeading({ level: 5 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 5 }),
+    group: "headings",
+  },
+  {
+    id: "heading-6",
+    title: translations.headings.h6,
+    icon: TiptapMenuH6,
+    onClick: (editor) => editor.chain().focus().toggleHeading({ level: 6 }).run(),
+    isActive: (editor) => editor.isActive("heading", { level: 6 }),
+    group: "headings",
+  },
+  // Image group (conditionally include based on hasImageHandlers)
+  ...(hasImageHandlers
+    ? [
+        {
+          id: "image",
+          title: translations.media.addImage,
+          icon: TiptapMenuAddImage,
+          onClick: () => {
+            // Handled via dialog in CommandsList
+          },
+          dialogCommand: "image" as const,
+          group: "media",
+        },
+      ]
+    : []),
+  {
+    id: "video",
+    title: translations.media.addVideo,
+    icon: TiptapMenuVideo,
+    onClick: () => {
+      // Handled via dialog in CommandsList
+    },
+    dialogCommand: "video",
+    group: "media",
+  },
+  {
+    id: "link",
+    title: translations.media.addLink,
+    icon: TiptapMenuLink,
+    onClick: () => {
+      // Handled via dialog in CommandsList
+    },
+    dialogCommand: "link",
+    group: "media",
+  },
+  {
+    id: "katex",
+    title: translations.media.addKatex,
+    icon: TiptapMenuMath,
+    onClick: () => {
+      // Handled via dialog in CommandsList
+    },
+    dialogCommand: "katex",
+    group: "media",
+  },
+  // Lists group
+  {
+    id: "bullet-list",
+    title: translations.lists.bulletList,
+    icon: TiptapMenuBulletList,
+    onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor.isActive("bulletList"),
+    group: "lists",
+  },
+  {
+    id: "ordered-list",
+    title: translations.lists.orderedList,
+    icon: TiptapMenuOrderedList,
+    onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor.isActive("orderedList"),
+    group: "lists",
+  },
+  {
+    id: "details",
+    title: translations.lists.details,
+    icon: TiptapMenuDetails,
+    onClick: (editor) => editor.chain().focus().setDetails().run(),
+    isActive: (editor) => editor.isActive("details"),
+    isDisabled: (editor) => !editor.can().setDetails(),
+    group: "lists",
+  },
+  // Callouts group
+  {
+    id: "callout-success",
+    title: translations.blocks.callout,
+    icon: TiptapMenuCalloutSuccess,
+    onClick: (editor) => {
+      editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: "callout",
+          attrs: { type: "", bgColor: "#F7F7F8" },
+          content: [
+            {
+              type: "paragraph",
+              content: [
+                {
+                  type: "text",
+                  text: " ",
+                  marks: [{ type: "textStyle", attrs: { color: "" } }],
+                },
+              ],
+            },
+          ],
+        })
+        .run();
+    },
+    group: "callouts",
+  },
+
+  // Blocks group
+  {
+    id: "blockquote",
+    title: translations.blocks.blockquote,
+    icon: TiptapMenuBlockquote,
+    onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
+    isActive: (editor) => editor.isActive("blockQuote"),
+    group: "blocks",
+  },
+  {
+    id: "custom-quote",
+    title: translations.blocks.customQuote,
+    icon: TiptapMenuCustomQuote,
+    onClick: (editor) =>
+      editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: "customQuote",
+          content: [
+            {
+              type: "customQuoteText",
+              attrs: { "data-placeholder": translations.customQuote.textPlaceholder },
+              content: [],
+            },
+            {
+              type: "customQuoteAuthor",
+              attrs: { "data-placeholder": translations.customQuote.authorPlaceholder },
+              content: [],
+            },
+            {
+              type: "customQuoteSign",
+              attrs: { "data-placeholder": translations.customQuote.signPlaceholder },
+              content: [],
+            },
+          ],
+        })
+        .run(),
+    isActive: (editor) => editor.isActive("customQuote"),
+    group: "blocks",
+  },
+  {
+    id: "code-block",
+    title: translations.blocks.codeBlock,
+    icon: TiptapMenuCodeBlock,
+    onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+    isActive: (editor) => editor.isActive("codeBlock"),
+    group: "blocks",
+  },
+  {
+    id: "horizontal-rule",
+    title: translations.blocks.horizontalRule,
+    icon: TiptapMenuHorizontalRule,
+    onClick: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    isActive: (editor) => editor.isActive("horizontalRule"),
+    group: "blocks",
+  },
+  {
+    id: "myth-reality",
+    title: translations.blocks.mythReality,
+    icon: TiptapMenuMythReality,
+    onClick: (editor) =>
+      editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: "mythReality",
+          content: [
+            {
+              type: "mythRealityBlock",
+              content: [
+                {
+                  type: "paragraph",
+                  attrs: { class: "myth-reality-block-title" },
+                  content: [{ type: "text", text: translations.mythReality.myth }],
+                },
+                {
+                  type: "paragraph",
+                  attrs: { class: "myth-reality-block--myth" },
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: "mythRealityBlock",
+              content: [
+                {
+                  type: "paragraph",
+                  attrs: { class: "myth-reality-block-title" },
+                  content: [{ type: "text", text: translations.mythReality.reality }],
+                },
+                {
+                  type: "paragraph",
+                  attrs: { class: "myth-reality-block--reality" },
+                  content: [],
+                },
+              ],
+            },
+          ],
+        })
+        .run(),
+    group: "blocks",
+  },
+  {
+    id: "prompt",
+    title: translations.blocks.prompt,
+    icon: TiptapMenuPrompt,
+    onClick: (editor) =>
+      editor
+        .chain()
+        .focus()
+        .insertContent({
+          type: "prompt",
+          content: [
+            {
+              type: "promptHeader",
+              content: [],
+            },
+            {
+              type: "promptContent",
+              content: [],
+            },
+          ],
+        })
+        .run(),
+    group: "blocks",
+  },
+  // Text formatting group
+  {
+    id: "superscript",
+    title: translations.textFormatting.superscript,
+    icon: TiptapMenuSuperscript,
+    onClick: (editor) => editor.chain().focus().toggleSuperscript().run(),
+    isActive: (editor) => editor.isActive("superscript"),
+    group: "text-formatting",
+  },
+  {
+    id: "subscript",
+    title: translations.textFormatting.subscript,
+    icon: TiptapMenuSubscript,
+    onClick: (editor) => editor.chain().focus().toggleSubscript().run(),
+    isActive: (editor) => editor.isActive("subscript"),
+    group: "text-formatting",
+  },
+  // Table group
+  {
+    id: "table",
+    title: translations.table.table,
+    icon: TiptapMenuTable,
+    onClick: (editor) =>
+      editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+    isActive: (editor) => editor.isActive("table"),
+    group: "table",
+  },
+];
+
+export const filterCommandItems = (items: CommandMenuItem[], query: string): CommandMenuItem[] => {
+  if (!query.trim()) return items;
+
+  const normalizedQuery = query.toLowerCase().replace(/\s+/g, "");
+
+  return items.filter((item) => {
+    const normalizedTitle = item.title.toLowerCase().replace(/\s+/g, "");
+    return normalizedTitle.includes(normalizedQuery);
+  });
+};

package/src/editor/commands/suggestion.tsx

@@ -0,0 +1,146 @@
+import { computePosition, flip, shift } from "@floating-ui/dom";
+import { posToDOMRect } from "@tiptap/core";
+import { ReactRenderer } from "@tiptap/react";
+import { SuggestionKeyDownProps, SuggestionProps } from "@tiptap/suggestion";
+
+import { getCommandItems, filterCommandItems, type CommandMenuItem } from "./items";
+import type { TiptapTranslations } from "../../utils/get-translations";
+import { type CommandItem, CommandsList } from "../controls/commands-list";
+
+let component: ReactRenderer | null = null;
+
+const closeMenu = () => {
+  if (component) {
+    component.destroy();
+    component.element?.remove();
+    component = null;
+    document.documentElement.classList.remove("command-menu-open");
+  }
+};
+
+const mapCommandMenuItemToCommandItem = (item: CommandMenuItem): CommandItem => {
+  const IconComponent = item.icon;
+  return {
+    title: item.title,
+    icon: <IconComponent />,
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).run();
+      item.onClick(editor);
+      closeMenu();
+    },
+    dialogCommand: item.dialogCommand,
+  };
+};
+
+export const createSuggestions = (translations: TiptapTranslations, hasImageHandlers: boolean) => ({
+  items: ({ query }: { query: string }): CommandItem[] => {
+    const allItems = getCommandItems(translations, hasImageHandlers);
+    const filtered = filterCommandItems(allItems, query);
+    return filtered.map(mapCommandMenuItemToCommandItem);
+  },
+
+  render: () => {
+    return {
+      onStart: async (props: SuggestionProps & { clientRect?: DOMRect }) => {
+        component = new ReactRenderer(CommandsList, {
+          props,
+          editor: props.editor,
+        });
+
+        if (!component.element || !props.clientRect) {
+          return;
+        }
+
+        component.element.style.position = "absolute";
+        document.body.appendChild(component.element);
+
+        const virtualElement = {
+          getBoundingClientRect: () =>
+            posToDOMRect(
+              props.editor.view,
+              props.editor.state.selection.from,
+              props.editor.state.selection.to
+            ),
+        };
+
+        const floatingElement = component.element;
+
+        try {
+          const { x, y, strategy } = await computePosition(virtualElement, floatingElement, {
+            strategy: "absolute",
+            placement: "bottom-start",
+            middleware: [shift({ padding: 8 }), flip()],
+          });
+
+          floatingElement.style.position = strategy;
+          floatingElement.style.left = `${x}px`;
+          floatingElement.style.top = `${y}px`;
+        } catch (error) {
+          console.error("Error positioning command menu:", error);
+        }
+      },
+
+      onUpdate: (props: SuggestionProps & { clientRect?: DOMRect }) => {
+        if (!component) return;
+
+        component.updateProps(props);
+
+        if (!props.clientRect || !component.element) {
+          return;
+        }
+
+        // Reposition on update
+        const virtualElement = {
+          getBoundingClientRect: () =>
+            posToDOMRect(
+              props.editor.view,
+              props.editor.state.selection.from,
+              props.editor.state.selection.to
+            ),
+        };
+
+        const floatingElement = component.element;
+
+        computePosition(virtualElement, floatingElement, {
+          strategy: "absolute",
+          placement: "bottom-start",
+          middleware: [shift({ padding: 8 }), flip()],
+        }).then(({ x, y, strategy }) => {
+          if (!floatingElement) return;
+          floatingElement.style.position = strategy;
+          floatingElement.style.left = `${x}px`;
+          floatingElement.style.top = `${y}px`;
+        });
+      },
+
+      onKeyDown: (props: SuggestionKeyDownProps) => {
+        if (props.event.key === "Escape") {
+          closeMenu();
+          return true;
+        }
+
+        if (
+          component?.ref &&
+          typeof (component.ref as Record<string, unknown>).onKeyDown === "function"
+        ) {
+          return (
+            (component.ref as Record<string, unknown>).onKeyDown as (
+              props: SuggestionKeyDownProps
+            ) => boolean
+          )(props);
+        }
+
+        return false;
+      },
+
+      onExit: (props: SuggestionProps) => {
+        // HACK to prevent closing on hovering over callout node
+        if (props.items.length > 0) {
+          return;
+        }
+
+        closeMenu();
+      },
+    };
+  },
+});

package/src/editor/components/button/button.css

@@ -0,0 +1,56 @@
+/* ═══════════════════════════════════════════════════════════ */
+/* BUTTON COMPONENT */
+/* ═══════════════════════════════════════════════════════════ */
+
+.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;
+}
+
+/* Primary variant */
+.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);
+}
+
+/* Secondary variant */
+.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);
+}
+
+/* Loading state */
+.button-loading {
+  opacity: 0.7;
+  pointer-events: none;
+}

package/src/editor/components/button/button.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+  isLoading?: boolean;
+  children: ReactNode;
+}
+
+const variantMap = {
+  primary: 'button-primary',
+  secondary: 'button-secondary',
+};
+
+export const Button = ({
+  variant = 'primary',
+  isLoading = false,
+  children,
+  disabled,
+  className,
+  ...props
+}: ButtonProps) => {
+  const variantClass = variantMap[variant];
+  const loadingClass = isLoading ? 'button-loading' : '';
+
+  return (
+    <button
+      className={`button ${variantClass} ${loadingClass} ${className || ''}`}
+      disabled={disabled || isLoading}
+      {...props}>
+      {children}
+    </button>
+  );
+};

package/src/editor/components/button/index.ts

@@ -0,0 +1 @@
+export { Button } from './button';