@aicayzer/inkkit 0.0.13 → 0.0.15

package/dist/style.css

@@ -201,22 +201,81 @@
   max-width: 100%;
   vertical-align: bottom;
 }
+/* A standalone image is its own block; the row is full width so a click beside the card lands on it. */
+.inkkit-root .ProseMirror .inkkit-image-block {
+  display: block;
+  margin: 0 0
+    var(--inkkit-paragraph-spacing, calc(var(--inkkit-font-size, 15px) * 0.667));
+  line-height: 0;
+}
+.inkkit-root .ProseMirror .inkkit-image-block > .image {
+  line-height: normal;
+}
+/* A card that shares its paragraph with text sits on its own line within it. */
+.inkkit-root .ProseMirror :not(.inkkit-image-block) > .image.inkkit-file {
+  display: block;
+  width: fit-content;
+}
+.inkkit-root .ProseMirror .inkkit-image-block.ProseMirror-selectednode {
+  outline: none;
+}
+.inkkit-root
+  .ProseMirror
+  .inkkit-image-block.ProseMirror-selectednode
+  > .image {
+  outline: 2px solid color-mix(in srgb, var(--_inkkit-accent) 60%, transparent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+.inkkit-root .ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+.inkkit-root .ProseMirror-gapcursor::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 2px solid var(--_inkkit-accent);
+  animation: inkkit-gapcursor-blink 1.1s steps(2, start) infinite;
+}
+@keyframes inkkit-gapcursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+.inkkit-root .ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
 .inkkit-root .ProseMirror .image img {
   display: block;
   max-width: 100%;
   height: auto;
   border-radius: 6px;
 }
+.inkkit-root .ProseMirror .inkkit-image-preview {
+  position: relative;
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  line-height: 0;
+}
 .inkkit-root .ProseMirror .image-absent {
   color: var(--_inkkit-muted);
   font-style: italic;
 }
 .inkkit-root .ProseMirror .image-handle {
   position: absolute;
-  right: -3px;
-  top: 0;
-  width: 10px;
-  height: 100%;
+  right: 0;
+  top: 50%;
+  z-index: 1;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 32px;
+  max-height: 100%;
+  touch-action: none;
   cursor: col-resize;
   opacity: 0;
 }
@@ -227,22 +286,58 @@
 .inkkit-root .ProseMirror .image-handle::after {
   content: '';
   position: absolute;
-  right: 3px;
-  top: 25%;
-  height: 50%;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 20px;
+  max-height: 100%;
   width: 4px;
   border-radius: 2px;
   background: var(--_inkkit-accent);
 }
+.inkkit-root .ProseMirror[contenteditable='false'] .image-handle {
+  display: none;
+}
 
 .inkkit-root .ProseMirror .inkkit-file {
+  box-sizing: border-box;
   vertical-align: middle;
   border: 1px solid var(--_inkkit-rule);
-  border-radius: 4px;
-  padding: 4px;
+  border-radius: 6px;
+  padding: 6px;
   white-space: normal;
 }
 
+.inkkit-root .ProseMirror .inkkit-file-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25em 0.5em;
+  font-size: 0.9em;
+  line-height: 1.4;
+  color: var(--_inkkit-muted);
+}
+.inkkit-root .ProseMirror .inkkit-file-footer:not(:first-child) {
+  margin-block-start: 0.25em;
+}
+/* Below a picture, the name takes the picture's width rather than widening the card, so the grip
+   stays at the picture's edge; a short picture still leaves room for a few characters. */
+.inkkit-root .ProseMirror .inkkit-image-preview ~ .inkkit-file-footer {
+  width: 0;
+  min-width: 100%;
+}
+.inkkit-root .ProseMirror .image.inkkit-file:has(> .inkkit-image-preview) {
+  min-width: min(100%, 8em);
+}
+/* The name truncates; the open arrow stays visible right after it. */
+.inkkit-root .ProseMirror .inkkit-file-name {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.25em;
+  min-width: 0;
+}
+
 .inkkit-root .ProseMirror .inkkit-file audio,
 .inkkit-root .ProseMirror .inkkit-file video,
 .inkkit-root .ProseMirror .inkkit-file iframe {
@@ -261,18 +356,57 @@
 }
 
 .inkkit-root .ProseMirror .inkkit-file-label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.inkkit-root .ProseMirror .inkkit-file-status {
+  flex-basis: 100%;
   overflow-wrap: anywhere;
 }
 
 .inkkit-root .ProseMirror .inkkit-file-control {
-  margin-inline-start: 0.5em;
+  flex: none;
+  padding: 0.25em 0.5em;
   font: inherit;
+  line-height: 1.4;
+  white-space: nowrap;
   color: var(--_inkkit-text);
   background: var(--_inkkit-code-bg);
   border: 1px solid var(--_inkkit-rule);
   border-radius: 3px;
   cursor: pointer;
 }
+.inkkit-root .ProseMirror .inkkit-file-open {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  padding: 0;
+  color: var(--_inkkit-muted);
+  background: transparent;
+  border-color: transparent;
+}
+.inkkit-root .ProseMirror .inkkit-file-open:hover {
+  color: var(--_inkkit-text);
+  background: var(--_inkkit-code-bg);
+}
+.inkkit-root .ProseMirror .inkkit-file-open:focus-visible {
+  outline: 2px solid var(--_inkkit-accent);
+  outline-offset: 1px;
+}
+.inkkit-root .ProseMirror .inkkit-file-open svg {
+  width: 0.85em;
+  height: 0.85em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
 
 .inkkit-root .ProseMirror {
   /* The viewport, not the wrapper Milkdown adds, so a click below the text still places the caret. */

package/dist/text-ranges.d.ts

@@ -18,7 +18,10 @@ export declare function projectionOffset(projection: TextProjection, position: n
 export declare function validateOffsets(text: string, from: number, to: number): void;
 export declare function textRect(rect: Pick<TextRect, 'left' | 'top' | 'right' | 'bottom'>): TextRect;
 export declare function formattedRects(view: EditorView, projection: TextProjection, from: number, to: number): TextRect[];
-export declare function literalRects(plain: HTMLTextAreaElement, from: number, to: number): TextRect[];
+export declare function literalRangesRects(plain: HTMLTextAreaElement, ranges: readonly {
+    from: number;
+    to: number;
+}[]): TextRect[][];
 export declare function intersectsViewport(rect: Pick<TextRect, 'top' | 'right' | 'bottom' | 'left'>, viewport: TextRect): boolean;
 export declare function literalVisibleRanges(plain: HTMLTextAreaElement, viewport: TextRect): {
     from: number;

package/dist/text-ranges.js

@@ -1,5 +1,6 @@
 import { InkKitError } from './types.js';
 import { fileReference } from './linked-syntax.js';
+import { imageBlockName } from './image-blocks.js';
 export function readableProjection(doc) {
     const result = { text: '', spans: [] };
     let blocks = 0;
@@ -24,6 +25,11 @@ export function readableProjection(doc) {
                 String(node.attrs.kind).replace(/^./, (value) => value.toUpperCase()), position, position + 1, 'embed');
             return true;
         }
+        if (name === imageBlockName) {
+            block(position);
+            append(fileReference(node).label || 'Image', position, position + node.nodeSize, 'embed');
+            return false;
+        }
         if (node.isTextblock) {
             block(position + 1);
             if (!node.content.size)
@@ -110,15 +116,30 @@ export function formattedRects(view, projection, from, to) {
         return [textRect(view.coordsAtPos(position))];
     }
     const rects = [];
-    for (const span of projection.spans) {
-        if (span.to <= from || span.from >= to || span.kind === 'separator')
+    let low = 0;
+    let high = projection.spans.length;
+    while (low < high) {
+        const middle = (low + high) >>> 1;
+        if (projection.spans[middle].to <= from)
+            low = middle + 1;
+        else
+            high = middle;
+    }
+    for (let index = low; index < projection.spans.length; index++) {
+        const span = projection.spans[index];
+        if (span.from >= to)
+            break;
+        if (span.kind === 'separator')
             continue;
         if (span.kind === 'embed' || span.kind === 'break') {
             const node = view.nodeDOM(span.start);
             if (node instanceof Element) {
+                // A standalone image's node is its full-width row; the card is what shows.
                 const label = node.matches('.inkkit-callout')
                     ? (node.querySelector(':scope > .inkkit-callout-header > .inkkit-callout-title') ?? node)
-                    : node;
+                    : node.matches('.inkkit-image-block')
+                        ? (node.firstElementChild ?? node)
+                        : node;
                 rects.push(...Array.from(label.getClientRects(), textRect));
             }
             continue;
@@ -180,18 +201,20 @@ function withLiteralLayout(plain, measure) {
         mirror.remove();
     }
 }
-export function literalRects(plain, from, to) {
+export function literalRangesRects(plain, ranges) {
     return (withLiteralLayout(plain, (text) => {
         const range = plain.ownerDocument.createRange();
-        range.setStart(text, from);
-        range.setEnd(text, from === to ? Math.min(to + 1, text.length) : to);
-        return Array.from(range.getClientRects(), (rect) => textRect({
-            left: rect.left,
-            right: from === to ? rect.left : rect.right,
-            top: rect.top,
-            bottom: rect.bottom,
-        }));
-    }) ?? []);
+        return ranges.map(({ from, to }) => {
+            range.setStart(text, from);
+            range.setEnd(text, from === to ? Math.min(to + 1, text.length) : to);
+            return Array.from(range.getClientRects(), (rect) => textRect({
+                left: rect.left,
+                right: from === to ? rect.left : rect.right,
+                top: rect.top,
+                bottom: rect.bottom,
+            }));
+        });
+    }) ?? ranges.map(() => []));
 }
 export function intersectsViewport(rect, viewport) {
     return (viewport.width > 0 &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",