@truedat/core 8.3.3 → 8.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.3.3",
+  "version": "8.3.4",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -41,20 +41,29 @@
           "rootMode": "upward"
         }
       ]
-    }
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!marked|turndown|@tiptap)/"
+    ]
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.3.3",
+    "@truedat/test": "8.3.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
+    "@tiptap/core": "^3.20.0",
+    "@tiptap/extension-heading": "^3.20.0",
+    "@tiptap/extension-link": "^3.20.0",
+    "@tiptap/pm": "^3.20.0",
+    "@tiptap/react": "^3.20.0",
+    "@tiptap/starter-kit": "^3.20.0",
     "@xyflow/react": "^12.6.4",
     "axios": "^1.13.5",
     "elkjs": "^0.10.0",
@@ -63,6 +72,7 @@
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
+    "marked": "^17.0.3",
     "moment": "^2.30.1",
     "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
@@ -83,7 +93,8 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "slate": "^0.47.9",
     "slate-react": "^0.22.10",
-    "swr": "^2.3.3"
+    "swr": "^2.3.3",
+    "turndown": "^7.2.2"
   },
-  "gitHead": "4659d78d53d18027bcfb8f8cdb221378e78d7ef6"
+  "gitHead": "6c7f4ef08bac69f8b642fa788ebb426a5a103314"
 }

package/src/components/Markdown.js

@@ -0,0 +1,346 @@
+import { useRef, useEffect, useState, useCallback } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Heading from "@tiptap/extension-heading";
+import { Menu, Icon } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { marked } from "marked";
+import TurndownService from "turndown";
+import TextPromptModal from "./TextPromptModal";
+
+const turndownService = new TurndownService({ headingStyle: "atx" });
+const HEADING_LEVELS = [2, 3];
+const extensions = [
+  StarterKit.configure({
+    heading: false,
+    link: false,
+  }),
+  Heading.configure({
+    levels: HEADING_LEVELS,
+  }),
+  Link.configure({
+    openOnClick: false,
+    HTMLAttributes: {
+      rel: "noopener noreferrer",
+      target: "_blank",
+    },
+  }), 
+];
+
+const validateUrl = (value, allowEmpty = false) => {
+  if (!value || value.trim() === "") {
+    return {
+      valid: allowEmpty,
+      error: allowEmpty ? null : "markdown.editor.invalidUrl",
+    };
+  }
+
+  // URLs con espacios no son válidas
+  if (value.includes(" ")) {
+    return { valid: false, error: "markdown.editor.invalidUrl" };
+  }
+
+  // Regex más estricto: requiere dominio.tld válido
+  // - Dominio: al menos 2 caracteres antes del último punto
+  // - TLD: 2-6 letras
+  const parts = value.split(".");
+  if (parts.length < 2) {
+    return { valid: false, error: "markdown.editor.invalidUrl" };
+  }
+  
+  const tld = parts[parts.length - 1].split("/")[0];
+  const domain = parts.slice(0, -1).join(".");
+  
+  // Validar TLD: 2-6 letras
+  if (!/^[a-z]{2,6}$/i.test(tld)) {
+    return { valid: false, error: "markdown.editor.invalidUrl" };
+  }
+  
+  // Validar dominio: al menos 4 caracteres si el TLD tiene 3 letras o menos
+  // Esto evita www.peo, www.xyz, etc. pero permite example.com
+  if (tld.length <= 3 && domain.length < 4) {
+    return { valid: false, error: "markdown.editor.invalidUrl" };
+  }
+  
+  // Validar dominio: al menos 2 caracteres, sin empezar/terminar con punto o guión
+  if (domain.length < 2 || domain.startsWith("-") || domain.endsWith("-") || domain.endsWith(".")) {
+    return { valid: false, error: "markdown.editor.invalidUrl" };
+  }
+
+  const urlWithProtocol = value.match(/^https?:\/\//i) ? value : `https://${value}`;
+  return { valid: true, value: urlWithProtocol };
+};
+
+function markdownToHtml(markdown) {
+  if (!markdown || (typeof markdown === "string" && markdown.trim() === "")) {
+    return "<p></p>";
+  }
+  const html = marked.parse(markdown, { async: false });
+  return html.replace(/<a (?=[^>]*href=)/gi, `<a target="_blank" rel="noopener noreferrer" `);
+}
+
+function htmlToMarkdown(html) {
+  if (!html || (typeof html === "string" && html.trim() === "")) {
+    return "";
+  }
+  return turndownService.turndown(html);
+}
+
+export function MarkdownReader({ content = "" }) {
+  const html = markdownToHtml(content);
+  if (!content || (typeof content === "string" && content.trim() === "")) {
+    return null;
+  }
+  return (
+    <div
+      className="markdown-reader"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+
+MarkdownReader.propTypes = {
+  content: PropTypes.string,
+};
+
+export function MarkdownEditor({
+  value = "",
+  onChange = null,
+  name = null,
+  label = null,
+  placeholder = "",
+  disabled = false,
+}) {
+  const { formatMessage } = useIntl();
+  const [linkModalOpen, setLinkModalOpen] = useState(false);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [hasSelection, setHasSelection] = useState(false);
+  const lastEmittedMarkdownRef = useRef(value);
+  const editorRef = useRef(null);
+  const initialContent = markdownToHtml(value);
+
+  const editor = useEditor({
+    extensions,
+    content: initialContent,
+    editable: !disabled,
+    immediatelyRender: false,
+    editorProps: {
+      handlePaste(view, event) {
+        const editorInstance = editorRef.current;
+        if (!editorInstance) return false;
+        const text = event.clipboardData?.getData("text/plain");
+        if (!text || !text.trim()) return false;
+        const html = markdownToHtml(text);
+        editorInstance.commands.insertContent(html, { emitUpdate: true });
+        return true;
+      },
+      handleDoubleClick: (view) => {
+        const { state } = editor;
+        const { from } = state.selection;
+        const marks = state.doc.resolve(from).marks();
+        const linkMark = marks.find((mark) => mark.type.name === "link");
+
+        if (linkMark) {
+          const href = linkMark.attrs.href;
+          openLinkModal(href);
+          return true;
+        }
+
+        return false;
+      },
+    },
+    onUpdate: ({ editor: ed }) => {
+      const html = ed.getHTML();
+      const markdown = htmlToMarkdown(html);
+      lastEmittedMarkdownRef.current = markdown;
+      if (onChange) {
+        onChange(null, { name, value: markdown });
+      }
+    },
+  });
+
+  useEffect(() => {
+    editorRef.current = editor;
+  }, [editor]);
+
+  useEffect(() => {
+    if (!editor) return;
+    const currentValue = value ?? "";
+    if (currentValue !== lastEmittedMarkdownRef.current) {
+      lastEmittedMarkdownRef.current = currentValue;
+      editor.commands.setContent(markdownToHtml(currentValue), {
+        emitUpdate: false,
+      });
+    }
+  }, [value, editor]);
+
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(!disabled);
+  }, [disabled, editor]);
+
+  useEffect(() => {
+    if (!editor) return;
+    const updateSelection = () => {
+      const { from, to } = editor.state.selection;
+      setHasSelection(from !== to);
+    };
+    updateSelection();
+    editor.on("selectionUpdate", updateSelection);
+    return () => {
+      editor.off("selectionUpdate", updateSelection);
+    };
+  }, [editor]);
+
+  const openLinkModal = useCallback((url = null) => {
+    let linkUrl;
+
+    if (url !== null) {
+      linkUrl = url.replace(/^https?:\/\//i, "");
+    } else {
+      const previousUrl = editor.getAttributes("link").href || "";
+      linkUrl = previousUrl.replace(/^https?:\/\//i, "");
+    }
+
+    setLinkUrl(linkUrl);
+    setLinkModalOpen(true);
+  }, [editor]);
+
+  const handleLinkAccept = useCallback(({ valid, value: url }) => {
+    if (!valid) return;
+
+    if (!url || url.trim() === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      setLinkModalOpen(false);
+      setLinkUrl("");
+      return;
+    }
+
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    setLinkModalOpen(false);
+    setLinkUrl("");
+  }, [editor]);
+
+  const handleLinkCancel = useCallback(() => {
+    setLinkModalOpen(false);
+    setLinkUrl("");
+  }, []);
+
+  const validateLinkUrl = useCallback((value) => {
+    const hasPreviousLink = editor?.isActive("link");
+    return validateUrl(value, hasPreviousLink);
+  }, [editor]);
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="markdown-editor">
+      {label ? (
+        <div className="field">
+          <label>{label}</label>
+        </div>
+      ) : null}
+      <Menu size="small" attached="top" className="markdown-editor-toolbar">
+        <Menu.Item
+          active={editor.isActive("bold")}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleBold().run();
+          }}
+        >
+          <Icon name="bold" />
+        </Menu.Item>
+        <Menu.Item
+          active={editor.isActive("italic")}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleItalic().run();
+          }}
+        >
+          <Icon name="italic" />
+        </Menu.Item>
+        <Menu.Item
+          onMouseDown={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleHeading({ level: 2 }).run();
+          }}
+        >
+          <Icon name="heading" size="large" />
+        </Menu.Item>
+        <Menu.Item
+          onMouseDown={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleHeading({ level: 3 }).run();
+          }}
+        >
+          <Icon name="heading" size="small" />
+        </Menu.Item>
+        <Menu.Item
+          active={editor.isActive("bulletList")}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleBulletList().run();
+          }}
+        >
+          <Icon name="list ul" />
+        </Menu.Item>
+        <Menu.Item
+          active={editor.isActive("orderedList")}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleOrderedList().run();
+          }}
+        >
+          <Icon name="list ol" />
+        </Menu.Item>
+        <Menu.Item
+          active={editor.isActive("link")}
+          disabled={!hasSelection && !editor.isActive("link")}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            if (hasSelection || editor.isActive("link")) {
+              openLinkModal();
+            }
+          }}
+        >
+          <Icon name="linkify" />
+        </Menu.Item>
+      </Menu>
+      <div className="markdown-editor-content">
+        <EditorContent editor={editor} placeholder={placeholder} />
+      </div>
+      <TextPromptModal
+        open={linkModalOpen}
+        onClose={handleLinkCancel}
+        onAccept={handleLinkAccept}
+        validate={validateLinkUrl}
+        initialValue={linkUrl}
+        allowEmpty={editor.isActive("link")}
+        header={
+          <>
+            <Icon name="linkify" />
+            <FormattedMessage id="markdown.editor.insertLink" />
+          </>
+        }
+        label={formatMessage({ id: "markdown.editor.urlLabel", defaultMessage: "URL" })}
+        placeholder="https://"
+      />
+    </div>
+  );
+}
+
+MarkdownEditor.propTypes = {
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export { markdownToHtml, validateUrl };

package/src/components/TextPromptModal.js

@@ -0,0 +1,214 @@
+import { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { Modal, Input, Button, Form } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+
+export const TextPromptModal = ({
+  open,
+  onClose,
+  onAccept,
+  header,
+  label,
+  placeholder,
+  initialValue = "",
+  validate,
+  trigger,
+  size = "small",
+  errorMessageId = "form.validation.invalid",
+  showSecondaryInput = false,
+  secondaryLabel,
+  secondaryPlaceholder,
+  secondaryInitialValue = "",
+  acceptButtonLabel = "actions.save",
+  cancelButtonLabel = "actions.cancel",
+  allowEmpty = false,
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const [secondaryValue, setSecondaryValue] = useState(secondaryInitialValue);
+  const [error, setError] = useState(null);
+  const [isValid, setIsValid] = useState(false);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (open) {
+      setValue(initialValue);
+      setSecondaryValue(secondaryInitialValue);
+      setError(null);
+      const isEmpty = !initialValue || initialValue.trim() === "";
+
+      if (isEmpty) {
+        setIsValid(true);
+      } else if (!validate) {
+        setIsValid(true);
+      } else {
+        const result = validate(initialValue);
+        setIsValid(result.valid);
+      }
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 100);
+    }
+  }, [open, initialValue, secondaryInitialValue, validate, allowEmpty]);
+
+  const handleSubmit = () => {
+    if (!isValid) return;
+
+    const result = {
+      valid: true,
+      value,
+      ...(showSecondaryInput && { secondaryValue }),
+    };
+
+    onAccept(result);
+    setValue(initialValue);
+    setSecondaryValue(secondaryInitialValue);
+    setError(null);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+    setSecondaryValue(secondaryInitialValue);
+    setError(null);
+    onClose();
+  };
+
+  const handleChange = (e, { value: newValue }) => {
+    setValue(newValue);
+
+    const isEmpty = !newValue || newValue.trim() === "";
+
+    if (isEmpty) {
+      setIsValid(true);
+      setError(null);
+    } else if (!validate) {
+      setIsValid(true);
+      setError(null);
+    } else {
+      const result = validate(newValue);
+      setIsValid(result.valid);
+      setError(result.valid ? null : result.error);
+    }
+  };
+
+  const handleSecondaryChange = (e, { value: newValue }) => {
+    setSecondaryValue(newValue);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && isValid) {
+      handleSubmit();
+    }
+  };
+
+  const renderError = () => {
+    if (!error) return null;
+
+    return (
+      <div className="ui error message" style={{ display: "block" }}>
+        <FormattedMessage id={error} />
+      </div>
+    );
+  };
+
+  const inputId = "text-prompt-modal-input";
+  const secondaryInputId = "text-prompt-modal-secondary-input";
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleCancel}
+      size={size}
+      trigger={trigger}
+      closeOnDimmerClick={false}
+      closeOnDocumentClick={false}
+      closeOnEscape={true}
+    >
+      <Modal.Header>{header}</Modal.Header>
+      <Modal.Content>
+        <Form error={!!error}>
+          <Form.Field error={!!error}>
+            {label && <label htmlFor={inputId}>{label}</label>}
+            <Input
+              id={inputId}
+              fluid
+              placeholder={placeholder}
+              value={value}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              error={!!error}
+              ref={inputRef}
+            />
+            {renderError()}
+          </Form.Field>
+          {showSecondaryInput && (
+            <Form.Field>
+              {secondaryLabel && (
+                <label htmlFor={secondaryInputId}>{secondaryLabel}</label>
+              )}
+              <Input
+                id={secondaryInputId}
+                fluid
+                placeholder={secondaryPlaceholder}
+                value={secondaryValue}
+                onChange={handleSecondaryChange}
+                onKeyDown={handleKeyDown}
+              />
+            </Form.Field>
+          )}
+        </Form>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={handleCancel}>
+          <FormattedMessage id={cancelButtonLabel} />
+        </Button>
+        <Button primary onClick={handleSubmit} disabled={!isValid}>
+          <FormattedMessage id={acceptButtonLabel} />
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+};
+
+TextPromptModal.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  onAccept: PropTypes.func.isRequired,
+  header: PropTypes.node.isRequired,
+  label: PropTypes.node,
+  placeholder: PropTypes.string,
+  initialValue: PropTypes.string,
+  validate: PropTypes.func,
+  trigger: PropTypes.element,
+  size: PropTypes.string,
+  errorMessageId: PropTypes.string,
+  showSecondaryInput: PropTypes.bool,
+  secondaryLabel: PropTypes.node,
+  secondaryPlaceholder: PropTypes.string,
+  secondaryInitialValue: PropTypes.string,
+  acceptButtonLabel: PropTypes.string,
+  cancelButtonLabel: PropTypes.string,
+  allowEmpty: PropTypes.bool,
+};
+
+TextPromptModal.defaultProps = {
+  open: false,
+  label: "",
+  placeholder: "",
+  initialValue: "",
+  validate: null,
+  trigger: null,
+  size: "small",
+  errorMessageId: "form.validation.invalid",
+  showSecondaryInput: false,
+  secondaryLabel: "",
+  secondaryPlaceholder: "",
+  secondaryInitialValue: "",
+  acceptButtonLabel: "actions.save",
+  cancelButtonLabel: "actions.cancel",
+  allowEmpty: false,
+};
+
+export default TextPromptModal;

package/src/components/__tests__/Markdown.spec.js

@@ -0,0 +1,140 @@
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { MarkdownReader, MarkdownEditor, markdownToHtml, validateUrl } from "../Markdown";
+
+describe("markdownToHtml", () => {
+  it("returns empty paragraph for empty or whitespace input", () => {
+    expect(markdownToHtml("")).toBe("<p></p>");
+    expect(markdownToHtml("   ")).toBe("<p></p>");
+    expect(markdownToHtml(null)).toBe("<p></p>");
+    expect(markdownToHtml(undefined)).toBe("<p></p>");
+  });
+
+  it("converts markdown to html", () => {
+    expect(markdownToHtml("**bold**")).toContain("<strong>bold</strong>");
+    expect(markdownToHtml("*italic*")).toContain("<em>italic</em>");
+    expect(markdownToHtml("## Title")).toContain("<h2>");
+  });
+
+  it("generates a correct <a> element for markdown links", () => {
+    const html = markdownToHtml("[Example link](https://example.com/path)");
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const anchor = doc.querySelector("a");
+    expect(anchor).not.toBeNull();
+    expect(anchor.getAttribute("href")).toBe("https://example.com/path");
+    expect(anchor.getAttribute("target")).toBe("_blank");
+    expect(anchor.getAttribute("rel")).toBe("noopener noreferrer");
+    expect(anchor.textContent).toBe("Example link");
+  });
+});
+
+describe("validateUrl", () => {
+  it("returns invalid for empty string when allowEmpty is false", () => {
+    expect(validateUrl("")).toEqual({ valid: false, error: "markdown.editor.invalidUrl" });
+  });
+
+  it("returns valid for empty string when allowEmpty is true", () => {
+    expect(validateUrl("", true)).toEqual({ valid: true, error: null });
+  });
+
+  it("returns valid for URL without protocol", () => {
+    const result = validateUrl("example.com");
+    expect(result.valid).toBe(true);
+    expect(result.value).toBe("https://example.com");
+  });
+
+  it("returns valid for URL with http", () => {
+    const result = validateUrl("http://example.com");
+    expect(result.valid).toBe(true);
+    expect(result.value).toBe("http://example.com");
+  });
+
+  it("returns valid for URL with https", () => {
+    const result = validateUrl("https://example.com");
+    expect(result.valid).toBe(true);
+    expect(result.value).toBe("https://example.com");
+  });
+
+  it("returns valid for URL with path", () => {
+    const result = validateUrl("https://example.com/path/to/resource");
+    expect(result.valid).toBe(true);
+    expect(result.value).toBe("https://example.com/path/to/resource");
+  });
+
+  it("returns invalid for URL with TLD too short", () => {
+    const result = validateUrl("www.peo");
+    expect(result.valid).toBe(false);
+    expect(result.error).toBe("markdown.editor.invalidUrl");
+  });
+
+  it("returns invalid for single word without dots", () => {
+    const result = validateUrl("not-a-url");
+    expect(result.valid).toBe(false);
+    expect(result.error).toBe("markdown.editor.invalidUrl");
+  });
+
+  it("returns invalid for URL with spaces", () => {
+    const result = validateUrl("https://exam ple.com");
+    expect(result.valid).toBe(false);
+    expect(result.error).toBe("markdown.editor.invalidUrl");
+  });
+});
+
+describe("<MarkdownReader />", () => {
+  it("returns null when content is empty", () => {
+    const { container } = render(<MarkdownReader content="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("returns null when content is only whitespace", () => {
+    const { container } = render(<MarkdownReader content="   " />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders markdown content as html", () => {
+    const { container } = render(<MarkdownReader content="**Hello** world" />);
+    const reader = container.querySelector(".markdown-reader");
+    expect(reader).toBeInTheDocument();
+    expect(reader.innerHTML).toContain("<strong>Hello</strong>");
+    expect(reader.innerHTML).toContain("world");
+  });
+
+  it("matches the latest snapshot with content", () => {
+    const rendered = render(
+      <MarkdownReader content="## Title\n\n- item 1\n- item 2\n\n[link](https://example.com)" />
+    );
+    expect(rendered.container).toMatchSnapshot();
+  });
+});
+
+describe("<MarkdownEditor />", () => {
+  it("matches the latest snapshot when editor is ready", async () => {
+    const rendered = render(<MarkdownEditor />);
+    await waitFor(() => {
+      expect(rendered.container.querySelector(".markdown-editor")).toBeInTheDocument();
+    });
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with label and value", async () => {
+    const rendered = render(
+      <MarkdownEditor label="Description" value="**Bold** text" />
+    );
+    await waitFor(() => {
+      expect(rendered.container.querySelector(".markdown-editor")).toBeInTheDocument();
+    });
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders editable area when editor is ready", async () => {
+    const rendered = render(
+      <MarkdownEditor name="description" onChange={() => { }} value="" />
+    );
+    await waitFor(() => {
+      expect(rendered.container.querySelector(".markdown-editor")).toBeInTheDocument();
+    });
+    const editable = rendered.container.querySelector(".tiptap");
+    expect(editable).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/TextPromptModal.spec.js

@@ -0,0 +1,282 @@
+import { screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import messages from "@truedat/core/messages";
+import { render } from "@truedat/test/render";
+import TextPromptModal from "../TextPromptModal";
+
+const renderWithIntl = (component) => {
+  return render(component, { messages });
+};
+
+describe("<TextPromptModal />", () => {
+  const defaultProps = {
+    open: true,
+    onClose: jest.fn(),
+    onAccept: jest.fn(),
+    header: "Test Header",
+    label: "Test Label",
+    placeholder: "Test placeholder",
+    initialValue: "",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("render", () => {
+    it("renders modal header when open is true", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} />);
+      expect(screen.getByText("Test Header")).toBeInTheDocument();
+    });
+
+    it("renders input with correct label", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} />);
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("renders with initial value", () => {
+      renderWithIntl(
+        <TextPromptModal {...defaultProps} initialValue="initial value" />,
+      );
+      expect(screen.getByRole("textbox")).toHaveValue("initial value");
+    });
+
+    it("renders Cancel and Save buttons", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} />);
+      expect(screen.getByText("Cancel")).toBeInTheDocument();
+      expect(screen.getByText("Save")).toBeInTheDocument();
+    });
+
+    it("renders Save button enabled when empty (accepts empty as valid)", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} initialValue="" />);
+      expect(screen.getByText("Save")).not.toBeDisabled();
+    });
+
+    it("renders Save button enabled when has initial value and no validate function", () => {
+      renderWithIntl(
+        <TextPromptModal {...defaultProps} initialValue="some value" />,
+      );
+      expect(screen.getByText("Save")).not.toBeDisabled();
+    });
+
+    it("renders Save button enabled when allowEmpty is true", () => {
+      renderWithIntl(
+        <TextPromptModal {...defaultProps} allowEmpty={true} initialValue="" />,
+      );
+
+      expect(screen.getByText("Save")).not.toBeDisabled();
+    });
+  });
+
+  describe("interaction", () => {
+    it("calls onClose when Cancel button is clicked", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} />);
+
+      fireEvent.click(screen.getByText("Cancel"));
+
+      expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onAccept when Accept button is clicked", () => {
+      renderWithIntl(
+        <TextPromptModal {...defaultProps} initialValue="test value" />,
+      );
+
+      fireEvent.click(screen.getByText("Save"));
+
+      expect(defaultProps.onAccept).toHaveBeenCalledTimes(1);
+      expect(defaultProps.onAccept).toHaveBeenCalledWith({
+        valid: true,
+        value: "test value",
+      });
+    });
+
+    it("calls onAccept when Enter key is pressed", () => {
+      renderWithIntl(
+        <TextPromptModal {...defaultProps} initialValue="test value" />,
+      );
+
+      fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+
+      expect(defaultProps.onAccept).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onAccept when Enter key is pressed and value is empty", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} initialValue="" />);
+
+      fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+
+      expect(defaultProps.onAccept).toHaveBeenCalledTimes(1);
+      expect(defaultProps.onAccept).toHaveBeenCalledWith({
+        valid: true,
+        value: "",
+      });
+    });
+
+    it("updates input value when user types", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} />);
+
+      fireEvent.change(screen.getByRole("textbox"), {
+        target: { value: "new value" },
+      });
+
+      expect(screen.getByRole("textbox")).toHaveValue("new value");
+    });
+  });
+
+  describe("validation", () => {
+    it("shows error message when validation fails", () => {
+      const validate = jest.fn(() => ({
+        valid: false,
+        error: "form.validation.invalid",
+      }));
+      const onAccept = jest.fn();
+
+      renderWithIntl(
+        <TextPromptModal
+          {...defaultProps}
+          validate={validate}
+          onAccept={onAccept}
+          initialValue="invalid-value"
+        />,
+      );
+
+      // El botón está disabled porque la validación falla
+      expect(screen.getByText("Save")).toBeDisabled();
+      expect(onAccept).not.toHaveBeenCalled();
+    });
+
+    it("calls onAccept with value when validation passes", () => {
+      const validate = jest
+        .fn()
+        .mockReturnValue({ valid: true, value: "test" });
+      const onAccept = jest.fn();
+
+      renderWithIntl(
+        <TextPromptModal
+          {...defaultProps}
+          validate={validate}
+          onAccept={onAccept}
+          initialValue="test"
+        />,
+      );
+
+      fireEvent.click(screen.getByText("Save"));
+
+      expect(onAccept).toHaveBeenCalledWith({
+        valid: true,
+        value: "test",
+      });
+    });
+
+    it("shows error in real-time when validation fails", () => {
+      const validate = jest.fn(() => ({
+        valid: false,
+        error: "form.validation.invalid",
+      }));
+      renderWithIntl(
+        <TextPromptModal
+          {...defaultProps}
+          validate={validate}
+          initialValue="invalid-value"
+        />,
+      );
+
+      // El botón está disabled porque la validación falla
+      expect(screen.getByText("Save")).toBeDisabled();
+    });
+
+    it("enables Save button when validation passes", () => {
+      const validate = jest
+        .fn()
+        .mockReturnValue({ valid: true, value: "valid-url" });
+      renderWithIntl(
+        <TextPromptModal
+          {...defaultProps}
+          validate={validate}
+          initialValue="valid-url"
+        />,
+      );
+
+      // El botón está enabled porque la validación pasa
+      expect(screen.getByText("Save")).not.toBeDisabled();
+    });
+  });
+
+  describe("secondary input", () => {
+    it("renders secondary input when showSecondaryInput is true", () => {
+      renderWithIntl(
+        <TextPromptModal
+          {...defaultProps}
+          showSecondaryInput={true}
+          secondaryLabel="Secondary Label"
+        />,
+      );
+      expect(screen.getAllByRole("textbox").length).toBe(2);
+    });
+
+    it("does not render secondary input when showSecondaryInput is false", () => {
+      renderWithIntl(<TextPromptModal {...defaultProps} />);
+      expect(screen.getAllByRole("textbox").length).toBe(1);
+    });
+
+    it("returns secondaryValue in onAccept when showSecondaryInput is true", () => {
+      const onAccept = jest.fn();
+      renderWithIntl(
+        <TextPromptModal
+          {...defaultProps}
+          showSecondaryInput={true}
+          secondaryLabel="Secondary"
+          onAccept={onAccept}
+          initialValue="primary value"
+        />,
+      );
+
+      const inputs = screen.getAllByRole("textbox");
+      fireEvent.change(inputs[1], { target: { value: "secondary value" } });
+      fireEvent.click(screen.getByText("Save"));
+
+      expect(onAccept).toHaveBeenCalledWith({
+        valid: true,
+        value: "primary value",
+        secondaryValue: "secondary value",
+      });
+    });
+  });
+
+  describe("reset", () => {
+    it("resets value when modal opens with different initialValue", () => {
+      const { rerender } = renderWithIntl(
+        <TextPromptModal {...defaultProps} initialValue="initial" />,
+      );
+
+      rerender(
+        <TextPromptModal
+          {...defaultProps}
+          open={false}
+          initialValue="initial"
+        />,
+      );
+
+      rerender(
+        <TextPromptModal
+          {...defaultProps}
+          open={true}
+          initialValue="new value"
+        />,
+      );
+
+      expect(screen.getByRole("textbox")).toHaveValue("new value");
+    });
+  });
+
+  describe("trigger", () => {
+    it("renders trigger element when provided", () => {
+      const trigger = <button type="button">Open Modal</button>;
+      renderWithIntl(
+        <TextPromptModal {...defaultProps} trigger={trigger} open={false} />,
+      );
+      expect(screen.getByText("Open Modal")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/__tests__/__snapshots__/Markdown.spec.js.snap

@@ -0,0 +1,210 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MarkdownEditor /> matches the latest snapshot when editor is ready 1`] = `
+<div>
+  <div
+    class="markdown-editor"
+  >
+    <div
+      class="ui small top attached markdown-editor-toolbar menu"
+    >
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="bold icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="italic icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="heading large icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="heading small icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="list ul icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="list ol icon"
+        />
+      </div>
+      <div
+        class="disabled item"
+      >
+        <i
+          aria-hidden="true"
+          class="linkify icon"
+        />
+      </div>
+    </div>
+    <div
+      class="markdown-editor-content"
+    >
+      <div
+        placeholder=""
+      >
+        <div
+          class="tiptap ProseMirror"
+          contenteditable="true"
+          role="textbox"
+          tabindex="0"
+          translate="no"
+        >
+          <p>
+            <br
+              class="ProseMirror-trailingBreak"
+            />
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<MarkdownEditor /> matches the latest snapshot with label and value 1`] = `
+<div>
+  <div
+    class="markdown-editor"
+  >
+    <div
+      class="field"
+    >
+      <label>
+        Description
+      </label>
+    </div>
+    <div
+      class="ui small top attached markdown-editor-toolbar menu"
+    >
+      <div
+        class="active item"
+      >
+        <i
+          aria-hidden="true"
+          class="bold icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="italic icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="heading large icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="heading small icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="list ul icon"
+        />
+      </div>
+      <div
+        class="item"
+      >
+        <i
+          aria-hidden="true"
+          class="list ol icon"
+        />
+      </div>
+      <div
+        class="disabled item"
+      >
+        <i
+          aria-hidden="true"
+          class="linkify icon"
+        />
+      </div>
+    </div>
+    <div
+      class="markdown-editor-content"
+    >
+      <div
+        placeholder=""
+      >
+        <div
+          class="tiptap ProseMirror"
+          contenteditable="true"
+          role="textbox"
+          tabindex="0"
+          translate="no"
+        >
+          <p>
+            <strong>
+              Bold
+            </strong>
+             text
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<MarkdownReader /> matches the latest snapshot with content 1`] = `
+<div>
+  <div
+    class="markdown-reader"
+  >
+    <h2>
+      Title\\n\\n- item 1\\n- item 2\\n\\n
+      <a
+        href="https://example.com"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        link
+      </a>
+    </h2>
+    
+
+  </div>
+</div>
+`;

package/src/components/index.js

@@ -30,6 +30,7 @@ import HierarchyNodeFinder from "./HierarchyNodeFinder";
 import HierarchySelector from "./HierarchySelector";
 import HistoryBackButton from "./HistoryBackButton";
 import IngestMenu from "./IngestMenu";
+import TextPromptModal from "./TextPromptModal";
 import LanguagesTabs from "./LanguagesTabs";
 import LineageMenu from "./LineageMenu";
 import Loading from "./Loading";
@@ -58,6 +59,8 @@ import TreeSelector from "./TreeSelector";
 import Unauthorized from "./Unauthorized";
 import UploadModal from "./UploadModal";
 
+export { MarkdownEditor, MarkdownReader } from "./Markdown";
+
 export {
   ActiveRoute,
   AdminMenu,
@@ -91,6 +94,7 @@ export {
   HierarchySelector,
   HistoryBackButton,
   IngestMenu,
+  TextPromptModal,
   LanguagesTabs,
   LineageMenu,
   Loading,

package/src/styles/Markdown.less

@@ -0,0 +1,82 @@
+.markdown-editor {
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+
+  &:focus-within {
+    outline: none;
+
+    .markdown-editor-toolbar.ui.menu {
+      border: 1px solid #85b7d9;
+      border-radius: 0.28571429rem 0.28571429rem 0 0;
+    }
+
+    .markdown-editor-content {
+      border-color: #85b7d9;
+    }
+  }
+
+  .markdown-editor-toolbar.ui.menu {
+    background-color: #f3f4f5 !important;
+    border: 1px solid rgba(34, 36, 38, 0.15);
+    border-radius: 0.28571429rem 0.28571429rem 0 0;
+    border-bottom: 1px solid rgba(34, 36, 38, 0.15) !important;
+    flex-shrink: 0;
+
+    .item {
+      cursor: pointer;
+    }
+  }
+
+  .markdown-editor-content {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 100%;
+    min-height: 120px;
+    box-sizing: border-box;
+    border: 1px solid rgba(34, 36, 38, 0.15);
+    border-top: none;
+    border-radius: 0 0 0.28571429rem 0.28571429rem;
+    padding: 8px 10px;
+
+    >div {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .tiptap {
+      width: 100%;
+      min-width: 100%;
+      min-height: 100%;
+      box-sizing: border-box;
+      flex: 1;
+
+      &:focus {
+        outline: none;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.ui {
+  .form {
+    .markdown-editor .field {
+      margin-bottom: 0;
+    }
+
+    .ui[class*="top attached"].menu {
+      margin-top: 0
+    }
+  }
+
+
+}