@railway/inkwell 1.4.0 → 2.1.0

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,6 +1242,14 @@ 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);
       return;
@@ -3163,6 +3252,97 @@ 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");
+  const result = [];
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i] !== "") {
+      result.push({ type: "text", value: parts[i] });
+    }
+    if (i < parts.length - 1) {
+      result.push({ type: "break" });
+    }
+  }
+  return result;
+}
+function expandParagraphChildren(children) {
+  let changed = false;
+  const next = [];
+  for (const child of children) {
+    if (child.type === "text" && child.value.includes("\n")) {
+      next.push(...splitTextOnNewlines(child));
+      changed = true;
+    } else {
+      next.push(child);
+    }
+  }
+  return changed ? next : null;
+}
+function remarkSoftBreakAsBreak() {
+  return (tree) => {
+    unistUtilVisit.visit(tree, "paragraph", (node) => {
+      const expanded = expandParagraphChildren(node.children);
+      if (expanded) node.children = expanded;
+    });
+  };
+}
+function remarkSoftBreakAsParagraph() {
+  return (tree) => {
+    unistUtilVisit.visit(tree, "paragraph", (node, index, parent) => {
+      if (!parent || index == null) return;
+      const expanded = expandParagraphChildren(node.children) ?? node.children.slice();
+      const breakIndices = [];
+      for (let i = 0; i < expanded.length; i++) {
+        if (expanded[i].type === "break") breakIndices.push(i);
+      }
+      if (breakIndices.length === 0) {
+        return;
+      }
+      const newParagraphs = [];
+      let start = 0;
+      for (const breakIdx of [...breakIndices, expanded.length]) {
+        if (breakIdx > start) {
+          newParagraphs.push({
+            type: "paragraph",
+            children: expanded.slice(start, breakIdx)
+          });
+        }
+        start = breakIdx + 1;
+      }
+      parent.children.splice(index, 1, ...newParagraphs);
+      return [unistUtilVisit.SKIP, index + newParagraphs.length];
+    });
+  };
+}
+
+// src/renderer/markdown-parser.ts
 var MENTION_TAG_PREFIX = "inkwell-mention-";
 function rehypeMentions(mentions) {
   return () => (tree) => {
@@ -3225,7 +3405,14 @@ function rehypeMentions(mentions) {
   };
 }
 function createProcessor2(options = {}) {
-  const proc = unified.unified().use(remarkParse__default.default).use(remarkGfm__default.default).use(remarkNoTables).use(remarkFlattenBlockquotes).use(remarkRehype__default.default);
+  const proc = unified.unified().use(remarkParse__default.default).use(remarkGfm__default.default).use(remarkNoTables).use(remarkFlattenBlockquotes);
+  const softBreak = options.softBreak ?? "paragraph";
+  if (softBreak === "br") {
+    proc.use(remarkSoftBreakAsBreak);
+  } else if (softBreak === "paragraph") {
+    proc.use(remarkSoftBreakAsParagraph);
+  }
+  proc.use(remarkRehype__default.default);
   const plugins = options.rehypePlugins ?? [
     [rehypeHighlight__default.default, { detect: true }]
   ];
@@ -3237,6 +3424,7 @@ function createProcessor2(options = {}) {
       proc.use(plugin);
     }
   }
+  proc.use(rehypeTrimCodeBlockTrailingNewline);
   proc.use(rehypeSanitize__default.default, {
     ...rehypeSanitize.defaultSchema,
     tagNames: [...rehypeSanitize.defaultSchema.tagNames ?? [], "span"],
@@ -3284,7 +3472,8 @@ function InkwellRenderer({
   className,
   components,
   rehypePlugins,
-  mentions
+  mentions,
+  softBreak
 }) {
   const mergedComponents = react.useMemo(
     () => ({ pre: CopyCodeBlock, ...components }),
@@ -3294,9 +3483,10 @@ function InkwellRenderer({
     () => parseMarkdown(content, {
       components: mergedComponents,
       rehypePlugins,
-      mentions
+      mentions,
+      softBreak
     }),
-    [content, mergedComponents, rehypePlugins, mentions]
+    [content, mergedComponents, rehypePlugins, mentions, softBreak]
   );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `inkwell-renderer ${className ?? ""}`, children: rendered });
 }

package/dist/index.d.cts

@@ -110,6 +110,16 @@ interface InkwellEditorProps {
     /** Called when submitOnEnter handles Enter. */
     onSubmit?: (content: string) => void;
 }
+/**
+ * How `InkwellRenderer` handles single-newline soft breaks in source markdown.
+ * - `"paragraph"` (default): split the enclosing paragraph at the soft break,
+ *   producing two `<p>` elements with normal paragraph margins.
+ * - `"br"`: emit a `<br />`. Matches GFM-style behavior (and Showdown with
+ *   `simpleLineBreaks: true`).
+ * - `"preserve"`: keep as a literal `\n` text node. The browser collapses it
+ *   to whitespace per CSS. Matches strict CommonMark.
+ */
+type InkwellSoftBreakBehavior = "preserve" | "br" | "paragraph";
 interface InkwellRendererProps {
     /** Markdown source content string. */
     content: string;
@@ -121,11 +131,15 @@ interface InkwellRendererProps {
     rehypePlugins?: RehypePluginConfig[];
     /** Mention patterns to expand in rendered text. */
     mentions?: MentionRenderer[];
+    /** How to render single-newline soft breaks. Defaults to `"paragraph"`. */
+    softBreak?: InkwellSoftBreakBehavior;
 }
 interface ParseMarkdownOptions {
     components?: InkwellComponents;
     rehypePlugins?: RehypePluginConfig[];
     mentions?: MentionRenderer[];
+    /** How to render single-newline soft breaks. Defaults to `"paragraph"`. */
+    softBreak?: InkwellSoftBreakBehavior;
 }
 interface MentionRenderer {
     /** Regular expression applied to text-node content. */
@@ -482,11 +496,11 @@ declare function createSnippetsPlugin({ snippets, name, trigger, }: SnippetsPlug
  */
 declare function htmlToMarkdown(html: string): string;
 
-declare function InkwellRenderer({ content, className, components, rehypePlugins, mentions, }: InkwellRendererProps): ReactNode;
+declare function InkwellRenderer({ content, className, components, rehypePlugins, mentions, softBreak, }: InkwellRendererProps): ReactNode;
 
 /**
  * Parse a markdown string into React elements synchronously
  */
 declare function parseMarkdown(content: string, options?: ParseMarkdownOptions): ReactNode;
 
-export { type Attachment, type AttachmentUploadResult, type AttachmentsHandle, type AttachmentsPluginOptions, type BubbleMenuItem, type BubbleMenuItemProps, type BubbleMenuOptions, type CompletionsPluginOptions, type EmojiItem, type EmojiPluginOptions, type InkwellComponents, InkwellEditor, type InkwellEditorClassNames, type InkwellEditorFocusOptions, type InkwellEditorHandle, type InkwellEditorProps, type InkwellEditorState, type InkwellEditorStyles, type InkwellFeatures, type InkwellPlugin, type InkwellPluginActivation, type InkwellPluginEditor, type InkwellPluginPlaceholder, InkwellRenderer, type InkwellRendererProps, type MentionItem, type MentionRenderer, type MentionsPluginOptions, type ParseMarkdownOptions, type PluginInsertDataContext, type PluginKeyDownContext, type PluginRenderProps, type RehypePluginConfig, type SlashCommandArg, type SlashCommandChoice, type SlashCommandExecution, type SlashCommandItem, type SlashCommandsPluginOptions, type Snippet, type SnippetsPluginOptions, type SubscribeForwardedKey, createAttachmentsPlugin, createBubbleMenuPlugin, createCompletionsPlugin, createEmojiPlugin, createMentionsPlugin, createSlashCommandsPlugin, createSnippetsPlugin, defaultBubbleMenuItems, defaultEmojis, htmlToMarkdown, parseMarkdown };
+export { type Attachment, type AttachmentUploadResult, type AttachmentsHandle, type AttachmentsPluginOptions, type BubbleMenuItem, type BubbleMenuItemProps, type BubbleMenuOptions, type CompletionsPluginOptions, type EmojiItem, type EmojiPluginOptions, type InkwellComponents, InkwellEditor, type InkwellEditorClassNames, type InkwellEditorFocusOptions, type InkwellEditorHandle, type InkwellEditorProps, type InkwellEditorState, type InkwellEditorStyles, type InkwellFeatures, type InkwellPlugin, type InkwellPluginActivation, type InkwellPluginEditor, type InkwellPluginPlaceholder, InkwellRenderer, type InkwellRendererProps, type InkwellSoftBreakBehavior, type MentionItem, type MentionRenderer, type MentionsPluginOptions, type ParseMarkdownOptions, type PluginInsertDataContext, type PluginKeyDownContext, type PluginRenderProps, type RehypePluginConfig, type SlashCommandArg, type SlashCommandChoice, type SlashCommandExecution, type SlashCommandItem, type SlashCommandsPluginOptions, type Snippet, type SnippetsPluginOptions, type SubscribeForwardedKey, createAttachmentsPlugin, createBubbleMenuPlugin, createCompletionsPlugin, createEmojiPlugin, createMentionsPlugin, createSlashCommandsPlugin, createSnippetsPlugin, defaultBubbleMenuItems, defaultEmojis, htmlToMarkdown, parseMarkdown };

package/dist/index.d.ts

@@ -110,6 +110,16 @@ interface InkwellEditorProps {
     /** Called when submitOnEnter handles Enter. */
     onSubmit?: (content: string) => void;
 }
+/**
+ * How `InkwellRenderer` handles single-newline soft breaks in source markdown.
+ * - `"paragraph"` (default): split the enclosing paragraph at the soft break,
+ *   producing two `<p>` elements with normal paragraph margins.
+ * - `"br"`: emit a `<br />`. Matches GFM-style behavior (and Showdown with
+ *   `simpleLineBreaks: true`).
+ * - `"preserve"`: keep as a literal `\n` text node. The browser collapses it
+ *   to whitespace per CSS. Matches strict CommonMark.
+ */
+type InkwellSoftBreakBehavior = "preserve" | "br" | "paragraph";
 interface InkwellRendererProps {
     /** Markdown source content string. */
     content: string;
@@ -121,11 +131,15 @@ interface InkwellRendererProps {
     rehypePlugins?: RehypePluginConfig[];
     /** Mention patterns to expand in rendered text. */
     mentions?: MentionRenderer[];
+    /** How to render single-newline soft breaks. Defaults to `"paragraph"`. */
+    softBreak?: InkwellSoftBreakBehavior;
 }
 interface ParseMarkdownOptions {
     components?: InkwellComponents;
     rehypePlugins?: RehypePluginConfig[];
     mentions?: MentionRenderer[];
+    /** How to render single-newline soft breaks. Defaults to `"paragraph"`. */
+    softBreak?: InkwellSoftBreakBehavior;
 }
 interface MentionRenderer {
     /** Regular expression applied to text-node content. */
@@ -482,11 +496,11 @@ declare function createSnippetsPlugin({ snippets, name, trigger, }: SnippetsPlug
  */
 declare function htmlToMarkdown(html: string): string;
 
-declare function InkwellRenderer({ content, className, components, rehypePlugins, mentions, }: InkwellRendererProps): ReactNode;
+declare function InkwellRenderer({ content, className, components, rehypePlugins, mentions, softBreak, }: InkwellRendererProps): ReactNode;
 
 /**
  * Parse a markdown string into React elements synchronously
  */
 declare function parseMarkdown(content: string, options?: ParseMarkdownOptions): ReactNode;
 
-export { type Attachment, type AttachmentUploadResult, type AttachmentsHandle, type AttachmentsPluginOptions, type BubbleMenuItem, type BubbleMenuItemProps, type BubbleMenuOptions, type CompletionsPluginOptions, type EmojiItem, type EmojiPluginOptions, type InkwellComponents, InkwellEditor, type InkwellEditorClassNames, type InkwellEditorFocusOptions, type InkwellEditorHandle, type InkwellEditorProps, type InkwellEditorState, type InkwellEditorStyles, type InkwellFeatures, type InkwellPlugin, type InkwellPluginActivation, type InkwellPluginEditor, type InkwellPluginPlaceholder, InkwellRenderer, type InkwellRendererProps, type MentionItem, type MentionRenderer, type MentionsPluginOptions, type ParseMarkdownOptions, type PluginInsertDataContext, type PluginKeyDownContext, type PluginRenderProps, type RehypePluginConfig, type SlashCommandArg, type SlashCommandChoice, type SlashCommandExecution, type SlashCommandItem, type SlashCommandsPluginOptions, type Snippet, type SnippetsPluginOptions, type SubscribeForwardedKey, createAttachmentsPlugin, createBubbleMenuPlugin, createCompletionsPlugin, createEmojiPlugin, createMentionsPlugin, createSlashCommandsPlugin, createSnippetsPlugin, defaultBubbleMenuItems, defaultEmojis, htmlToMarkdown, parseMarkdown };
+export { type Attachment, type AttachmentUploadResult, type AttachmentsHandle, type AttachmentsPluginOptions, type BubbleMenuItem, type BubbleMenuItemProps, type BubbleMenuOptions, type CompletionsPluginOptions, type EmojiItem, type EmojiPluginOptions, type InkwellComponents, InkwellEditor, type InkwellEditorClassNames, type InkwellEditorFocusOptions, type InkwellEditorHandle, type InkwellEditorProps, type InkwellEditorState, type InkwellEditorStyles, type InkwellFeatures, type InkwellPlugin, type InkwellPluginActivation, type InkwellPluginEditor, type InkwellPluginPlaceholder, InkwellRenderer, type InkwellRendererProps, type InkwellSoftBreakBehavior, type MentionItem, type MentionRenderer, type MentionsPluginOptions, type ParseMarkdownOptions, type PluginInsertDataContext, type PluginKeyDownContext, type PluginRenderProps, type RehypePluginConfig, type SlashCommandArg, type SlashCommandChoice, type SlashCommandExecution, type SlashCommandItem, type SlashCommandsPluginOptions, type Snippet, type SnippetsPluginOptions, type SubscribeForwardedKey, createAttachmentsPlugin, createBubbleMenuPlugin, createCompletionsPlugin, createEmojiPlugin, createMentionsPlugin, createSlashCommandsPlugin, createSnippetsPlugin, defaultBubbleMenuItems, defaultEmojis, htmlToMarkdown, parseMarkdown };

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,6 +1227,14 @@ 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);
       return;
@@ -3148,6 +3237,97 @@ 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");
+  const result = [];
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i] !== "") {
+      result.push({ type: "text", value: parts[i] });
+    }
+    if (i < parts.length - 1) {
+      result.push({ type: "break" });
+    }
+  }
+  return result;
+}
+function expandParagraphChildren(children) {
+  let changed = false;
+  const next = [];
+  for (const child of children) {
+    if (child.type === "text" && child.value.includes("\n")) {
+      next.push(...splitTextOnNewlines(child));
+      changed = true;
+    } else {
+      next.push(child);
+    }
+  }
+  return changed ? next : null;
+}
+function remarkSoftBreakAsBreak() {
+  return (tree) => {
+    visit(tree, "paragraph", (node) => {
+      const expanded = expandParagraphChildren(node.children);
+      if (expanded) node.children = expanded;
+    });
+  };
+}
+function remarkSoftBreakAsParagraph() {
+  return (tree) => {
+    visit(tree, "paragraph", (node, index, parent) => {
+      if (!parent || index == null) return;
+      const expanded = expandParagraphChildren(node.children) ?? node.children.slice();
+      const breakIndices = [];
+      for (let i = 0; i < expanded.length; i++) {
+        if (expanded[i].type === "break") breakIndices.push(i);
+      }
+      if (breakIndices.length === 0) {
+        return;
+      }
+      const newParagraphs = [];
+      let start = 0;
+      for (const breakIdx of [...breakIndices, expanded.length]) {
+        if (breakIdx > start) {
+          newParagraphs.push({
+            type: "paragraph",
+            children: expanded.slice(start, breakIdx)
+          });
+        }
+        start = breakIdx + 1;
+      }
+      parent.children.splice(index, 1, ...newParagraphs);
+      return [SKIP, index + newParagraphs.length];
+    });
+  };
+}
+
+// src/renderer/markdown-parser.ts
 var MENTION_TAG_PREFIX = "inkwell-mention-";
 function rehypeMentions(mentions) {
   return () => (tree) => {
@@ -3210,7 +3390,14 @@ function rehypeMentions(mentions) {
   };
 }
 function createProcessor2(options = {}) {
-  const proc = unified().use(remarkParse).use(remarkGfm).use(remarkNoTables).use(remarkFlattenBlockquotes).use(remarkRehype);
+  const proc = unified().use(remarkParse).use(remarkGfm).use(remarkNoTables).use(remarkFlattenBlockquotes);
+  const softBreak = options.softBreak ?? "paragraph";
+  if (softBreak === "br") {
+    proc.use(remarkSoftBreakAsBreak);
+  } else if (softBreak === "paragraph") {
+    proc.use(remarkSoftBreakAsParagraph);
+  }
+  proc.use(remarkRehype);
   const plugins = options.rehypePlugins ?? [
     [rehypeHighlight, { detect: true }]
   ];
@@ -3222,6 +3409,7 @@ function createProcessor2(options = {}) {
       proc.use(plugin);
     }
   }
+  proc.use(rehypeTrimCodeBlockTrailingNewline);
   proc.use(rehypeSanitize, {
     ...defaultSchema,
     tagNames: [...defaultSchema.tagNames ?? [], "span"],
@@ -3269,7 +3457,8 @@ function InkwellRenderer({
   className,
   components,
   rehypePlugins,
-  mentions
+  mentions,
+  softBreak
 }) {
   const mergedComponents = useMemo(
     () => ({ pre: CopyCodeBlock, ...components }),
@@ -3279,9 +3468,10 @@ function InkwellRenderer({
     () => parseMarkdown(content, {
       components: mergedComponents,
       rehypePlugins,
-      mentions
+      mentions,
+      softBreak
     }),
-    [content, mergedComponents, rehypePlugins, mentions]
+    [content, mergedComponents, rehypePlugins, mentions, softBreak]
   );
   return /* @__PURE__ */ jsx("div", { className: `inkwell-renderer ${className ?? ""}`, children: rendered });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railway/inkwell",
-  "version": "1.4.0",
+  "version": "2.1.0",
   "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

@@ -62,6 +62,34 @@
     "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo,
     Consolas, monospace;
   --inkwell-radius: 6px;
+
+  /* Typography & spacing. Defined once and consumed by both
+     `.inkwell-editor` and `.inkwell-renderer` so the two surfaces stay
+     WYSIWYG — what you type matches what renders. Override any token
+     on either surface to retune both (or use a per-surface selector
+     to retune just one). For chat-composer or compact embeds, set
+     `--inkwell-space-paragraph: 0` on the editor surface. */
+  --inkwell-font-size: 0.95rem;
+  --inkwell-line-height: 1.6;
+  --inkwell-heading-weight: 600;
+  --inkwell-heading-line-height: 1.3;
+  --inkwell-h1-size: 1.75em;
+  --inkwell-h2-size: 1.4em;
+  --inkwell-h3-size: 1.2em;
+  --inkwell-h4-size: 1em;
+  --inkwell-h5-size: 0.9em;
+  --inkwell-h6-size: 0.8em;
+  --inkwell-code-font-size: 0.85em;
+
+  --inkwell-space-paragraph: 0.5em;
+  --inkwell-space-heading: 0.75em;
+  --inkwell-space-blockquote: 1em;
+  --inkwell-space-list: 1em;
+  --inkwell-space-list-item: 0.25em;
+  --inkwell-list-indent: 1.5em;
+  --inkwell-space-code-block: 1em;
+  --inkwell-space-image: 1em;
+  --inkwell-space-hr: 2em;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -118,8 +146,8 @@
   border-radius: var(--inkwell-radius);
   background: var(--inkwell-bg);
   color: var(--inkwell-text);
-  line-height: 1.6;
-  font-size: 0.95rem;
+  line-height: var(--inkwell-line-height);
+  font-size: var(--inkwell-font-size);
   transition: border-color 0.15s ease;
 }
 :where(.inkwell-editor:focus-within) {
@@ -127,8 +155,20 @@
 }
 
 /* `position: relative` on paragraphs is structural — Slate decorations and
-   inline children position against it. Margin is theming and goes through
-   `:where()` so a consumer paragraph-spacing utility wins. */
+   inline children position against it.
+
+   Margin stays at `0` here even though the renderer's paragraphs use
+   `--inkwell-space-paragraph`. Reason: the editor's content model emits
+   one `<p>` per source line, so a blank line in Markdown becomes an
+   empty `<p>` node between two paragraphs (a cursor target, kept for
+   round-trip fidelity). With a non-zero paragraph margin, those empty
+   paragraphs add their own top/bottom margin on top of the real
+   paragraphs' margins — visually multiplying the gap and breaking the
+   WYSIWYG promise in the other direction (editor looks more airy than
+   the renderer). Until the empty-paragraph encoding is reworked, the
+   editor opts out of the shared paragraph-spacing token. Consumers
+   who want non-zero spacing in the editor can set the margin
+   themselves with a higher-specificity rule. */
 .inkwell-editor p {
   position: relative;
 }
@@ -152,42 +192,61 @@
   padding: 0.1em 0.35em;
   border-radius: 4px;
   font-family: var(--inkwell-font-mono);
-  font-size: 0.85em;
+  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);
   padding-left: 0.85em;
-  margin: 0.5em 0;
+  margin: var(--inkwell-space-blockquote) 0;
   color: var(--inkwell-text-muted);
 }
 
 :where(.inkwell-editor-heading) {
-  font-weight: 600;
-  line-height: 1.3;
+  font-weight: var(--inkwell-heading-weight);
+  line-height: var(--inkwell-heading-line-height);
+  margin: var(--inkwell-space-heading) 0;
   color: var(--inkwell-text);
 }
 :where(.inkwell-editor-heading-1) {
-  font-size: 1.75em;
+  font-size: var(--inkwell-h1-size);
 }
 :where(.inkwell-editor-heading-2) {
-  font-size: 1.4em;
+  font-size: var(--inkwell-h2-size);
 }
 :where(.inkwell-editor-heading-3) {
-  font-size: 1.2em;
+  font-size: var(--inkwell-h3-size);
 }
 :where(.inkwell-editor-heading-4) {
-  font-size: 1em;
+  font-size: var(--inkwell-h4-size);
 }
 :where(.inkwell-editor-heading-5) {
-  font-size: 0.9em;
+  font-size: var(--inkwell-h5-size);
 }
 :where(.inkwell-editor-heading-6) {
-  font-size: 0.8em;
+  font-size: var(--inkwell-h6-size);
 }
 
 :where(.inkwell-editor-image) {
-  margin: 0.75em 0;
+  margin: var(--inkwell-space-image) 0;
   border-radius: var(--inkwell-radius);
   overflow: hidden;
   border: 1px solid transparent;
@@ -257,7 +316,7 @@
 :where(.inkwell-editor .inkwell-editor-code-fence),
 :where(.inkwell-renderer pre code) {
   font-family: var(--inkwell-font-mono);
-  font-size: 0.85em;
+  font-size: var(--inkwell-code-font-size);
   line-height: 1.55;
 }
 /* Wrapping behavior for code lines stays structural — Slate emits one
@@ -442,40 +501,61 @@
    `!important`. */
 :where(.inkwell-renderer) {
   color: var(--inkwell-text);
-  line-height: 1.65;
-  font-size: 0.95rem;
+  line-height: var(--inkwell-line-height);
+  font-size: var(--inkwell-font-size);
 }
 :where(.inkwell-renderer :first-child) {
   margin-top: 0;
 }
 :where(.inkwell-renderer h1) {
-  font-size: 1.75em;
-  font-weight: 600;
-  margin: 0.67em 0;
+  font-size: var(--inkwell-h1-size);
+  font-weight: var(--inkwell-heading-weight);
+  line-height: var(--inkwell-heading-line-height);
+  margin: var(--inkwell-space-heading) 0;
 }
 :where(.inkwell-renderer h2) {
-  font-size: 1.4em;
-  font-weight: 600;
-  margin: 0.75em 0;
+  font-size: var(--inkwell-h2-size);
+  font-weight: var(--inkwell-heading-weight);
+  line-height: var(--inkwell-heading-line-height);
+  margin: var(--inkwell-space-heading) 0;
 }
 :where(.inkwell-renderer h3) {
-  font-size: 1.2em;
-  font-weight: 600;
-  margin: 0.8em 0;
+  font-size: var(--inkwell-h3-size);
+  font-weight: var(--inkwell-heading-weight);
+  line-height: var(--inkwell-heading-line-height);
+  margin: var(--inkwell-space-heading) 0;
+}
+:where(.inkwell-renderer h4) {
+  font-size: var(--inkwell-h4-size);
+  font-weight: var(--inkwell-heading-weight);
+  line-height: var(--inkwell-heading-line-height);
+  margin: var(--inkwell-space-heading) 0;
+}
+:where(.inkwell-renderer h5) {
+  font-size: var(--inkwell-h5-size);
+  font-weight: var(--inkwell-heading-weight);
+  line-height: var(--inkwell-heading-line-height);
+  margin: var(--inkwell-space-heading) 0;
+}
+:where(.inkwell-renderer h6) {
+  font-size: var(--inkwell-h6-size);
+  font-weight: var(--inkwell-heading-weight);
+  line-height: var(--inkwell-heading-line-height);
+  margin: var(--inkwell-space-heading) 0;
 }
 :where(.inkwell-renderer p) {
-  margin: 0.5em 0;
+  margin: var(--inkwell-space-paragraph) 0;
 }
 :where(.inkwell-renderer blockquote) {
   border-left: 3px solid var(--inkwell-border-strong);
   padding-left: 0.85em;
-  margin: 1em 0;
+  margin: var(--inkwell-space-blockquote) 0;
   color: var(--inkwell-text-muted);
 }
 :where(.inkwell-renderer ul),
 :where(.inkwell-renderer ol) {
-  padding-left: 1.5em;
-  margin: 1em 0;
+  padding-left: var(--inkwell-list-indent);
+  margin: var(--inkwell-space-list) 0;
 }
 :where(.inkwell-renderer ul) {
   list-style: disc;
@@ -484,7 +564,7 @@
   list-style: decimal;
 }
 :where(.inkwell-renderer li) {
-  margin: 0.25em 0;
+  margin: var(--inkwell-space-list-item) 0;
 }
 :where(.inkwell-renderer code) {
   background: var(--inkwell-code-bg);
@@ -492,7 +572,7 @@
   padding: 0.1em 0.35em;
   border-radius: 4px;
   font-family: var(--inkwell-font-mono);
-  font-size: 0.85em;
+  font-size: var(--inkwell-code-font-size);
 }
 /* Code-block wrapper position is structural — the copy button absolutely
    positions inside it. */
@@ -533,7 +613,7 @@
   color: var(--inkwell-text);
 }
 :where(.inkwell-renderer pre) {
-  margin: 1em 0;
+  margin: var(--inkwell-space-code-block) 0;
   border-radius: var(--inkwell-radius);
   overflow: auto;
   border: 1px solid var(--inkwell-border);
@@ -544,7 +624,6 @@
   padding: 0.85em 1em;
   background: transparent;
   color: var(--inkwell-text);
-  font-size: 0.82em;
 }
 :where(.inkwell-renderer a) {
   color: var(--inkwell-accent);
@@ -554,7 +633,7 @@
 :where(.inkwell-renderer hr) {
   border: none;
   border-top: 1px solid var(--inkwell-border);
-  margin: 2em 0;
+  margin: var(--inkwell-space-hr) 0;
 }
 :where(.inkwell-renderer strong) {
   font-weight: 600;
@@ -569,5 +648,5 @@
   max-width: 100%;
   height: auto;
   border-radius: var(--inkwell-radius);
-  margin: 1em 0;
+  margin: var(--inkwell-space-image) 0;
 }