@railway/inkwell 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -2020,6 +2020,20 @@ var InkwellEditorClient = react.forwardRef(
       selectEditor,
       stateVersion
     ]);
+    const renderPlaceholder = react.useCallback(
+      ({ attributes, children }) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ...attributes,
+          style: {
+            ...attributes.style,
+            paddingBottom: "2rem"
+          },
+          children
+        }
+      ),
+      []
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2067,6 +2081,7 @@ var InkwellEditorClient = react.forwardRef(
                   style: styles?.editor,
                   renderElement: RenderElement,
                   renderLeaf: RenderLeaf,
+                  renderPlaceholder,
                   decorate,
                   placeholder: resolvedPlaceholder,
                   spellCheck: true,

package/dist/index.js

@@ -2005,6 +2005,20 @@ var InkwellEditorClient = forwardRef(
       selectEditor,
       stateVersion
     ]);
+    const renderPlaceholder = useCallback(
+      ({ attributes, children }) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...attributes,
+          style: {
+            ...attributes.style,
+            paddingBottom: "2rem"
+          },
+          children
+        }
+      ),
+      []
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2052,6 +2066,7 @@ var InkwellEditorClient = forwardRef(
                   style: styles?.editor,
                   renderElement: RenderElement,
                   renderLeaf: RenderLeaf,
+                  renderPlaceholder,
                   decorate,
                   placeholder: resolvedPlaceholder,
                   spellCheck: true,

package/package.json

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

@@ -22,11 +22,18 @@
 
 /* ── Tokens ──────────────────────────────────────────────────────── */
 
-.inkwell-editor,
-.inkwell-editor-wrapper,
-.inkwell-renderer,
-.inkwell-plugin-bubble-menu-container,
-.inkwell-plugin-picker-popup {
+/* Token definitions sit at 0,0,0 specificity so a consumer rule with even
+   a single class on a parent (e.g. `.dark .inkwell-renderer { --inkwell-text: ... }`
+   for class-driven theming that does not rely on `prefers-color-scheme`)
+   beats them automatically. The OS-level dark-mode block below uses the
+   same `:where()` wrapper for the same reason. */
+:where(
+    .inkwell-editor,
+    .inkwell-editor-wrapper,
+    .inkwell-renderer,
+    .inkwell-plugin-bubble-menu-container,
+    .inkwell-plugin-picker-popup
+  ) {
   /* Surfaces */
   --inkwell-bg: hsl(0, 0%, 100%);
   --inkwell-bg-elevated: hsl(0, 0%, 100%);
@@ -58,11 +65,13 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  .inkwell-editor,
-  .inkwell-editor-wrapper,
-  .inkwell-renderer,
-  .inkwell-plugin-bubble-menu-container,
-  .inkwell-plugin-picker-popup {
+  :where(
+      .inkwell-editor,
+      .inkwell-editor-wrapper,
+      .inkwell-renderer,
+      .inkwell-plugin-bubble-menu-container,
+      .inkwell-plugin-picker-popup
+    ) {
     --inkwell-bg: hsl(220, 13%, 10%);
     --inkwell-bg-elevated: hsl(220, 13%, 13%);
     --inkwell-bg-subtle: hsl(220, 13%, 16%);