mdwysiwyg 0.4.0 → 0.5.0

package/README.md

@@ -85,8 +85,24 @@ export default function App() {
 }
 ```
 
-That's it — no configuration required. Full API reference, all props, theming variables, and
-usage examples live in the [component documentation](./src/components/MarkdownEditor/README.md).
+That's it — no configuration required. Every prop is documented in the code itself (hover it in your editor to
+see what it does, its default and how it relates to other props).
+
+- **All props, API and examples**: [component documentation](./src/components/MarkdownEditor/README.md)
+- **Styling it for your app** (dark theme, brand colors, fonts — every CSS variable, recipes, troubleshooting):
+  [How to style mdwysiwyg in your host](https://github.com/ferkiernan/mdwysiwyg/blob/master/docs/THEMING.md) (Spanish)
+- **Try every prop and build your theme live**: [playground](https://ferkiernan.github.io/mdwysiwyg/)
+
+To match your product's look, declare `--mdw-*` variables on a class and pass it in `className` (or declare them on any
+ancestor / `:root` for every editor on the page):
+
+```css
+.my-editor { --mdw-bg: #0b1220; --mdw-fg: #e5e7eb; --mdw-accent: #60a5fa; }
+```
+
+```tsx
+<MarkdownEditor className="my-editor" />
+```
 
 ### Cloning the repository instead
 
@@ -122,13 +138,13 @@ Try it in your browser, no install required: **[ferkiernan.github.io/mdwysiwyg](
 | Diagrams | ` ```mermaid ` blocks render as live diagrams; pasted Mermaid syntax is auto-detected on HTML insert. Lazy-loaded, `securityLevel: strict` |
 | Export | Copy as Markdown or as HTML, one click |
 | Modes | Full editor (default) or read-only viewer (`onlyView`, with a configurable notice via `onlyViewNotice`) |
-| Sizing | Fixed (`width`/`height` props) or user-resizable (`resizable`, default on) |
-| Toolbar | Shown by default; hide/show it at runtime with `showToolbar` (no content, caret or undo loss) |
+| Sizing | Fixed (`width`/`height` props), user-resizable (`resizable`, default on) or growing with its content (`autoHeight`: no inner vertical scrollbar, `height` becomes the minimum) |
+| Toolbar | Shown by default; hide/show it at runtime with `showToolbar` (no content, caret or undo loss), or only while the editor has focus with `autoHideBar` |
 | Version history | Opt-in `historyUndo`: a version is saved after 3 s without changes; a clock icon right after the HTML button opens a history mode with ← Undo / Redo →, Confirm / Cancel (back to last version) and a right-hand list of versions with their time (click one to jump to it; document read-only while browsing; `Ctrl+Z` / `Ctrl+Shift+Z` map to Undo / Redo) |
 | Compare mode | `mode="compare"` + `compareOrientation` (`side-to-side` / `up-and-down`) + `compareContent`: read-only original next to an editable new version with changed words highlighted in yellow, and a second bar to accept, reject or restore the change (`onCompareDecision`) |
 | Compare scroll sync | In compare mode the two panes follow each other by matching content (top edge ↔ top edge; added/removed passages are crossed proportionally; vertical only). On by default; turn it off with `compareSyncScroll={false}` |
-| Theming | CSS Custom Properties for toolbar colors/gradient/font, per-view content color & font, table header, code block & Mermaid-diagram-area backgrounds, scrollbar colors (including the toolbar's own auto-scroll), and content-area background (solid color, gradient, or image) |
-| Imperative API | `ref` exposing `reset()` and `isModified()` for discard-changes / unsaved-warning flows |
+| Theming | 47 CSS Custom Properties (`--mdw-*`) covering toolbar, content, tables, code and syntax highlighting, quotes, menus/dialogs, compare highlight and scrollbars; declare them on your class, a wrapper or `:root`, in any load order — see the [theming guide](https://github.com/ferkiernan/mdwysiwyg/blob/master/docs/THEMING.md) |
+| Imperative API | `ref` exposing `reset()`, `isModified()`, `insertMarkdown()` and `setMarkdown()` |
 
 ## Tech under the hood
 

package/dist/index.cjs

@@ -3479,7 +3479,8 @@ var MarkdownEditor_default = {
   menu: "MarkdownEditor_menu",
   menuItem: "MarkdownEditor_menuItem",
   menuSeparator: "MarkdownEditor_menuSeparator",
-  dangerLink: "MarkdownEditor_dangerLink"
+  dangerLink: "MarkdownEditor_dangerLink",
+  autoHeight: "MarkdownEditor_autoHeight"
 };
 
 // src/components/MarkdownEditor/compare/CompareBar.tsx
@@ -3535,11 +3536,43 @@ function RenderedView({ editor }) {
 // src/components/MarkdownEditor/views/MarkdownSourceView.tsx
 var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var MarkdownSourceView = (0, import_react2.forwardRef)(function MarkdownSourceView2({ value, onChange, readOnly = false, ariaLabel = "C\xF3digo fuente Markdown" }, ref) {
+function fitToContent(textarea) {
+  textarea.style.height = "auto";
+  textarea.style.height = `${textarea.scrollHeight}px`;
+}
+var MarkdownSourceView = (0, import_react2.forwardRef)(function MarkdownSourceView2({
+  value,
+  onChange,
+  readOnly = false,
+  ariaLabel = "C\xF3digo fuente Markdown",
+  autoSize = false
+}, ref) {
+  const innerRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react2.useLayoutEffect)(() => {
+    const textarea = innerRef.current;
+    if (textarea === null) return;
+    if (autoSize) fitToContent(textarea);
+    else textarea.style.height = "";
+  }, [autoSize, value]);
+  (0, import_react2.useLayoutEffect)(() => {
+    const textarea = innerRef.current;
+    if (!autoSize || textarea === null || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    let width = textarea.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (textarea.clientWidth === width) return;
+      width = textarea.clientWidth;
+      fitToContent(textarea);
+    });
+    observer.observe(textarea);
+    return () => observer.disconnect();
+  }, [autoSize]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "textarea",
     {
-      ref,
+      ref: innerRef,
       className: MarkdownEditor_default["source"],
       "aria-label": ariaLabel,
       spellCheck: false,
@@ -3555,7 +3588,14 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function noop() {
 }
 var OriginalPane = (0, import_react3.forwardRef)(
-  function OriginalPane2({ markdown, viewMode, sanitizeEmbeddedHtml, resolveImageSrc, onEditor }, ref) {
+  function OriginalPane2({
+    markdown,
+    viewMode,
+    sanitizeEmbeddedHtml,
+    resolveImageSrc,
+    onEditor,
+    autoSize = false
+  }, ref) {
     const hasImageResolver = resolveImageSrc !== void 0;
     const extensions = (0, import_react3.useMemo)(
       () => createEditorExtensions({
@@ -3599,7 +3639,8 @@ var OriginalPane = (0, import_react3.forwardRef)(
             value: markdown,
             onChange: noop,
             readOnly: true,
-            ariaLabel: "C\xF3digo fuente Markdown original (solo lectura)"
+            ariaLabel: "C\xF3digo fuente Markdown original (solo lectura)",
+            autoSize
           }
         )
       }
@@ -3921,7 +3962,7 @@ function segments(value, ranges) {
   nodes.push(value.slice(cursor));
   return nodes;
 }
-var HighlightedSource = (0, import_react6.forwardRef)(function HighlightedSource2({ value, onChange, readOnly, ranges }, ref) {
+var HighlightedSource = (0, import_react6.forwardRef)(function HighlightedSource2({ value, onChange, readOnly, ranges, autoSize }, ref) {
   const layerRef = (0, import_react6.useRef)(null);
   const syncScroll = (event) => {
     const layer = layerRef.current;
@@ -3945,7 +3986,8 @@ var HighlightedSource = (0, import_react6.forwardRef)(function HighlightedSource
             ref,
             value,
             onChange,
-            ...readOnly !== void 0 ? { readOnly } : {}
+            ...readOnly !== void 0 ? { readOnly } : {},
+            ...autoSize !== void 0 ? { autoSize } : {}
           }
         )
       ]
@@ -4558,6 +4600,69 @@ function CodeLanguagePicker({
 // src/components/MarkdownEditor/Toolbar/buttons/FloatingPanel.tsx
 var import_react14 = require("react");
 var import_react_dom = require("react-dom");
+
+// src/components/MarkdownEditor/theme/themeTokens.ts
+var THEME_TOKENS = [
+  { name: "--mdw-border", group: "base", kind: "color", default: "#d0d4da", description: "Bordes del componente, tablas y paneles" },
+  { name: "--mdw-bg", group: "base", kind: "color", default: "#ffffff", description: "Fondo del componente; base del fondo del contenido y de los paneles flotantes" },
+  { name: "--mdw-fg", group: "base", kind: "color", default: "#1f2328", description: "Color de texto; base del texto del contenido" },
+  { name: "--mdw-muted", group: "base", kind: "color", default: "#f6f7f9", description: "Fondos suaves: encabezados de tabla, c\xF3digo, Mermaid, lista de versiones" },
+  { name: "--mdw-accent", group: "base", kind: "color", default: "#3d6fd8", description: "Anillos de foco y estados seleccionados" },
+  { name: "--mdw-toolbar-gradient-from", group: "toolbar", kind: "color", default: "#eeeeee", description: "Color inicial del degradado de la barra" },
+  { name: "--mdw-toolbar-gradient-via", group: "toolbar", kind: "color", default: "#dcdcdc", description: "Color intermedio del degradado" },
+  { name: "--mdw-toolbar-gradient-to", group: "toolbar", kind: "color", default: "#cfcfcf", description: "Color final del degradado" },
+  { name: "--mdw-toolbar-fg", group: "toolbar", kind: "color", default: "#222222", description: "Texto e iconos de la barra" },
+  { name: "--mdw-toolbar-font-family", group: "toolbar", kind: "font", default: "Arial, sans-serif", description: "Fuente de la barra" },
+  { name: "--mdw-toolbar-select-bg", group: "toolbar", kind: "color", default: "#e9e9e9", description: "Fondo del selector de encabezado" },
+  { name: "--mdw-button-active-bg", group: "toolbar", kind: "color", default: "#c8c8c8", description: "Fondo de un bot\xF3n presionado o activo" },
+  { name: "--mdw-button-hover-gradient-from", group: "toolbar", kind: "color", default: "#ffffff", description: "Degradado de un bot\xF3n en hover (inicio)" },
+  { name: "--mdw-button-hover-gradient-to", group: "toolbar", kind: "color", default: "#d8d8d8", description: "Degradado de un bot\xF3n en hover (fin)" },
+  { name: "--mdw-content-bg", group: "content", kind: "background", default: "var(--mdw-bg)", description: "Fondo del \xE1rea de contenido (color, degradado o imagen)" },
+  { name: "--mdw-content-wysiwyg-fg", group: "content", kind: "color", default: "var(--mdw-fg)", description: "Texto de la vista renderizada" },
+  { name: "--mdw-content-wysiwyg-font-family", group: "content", kind: "font", default: "inherit", description: "Fuente de la vista renderizada" },
+  { name: "--mdw-content-markdown-fg", group: "content", kind: "color", default: "var(--mdw-fg)", description: "Texto de la vista Markdown" },
+  { name: "--mdw-content-markdown-font-family", group: "content", kind: "font", default: "ui-monospace, Consolas, monospace", description: "Fuente de la vista Markdown" },
+  { name: "--mdw-table-header-bg", group: "tables-code", kind: "color", default: "var(--mdw-muted)", description: "Fondo de los encabezados de tabla" },
+  { name: "--mdw-table-menu-trigger-color", group: "tables-code", kind: "color", default: "var(--mdw-scrollbar-thumb)", description: "Tri\xE1ngulo que abre el men\xFA de columna/fila" },
+  { name: "--mdw-table-menu-trigger-size", group: "tables-code", kind: "length", default: "0.7em", description: "Tama\xF1o del tri\xE1ngulo del men\xFA de tabla" },
+  { name: "--mdw-table-picker-selected-bg", group: "tables-code", kind: "color", default: "#dbe4f8", description: "Celdas seleccionadas al elegir el tama\xF1o de una tabla" },
+  { name: "--mdw-code-block-bg", group: "tables-code", kind: "color", default: "var(--mdw-muted)", description: "Fondo de los bloques de c\xF3digo" },
+  { name: "--mdw-mermaid-bg", group: "tables-code", kind: "color", default: "var(--mdw-muted)", description: "Fondo de los diagramas Mermaid" },
+  { name: "--mdw-code-keyword", group: "syntax", kind: "color", default: "#a626a4", description: "Palabras clave, etiquetas y literales" },
+  { name: "--mdw-code-string", group: "syntax", kind: "color", default: "#50a14f", description: "Cadenas y atributos" },
+  { name: "--mdw-code-comment", group: "syntax", kind: "color", default: "#a0a1a7", description: "Comentarios" },
+  { name: "--mdw-code-number", group: "syntax", kind: "color", default: "#986801", description: "N\xFAmeros y funciones integradas" },
+  { name: "--mdw-code-title", group: "syntax", kind: "color", default: "#4078f2", description: "T\xEDtulos y nombres de funci\xF3n o clase" },
+  { name: "--mdw-link-fg", group: "content", kind: "color", default: "#0000ee", description: "Enlaces de la vista renderizada (el azul por defecto del navegador)" },
+  { name: "--mdw-link-visited-fg", group: "content", kind: "color", default: "#551a8b", description: "Enlaces ya visitados" },
+  { name: "--mdw-blockquote-fg", group: "quote", kind: "color", default: "#57606a", description: "Texto de las citas" },
+  { name: "--mdw-blockquote-border", group: "quote", kind: "color", default: "var(--mdw-border)", description: "L\xEDnea izquierda de las citas" },
+  { name: "--mdw-control-border", group: "controls", kind: "color", default: "#999", description: "Bordes de botones, selectores, barras y celdas del selector de tabla" },
+  { name: "--mdw-control-highlight", group: "controls", kind: "color", default: "#fff", description: "Borde claro interior de botones y barras" },
+  { name: "--mdw-control-shadow", group: "controls", kind: "color", default: "rgba(0, 0, 0, 0.15)", description: "Sombra de botones y de la barra" },
+  { name: "--mdw-control-pressed-shadow", group: "controls", kind: "color", default: "rgba(0, 0, 0, 0.25)", description: "Sombra interior de un bot\xF3n presionado" },
+  { name: "--mdw-separator-color", group: "controls", kind: "color", default: "#aaa", description: "Separadores de la barra" },
+  { name: "--mdw-popover-bg", group: "floating", kind: "color", default: "var(--mdw-bg)", description: "Fondo de men\xFAs, di\xE1logos y popovers" },
+  { name: "--mdw-popover-shadow", group: "floating", kind: "shadow", default: "0 4px 12px rgba(0, 0, 0, 0.12)", description: "Sombra de los paneles flotantes" },
+  { name: "--mdw-menu-hover-bg", group: "floating", kind: "color", default: "#e4e7eb", description: "Fondo de un elemento de men\xFA en hover o foco" },
+  { name: "--mdw-danger-fg", group: "floating", kind: "color", default: "#b42318", description: "Acciones destructivas (eliminar fila/columna, quitar enlace)" },
+  { name: "--mdw-danger-hover-fg", group: "floating", kind: "color", default: "#8c1c11", description: "Acciones destructivas en hover o foco" },
+  { name: "--mdw-compare-highlight-bg", group: "compare", kind: "color", default: "#fff176", description: "Resaltado de diferencias en modo comparaci\xF3n" },
+  { name: "--mdw-scrollbar-thumb", group: "scroll", kind: "color", default: "#c1c1c1", description: "Pulgar de las barras de desplazamiento" },
+  { name: "--mdw-scrollbar-track", group: "scroll", kind: "color", default: "transparent", description: "Riel de las barras de desplazamiento" }
+];
+function copyThemeTokens(source, target) {
+  const view = source.ownerDocument.defaultView;
+  if (view === null) return;
+  const computed = view.getComputedStyle(source);
+  for (const token of THEME_TOKENS) {
+    const value = computed.getPropertyValue(token.name).trim();
+    if (value === "") target.style.removeProperty(token.name);
+    else target.style.setProperty(token.name, value);
+  }
+}
+
+// src/components/MarkdownEditor/Toolbar/buttons/FloatingPanel.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function FloatingPanel({
   anchor,
@@ -4579,6 +4684,15 @@ function FloatingPanel({
       setStyle({ top: rect.bottom, left: rect.left });
     }
   }, [anchor, align]);
+  (0, import_react14.useLayoutEffect)(() => {
+    const panel = panelRef.current;
+    const rootClass = MarkdownEditor_default["root"];
+    if (style === null || panel === null || anchor === null || rootClass === void 0) {
+      return;
+    }
+    const source = anchor.closest(`.${CSS.escape(rootClass)}`);
+    if (source !== null) copyThemeTokens(source, panel);
+  }, [style === null, anchor]);
   (0, import_react14.useLayoutEffect)(() => {
     if (style === null || !autoFocus) return;
     panelRef.current?.querySelector(
@@ -5305,7 +5419,9 @@ var MarkdownEditor = (0, import_react19.forwardRef)(function MarkdownEditor2({
   className,
   onlyView = false,
   showToolbar = true,
+  autoHideBar = false,
   resizable = true,
+  autoHeight = false,
   onlyViewNotice,
   resolveImageSrc,
   mode = "default",
@@ -5744,12 +5860,42 @@ var MarkdownEditor = (0, import_react19.forwardRef)(function MarkdownEditor2({
     editor.chain().focus().setTextSelection(linkPopover.range).extendMarkRange("link").unsetLink().run();
     closeLinkPopover();
   };
+  const rootRef = (0, import_react19.useRef)(null);
+  const [focusInside, setFocusInside] = (0, import_react19.useState)(false);
+  const focusOutTimer = (0, import_react19.useRef)(null);
+  const handleFocusIn = () => {
+    if (focusOutTimer.current !== null) {
+      clearTimeout(focusOutTimer.current);
+      focusOutTimer.current = null;
+    }
+    setFocusInside(true);
+  };
+  const handleFocusOut = () => {
+    if (focusOutTimer.current !== null) clearTimeout(focusOutTimer.current);
+    focusOutTimer.current = setTimeout(() => {
+      focusOutTimer.current = null;
+      setFocusInside(false);
+    }, 0);
+  };
+  (0, import_react19.useLayoutEffect)(() => {
+    if (!autoHideBar) return;
+    const root = rootRef.current;
+    setFocusInside(root !== null && root.contains(document.activeElement));
+  }, [autoHideBar]);
+  (0, import_react19.useEffect)(
+    () => () => {
+      if (focusOutTimer.current !== null) clearTimeout(focusOutTimer.current);
+    },
+    []
+  );
   const rootClassName = [
     MarkdownEditor_default["root"],
-    resizable ? MarkdownEditor_default["resizable"] : void 0,
+    resizable && !autoHeight ? MarkdownEditor_default["resizable"] : void 0,
+    autoHeight ? MarkdownEditor_default["autoHeight"] : void 0,
     className
   ].filter(Boolean).join(" ");
   const orientation = compareOrientation ?? "side-to-side";
+  const toolbarVisible = showToolbar && (!autoHideBar || focusInside);
   const panesClassName = [
     MarkdownEditor_default["panes"],
     session !== null ? MarkdownEditor_default["panesCompare"] : void 0,
@@ -5759,10 +5905,12 @@ var MarkdownEditor = (0, import_react19.forwardRef)(function MarkdownEditor2({
     "div",
     {
       className: rootClassName,
-      style: { width: toCssSize(width), height: toCssSize(height) },
+      style: autoHeight ? { width: toCssSize(width), minHeight: toCssSize(height) } : { width: toCssSize(width), height: toCssSize(height) },
       ...historyOpen ? { onKeyDownCapture: handleHistoryKeyDown } : {},
+      ...autoHideBar ? { onFocus: handleFocusIn, onBlur: handleFocusOut } : {},
+      ref: rootRef,
       children: [
-        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSlot, { onFocusLost: () => editor?.view.focus(), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        toolbarVisible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSlot, { onFocusLost: () => editor?.view.focus(), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Toolbar,
           {
             editor,
@@ -5815,6 +5963,7 @@ var MarkdownEditor = (0, import_react19.forwardRef)(function MarkdownEditor2({
                       {
                         ref: originalPaneRef,
                         onEditor: setOriginalEditor,
+                        autoSize: autoHeight,
                         markdown: session.original,
                         viewMode: effectiveViewMode,
                         sanitizeEmbeddedHtml,
@@ -5845,7 +5994,8 @@ var MarkdownEditor = (0, import_react19.forwardRef)(function MarkdownEditor2({
                               value: source,
                               onChange: handleSourceChange,
                               readOnly: onlyView || historyOpen,
-                              ranges: session !== null ? textDiff?.ranges ?? [] : null
+                              ranges: session !== null ? textDiff?.ranges ?? [] : null,
+                              autoSize: autoHeight
                             }
                           ),
                           tableTriggerEnabled && triggerCell !== null && triggerCell.isConnected && contentRef.current !== null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(