@cyberyozh/text-editor 0.1.1

package/src/extensions/editor/figure.ts

@@ -0,0 +1,20 @@
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { BaseFigure } from "../base";
+import { FigureView } from "../views/node-views";
+import { BaseLegacyFigure } from "../base/compatibility";
+
+export const Figure = BaseFigure.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(FigureView);
+  },
+});
+
+/**
+ * Legacy Figure extension for backward compatibility with old Tiptap content.
+ * @deprecated Use {@link Figure} extension instead.
+ */
+export const LegacyFigure = BaseLegacyFigure.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(FigureView);
+  },
+});

package/src/extensions/editor/get-editor-extensions.ts

@@ -0,0 +1,113 @@
+import { Mathematics } from "@tiptap/extension-mathematics";
+import { TableKit } from "@tiptap/extension-table";
+
+import { Callout, LegacyBookAlert, LegacyBookTip } from "./callout";
+import { CodeBlock } from "./code-block";
+import {
+  CustomQuote,
+  CustomQuoteText,
+  CustomQuoteAuthor,
+  CustomQuoteSign,
+  LegacySEQuote,
+} from "./custom-quote";
+import { Video, LegacyYouTube } from "./video";
+import { Commands } from "./commands";
+import { getSharedExtensions } from "@/utils/get-shared-extensions";
+import { CopyableText } from "./copyable-text";
+import { BasePrompt } from "../base";
+import { LegacyPromptSEContent, LegacyPromptSEHeader, PromptContent, PromptHeader } from "./prompt";
+import { BaseLegacyPromptSE, BaseLegacyCustomBlockquote } from "../base/compatibility";
+import { Figure, LegacyFigure } from "./figure";
+
+import type { TiptapTranslations } from "@/utils/get-translations";
+import { CharacterCount, Placeholder } from "@tiptap/extensions";
+
+interface GetExtensionsOptions {
+  translations: TiptapTranslations;
+  suggestion?: any;
+  isEditable?: boolean;
+  getImageById?: (fileId: string) => string | null;
+  onKatexClick?: (latex: string, pos?: number) => void;
+  onFigureClick?: (attrs: any, pos: number) => void;
+}
+
+/**
+ * Get all Tiptap extensions for Editor instance
+ *
+ * This extensions can be used for static render (server-side)
+ */
+export function getEditorExtensions(options: GetExtensionsOptions) {
+  const {
+    suggestion,
+    translations,
+    isEditable = false,
+    getImageById,
+    onKatexClick,
+    onFigureClick,
+  } = options;
+  const sharedExtensions = getSharedExtensions();
+
+  return [
+    ...sharedExtensions,
+    Callout,
+    CopyableText,
+    CodeBlock,
+    CustomQuote,
+    CustomQuoteText,
+    CustomQuoteAuthor,
+    CustomQuoteSign,
+    BasePrompt,
+    PromptHeader,
+    PromptContent,
+    Video,
+
+    // Configure with optional getImageById for URL resolution and onFigureClick callback
+    Figure.configure({ getImageById, onFigureClick }),
+    Mathematics.configure({
+      katexOptions: {
+        throwOnError: false,
+      },
+      inlineOptions: {
+        onClick: (node, pos) => {
+          onKatexClick?.(node.attrs.latex, pos);
+        },
+      },
+    }),
+    Placeholder.configure({
+      includeChildren: true,
+      placeholder: ({ node }) => {
+        if (!translations) return "";
+
+        if (node.type.name === "detailsSummary") {
+          return translations.editor?.detailsSummaryPlaceholder || "";
+        }
+
+        if (node.type.name === "tableCell") {
+          return "";
+        }
+
+        return translations.editor?.commandMenuPlaceholder || "";
+      },
+    }),
+    TableKit.configure({
+      table: { resizable: isEditable },
+    }),
+    Commands.configure({
+      suggestion,
+    }),
+    CharacterCount,
+
+    // ========================================================================
+    // Legacy Extensions (Deprecated - for backward compatibility only)
+    // ========================================================================
+    LegacyBookAlert,
+    LegacyBookTip,
+    LegacySEQuote,
+    BaseLegacyPromptSE,
+    LegacyPromptSEHeader,
+    LegacyPromptSEContent,
+    BaseLegacyCustomBlockquote,
+    LegacyYouTube,
+    LegacyFigure.configure({ getImageById, onFigureClick }),
+  ];
+}

package/src/extensions/editor/index.ts

@@ -0,0 +1,25 @@
+// export { Callout, BookAlert, BookTip } from "./callout";
+// export { CodeBlock } from "./code-block";
+// export { Commands } from "./commands";
+// export { CopyableText } from "./copyable-text";
+// export {
+//   CustomQuote,
+//   CustomQuoteText,
+//   CustomQuoteAuthor,
+//   CustomQuoteSign,
+//   CustomBlockquote,
+//   CustomQuoteSE,
+// } from "./custom-quote";
+// export { Figure, LegacyFigure, type FigureAttrs } from "./figure";
+// export { InlineLatexSE } from "./inline-latex";
+// export {
+//   Prompt,
+//   PromptHeader,
+//   PromptContent,
+//   PromptSE,
+//   PromptSEHeader,
+//   PromptSEContent,
+// } from "./prompt";
+// export { Video, YouTube } from "./video";
+
+export { getEditorExtensions } from "./get-editor-extensions";

package/src/extensions/editor/prompt.ts

@@ -0,0 +1,43 @@
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+import { PromptHeaderView, PromptContentView } from "../views/node-views";
+import { BasePromptContent, BasePromptHeader } from "../base";
+import { BaseLegacyPromptSEContent, BaseLegacyPromptSEHeader } from "../base/compatibility";
+
+export const PromptHeader = BasePromptHeader.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(PromptHeaderView);
+  },
+});
+
+export const PromptContent = BasePromptContent.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(PromptContentView);
+  },
+});
+
+// ============================================================================
+// Legacy Prompt V2 Compatibility Extensions
+// ============================================================================
+
+/**
+ * Legacy PromptV2Header extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use {@link PromptHeader} instead.
+ * This extension is kept only for rendering old content that uses the `promptV2Header` node type.
+ */
+export const LegacyPromptSEHeader = BaseLegacyPromptSEHeader.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(PromptHeaderView);
+  },
+});
+
+/**
+ * Legacy PromptV2Content extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use {@link PromptContent} instead.
+ * This extension is kept only for rendering old content that uses the `promptV2Content` node type.
+ */
+export const LegacyPromptSEContent = BaseLegacyPromptSEContent.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(PromptContentView);
+  },
+});

package/src/extensions/editor/video.ts

@@ -0,0 +1,23 @@
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+import { BaseVideo } from "../base/video";
+import { VideoView } from "../views/node-views";
+import { BaseLegacyYouTube } from "../base/compatibility";
+
+export const Video = BaseVideo.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(VideoView);
+  },
+});
+
+/**
+ * Legacy YouTube extension for backward compatibility with old Tiptap content.
+ * @deprecated Use {@link Video} extension instead.
+ * This extension is kept only for rendering old content that uses the `youtube` node type.
+ * Renders using the same VideoView component.
+ */
+export const LegacyYouTube = BaseLegacyYouTube.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(VideoView);
+  },
+});

package/src/extensions/render/get-render-extensions.ts

@@ -0,0 +1,74 @@
+import { Mathematics } from "@tiptap/extension-mathematics";
+import { TableKit } from "@tiptap/extension-table";
+
+import {
+  BasePrompt,
+  BasePromptContent,
+  BasePromptHeader,
+  BaseCallout,
+  BaseCodeBlock,
+  CopyableText,
+  BaseCustomQuote,
+  BaseCustomQuoteAuthor,
+  BaseCustomQuoteSign,
+  BaseCustomQuoteText,
+  BaseVideo,
+  BaseFigure,
+} from "../base";
+import { getSharedExtensions } from "@/utils/get-shared-extensions";
+import {
+  BaseLegacyCustomBlockquote,
+  BaseLegacyPromptSE,
+  BaseLegacyPromptSEContent,
+  BaseLegacyPromptSEHeader,
+  BaseLegacyBookAlert,
+  BaseLegacyBookTip,
+  BaseLegacySEQuote,
+  BaseLegacyYouTube,
+  BaseLegacyFigure,
+} from "../base/compatibility";
+
+export function getRenderExtensions() {
+  const sharedExtensions = getSharedExtensions();
+
+  return [
+    ...sharedExtensions,
+    CopyableText,
+    BaseCallout,
+    BaseCodeBlock,
+    BaseCustomQuote,
+    BaseCustomQuoteText,
+    BaseCustomQuoteAuthor,
+    BaseCustomQuoteSign,
+    BasePrompt,
+    BasePromptHeader,
+    BasePromptContent,
+    BaseVideo,
+    BaseFigure,
+
+    // Need to update
+    TableKit.configure({
+      table: { resizable: false },
+    }),
+
+    Mathematics.configure({
+      katexOptions: {
+        throwOnError: false,
+      },
+    }),
+
+    // ========================================================================
+    // Legacy Extensions (Deprecated - for backward compatibility only)
+    // ========================================================================
+    BaseLegacyBookAlert,
+    BaseLegacyBookTip,
+    BaseLegacySEQuote,
+    BaseLegacyPromptSE,
+    BaseLegacyPromptSEHeader,
+    BaseLegacyPromptSEContent,
+    BaseLegacyCustomBlockquote,
+    BaseLegacyYouTube,
+    BaseLegacyFigure,
+    // Update
+  ];
+}

package/src/extensions/render/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Server/Render extensions - extensions configured for server-side static rendering
+ * Used with @tiptap/static-renderer for parsing and rendering Tiptap JSON
+ */
+
+export { getRenderExtensions } from "./get-render-extensions";

package/src/extensions/views/components/callout.tsx

@@ -0,0 +1,70 @@
+import type { CalloutType } from "../../base";
+import {
+  TiptapCalloutError,
+  TiptapCalloutInfo,
+  TiptapCalloutSuccess,
+  TiptapCalloutWarning,
+} from "../../../icons/color";
+import { ReactNode } from "react";
+import { calloutIconComponents } from "../../../utils/custom-emoji";
+
+const calloutIcons: Record<CalloutType, React.ReactNode> = {
+  info: <TiptapCalloutInfo />,
+  warning: <TiptapCalloutWarning />,
+  success: <TiptapCalloutSuccess />,
+  error: <TiptapCalloutError />,
+};
+
+const legacyTypeMap: Record<string, CalloutType> = {
+  question: "info",
+  idea: "warning",
+  info: "success",
+  error: "error",
+};
+
+interface Props {
+  type: CalloutType;
+  bgColor?: string | null;
+  emoji?: string | null;
+  children: ReactNode;
+  calloutType?: CalloutType;
+  iconWrapper?: (icon: ReactNode) => ReactNode;
+}
+
+export const Callout = ({ type, bgColor, emoji, children, iconWrapper, calloutType }: Props) => {
+  const isLegacySECallout = !!calloutType;
+  const finalType = isLegacySECallout ? legacyTypeMap[calloutType] : type;
+
+  const hasCustomColor = !!bgColor;
+  const className = hasCustomColor ? "callout-node" : `callout-node callout-${finalType}`;
+  const style = hasCustomColor ? { backgroundColor: bgColor } : undefined;
+
+  let icon: ReactNode;
+  if (emoji) {
+    if (emoji in calloutIconComponents) {
+      const IconComponent = calloutIconComponents[emoji as keyof typeof calloutIconComponents];
+      icon = <IconComponent />;
+    } else {
+      icon = emoji;
+    }
+  } else {
+    icon = calloutIcons[finalType];
+  }
+
+  const iconContent = iconWrapper ? iconWrapper(icon) : <div className="callout-icon">{icon}</div>;
+
+  return (
+    <div
+      className={className}
+      data-callout-type={hasCustomColor ? undefined : type}
+      data-bg-color={bgColor || undefined}
+      data-emoji={emoji || undefined}
+      style={style}
+    >
+      {iconContent}
+      <div className="callout-content-wrapper">
+        <div className="callout-content">{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/extensions/views/components/code-block.tsx

@@ -0,0 +1,73 @@
+import { ChangeEvent, ReactNode, useMemo } from "react";
+import html from "highlight.js/lib/languages/xml";
+import { common, createLowlight } from "lowlight";
+
+import type { TiptapTranslations } from "../../../utils/get-translations";
+import { CopyButton } from "./copy-button";
+
+interface CodeBlockProps {
+  language: string;
+  isEditable: boolean;
+  onLanguageChange?: (language: string) => void;
+  children: ReactNode;
+  translations?: TiptapTranslations;
+}
+
+export const CodeBlock = ({
+  language,
+  isEditable,
+  onLanguageChange,
+  children,
+  translations,
+}: CodeBlockProps) => {
+  const languagesList = useMemo(() => {
+    const lowlight = createLowlight(common);
+    lowlight.register("html", html);
+    const list = lowlight.listLanguages();
+    return list.sort();
+  }, []);
+
+  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    onLanguageChange?.(e.target.value);
+  };
+
+  return (
+    <div className="tiptap-code-block-wrapper">
+      <div className="tiptap-code-block-header">
+        {isEditable ? (
+          <select
+            className="tiptap-code-block-language-select"
+            value={language}
+            onChange={handleChange}
+          >
+            <option value="">{translations?.codeBlock.selectLanguage}</option>
+            {languagesList.map((lang) => (
+              <option
+                key={lang}
+                value={lang}
+              >
+                {lang}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <span className="tiptap-code-block-language-text">
+            {language || translations?.codeBlock.selectLanguage}
+          </span>
+        )}
+        <CopyButton
+          iconSize={20}
+          color="white"
+        />
+      </div>
+      <pre className="tiptap-code-block">
+        <code
+          className="tiptap-code-block-content"
+          data-copy-content
+        >
+          {children}
+        </code>
+      </pre>
+    </div>
+  );
+};

package/src/extensions/views/components/copy-button.tsx

@@ -0,0 +1,52 @@
+import { TiptapCopy, TiptapCheck } from "../../../icons";
+
+interface CopyButtonProps {
+  iconSize?: number;
+  color?: "white" | "black" | "prompt";
+}
+
+/**
+ * Reusable copy button component for server-rendered content
+ * Works with a client-side interactivity provider that:
+ * - Handles click events via data-copy-action attribute
+ * - Copies content from nearest element marked with data-copy-content
+ * - Shows TiptapCopy icon by default
+ * - Switches to TiptapCheck icon for 1500ms after successful copy
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <div data-copy-content>Text to copy</div>
+ *   <CopyButton iconSize={16} />
+ * </div>
+ * ```
+ */
+export const CopyButton = ({ iconSize = 16, color = "black" }: CopyButtonProps) => {
+  return (
+    <button
+      className={`copy-button copy-icon-${color}`}
+      data-copy-action="copy"
+      type="button"
+    >
+      <span
+        className="copy-icon"
+        data-copy-icon="default"
+      >
+        <TiptapCopy
+          width={iconSize}
+          height={iconSize}
+        />
+      </span>
+      <span
+        className="copy-icon-success"
+        data-copy-icon="success"
+        style={{ display: "none" }}
+      >
+        <TiptapCheck
+          width={iconSize}
+          height={iconSize}
+        />
+      </span>
+    </button>
+  );
+};

package/src/extensions/views/components/copyable-text.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { CopyButton } from "./copy-button";
+
+export const CopyableText = ({ children }: { children: ReactNode }) => {
+  return (
+    <span className="copyable">
+      <span data-copy-content>{children}</span>
+      <CopyButton iconSize={16} />
+    </span>
+  );
+};

package/src/extensions/views/components/custom-quote.tsx

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+import { TiptapQuote } from "../../../icons";
+
+interface CustomQuoteProps {
+  children: ReactNode;
+}
+
+export const CustomQuote = ({ children }: CustomQuoteProps) => (
+  <div data-custom-quote="">
+    <div className="custom-quote-divider" />
+    <div className="custom-quote-svg-wrapper">
+      <TiptapQuote />
+    </div>
+    {children}
+  </div>
+);
+
+interface CustomQuoteTextProps {
+  children: ReactNode;
+  isEmpty?: boolean;
+  placeholder?: string;
+}
+
+export const CustomQuoteText = ({ children, isEmpty, placeholder }: CustomQuoteTextProps) => (
+  <div
+    data-custom-quote-text
+    className={isEmpty ? "is-empty" : ""}
+    data-placeholder={placeholder}
+  >
+    {children}
+  </div>
+);
+
+interface CustomQuoteAuthorProps {
+  children: ReactNode;
+  isEmpty?: boolean;
+  placeholder?: string;
+}
+
+export const CustomQuoteAuthor = ({ children, isEmpty, placeholder }: CustomQuoteAuthorProps) => (
+  <div
+    data-custom-quote-author=""
+    className={isEmpty ? "is-empty" : ""}
+    data-placeholder={placeholder}
+  >
+    {children}
+  </div>
+);
+
+interface CustomQuoteSignProps {
+  children: ReactNode;
+  isEmpty?: boolean;
+  placeholder?: string;
+}
+
+export const CustomQuoteSign = ({ children, isEmpty, placeholder }: CustomQuoteSignProps) => (
+  <div
+    data-custom-quote-sign=""
+    className={isEmpty ? "is-empty" : ""}
+    data-placeholder={placeholder}
+  >
+    {children}
+  </div>
+);

package/src/extensions/views/components/figure.tsx

@@ -0,0 +1,63 @@
+import { ReactNode } from "react";
+
+import { TiptapEdit } from "../../../icons";
+import { resolveImageSrc } from "../../../utils/image-src-resolver";
+
+interface FigureProps {
+  src?: string;
+  alt?: string;
+  title?: string;
+  caption?: string;
+  width?: number | null;
+  height?: number | null;
+  isEditable?: boolean;
+  onEditClick?: () => void;
+  children?: ReactNode;
+  fileId?: string | null;
+  getImageById?: (fileId: string) => string | null;
+}
+
+export const Figure = ({
+  src,
+  alt,
+  title,
+  caption,
+  width,
+  height,
+  isEditable,
+  onEditClick,
+  children,
+  fileId,
+  getImageById,
+}: FigureProps) => {
+  const resolvedSrc = resolveImageSrc({ fileId, src }, { getImageById });
+
+  return (
+    <figure>
+      {resolvedSrc && (
+        <div className="figure-image-container">
+          <img
+            src={resolvedSrc}
+            alt={alt || ""}
+            title={title}
+            width={width || undefined}
+            height={height || undefined}
+          />
+          {isEditable && onEditClick && (
+            <button
+              type="button"
+              className="figure-edit-button"
+              onClick={onEditClick}
+              contentEditable={false}
+              aria-label="Редактировать изображение"
+            >
+              <TiptapEdit />
+            </button>
+          )}
+        </div>
+      )}
+      {caption && <figcaption>{caption}</figcaption>}
+      {children}
+    </figure>
+  );
+};

package/src/extensions/views/components/index.ts

@@ -0,0 +1,7 @@
+export { Callout } from "./callout";
+export { CodeBlock } from "./code-block";
+export { CopyableText } from "./copyable-text";
+export { CustomQuote, CustomQuoteText, CustomQuoteAuthor, CustomQuoteSign } from "./custom-quote";
+export { Figure } from "./figure";
+export { PromptHeader, PromptContent } from "./prompt";
+export { Video } from "./video";