framepexls-ui-lib 2.2.7 → 2.2.11

package/dist/MarkdownEditor.mjs

@@ -1,8 +1,35 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { createPortal } from "react-dom";
+import ActionIconButton from "./ActionIconButton.mjs";
 import Button from "./Button.mjs";
+import Dropdown from "./Dropdown.mjs";
 import Textarea from "./Textarea.mjs";
+import Tooltip from "./Tooltip.mjs";
+import {
+  ArrowArcLeftIcon,
+  ArrowArcRightIcon,
+  ChevronDownIcon,
+  CodeIcon,
+  CornersInIcon,
+  CornersOutIcon,
+  ImageIcon,
+  LinkIcon,
+  ListBulletsIcon,
+  ListNumbersIcon,
+  MenuPuntosVerticalIcon,
+  MinusIcon,
+  PaletteIcon,
+  PlusIcon,
+  QuotesIcon,
+  TableIcon,
+  TextBIcon,
+  TextItalicIcon,
+  TextTIcon,
+  TrashIcon,
+  VideoIcon
+} from "./iconos/index.mjs";
 function cx(...a) {
   return a.filter(Boolean).join(" ");
 }
@@ -27,11 +54,61 @@ function getSelectedLines(value, start, end) {
   const lineEnd = lineEndIdx === -1 ? value.length : lineEndIdx;
   return { from, to, lineStart, lineEnd, block: value.slice(lineStart, lineEnd) };
 }
+function getLineDeleteRange(value, start, end) {
+  const { lineStart, lineEnd } = getSelectedLines(value, start, end);
+  return { start: lineStart, end: lineEnd };
+}
+function getFenceDeleteRange(value, position) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const lines = getMarkdownLines(value);
+  const index = lines.findIndex((line) => position >= line.start && position <= line.end);
+  if (index < 0) return null;
+  let openIndex = -1;
+  for (let i = index; i >= 0; i -= 1) {
+    if (/^```/.test((_b = (_a = lines[i]) == null ? void 0 : _a.text.trim()) != null ? _b : "")) {
+      openIndex = i;
+      break;
+    }
+  }
+  if (openIndex < 0) return null;
+  for (let i = openIndex + 1; i < lines.length; i += 1) {
+    if (/^```/.test((_d = (_c = lines[i]) == null ? void 0 : _c.text.trim()) != null ? _d : "")) {
+      return { start: (_f = (_e = lines[openIndex]) == null ? void 0 : _e.start) != null ? _f : 0, end: (_j = (_i = (_g = lines[i]) == null ? void 0 : _g.end) != null ? _i : (_h = lines[openIndex]) == null ? void 0 : _h.end) != null ? _j : 0 };
+    }
+  }
+  return null;
+}
+function getDeleteBlockRange(value, range) {
+  if (range.kind === "code" || range.kind === "diagram") {
+    const fenced = getFenceDeleteRange(value, range.start);
+    if (fenced) return fenced;
+    const block = getCurrentBlockRange(value, range.start);
+    return { start: block.from, end: block.to };
+  }
+  if (range.kind === "paragraph") {
+    const block = getCurrentBlockRange(value, range.start);
+    return { start: block.from, end: block.to };
+  }
+  return getLineDeleteRange(value, range.start, range.end);
+}
+function removeMarkdownBlock(value, range) {
+  if (!value) return { next: value, cursor: 0 };
+  let { start, end } = getDeleteBlockRange(value, range);
+  start = Math.max(0, Math.min(value.length, start));
+  end = Math.max(start, Math.min(value.length, end));
+  if (start === end && start < value.length) end += 1;
+  let removeFrom = start;
+  let removeTo = end;
+  if (removeTo < value.length && value[removeTo] === "\n") {
+    removeTo += 1;
+  } else if (removeFrom > 0 && value[removeFrom - 1] === "\n") {
+    removeFrom -= 1;
+  }
+  const next = (value.slice(0, removeFrom) + value.slice(removeTo)).replace(/\n{4,}/g, "\n\n\n");
+  return { next, cursor: Math.max(0, Math.min(next.length, removeFrom)) };
+}
 function wrapSelection(value, start, end, left, right, fallbackText) {
-  const a = Math.max(0, Math.min(value.length, start));
-  const b = Math.max(0, Math.min(value.length, end));
-  const from = Math.min(a, b);
-  const to = Math.max(a, b);
+  const { from, to } = normalizeRange(value, start, end);
   const sel = value.slice(from, to);
   const inner = sel || fallbackText;
   const next = value.slice(0, from) + left + inner + right + value.slice(to);
@@ -39,10 +116,1208 @@ function wrapSelection(value, start, end, left, right, fallbackText) {
   const nextTo = from + left.length + inner.length;
   return { next, selectFrom: nextFrom, selectTo: nextTo };
 }
+function normalizeRange(value, start, end) {
+  const a = Math.max(0, Math.min(value.length, start));
+  const b = Math.max(0, Math.min(value.length, end));
+  return { from: Math.min(a, b), to: Math.max(a, b) };
+}
+function trimRange(value, from, to) {
+  var _a, _b;
+  let nextFrom = from;
+  let nextTo = to;
+  while (nextFrom < nextTo && /\s/.test((_a = value[nextFrom]) != null ? _a : "")) nextFrom += 1;
+  while (nextTo > nextFrom && /\s/.test((_b = value[nextTo - 1]) != null ? _b : "")) nextTo -= 1;
+  return { from: nextFrom, to: nextTo };
+}
+function getCurrentBlockRange(value, cursor) {
+  const pos = Math.max(0, Math.min(value.length, cursor));
+  let start = value.lastIndexOf("\n\n", Math.max(0, pos - 1));
+  start = start === -1 ? 0 : start + 2;
+  let end = value.indexOf("\n\n", pos);
+  end = end === -1 ? value.length : end;
+  return trimRange(value, start, end);
+}
+function getSmartTextRange(value, start, end) {
+  const selected = normalizeRange(value, start, end);
+  if (selected.from !== selected.to) return trimRange(value, selected.from, selected.to);
+  const block = getCurrentBlockRange(value, selected.from);
+  if (block.from !== block.to) return block;
+  return selected;
+}
+function unwrapFullMarker(value, left, right) {
+  if (!value.startsWith(left) || !value.endsWith(right)) return value;
+  return value.slice(left.length, value.length - right.length);
+}
+function mapRenderedOffsetToMarkdown(raw, renderedOffset) {
+  var _a, _b;
+  const boundaries = [];
+  let visible = 0;
+  const addVisible = (rawIndex) => {
+    if (boundaries[visible] === void 0) boundaries[visible] = rawIndex;
+    visible += 1;
+    boundaries[visible] = rawIndex + 1;
+  };
+  for (let index = 0; index < raw.length; index += 1) {
+    if (raw.startsWith("**", index)) {
+      index += 1;
+      continue;
+    }
+    if (raw[index] === "*" || raw[index] === "`") continue;
+    const colorOpen = (_a = raw.slice(index).match(/^\{color:#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?(?:[0-9a-fA-F]{2})?\}/)) == null ? void 0 : _a[0];
+    if (colorOpen) {
+      index += colorOpen.length - 1;
+      continue;
+    }
+    if (raw.startsWith("{/color}", index)) {
+      index += "{/color}".length - 1;
+      continue;
+    }
+    if (raw[index] === "[") {
+      const labelEnd = raw.indexOf("]", index + 1);
+      if (labelEnd > index && raw[labelEnd + 1] === "(") {
+        const urlEnd = raw.indexOf(")", labelEnd + 2);
+        if (urlEnd > labelEnd) {
+          for (let labelIndex = index + 1; labelIndex < labelEnd; labelIndex += 1) {
+            addVisible(labelIndex);
+          }
+          index = urlEnd;
+          continue;
+        }
+      }
+    }
+    addVisible(index);
+  }
+  if (!boundaries.length) return Math.max(0, Math.min(raw.length, renderedOffset));
+  const offset = Math.max(0, Math.min(renderedOffset, boundaries.length - 1));
+  return (_b = boundaries[offset]) != null ? _b : raw.length;
+}
+function findMarkdownWrapper(value, from, to, left, right) {
+  let index = 0;
+  while (index < value.length) {
+    const open = value.indexOf(left, index);
+    if (open < 0) return null;
+    const contentStart = open + left.length;
+    const close = value.indexOf(right, contentStart);
+    if (close < 0) return null;
+    const wrapperEnd = close + right.length;
+    if (from >= contentStart && to <= close) {
+      return { wrapperStart: open, wrapperEnd, contentStart, contentEnd: close };
+    }
+    index = wrapperEnd;
+  }
+  return null;
+}
+function findLinkWrapper(value, from, to) {
+  var _a, _b, _c;
+  const pattern = /\[([^\]]+)\]\((https?:\/\/[^\s)]+|mailto:[^\s)]+|\/[^\s)]+)\)/g;
+  let match;
+  while (match = pattern.exec(value)) {
+    const wrapperStart = match.index;
+    const labelStart = wrapperStart + 1;
+    const labelEnd = labelStart + ((_b = (_a = match[1]) == null ? void 0 : _a.length) != null ? _b : 0);
+    if (from >= labelStart && to <= labelEnd) {
+      return { wrapperStart, wrapperEnd: pattern.lastIndex, contentStart: labelStart, contentEnd: labelEnd, url: (_c = match[2]) != null ? _c : "" };
+    }
+  }
+  return null;
+}
+function findItalicWrapper(value, from, to) {
+  var _a, _b, _c, _d;
+  const pattern = /(^|[^*])\*([^*\n]+)\*/g;
+  let match;
+  while (match = pattern.exec(value)) {
+    const prefixLength = (_b = (_a = match[1]) == null ? void 0 : _a.length) != null ? _b : 0;
+    const wrapperStart = match.index + prefixLength;
+    const contentStart = wrapperStart + 1;
+    const contentEnd = contentStart + ((_d = (_c = match[2]) == null ? void 0 : _c.length) != null ? _d : 0);
+    const wrapperEnd = contentEnd + 1;
+    if (from >= contentStart && to <= contentEnd) {
+      return { wrapperStart, wrapperEnd, contentStart, contentEnd };
+    }
+  }
+  return null;
+}
+function findInlineWrapperAt(value, offset, left, right) {
+  return left === "*" && right === "*" ? findItalicWrapper(value, offset, offset) : findMarkdownWrapper(value, offset, offset, left, right);
+}
+function expandRangeToTouchedInlineWrappers(value, range, left, right) {
+  const startWrapper = findInlineWrapperAt(value, range.from, left, right);
+  const endOffset = Math.max(range.from, range.to - 1);
+  const endWrapper = findInlineWrapperAt(value, endOffset, left, right);
+  return {
+    from: startWrapper ? Math.min(range.from, startWrapper.wrapperStart) : range.from,
+    to: endWrapper ? Math.max(range.to, endWrapper.wrapperEnd) : range.to
+  };
+}
+function stripInlineStyleMarkers(value, left, right) {
+  if (left === "**" && right === "**") return value.replace(/\*{2,}/g, "");
+  if (left === "*" && right === "*") return value.replace(/(^|[^*])\*(?!\*)/g, "$1");
+  if (left === "`" && right === "`") return value.replace(/`+/g, "");
+  return unwrapFullMarker(value, left, right);
+}
+function normalizeMarkerPairs(value, marker, selectFrom, selectTo) {
+  const positions = [];
+  for (let index = 0; index < value.length; index += 1) {
+    if (!value.startsWith(marker, index)) continue;
+    if (marker === "*" && (value[index - 1] === "*" || value[index + 1] === "*")) continue;
+    positions.push(index);
+    index += marker.length - 1;
+  }
+  if (positions.length < 3 || positions.length % 2 === 0) return { next: value, selectFrom, selectTo };
+  const keep = /* @__PURE__ */ new Set([positions[0], positions[positions.length - 1]]);
+  let next = "";
+  let cursor = 0;
+  let nextSelectFrom = selectFrom;
+  let nextSelectTo = selectTo;
+  const adjust = (position, removalStart) => {
+    if (position <= removalStart) return position;
+    if (position <= removalStart + marker.length) return removalStart;
+    return position - marker.length;
+  };
+  for (const position of positions) {
+    next += value.slice(cursor, position);
+    if (keep.has(position)) {
+      next += marker;
+    } else {
+      nextSelectFrom = adjust(nextSelectFrom, position);
+      nextSelectTo = adjust(nextSelectTo, position);
+    }
+    cursor = position + marker.length;
+  }
+  next += value.slice(cursor);
+  return {
+    next,
+    selectFrom: Math.max(0, Math.min(next.length, nextSelectFrom)),
+    selectTo: Math.max(0, Math.min(next.length, nextSelectTo))
+  };
+}
+function normalizeStyleNoise(value, selectFrom, selectTo) {
+  let markerResult = normalizeMarkerPairs(value, "**", selectFrom, selectTo);
+  markerResult = normalizeMarkerPairs(markerResult.next, "*", markerResult.selectFrom, markerResult.selectTo);
+  markerResult = normalizeMarkerPairs(markerResult.next, "`", markerResult.selectFrom, markerResult.selectTo);
+  if (markerResult.next !== value) {
+    return normalizeStyleNoise(markerResult.next, markerResult.selectFrom, markerResult.selectTo);
+  }
+  const removals = [];
+  const collect = (pattern) => {
+    let match;
+    while (match = pattern.exec(value)) {
+      removals.push({ start: match.index, end: match.index + match[0].length });
+    }
+  };
+  collect(/\*{3,}/g);
+  collect(/\{color:#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?(?:[0-9a-fA-F]{2})?\}\s*\{\/color\}/g);
+  if (!removals.length) return { next: value, selectFrom, selectTo };
+  const merged = removals.sort((a, b) => a.start - b.start).reduce((items, item) => {
+    const previous = items[items.length - 1];
+    if (previous && item.start <= previous.end) {
+      previous.end = Math.max(previous.end, item.end);
+    } else {
+      items.push({ ...item });
+    }
+    return items;
+  }, []);
+  let next = "";
+  let cursor = 0;
+  let nextSelectFrom = selectFrom;
+  let nextSelectTo = selectTo;
+  const adjust = (position, removal) => {
+    const length = removal.end - removal.start;
+    if (position <= removal.start) return position;
+    if (position >= removal.end) return position - length;
+    return removal.start;
+  };
+  for (const removal of merged) {
+    next += value.slice(cursor, removal.start);
+    nextSelectFrom = adjust(nextSelectFrom, removal);
+    nextSelectTo = adjust(nextSelectTo, removal);
+    cursor = removal.end;
+  }
+  next += value.slice(cursor);
+  const result = {
+    next,
+    selectFrom: Math.max(0, Math.min(next.length, nextSelectFrom)),
+    selectTo: Math.max(0, Math.min(next.length, nextSelectTo))
+  };
+  if (/\{color:#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?(?:[0-9a-fA-F]{2})?\}\s*\{\/color\}/.test(result.next)) {
+    return normalizeStyleNoise(result.next, result.selectFrom, result.selectTo);
+  }
+  return result;
+}
+function splitSimpleWrapper(value, wrapper, range, left, right) {
+  const before = value.slice(wrapper.contentStart, range.from);
+  const selected = value.slice(range.from, range.to);
+  const after = value.slice(range.to, wrapper.contentEnd);
+  const wrap = (text) => text ? `${left}${text}${right}` : "";
+  const replacement = `${wrap(before)}${selected}${wrap(after)}`;
+  const selectFrom = wrapper.wrapperStart + wrap(before).length;
+  const next = value.slice(0, wrapper.wrapperStart) + replacement + value.slice(wrapper.wrapperEnd);
+  return normalizeStyleNoise(next, selectFrom, selectFrom + selected.length);
+}
+function splitLinkWrapper(value, wrapper, range) {
+  if (!wrapper) return null;
+  const before = value.slice(wrapper.contentStart, range.from);
+  const selected = value.slice(range.from, range.to);
+  const after = value.slice(range.to, wrapper.contentEnd);
+  const wrap = (text) => text ? `[${text}](${wrapper.url})` : "";
+  const replacement = `${wrap(before)}${selected}${wrap(after)}`;
+  const selectFrom = wrapper.wrapperStart + wrap(before).length;
+  const next = value.slice(0, wrapper.wrapperStart) + replacement + value.slice(wrapper.wrapperEnd);
+  return { next, selectFrom, selectTo: selectFrom + selected.length };
+}
+function smartWrapSelection(value, start, end, left, right, fallbackText) {
+  const range = getSmartTextRange(value, start, end);
+  if (range.from === range.to) {
+    const result = wrapSelection(value, start, end, left, right, fallbackText);
+    return normalizeStyleNoise(result.next, result.selectFrom, result.selectTo);
+  }
+  const wrapper = left === "*" && right === "*" ? findItalicWrapper(value, range.from, range.to) : findMarkdownWrapper(value, range.from, range.to, left, right);
+  if (wrapper) {
+    return splitSimpleWrapper(value, wrapper, range, left, right);
+  }
+  const expanded = expandRangeToTouchedInlineWrappers(value, range, left, right);
+  const selected = value.slice(expanded.from, expanded.to);
+  const inner = stripInlineStyleMarkers(selected, left, right);
+  const next = value.slice(0, expanded.from) + left + inner + right + value.slice(expanded.to);
+  const selectFrom = expanded.from + left.length;
+  const selectTo = selectFrom + inner.length;
+  return normalizeStyleNoise(next, selectFrom, selectTo);
+}
+function smartLinkSelection(value, start, end, url) {
+  const range = getSmartTextRange(value, start, end);
+  const wrapper = findLinkWrapper(value, range.from, range.to);
+  if (wrapper) return splitLinkWrapper(value, wrapper, range);
+  const selected = range.from === range.to ? "texto" : value.slice(range.from, range.to);
+  const inner = selected.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+|mailto:[^\s)]+|\/[^\s)]+)\)/g, "$1");
+  const next = value.slice(0, range.from) + `[${inner}](${url})` + value.slice(range.to);
+  const selectFrom = range.from + 1;
+  return { next, selectFrom, selectTo: selectFrom + inner.length };
+}
+function readColorOpen(value, index) {
+  var _a;
+  const match = value.slice(index).match(/^\{color:(#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?(?:[0-9a-fA-F]{2})?)\}/);
+  return match ? { color: (_a = match[1]) != null ? _a : null, length: match[0].length } : null;
+}
+function collectColorWrappers(value) {
+  const wrappers = [];
+  const stack = [];
+  for (let index = 0; index < value.length; index += 1) {
+    const open = readColorOpen(value, index);
+    if (open) {
+      stack.push({
+        wrapperStart: index,
+        contentStart: index + open.length,
+        color: open.color
+      });
+      index += open.length - 1;
+      continue;
+    }
+    if (value.startsWith("{/color}", index)) {
+      const current = stack.pop();
+      if (current) {
+        wrappers.push({
+          ...current,
+          contentEnd: index,
+          wrapperEnd: index + "{/color}".length,
+          inner: value.slice(current.contentStart, index)
+        });
+      }
+      index += "{/color}".length - 1;
+    }
+  }
+  return wrappers.sort((a, b) => a.wrapperStart - b.wrapperStart);
+}
+function parseColorUnits(value) {
+  var _a, _b;
+  const units = [];
+  const stack = [];
+  for (let index = 0; index < value.length; index += 1) {
+    const open = readColorOpen(value, index);
+    if (open) {
+      stack.push(open.color);
+      index += open.length - 1;
+      continue;
+    }
+    if (value.startsWith("{/color}", index)) {
+      stack.pop();
+      index += "{/color}".length - 1;
+      continue;
+    }
+    units.push({
+      text: (_a = value[index]) != null ? _a : "",
+      color: (_b = stack[stack.length - 1]) != null ? _b : null,
+      rawStart: index,
+      rawEnd: index + 1
+    });
+  }
+  return units;
+}
+function rawOffsetToColorUnitIndex(units, offset) {
+  for (let index = 0; index < units.length; index += 1) {
+    const unit = units[index];
+    if (!unit) continue;
+    if (offset <= unit.rawStart) return index;
+    if (offset < unit.rawEnd) return index;
+  }
+  return units.length;
+}
+function serializeColorUnits(units, selectFromIndex, selectToIndex) {
+  var _a;
+  let next = "";
+  let activeColor = null;
+  let selectFrom;
+  let selectTo;
+  const closeColor = () => {
+    if (!activeColor) return;
+    next += "{/color}";
+    activeColor = null;
+  };
+  const openColor = (color) => {
+    if (!color) return;
+    next += `{color:${color}}`;
+    activeColor = color;
+  };
+  for (let index = 0; index < units.length; index += 1) {
+    const unit = units[index];
+    if (!unit) continue;
+    if (unit.color !== activeColor) {
+      closeColor();
+      openColor(unit.color);
+    }
+    if (index === selectFromIndex) selectFrom = next.length;
+    next += unit.text;
+    if (index + 1 === selectToIndex) selectTo = next.length;
+  }
+  closeColor();
+  return {
+    next,
+    selectFrom: selectFrom != null ? selectFrom : next.length,
+    selectTo: (_a = selectTo != null ? selectTo : selectFrom) != null ? _a : next.length
+  };
+}
+function findSelectionColor(value, from, to, activeOffset) {
+  var _a, _b;
+  const wrappers = collectColorWrappers(value);
+  if (!wrappers.length) return null;
+  const normalizedFrom = Math.max(0, Math.min(value.length, from));
+  const normalizedTo = Math.max(normalizedFrom, Math.min(value.length, to));
+  const preferredOffsets = [
+    typeof activeOffset === "number" ? activeOffset : null,
+    normalizedTo > normalizedFrom ? normalizedTo - 1 : normalizedFrom,
+    normalizedFrom
+  ];
+  for (const offset of preferredOffsets) {
+    if (offset === null) continue;
+    const point = Math.max(normalizedFrom, Math.min(normalizedTo, offset));
+    const match = wrappers.filter((wrapper) => point >= wrapper.contentStart && point <= wrapper.contentEnd).sort((a, b) => a.contentEnd - a.contentStart - (b.contentEnd - b.contentStart) || b.contentStart - a.contentStart)[0];
+    if (match == null ? void 0 : match.color) return match.color;
+  }
+  const overlapping = wrappers.filter((wrapper) => Math.max(wrapper.contentStart, normalizedFrom) < Math.min(wrapper.contentEnd, normalizedTo)).sort((a, b) => b.contentStart - a.contentStart || b.wrapperStart - a.wrapperStart);
+  return (_b = (_a = overlapping[0]) == null ? void 0 : _a.color) != null ? _b : null;
+}
+function applyColorToSelection(value, start, end, color) {
+  const range = getSmartTextRange(value, start, end);
+  if (range.from === range.to) {
+    return wrapSelection(value, start, end, `{color:${color}}`, "{/color}", "texto");
+  }
+  const units = parseColorUnits(value);
+  const fromIndex = rawOffsetToColorUnitIndex(units, range.from);
+  const toIndex = rawOffsetToColorUnitIndex(units, range.to);
+  const selectFromIndex = Math.min(fromIndex, toIndex);
+  const selectToIndex = Math.max(fromIndex, toIndex);
+  for (let index = selectFromIndex; index < selectToIndex; index += 1) {
+    if (units[index]) units[index].color = color;
+  }
+  return serializeColorUnits(units, selectFromIndex, selectToIndex);
+}
+function detectSelectionMarks(value, range) {
+  const normalized = normalizeRange(value, range.start, range.end);
+  const color = findSelectionColor(value, normalized.from, normalized.to, range.activeOffset);
+  return {
+    bold: Boolean(findMarkdownWrapper(value, normalized.from, normalized.to, "**", "**")),
+    italic: Boolean(findItalicWrapper(value, normalized.from, normalized.to)),
+    code: Boolean(findMarkdownWrapper(value, normalized.from, normalized.to, "`", "`")),
+    link: Boolean(findLinkWrapper(value, normalized.from, normalized.to)),
+    color
+  };
+}
 function prefixLines(block, prefix) {
   const lines = block.split("\n");
   return lines.map((l) => l.trim().length ? prefix + l : l).join("\n");
 }
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function escapeAttr(value) {
+  return escapeHtml(value).replace(/`/g, "&#096;");
+}
+function decodeBasicEntities(value) {
+  return String(value || "").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#039;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+}
+function safeMediaUrl(value, kind) {
+  const raw = decodeBasicEntities(value).trim();
+  if (!raw) return null;
+  const lower = raw.toLowerCase();
+  if (lower.startsWith("http://") || lower.startsWith("https://")) return raw;
+  if (kind === "image" && /^data:image\/(png|jpe?g|gif|webp);base64,/i.test(raw)) return raw;
+  if (kind === "video" && /^data:video\/(mp4|webm|ogg);base64,/i.test(raw)) return raw;
+  return null;
+}
+function safeColor(value) {
+  const color = decodeBasicEntities(value).trim();
+  return /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?([0-9a-fA-F]{2})?$/.test(color) ? color : null;
+}
+function videoEmbedUrl(value) {
+  var _a, _b, _c;
+  try {
+    const url = new URL(decodeBasicEntities(value).trim());
+    const host = url.hostname.replace(/^www\./, "").replace(/^m\./, "").toLowerCase();
+    if (host === "youtu.be") {
+      const id = url.pathname.split("/").filter(Boolean)[0];
+      return id ? `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}` : null;
+    }
+    if (host === "youtube.com" || host === "music.youtube.com") {
+      const embed = (_a = url.pathname.match(/^\/embed\/([^/?#]+)/)) == null ? void 0 : _a[1];
+      const shorts = (_b = url.pathname.match(/^\/shorts\/([^/?#]+)/)) == null ? void 0 : _b[1];
+      const id = embed || shorts || url.searchParams.get("v");
+      return id ? `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}` : null;
+    }
+    if (host === "vimeo.com") {
+      const id = url.pathname.split("/").filter(Boolean).find((part) => /^\d+$/.test(part));
+      return id ? `https://player.vimeo.com/video/${encodeURIComponent(id)}` : null;
+    }
+    if (host === "player.vimeo.com") {
+      const id = (_c = url.pathname.match(/\/video\/(\d+)/)) == null ? void 0 : _c[1];
+      return id ? `https://player.vimeo.com/video/${encodeURIComponent(id)}` : null;
+    }
+  } catch {
+  }
+  return null;
+}
+function renderImageMarkdown(rawUrl, alt, attrs = "") {
+  const url = safeMediaUrl(rawUrl, "image");
+  if (!url) return null;
+  return `<figure${attrs}><img src="${escapeAttr(url)}" alt="${escapeAttr(decodeBasicEntities(alt != null ? alt : ""))}" loading="lazy" /></figure>`;
+}
+function renderVideoMarkdown(rawUrl, title, attrs = "") {
+  const url = safeMediaUrl(rawUrl, "video");
+  if (!url) return null;
+  const label = title ? `<figcaption>${escapeHtml(decodeBasicEntities(title))}</figcaption>` : "";
+  const embed = videoEmbedUrl(url);
+  if (embed) {
+    return `<figure${attrs}><iframe src="${escapeAttr(embed)}" title="${escapeAttr(decodeBasicEntities(title || "Video"))}" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>${label}</figure>`;
+  }
+  return `<figure${attrs}><video controls preload="metadata" src="${escapeAttr(url)}"></video>${label}</figure>`;
+}
+function parseMarkdownTableRow(value) {
+  const trimmed = String(value || "").trim();
+  if (!trimmed.includes("|")) return null;
+  const normalized = trimmed.replace(/^\|/, "").replace(/\|$/, "");
+  const cells = normalized.split("|").map((cell) => cell.trim());
+  return cells.length >= 2 ? cells : null;
+}
+function isMarkdownTableSeparator(cells) {
+  return Boolean((cells == null ? void 0 : cells.length) && cells.every((cell) => /^:?-{3,}:?$/.test(cell)));
+}
+function getMarkdownLines(value) {
+  const normalized = value.replace(/\r\n/g, "\n");
+  const parts = normalized.split("\n");
+  let cursor = 0;
+  return parts.map((text) => {
+    const line = { text, start: cursor, end: cursor + text.length };
+    cursor = line.end + 1;
+    return line;
+  });
+}
+function rangesOverlap(a, start, end) {
+  if (!a) return false;
+  return a.start < end && a.end > start;
+}
+function rangeAttrs(options, kind, start, end) {
+  if (!(options == null ? void 0 : options.includeRanges)) return "";
+  const selected = rangesOverlap(options.selectedRange, start, end) ? ' data-md-selected="true"' : "";
+  return ` data-md-kind="${escapeAttr(kind)}" data-md-start="${start}" data-md-end="${end}"${selected}`;
+}
+function applyInlineMarks(html, marks) {
+  let next = html;
+  if (marks.code) next = `<code>${next}</code>`;
+  if (marks.italic) next = `<em>${next}</em>`;
+  if (marks.bold) next = `<strong>${next}</strong>`;
+  if (marks.color) next = `<span style="color:${marks.color}">${next}</span>`;
+  if (marks.link) next = `<a href="${escapeAttr(marks.link)}" target="_blank" rel="noopener noreferrer">${next}</a>`;
+  return next;
+}
+function renderInlineMarkdown(value) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const source = normalizeStyleNoise(value, 0, value.length).next;
+  const html = [];
+  const state = {
+    bold: false,
+    italic: false,
+    code: false,
+    color: null
+  };
+  const colorStack = [];
+  let buffer = "";
+  const flush = () => {
+    if (!buffer) return;
+    html.push(applyInlineMarks(escapeHtml(buffer), state));
+    buffer = "";
+  };
+  for (let index = 0; index < source.length; index += 1) {
+    const rest = source.slice(index);
+    const image = /^!\[([^\]]*)\]\(([^)\s]+)\)/.exec(rest);
+    if (image) {
+      const rendered = renderImageMarkdown((_a = image[2]) != null ? _a : "", (_b = image[1]) != null ? _b : "");
+      if (rendered) {
+        flush();
+        html.push(rendered);
+        index += image[0].length - 1;
+        continue;
+      }
+    }
+    const video = /^@\[video(?::([^\]]*))?\]\(([^)\s]+)\)/.exec(rest);
+    if (video) {
+      const rendered = renderVideoMarkdown((_c = video[2]) != null ? _c : "", (_d = video[1]) != null ? _d : "");
+      if (rendered) {
+        flush();
+        html.push(rendered);
+        index += video[0].length - 1;
+        continue;
+      }
+    }
+    const colorOpen = /^\{color:([^}]+)\}/.exec(rest);
+    if (colorOpen) {
+      const color = safeColor((_e = colorOpen[1]) != null ? _e : "");
+      flush();
+      colorStack.push(state.color);
+      state.color = color != null ? color : state.color;
+      index += colorOpen[0].length - 1;
+      continue;
+    }
+    if (rest.startsWith("{/color}")) {
+      flush();
+      state.color = colorStack.length ? (_f = colorStack.pop()) != null ? _f : null : null;
+      index += "{/color}".length - 1;
+      continue;
+    }
+    const link = /^\[([^\]]+)\]\((https?:\/\/[^\s)]+|mailto:[^\s)]+|\/[^\s)]+)\)/.exec(rest);
+    if (link) {
+      flush();
+      html.push(applyInlineMarks(renderInlineMarkdown((_g = link[1]) != null ? _g : ""), { ...state, link: (_h = link[2]) != null ? _h : "" }));
+      index += link[0].length - 1;
+      continue;
+    }
+    if (rest.startsWith("**")) {
+      flush();
+      state.bold = !state.bold;
+      index += 1;
+      continue;
+    }
+    const current = (_i = source[index]) != null ? _i : "";
+    if (current === "`") {
+      flush();
+      state.code = !state.code;
+      continue;
+    }
+    if (current === "*") {
+      flush();
+      state.italic = !state.italic;
+      continue;
+    }
+    buffer += current;
+  }
+  flush();
+  return html.join("");
+}
+function renderMarkdown(value, options) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const lines = getMarkdownLines(value);
+  const html = [];
+  const paragraph = [];
+  const code = [];
+  let codeOpen = false;
+  let codeLang = "";
+  let listType = null;
+  let listItem = null;
+  const closeListItem = () => {
+    if (!listItem) return;
+    html.push(`<li${rangeAttrs(options, "list-item", listItem.contentStart, listItem.end)}>${listItem.parts.join("<br />")}</li>`);
+    listItem = null;
+  };
+  const closeList = () => {
+    if (!listType) return;
+    closeListItem();
+    html.push(`</${listType}>`);
+    listType = null;
+  };
+  const flushParagraph = () => {
+    var _a2, _b2, _c2, _d2;
+    if (!paragraph.length) return;
+    closeList();
+    const start = (_b2 = (_a2 = paragraph[0]) == null ? void 0 : _a2.start) != null ? _b2 : 0;
+    const end = (_d2 = (_c2 = paragraph[paragraph.length - 1]) == null ? void 0 : _c2.end) != null ? _d2 : start;
+    const content = (options == null ? void 0 : options.includeRanges) ? paragraph.map((line) => `<span${rangeAttrs(options, "line", line.start, line.end)}>${renderInlineMarkdown(line.text.trimEnd())}</span>`).join("<br />") : paragraph.map((line) => renderInlineMarkdown(line.text.trimEnd())).join("<br />");
+    html.push(`<p${rangeAttrs(options, "paragraph", start, end)}>${content}</p>`);
+    paragraph.length = 0;
+  };
+  const renderCodeBlock = () => {
+    var _a2, _b2, _c2, _d2;
+    const raw = code.map((line) => line.text).join("\n");
+    const lang = codeLang.trim().toLowerCase();
+    const start = (_b2 = (_a2 = code[0]) == null ? void 0 : _a2.start) != null ? _b2 : 0;
+    const end = (_d2 = (_c2 = code[code.length - 1]) == null ? void 0 : _c2.end) != null ? _d2 : start;
+    if (lang === "mermaid" || lang === "uml") {
+      html.push(`<div class="fp-markdown-diagram"${rangeAttrs(options, "diagram", start, end)} data-diagram="${escapeAttr(raw)}"><pre><code class="language-${escapeAttr(lang)}">${escapeHtml(raw)}</code></pre></div>`);
+      return;
+    }
+    html.push(`<pre${rangeAttrs(options, "code", start, end)}><code>${escapeHtml(raw)}</code></pre>`);
+  };
+  const openList = (nextType) => {
+    flushParagraph();
+    if (listType === nextType) return;
+    closeList();
+    html.push(`<${nextType}>`);
+    listType = nextType;
+  };
+  const appendListItem = (line) => {
+    if (!listItem) return false;
+    listItem.parts.push(renderInlineMarkdown(line.text.trim()));
+    listItem.end = line.end;
+    return true;
+  };
+  const appendListItemGap = (line) => {
+    if (!listItem) return false;
+    listItem.parts.push('<span class="fp-markdown-list-gap" aria-hidden="true"></span>');
+    listItem.end = line.end;
+    return true;
+  };
+  const nextNonEmptyLine = (fromIndex) => {
+    for (let index = fromIndex; index < lines.length; index += 1) {
+      const nextLine = lines[index];
+      if (!(nextLine == null ? void 0 : nextLine.text.trim())) continue;
+      return nextLine.text.trim();
+    }
+    return "";
+  };
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex += 1) {
+    const currentLine = (_a = lines[lineIndex]) != null ? _a : { text: "", start: 0, end: 0 };
+    const line = currentLine.text;
+    const trimmed = line.trim();
+    const fence = /^```([A-Za-z0-9_-]+)?/.exec(trimmed);
+    if (fence) {
+      if (codeOpen) {
+        renderCodeBlock();
+        code.length = 0;
+        codeOpen = false;
+        codeLang = "";
+      } else {
+        flushParagraph();
+        closeList();
+        codeOpen = true;
+        codeLang = (_b = fence[1]) != null ? _b : "";
+      }
+      continue;
+    }
+    if (codeOpen) {
+      code.push(currentLine);
+      continue;
+    }
+    if (!trimmed) {
+      flushParagraph();
+      if (line.length > 0 && appendListItemGap(currentLine)) {
+        continue;
+      }
+      const nextTrimmed = nextNonEmptyLine(lineIndex + 1);
+      const keepsOrderedList = listType === "ol" && /^\d+\.\s+/.test(nextTrimmed);
+      const keepsUnorderedList = listType === "ul" && /^[-*]\s+/.test(nextTrimmed);
+      if ((keepsOrderedList || keepsUnorderedList) && appendListItemGap(currentLine)) {
+        continue;
+      }
+      closeList();
+      html.push(`<div class="fp-markdown-empty-line"${rangeAttrs(options, "empty-line", currentLine.start, currentLine.end)}></div>`);
+      continue;
+    }
+    if (/^---+$/.test(trimmed)) {
+      flushParagraph();
+      closeList();
+      html.push(`<hr${rangeAttrs(options, "divider", currentLine.start, currentLine.end)} />`);
+      continue;
+    }
+    const imageBlock = /^!\[([^\]]*)\]\(([^)\s]+)\)$/.exec(trimmed);
+    if (imageBlock) {
+      const rendered = renderImageMarkdown(imageBlock[2], imageBlock[1], rangeAttrs(options, "image", currentLine.start, currentLine.end));
+      if (rendered) {
+        flushParagraph();
+        closeList();
+        html.push(rendered);
+        continue;
+      }
+    }
+    const videoBlock = /^@\[video(?::([^\]]*))?\]\(([^)\s]+)\)$/.exec(trimmed);
+    if (videoBlock) {
+      const rendered = renderVideoMarkdown(videoBlock[2], videoBlock[1], rangeAttrs(options, "video", currentLine.start, currentLine.end));
+      if (rendered) {
+        flushParagraph();
+        closeList();
+        html.push(rendered);
+        continue;
+      }
+    }
+    const tableHead = parseMarkdownTableRow(trimmed);
+    const tableSeparator = parseMarkdownTableRow((_d = (_c = lines[lineIndex + 1]) == null ? void 0 : _c.text) != null ? _d : "");
+    if (tableHead && isMarkdownTableSeparator(tableSeparator)) {
+      flushParagraph();
+      closeList();
+      const rows = [];
+      let tableEnd = (_f = (_e = lines[lineIndex + 1]) == null ? void 0 : _e.end) != null ? _f : currentLine.end;
+      let nextIndex = lineIndex + 2;
+      while (nextIndex < lines.length) {
+        const row = parseMarkdownTableRow((_h = (_g = lines[nextIndex]) == null ? void 0 : _g.text) != null ? _h : "");
+        if (!row || isMarkdownTableSeparator(row)) break;
+        rows.push(row);
+        tableEnd = (_j = (_i = lines[nextIndex]) == null ? void 0 : _i.end) != null ? _j : tableEnd;
+        nextIndex += 1;
+      }
+      const thead = `<thead><tr>${tableHead.map((cell) => `<th>${renderInlineMarkdown(cell)}</th>`).join("")}</tr></thead>`;
+      const tbody = rows.length ? `<tbody>${rows.map((row) => `<tr>${tableHead.map((_, index) => {
+        var _a2;
+        return `<td>${renderInlineMarkdown((_a2 = row[index]) != null ? _a2 : "")}</td>`;
+      }).join("")}</tr>`).join("")}</tbody>` : "";
+      html.push(`<table${rangeAttrs(options, "table", currentLine.start, tableEnd)}>${thead}${tbody}</table>`);
+      lineIndex = nextIndex - 1;
+      continue;
+    }
+    const heading = /^(#{1,4})\s+(.+)$/.exec(trimmed);
+    if (heading) {
+      flushParagraph();
+      closeList();
+      const level = heading[1].length;
+      const contentStart = currentLine.start + heading[1].length + ((_l = (_k = line.slice(heading[1].length).match(/^\s+/)) == null ? void 0 : _k[0].length) != null ? _l : 0);
+      html.push(`<h${level}${rangeAttrs(options, "heading", contentStart, currentLine.end)}>${renderInlineMarkdown(heading[2])}</h${level}>`);
+      continue;
+    }
+    const quote = /^>\s?(.+)$/.exec(trimmed);
+    if (quote) {
+      flushParagraph();
+      closeList();
+      const markerIndex = line.indexOf(">");
+      const contentStart = currentLine.start + markerIndex + 1 + (line.slice(markerIndex + 1).startsWith(" ") ? 1 : 0);
+      html.push(`<blockquote${rangeAttrs(options, "quote", contentStart, currentLine.end)}>${renderInlineMarkdown(quote[1])}</blockquote>`);
+      continue;
+    }
+    const unordered = /^[-*]\s+(.+)$/.exec(trimmed);
+    if (unordered) {
+      openList("ul");
+      closeListItem();
+      const markerIndex = Math.max(line.indexOf("-"), line.indexOf("*"));
+      const contentStart = currentLine.start + markerIndex + 2;
+      listItem = { start: currentLine.start, end: currentLine.end, contentStart, parts: [renderInlineMarkdown(unordered[1])] };
+      continue;
+    }
+    const ordered = /^\d+\.\s+(.+)$/.exec(trimmed);
+    if (ordered) {
+      openList("ol");
+      closeListItem();
+      const marker = line.match(/\d+\.\s+/);
+      const contentStart = currentLine.start + ((_m = marker == null ? void 0 : marker.index) != null ? _m : 0) + ((_n = marker == null ? void 0 : marker[0].length) != null ? _n : 0);
+      listItem = { start: currentLine.start, end: currentLine.end, contentStart, parts: [renderInlineMarkdown(ordered[1])] };
+      continue;
+    }
+    if (listType && appendListItem(currentLine)) {
+      continue;
+    }
+    paragraph.push(currentLine);
+  }
+  if (codeOpen) {
+    renderCodeBlock();
+  }
+  flushParagraph();
+  closeList();
+  return html.join("");
+}
+const COLOR_SWATCHES = [
+  "#111827",
+  "#6b7280",
+  "#dc2626",
+  "#ea580c",
+  "#ca8a04",
+  "#16a34a",
+  "#0891b2",
+  "#2563eb",
+  "#7c3aed",
+  "#db2777"
+];
+const MARKDOWN_EDITOR_SAMPLE = [
+  "# P\xE1gina de ejemplo",
+  "",
+  "{color:#2563eb}Este contenido muestra varios bloques que se pueden construir con el editor visual.{/color}",
+  "",
+  "## Texto enriquecido",
+  "",
+  "Puedes combinar **negritas**, *cursivas*, `c\xF3digo`, enlaces como [ui-lib](https://example.com) y colores para destacar informaci\xF3n importante.",
+  "",
+  "- Bloques de texto",
+  "- Listas y citas",
+  "- Im\xE1genes, videos, tablas y diagramas",
+  "",
+  "> Este bloque sirve para resaltar una nota, advertencia o resumen dentro del contenido.",
+  "",
+  "## Imagen",
+  "",
+  "![Imagen de ejemplo](https://picsum.photos/1200/640)",
+  "",
+  "## Video",
+  "",
+  "@[video:Video de ejemplo](https://www.youtube.com/watch?v=jNQXAC9IVRw)",
+  "",
+  "## Tabla",
+  "",
+  "| Bloque | Uso | Resultado |",
+  "| --- | --- | --- |",
+  "| T\xEDtulo | Separar secciones | Lectura m\xE1s clara |",
+  "| Imagen | Mostrar contexto visual | Contenido m\xE1s atractivo |",
+  "| Video | Explicar procesos | Mejor comprensi\xF3n |",
+  "",
+  "## Diagrama UML",
+  "",
+  "```mermaid",
+  "classDiagram",
+  "  class Pagina {",
+  "    +string titulo",
+  "    +string contenido",
+  "    +publicar()",
+  "  }",
+  "  class Medio {",
+  "    +string tipo",
+  "    +string url",
+  "  }",
+  "  Pagina --> Medio",
+  "```",
+  "",
+  "---",
+  "",
+  "Este ejemplo se puede editar, reorganizar o eliminar desde las acciones de cada bloque."
+].join("\n");
+const MARKDOWN_EDITOR_SAMPLE_WITHOUT_DIAGRAMS = [
+  "# P\xE1gina de ejemplo",
+  "",
+  "{color:#2563eb}Este contenido muestra varios bloques que se pueden construir con el editor visual.{/color}",
+  "",
+  "## Texto enriquecido",
+  "",
+  "Puedes combinar **negritas**, *cursivas*, `c\xF3digo`, enlaces como [ui-lib](https://example.com) y colores para destacar informaci\xF3n importante.",
+  "",
+  "- Bloques de texto",
+  "- Listas y citas",
+  "- Im\xE1genes, videos y tablas",
+  "",
+  "> Este bloque sirve para resaltar una nota, advertencia o resumen dentro del contenido.",
+  "",
+  "## Imagen",
+  "",
+  "![Imagen de ejemplo](https://picsum.photos/1200/640)",
+  "",
+  "## Video",
+  "",
+  "@[video:Video de ejemplo](https://www.youtube.com/watch?v=jNQXAC9IVRw)",
+  "",
+  "## Tabla",
+  "",
+  "| Bloque | Uso | Resultado |",
+  "| --- | --- | --- |",
+  "| T\xEDtulo | Separar secciones | Lectura m\xE1s clara |",
+  "| Imagen | Mostrar contexto visual | Contenido m\xE1s atractivo |",
+  "| Video | Explicar procesos | Mejor comprensi\xF3n |",
+  "",
+  "---",
+  "",
+  "Este ejemplo se puede editar, reorganizar o eliminar desde las acciones de cada bloque."
+].join("\n");
+function readFileAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      var _a;
+      return resolve(String((_a = reader.result) != null ? _a : ""));
+    };
+    reader.onerror = () => {
+      var _a;
+      return reject((_a = reader.error) != null ? _a : new Error("No se pudo leer el archivo."));
+    };
+    reader.readAsDataURL(file);
+  });
+}
+const MarkdownPreviewContent = React.memo(function MarkdownPreviewContent2({
+  html,
+  className,
+  interactive,
+  selectable,
+  showBlockControls,
+  rootRef,
+  onSelectPreviewRange,
+  onUpdateHoverBlock
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: cx(
+        "text-base leading-7 text-[var(--foreground)]",
+        "[&>*]:my-0 [&_.fp-markdown-empty-line]:h-5 [&_.fp-markdown-empty-line]:leading-none [&_.fp-markdown-list-gap]:block [&_.fp-markdown-list-gap]:h-3",
+        "[&_a]:font-medium [&_a]:text-[var(--primary)] [&_blockquote]:m-0 [&_blockquote]:border-l-4 [&_blockquote]:border-[var(--border)] [&_blockquote]:pl-3 [&_blockquote]:text-[var(--muted)]",
+        "[&_code]:rounded-md [&_code]:bg-[color-mix(in_oklab,var(--muted)_14%,transparent)] [&_code]:px-1.5 [&_code]:py-0.5",
+        interactive && "[&_[data-md-kind=line]]:block [&_[data-md-start]]:rounded-md [&_[data-md-start]]:transition [&_[data-md-start]:hover]:bg-[color-mix(in_oklab,var(--primary)_6%,transparent)]",
+        selectable && "[&_[data-md-start]]:cursor-text",
+        "[&_figcaption]:mt-2 [&_figcaption]:text-sm [&_figcaption]:text-[var(--muted)] [&_figure]:m-0",
+        showBlockControls && "[&_iframe]:pointer-events-none",
+        "[&_.fp-markdown-diagram]:overflow-auto [&_.fp-markdown-diagram]:rounded-xl [&_.fp-markdown-diagram]:border [&_.fp-markdown-diagram]:border-[var(--border)] [&_.fp-markdown-diagram]:bg-[color-mix(in_oklab,var(--card)_96%,var(--background))] [&_.fp-markdown-diagram]:p-4 [&_.fp-markdown-diagram-error]:border-[var(--danger)]",
+        "[&_h1]:m-0 [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:m-0 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:m-0 [&_h3]:text-xl [&_h3]:font-semibold [&_h4]:m-0 [&_h4]:text-lg [&_h4]:font-semibold",
+        "[&_hr]:m-0 [&_hr]:border-[var(--border)] [&_iframe]:aspect-video [&_iframe]:w-full [&_iframe]:rounded-xl [&_iframe]:border [&_iframe]:border-[var(--border)] [&_img]:block [&_img]:max-h-[520px] [&_img]:w-auto [&_img]:max-w-full [&_img]:rounded-xl [&_img]:border [&_img]:border-[var(--border)] [&_img]:object-contain",
+        "[&_ol]:m-0 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:m-0 [&_pre]:m-0 [&_pre]:overflow-auto [&_pre]:rounded-xl [&_pre]:border [&_pre]:border-[var(--border)] [&_pre]:bg-[color-mix(in_oklab,var(--foreground)_6%,transparent)] [&_pre]:p-3",
+        "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_strong]:font-semibold [&_table]:m-0 [&_table]:w-full [&_table]:border-collapse [&_table]:overflow-hidden [&_table]:rounded-xl [&_td]:border [&_td]:border-[var(--border)] [&_td]:px-3 [&_td]:py-2 [&_th]:border [&_th]:border-[var(--border)] [&_th]:bg-[color-mix(in_oklab,var(--muted)_10%,transparent)] [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold [&_ul]:m-0 [&_ul]:list-disc [&_ul]:pl-5 [&_video]:max-h-[520px] [&_video]:w-full [&_video]:rounded-xl [&_video]:border [&_video]:border-[var(--border)]",
+        className
+      ),
+      onClick: interactive ? onSelectPreviewRange : void 0,
+      onMouseUp: interactive ? onSelectPreviewRange : void 0,
+      onMouseMove: showBlockControls ? onUpdateHoverBlock : void 0,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+function MarkdownPreview({
+  value,
+  className,
+  emptyLabel = "Sin contenido.",
+  selectable = false,
+  selectedRange,
+  onSelectRange,
+  onOpenSelectionMenu,
+  showBlockControls = false,
+  onOpenBlockMenu
+}) {
+  const source = String(value != null ? value : "");
+  const interactive = selectable || showBlockControls || Boolean(onSelectRange) || Boolean(onOpenSelectionMenu) || Boolean(onOpenBlockMenu);
+  const html = React.useMemo(() => renderMarkdown(source, { includeRanges: interactive, selectedRange }), [interactive, selectedRange, source]);
+  const idPrefix = React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const shellRef = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const hoverBlockRef = React.useRef(null);
+  const hoverFrameRef = React.useRef(null);
+  const [hoverBlock, setHoverBlock] = React.useState(null);
+  const readElementRange = React.useCallback((element) => {
+    const target = element == null ? void 0 : element.closest("[data-md-start][data-md-end]");
+    if (!target) return null;
+    const start = Number(target.dataset.mdStart);
+    const end = Number(target.dataset.mdEnd);
+    if (!Number.isFinite(start) || !Number.isFinite(end) || start > end) return null;
+    return { start, end, kind: target.dataset.mdKind };
+  }, []);
+  const readSelectionBoundary = React.useCallback(
+    (node, offset) => {
+      var _a;
+      const element = node instanceof Element ? node : node.parentElement;
+      const target = element == null ? void 0 : element.closest("[data-md-start][data-md-end]");
+      if (!target || !((_a = rootRef.current) == null ? void 0 : _a.contains(target))) return null;
+      const start = Number(target.dataset.mdStart);
+      const end = Number(target.dataset.mdEnd);
+      if (!Number.isFinite(start) || !Number.isFinite(end) || start > end) return null;
+      const range = document.createRange();
+      range.selectNodeContents(target);
+      try {
+        range.setEnd(node, offset);
+      } catch {
+        return null;
+      }
+      const renderedOffset = range.toString().length;
+      const raw = source.slice(start, end);
+      const markdownOffset = start + mapRenderedOffsetToMarkdown(raw, renderedOffset);
+      return { offset: Math.max(start, Math.min(end, markdownOffset)), kind: target.dataset.mdKind };
+    },
+    [source]
+  );
+  const readExactDomSelectionRange = React.useCallback(
+    (selection) => {
+      if (!selection.rangeCount) return null;
+      const root = rootRef.current;
+      if (!root) return null;
+      const range = selection.getRangeAt(0);
+      if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return null;
+      const start = readSelectionBoundary(range.startContainer, range.startOffset);
+      const end = readSelectionBoundary(range.endContainer, range.endOffset);
+      const focus = selection.focusNode ? readSelectionBoundary(selection.focusNode, selection.focusOffset) : null;
+      if (!start || !end) return null;
+      return {
+        start: Math.min(start.offset, end.offset),
+        end: Math.max(start.offset, end.offset),
+        activeOffset: focus == null ? void 0 : focus.offset,
+        kind: start.kind === end.kind ? start.kind : "selection"
+      };
+    },
+    [readSelectionBoundary]
+  );
+  const selectPreviewRange = React.useCallback(
+    (event) => {
+      var _a;
+      const root = rootRef.current;
+      const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+      if (root && selection && !selection.isCollapsed && root.contains(selection.anchorNode) && root.contains(selection.focusNode)) {
+        const range2 = readExactDomSelectionRange(selection);
+        if (range2 && range2.start !== range2.end) {
+          onSelectRange == null ? void 0 : onSelectRange(range2);
+          onOpenSelectionMenu == null ? void 0 : onOpenSelectionMenu(event, range2);
+          return;
+        }
+      }
+      const range = readElementRange(event.target);
+      if (!range) return;
+    },
+    [onOpenSelectionMenu, onSelectRange, readElementRange, readExactDomSelectionRange]
+  );
+  const updateHoverBlock = React.useCallback(
+    (event) => {
+      var _a;
+      if (!showBlockControls) return;
+      const root = rootRef.current;
+      const shell = shellRef.current;
+      if (!root || !shell) return;
+      const eventTarget = event.target;
+      const target = eventTarget == null ? void 0 : eventTarget.closest("[data-md-start][data-md-end]");
+      if (!eventTarget || !target || !root.contains(target)) {
+        if (hoverBlockRef.current) {
+          hoverBlockRef.current = null;
+          if (hoverFrameRef.current !== null) {
+            cancelAnimationFrame(hoverFrameRef.current);
+            hoverFrameRef.current = null;
+          }
+          setHoverBlock((current) => current ? null : current);
+        }
+        return;
+      }
+      const start = Number(target.dataset.mdStart);
+      const end = Number(target.dataset.mdEnd);
+      if (!Number.isFinite(start) || !Number.isFinite(end)) return;
+      const visualTarget = (_a = eventTarget.closest("figure, img, video, iframe, table, pre, blockquote, h1, h2, h3, h4")) != null ? _a : target;
+      const rect = visualTarget.getBoundingClientRect();
+      const shellRect = shell.getBoundingClientRect();
+      const next = {
+        start,
+        end,
+        kind: target.dataset.mdKind,
+        top: Math.round(rect.top - shellRect.top),
+        height: Math.round(Math.max(28, rect.height))
+      };
+      const previous = hoverBlockRef.current;
+      if (previous && previous.start === next.start && previous.end === next.end && previous.kind === next.kind && previous.top === next.top && previous.height === next.height) {
+        return;
+      }
+      hoverBlockRef.current = next;
+      if (hoverFrameRef.current !== null) {
+        cancelAnimationFrame(hoverFrameRef.current);
+      }
+      hoverFrameRef.current = requestAnimationFrame(() => {
+        hoverFrameRef.current = null;
+        setHoverBlock(next);
+      });
+    },
+    [showBlockControls]
+  );
+  const clearHoverBlock = React.useCallback(() => {
+    hoverBlockRef.current = null;
+    if (hoverFrameRef.current !== null) {
+      cancelAnimationFrame(hoverFrameRef.current);
+      hoverFrameRef.current = null;
+    }
+    setHoverBlock((current) => current ? null : current);
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      if (hoverFrameRef.current !== null) {
+        cancelAnimationFrame(hoverFrameRef.current);
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const nodes = Array.from(root.querySelectorAll(".fp-markdown-diagram[data-diagram]"));
+    if (!nodes.length) return;
+    let cancelled = false;
+    void import("mermaid").then((module) => {
+      const mermaid = module.default;
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme: document.documentElement.classList.contains("dark") ? "dark" : "default"
+      });
+      nodes.forEach((node, index) => {
+        var _a;
+        const diagram = (_a = node.dataset.diagram) != null ? _a : "";
+        if (!diagram.trim()) return;
+        void mermaid.render(`fpMarkdownDiagram${idPrefix}${index}`, diagram).then(({ svg }) => {
+          if (cancelled) return;
+          node.innerHTML = svg;
+        }).catch(() => {
+          node.classList.add("fp-markdown-diagram-error");
+        });
+      });
+    }).catch(() => {
+      nodes.forEach((node) => node.classList.add("fp-markdown-diagram-error"));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [html, idPrefix]);
+  if (!source.trim()) {
+    return /* @__PURE__ */ jsx("div", { className: cx("text-sm text-[var(--muted)]", className), children: emptyLabel });
+  }
+  const content = /* @__PURE__ */ jsx(
+    MarkdownPreviewContent,
+    {
+      html,
+      className,
+      interactive,
+      selectable,
+      showBlockControls,
+      rootRef,
+      onSelectPreviewRange: selectPreviewRange,
+      onUpdateHoverBlock: updateHoverBlock
+    }
+  );
+  if (!showBlockControls) return content;
+  return /* @__PURE__ */ jsxs("div", { ref: shellRef, className: "relative pl-9", onMouseLeave: clearHoverBlock, children: [
+    content,
+    hoverBlock ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0",
+        style: { top: hoverBlock.top, height: hoverBlock.height },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-9 right-0 top-0 rounded-lg border border-dashed border-[color-mix(in_oklab,var(--primary)_34%,transparent)] bg-[color-mix(in_oklab,var(--primary)_5%,transparent)]" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: "Acciones del bloque",
+              "aria-label": "Acciones del bloque",
+              className: "pointer-events-auto absolute left-0 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-lg transition hover:border-[var(--primary)] hover:text-[var(--primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+              onMouseDown: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              },
+              onClick: (event) => {
+                event.stopPropagation();
+                const range = { start: hoverBlock.start, end: hoverBlock.end, kind: hoverBlock.kind };
+                onOpenBlockMenu == null ? void 0 : onOpenBlockMenu(event, range);
+              },
+              children: /* @__PURE__ */ jsx(MenuPuntosVerticalIcon, { className: "h-4 w-4" })
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
 function MarkdownEditor({
   value,
   onChange,
@@ -51,12 +1326,129 @@ function MarkdownEditor({
   height,
   className,
   templates,
-  disabled = false
+  disabled = false,
+  fullscreenHeight = "calc(100vh - 196px)",
+  showPreview = true,
+  enablePreview = true,
+  enableFullscreen = true,
+  enableDiagrams = true,
+  labels,
+  maxImageBytes = 6 * 1024 * 1024,
+  maxVideoBytes = 24 * 1024 * 1024
 }) {
   const ref = React.useRef(null);
+  const imageInputRef = React.useRef(null);
+  const videoInputRef = React.useRef(null);
+  const uploadInsertPositionRef = React.useRef(null);
+  const blockMenuRef = React.useRef(null);
+  const selectionMenuRef = React.useRef(null);
+  const undoStackRef = React.useRef([]);
+  const redoStackRef = React.useRef([]);
+  const selectionRef = React.useRef({ start: 0, end: 0 });
+  const [blockMenu, setBlockMenu] = React.useState(null);
+  const [selectionMenu, setSelectionMenu] = React.useState(null);
+  const [visibleViews, setVisibleViews] = React.useState(() => ({
+    blocks: showPreview && enablePreview,
+    preview: false,
+    markdown: !(showPreview && enablePreview)
+  }));
+  const [fullscreen, setFullscreen] = React.useState(false);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const L = {
+    editor: "Editor",
+    preview: "Preview",
+    emptyPreview: "El preview aparecer\xE1 cuando escribas contenido.",
+    headings: "Formato",
+    paragraph: "Texto",
+    h1: "Encabezado 1",
+    h2: "Encabezado 2",
+    h3: "Encabezado 3",
+    quote: "Cita",
+    undo: "Deshacer",
+    redo: "Rehacer",
+    bold: "Negrita",
+    italic: "Cursiva",
+    code: "C\xF3digo",
+    bullets: "Lista",
+    numbers: "Lista numerada",
+    link: "Enlace",
+    color: "Color de texto",
+    insert: "Insertar",
+    imageUrl: "Imagen desde URL",
+    imageUpload: "Subir imagen",
+    videoUrl: "Video desde URL",
+    videoUpload: "Subir video",
+    table: "Tabla",
+    lineBreak: "Salto de l\xEDnea",
+    diagram: "Diagrama UML",
+    umlClass: "Diagrama de clases",
+    umlSequence: "Diagrama de secuencia",
+    divider: "Separador",
+    blocksView: "Construcci\xF3n",
+    markdownView: "Markdown",
+    previewView: "Preview",
+    sampleButton: "Construir ejemplo",
+    showPreview: "Mostrar preview",
+    hidePreview: "Ocultar preview",
+    fullscreen: "Pantalla completa",
+    exitFullscreen: "Salir de pantalla completa",
+    ...labels
+  };
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    setPortalTarget(document.body);
+  }, []);
+  React.useEffect(() => {
+    setVisibleViews((current) => {
+      if (!enablePreview) {
+        return current.markdown && !current.blocks && !current.preview ? current : { blocks: false, preview: false, markdown: true };
+      }
+      if (current.blocks || current.preview || current.markdown) return current;
+      return { blocks: true, preview: false, markdown: false };
+    });
+  }, [enablePreview]);
+  React.useEffect(() => {
+    if (!blockMenu && !selectionMenu) return;
+    const close = () => {
+      setBlockMenu(null);
+      setSelectionMenu(null);
+    };
+    const onPointerDown = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (target && (((_a = blockMenuRef.current) == null ? void 0 : _a.contains(target)) || ((_b = selectionMenuRef.current) == null ? void 0 : _b.contains(target)))) return;
+      close();
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") close();
+    };
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [blockMenu, selectionMenu]);
+  const pushUndo = React.useCallback((snapshot) => {
+    const stack = undoStackRef.current;
+    if (stack[stack.length - 1] === snapshot) return;
+    stack.push(snapshot);
+    if (stack.length > 80) stack.shift();
+  }, []);
   const apply = React.useCallback(
-    (next, selectFrom, selectTo) => {
+    (next, selectFrom, selectTo, recordHistory = true) => {
+      if (recordHistory && next !== value) {
+        pushUndo(value);
+        redoStackRef.current = [];
+      }
       onChange(next);
+      if (typeof selectFrom === "number" && typeof selectTo === "number") {
+        selectionRef.current = { start: selectFrom, end: selectTo };
+      }
       const el = ref.current;
       if (!el) return;
       requestAnimationFrame(() => {
@@ -69,46 +1461,267 @@ function MarkdownEditor({
         }
       });
     },
-    [onChange]
+    [onChange, pushUndo, value]
   );
+  const rememberSelection = React.useCallback(() => {
+    var _a, _b, _c;
+    const el = ref.current;
+    if (!el) return selectionRef.current;
+    selectionRef.current = {
+      start: (_a = el.selectionStart) != null ? _a : 0,
+      end: (_c = (_b = el.selectionEnd) != null ? _b : el.selectionStart) != null ? _c : 0
+    };
+    return selectionRef.current;
+  }, []);
+  const activeSelection = React.useCallback(() => {
+    var _a, _b;
+    const el = ref.current;
+    if (!el) return selectionRef.current;
+    if (typeof document !== "undefined" && document.activeElement !== el) {
+      return selectionRef.current;
+    }
+    const start = (_a = el.selectionStart) != null ? _a : selectionRef.current.start;
+    const end = (_b = el.selectionEnd) != null ? _b : selectionRef.current.end;
+    selectionRef.current = { start, end };
+    return selectionRef.current;
+  }, []);
+  const selectMarkdownRange = React.useCallback((range) => {
+    const start = Math.max(0, Math.min(value.length, range.start));
+    const end = Math.max(0, Math.min(value.length, range.end));
+    const next = { start: Math.min(start, end), end: Math.max(start, end) };
+    selectionRef.current = next;
+    requestAnimationFrame(() => {
+      var _a;
+      try {
+        (_a = ref.current) == null ? void 0 : _a.setSelectionRange(next.start, next.end);
+      } catch {
+      }
+    });
+  }, [value.length]);
+  const handleTextChange = React.useCallback(
+    (next) => {
+      if (next !== value) {
+        pushUndo(value);
+        redoStackRef.current = [];
+      }
+      onChange(next);
+    },
+    [onChange, pushUndo, value]
+  );
+  const doUndo = React.useCallback(() => {
+    const previous = undoStackRef.current.pop();
+    if (previous === void 0) return;
+    redoStackRef.current.push(value);
+    apply(previous, previous.length, previous.length, false);
+  }, [apply, value]);
+  const doRedo = React.useCallback(() => {
+    const next = redoStackRef.current.pop();
+    if (next === void 0) return;
+    pushUndo(value);
+    apply(next, next.length, next.length, false);
+  }, [apply, pushUndo, value]);
   const actWrap = React.useCallback(
     (left, right, fallbackText) => {
       var _a, _b;
-      const el = ref.current;
-      if (!el) return;
-      const { next, selectFrom, selectTo } = wrapSelection(el.value, (_a = el.selectionStart) != null ? _a : 0, (_b = el.selectionEnd) != null ? _b : 0, left, right, fallbackText);
+      const current = (_b = (_a = ref.current) == null ? void 0 : _a.value) != null ? _b : value;
+      const selection = activeSelection();
+      const { next, selectFrom, selectTo } = smartWrapSelection(current, selection.start, selection.end, left, right, fallbackText);
       apply(next, selectFrom, selectTo);
     },
-    [apply]
+    [activeSelection, apply, value]
   );
+  const actLink = React.useCallback(() => {
+    var _a, _b;
+    const current = (_b = (_a = ref.current) == null ? void 0 : _a.value) != null ? _b : value;
+    const selection = activeSelection();
+    const range = getSmartTextRange(current, selection.start, selection.end);
+    const wrapper = findLinkWrapper(current, range.from, range.to);
+    if (wrapper) {
+      const result2 = splitLinkWrapper(current, wrapper, range);
+      if (result2) apply(result2.next, result2.selectFrom, result2.selectTo);
+      return;
+    }
+    const url = safeWindowPrompt("URL del enlace", "https://");
+    if (!url) return;
+    const result = smartLinkSelection(current, selection.start, selection.end, url);
+    if (result) apply(result.next, result.selectFrom, result.selectTo);
+  }, [activeSelection, apply, value]);
   const actPrefix = React.useCallback(
     (prefix) => {
       var _a, _b;
-      const el = ref.current;
-      if (!el) return;
-      const { lineStart, lineEnd, block } = getSelectedLines(el.value, (_a = el.selectionStart) != null ? _a : 0, (_b = el.selectionEnd) != null ? _b : 0);
+      const current = (_b = (_a = ref.current) == null ? void 0 : _a.value) != null ? _b : value;
+      const selection = activeSelection();
+      const { lineStart, lineEnd, block } = getSelectedLines(current, selection.start, selection.end);
       const replaced = prefixLines(block, prefix);
-      const next = el.value.slice(0, lineStart) + replaced + el.value.slice(lineEnd);
+      const next = current.slice(0, lineStart) + replaced + current.slice(lineEnd);
       apply(next, lineStart, lineStart + replaced.length);
     },
-    [apply]
+    [activeSelection, apply, value]
   );
   const actInsert = React.useCallback(
     (text) => {
       var _a, _b;
-      const el = ref.current;
-      if (!el) return;
-      const start = (_a = el.selectionStart) != null ? _a : 0;
-      const end = (_b = el.selectionEnd) != null ? _b : 0;
-      const a = Math.max(0, Math.min(el.value.length, start));
-      const b = Math.max(0, Math.min(el.value.length, end));
+      const current = (_b = (_a = ref.current) == null ? void 0 : _a.value) != null ? _b : value;
+      const selection = activeSelection();
+      const start = selection.start;
+      const end = selection.end;
+      const a = Math.max(0, Math.min(current.length, start));
+      const b = Math.max(0, Math.min(current.length, end));
       const from = Math.min(a, b);
       const to = Math.max(a, b);
-      const next = el.value.slice(0, from) + text + el.value.slice(to);
+      const next = current.slice(0, from) + text + current.slice(to);
       apply(next, from + text.length, from + text.length);
     },
+    [activeSelection, apply, value]
+  );
+  const actLineBreak = React.useCallback(() => {
+    actInsert("\n");
+  }, [actInsert]);
+  const actNewParagraph = React.useCallback(() => {
+    actInsert("\n\n");
+  }, [actInsert]);
+  const handleMarkdownKeyDown = React.useCallback(
+    (event) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (event.key !== "Enter" || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing) return;
+      const target = event.currentTarget;
+      const current = target.value;
+      const start = (_a = target.selectionStart) != null ? _a : 0;
+      const end = (_b = target.selectionEnd) != null ? _b : start;
+      if (start !== end) return;
+      const lineStart = current.lastIndexOf("\n", Math.max(0, start - 1)) + 1;
+      const lineEndIndex = current.indexOf("\n", start);
+      const lineEnd = lineEndIndex === -1 ? current.length : lineEndIndex;
+      const line = current.slice(lineStart, lineEnd);
+      const ordered = /^(\s*)(\d+)\.\s*(.*)$/.exec(line);
+      const unordered = /^(\s*)([-*])\s*(.*)$/.exec(line);
+      const isInListContext = () => {
+        var _a2;
+        if (ordered || unordered) return true;
+        const previousLines = current.slice(0, lineStart).split("\n");
+        for (let index = previousLines.length - 1; index >= 0; index -= 1) {
+          const previous = (_a2 = previousLines[index]) != null ? _a2 : "";
+          if (!previous.trim()) continue;
+          if (/^\s*\d+\.\s+/.test(previous) || /^\s*[-*]\s+/.test(previous)) return true;
+          if (/^#{1,4}\s+/.test(previous.trim()) || /^---+$/.test(previous.trim()) || /^>\s?/.test(previous.trim())) return false;
+        }
+        return false;
+      };
+      if (event.shiftKey) {
+        if (!isInListContext()) return;
+        event.preventDefault();
+        const insert = "  \n";
+        const next = current.slice(0, start) + insert + current.slice(start);
+        const cursor = start + insert.length;
+        apply(next, cursor, cursor);
+        return;
+      }
+      if (ordered && !((_c = ordered[3]) == null ? void 0 : _c.trim())) {
+        event.preventDefault();
+        const next = current.slice(0, lineStart) + current.slice(lineEnd);
+        apply(next, lineStart, lineStart);
+        return;
+      }
+      if (unordered && !((_d = unordered[3]) == null ? void 0 : _d.trim())) {
+        event.preventDefault();
+        const next = current.slice(0, lineStart) + current.slice(lineEnd);
+        apply(next, lineStart, lineStart);
+        return;
+      }
+      if (ordered) {
+        event.preventDefault();
+        const nextNumber = Number((_e = ordered[2]) != null ? _e : "0") + 1;
+        const insert = `
+${nextNumber}. `;
+        const next = current.slice(0, start) + insert + current.slice(start);
+        const cursor = start + insert.length;
+        apply(next, cursor, cursor);
+        return;
+      }
+      if (unordered) {
+        event.preventDefault();
+        const insert = `
+${(_f = unordered[2]) != null ? _f : "-"} `;
+        const next = current.slice(0, start) + insert + current.slice(start);
+        const cursor = start + insert.length;
+        apply(next, cursor, cursor);
+      }
+    },
     [apply]
   );
+  const actInsertAt = React.useCallback(
+    (position, text) => {
+      const safePosition = Math.max(0, Math.min(value.length, position));
+      const next = value.slice(0, safePosition) + text + value.slice(safePosition);
+      const cursor = safePosition + text.length;
+      apply(next, cursor, cursor);
+    },
+    [apply, value]
+  );
+  const actDeleteBlock = React.useCallback(
+    (range) => {
+      const { next, cursor } = removeMarkdownBlock(value, range);
+      if (next === value) return;
+      apply(next, cursor, cursor);
+    },
+    [apply, value]
+  );
+  const actInsertBlockAt = React.useCallback(
+    (position, text) => {
+      const block = text.trim();
+      if (!block) return;
+      const safePosition = Math.max(0, Math.min(value.length, position));
+      const before = value.slice(0, safePosition);
+      const after = value.slice(safePosition);
+      const prefix = before.trim().length && !before.endsWith("\n\n") ? before.endsWith("\n") ? "\n" : "\n\n" : "";
+      const suffix = after.trim().length && !after.startsWith("\n\n") ? after.startsWith("\n") ? "\n" : "\n\n" : "";
+      const next = before + prefix + block + suffix + after;
+      const cursor = before.length + prefix.length + block.length;
+      apply(next, cursor, cursor);
+    },
+    [apply, value]
+  );
+  const openBlockMenu = React.useCallback((event, range) => {
+    const position = range.end;
+    setSelectionMenu(null);
+    setBlockMenu({ x: event.clientX, y: event.clientY, position, range });
+  }, []);
+  const openSelectionMenu = React.useCallback((event, range) => {
+    if (range.start === range.end) return;
+    setBlockMenu(null);
+    setSelectionMenu({ x: event.clientX, y: event.clientY, range, marks: detectSelectionMarks(value, range) });
+  }, [value]);
+  const actInsertBlock = React.useCallback(
+    (text) => {
+      var _a, _b, _c, _d;
+      const current = (_b = (_a = ref.current) == null ? void 0 : _a.value) != null ? _b : value;
+      const selection = activeSelection();
+      const start = (_c = selection.start) != null ? _c : current.length;
+      const end = (_d = selection.end) != null ? _d : start;
+      const a = Math.max(0, Math.min(current.length, start));
+      const b = Math.max(0, Math.min(current.length, end));
+      const from = Math.min(a, b);
+      const to = Math.max(a, b);
+      const before = current.slice(0, from);
+      const after = current.slice(to);
+      const prefix = before.trim().length && !before.endsWith("\n\n") ? "\n\n" : "";
+      const suffix = after.trim().length && !after.startsWith("\n\n") ? "\n\n" : "";
+      const next = before + prefix + text.trim() + suffix + after;
+      const cursor = before.length + prefix.length + text.trim().length;
+      apply(next, cursor, cursor);
+    },
+    [activeSelection, apply, value]
+  );
+  const actColor = React.useCallback(
+    (color) => {
+      var _a, _b;
+      const current = (_b = (_a = ref.current) == null ? void 0 : _a.value) != null ? _b : value;
+      const selection = activeSelection();
+      const { next, selectFrom, selectTo } = applyColorToSelection(current, selection.start, selection.end, color);
+      apply(next, selectFrom, selectTo);
+    },
+    [activeSelection, apply, value]
+  );
   const insertTemplate = React.useCallback(
     (t) => {
       if (!t.content.trim()) return;
@@ -117,53 +1730,762 @@ function MarkdownEditor({
     },
     [apply, value]
   );
-  return /* @__PURE__ */ jsxs("div", { className: cx("overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)]", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 border-b border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] p-2", children: [
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actWrap("**", "**", "texto"), children: "B" }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actWrap("*", "*", "texto"), children: "I" }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actWrap("`", "`", "c\xF3digo"), children: "</>" }),
-      /* @__PURE__ */ jsx("div", { className: "mx-1 h-5 w-px bg-[var(--border)]" }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actPrefix("## "), children: "H2" }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actPrefix("### "), children: "H3" }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actPrefix("- "), children: "\u2022 Lista" }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actPrefix("1. "), children: "1." }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actPrefix("> "), children: "\u201C\u201D" }),
-      /* @__PURE__ */ jsx("div", { className: "mx-1 h-5 w-px bg-[var(--border)]" }),
-      /* @__PURE__ */ jsx(
-        Button,
+  const insertExample = React.useCallback(() => {
+    const sep = value.trim().length ? "\n\n---\n\n" : "";
+    const next = value + sep + (enableDiagrams ? MARKDOWN_EDITOR_SAMPLE : MARKDOWN_EDITOR_SAMPLE_WITHOUT_DIAGRAMS) + "\n";
+    apply(next, next.length, next.length);
+    if (enablePreview) {
+      setVisibleViews((current) => ({ ...current, blocks: true, preview: true }));
+    }
+  }, [apply, enableDiagrams, enablePreview, value]);
+  const alertMessage = React.useCallback((message) => {
+    try {
+      window.alert(message);
+    } catch {
+    }
+  }, []);
+  const renderSelectionMenu = () => {
+    if (!selectionMenu || !portalTarget) return null;
+    const activeButtonClass = "bg-[color-mix(in_oklab,var(--primary)_14%,transparent)] text-[var(--primary)] ring-1 ring-[color-mix(in_oklab,var(--primary)_35%,transparent)]";
+    const menuButtonClass = (active) => cx(
+      "flex h-8 w-8 items-center justify-center rounded-lg hover:bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]",
+      active && activeButtonClass
+    );
+    return createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          size: "xs",
-          variant: "outline",
-          disabled,
-          onClick: () => {
-            const url = safeWindowPrompt("URL del enlace", "https://");
-            if (!url) return;
-            actWrap("[", `](${url})`, "texto");
-          },
-          children: "Enlace"
+          ref: selectionMenuRef,
+          className: "fixed z-[2147483647] flex max-w-[min(92vw,520px)] flex-wrap items-center gap-1 rounded-xl border border-[var(--border)] bg-[var(--card)] p-1 text-sm text-[var(--foreground)] shadow-2xl",
+          style: { left: Math.min(selectionMenu.x, Math.max(8, window.innerWidth - 540)), top: Math.min(selectionMenu.y + 10, Math.max(8, window.innerHeight - 110)) },
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: menuButtonClass(selectionMenu.marks.bold),
+                title: L.bold,
+                onClick: () => {
+                  actWrap("**", "**", "texto");
+                  setSelectionMenu(null);
+                },
+                children: /* @__PURE__ */ jsx(TextBIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: menuButtonClass(selectionMenu.marks.italic),
+                title: L.italic,
+                onClick: () => {
+                  actWrap("*", "*", "texto");
+                  setSelectionMenu(null);
+                },
+                children: /* @__PURE__ */ jsx(TextItalicIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: menuButtonClass(selectionMenu.marks.code),
+                title: L.code,
+                onClick: () => {
+                  actWrap("`", "`", "c\xF3digo");
+                  setSelectionMenu(null);
+                },
+                children: /* @__PURE__ */ jsx(CodeIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: menuButtonClass(selectionMenu.marks.link),
+                title: L.link,
+                onClick: () => {
+                  actLink();
+                  setSelectionMenu(null);
+                },
+                children: /* @__PURE__ */ jsx(LinkIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-[var(--border)]" }),
+            COLOR_SWATCHES.map((color) => {
+              var _a;
+              const selected = ((_a = selectionMenu.marks.color) == null ? void 0 : _a.toLowerCase()) === color.toLowerCase();
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  title: color,
+                  className: cx(
+                    "relative h-6 w-6 rounded-full border border-[var(--border)] shadow-sm outline-none transition hover:scale-105 focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+                    selected && "z-10 scale-110 ring-2 ring-[var(--ring)] ring-offset-2 ring-offset-[var(--card)] after:absolute after:inset-1.5 after:rounded-full after:border after:border-white/80"
+                  ),
+                  style: { backgroundColor: color },
+                  onClick: () => {
+                    actColor(color);
+                    setSelectionMenu(null);
+                  }
+                },
+                color
+              );
+            })
+          ]
         }
       ),
-      /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", disabled, onClick: () => actInsert("\n---\n"), children: "Separador" }),
-      (templates == null ? void 0 : templates.length) ? /* @__PURE__ */ jsx("div", { className: "ml-auto flex flex-wrap items-center gap-1", children: templates.map((t) => /* @__PURE__ */ jsxs(Button, { size: "xs", variant: "ghost", disabled, onClick: () => insertTemplate(t), children: [
-        "+ ",
-        t.label
-      ] }, t.label)) }) : null
-    ] }),
-    /* @__PURE__ */ jsx(
-      Textarea,
+      portalTarget
+    );
+  };
+  const closeBlockMenu = React.useCallback(() => {
+    setBlockMenu(null);
+  }, []);
+  const renderBlockMenu = () => {
+    if (!blockMenu || !portalTarget) return null;
+    const position = blockMenu.position;
+    const itemClass = "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left hover:bg-[color-mix(in_oklab,var(--primary)_10%,transparent)]";
+    return createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: blockMenuRef,
+          className: "fixed z-[2147483647] grid max-h-[min(80vh,520px)] min-w-[240px] gap-1 overflow-y-auto overscroll-contain rounded-xl border border-[var(--border)] bg-[var(--card)] p-1 text-sm text-[var(--foreground)] shadow-2xl",
+          style: { left: Math.min(blockMenu.x, Math.max(8, window.innerWidth - 260)), top: Math.min(blockMenu.y, Math.max(8, window.innerHeight - 360)) },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs font-semibold uppercase tracking-wide text-[var(--muted)]", children: "Agregar bloque" }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  actInsertAt(position, "\n");
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4 rotate-90" }),
+                  "Salto de l\xEDnea"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  actInsertBlockAt(position, "## Titulo");
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "H2" }),
+                  "Titulo"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  actInsertBlockAt(position, "Nuevo p\xE1rrafo");
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TextTIcon, { className: "h-4 w-4" }),
+                  "P\xE1rrafo"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  insertImageUrl(position);
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }),
+                  "Imagen desde URL"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  var _a;
+                  uploadInsertPositionRef.current = position;
+                  (_a = imageInputRef.current) == null ? void 0 : _a.click();
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }),
+                  "Subir imagen"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  insertVideoUrl(position);
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4" }),
+                  "Video desde URL"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  var _a;
+                  uploadInsertPositionRef.current = position;
+                  (_a = videoInputRef.current) == null ? void 0 : _a.click();
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4" }),
+                  "Subir video"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  insertTable(position);
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TableIcon, { className: "h-4 w-4" }),
+                  "Tabla"
+                ]
+              }
+            ),
+            enableDiagrams ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  insertUmlClassDiagram(position);
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(CodeIcon, { className: "h-4 w-4" }),
+                  "Diagrama UML"
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: itemClass,
+                onClick: () => {
+                  actInsertBlockAt(position, "---");
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4" }),
+                  "Separador"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-[var(--danger)] hover:bg-[color-mix(in_oklab,var(--danger)_10%,transparent)]",
+                onClick: () => {
+                  actDeleteBlock(blockMenu.range);
+                  closeBlockMenu();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }),
+                  "Eliminar bloque"
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      portalTarget
+    );
+  };
+  const insertImageUrl = React.useCallback((position) => {
+    var _a;
+    const url = safeWindowPrompt("URL de la imagen", "https://");
+    if (!url) return;
+    if (!safeMediaUrl(url, "image")) {
+      alertMessage("La imagen debe usar una URL http(s) v\xE1lida o un archivo de imagen permitido.");
+      return;
+    }
+    const alt = (_a = safeWindowPrompt("Texto alternativo de la imagen", "Imagen")) != null ? _a : "Imagen";
+    const markdown = `![${alt}](${url})`;
+    if (typeof position === "number") actInsertBlockAt(position, markdown);
+    else actInsertBlock(markdown);
+  }, [actInsertBlock, actInsertBlockAt, alertMessage]);
+  const insertVideoUrl = React.useCallback((position) => {
+    var _a;
+    const url = safeWindowPrompt("URL del video", "https://");
+    if (!url) return;
+    if (!safeMediaUrl(url, "video")) {
+      alertMessage("El video debe usar una URL http(s) v\xE1lida o un archivo de video permitido.");
+      return;
+    }
+    const title = (_a = safeWindowPrompt("Titulo del video", "Video")) != null ? _a : "Video";
+    const markdown = `@[video:${title}](${url})`;
+    if (typeof position === "number") actInsertBlockAt(position, markdown);
+    else actInsertBlock(markdown);
+  }, [actInsertBlock, actInsertBlockAt, alertMessage]);
+  const insertTable = React.useCallback((position) => {
+    const colsValue = Number(safeWindowPrompt("Columnas de la tabla", "3"));
+    if (!Number.isFinite(colsValue)) return;
+    const rowsValue = Number(safeWindowPrompt("Filas de la tabla", "3"));
+    if (!Number.isFinite(rowsValue)) return;
+    const cols = Math.max(1, Math.min(8, Math.round(colsValue)));
+    const rows2 = Math.max(1, Math.min(12, Math.round(rowsValue)));
+    const header = `| ${Array.from({ length: cols }, (_, index) => `Columna ${index + 1}`).join(" | ")} |`;
+    const separator = `| ${Array.from({ length: cols }, () => "---").join(" | ")} |`;
+    const body = Array.from({ length: rows2 }, () => `| ${Array.from({ length: cols }, () => " ").join(" | ")} |`).join("\n");
+    const markdown = `${header}
+${separator}
+${body}`;
+    if (typeof position === "number") actInsertBlockAt(position, markdown);
+    else actInsertBlock(markdown);
+  }, [actInsertBlock, actInsertBlockAt]);
+  const insertUmlClassDiagram = React.useCallback((position) => {
+    const markdown = [
+      "```mermaid",
+      "classDiagram",
+      "  class Usuario {",
+      "    +string nombre",
+      "    +iniciarSesion()",
+      "  }",
+      "  class Cuenta {",
+      "    +string email",
+      "  }",
+      "  Usuario --> Cuenta",
+      "```"
+    ].join("\n");
+    if (typeof position === "number") actInsertBlockAt(position, markdown);
+    else actInsertBlock(markdown);
+  }, [actInsertBlock, actInsertBlockAt]);
+  const insertUmlSequenceDiagram = React.useCallback((position) => {
+    const markdown = [
+      "```mermaid",
+      "sequenceDiagram",
+      "  participant Usuario",
+      "  participant Sistema",
+      "  Usuario->>Sistema: Solicita acceso",
+      "  Sistema-->>Usuario: Responde resultado",
+      "```"
+    ].join("\n");
+    if (typeof position === "number") actInsertBlockAt(position, markdown);
+    else actInsertBlock(markdown);
+  }, [actInsertBlock, actInsertBlockAt]);
+  const insertUploadedFile = React.useCallback(
+    async (file, kind, position) => {
+      if (!file) return;
+      const isImage = kind === "image";
+      const maxBytes = isImage ? maxImageBytes : maxVideoBytes;
+      if (file.size > maxBytes) {
+        const mb = Math.round(maxBytes / 1024 / 1024);
+        alertMessage(`${isImage ? "La imagen" : "El video"} supera el limite de ${mb} MB.`);
+        return;
+      }
+      if (isImage && !file.type.startsWith("image/")) {
+        alertMessage("Selecciona un archivo de imagen v\xE1lido.");
+        return;
+      }
+      if (!isImage && !file.type.startsWith("video/")) {
+        alertMessage("Selecciona un archivo de video v\xE1lido.");
+        return;
+      }
+      try {
+        const dataUrl = await readFileAsDataUrl(file);
+        const markdown = isImage ? `![${file.name || "Imagen"}](${dataUrl})` : `@[video:${file.name || "Video"}](${dataUrl})`;
+        if (typeof position === "number") actInsertBlockAt(position, markdown);
+        else actInsertBlock(markdown);
+      } catch {
+        alertMessage("No se pudo leer el archivo seleccionado.");
+      }
+    },
+    [actInsertBlock, actInsertBlockAt, alertMessage, maxImageBytes, maxVideoBytes]
+  );
+  const Tool = ({
+    content,
+    children
+  }) => /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx("div", { className: "px-0.5", children: content }), placement: "top", delay: 120, className: "max-w-[240px]", children });
+  const ToolSep = /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-[var(--border)]" });
+  const toggleView = React.useCallback(
+    (view) => {
+      if (!enablePreview && view !== "markdown") return;
+      setBlockMenu(null);
+      setSelectionMenu(null);
+      setVisibleViews((current) => {
+        const next = { ...current, [view]: !current[view] };
+        if (!enablePreview) return { blocks: false, preview: false, markdown: true };
+        if (!next.blocks && !next.preview && !next.markdown) return current;
+        return next;
+      });
+    },
+    [enablePreview]
+  );
+  const renderEditor = (isFullscreen) => {
+    const effectiveHeight = isFullscreen ? fullscreenHeight : height;
+    const previewStyle = effectiveHeight ? { height: effectiveHeight } : void 0;
+    const viewCount = Number(Boolean(visibleViews.blocks && enablePreview)) + Number(Boolean(visibleViews.preview && enablePreview)) + Number(Boolean(visibleViews.markdown));
+    const gridColumns = viewCount >= 3 ? "lg:grid-cols-2 2xl:grid-cols-3" : viewCount === 2 ? "lg:grid-cols-2" : "grid-cols-1";
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        ref,
-        value,
-        onChange: (e) => onChange(e.currentTarget.value),
-        placeholder,
-        rows,
-        disabled,
-        className: "resize-none rounded-none border-0 shadow-none focus:ring-0 focus:border-transparent",
-        style: height ? { height } : void 0
-      }
-    )
+        className: cx(
+          "overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)]",
+          isFullscreen && "flex h-full flex-col rounded-none border-0 bg-[var(--background)]",
+          !isFullscreen && className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: imageInputRef,
+              type: "file",
+              accept: "image/*",
+              className: "hidden",
+              onChange: (event) => {
+                var _a, _b;
+                const input = event.target;
+                void insertUploadedFile((_b = (_a = input.files) == null ? void 0 : _a[0]) != null ? _b : null, "image", uploadInsertPositionRef.current);
+                uploadInsertPositionRef.current = null;
+                input.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: videoInputRef,
+              type: "file",
+              accept: "video/mp4,video/webm,video/ogg,video/*",
+              className: "hidden",
+              onChange: (event) => {
+                var _a, _b;
+                const input = event.target;
+                void insertUploadedFile((_b = (_a = input.files) == null ? void 0 : _a[0]) != null ? _b : null, "video", uploadInsertPositionRef.current);
+                uploadInsertPositionRef.current = null;
+                input.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 border-b border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] p-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Tool, { content: L.undo, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.undo, disabled: disabled || undoStackRef.current.length === 0, onClick: doUndo, children: /* @__PURE__ */ jsx(ArrowArcLeftIcon, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsx(Tool, { content: L.redo, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.redo, disabled: disabled || redoStackRef.current.length === 0, onClick: doRedo, children: /* @__PURE__ */ jsx(ArrowArcRightIcon, { className: "h-4 w-4" }) }) }),
+              ToolSep,
+              /* @__PURE__ */ jsxs(Dropdown, { children: [
+                /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, className: "rounded-full px-3 py-2", children: /* @__PURE__ */ jsx(Tooltip, { content: L.headings, placement: "top", delay: 120, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--foreground)]", children: "H" }),
+                  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-[var(--muted)]" })
+                ] }) }) }),
+                /* @__PURE__ */ jsxs(Dropdown.Content, { children: [
+                  /* @__PURE__ */ jsx(Dropdown.Label, { children: L.headings }),
+                  /* @__PURE__ */ jsxs(Dropdown.Item, { onSelect: () => actPrefix(""), children: [
+                    "P - ",
+                    L.paragraph
+                  ] }),
+                  /* @__PURE__ */ jsxs(Dropdown.Item, { onSelect: () => actPrefix("# "), children: [
+                    "H1 - ",
+                    L.h1
+                  ] }),
+                  /* @__PURE__ */ jsxs(Dropdown.Item, { onSelect: () => actPrefix("## "), children: [
+                    "H2 - ",
+                    L.h2
+                  ] }),
+                  /* @__PURE__ */ jsxs(Dropdown.Item, { onSelect: () => actPrefix("### "), children: [
+                    "H3 - ",
+                    L.h3
+                  ] }),
+                  /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(QuotesIcon, { className: "h-4 w-4" }), onSelect: () => actPrefix("> "), children: L.quote })
+                ] })
+              ] }),
+              ToolSep,
+              /* @__PURE__ */ jsx(Tool, { content: L.bold, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.bold, disabled, onClick: () => actWrap("**", "**", "texto"), children: /* @__PURE__ */ jsx(TextBIcon, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsx(Tool, { content: L.italic, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.italic, disabled, onClick: () => actWrap("*", "*", "texto"), children: /* @__PURE__ */ jsx(TextItalicIcon, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsx(Tool, { content: L.code, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.code, disabled, onClick: () => actWrap("`", "`", "c\xF3digo"), children: /* @__PURE__ */ jsx(CodeIcon, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsx(Tool, { content: L.link, children: /* @__PURE__ */ jsx(
+                ActionIconButton,
+                {
+                  size: "sm",
+                  title: L.link,
+                  disabled,
+                  onClick: actLink,
+                  children: /* @__PURE__ */ jsx(LinkIcon, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(Dropdown, { children: [
+                /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, className: "rounded-full px-3 py-2", children: /* @__PURE__ */ jsx(Tooltip, { content: L.color, placement: "top", delay: 120, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(PaletteIcon, { className: "h-4 w-4 text-[var(--foreground)]" }),
+                  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-[var(--muted)]" })
+                ] }) }) }),
+                /* @__PURE__ */ jsxs(Dropdown.Content, { children: [
+                  /* @__PURE__ */ jsx(Dropdown.Label, { children: L.color }),
+                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-2 p-2", children: COLOR_SWATCHES.map((color) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      title: color,
+                      className: "h-8 w-8 rounded-full border border-[var(--border)] shadow-sm outline-none transition hover:scale-105 focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
+                      style: { backgroundColor: color },
+                      onClick: () => actColor(color)
+                    },
+                    color
+                  )) })
+                ] })
+              ] }),
+              ToolSep,
+              /* @__PURE__ */ jsx(Tool, { content: L.bullets, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.bullets, disabled, onClick: () => actPrefix("- "), children: /* @__PURE__ */ jsx(ListBulletsIcon, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsx(Tool, { content: L.numbers, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.numbers, disabled, onClick: () => actPrefix("1. "), children: /* @__PURE__ */ jsx(ListNumbersIcon, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsx(Tool, { content: L.quote, children: /* @__PURE__ */ jsx(ActionIconButton, { size: "sm", title: L.quote, disabled, onClick: () => actPrefix("> "), children: /* @__PURE__ */ jsx(QuotesIcon, { className: "h-4 w-4" }) }) }),
+              ToolSep,
+              /* @__PURE__ */ jsxs(Dropdown, { children: [
+                /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, className: "rounded-full px-3 py-2", children: /* @__PURE__ */ jsx(Tooltip, { content: L.insert, placement: "top", delay: 120, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-[var(--foreground)]" }),
+                  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-[var(--muted)]" })
+                ] }) }) }),
+                /* @__PURE__ */ jsxs(Dropdown.Content, { children: [
+                  /* @__PURE__ */ jsx(Dropdown.Label, { children: L.insert }),
+                  /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }), onSelect: () => insertImageUrl(), children: L.imageUrl }),
+                  /* @__PURE__ */ jsx(
+                    Dropdown.Item,
+                    {
+                      icon: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }),
+                      onSelect: () => {
+                        var _a;
+                        uploadInsertPositionRef.current = null;
+                        (_a = imageInputRef.current) == null ? void 0 : _a.click();
+                      },
+                      children: L.imageUpload
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4" }), onSelect: () => insertVideoUrl(), children: L.videoUrl }),
+                  /* @__PURE__ */ jsx(
+                    Dropdown.Item,
+                    {
+                      icon: /* @__PURE__ */ jsx(VideoIcon, { className: "h-4 w-4" }),
+                      onSelect: () => {
+                        var _a;
+                        uploadInsertPositionRef.current = null;
+                        (_a = videoInputRef.current) == null ? void 0 : _a.click();
+                      },
+                      children: L.videoUpload
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(TableIcon, { className: "h-4 w-4" }), onSelect: () => insertTable(), children: L.table }),
+                  enableDiagrams ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(CodeIcon, { className: "h-4 w-4" }), onSelect: () => insertUmlClassDiagram(), children: L.umlClass }),
+                    /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(CodeIcon, { className: "h-4 w-4" }), onSelect: () => insertUmlSequenceDiagram(), children: L.umlSequence })
+                  ] }) : null,
+                  /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+                  /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4 rotate-90" }), onSelect: actLineBreak, children: L.lineBreak }),
+                  /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(TextTIcon, { className: "h-4 w-4" }), onSelect: actNewParagraph, children: "Nuevo p\xE1rrafo" }),
+                  /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4" }), onSelect: () => actInsert("\n---\n"), children: L.divider })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "xs",
+                  variant: "secondary",
+                  disabled,
+                  leftIcon: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3.5 w-3.5" }),
+                  onClick: insertExample,
+                  children: L.sampleButton
+                }
+              ),
+              (templates == null ? void 0 : templates.length) ? templates.map((t) => /* @__PURE__ */ jsxs(Button, { size: "xs", variant: "ghost", disabled, onClick: () => insertTemplate(t), children: [
+                "+ ",
+                t.label
+              ] }, t.label)) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex overflow-hidden rounded-full border border-[var(--border)] bg-[color-mix(in_oklab,var(--background)_70%,transparent)] p-0.5", children: [
+                enablePreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: cx(
+                        "rounded-full px-3 py-1.5 text-xs font-semibold transition",
+                        visibleViews.blocks ? "bg-[var(--primary)] text-[var(--primary-foreground)] shadow-sm" : "text-[var(--muted)] hover:bg-[color-mix(in_oklab,var(--muted)_10%,transparent)] hover:text-[var(--foreground)]"
+                      ),
+                      "aria-pressed": visibleViews.blocks,
+                      onClick: () => toggleView("blocks"),
+                      children: L.blocksView
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: cx(
+                        "rounded-full px-3 py-1.5 text-xs font-semibold transition",
+                        visibleViews.preview ? "bg-[var(--primary)] text-[var(--primary-foreground)] shadow-sm" : "text-[var(--muted)] hover:bg-[color-mix(in_oklab,var(--muted)_10%,transparent)] hover:text-[var(--foreground)]"
+                      ),
+                      "aria-pressed": visibleViews.preview,
+                      onClick: () => toggleView("preview"),
+                      children: L.previewView
+                    }
+                  )
+                ] }) : null,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: cx(
+                      "rounded-full px-3 py-1.5 text-xs font-semibold transition",
+                      visibleViews.markdown ? "bg-[var(--primary)] text-[var(--primary-foreground)] shadow-sm" : "text-[var(--muted)] hover:bg-[color-mix(in_oklab,var(--muted)_10%,transparent)] hover:text-[var(--foreground)]"
+                    ),
+                    "aria-pressed": visibleViews.markdown,
+                    onClick: () => toggleView("markdown"),
+                    children: L.markdownView
+                  }
+                )
+              ] }),
+              enableFullscreen ? /* @__PURE__ */ jsx(
+                ActionIconButton,
+                {
+                  size: "sm",
+                  title: isFullscreen ? L.exitFullscreen : L.fullscreen,
+                  active: isFullscreen,
+                  onClick: () => setFullscreen((current) => !current),
+                  children: isFullscreen ? /* @__PURE__ */ jsx(CornersInIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(CornersOutIcon, { className: "h-4 w-4" })
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(
+                "grid min-h-0 divide-y divide-[var(--border)] lg:divide-y-0 lg:divide-x",
+                gridColumns,
+                isFullscreen && "flex-1"
+              ),
+              children: [
+                visibleViews.blocks && enablePreview ? /* @__PURE__ */ jsx(
+                  "section",
+                  {
+                    "aria-label": L.blocksView,
+                    className: cx(
+                      "min-h-[220px] min-w-0 overflow-auto bg-[color-mix(in_oklab,var(--card)_96%,var(--background))] p-4",
+                      isFullscreen && "h-full"
+                    ),
+                    style: previewStyle,
+                    children: value.trim() ? /* @__PURE__ */ jsx(
+                      MarkdownPreview,
+                      {
+                        value,
+                        className: "text-sm leading-6",
+                        emptyLabel: L.emptyPreview,
+                        selectable: true,
+                        showBlockControls: true,
+                        onSelectRange: selectMarkdownRange,
+                        onOpenSelectionMenu: openSelectionMenu,
+                        onOpenBlockMenu: openBlockMenu
+                      }
+                    ) : /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[180px] flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-[var(--border)] px-4 text-center text-sm text-[var(--muted)]", children: [
+                      /* @__PURE__ */ jsx("div", { children: L.emptyPreview }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "sm",
+                          variant: "secondary",
+                          leftIcon: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }),
+                          disabled,
+                          onClick: (event) => openBlockMenu(event, { start: 0, end: 0 }),
+                          children: "Agregar bloque"
+                        }
+                      )
+                    ] })
+                  }
+                ) : null,
+                visibleViews.preview && enablePreview ? /* @__PURE__ */ jsx(
+                  "section",
+                  {
+                    "aria-label": L.preview,
+                    className: cx(
+                      "min-h-[220px] min-w-0 overflow-auto bg-[color-mix(in_oklab,var(--card)_96%,var(--background))] p-5",
+                      isFullscreen && "h-full"
+                    ),
+                    style: previewStyle,
+                    children: /* @__PURE__ */ jsx(MarkdownPreview, { value, className: "text-sm leading-6", emptyLabel: L.emptyPreview })
+                  }
+                ) : null,
+                visibleViews.markdown ? /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0", children: /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    ref,
+                    value,
+                    onChange: (e) => {
+                      var _a, _b, _c;
+                      const target = e.target;
+                      selectionRef.current = { start: (_a = target.selectionStart) != null ? _a : 0, end: (_c = (_b = target.selectionEnd) != null ? _b : target.selectionStart) != null ? _c : 0 };
+                      handleTextChange(target.value);
+                    },
+                    onClick: rememberSelection,
+                    onFocus: rememberSelection,
+                    onKeyDown: handleMarkdownKeyDown,
+                    onKeyUp: rememberSelection,
+                    onMouseUp: rememberSelection,
+                    onSelect: rememberSelection,
+                    placeholder,
+                    "aria-label": L.editor,
+                    rows: isFullscreen ? Math.max(rows, 20) : rows,
+                    disabled,
+                    className: "resize-none rounded-none border-0 shadow-none focus:border-transparent focus:ring-0",
+                    style: effectiveHeight ? { height: effectiveHeight } : void 0
+                  }
+                ) }) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !fullscreen ? renderEditor(false) : null,
+    fullscreen && portalTarget ? createPortal(
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[2147483647] bg-[var(--background)] p-3 sm:p-5", children: /* @__PURE__ */ jsx("div", { className: "mx-auto h-full max-w-[1600px] overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-2xl", children: renderEditor(true) }) }),
+      portalTarget
+    ) : null,
+    renderSelectionMenu(),
+    renderBlockMenu()
   ] });
 }
 export {
-  MarkdownEditor as default
+  MarkdownPreview,
+  MarkdownEditor as default,
+  renderMarkdown
 };