@aicayzer/inkkit 0.7.1 → 0.7.3

package/dist/chunks/{highlight-CVL-YhFo.js → highlight-BF7N9czJ.js}

@@ -1,4 +1,4 @@
-import { c as DecorationSet, f as __commonJSMin, l as Plugin, o as $prose, p as __toESM, s as Decoration, u as PluginKey } from "./core-Bn6QiQSD.js";
+import { c as DecorationSet, f as __commonJSMin, l as Plugin, o as $prose, p as __toESM, s as Decoration, u as PluginKey } from "./core-BI-sSLEL.js";
 //#region node_modules/.pnpm/highlight.js@11.11.2/node_modules/highlight.js/es/languages/arduino.js
 /** @type LanguageFn */
 function cPlusPlus(hljs) {

package/dist/core.js

@@ -1,2 +1,2 @@
-import { a as InkKitError, n as normalizeLinkAddress, r as InkKitEditor, t as canOpenLink } from "./chunks/core-Bn6QiQSD.js";
+import { a as InkKitError, n as normalizeLinkAddress, r as InkKitEditor, t as canOpenLink } from "./chunks/core-BI-sSLEL.js";
 export { InkKitEditor, InkKitError, canOpenLink, normalizeLinkAddress };

package/dist/editor.d.ts

@@ -100,6 +100,9 @@ export interface EditorOptions<F extends DocumentFormat = TextDocumentFormat> {
         codeHighlighting?: boolean;
         /** Defaults to true. */
         diagramPreview?: boolean;
+        /** Draws the caret at text height in formatted mode, where a fine pointer is the primary
+         *  input. Defaults to true. */
+        drawnSelection?: boolean;
     };
 }
 /** What the editor can do now. Availability is the state at the time of the call, not a promise. */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as InkKitError, i as registerDiagram, n as normalizeLinkAddress, r as InkKitEditor, t as canOpenLink } from "./chunks/core-Bn6QiQSD.js";
+import { a as InkKitError, i as registerDiagram, n as normalizeLinkAddress, r as InkKitEditor, t as canOpenLink } from "./chunks/core-BI-sSLEL.js";
 //#region node_modules/.pnpm/dompurify@3.4.17/node_modules/dompurify/dist/purify.es.mjs
 /*! @license DOMPurify 3.4.17 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.17/LICENSE */
 function _OverloadYield(e, d) {

package/dist/style.css

@@ -86,7 +86,7 @@
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid var(--_inkkit-rule);
-  border-radius: var(--inkkit-table-radius, 4px);
+  border-radius: var(--inkkit-table-radius, 10px);
   width: 100%;
 }
 .inkkit-root .ProseMirror td,
@@ -109,24 +109,27 @@
   border-bottom-width: 0;
 }
 .inkkit-root .ProseMirror tr:first-child > :first-child {
-  border-top-left-radius: max(0px, calc(var(--inkkit-table-radius, 4px) - 1px));
+  border-top-left-radius: max(
+    0px,
+    calc(var(--inkkit-table-radius, 10px) - 1px)
+  );
 }
 .inkkit-root .ProseMirror tr:first-child > :last-child {
   border-top-right-radius: max(
     0px,
-    calc(var(--inkkit-table-radius, 4px) - 1px)
+    calc(var(--inkkit-table-radius, 10px) - 1px)
   );
 }
 .inkkit-root .ProseMirror tr:last-child > :first-child {
   border-bottom-left-radius: max(
     0px,
-    calc(var(--inkkit-table-radius, 4px) - 1px)
+    calc(var(--inkkit-table-radius, 10px) - 1px)
   );
 }
 .inkkit-root .ProseMirror tr:last-child > :last-child {
   border-bottom-right-radius: max(
     0px,
-    calc(var(--inkkit-table-radius, 4px) - 1px)
+    calc(var(--inkkit-table-radius, 10px) - 1px)
   );
 }
 .inkkit-root .ProseMirror th {
@@ -376,6 +379,14 @@
   padding: 6px;
   white-space: normal;
 }
+/* A picture that loads is drawn bare: no border, padding or caption. Any grey inside it is the
+   picture's own. A picture that is loading or has failed keeps its card. */
+.inkkit-root
+  .ProseMirror
+  .inkkit-file[data-inkkit-file-state='resolved'][data-inkkit-file-kind='image'] {
+  border: 0;
+  padding: 0;
+}
 
 /* A file presentation with `layout: 'fill'` takes the column's width instead of its label's. */
 .inkkit-root
@@ -405,17 +416,6 @@
 .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
-  .inkkit-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;
@@ -467,29 +467,42 @@
   cursor: pointer;
 }
 .inkkit-root .ProseMirror .inkkit-file-open {
+  /* The name and the arrow are one link: a plain control that the footer's muted text colours. */
   display: inline-flex;
+  flex: 0 1 auto;
   align-items: center;
-  justify-content: center;
-  min-width: 1.5em;
-  min-height: 1.5em;
+  gap: 0.25em;
+  min-width: 0;
+  max-width: 100%;
   padding: 0;
   color: var(--_inkkit-muted);
   background: transparent;
-  border-color: transparent;
+  border: 0;
+  border-radius: 3px;
+  text-align: start;
 }
 .inkkit-root .ProseMirror .inkkit-file-open:hover {
   color: var(--_inkkit-text);
-  background: var(--_inkkit-code-bg);
+}
+.inkkit-root .ProseMirror .inkkit-file-open:hover .inkkit-file-label {
+  text-decoration: underline;
 }
 .inkkit-root .ProseMirror .inkkit-file-open svg {
+  flex: none;
+  box-sizing: content-box;
   width: 0.85em;
   height: 0.85em;
+  padding: 0.2em;
+  border-radius: 3px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
+.inkkit-root .ProseMirror .inkkit-file-open:hover svg {
+  background: var(--_inkkit-code-bg);
+}
 
 .inkkit-root .ProseMirror {
   /* The viewport, not the wrapper Milkdown adds, so a click below the text still places the caret. */
@@ -506,6 +519,87 @@
   cursor: text;
 }
 
+/* The drawn caret and selection sit in the surface's wrapper. It isolates its own stacking
+   context, so the selection layer can sit behind the text and still above the page. */
+.inkkit-root .inkkit-overlay-host {
+  position: relative;
+  isolation: isolate;
+}
+.inkkit-root .inkkit-selection-layer {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+.inkkit-root .inkkit-selection-layer > div {
+  position: absolute;
+  background: var(
+    --inkkit-inactive-selection-background,
+    light-dark(#d4d4d4, #555)
+  );
+}
+.inkkit-root.inkkit-selection-active .inkkit-selection-layer > div {
+  background: var(
+    --inkkit-selection-background,
+    color-mix(in srgb, var(--_inkkit-accent) 30%, transparent)
+  );
+}
+@media (forced-colors: active) {
+  .inkkit-root .inkkit-selection-layer > div {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+}
+/* The drawn caret. The native caret stays, transparent, so accessibility and input methods
+   still read its position. */
+.inkkit-root .ProseMirror.inkkit-drawn-caret {
+  caret-color: transparent;
+}
+.inkkit-root .inkkit-caret {
+  position: absolute;
+  z-index: 1;
+  width: 2px;
+  margin-left: -1px;
+  border-radius: 1px;
+  background: var(--_inkkit-accent);
+  pointer-events: none;
+}
+.inkkit-root:not(.inkkit-selection-active) .inkkit-caret {
+  visibility: hidden;
+}
+.inkkit-root .inkkit-caret[data-blink='a'] {
+  animation: inkkit-caret-blink-a 1.1s infinite;
+}
+.inkkit-root .inkkit-caret[data-blink='b'] {
+  animation: inkkit-caret-blink-b 1.1s infinite;
+}
+@keyframes inkkit-caret-blink-a {
+  0%,
+  49.9% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes inkkit-caret-blink-b {
+  0%,
+  49.9% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+@media (forced-colors: active) {
+  .inkkit-root .inkkit-caret {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+}
+
 .inkkit-root .ProseMirror .inkkit-empty {
   position: relative;
 }
@@ -629,27 +723,26 @@
   font-size: calc(var(--_inkkit-font-size) * 0.867);
   line-height: 1.5;
   background: var(--_inkkit-code-bg);
-  border-radius: var(--inkkit-code-radius, 8px);
+  border-radius: var(--inkkit-code-radius, 10px);
   padding: calc(var(--_inkkit-font-size) * 0.8)
     calc(var(--_inkkit-font-size) * 0.933);
   margin: 0 0 calc(var(--_inkkit-font-size) * 0.8);
-  overflow-x: auto;
 }
 
 .inkkit-root .ProseMirror pre[data-language] {
-  padding-top: max(calc(var(--_inkkit-font-size) * 2), 30px);
+  padding-top: max(calc(var(--_inkkit-font-size) * 1.8), 28px);
 }
 
 .inkkit-root .ProseMirror pre .inkkit-copy {
   position: absolute;
-  top: 6px;
+  top: 4px;
   right: 6px;
   display: grid;
   place-content: center;
   place-items: center;
   box-sizing: border-box;
-  width: 26px;
-  height: 24px;
+  width: 24px;
+  height: 22px;
   margin: 0;
   padding: 0;
   border: 0;
@@ -657,28 +750,30 @@
   background: transparent;
   color: var(--_inkkit-muted);
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 120ms;
+  z-index: 2;
   user-select: none;
 }
 
-.inkkit-root .ProseMirror pre:hover .inkkit-copy,
-.inkkit-root .ProseMirror pre:focus-within .inkkit-copy,
-.inkkit-root .ProseMirror pre .inkkit-copy[data-copied] {
-  opacity: 1;
-}
-
 .inkkit-root .ProseMirror pre .inkkit-copy:hover {
   background: color-mix(in srgb, CanvasText 10%, transparent);
   color: var(--_inkkit-text);
 }
 
-.inkkit-root .ProseMirror pre code {
+.inkkit-root .ProseMirror pre > code {
+  display: block;
+  overflow-x: auto;
+  white-space: pre;
+  overflow-wrap: normal;
   background: none;
   padding: 0;
   font-size: inherit;
 }
 
+.inkkit-root .ProseMirror pre.inkkit-code-wrapped > code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 .inkkit-root .ProseMirror blockquote {
   position: relative;
   margin: 0 0 calc(var(--_inkkit-font-size) * 0.8);
@@ -1220,35 +1315,43 @@
 
 .inkkit-root .inkkit-code-controls {
   position: absolute;
-  top: 6px;
-  right: 38px;
+  top: 4px;
+  z-index: 2;
+  right: 34px;
   font:
-    11px/1.4 -apple-system,
+    calc(var(--_inkkit-font-size) * 0.8)/1.4 -apple-system,
     system-ui,
     sans-serif;
   white-space: normal;
   user-select: none;
 }
+.inkkit-root .inkkit-code-controls:has([aria-expanded='true']) {
+  z-index: 50;
+}
+.inkkit-root pre:not(:has(.inkkit-copy)) .inkkit-code-controls {
+  right: 6px;
+}
 .inkkit-root .inkkit-code-language {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  height: 24px;
+  height: 22px;
   padding: 0 6px;
   border: 0;
   border-radius: 5px;
   background: transparent;
-  color: var(--_inkkit-muted);
+  color: color-mix(in srgb, var(--_inkkit-text) 50%, var(--_inkkit-muted));
   font: inherit;
   cursor: pointer;
 }
-.inkkit-root .inkkit-code-language svg {
+.inkkit-root .inkkit-code-language svg,
+.inkkit-root .inkkit-code-wrap svg {
   flex-shrink: 0;
   width: 12px;
   height: 12px;
   fill: none;
   stroke: currentColor;
-  stroke-width: 1.25;
+  stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
@@ -1256,7 +1359,8 @@
   background: color-mix(in srgb, CanvasText 7%, transparent);
 }
 .inkkit-root .inkkit-code-language:focus-visible,
-.inkkit-root .inkkit-copy:focus-visible {
+.inkkit-root .inkkit-copy:focus-visible,
+.inkkit-root .inkkit-code-wrap:focus-visible {
   outline: var(--inkkit-focus-width, 2px) solid
     var(--inkkit-focus-color, var(--_inkkit-accent));
   outline-offset: var(--inkkit-focus-offset, 1px);
@@ -1266,38 +1370,74 @@
   z-index: 50;
   display: flex;
   flex-direction: column;
-  width: 220px;
-  max-height: min(320px, 50vh);
-  padding: 6px;
+  width: 200px;
+  max-height: min(264px, 50vh);
+  padding: 0;
   box-sizing: border-box;
   border: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
-  border-radius: 8px;
-  background: Canvas;
-  color: CanvasText;
+  border-radius: 10px;
+  background: color-mix(in srgb, CanvasText 4%, Canvas);
+  color: color-mix(in srgb, CanvasText 80%, Canvas);
   box-shadow: 0 6px 20px #0002;
 }
 .inkkit-root .inkkit-code-language-menu input {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
-  padding: 7px 8px;
-  border: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
+  padding: 4px 2px;
+  height: 28px;
+  border: 0;
   border-radius: 5px;
-  background: color-mix(in srgb, CanvasText 3%, transparent);
+  background: transparent;
   color: inherit;
   font: inherit;
 }
+.inkkit-root .inkkit-code-language-search {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px 4px 10px;
+  border-bottom: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
+}
+.inkkit-root .inkkit-code-wrap {
+  display: grid;
+  place-items: center;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--_inkkit-muted);
+  cursor: pointer;
+}
+.inkkit-root .inkkit-code-wrap svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1.75;
+}
+.inkkit-root .inkkit-code-wrap:hover,
+.inkkit-root .inkkit-code-wrap[aria-pressed='true'],
+.inkkit-root .inkkit-code-language[aria-expanded='true'] {
+  background: color-mix(in srgb, CanvasText 10%, transparent);
+}
+.inkkit-root .inkkit-code-language[aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
 .inkkit-root .inkkit-code-language-list {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding: 4px 0 0;
+  padding: 4px;
+  min-height: 0;
 }
 .inkkit-root .inkkit-code-language-list button {
   flex-shrink: 0;
-  padding: 5px 8px;
+  padding: 6px 8px;
   border: 0;
-  border-radius: 4px;
+  border-radius: 6px;
   background: transparent;
   color: inherit;
   font: inherit;

package/dist/themes/calm.css

@@ -11,8 +11,8 @@
   --inkkit-rule-color: light-dark(#dce2e9, #434d5e);
   --inkkit-checkbox-border-color: var(--inkkit-muted-color);
   --inkkit-code-background: light-dark(#f3f5f8, #272e3a);
-  --inkkit-table-radius: 8px;
-  --inkkit-code-radius: 8px;
+  --inkkit-table-radius: 10px;
+  --inkkit-code-radius: 10px;
   --inkkit-quote-rule-width: 3px;
   --inkkit-quote-rule-radius: 2px;
   --inkkit-quote-rule-color: light-dark(#a6a6a6, #777777);

package/dist/themes/essential.css

@@ -11,8 +11,8 @@
   --inkkit-rule-color: light-dark(#dddddd, #444444);
   --inkkit-checkbox-border-color: var(--inkkit-muted-color);
   --inkkit-code-background: light-dark(#f7f7f7, #2a2a2a);
-  --inkkit-table-radius: 4px;
-  --inkkit-code-radius: 4px;
+  --inkkit-table-radius: 10px;
+  --inkkit-code-radius: 10px;
   --inkkit-quote-rule-width: 3px;
   --inkkit-quote-rule-radius: 2px;
   --inkkit-quote-rule-color: light-dark(#a6a6a6, #777777);

package/dist/themes/standard.css

@@ -14,8 +14,8 @@
     #f3f5f8,
     color-mix(in srgb, CanvasText 8%, transparent)
   );
-  --inkkit-table-radius: 8px;
-  --inkkit-code-radius: 8px;
+  --inkkit-table-radius: 10px;
+  --inkkit-code-radius: 10px;
   --inkkit-quote-rule-width: 3px;
   --inkkit-quote-rule-radius: 2px;
   --inkkit-quote-rule-color: light-dark(#a6a6a6, #777777);

package/dist/types.d.ts

@@ -409,6 +409,7 @@ export interface EditorLabels {
     copyCode: string;
     codeLanguage: string;
     codeLanguageSearch: string;
+    codeWrap: string;
     codeAuto: string;
     codePlainText: string;
     expandCallout: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -57,7 +57,9 @@
     "test:browser": "playwright test --project=chromium",
     "test:playground": "playwright test --config playwright.playground.config.ts --project=chromium",
     "measure:browser": "playwright test --config playwright.measure.config.ts",
-    "test:built-playground": "playwright test --config playwright.built.config.ts"
+    "test:built-playground": "playwright test --config playwright.built.config.ts",
+    "build:docs-demo": "pnpm build && node scripts/build-docs-demo.mjs",
+    "test:docs-demo": "playwright test --config playwright.docs-demo.config.ts"
   },
   "devDependencies": {
     "@milkdown/kit": "7.22.3",