@ceedcv-maya/shared-editor-react 0.9.0 → 0.11.0

package/src/components/EditorToolbarGroups.tsx

@@ -2,10 +2,13 @@
  * EditorToolbar button groups extracted into focused subcomponents.
  * Each group handles a logically distinct set of formatting or block operations.
  */
+import { Fragment } from 'react';
 import type { Editor } from '@tiptap/react';
 import type { ToolbarLabels } from './EditorToolbar';
 import { ColorPicker } from './ColorPicker';
 import { Btn } from './EditorToolbarButton';
+import { EditorIcon } from './EditorIcons';
+import { tableMenuActions } from '../lib/tableMenuActions';
 
 export interface ToolbarGroupProps {
   editor: Editor;
@@ -35,31 +38,31 @@ export function FormattingButtons({ editor, labels: L }: ToolbarGroupProps) {
         onClick={() => editor.chain().focus().toggleBold().run()}
         title={L.bold}
       >
-        <strong>B</strong>
+        <EditorIcon name="bold" />
       </Btn>
       <Btn
         active={editor.isActive('italic')}
         onClick={() => editor.chain().focus().toggleItalic().run()}
         title={L.italic}
       >
-        <em>I</em>
+        <EditorIcon name="italic" />
       </Btn>
       <Btn
         active={editor.isActive('underline')}
         onClick={() => editor.chain().focus().toggleUnderline().run()}
         title={L.underline}
       >
-        <u>U</u>
+        <EditorIcon name="underline" />
       </Btn>
       <Btn
         active={editor.isActive('code')}
         onClick={() => editor.chain().focus().toggleCode().run()}
         title={L.code}
       >
-        {'</>'}
+        <EditorIcon name="code" />
       </Btn>
       <Btn active={editor.isActive('link')} onClick={setLink} title={L.link}>
-        🔗
+        <EditorIcon name="link" />
       </Btn>
     </>
   );
@@ -76,13 +79,13 @@ export function AdvancedFormattingButtons({ editor, labels: L }: ToolbarGroupPro
         onClick={() => editor.chain().focus().toggleStrike().run()}
         title={L.strike}
       >
-        <s>S</s>
+        <EditorIcon name="strike" />
       </Btn>
 
       <ColorPicker
         title={L.textColor}
         value={(editor.getAttributes('textStyle').color as string | undefined) ?? null}
-        glyph={<span style={{ fontWeight: 700 }}>A</span>}
+        glyph={<EditorIcon name="textColor" />}
         clearLabel={L.colorDefault}
         onSelect={(c) => {
           if (c === null) editor.chain().focus().unsetColor().run();
@@ -92,7 +95,7 @@ export function AdvancedFormattingButtons({ editor, labels: L }: ToolbarGroupPro
       <ColorPicker
         title={L.backgroundColor}
         value={(editor.getAttributes('highlight').color as string | undefined) ?? null}
-        glyph={<span style={{ fontWeight: 700 }}>▮</span>}
+        glyph={<EditorIcon name="highlight" />}
         clearLabel={L.colorDefault}
         onSelect={(c) => {
           if (c === null) editor.chain().focus().unsetHighlight().run();
@@ -114,28 +117,28 @@ export function AlignmentButtons({ editor, labels: L }: ToolbarGroupProps) {
         onClick={() => editor.chain().focus().setTextAlign('left').run()}
         title={L.alignLeft}
       >
-        ⬱
+        <EditorIcon name="alignLeft" />
       </Btn>
       <Btn
         active={editor.isActive({ textAlign: 'center' })}
         onClick={() => editor.chain().focus().setTextAlign('center').run()}
         title={L.alignCenter}
       >
-        ☱
+        <EditorIcon name="alignCenter" />
       </Btn>
       <Btn
         active={editor.isActive({ textAlign: 'right' })}
         onClick={() => editor.chain().focus().setTextAlign('right').run()}
         title={L.alignRight}
       >
-        ⬲
+        <EditorIcon name="alignRight" />
       </Btn>
       <Btn
         active={editor.isActive({ textAlign: 'justify' })}
         onClick={() => editor.chain().focus().setTextAlign('justify').run()}
         title={L.alignJustify}
       >
-        ☰
+        <EditorIcon name="alignJustify" />
       </Btn>
     </>
   );
@@ -159,7 +162,7 @@ export function IndentButtons({ editor, labels: L }: ToolbarGroupProps) {
         }}
         title={L.indent}
       >
-        ⇥
+        <EditorIcon name="indent" />
       </Btn>
       <Btn
         onClick={() => {
@@ -173,7 +176,7 @@ export function IndentButtons({ editor, labels: L }: ToolbarGroupProps) {
         }}
         title={L.outdent}
       >
-        ⇤
+        <EditorIcon name="outdent" />
       </Btn>
     </>
   );
@@ -221,41 +224,41 @@ export function ListAndBlockButtons({ editor, labels: L }: ToolbarGroupProps) {
         onClick={() => editor.chain().focus().toggleBulletList().run()}
         title={L.bulletList}
       >
-        • —
+        <EditorIcon name="bulletList" />
       </Btn>
       <Btn
         active={editor.isActive('orderedList')}
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         title={L.orderedList}
       >
-        1.
+        <EditorIcon name="orderedList" />
       </Btn>
       <Btn
         active={editor.isActive('taskList')}
         onClick={() => editor.chain().focus().toggleTaskList().run()}
         title={L.taskList}
       >
-        ☑
+        <EditorIcon name="taskList" />
       </Btn>
       <Btn
         active={editor.isActive('blockquote')}
         onClick={() => editor.chain().focus().toggleBlockquote().run()}
         title={L.blockquote}
       >
-        ❝
+        <EditorIcon name="blockquote" />
       </Btn>
       <Btn
         active={editor.isActive('codeBlock')}
         onClick={() => editor.chain().focus().toggleCodeBlock().run()}
         title={L.codeBlock}
       >
-        {'{}'}
+        <EditorIcon name="codeBlock" />
       </Btn>
       <Btn
         onClick={() => editor.chain().focus().setHorizontalRule().run()}
         title={L.horizontalRule}
       >
-        —
+        <EditorIcon name="horizontalRule" />
       </Btn>
     </>
   );
@@ -287,20 +290,41 @@ export function TableAndMediaButtons({
         }
         title={L.table}
       >
-        ⊞
+        <EditorIcon name="table" />
       </Btn>
       <Btn onClick={setIframe} title={L.iframe}>
-        🖽
+        <EditorIcon name="iframe" />
       </Btn>
       {onImage && (
         <Btn onClick={onImage} title={L.uploadImage}>
-          🖼
+          <EditorIcon name="image" />
         </Btn>
       )}
     </>
   );
 }
 
+/**
+ * Contextual table-editing buttons: add/delete rows & columns, toggle header,
+ * delete table. Rendered in the main toolbar only while the selection is inside
+ * a table (the caller gates on `editor.isActive('table')`), so it appears and
+ * hides in place instead of floating over the content.
+ */
+export function TableButtons({ editor, labels: L }: ToolbarGroupProps) {
+  return (
+    <>
+      {tableMenuActions(editor, L).map((a) => (
+        <Fragment key={a.key}>
+          {a.separatorBefore && <span className="maya-editor-toolbar__sep" aria-hidden />}
+          <Btn onClick={a.run} title={a.title} disabled={a.disabled}>
+            <EditorIcon name={a.icon} />
+          </Btn>
+        </Fragment>
+      ))}
+    </>
+  );
+}
+
 /**
  * Import/export and document buttons: Word import/export, comments, find.
  */
@@ -323,12 +347,12 @@ export function DocumentButtons({
     <>
       {onImportDocx && (
         <Btn onClick={onImportDocx} title={L.importDocx}>
-          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>↥W</span>
+          <EditorIcon name="importDocx" />
         </Btn>
       )}
       {onExportDocx && (
         <Btn onClick={onExportDocx} title={L.exportDocx}>
-          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>↧W</span>
+          <EditorIcon name="exportDocx" />
         </Btn>
       )}
       {onAddComment && (
@@ -337,12 +361,12 @@ export function DocumentButtons({
           disabled={editor.state.selection.empty}
           title={L.addComment}
         >
-          💬
+          <EditorIcon name="comment" />
         </Btn>
       )}
       {onToggleFind && (
         <Btn onClick={onToggleFind} title={L.find}>
-          🔍
+          <EditorIcon name="find" />
         </Btn>
       )}
     </>
@@ -385,7 +409,7 @@ export function ViewModeButtons({
           title={L.insertHtml}
           active={viewMode === 'html'}
         >
-          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>{'<>'}</span>
+          <EditorIcon name="htmlSource" />
         </Btn>
       )}
       <span className="maya-editor-toolbar__sep" aria-hidden />
@@ -394,7 +418,7 @@ export function ViewModeButtons({
             onClick={onToggleFullscreen}
             title={isFullscreen ? L.exitFullscreen : L.fullscreen}
           >
-            {isFullscreen ? '🗗' : '🗖'}
+            <EditorIcon name={isFullscreen ? 'exitFullscreen' : 'fullscreen'} />
           </Btn>
       )}
     </>

package/src/components/MayaEditor.tsx

@@ -9,6 +9,7 @@ import { useEditorContent, type EditorOutput } from '../hooks/useEditorContent';
 import { sanitizeEditorHtml } from '../lib/dompurifyConfig';
 import { markdownToHtml } from '../lib/markdownToHtml';
 import { htmlToMarkdown } from '../lib/htmlToMarkdown';
+import { looksLikeMarkdown } from '../lib/looksLikeMarkdown';
 import { normalizeTableHtml } from '../lib/normalizeTableHtml';
 import { docxToHtml } from '../lib/docxToHtml';
 import type { EditorMode, TiptapDoc } from '../types';
@@ -141,6 +142,10 @@ export function MayaEditor({
 
   const extensions = useMemo(() => buildMayaEditorExtensions(mode), [mode]);
 
+  // Stable handle to the editor for use inside editorProps callbacks, which are
+  // defined before `useEditor` returns.
+  const editorRef = useRef<Editor | null>(null);
+
   const editor = useEditor({
     extensions,
     content: initialContent ?? '',
@@ -153,9 +158,28 @@ export function MayaEditor({
       // Reshape pasted HTML so complex tables (caption/tfoot/colgroup)
       // survive TipTap's parser. See `normalizeTableHtml` for details.
       transformPastedHTML: (html) => normalizeTableHtml(html),
+      // Plain-text paste that is actually Markdown is converted to structured
+      // nodes instead of being stored as a literal text node (which would show
+      // "## " / "**bold**" verbatim in previews). Rich paste carries text/html
+      // and is left to `transformPastedHTML` / the default handler.
+      handlePaste: (_view, event) => {
+        const cb = event.clipboardData;
+        if (!cb) return false;
+        if (cb.getData('text/html')) return false;
+        const text = cb.getData('text/plain');
+        if (!text || !looksLikeMarkdown(text)) return false;
+        const activeEditor = editorRef.current;
+        if (!activeEditor) return false;
+        const html = sanitizeEditorHtml(normalizeTableHtml(markdownToHtml(text)));
+        if (!html) return false;
+        activeEditor.commands.insertContent(html);
+        return true;
+      },
     },
   });
 
+  editorRef.current = editor;
+
   useEditorContent(editor, onChange, { output: effectiveOutput });
 
   const readPayloadFromEditor = useCallback((): string | TiptapDoc | undefined => {
@@ -302,6 +326,18 @@ export function MayaEditor({
     onFullscreenChange(isFullscreen);
   }, [isFullscreen, onFullscreenChange]);
 
+  // Mirror fullscreen to a global `editor-fullscreen` class on <html> so the
+  // host AppLayout can hide its fixed sidebar and drop the content margin while
+  // the editor covers the viewport. Self-contained: works even when the host
+  // doesn't handle `onFullscreenChange` (e.g. the inline editors in the
+  // continuous document view) — otherwise the fixed editor sits *under* the
+  // still-visible sidebar and the left half is hidden.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.toggle('editor-fullscreen', isFullscreen);
+    return () => root.classList.remove('editor-fullscreen');
+  }, [isFullscreen]);
+
   if (!editor) return null;
 
   const editorReady = viewReady && isEditorReady(editor);

package/src/index.ts

@@ -1,8 +1,11 @@
 export { MayaEditor } from './components/MayaEditor';
 export type { MayaEditorProps } from './components/MayaEditor';
 export { EditorContentHtml } from './components/EditorContentHtml';
-export { EditorToolbar } from './components/EditorToolbar';
+export { EditorContentJson } from './components/EditorContentJson';
+export { EditorToolbar, DEFAULT_LABELS } from './components/EditorToolbar';
 export type { ToolbarLabels } from './components/EditorToolbar';
+export { buildToolbarLabels } from './lib/buildToolbarLabels';
+export type { TranslateFn } from './lib/buildToolbarLabels';
 
 export { IframeBlock } from './extensions/IframeBlock';
 export { AlertBlock } from './extensions/AlertBlock';
@@ -23,6 +26,7 @@ export { normalizeTableHtml } from './lib/normalizeTableHtml';
 export { splitHtmlIntoBlocks } from './lib/splitHtmlIntoBlocks';
 export type { BlockChunk, BlockChunkType } from './lib/splitHtmlIntoBlocks';
 export { htmlToTiptapDoc } from './lib/htmlToTiptapDoc';
+export { renderTiptapJsonToHtml } from './lib/renderTiptapJson';
 export { buildMayaEditorExtensions } from './lib/editorExtensions';
 export { isEditorReady } from './lib/isEditorReady';
 export {
@@ -50,6 +54,3 @@ export type {
   TiptapDoc,
   AnchoredComment,
 } from './types';
-
-export { default as esTranslations } from './i18n/es.json';
-export { default as enTranslations } from './i18n/en.json';

package/src/lib/buildToolbarLabels.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { buildToolbarLabels } from './buildToolbarLabels';
+import { DEFAULT_LABELS } from '../components/EditorToolbar';
+
+describe('buildToolbarLabels', () => {
+  it('maps every label key through t("editor.<key>")', () => {
+    const dict: Record<string, string> = {
+      'editor.bold': 'Negrita',
+      'editor.italic': 'Cursiva',
+      'editor.groupFont': 'Fuente',
+      'editor.tableAddColumnAfter': 'Insertar columna a la derecha',
+    };
+    const t = (k: string) => dict[k] ?? k;
+
+    const labels = buildToolbarLabels(t);
+    expect(labels.bold).toBe('Negrita');
+    expect(labels.italic).toBe('Cursiva');
+    expect(labels.groupFont).toBe('Fuente');
+    expect(labels.tableAddColumnAfter).toBe('Insertar columna a la derecha');
+  });
+
+  it('falls back to the English default when a key is missing (t returns the key)', () => {
+    const t = (k: string) => k; // i18next miss behaviour: returns the key
+    const labels = buildToolbarLabels(t);
+    expect(labels.bold).toBe(DEFAULT_LABELS.bold);
+    expect(labels.groupParagraph).toBe(DEFAULT_LABELS.groupParagraph);
+    // never leaks a raw "editor.*" key
+    expect(labels.bold).not.toContain('editor.');
+  });
+
+  it('honours a custom prefix', () => {
+    const t = (k: string) => (k === 'tt.bold' ? 'B!' : k);
+    const labels = buildToolbarLabels(t, 'tt');
+    expect(labels.bold).toBe('B!');
+  });
+
+  it('returns a fully-populated object (all default keys present)', () => {
+    const labels = buildToolbarLabels((k) => k);
+    for (const key of Object.keys(DEFAULT_LABELS)) {
+      expect(labels[key as keyof typeof labels]).toBeTruthy();
+    }
+  });
+});

package/src/lib/buildToolbarLabels.ts

@@ -0,0 +1,38 @@
+/**
+ * Build a fully-populated {@link ToolbarLabels} from a translation function.
+ *
+ * The editor itself is i18n-agnostic (it just takes a `toolbarLabels` prop), so
+ * each consumer wires its own i18n. This helper keeps that wiring to one line:
+ * pass the app's `t` (bound to the namespace that holds the shared `editor`
+ * canon — usually `common`) and it maps every label key to `t('editor.<key>')`.
+ *
+ *   const { t } = useTranslation('common');
+ *   <MayaEditor toolbarLabels={buildToolbarLabels(t)} … />
+ *
+ * Any key missing from the active locale falls back to the English default
+ * (i18next returns the key unchanged for a miss, which we detect and replace),
+ * so a partially-translated locale never shows raw `editor.*` keys.
+ */
+import { DEFAULT_LABELS } from '../components/EditorToolbar';
+import type { ToolbarLabels } from '../components/EditorToolbar';
+
+/** Minimal shape of an i18next `t` — only the (key) → string call is used. */
+export type TranslateFn = (key: string) => string;
+
+export function buildToolbarLabels(
+  t: TranslateFn,
+  prefix = 'editor',
+): ToolbarLabels {
+  const out: ToolbarLabels = { ...DEFAULT_LABELS };
+
+  (Object.keys(DEFAULT_LABELS) as (keyof ToolbarLabels)[]).forEach((key) => {
+    const fullKey = `${prefix}.${key}`;
+    const value = t(fullKey);
+    // i18next returns the key itself on a miss → keep the English default.
+    if (value && value !== fullKey) {
+      out[key] = value;
+    }
+  });
+
+  return out;
+}

package/src/lib/looksLikeMarkdown.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { looksLikeMarkdown } from './looksLikeMarkdown';
+
+describe('looksLikeMarkdown', () => {
+  it('detects ATX headings', () => {
+    expect(looksLikeMarkdown('## Programa del curso')).toBe(true);
+  });
+
+  it('detects ordered and unordered lists', () => {
+    expect(looksLikeMarkdown('1. **Introducción a Laravel**')).toBe(true);
+    expect(looksLikeMarkdown('- item uno\n- item dos')).toBe(true);
+  });
+
+  it('detects fenced code and blockquotes and tables', () => {
+    expect(looksLikeMarkdown('```\ncode\n```')).toBe(true);
+    expect(looksLikeMarkdown('> cita')).toBe(true);
+    expect(looksLikeMarkdown('| a | b |\n| --- | --- |')).toBe(true);
+  });
+
+  it('does NOT flag intentional pipe text without a delimiter row', () => {
+    expect(looksLikeMarkdown('| Total 1º ASIR | 30 | 1000 | 265')).toBe(false);
+  });
+
+  it('detects inline bold/code/links', () => {
+    expect(looksLikeMarkdown('texto con **negrita** dentro')).toBe(true);
+    expect(looksLikeMarkdown('usa `composer install` aquí')).toBe(true);
+    expect(looksLikeMarkdown('ver [docs](https://x.y)')).toBe(true);
+  });
+
+  it('leaves ordinary prose untouched', () => {
+    expect(looksLikeMarkdown('Esto es un párrafo normal sin formato.')).toBe(false);
+    expect(looksLikeMarkdown('Precio: 5 * 3 = 15')).toBe(false);
+    expect(looksLikeMarkdown('C# y F# son lenguajes')).toBe(false);
+    expect(looksLikeMarkdown('')).toBe(false);
+  });
+});

package/src/lib/looksLikeMarkdown.ts

@@ -0,0 +1,37 @@
+/**
+ * Heuristic: does this plain text contain Markdown syntax worth converting to
+ * structured nodes?
+ *
+ * Used by the editor paste handler (convert pasted Markdown → TipTap nodes
+ * instead of storing it as a literal text node) and mirrored by the backend
+ * data-repair detection. Kept conservative so ordinary prose is NOT rewritten:
+ * a single stray `*` or `#` is ignored; we require a real block marker at the
+ * start of a line or an unambiguous inline pair.
+ */
+
+const BLOCK_PATTERNS: RegExp[] = [
+  /^#{1,6}\s+\S/m, // ATX heading: "## Title"
+  /^\s*[-*+]\s+\S/m, // unordered list item: "- item"
+  /^\s*\d+\.\s+\S/m, // ordered list item: "1. item"
+  /^\s*>\s+\S/m, // blockquote: "> quote"
+  /^```/m, // fenced code block
+  // GFM table: require a delimiter row (|---|), so intentional pipe text like
+  // "| Total | 30 |" (no delimiter) is NOT flagged as markdown.
+  /\|\s*:?-{3,}|-{3,}:?\s*\|/,
+];
+
+const INLINE_PATTERNS: RegExp[] = [
+  /\*\*[^\s*][^*]*\*\*/, // **bold**
+  /__[^\s_][^_]*__/, // __bold__
+  /~~[^\s~][^~]*~~/, // ~~strike~~
+  /`[^`\n]+`/, // `inline code`
+  /\[[^\]]+\]\([^)\s]+\)/, // [text](url)
+];
+
+export function looksLikeMarkdown(text: string): boolean {
+  if (!text || text.length < 2) return false;
+  if (BLOCK_PATTERNS.some((re) => re.test(text))) return true;
+  // Require an inline marker to actually be present; a lone "*" won't match the
+  // paired patterns above, so prose stays untouched.
+  return INLINE_PATTERNS.some((re) => re.test(text));
+}

package/src/lib/markdownIngestion.test.ts

@@ -0,0 +1,44 @@
+/**
+ * Guards the paste/ingestion contract used by MayaEditor's `handlePaste`:
+ * Markdown text → HTML (markdownToHtml) → TipTap nodes (htmlToTiptapDoc) must
+ * yield STRUCTURED nodes, never a single literal text node. This is the fix for
+ * the "## " / "**bold**" rendered verbatim bug (a data/ingestion problem).
+ */
+import { describe, it, expect } from 'vitest';
+import { markdownToHtml } from './markdownToHtml';
+import { htmlToTiptapDoc } from './htmlToTiptapDoc';
+import { looksLikeMarkdown } from './looksLikeMarkdown';
+
+function ingest(md: string) {
+  return htmlToTiptapDoc(markdownToHtml(md));
+}
+
+describe('markdown ingestion pipeline', () => {
+  it('turns a heading line into a heading node, not literal "## "', () => {
+    const md = '## Programa del curso';
+    expect(looksLikeMarkdown(md)).toBe(true);
+    const doc = ingest(md);
+    const heading = doc.content.find((n) => n.type === 'heading');
+    expect(heading).toBeTruthy();
+    expect(heading?.attrs?.level).toBe(2);
+    const text = JSON.stringify(doc);
+    expect(text).not.toContain('## Programa');
+  });
+
+  it('turns an ordered list with bold into list + strong nodes', () => {
+    const doc = ingest('1. **Introducción a Laravel 13.**');
+    const list = doc.content.find((n) => n.type === 'orderedList');
+    expect(list).toBeTruthy();
+    const json = JSON.stringify(doc);
+    expect(json).toContain('"bold"');
+    expect(json).not.toContain('**Introducción');
+  });
+
+  it('turns inline bold into a strong node', () => {
+    const doc = ingest('CICLO FORMATIVO DE **NOMBRE_DEL_CICLO**');
+    const json = JSON.stringify(doc);
+    expect(json).toContain('"bold"');
+    expect(json).toContain('NOMBRE_DEL_CICLO');
+    expect(json).not.toContain('**NOMBRE_DEL_CICLO**');
+  });
+});

package/src/lib/markdownToHtml.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { markdownToHtml } from './markdownToHtml';
+
+describe('markdownToHtml', () => {
+  it('bolds **text** and emphasises *text*', () => {
+    expect(markdownToHtml('**b**')).toContain('<strong>b</strong>');
+    expect(markdownToHtml('*i*')).toContain('<em>i</em>');
+  });
+
+  it('does NOT emphasise intra-word underscores (CommonMark)', () => {
+    // Regression: placeholders like NOMBRE_DEL_CICLO must survive intact.
+    const html = markdownToHtml('CICLO DE **NOMBRE_DEL_CICLO**');
+    expect(html).toContain('NOMBRE_DEL_CICLO');
+    expect(html).not.toContain('<em>DEL</em>');
+    expect(html).toContain('<strong>NOMBRE_DEL_CICLO</strong>');
+  });
+
+  it('still emphasises standalone _word_', () => {
+    expect(markdownToHtml('hola _mundo_ chau')).toContain('<em>mundo</em>');
+  });
+
+  it('renders ATX headings', () => {
+    expect(markdownToHtml('## Programa')).toMatch(/<h2[^>]*>Programa<\/h2>/);
+  });
+});

package/src/lib/markdownToHtml.ts

@@ -43,7 +43,10 @@ function applyInline(text: string): string {
   out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
   out = out.replace(/__([^_]+)__/g, '<strong>$1</strong>');
   out = out.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, '<em>$1</em>');
-  out = out.replace(/(?<!_)_([^_\n]+)_(?!_)/g, '<em>$1</em>');
+  // Underscore emphasis must not fire intra-word (CommonMark): `a_b_c` stays
+  // literal, so placeholders like `NOMBRE_DEL_CICLO` survive. Require a
+  // non-word boundary on both sides.
+  out = out.replace(/(?<![\w_])_([^_\n]+?)_(?![\w_])/g, '<em>$1</em>');
   // Strikethrough.
   out = out.replace(/~~([^~]+)~~/g, '<s>$1</s>');
   // Links — only http/https/mailto/tel; reject `javascript:` etc.