@cyberyozh/text-editor 0.1.1

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

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { CopyButton } from "./copy-button";
+
+interface PromptHeaderProps {
+  children: ReactNode;
+  isEmpty?: boolean;
+  placeholder?: string;
+}
+
+export const PromptHeader = ({ children, isEmpty, placeholder }: PromptHeaderProps) => (
+  <div className="prompt-header-wrapper">
+    <div
+      className={isEmpty ? "is-empty" : ""}
+      data-placeholder={placeholder}
+    >
+      {children}
+    </div>
+    <span className="prompt-copy-icon-wrapper">
+      <CopyButton
+        iconSize={16}
+        color="prompt"
+      />
+    </span>
+  </div>
+);
+
+interface PromptContentProps {
+  children: ReactNode;
+  isEmpty?: boolean;
+  placeholder?: string;
+}
+
+export const PromptContent = ({ children, isEmpty, placeholder }: PromptContentProps) => (
+  <div className="prompt-content-wrapper">
+    <div
+      className={isEmpty ? "is-empty" : ""}
+      data-placeholder={placeholder}
+      data-copy-content
+    >
+      {children}
+    </div>
+  </div>
+);

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

@@ -0,0 +1,40 @@
+import { detectVideoHosting } from "@/utils/detect-video-hosting";
+import { ReactNode } from "react";
+
+interface VideoProps {
+  src: string;
+  children?: ReactNode;
+}
+
+export const Video = ({ src, children }: VideoProps) => {
+  const videoInfo = detectVideoHosting(src);
+
+  if (!videoInfo?.embedUrl) {
+    return (
+      <div className="video-node">
+        <div className="video-error">
+          <span>Unsupported or invalid video URL</span>
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="video-node"
+      data-video=""
+    >
+      <div className="video-player-wrapper">
+        <iframe
+          className="video-iframe"
+          src={videoInfo?.embedUrl}
+          title="Video Player"
+          allow="autoplay; encrypted-media"
+          allowFullScreen
+        />
+      </div>
+      {children}
+    </div>
+  );
+};

package/src/extensions/views/node-views/callout.tsx

@@ -0,0 +1,51 @@
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { useState } from "react";
+import type { CalloutType } from "../../base";
+import { Callout } from "../components";
+import { EmojiPickerComponent } from "../../../editor/controls/emoji-picker";
+
+export const CalloutView = (props: NodeViewProps) => {
+  const type = (props.node.attrs.type as CalloutType) || "info";
+  const bgColor = props.node.attrs.bgColor as string | null;
+  const emoji = props.node.attrs.emoji as string | null;
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+
+  const handleIconClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowEmojiPicker(true);
+  };
+
+  const handleEmojiSelect = (newEmoji: string) => {
+    props.updateAttributes({ emoji: newEmoji });
+    setShowEmojiPicker(false);
+  };
+
+  return (
+    <NodeViewWrapper>
+      <Callout
+        type={type}
+        bgColor={bgColor}
+        emoji={emoji}
+        iconWrapper={(icon) => (
+          <div className="callout-icon-wrapper">
+            <button
+              className="callout-icon-button"
+              onClick={handleIconClick}
+              type="button"
+            >
+              <div className="callout-icon">{icon}</div>
+            </button>
+            <EmojiPickerComponent
+              isOpen={showEmojiPicker}
+              onClose={() => setShowEmojiPicker(false)}
+              onEmojiSelect={handleEmojiSelect}
+            />
+          </div>
+        )}
+      >
+        <NodeViewContent as="div" />
+      </Callout>
+    </NodeViewWrapper>
+  );
+};

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+
+import { CodeBlock } from "../components/code-block";
+import { useTiptapTranslations } from "@/editor/context";
+
+export const CodeBlockView = (props: NodeViewProps) => {
+  const [selectedLanguage, setSelectedLanguage] = useState(props.node.attrs.language ?? "");
+  const translations = useTiptapTranslations();
+
+  const handleLanguageChange = (language: string) => {
+    props.updateAttributes({ language });
+    setSelectedLanguage(language);
+  };
+
+  return (
+    <NodeViewWrapper>
+      <CodeBlock
+        language={selectedLanguage}
+        isEditable={props.editor.isEditable}
+        onLanguageChange={handleLanguageChange}
+        translations={translations}
+      >
+        <NodeViewContent />
+      </CodeBlock>
+    </NodeViewWrapper>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { MarkViewContent } from "@tiptap/react";
+import { CopyableText } from "../components";
+
+export const CopyableTextView = () => {
+  return (
+    <CopyableText>
+      <MarkViewContent />
+    </CopyableText>
+  );
+};

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

@@ -0,0 +1,66 @@
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import {
+  CustomQuote,
+  CustomQuoteText,
+  CustomQuoteAuthor,
+  CustomQuoteSign,
+} from "../components/custom-quote";
+import { useTiptapTranslations } from "@/editor/context";
+
+export const CustomQuoteView = () => {
+  return (
+    <NodeViewWrapper>
+      <CustomQuote>
+        <NodeViewContent />
+      </CustomQuote>
+    </NodeViewWrapper>
+  );
+};
+
+export const CustomQuoteTextView = (props: NodeViewProps) => {
+  const isEmpty = !props.node.content.size;
+  const translations = useTiptapTranslations();
+
+  return (
+    <NodeViewWrapper>
+      <CustomQuoteText
+        isEmpty={isEmpty}
+        placeholder={translations.customQuote.textPlaceholder}
+      >
+        <NodeViewContent className={isEmpty ? "is-empty" : ""} />
+      </CustomQuoteText>
+    </NodeViewWrapper>
+  );
+};
+
+export const CustomQuoteAuthorView = (props: NodeViewProps) => {
+  const isEmpty = !props.node.content.size;
+  const translations = useTiptapTranslations();
+
+  return (
+    <NodeViewWrapper>
+      <CustomQuoteAuthor
+        isEmpty={isEmpty}
+        placeholder={translations.customQuote.authorPlaceholder}
+      >
+        <NodeViewContent className={isEmpty ? "is-empty" : ""} />
+      </CustomQuoteAuthor>
+    </NodeViewWrapper>
+  );
+};
+
+export const CustomQuoteSignView = (props: NodeViewProps) => {
+  const isEmpty = !props.node.content.size;
+  const translations = useTiptapTranslations();
+
+  return (
+    <NodeViewWrapper>
+      <CustomQuoteSign
+        isEmpty={isEmpty}
+        placeholder={translations.customQuote.signPlaceholder}
+      >
+        <NodeViewContent className={isEmpty ? "is-empty" : ""} />
+      </CustomQuoteSign>
+    </NodeViewWrapper>
+  );
+};

package/src/extensions/views/node-views/figure.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+
+import { FigureAttrs } from "../../../types";
+import { Figure } from "../components";
+
+export const FigureView = ({ node, getPos, editor }: NodeViewProps) => {
+  const { fileId, src, alt, title, caption, width, height } = node.attrs as FigureAttrs;
+
+  const imageExtension = editor.extensionManager.extensions.find((ext) => ext.name === "image");
+  const getImageById = imageExtension?.options.getImageById;
+  const onFigureClick = imageExtension?.options.onFigureClick;
+
+  const handleEditClick = () => {
+    onFigureClick?.(node.attrs as FigureAttrs, getPos());
+  };
+
+  return (
+    <NodeViewWrapper
+      className="figure-node-view"
+      data-drag-handle
+    >
+      <Figure
+        fileId={fileId}
+        src={src}
+        alt={alt}
+        title={title}
+        caption={caption}
+        width={width}
+        height={height}
+        isEditable={editor.isEditable}
+        onEditClick={handleEditClick}
+        getImageById={getImageById}
+      />
+    </NodeViewWrapper>
+  );
+};

package/src/extensions/views/node-views/index.ts

@@ -0,0 +1,7 @@
+export { CalloutView } from "./callout";
+export { CodeBlockView } from "./code-block";
+export { CopyableTextView } from "./copyable-text";
+export { CustomQuoteView, CustomQuoteTextView, CustomQuoteAuthorView, CustomQuoteSignView } from "./custom-quote";
+export { FigureView } from "./figure";
+export { PromptHeaderView, PromptContentView } from "./prompt";
+export { VideoView } from "./video";

package/src/extensions/views/node-views/prompt.tsx

@@ -0,0 +1,35 @@
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { PromptHeader, PromptContent } from "../components/prompt";
+import { useTiptapTranslations } from "@/editor/context";
+
+export const PromptHeaderView = (props: NodeViewProps) => {
+  const isEmpty = !props.node.content.size;
+  const translations = useTiptapTranslations();
+
+  return (
+    <NodeViewWrapper>
+      <PromptHeader
+        isEmpty={isEmpty}
+        placeholder={translations.prompt.headerPlaceholder}
+      >
+        <NodeViewContent className={isEmpty ? "is-empty" : ""} />
+      </PromptHeader>
+    </NodeViewWrapper>
+  );
+};
+
+export const PromptContentView = (props: NodeViewProps) => {
+  const isEmpty = !props.node.content.size;
+  const translations = useTiptapTranslations();
+
+  return (
+    <NodeViewWrapper>
+      <PromptContent
+        isEmpty={isEmpty}
+        placeholder={translations.prompt.contentPlaceholder}
+      >
+        <NodeViewContent className={isEmpty ? "is-empty" : ""} />
+      </PromptContent>
+    </NodeViewWrapper>
+  );
+};

package/src/extensions/views/node-views/video.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Video } from "../components";
+
+export const VideoView = (props: NodeViewProps) => {
+  const { src } = props.node.attrs;
+
+  return (
+    <NodeViewWrapper>
+      <Video src={src}>
+        <NodeViewContent
+          as="div"
+          className="video-content"
+        />
+      </Video>
+    </NodeViewWrapper>
+  );
+};

package/src/icons/Check.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+const SvgCheck = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgCheck;

package/src/icons/Copy.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from 'react';
+const SvgCopy = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <g fill="currentColor" fillRule="evenodd" clipPath="url(#copy_svg__a)" clipRule="evenodd">
+      <path d="M9.167 8.333a.833.833 0 0 0-.834.833v7.5c0 .46.373.834.833.834h7.5c.46 0 .834-.373.834-.834v-7.5a.833.833 0 0 0-.834-.833zm-2.5.833a2.5 2.5 0 0 1 2.5-2.5h7.5a2.5 2.5 0 0 1 2.5 2.5v7.5a2.5 2.5 0 0 1-2.5 2.5h-7.5a2.5 2.5 0 0 1-2.5-2.5z" />
+      <path d="M3.334 2.5a.833.833 0 0 0-.834.833v7.5a.833.833 0 0 0 .833.834h.834a.833.833 0 0 1 0 1.667h-.833a2.5 2.5 0 0 1-2.5-2.5v-7.5a2.5 2.5 0 0 1 2.5-2.5h7.5a2.5 2.5 0 0 1 2.5 2.5v.833a.833.833 0 1 1-1.667 0v-.833a.834.834 0 0 0-.833-.834z" />
+    </g>
+    <defs>
+      <clipPath id="copy_svg__a">
+        <path fill="currentColor" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgCopy;

package/src/icons/DragIcon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+const SvgDragIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <path
+      fill="currentColor"
+      d="M9.167 15c0 .917-.75 1.667-1.667 1.667S5.833 15.917 5.833 15c0-.916.75-1.666 1.667-1.666s1.667.75 1.667 1.666M7.5 8.334c-.917 0-1.667.75-1.667 1.666 0 .917.75 1.667 1.667 1.667s1.667-.75 1.667-1.667c0-.916-.75-1.666-1.667-1.666m0-5c-.917 0-1.667.75-1.667 1.666 0 .917.75 1.667 1.667 1.667S9.167 5.917 9.167 5 8.417 3.334 7.5 3.334m5 3.333c.917 0 1.667-.75 1.667-1.667s-.75-1.666-1.667-1.666-1.667.75-1.667 1.666c0 .917.75 1.667 1.667 1.667m0 1.667c-.917 0-1.667.75-1.667 1.666 0 .917.75 1.667 1.667 1.667s1.667-.75 1.667-1.667c0-.916-.75-1.666-1.667-1.666m0 5c-.917 0-1.667.75-1.667 1.666 0 .917.75 1.667 1.667 1.667s1.667-.75 1.667-1.667c0-.916-.75-1.666-1.667-1.666"
+    />
+  </svg>
+);
+export default SvgDragIcon;

package/src/icons/Edit.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+const SvgEdit = (props: SVGProps<SVGSVGElement>) => (
+  <svg fill="none" viewBox="0 0 18 18" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M11.745.91a.833.833 0 0 1 1.179 0l4.167 4.167a.833.833 0 0 1 0 1.179L6.257 17.089a.83.83 0 0 1-.589.244H1.501a.833.833 0 0 1-.833-.833v-4.167c0-.22.088-.433.244-.589zM2.335 12.68v2.988h2.988l10-10-2.988-2.988z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgEdit;

package/src/icons/Quote.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+const SvgQuote = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" {...props}>
+    <path
+      fill="currentColor"
+      d="M19.284 11.242c1.2-.504 1.703-1.937 1.161-3.098l-1.897-3.989c-.542-1.122-1.859-1.626-3.02-1.122-3.292 1.394-6.119 3.214-8.364 5.42-2.75 2.595-4.608 5.577-5.615 8.868C.542 20.65 0 25.18 0 30.95v11.888a2.33 2.33 0 0 0 2.323 2.323h15.218a2.33 2.33 0 0 0 2.323-2.323V27.62a2.33 2.33 0 0 0-2.323-2.323h-7.28c.078-3.912 1.007-7.048 2.71-9.41 1.395-1.897 3.486-3.446 6.313-4.646m27.337 0c1.2-.504 1.703-1.937 1.162-3.098l-1.898-3.95a2.315 2.315 0 0 0-3.02-1.122c-3.253 1.394-6.04 3.214-8.325 5.382-2.75 2.633-4.647 5.615-5.654 8.906q-1.51 4.879-1.51 13.591V42.84a2.33 2.33 0 0 0 2.324 2.323h15.217a2.33 2.33 0 0 0 2.324-2.323V27.62a2.33 2.33 0 0 0-2.324-2.323H37.6c.077-3.911 1.007-7.047 2.71-9.41 1.394-1.897 3.485-3.446 6.312-4.646"
+    />
+  </svg>
+);
+export default SvgQuote;

package/src/icons/X.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgX = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M18 6 6 18M6 6l12 12"
+    />
+  </svg>
+);
+export default SvgX;

package/src/icons/color/TiptapCalloutError.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+const SvgTiptapCalloutError = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <g clipPath="url(#tiptap-callout-error_svg__a)">
+      <path
+        fill="#E03757"
+        d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0"
+      />
+      <path
+        fill="#F04760"
+        d="M4.692 15.603c6.011 0 10.885-4.874 10.885-10.885a10.9 10.9 0 0 0-.525-3.35A9.95 9.95 0 0 0 10 0C4.477 0 0 4.477 0 10a9.95 9.95 0 0 0 1.394 5.094c1.066.338 2.179.51 3.298.509"
+      />
+      <path
+        fill="#fff"
+        d="M9.996 16.783a1.626 1.626 0 1 1 0-3.251 1.626 1.626 0 0 1 0 3.251m1.575-5.598c-.027.252-.14.486-.321.663a1.13 1.13 0 0 1-.674.315h-.008q-.239.027-.48.027a6 6 0 0 1-.575-.027h-.007a1.13 1.13 0 0 1-.674-.315 1.1 1.1 0 0 1-.321-.663c-.04-.366-.059-2.914-.059-3.481 0-.568.02-3.122.059-3.488.027-.252.14-.487.32-.665.183-.177.42-.289.675-.315h.007q.287-.029.576-.017.24-.012.479.017h.008c.254.027.492.14.674.319.18.177.294.412.321.664.04.366.059 2.92.059 3.488 0 .567-.02 3.113-.059 3.478"
+      />
+    </g>
+    <defs>
+      <clipPath id="tiptap-callout-error_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgTiptapCalloutError;

package/src/icons/color/TiptapCalloutInfo.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from 'react';
+const SvgTiptapCalloutInfo = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <path
+      fill="#FE9738"
+      d="m11.654 11.196 3.51-2.75.549-4.789-4.06-2.234-1.647 2.264a2.79 2.79 0 0 1 1.531 2.28 2.8 2.8 0 0 1-1.85 2.84 3.96 3.96 0 0 0-2.624 3.728v.72c0 .937.76 1.697 1.696 1.697h2.482zm-4.895-3.32H4.277c-.937 0-1.697-.76-1.697-1.697q0-.432.06-.86C3.084 2.135 5.954-.196 9.172.015h2.482L9.888 1.797m1.353 14.796H8.759c-.937 0-1.696.76-1.696 1.696v.014c0 .938.76 1.697 1.696 1.697h2.18"
+    />
+    <path
+      fill="#FFD15B"
+      d="M11.241 14.951c-.937 0-1.697-.76-1.697-1.697v-.72a3.955 3.955 0 0 1 2.625-3.727 2.8 2.8 0 0 0 1.85-2.84A2.79 2.79 0 0 0 11.432 3.4a2.8 2.8 0 0 0-2.976 2.78 1.697 1.697 0 0 1-3.394 0q0-.434.06-.86C5.566 2.133 8.435-.198 11.654.014c3.055.2 5.527 2.653 5.75 5.706a6.2 6.2 0 0 1-4.104 6.286.56.56 0 0 0-.362.529v.72c0 .936-.76 1.696-1.697 1.696m0 5.05c-.937 0-1.697-.76-1.697-1.698v-.014a1.697 1.697 0 0 1 3.394 0v.014c0 .937-.76 1.697-1.697 1.697"
+    />
+    <path
+      fill="#FFC344"
+      d="M6.622 5.32q-.06.427-.06.86c0 .667.386 1.245.947 1.521A1.697 1.697 0 0 1 5.062 6.18q0-.432.06-.86C5.566 2.134 8.436-.197 11.654.014q.173.012.343.033C9.273.382 7.012 2.521 6.622 5.32m7.047 3.486a3.96 3.96 0 0 0-2.625 3.729v.72c0 .667.386 1.245.947 1.521a1.696 1.696 0 0 1-2.447-1.522v-.72a3.955 3.955 0 0 1 2.625-3.728 2.8 2.8 0 0 0 1.85-2.839 2.79 2.79 0 0 0-2.022-2.47 2.786 2.786 0 0 1 3.522 2.47 2.8 2.8 0 0 1-1.85 2.84m-1.678 11.02a1.696 1.696 0 0 1-2.447-1.522v-.015a1.697 1.697 0 0 1 2.448-1.523 1.7 1.7 0 0 0-.948 1.523v.014c0 .668.386 1.246.947 1.522"
+    />
+  </svg>
+);
+export default SvgTiptapCalloutInfo;

package/src/icons/color/TiptapCalloutSuccess.tsx

@@ -0,0 +1,49 @@
+import type { SVGProps } from 'react';
+const SvgTiptapCalloutSuccess = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <g clipPath="url(#tiptap-callout-success_svg__a)">
+      <path
+        fill="#35495E"
+        d="M1.972 18.004.06 7.138a2.4 2.4 0 0 1-.035-.317 2.47 2.47 0 0 1 2.073-2.493l3.693-.652-.1 14.328z"
+      />
+      <path
+        fill="#2C3E50"
+        d="M16.186 17.528a.69.69 0 0 1-.548.517l-10.87 1.917a2.42 2.42 0 0 1-2.83-2.276 2.46 2.46 0 0 1 1.934-2.462l3.045.855h-.003l-2.742.487a1.037 1.037 0 0 0-.786 1.396 1.066 1.066 0 0 0 1.186.635l8.307-1.466z"
+      />
+      <path
+        fill="#F9EAB0"
+        d="m6.914 16.08-2.742.486a1.035 1.035 0 0 0-.786 1.396 1.066 1.066 0 0 0 1.186.635l8.307-1.466z"
+      />
+      <path
+        fill="#E64C3C"
+        d="M4.423 11.438 6.339.571a.695.695 0 0 1 .799-.559l10.785 1.902a2.47 2.47 0 0 1 2.074 2.495 3 3 0 0 1-.034.316l-1.917 10.867z"
+      />
+      <path
+        fill="#3F5C6C"
+        d="M15.668 3.612a.4.4 0 0 1-.06-.005l-7.81-1.378a.345.345 0 0 1 .12-.677l7.81 1.375a.345.345 0 0 1-.06.685M14.01 5.069a.3.3 0 0 1-.06-.005l-5.094-.897a.345.345 0 0 1 .12-.68l5.094.897a.345.345 0 0 1-.06.685"
+      />
+      <path
+        fill="#ECF0F1"
+        d="m14.727 6.608-7.131-1.26a.345.345 0 0 0-.4.28l-.6 3.395a.345.345 0 0 0 .28.4l7.13 1.26a.345.345 0 0 0 .4-.28l.6-3.396a.345.345 0 0 0-.28-.4"
+      />
+      <path
+        fill="#C03A2B"
+        d="M19.997 4.407a2 2 0 0 1-.035.317L18.045 15.59l-2.659-.81 1.542-8.738.365-2.063.373-2.11.258.045a2.47 2.47 0 0 1 2.073 2.493"
+      />
+      <path
+        fill="#802F34"
+        d="M16.007 12.78 5.22 10.88a.69.69 0 0 0-.238 1.358l10.865 1.914a1.038 1.038 0 0 1 .783 1.4 1.06 1.06 0 0 1-1.183.63L4.624 14.277a.69.69 0 0 0-.241 1.359l10.869 1.913a2.416 2.416 0 0 0 2.83-2.272 2.474 2.474 0 0 0-2.075-2.496"
+      />
+      <path
+        fill="#F9EAB0"
+        d="M16.63 15.552a1.06 1.06 0 0 1-1.182.63L4.624 14.277l.359-2.038 10.865 1.914a1.04 1.04 0 0 1 .783 1.4"
+      />
+    </g>
+    <defs>
+      <clipPath id="tiptap-callout-success_svg__a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgTiptapCalloutSuccess;

package/src/icons/color/TiptapCalloutWarning.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+const SvgTiptapCalloutWarning = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <path
+      fill="#FFF59D"
+      fillOpacity={0.6}
+      d="M1.667 9.167a8.333 8.333 0 1 0 16.666 0 8.333 8.333 0 0 0-16.666 0"
+    />
+    <path
+      fill="#FBC02D"
+      d="M15.417 9.167c0-3.209-2.75-5.75-6.042-5.375-2.5.291-4.5 2.291-4.75 4.791a5.27 5.27 0 0 0 1.917 4.709c.583.5.958 1.208.958 2v.125h5v-.042c0-.75.333-1.5.917-2 1.208-1 2-2.5 2-4.208"
+    />
+    <path
+      fill="#FFF59D"
+      d="m12.75 8.417-1.25-.834a.45.45 0 0 0-.458 0L10 8.25l-1-.667a.45.45 0 0 0-.458 0l-1.25.834c-.084.083-.167.166-.167.291s0 .25.083.334L8.792 11v4.417h.833v-4.584c0-.083-.042-.166-.083-.25L8.167 8.875l.625-.417 1 .667a.45.45 0 0 0 .458 0l1-.667.625.417-1.375 1.708a.6.6 0 0 0-.083.25v4.584h.833V11l1.583-1.958a.32.32 0 0 0 .084-.334c-.042-.125-.084-.25-.167-.291"
+    />
+    <path fill="#5C6BC0" d="M8.75 18.334a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0" />
+    <path
+      fill="#9FA8DA"
+      d="M10.833 18.75H9.167C8.25 18.75 7.5 18 7.5 17.083V15h5v2.083c0 .917-.75 1.667-1.667 1.667"
+    />
+    <path
+      fill="#5C6BC0"
+      d="m12.5 17.083-4.833.667c.125.291.375.583.666.75l3.917-.542q.25-.375.25-.875m-5-.958v.833l5-.708v-.834z"
+    />
+  </svg>
+);
+export default SvgTiptapCalloutWarning;

package/src/icons/color/index.ts

@@ -0,0 +1,4 @@
+export { default as TiptapCalloutError } from './TiptapCalloutError';
+export { default as TiptapCalloutInfo } from './TiptapCalloutInfo';
+export { default as TiptapCalloutSuccess } from './TiptapCalloutSuccess';
+export { default as TiptapCalloutWarning } from './TiptapCalloutWarning';

package/src/icons/index.ts

@@ -0,0 +1,60 @@
+// Root icons
+export { default as TiptapCheck } from './Check';
+export { default as TiptapCopy } from './Copy';
+export { default as TiptapDragIcon } from './DragIcon';
+export { default as TiptapEdit } from './Edit';
+export { default as TiptapQuote } from './Quote';
+export { default as TiptapX } from './X';
+
+// Menu icons - re-exported for convenience
+export {
+  AddImage as TiptapMenuAddImage,
+  AlignCenter as TiptapMenuAlignCenter,
+  AlignLeft as TiptapMenuAlignLeft,
+  AlignRight as TiptapMenuAlignRight,
+  ArrowDown as TiptapMenuArrowDown,
+  ArrowLeft as TiptapMenuArrowLeft,
+  ArrowRight as TiptapMenuArrowRight,
+  ArrowUp as TiptapMenuArrowUp,
+  Blockquote as TiptapMenuBlockquote,
+  Bold as TiptapMenuBold,
+  BulletList as TiptapMenuBulletList,
+  CalloutError as TiptapMenuCalloutError,
+  CalloutInfo as TiptapMenuCalloutInfo,
+  CalloutSuccess as TiptapMenuCalloutSuccess,
+  CalloutWarning as TiptapMenuCalloutWarning,
+  ClearFormatting as TiptapMenuClearFormatting,
+  CodeBlock as TiptapMenuCodeBlock,
+  Copyable as TiptapMenuCopyable,
+  CustomQuote as TiptapMenuCustomQuote,
+  DeleteColumn as TiptapMenuDeleteColumn,
+  DeleteRow as TiptapMenuDeleteRow,
+  Details as TiptapMenuDetails,
+  H2 as TiptapMenuH2,
+  H3 as TiptapMenuH3,
+  H4 as TiptapMenuH4,
+  H5 as TiptapMenuH5,
+  H6 as TiptapMenuH6,
+  Highlight as TiptapMenuHighlight,
+  HorizontalRule as TiptapMenuHorizontalRule,
+  Italic as TiptapMenuItalic,
+  Link as TiptapMenuLink,
+  LinkOff as TiptapMenuLinkOff,
+  Math as TiptapMenuMath,
+  MergeCells as TiptapMenuMergeCells,
+  MythReality as TiptapMenuMythReality,
+  OrderedList as TiptapMenuOrderedList,
+  Prompt as TiptapMenuPrompt,
+  Redo as TiptapMenuRedo,
+  SplitCells as TiptapMenuSplitCells,
+  Strikethrough as TiptapMenuStrikethrough,
+  Subscript as TiptapMenuSubscript,
+  Superscript as TiptapMenuSuperscript,
+  Table as TiptapMenuTable,
+  TableColumnHeading as TiptapMenuTableColumnHeading,
+  TableRowHeading as TiptapMenuTableRowHeading,
+  TextColor as TiptapMenuTextColor,
+  Underline as TiptapMenuUnderline,
+  Undo as TiptapMenuUndo,
+  Video as TiptapMenuVideo,
+} from './menu';

package/src/icons/menu/AddImage.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+const SvgAddImage = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86-3 3.87L9 13.14 6 17h12z"
+    />
+  </svg>
+);
+export default SvgAddImage;

package/src/icons/menu/AlignCenter.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+const SvgAlignCenter = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M4.667 10v1.333h6.666V10zM2 14h12v-1.333H2zm0-5.333h12V7.333H2zm2.667-4V6h6.666V4.667zM2 2v1.333h12V2z"
+    />
+  </svg>
+);
+export default SvgAlignCenter;

package/src/icons/menu/AlignLeft.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from 'react';
+const SvgAlignLeft = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M10 10H2v1.333h8zm0-5.333H2V6h8zm-8 4h12V7.333H2zM2 14h12v-1.333H2zM2 2v1.333h12V2z"
+    />
+  </svg>
+);
+export default SvgAlignLeft;