@railway/inkwell 1.1.1 → 1.2.0

package/dist/index.cjs

@@ -1377,6 +1377,7 @@ var InkwellEditorClient = react.forwardRef(
     );
     const overLimit = characterLimit !== void 0 && characterCount > characterLimit;
     const hasCharacterLimit = characterLimit !== void 0;
+    const showCharacterCount = characterLimit !== void 0 && characterCount >= characterLimit * 0.8;
     const getEditorState = react.useCallback(() => {
       const content2 = serializeContent();
       return {
@@ -2026,7 +2027,7 @@ var InkwellEditorClient = react.forwardRef(
         className: `inkwell-editor-wrapper${hasCharacterLimit ? " inkwell-editor-has-character-limit" : ""}${overLimit ? " inkwell-editor-over-limit" : ""}${className ? ` ${className}` : ""}${classNames?.root ? ` ${classNames.root}` : ""}`,
         style: styles?.root,
         children: [
-          hasCharacterLimit && /* @__PURE__ */ jsxRuntime.jsx(
+          showCharacterCount && /* @__PURE__ */ jsxRuntime.jsx(
             CharacterCount,
             {
               count: characterCount,
@@ -2185,16 +2186,41 @@ var insertUploadedAttachment = (file, options) => {
     options.onError?.(err, file);
   });
 };
-function createAttachmentsPlugin(options) {
+function routeFiles(editor, files, options) {
   const { accept } = options;
+  const matching = accept ? files.filter((f) => mimeMatches(f.type, accept)) : files;
+  const handled = matching.filter(
+    (f) => isImageFile(f) || options.onAttachmentAdd !== void 0
+  );
+  for (const file of handled) {
+    if (isImageFile(file)) {
+      insertUploadedImage(editor, file, options);
+    } else {
+      insertUploadedAttachment(file, options);
+    }
+  }
+  const skipped = files.filter((f) => !handled.includes(f));
+  return { handled, skipped };
+}
+function createAttachmentsPlugin(options) {
   return {
     name: "attachments",
+    setup(editor) {
+      if (!options.ref) return;
+      const writableRef = options.ref;
+      writableRef.current = {
+        upload: (files) => {
+          if (files.length === 0) return;
+          routeFiles(editor, files, options);
+        }
+      };
+      return () => {
+        writableRef.current = null;
+      };
+    },
     onInsertData(data, { editor, insertData }) {
       const files = extractFiles(data);
-      const matching = accept ? files.filter((f) => mimeMatches(f.type, accept)) : files;
-      const handled = matching.filter(
-        (f) => isImageFile(f) || options.onAttachmentAdd !== void 0
-      );
+      const { handled, skipped } = routeFiles(editor, files, options);
       if (handled.length === 0) {
         const htmlImages = extractHtmlImages(data);
         if (htmlImages.length === 0) return false;
@@ -2203,16 +2229,8 @@ function createAttachmentsPlugin(options) {
         }
         return true;
       }
-      const unhandled = files.filter((f) => !handled.includes(f));
-      if (unhandled.length > 0) {
-        insertData(filesOnlyDataTransfer(unhandled));
-      }
-      for (const file of handled) {
-        if (isImageFile(file)) {
-          insertUploadedImage(editor, file, options);
-        } else {
-          insertUploadedAttachment(file, options);
-        }
+      if (skipped.length > 0) {
+        insertData(filesOnlyDataTransfer(skipped));
       }
       return true;
     }

package/dist/index.d.cts

@@ -280,6 +280,9 @@ interface Attachment {
      */
     [key: string]: unknown;
 }
+interface AttachmentsHandle {
+    upload: (files: File[]) => void;
+}
 interface AttachmentsPluginOptions {
     /**
      * Upload a single file and resolve to the public URL, or an object
@@ -292,6 +295,8 @@ interface AttachmentsPluginOptions {
      * (`image/*`). Files that don't match pass through untouched.
      */
     accept?: string;
+    /** Populated on editor mount, nulled on unmount. */
+    ref?: RefObject<AttachmentsHandle | null>;
     /**
      * Placeholder alt text shown on the inserted image element while an
      * image upload is in flight. Defaults to `"Uploading…"`.
@@ -484,4 +489,4 @@ declare function InkwellRenderer({ content, className, components, rehypePlugins
  */
 declare function parseMarkdown(content: string, options?: ParseMarkdownOptions): ReactNode;
 
-export { type Attachment, type AttachmentUploadResult, 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 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

@@ -280,6 +280,9 @@ interface Attachment {
      */
     [key: string]: unknown;
 }
+interface AttachmentsHandle {
+    upload: (files: File[]) => void;
+}
 interface AttachmentsPluginOptions {
     /**
      * Upload a single file and resolve to the public URL, or an object
@@ -292,6 +295,8 @@ interface AttachmentsPluginOptions {
      * (`image/*`). Files that don't match pass through untouched.
      */
     accept?: string;
+    /** Populated on editor mount, nulled on unmount. */
+    ref?: RefObject<AttachmentsHandle | null>;
     /**
      * Placeholder alt text shown on the inserted image element while an
      * image upload is in flight. Defaults to `"Uploading…"`.
@@ -484,4 +489,4 @@ declare function InkwellRenderer({ content, className, components, rehypePlugins
  */
 declare function parseMarkdown(content: string, options?: ParseMarkdownOptions): ReactNode;
 
-export { type Attachment, type AttachmentUploadResult, 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 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

@@ -1362,6 +1362,7 @@ var InkwellEditorClient = forwardRef(
     );
     const overLimit = characterLimit !== void 0 && characterCount > characterLimit;
     const hasCharacterLimit = characterLimit !== void 0;
+    const showCharacterCount = characterLimit !== void 0 && characterCount >= characterLimit * 0.8;
     const getEditorState = useCallback(() => {
       const content2 = serializeContent();
       return {
@@ -2011,7 +2012,7 @@ var InkwellEditorClient = forwardRef(
         className: `inkwell-editor-wrapper${hasCharacterLimit ? " inkwell-editor-has-character-limit" : ""}${overLimit ? " inkwell-editor-over-limit" : ""}${className ? ` ${className}` : ""}${classNames?.root ? ` ${classNames.root}` : ""}`,
         style: styles?.root,
         children: [
-          hasCharacterLimit && /* @__PURE__ */ jsx(
+          showCharacterCount && /* @__PURE__ */ jsx(
             CharacterCount,
             {
               count: characterCount,
@@ -2170,16 +2171,41 @@ var insertUploadedAttachment = (file, options) => {
     options.onError?.(err, file);
   });
 };
-function createAttachmentsPlugin(options) {
+function routeFiles(editor, files, options) {
   const { accept } = options;
+  const matching = accept ? files.filter((f) => mimeMatches(f.type, accept)) : files;
+  const handled = matching.filter(
+    (f) => isImageFile(f) || options.onAttachmentAdd !== void 0
+  );
+  for (const file of handled) {
+    if (isImageFile(file)) {
+      insertUploadedImage(editor, file, options);
+    } else {
+      insertUploadedAttachment(file, options);
+    }
+  }
+  const skipped = files.filter((f) => !handled.includes(f));
+  return { handled, skipped };
+}
+function createAttachmentsPlugin(options) {
   return {
     name: "attachments",
+    setup(editor) {
+      if (!options.ref) return;
+      const writableRef = options.ref;
+      writableRef.current = {
+        upload: (files) => {
+          if (files.length === 0) return;
+          routeFiles(editor, files, options);
+        }
+      };
+      return () => {
+        writableRef.current = null;
+      };
+    },
     onInsertData(data, { editor, insertData }) {
       const files = extractFiles(data);
-      const matching = accept ? files.filter((f) => mimeMatches(f.type, accept)) : files;
-      const handled = matching.filter(
-        (f) => isImageFile(f) || options.onAttachmentAdd !== void 0
-      );
+      const { handled, skipped } = routeFiles(editor, files, options);
       if (handled.length === 0) {
         const htmlImages = extractHtmlImages(data);
         if (htmlImages.length === 0) return false;
@@ -2188,16 +2214,8 @@ function createAttachmentsPlugin(options) {
         }
         return true;
       }
-      const unhandled = files.filter((f) => !handled.includes(f));
-      if (unhandled.length > 0) {
-        insertData(filesOnlyDataTransfer(unhandled));
-      }
-      for (const file of handled) {
-        if (isImageFile(file)) {
-          insertUploadedImage(editor, file, options);
-        } else {
-          insertUploadedAttachment(file, options);
-        }
+      if (skipped.length > 0) {
+        insertData(filesOnlyDataTransfer(skipped));
       }
       return true;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railway/inkwell",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Inkwell is a Markdown editor and renderer for React with an extensible plugin system.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -31,6 +31,7 @@
   --inkwell-accent: hsl(217, 91%, 50%);
   --inkwell-accent-soft: hsla(217, 91%, 50%, 0.12);
   --inkwell-danger: hsl(0, 72%, 51%);
+  --inkwell-danger-soft: hsla(0, 72%, 51%, 0.14);
 
   /* Inline code */
   --inkwell-code-bg: hsl(220, 14%, 94%);
@@ -61,6 +62,8 @@
 
     --inkwell-accent: hsl(217, 91%, 65%);
     --inkwell-accent-soft: hsla(217, 91%, 65%, 0.16);
+    --inkwell-danger: hsl(0, 70%, 65%);
+    --inkwell-danger-soft: hsla(0, 70%, 65%, 0.18);
 
     --inkwell-code-bg: hsl(220, 13%, 18%);
     --inkwell-code-fg: hsl(340, 70%, 75%);
@@ -175,36 +178,35 @@
   height: auto;
 }
 
-/* Built-in character count. Anchored to the bottom-right of the editor
-   wrapper. `characterLimit` is a soft hint — typing past the limit is
-   allowed; the count turns red and the wrapper picks up
-   `.inkwell-editor-over-limit`, which paints a red ring on the editor
-   surface so it's visually obvious the document is over budget. */
+/* Built-in character count. Overlays the top-right corner of the editor
+   wrapper so it never shifts content, and sits on a solid surface tint
+   so it visually layers above any text that wraps underneath. Only
+   rendered once typing reaches 80% of `characterLimit`, since the
+   limit is a soft hint — typing past it is allowed; the count then
+   turns red and the wrapper picks up `.inkwell-editor-over-limit`,
+   which paints a soft red halo on the editor surface so it's visually
+   obvious the document is over budget. */
 .inkwell-editor-character-count {
   position: absolute;
-  right: 0.7rem;
-  bottom: 0.7rem;
+  top: 0.5rem;
+  right: 0.5rem;
   z-index: 10;
-  padding: 0.15rem 0.45rem;
+  padding: 0.1rem 0.4rem;
   font-size: 0.72rem;
   font-variant-numeric: tabular-nums;
   color: var(--inkwell-text-dim);
+  background: var(--inkwell-bg);
+  border-radius: calc(var(--inkwell-radius) - 2px);
   pointer-events: none;
   user-select: none;
 }
 .inkwell-editor-character-count-over {
-  color: hsl(0, 75%, 55%);
+  color: var(--inkwell-danger);
   font-weight: 500;
 }
-:where(
-    .inkwell-editor-wrapper.inkwell-editor-has-character-limit .inkwell-editor
-  ) {
-  padding-right: 5.25rem;
-  padding-bottom: 2.25rem;
-}
 .inkwell-editor-wrapper.inkwell-editor-over-limit .inkwell-editor {
-  border-color: hsl(0, 75%, 55%);
-  box-shadow: 0 0 0 1px hsl(0, 75%, 55%);
+  border-color: var(--inkwell-danger-soft);
+  box-shadow: 0 0 0 3px var(--inkwell-danger-soft);
 }
 
 .inkwell-editor-backtick,