@cyberyozh/text-editor 0.1.1

package/src/icons/menu/index.ts

@@ -0,0 +1,49 @@
+export { default as AddImage } from './AddImage';
+export { default as AlignCenter } from './AlignCenter';
+export { default as AlignLeft } from './AlignLeft';
+export { default as AlignRight } from './AlignRight';
+export { default as ArrowDown } from './ArrowDown';
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowRight } from './ArrowRight';
+export { default as ArrowUp } from './ArrowUp';
+export { default as Blockquote } from './Blockquote';
+export { default as Bold } from './Bold';
+export { default as BulletList } from './BulletList';
+export { default as CalloutError } from './CalloutError';
+export { default as CalloutInfo } from './CalloutInfo';
+export { default as CalloutSuccess } from './CalloutSuccess';
+export { default as CalloutWarning } from './CalloutWarning';
+export { default as ClearFormatting } from './ClearFormatting';
+export { default as CodeBlock } from './CodeBlock';
+export { default as Copyable } from './Copyable';
+export { default as CustomQuote } from './CustomQuote';
+export { default as DeleteColumn } from './DeleteColumn';
+export { default as DeleteRow } from './DeleteRow';
+export { default as Details } from './Details';
+export { default as H2 } from './H2';
+export { default as H3 } from './H3';
+export { default as H4 } from './H4';
+export { default as H5 } from './H5';
+export { default as H6 } from './H6';
+export { default as Highlight } from './Highlight';
+export { default as HorizontalRule } from './HorizontalRule';
+export { default as Italic } from './Italic';
+export { default as LinkOff } from './LinkOff';
+export { default as Link } from './Link';
+export { default as Math } from './Math';
+export { default as MergeCells } from './MergeCells';
+export { default as MythReality } from './MythReality';
+export { default as OrderedList } from './OrderedList';
+export { default as Prompt } from './Prompt';
+export { default as Redo } from './Redo';
+export { default as SplitCells } from './SplitCells';
+export { default as Strikethrough } from './Strikethrough';
+export { default as Subscript } from './Subscript';
+export { default as Superscript } from './Superscript';
+export { default as TableColumnHeading } from './TableColumnHeading';
+export { default as TableRowHeading } from './TableRowHeading';
+export { default as Table } from './Table';
+export { default as TextColor } from './TextColor';
+export { default as Underline } from './Underline';
+export { default as Undo } from './Undo';
+export { default as Video } from './Video';

package/src/render/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Render entry point for @cyberyozh/tiptap
+ *
+ * Use this to render Tiptap JSON content as React elements (typically in Next.js Server Components).
+ * This entry point has NO client-side dependencies and is safe for server-side execution.
+ *
+ * @example
+ * ```tsx
+ * // app/blog/[slug]/page.tsx (Server Component)
+ * import { TiptapRender } from '@cyberyozh/tiptap/render';
+ *
+ * export default function BlogPost({ article }) {
+ *   return (
+ *     <article>
+ *       <h1>{article.title}</h1>
+ *       <TiptapRender content={article.content} />
+ *     </article>
+ *   );
+ * }
+ */
+
+export { TiptapRender } from "./tiptap-render";

package/src/render/static-renderer-config.tsx

@@ -0,0 +1,206 @@
+/**
+ * Configuration for @tiptap/static-renderer for server-side rendering
+ * Provides React component mappings for custom extensions
+ *
+ * Node and mark mappings control how Tiptap JSON is rendered to React elements
+ * during server-side static rendering. These map directly to the extensions
+ * defined in extensions/ folder.
+ *
+ * Note: Node views (addNodeView) are NOT supported by static renderer.
+ * We provide custom React component mappings that replicate the NodeView output
+ * without using Tiptap's NodeViewWrapper/NodeViewContent APIs.
+ */
+
+import katex from "katex";
+import hljs from "highlight.js/lib/common";
+import type { CalloutType } from "@/extensions/base/callout";
+import {
+  Callout,
+  CopyableText,
+  CodeBlock,
+  CustomQuote,
+  CustomQuoteText,
+  CustomQuoteAuthor,
+  CustomQuoteSign,
+  PromptHeader,
+  PromptContent,
+  Video,
+  Figure,
+} from "@/extensions/views/components";
+
+export const getNodeMapping = (getImageById?: (fileId: string) => string | null) => ({
+  callout({ node, children }: any) {
+    return <Callout {...node.attrs}>{children}</Callout>;
+  },
+  codeBlock({ node, children }: any) {
+    const language = (node.attrs.language as string) || "";
+
+    let codeText = "";
+    if (Array.isArray(children)) {
+      codeText = children
+        .map((child: any) => {
+          if (child?.props?.node?.text) {
+            return child.props.node.text;
+          }
+          return "";
+        })
+        .join("");
+    }
+
+    let highlightedHtml = "";
+    try {
+      if (!language) {
+        highlightedHtml = hljs.highlightAuto(codeText).value;
+      } else {
+        highlightedHtml = hljs.highlight(codeText, { language }).value;
+      }
+    } catch (error) {
+      console.warn(`Failed to highlight code for language "${language}":`, error);
+      highlightedHtml = codeText
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    }
+
+    return (
+      <CodeBlock
+        language={language}
+        isEditable={false}
+      >
+        <code dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
+      </CodeBlock>
+    );
+  },
+  customQuote({ children }: any) {
+    return <CustomQuote>{children}</CustomQuote>;
+  },
+  customQuoteText({ children }: any) {
+    return <CustomQuoteText>{children}</CustomQuoteText>;
+  },
+  customQuoteAuthor({ children }: any) {
+    return <CustomQuoteAuthor>{children}</CustomQuoteAuthor>;
+  },
+  customQuoteSign({ children }: any) {
+    return <CustomQuoteSign>{children}</CustomQuoteSign>;
+  },
+  promptHeader({ children }: any) {
+    return <PromptHeader>{children}</PromptHeader>;
+  },
+  promptContent({ children }: any) {
+    return <PromptContent>{children}</PromptContent>;
+  },
+  video({ node }: any) {
+    return <Video src={node.attrs.src} />;
+  },
+  figure({ node }: any) {
+    return <Figure {...node.attrs} getImageById={getImageById} />;
+  },
+  image({ node }: any) {
+    return <Figure {...node.attrs} getImageById={getImageById} />;
+  },
+  inlineMath({ node }: any) {
+    const latex = node.attrs.latex || "";
+    let html = "";
+
+    try {
+      html = katex.renderToString(latex, {
+        throwOnError: false,
+        output: "html",
+      });
+    } catch (error) {
+      console.warn("KaTeX rendering error for inline math:", error);
+    }
+
+    return (
+      <span
+        className="react-renderer node-inlineMath"
+        dangerouslySetInnerHTML={{ __html: html || latex }}
+      />
+    );
+  },
+
+  // Block math (KaTeX) - from @tiptap/extension-mathematics
+  blockMath({ node }: any) {
+    const latex = node.attrs.latex || "";
+    let html = "";
+
+    try {
+      html = katex.renderToString(latex, {
+        throwOnError: false,
+        output: "html",
+        displayMode: true,
+      });
+    } catch (error) {
+      console.warn("KaTeX rendering error for block math:", error);
+    }
+
+    return (
+      <div className="react-renderer node-blockMath">
+        <div
+          className="tiptap-mathematics-render"
+          data-type="math"
+          data-mode="block"
+          dangerouslySetInnerHTML={{ __html: html || latex }}
+        />
+      </div>
+    );
+  },
+
+  inlineLatex({ node }: any) {
+    const latex = node.attrs.latex || "";
+    let html = "";
+
+    try {
+      html = katex.renderToString(latex, {
+        throwOnError: false,
+        output: "html",
+      });
+    } catch (error) {
+      console.warn("KaTeX rendering error for inline latex:", error);
+    }
+
+    return (
+      <span
+        className="react-renderer node-inlineLatex inline-latex"
+        dangerouslySetInnerHTML={{ __html: html || latex }}
+      />
+    );
+  },
+  /*
+    COMPATABILITY
+  */
+  calloutAlert({ node, children }: any) {
+    const type = (node.attrs.type as CalloutType) || "info";
+    return <Callout type={type}>{children}</Callout>;
+  },
+
+  calloutTip({ node, children }: any) {
+    const type = (node.attrs.type as CalloutType) || "info";
+    return <Callout type={type}>{children}</Callout>;
+  },
+  customQuoteV2({ children }: any) {
+    return <CustomQuote>{children}</CustomQuote>;
+  },
+  promptV2Header({ children }: any) {
+    return <PromptHeader>{children}</PromptHeader>;
+  },
+  promptV2Content({ children }: any) {
+    return <PromptContent>{children}</PromptContent>;
+  },
+});
+
+export const nodeMapping = getNodeMapping();
+
+/**
+ * Mark mappings for static renderer
+ *
+ * Standard marks (bold, italic, code, link, etc.) are handled automatically.
+ * Custom marks can be mapped here if needed for special rendering.
+ */
+export const markMapping = {
+  "copyable-text"({ children }: any) {
+    return <CopyableText>{children}</CopyableText>;
+  },
+};

package/src/render/tiptap-interactivity-provider.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect } from "react";
+import { copyToClipboard } from "../utils/copy-to-clipboard";
+
+/**
+ * Client component that initializes Tiptap interactivity
+ * Use this in your layout to enable interactive features for server-rendered content
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx (Server Component)
+ * import { CalloutInteractivityProvider } from '@cyberyozh/tiptap/render';
+ *
+ * export default function Layout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <CalloutInteractivityProvider />
+ *         {children}
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+export function TiptapInteractivityProvider() {
+  useEffect(() => {
+    function findCopyContent(button: HTMLElement): Element | null {
+      const parent = button.closest(":has([data-copy-content])");
+      return parent?.querySelector("[data-copy-content]") || null;
+    }
+
+    function showSuccessIcon(button: HTMLElement) {
+      const defaultIcon = button.querySelector('[data-copy-icon="default"]') as HTMLElement;
+      const successIcon = button.querySelector('[data-copy-icon="success"]') as HTMLElement;
+
+      if (defaultIcon && successIcon) {
+        defaultIcon.style.display = "none";
+        successIcon.style.display = "flex";
+
+        setTimeout(() => {
+          defaultIcon.style.display = "flex";
+          successIcon.style.display = "none";
+        }, 1500);
+      }
+    }
+
+    function handleCopy(e: MouseEvent) {
+      const target = e.target as HTMLElement;
+      const button = target.closest('[data-copy-action="copy"]') as HTMLElement;
+
+      if (button) {
+        const contentElement = findCopyContent(button);
+
+        if (contentElement) {
+          const textContent = contentElement.textContent?.trim() || "";
+
+          copyToClipboard(textContent)
+            .then(() => {
+              showSuccessIcon(button);
+            })
+            .catch((error) => {
+              console.error("❌ Failed to copy:", error);
+            });
+        }
+      }
+    }
+
+    document.addEventListener("click", handleCopy);
+
+    return () => {
+      document.removeEventListener("click", handleCopy);
+    };
+  }, []);
+
+  return null;
+}

package/src/render/tiptap-render.tsx

@@ -0,0 +1,102 @@
+import { renderToReactElement } from "@tiptap/static-renderer/pm/react";
+import { ReactNode } from "react";
+import { getRenderExtensions } from "../extensions/render";
+import { getNodeMapping, markMapping } from "./static-renderer-config";
+
+import "highlight.js/styles/github-dark.css";
+import "katex/dist/katex.min.css";
+
+type JSONContent = Record<string, any>;
+
+interface TiptapRenderProps {
+  /**
+   * Tiptap JSON content (parsed object or JSON string)
+   */
+  content: JSONContent | string;
+  /**
+   * Function to resolve image URLs from file IDs
+   * Used for static rendering of figure nodes with file references
+   */
+  getImageById?: (fileId: string) => string | null;
+}
+
+export function renderTiptapToReact(
+  content: JSONContent | string,
+  getImageById?: (fileId: string) => string | null
+): ReactNode {
+  let parsedContent: JSONContent;
+
+  try {
+    if (typeof content === "string") {
+      parsedContent = JSON.parse(content);
+    } else {
+      parsedContent = content;
+    }
+  } catch (error) {
+    console.warn("Failed to parse Tiptap content:", error);
+    parsedContent = { type: "doc", content: [{ type: "paragraph" }] };
+  }
+
+  const rendered = renderToReactElement({
+    extensions: getRenderExtensions(),
+    content: parsedContent,
+    options: {
+      nodeMapping: getNodeMapping(getImageById),
+      markMapping,
+    },
+  });
+
+  return (
+    <div
+      className="tiptap"
+      data-tiptap-render
+    >
+      {rendered}
+    </div>
+  );
+}
+
+/**
+ * Server component that renders Tiptap JSON content as React
+ *
+ * Designed for Next.js Server Components. Converts Tiptap JSON to rendered React elements
+ * without any client-side dependencies.
+ *
+ * @example
+ * ```tsx
+ * // app/blog/[slug]/page.tsx (Server Component)
+ * import { TiptapRender } from '@cyberyozh/tiptap/server';
+ *
+ * export default function BlogPost({ article }) {
+ *   return (
+ *     <article>
+ *       <h1>{article.title}</h1>
+ *       <TiptapRender content={article.content} lang="en" />
+ *     </article>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom image resolver
+ * import { TiptapRender } from '@cyberyozh/tiptap/server';
+ *
+ * const getImageById = (fileId: string) => `/api/images/${fileId}`;
+ *
+ * export default function BlogPost({ article }) {
+ *   return (
+ *     <article>
+ *       <TiptapRender
+ *         content={article.content}
+ *         lang="en"
+ *         getImageById={getImageById}
+ *       />
+ *     </article>
+ *   );
+ * }
+ * ```
+ */
+export function TiptapRender({ content, getImageById }: TiptapRenderProps) {
+  return renderTiptapToReact(content, getImageById);
+}

package/src/styles/components.css

@@ -0,0 +1,10 @@
+/* UI Components */
+@import "../editor/components/button/button.css";
+@import "../editor/components/input/input.css";
+@import "../editor/components/common-modal/common-modal.css";
+
+/* Dialog Styles */
+@import "../editor/dialogs/add-katex-dialog/add-katex-dialog.css";
+@import "../editor/dialogs/add-link-dialog/add-link-dialog.css";
+@import "../editor/dialogs/add-video-dialog/add-video-dialog.css";
+@import "../editor/dialogs/image-dialog/image-dialog.css";

package/src/styles/editor/base.css

@@ -0,0 +1,39 @@
+.tiptap-content-wrapper {
+  position: relative;
+  margin: 0 !important;
+}
+
+.tiptap {
+  padding: var(--tiptap-spacing);
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: var(--tiptap-radius);
+  font-size: var(--tiptap-font-size);
+  font-family: var(--tiptap-font-family);
+}
+
+.tiptap:focus {
+  border-color: var(--tiptap-color-primary-light);
+  outline: none;
+}
+
+.tiptap-content-wrapper.has-error .tiptap {
+  border-color: var(--tiptap-color-primary-error);
+}
+
+.tiptap-error-message {
+  margin: 8px 0 0 0 !important;
+  color: var(--tiptap-color-primary-error);
+  font-size: 14px;
+}
+
+.tiptap[data-tiptap-render],
+.tiptap[contenteditable="false"] {
+  padding: 0;
+  border: none;
+  outline: none;
+}
+
+.tiptap[data-tiptap-render] [data-placeholder].is-empty,
+.tiptap[contenteditable="false"] [data-placeholder].is-empty {
+  display: none;
+}

package/src/styles/editor/callout-menu.css

@@ -0,0 +1,81 @@
+.tiptap__drag-handle-color-menu {
+  display: flex;
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 196px;
+  margin-left: 8px;
+  padding: 8px;
+  gap: 4px;
+  border: 1px solid var(--tiptap-color-primary-light);
+  border-radius: 8px;
+  background: var(--tiptap-bg-surface-menu);
+}
+
+.tiptap__color-menu-title {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.tiptap__color-menu-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.tiptap__color-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  border: none;
+  border-radius: 8px;
+  border-color: transparent;
+  outline: none;
+  background: var(--tiptap-bg-surface-menu);
+  cursor: pointer;
+  transition: border 0.15s ease;
+}
+
+.tiptap__color-option:hover {
+  border: 1px solid var(--tiptap-color-primary-light);
+}
+
+.tiptap__color-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 29px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.tiptap__color-menu-custom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--tiptap-color-primary-light);
+}
+
+.tiptap__color-menu-custom-label {
+  font-size: 14px;
+  white-space: nowrap;
+}

package/src/styles/editor/controls.css

@@ -0,0 +1,57 @@
+.tiptap-controls-row {
+  display: flex;
+  gap: 12px;
+}
+
+.tiptap-controls-row:not(:last-child) {
+  margin-bottom: 12px;
+}
+
+.tiptap-controls-group {
+  display: flex;
+  width: fit-content;
+  padding: 6px;
+  gap: 12px;
+  border: 1px solid var(--tiptap-color-primary-subtle);
+  border-radius: 4px;
+}
+
+.bubble-menu .tiptap-controls-group {
+  padding: 4px;
+}
+
+.tiptap-control-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  color: var(--tiptap-color-primary);
+  cursor: pointer;
+}
+
+.tiptap-control-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bubble-menu .tiptap-control-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+.tiptap-control-button:disabled {
+  color: var(--tiptap-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.tiptap-control-button:hover {
+  outline: 1px solid var(--tiptap-color-primary-light);
+}
+
+.tiptap-control-button.is-active {
+  background-color: var(--tiptap-color-primary);
+  color: var(--tiptap-state-control-active-color);
+}