@railway/inkwell 2.0.0 → 2.1.1

package/dist/index.cjs

@@ -368,6 +368,73 @@ function computeInlineDecorations(entry) {
       strikeMarker: true
     });
   }
+  const linkRanges = [];
+  const linkRegex = /(?<!!)\[([^\]\n]+)\]\(([^)\s]+)\)/g;
+  while ((match = linkRegex.exec(text)) !== null) {
+    if (isInCode(match.index)) continue;
+    const start = match.index;
+    const end = start + match[0].length;
+    const labelLen = match[1].length;
+    const urlLen = match[2].length;
+    const openBracket = start;
+    const labelStart = start + 1;
+    const labelEnd = labelStart + labelLen;
+    const closeBracket = labelEnd;
+    const openParen = closeBracket + 1;
+    const urlStart = openParen + 1;
+    const urlEnd = urlStart + urlLen;
+    const closeParen = urlEnd;
+    linkRanges.push({ start, end });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: openBracket },
+      focus: { path: [...path, 0], offset: openBracket + 1 },
+      linkMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: labelStart },
+      focus: { path: [...path, 0], offset: labelEnd },
+      link: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: closeBracket },
+      focus: { path: [...path, 0], offset: closeBracket + 1 },
+      linkMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: openParen },
+      focus: { path: [...path, 0], offset: openParen + 1 },
+      linkMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: urlStart },
+      focus: { path: [...path, 0], offset: urlEnd },
+      linkUrl: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: closeParen },
+      focus: { path: [...path, 0], offset: closeParen + 1 },
+      linkMarker: true
+    });
+  }
+  const isInLink = (offset) => linkRanges.some((r) => offset >= r.start && offset < r.end);
+  const urlRegex = /(?:https?:\/\/|www\.)[^\s<>()[\]]+/g;
+  while ((match = urlRegex.exec(text)) !== null) {
+    if (isInCode(match.index)) continue;
+    if (isInLink(match.index)) continue;
+    let matched = match[0];
+    let start = match.index;
+    let end = start + matched.length;
+    while (matched.length > 0 && /[.,;:!?]/.test(matched[matched.length - 1])) {
+      matched = matched.slice(0, -1);
+      end--;
+    }
+    if (matched.length === 0) continue;
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start },
+      focus: { path: [...path, 0], offset: end },
+      link: true
+    });
+  }
   return ranges;
 }
 function computeFenceDecorations(entry) {
@@ -775,17 +842,30 @@ function ImageElement({
 }
 function RenderLeaf({ attributes, children, leaf }) {
   const l = leaf;
-  if (l.boldMarker || l.italicMarker || l.strikeMarker) {
+  if (l.boldMarker || l.italicMarker || l.strikeMarker || l.linkMarker) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, className: editorClass("marker"), children });
   }
   if (l.codeMarker) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, className: editorClass("backtick"), children });
   }
+  if (l.linkUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ...attributes,
+        className: `${editorClass("marker")} ${editorClass("link-url")}`,
+        children
+      }
+    );
+  }
   let content = children;
   if (l.bold) content = /* @__PURE__ */ jsxRuntime.jsx("strong", { children: content });
   if (l.italic) content = /* @__PURE__ */ jsxRuntime.jsx("em", { children: content });
   if (l.strikethrough) content = /* @__PURE__ */ jsxRuntime.jsx("del", { children: content });
   if (l.inlineCode) content = /* @__PURE__ */ jsxRuntime.jsx("code", { children: content });
+  if (l.link) {
+    content = /* @__PURE__ */ jsxRuntime.jsx("span", { className: editorClass("link"), children: content });
+  }
   if (l.hljs) {
     content = /* @__PURE__ */ jsxRuntime.jsx("span", { className: l.hljs, children: content });
   }
@@ -827,6 +907,7 @@ var HEADING_RE2 = /^#{1,6}$/;
 var UNORDERED_LIST_CONTINUE_RE = /^(\s*)([-*+]) \S/;
 var UNORDERED_LIST_EMPTY_RE = /^(\s*)([-*+]) ?$/;
 var HEADING_LINE_RE = /^(#{1,6})\s/;
+var PASTED_URL_RE = /^(?:https?:\/\/|www\.)\S+$/i;
 function classifyLine(text, deco) {
   const headingMatch = HEADING_LINE_RE.exec(text);
   if (headingMatch) {
@@ -1161,8 +1242,16 @@ function withMarkdown(editor, featuresRef) {
   editor.insertData = (data) => {
     const text = data.getData("text/plain");
     if (text) {
+      const trimmed = text.trim();
+      const sel = editor.selection;
+      if (PASTED_URL_RE.test(trimmed) && sel && !slate.Range.isCollapsed(sel) && slate.Editor.string(editor, sel).length > 0) {
+        const selectedText = slate.Editor.string(editor, sel);
+        slate.Transforms.delete(editor);
+        slate.Transforms.insertText(editor, `[${selectedText}](${trimmed})`);
+        return;
+      }
       const nodes = deserialize(text, featuresRef.current);
-      slate.Transforms.insertNodes(editor, nodes);
+      slate.Transforms.insertFragment(editor, nodes);
       return;
     }
     insertData(data);
@@ -3163,6 +3252,32 @@ function CopyCodeBlock({
     /* @__PURE__ */ jsxRuntime.jsx("pre", { ref: preRef, ...props, children })
   ] });
 }
+function rehypeTrimCodeBlockTrailingNewline() {
+  return (tree) => {
+    unistUtilVisit.visit(tree, "element", (node, _index, parent) => {
+      if (node.tagName !== "code") return;
+      if (!parent || parent.type !== "element" || parent.tagName !== "pre") {
+        return;
+      }
+      const spine = [node];
+      let cursor = node;
+      while (cursor.type === "element") {
+        const children = cursor.children;
+        if (!children.length) return;
+        const last = children[children.length - 1];
+        if (last.type !== "element" && last.type !== "text") return;
+        cursor = last;
+        if (cursor.type === "element") spine.push(cursor);
+      }
+      if (!cursor.value.endsWith("\n")) return;
+      cursor.value = cursor.value.slice(0, -1);
+      if (cursor.value === "") {
+        const owner = spine[spine.length - 1];
+        owner.children.pop();
+      }
+    });
+  };
+}
 function splitTextOnNewlines(text) {
   if (!text.value.includes("\n")) return [text];
   const parts = text.value.split("\n");
@@ -3309,6 +3424,7 @@ function createProcessor2(options = {}) {
       proc.use(plugin);
     }
   }
+  proc.use(rehypeTrimCodeBlockTrailingNewline);
   proc.use(rehypeSanitize__default.default, {
     ...rehypeSanitize.defaultSchema,
     tagNames: [...rehypeSanitize.defaultSchema.tagNames ?? [], "span"],

package/dist/index.js

@@ -353,6 +353,73 @@ function computeInlineDecorations(entry) {
       strikeMarker: true
     });
   }
+  const linkRanges = [];
+  const linkRegex = /(?<!!)\[([^\]\n]+)\]\(([^)\s]+)\)/g;
+  while ((match = linkRegex.exec(text)) !== null) {
+    if (isInCode(match.index)) continue;
+    const start = match.index;
+    const end = start + match[0].length;
+    const labelLen = match[1].length;
+    const urlLen = match[2].length;
+    const openBracket = start;
+    const labelStart = start + 1;
+    const labelEnd = labelStart + labelLen;
+    const closeBracket = labelEnd;
+    const openParen = closeBracket + 1;
+    const urlStart = openParen + 1;
+    const urlEnd = urlStart + urlLen;
+    const closeParen = urlEnd;
+    linkRanges.push({ start, end });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: openBracket },
+      focus: { path: [...path, 0], offset: openBracket + 1 },
+      linkMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: labelStart },
+      focus: { path: [...path, 0], offset: labelEnd },
+      link: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: closeBracket },
+      focus: { path: [...path, 0], offset: closeBracket + 1 },
+      linkMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: openParen },
+      focus: { path: [...path, 0], offset: openParen + 1 },
+      linkMarker: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: urlStart },
+      focus: { path: [...path, 0], offset: urlEnd },
+      linkUrl: true
+    });
+    ranges.push({
+      anchor: { path: [...path, 0], offset: closeParen },
+      focus: { path: [...path, 0], offset: closeParen + 1 },
+      linkMarker: true
+    });
+  }
+  const isInLink = (offset) => linkRanges.some((r) => offset >= r.start && offset < r.end);
+  const urlRegex = /(?:https?:\/\/|www\.)[^\s<>()[\]]+/g;
+  while ((match = urlRegex.exec(text)) !== null) {
+    if (isInCode(match.index)) continue;
+    if (isInLink(match.index)) continue;
+    let matched = match[0];
+    let start = match.index;
+    let end = start + matched.length;
+    while (matched.length > 0 && /[.,;:!?]/.test(matched[matched.length - 1])) {
+      matched = matched.slice(0, -1);
+      end--;
+    }
+    if (matched.length === 0) continue;
+    ranges.push({
+      anchor: { path: [...path, 0], offset: start },
+      focus: { path: [...path, 0], offset: end },
+      link: true
+    });
+  }
   return ranges;
 }
 function computeFenceDecorations(entry) {
@@ -760,17 +827,30 @@ function ImageElement({
 }
 function RenderLeaf({ attributes, children, leaf }) {
   const l = leaf;
-  if (l.boldMarker || l.italicMarker || l.strikeMarker) {
+  if (l.boldMarker || l.italicMarker || l.strikeMarker || l.linkMarker) {
     return /* @__PURE__ */ jsx("span", { ...attributes, className: editorClass("marker"), children });
   }
   if (l.codeMarker) {
     return /* @__PURE__ */ jsx("span", { ...attributes, className: editorClass("backtick"), children });
   }
+  if (l.linkUrl) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...attributes,
+        className: `${editorClass("marker")} ${editorClass("link-url")}`,
+        children
+      }
+    );
+  }
   let content = children;
   if (l.bold) content = /* @__PURE__ */ jsx("strong", { children: content });
   if (l.italic) content = /* @__PURE__ */ jsx("em", { children: content });
   if (l.strikethrough) content = /* @__PURE__ */ jsx("del", { children: content });
   if (l.inlineCode) content = /* @__PURE__ */ jsx("code", { children: content });
+  if (l.link) {
+    content = /* @__PURE__ */ jsx("span", { className: editorClass("link"), children: content });
+  }
   if (l.hljs) {
     content = /* @__PURE__ */ jsx("span", { className: l.hljs, children: content });
   }
@@ -812,6 +892,7 @@ var HEADING_RE2 = /^#{1,6}$/;
 var UNORDERED_LIST_CONTINUE_RE = /^(\s*)([-*+]) \S/;
 var UNORDERED_LIST_EMPTY_RE = /^(\s*)([-*+]) ?$/;
 var HEADING_LINE_RE = /^(#{1,6})\s/;
+var PASTED_URL_RE = /^(?:https?:\/\/|www\.)\S+$/i;
 function classifyLine(text, deco) {
   const headingMatch = HEADING_LINE_RE.exec(text);
   if (headingMatch) {
@@ -1146,8 +1227,16 @@ function withMarkdown(editor, featuresRef) {
   editor.insertData = (data) => {
     const text = data.getData("text/plain");
     if (text) {
+      const trimmed = text.trim();
+      const sel = editor.selection;
+      if (PASTED_URL_RE.test(trimmed) && sel && !Range.isCollapsed(sel) && Editor.string(editor, sel).length > 0) {
+        const selectedText = Editor.string(editor, sel);
+        Transforms.delete(editor);
+        Transforms.insertText(editor, `[${selectedText}](${trimmed})`);
+        return;
+      }
       const nodes = deserialize(text, featuresRef.current);
-      Transforms.insertNodes(editor, nodes);
+      Transforms.insertFragment(editor, nodes);
       return;
     }
     insertData(data);
@@ -3148,6 +3237,32 @@ function CopyCodeBlock({
     /* @__PURE__ */ jsx("pre", { ref: preRef, ...props, children })
   ] });
 }
+function rehypeTrimCodeBlockTrailingNewline() {
+  return (tree) => {
+    visit(tree, "element", (node, _index, parent) => {
+      if (node.tagName !== "code") return;
+      if (!parent || parent.type !== "element" || parent.tagName !== "pre") {
+        return;
+      }
+      const spine = [node];
+      let cursor = node;
+      while (cursor.type === "element") {
+        const children = cursor.children;
+        if (!children.length) return;
+        const last = children[children.length - 1];
+        if (last.type !== "element" && last.type !== "text") return;
+        cursor = last;
+        if (cursor.type === "element") spine.push(cursor);
+      }
+      if (!cursor.value.endsWith("\n")) return;
+      cursor.value = cursor.value.slice(0, -1);
+      if (cursor.value === "") {
+        const owner = spine[spine.length - 1];
+        owner.children.pop();
+      }
+    });
+  };
+}
 function splitTextOnNewlines(text) {
   if (!text.value.includes("\n")) return [text];
   const parts = text.value.split("\n");
@@ -3294,6 +3409,7 @@ function createProcessor2(options = {}) {
       proc.use(plugin);
     }
   }
+  proc.use(rehypeTrimCodeBlockTrailingNewline);
   proc.use(rehypeSanitize, {
     ...defaultSchema,
     tagNames: [...defaultSchema.tagNames ?? [], "span"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railway/inkwell",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Inkwell is a Markdown editor and renderer for React with an extensible plugin system.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -62,6 +62,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",

package/src/styles.css

@@ -194,6 +194,24 @@
   font-family: var(--inkwell-font-mono);
   font-size: var(--inkwell-code-font-size);
 }
+/* Visible link text — mirrors `.inkwell-renderer a` so the editor stays
+   WYSIWYG. Applies to both the label inside `[text](url)` and the entire
+   text of a bare URL autolink. */
+:where(.inkwell-editor-link) {
+  color: var(--inkwell-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+/* URL token inside `(...)` of a markdown link. Inherits the dim color
+   from the `.inkwell-editor-marker` class it ships alongside; this rule
+   exists so consumers have a stable hook to restyle the URL separately
+   from generic markers (different color, hover state, etc.) without
+   touching every dimmed bracket / asterisk in the editor. Empty by
+   design — overriding `text-decoration: underline` etc. is a consumer
+   call. */
+:where(.inkwell-editor-link-url) {
+  text-decoration: none;
+}
 
 :where(.inkwell-editor-blockquote) {
   border-left: 3px solid var(--inkwell-border-strong);