@cyberyozh/text-editor 0.1.1

package/src/editor/dialogs/add-link-dialog/add-link-dialog.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+
+import { CommonModal } from "../../components";
+import { useTiptapTranslations } from "../../context";
+
+interface AddLinkDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onLinkAdd: (title: string, url: string) => void;
+  initialTitle?: string;
+  initialUrl?: string;
+}
+
+export const AddLinkDialog = ({
+  open,
+  onClose,
+  onLinkAdd,
+  initialTitle = "",
+  initialUrl = "",
+}: AddLinkDialogProps) => {
+  const translations = useTiptapTranslations();
+  const [title, setTitle] = useState(initialTitle);
+  const [url, setUrl] = useState(initialUrl);
+  const [error, setError] = useState<string>("");
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setTitle(initialTitle);
+      setUrl(initialUrl);
+      setError("");
+      // Focus the first input after modal opens
+      setTimeout(() => {
+        titleInputRef.current?.focus();
+      }, 0);
+    }
+  }, [open, initialTitle, initialUrl]);
+
+  const validateUrl = (urlStr: string): boolean => {
+    if (!urlStr.trim()) {
+      setError(translations.link.emptyUrl);
+      return false;
+    }
+
+    // Check if URL has a protocol (mailto:, tel:, http:, https:, etc)
+    const hasProtocol =
+      urlStr.includes("://") || urlStr.startsWith("mailto:") || urlStr.startsWith("tel:");
+
+    // Only validate hostname for web URLs (http/https)
+    if (!hasProtocol || urlStr.startsWith("http")) {
+      try {
+        const urlWithProtocol = urlStr.startsWith("http") ? urlStr : `https://${urlStr}`;
+        const url = new URL(urlWithProtocol);
+
+        // Validate hostname has proper structure (contains . or is localhost)
+        const hostname = url.hostname;
+        if (!hostname.includes(".") && hostname !== "localhost") {
+          setError(translations.link.invalidUrl);
+          return false;
+        }
+
+        return true;
+      } catch {
+        setError(translations.link.invalidUrl);
+        return false;
+      }
+    }
+
+    // For non-web protocols (mailto, tel, etc), just validate basic format
+    return true;
+  };
+
+  const handleSubmit = () => {
+    setError("");
+
+    if (!title.trim()) {
+      setError(translations.link.titleError);
+      return;
+    }
+
+    if (!validateUrl(url)) {
+      return;
+    }
+
+    // Preserve protocols like mailto:, tel:, etc; only add https for plain URLs
+    const hasProtocol = url.includes("://") || url.startsWith("mailto:") || url.startsWith("tel:");
+    const finalUrl = hasProtocol ? url : `https://${url}`;
+    onLinkAdd(title, finalUrl);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setTitle(initialTitle);
+    setUrl(initialUrl);
+    setError("");
+    onClose();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <CommonModal
+      open={open}
+      handleClose={handleClose}
+    >
+      <p className="link-dialog-title">
+        {initialUrl ? translations.link.editLink : translations.link.addLink}
+      </p>
+      <hr className="link-dialog-divider" />
+
+      <div className="link-dialog-content">
+        <div className="link-dialog-form-group">
+          <label
+            htmlFor="link-title"
+            className="link-dialog-label"
+          >
+            {translations.link.title}
+          </label>
+          <input
+            ref={titleInputRef}
+            id="link-title"
+            type="text"
+            className="link-dialog-input"
+            placeholder={translations.link.titlePlaceholder}
+            value={title}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+
+        <div className="link-dialog-form-group">
+          <label
+            htmlFor="link-url"
+            className="link-dialog-label"
+          >
+            {translations.link.url}
+          </label>
+          <input
+            id="link-url"
+            type="text"
+            className="link-dialog-input"
+            placeholder={translations.link.urlPlaceholder}
+            value={url}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+
+        {error && <div className="link-dialog-error">{error}</div>}
+      </div>
+
+      <div className="link-dialog-actions">
+        <button
+          className="link-dialog-button-cancel"
+          onClick={handleClose}
+          type="button"
+        >
+          {translations.common.cancel}
+        </button>
+        <button
+          className="link-dialog-button-submit"
+          onClick={handleSubmit}
+          type="button"
+        >
+          {initialUrl ? translations.link.editLink : translations.link.addLink}
+        </button>
+      </div>
+    </CommonModal>
+  );
+};

package/src/editor/dialogs/add-link-dialog/index.ts

@@ -0,0 +1 @@
+export { AddLinkDialog } from './add-link-dialog';

package/src/editor/dialogs/add-video-dialog/add-video-dialog.css

@@ -0,0 +1,146 @@
+/* ═══════════════════════════════════════════════════════════ */
+/* ADD VIDEO DIALOG */
+/* ═══════════════════════════════════════════════════════════ */
+
+.video-dialog-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.video-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px solid var(--tiptap-color-border);
+}
+
+.video-dialog-content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+
+.video-dialog-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.video-dialog-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.video-dialog-input {
+  padding: 8px 12px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 150ms ease-in-out;
+}
+
+.video-dialog-input:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tiptap-color-primary-subtle);
+}
+
+.video-dialog-input::placeholder {
+  color: var(--tiptap-color-text-placeholder);
+}
+
+.video-dialog-input:disabled {
+  background-color: var(--ui-secondary-bg);
+  color: var(--tiptap-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.video-dialog-help-text {
+  padding: 12px;
+  border: 1px solid var(--ui-info-border);
+  border-radius: 4px;
+  background-color: var(--ui-info-bg);
+  font-size: 13px;
+}
+
+.video-dialog-help-title {
+  margin: 0 0 8px 0;
+  color: var(--ui-text-primary);
+  font-weight: 500;
+}
+
+.video-dialog-platform-list {
+  margin: 0;
+  padding-left: 20px;
+  color: var(--ui-text-secondary);
+  list-style-type: disc;
+}
+
+.video-dialog-platform-list li {
+  margin: 4px 0;
+}
+
+.video-dialog-error {
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+
+.video-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.video-dialog-button-cancel {
+  padding: 8px 16px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+
+.video-dialog-button-cancel:hover {
+  border-color: var(--ui-secondary-bg-active);
+  background-color: var(--ui-secondary-bg);
+}
+
+.video-dialog-button-cancel:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.video-dialog-button-submit {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--ui-color-primary);
+  color: var(--ui-text-white);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+
+.video-dialog-button-submit:hover {
+  background-color: var(--ui-color-primary-dark);
+}
+
+.video-dialog-button-submit:active {
+  transform: scale(0.98);
+}
+
+.video-dialog-button-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/src/editor/dialogs/add-video-dialog/add-video-dialog.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+
+import { CommonModal } from "../../components";
+import { detectVideoHosting, VideoHosting } from "../../../utils/detect-video-hosting";
+import { useTiptapTranslations } from "../../context";
+
+interface AddVideoDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onVideoAdd: (url: string) => void;
+}
+
+const SUPPORTED_PLATFORMS = {
+  [VideoHosting.Youtube]: "YouTube",
+  [VideoHosting.Vimeo]: "Vimeo",
+  [VideoHosting.Rutube]: "Rutube",
+  [VideoHosting.VK]: "VK",
+};
+
+export const AddVideoDialog = ({
+  open,
+  onClose,
+  onVideoAdd,
+}: AddVideoDialogProps) => {
+  const translations = useTiptapTranslations();
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState<string>("");
+  const [isValidating, setIsValidating] = useState(false);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setUrl("");
+      setError("");
+      setIsValidating(false);
+      // Focus the input after modal opens
+      setTimeout(() => {
+        urlInputRef.current?.focus();
+      }, 0);
+    }
+  }, [open]);
+
+  const validateVideo = async (videoUrl: string): Promise<boolean> => {
+    if (!videoUrl.trim()) {
+      setError(translations.videoUpload.emptyUrl);
+      return false;
+    }
+
+    setIsValidating(true);
+    try {
+      const videoInfo = await detectVideoHosting(videoUrl);
+      if (!videoInfo) {
+        setError(translations.videoUpload.unsupportedUrl);
+        return false;
+      }
+      return true;
+    } catch {
+      setError(translations.videoUpload.validationError);
+      return false;
+    } finally {
+      setIsValidating(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    setError("");
+
+    if (!url.trim()) {
+      setError(translations.videoUpload.emptyUrl);
+      return;
+    }
+
+    const isValid = await validateVideo(url);
+    if (isValid) {
+      onVideoAdd(url);
+      handleClose();
+    }
+  };
+
+  const handleClose = () => {
+    setUrl("");
+    setError("");
+    setIsValidating(false);
+    onClose();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !isValidating) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <CommonModal
+      open={open}
+      handleClose={handleClose}
+    >
+      <p className="video-dialog-title">{translations.videoUpload.title}</p>
+      <hr className="video-dialog-divider" />
+
+      <div className="video-dialog-content">
+        <div className="video-dialog-form-group">
+          <label
+            htmlFor="video-url"
+            className="video-dialog-label"
+          >
+            {translations.videoUpload.urlLabel}
+          </label>
+          <input
+            ref={urlInputRef}
+            id="video-url"
+            type="text"
+            className="video-dialog-input"
+            placeholder={translations.videoUpload.urlPlaceholder}
+            value={url}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isValidating}
+          />
+        </div>
+
+        <div className="video-dialog-help-text">
+          <p className="video-dialog-help-title">{translations.videoUpload.supportedPlatforms}</p>
+          <ul className="video-dialog-platform-list">
+            {Object.entries(SUPPORTED_PLATFORMS).map(([key, name]) => (
+              <li key={key}>{name}</li>
+            ))}
+          </ul>
+        </div>
+
+        {error && <div className="video-dialog-error">{error}</div>}
+      </div>
+
+      <div className="video-dialog-actions">
+        <button
+          className="video-dialog-button-cancel"
+          onClick={handleClose}
+          type="button"
+          disabled={isValidating}
+        >
+          {translations.videoUpload.cancel}
+        </button>
+        <button
+          className="video-dialog-button-submit"
+          onClick={handleSubmit}
+          type="button"
+          disabled={isValidating}
+        >
+          {isValidating ? translations.videoUpload.validating : translations.videoUpload.add}
+        </button>
+      </div>
+    </CommonModal>
+  );
+};

package/src/editor/dialogs/add-video-dialog/index.ts

@@ -0,0 +1 @@
+export { AddVideoDialog } from './add-video-dialog';

package/src/editor/dialogs/image-dialog/image-dialog.css

@@ -0,0 +1,101 @@
+/* ═══════════════════════════════════════════════════════════ */
+/* IMAGE DIALOG */
+/* ═══════════════════════════════════════════════════════════ */
+
+.image-dialog-title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.image-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px solid var(--tiptap-color-border);
+}
+
+.image-dialog-form-container {
+  margin-bottom: 16px;
+}
+
+.image-dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.image-dialog-preview {
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 12px;
+  border-radius: 12px;
+}
+
+.image-dialog-preview-wrapper {
+  display: flex;
+  position: relative;
+  justify-content: center;
+}
+
+.image-dialog-preview-wrapper:hover .image-dialog-delete-button {
+  display: flex;
+}
+
+.image-dialog-delete-button {
+  display: none;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-size: 20px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: all 0.2s ease-out;
+}
+
+.image-dialog-delete-button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.image-dialog-delete-button:hover {
+  background-color: var(--ui-secondary-bg);
+  opacity: 1;
+}
+
+.image-dialog-drag-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 150px;
+  border: 2px dashed #cccccc;
+  border-radius: 10px;
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+}
+
+.image-dialog-drag-area-active {
+  border-color: var(--ui-color-primary);
+  background-color: var(--ui-info-bg);
+}
+
+.image-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.image-dialog-cancel-button {
+  background: var(--ui-secondary-bg);
+  color: var(--ui-text-primary);
+}