@aicayzer/inkkit 0.7.1 → 0.7.2

package/dist/chunks/{highlight-CVL-YhFo.js → highlight-DlSWR6ji.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-BeZFc1qW.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-BeZFc1qW.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-BeZFc1qW.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 {
@@ -506,6 +509,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 +713,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 +740,58 @@
   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 pre .inkkit-code-controls,
+.inkkit-root .ProseMirror pre .inkkit-copy {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms;
+}
+
+.inkkit-root .ProseMirror pre:hover .inkkit-code-controls,
+.inkkit-root .ProseMirror pre:hover .inkkit-copy,
+.inkkit-root .ProseMirror pre:focus-within .inkkit-code-controls,
+.inkkit-root .ProseMirror pre:focus-within .inkkit-copy,
+.inkkit-root
+  .ProseMirror
+  pre:has(.inkkit-code-language[aria-expanded='true'])
+  .inkkit-code-controls,
+.inkkit-root
+  .ProseMirror
+  pre:has(.inkkit-code-language[aria-expanded='true'])
+  .inkkit-copy,
+.inkkit-root
+  .ProseMirror-focused
+  pre[data-inkkit-code-active]
+  .inkkit-code-controls,
+.inkkit-root .ProseMirror-focused pre[data-inkkit-code-active] .inkkit-copy {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .inkkit-root .ProseMirror blockquote {
   position: relative;
   margin: 0 0 calc(var(--_inkkit-font-size) * 0.8);
@@ -1220,35 +1333,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 +1377,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 +1388,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.2",
   "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",