mdwysiwyg 0.2.1 → 0.3.0

package/README.md

@@ -117,6 +117,7 @@ Try it in your browser, no install required: **[ferkiernan.github.io/mdwysiwyg](
 | Insert | Images (by URL), links (URL-only dialog when text is already selected, auto `http://` prefix), tables (visual size picker), horizontal rules, embedded HTML |
 | Links | Click an existing link to open a quick popover: go to URL, copy URL, or edit/remove it inline |
 | Tables | Click an already-focused cell again for a context menu: add/move/delete columns (header cells) or rows (data cells) |
+| Cursor between blocks | Click the free area to the right of a table (or the gap between two blocks) to put the cursor there; press Enter to add a blank line, or just type. When the document ends in a block (table, code, Mermaid, quote, list, rule, image) an empty line always follows it |
 | Code | Fenced code blocks with a language picker (JSON/SQL/TypeScript/JavaScript/Java/custom) and syntax highlighting |
 | 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 |

package/dist/index.cjs

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react11 = require("react");
 var import_react12 = require("@tiptap/react");
 var import_core2 = require("@tiptap/core");
-var import_state = require("@tiptap/pm/state");
+var import_state2 = require("@tiptap/pm/state");
 
 // src/components/MarkdownEditor/markdown/tiptapMarkdownBridge.ts
 var import_core = require("@tiptap/core");
@@ -2820,6 +2820,31 @@ var CodeBlockWithMermaid = import_extension_code_block_lowlight.default.extend({
     };
   }
 });
+function createResolvedImage(getResolver) {
+  return import_extension_image.default.extend({
+    addNodeView() {
+      return ({ node }) => {
+        const img = document.createElement("img");
+        const paint = (attrs) => {
+          const src = String(attrs["src"] ?? "");
+          img.src = getResolver()?.(src) ?? src;
+          img.alt = String(attrs["alt"] ?? "");
+          if (attrs["title"]) img.title = String(attrs["title"]);
+          else img.removeAttribute("title");
+        };
+        paint(node.attrs);
+        return {
+          dom: img,
+          update(updated) {
+            if (updated.type.name !== node.type.name) return false;
+            paint(updated.attrs);
+            return true;
+          }
+        };
+      };
+    }
+  });
+}
 function createEditorExtensions(options) {
   return [
     import_starter_kit.default.configure({ codeBlock: false }),
@@ -2831,7 +2856,7 @@ function createEditorExtensions(options) {
     import_extension_task_list.default,
     import_extension_task_item.default.configure({ nested: true }),
     import_extension_link.default.configure({ openOnClick: false }),
-    import_extension_image.default,
+    options.resolveImageSrc ? createResolvedImage(options.resolveImageSrc) : import_extension_image.default,
     HtmlBlock.configure({ sanitize: options.sanitizeEmbeddedHtml })
   ];
 }
@@ -2916,6 +2941,95 @@ function moveCurrentRow(editor, direction) {
   (0, import_tables.moveTableRow)({ from, to })(state, editor.view.dispatch, editor.view);
 }
 
+// src/components/MarkdownEditor/markdown/trailingLine.ts
+var import_gapcursor = require("@tiptap/pm/gapcursor");
+var import_state = require("@tiptap/pm/state");
+function ensureTrailingParagraph(editor) {
+  if (!editor.isEditable) return;
+  const { state, view } = editor;
+  const paragraph = state.schema.nodes["paragraph"];
+  if (!paragraph) return;
+  if (state.doc.lastChild?.type === paragraph) return;
+  view.dispatch(
+    state.tr.insert(state.doc.content.size, paragraph.create()).setMeta("preventUpdate", true).setMeta("addToHistory", false)
+  );
+}
+function topLevelBlocks(view) {
+  const blocks = [];
+  view.state.doc.forEach((node, pos) => {
+    const dom = view.nodeDOM(pos);
+    blocks.push({ node, pos, el: dom instanceof HTMLElement ? dom : null });
+  });
+  return blocks;
+}
+function isEmptyParagraph(node) {
+  return node !== void 0 && node.type.name === "paragraph" && node.content.size === 0;
+}
+function isOnScrollbar(element, event) {
+  const rect = element.getBoundingClientRect();
+  return element.clientWidth > 0 && event.clientX - rect.left >= element.clientWidth || element.clientHeight > 0 && event.clientY - rect.top >= element.clientHeight;
+}
+function findBoundary(view, target, event) {
+  const blocks = topLevelBlocks(view);
+  const last = blocks[blocks.length - 1];
+  if (last === void 0 || last.el === null) return null;
+  const tableIndex = blocks.findIndex(
+    (block) => block.el === target && block.node.type.name === "table"
+  );
+  if (tableIndex !== -1) {
+    if (isOnScrollbar(target, event)) return null;
+    const tableTop = target.querySelector("table")?.getBoundingClientRect().top;
+    return tableTop !== void 0 && event.clientY < tableTop ? tableIndex : tableIndex + 1;
+  }
+  if (target !== view.dom) return null;
+  const beforeLast = blocks[blocks.length - 2];
+  const lastIsEmpty = isEmptyParagraph(last.node);
+  const thresholdEl = lastIsEmpty && beforeLast?.node.type.name !== "paragraph" ? beforeLast?.el ?? last.el : last.el;
+  const threshold = thresholdEl.getBoundingClientRect();
+  if (event.clientY >= (lastIsEmpty ? threshold.top : threshold.bottom)) {
+    return last.node.type.name === "paragraph" ? blocks.length : null;
+  }
+  const inside = blocks.findIndex((block) => {
+    const rect = block.el?.getBoundingClientRect();
+    return rect !== void 0 && event.clientY >= rect.top && event.clientY <= rect.bottom;
+  });
+  if (inside !== -1) {
+    return blocks[inside]?.node.type.name === "table" ? inside + 1 : null;
+  }
+  const next = blocks.findIndex(
+    (block) => block.el !== null && block.el.getBoundingClientRect().top > event.clientY
+  );
+  if (next < 1) return null;
+  const prevNode = blocks[next - 1]?.node;
+  const nextNode = blocks[next]?.node;
+  return prevNode?.isTextblock && nextNode?.isTextblock ? null : next;
+}
+function selectionAtBoundary(doc, index) {
+  let pos = 0;
+  for (let i = 0; i < index; i++) pos += doc.child(i).nodeSize;
+  const prev = index > 0 ? doc.child(index - 1) : void 0;
+  const next = index < doc.childCount ? doc.child(index) : void 0;
+  if (isEmptyParagraph(next)) return import_state.TextSelection.create(doc, pos + 1);
+  if (isEmptyParagraph(prev)) return import_state.TextSelection.create(doc, pos - 1);
+  if (next === void 0 && prev?.isTextblock) {
+    return import_state.TextSelection.create(doc, pos - 1);
+  }
+  return new import_gapcursor.GapCursor(doc.resolve(pos));
+}
+function handleBlankAreaMouseDown(view, event) {
+  if (!view.editable || event.button !== 0 || event.shiftKey) return false;
+  const target = event.target;
+  if (!(target instanceof Element)) return false;
+  const boundary = findBoundary(view, target, event);
+  if (boundary === null) return false;
+  event.preventDefault();
+  view.dispatch(
+    view.state.tr.setSelection(selectionAtBoundary(view.state.doc, boundary)).scrollIntoView()
+  );
+  view.focus();
+  return true;
+}
+
 // src/components/MarkdownEditor/views/RenderedView.tsx
 var import_react = require("@tiptap/react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -4031,7 +4145,8 @@ var MarkdownEditor = (0, import_react11.forwardRef)(function MarkdownEditor2({
   className,
   onlyView = false,
   resizable = true,
-  onlyViewNotice
+  onlyViewNotice,
+  resolveImageSrc
 }, ref) {
   const [source, setSource] = (0, import_react11.useState)(initialContent);
   const [viewMode, setViewMode] = (0, import_react11.useState)("wysiwyg");
@@ -4047,9 +4162,15 @@ var MarkdownEditor = (0, import_react11.forwardRef)(function MarkdownEditor2({
   onChangeRef.current = onChange;
   const sourceRef = (0, import_react11.useRef)(source);
   sourceRef.current = source;
+  const resolveImageSrcRef = (0, import_react11.useRef)(resolveImageSrc);
+  resolveImageSrcRef.current = resolveImageSrc;
+  const hasImageResolver = resolveImageSrc !== void 0;
   const extensions = (0, import_react11.useMemo)(
-    () => createEditorExtensions({ sanitizeEmbeddedHtml }),
-    [sanitizeEmbeddedHtml]
+    () => createEditorExtensions({
+      sanitizeEmbeddedHtml,
+      resolveImageSrc: hasImageResolver ? () => resolveImageSrcRef.current : void 0
+    }),
+    [sanitizeEmbeddedHtml, hasImageResolver]
   );
   const editor = (0, import_react12.useEditor)(
     {
@@ -4063,6 +4184,8 @@ var MarkdownEditor = (0, import_react11.forwardRef)(function MarkdownEditor2({
           "aria-label": "Editor de texto enriquecido"
         },
         handleDOMEvents: {
+          // Clic en el área libre tras el último bloque → línea posterior.
+          mousedown: handleBlankAreaMouseDown,
           click(view, event) {
             const target = event.target;
             if (!(target instanceof Element)) return false;
@@ -4076,7 +4199,7 @@ var MarkdownEditor = (0, import_react11.forwardRef)(function MarkdownEditor2({
               if (lastFocusedCellPosRef.current === cellPos) {
                 event.preventDefault();
                 const tr = view.state.tr.setSelection(
-                  import_state.TextSelection.near(view.state.doc.resolve(cellPos + 1))
+                  import_state2.TextSelection.near(view.state.doc.resolve(cellPos + 1))
                 );
                 view.dispatch(tr);
                 setTableMenu({
@@ -4110,6 +4233,9 @@ var MarkdownEditor = (0, import_react11.forwardRef)(function MarkdownEditor2({
           }
         }
       },
+      onCreate({ editor: createdEditor }) {
+        ensureTrailingParagraph(createdEditor);
+      },
       onUpdate({ editor: currentEditor }) {
         const markdown = editorToMarkdown(currentEditor);
         sourceRef.current = markdown;
@@ -4168,9 +4294,28 @@ var MarkdownEditor = (0, import_react11.forwardRef)(function MarkdownEditor2({
       },
       isModified() {
         return sourceRef.current !== originalContentRef.current;
+      },
+      insertMarkdown(markdown) {
+        const textarea = textareaRef.current;
+        if (effectiveViewMode === "markdown" && textarea) {
+          const start = textarea.selectionStart;
+          const end = textarea.selectionEnd;
+          const current = sourceRef.current;
+          handleSourceChange(current.slice(0, start) + markdown + current.slice(end));
+          return;
+        }
+        editor?.chain().focus().insertContent(markdownToEditorContent(markdown)).run();
+      },
+      setMarkdown(markdown) {
+        sourceRef.current = markdown;
+        setSource(markdown);
+        editor?.commands.setContent(markdownToEditorContent(markdown), {
+          emitUpdate: false
+        });
+        onChangeRef.current?.(markdown);
       }
     }),
-    [editor]
+    [editor, effectiveViewMode]
   );
   const closeLinkPopover = () => setLinkPopover(null);
   const closeTableMenu = () => setTableMenu(null);