@prosekit/basic 0.5.4 → 0.6.1

package/dist/prosekit-basic.d.ts

@@ -4,7 +4,6 @@ import { BoldExtension } from "@prosekit/extensions/bold";
 import { CodeExtension } from "@prosekit/extensions/code";
 import { CodeBlockExtension } from "@prosekit/extensions/code-block";
 import { DocExtension } from "@prosekit/extensions/doc";
-import { DropCursorExtension } from "@prosekit/extensions/drop-cursor";
 import { GapCursorExtension } from "@prosekit/extensions/gap-cursor";
 import { HardBreakExtension } from "@prosekit/extensions/hard-break";
 import { HeadingExtension } from "@prosekit/extensions/heading";
@@ -26,7 +25,7 @@ import { VirtualSelectionExtension } from "@prosekit/extensions/virtual-selectio
 /**
 * @internal
 */
-type BasicExtension = Union<[DocExtension, TextExtension, ParagraphExtension, HeadingExtension, ListExtension, BlockquoteExtension, ImageExtension, HorizontalRuleExtension, HardBreakExtension, TableExtension, CodeBlockExtension, ItalicExtension, BoldExtension, UnderlineExtension, StrikeExtension, CodeExtension, LinkExtension, BaseKeymapExtension, BaseCommandsExtension, HistoryExtension, DropCursorExtension, GapCursorExtension, VirtualSelectionExtension, ModClickPreventionExtension]>;
+type BasicExtension = Union<[DocExtension, TextExtension, ParagraphExtension, HeadingExtension, ListExtension, BlockquoteExtension, ImageExtension, HorizontalRuleExtension, HardBreakExtension, TableExtension, CodeBlockExtension, ItalicExtension, BoldExtension, UnderlineExtension, StrikeExtension, CodeExtension, LinkExtension, BaseKeymapExtension, BaseCommandsExtension, HistoryExtension, GapCursorExtension, VirtualSelectionExtension, ModClickPreventionExtension]>;
 /**
 * Define a basic extension that includes some common functionality. You can
 * copy this function and customize it to your needs.
@@ -53,7 +52,6 @@ type BasicExtension = Union<[DocExtension, TextExtension, ParagraphExtension, He
 * - {@link defineBaseKeymap}
 * - {@link defineBaseCommands}
 * - {@link defineHistory}
-* - {@link defineDropCursor}
 * - {@link defineGapCursor}
 * - {@link defineVirtualSelection}
 * - {@link defineModClickPrevention}

package/dist/prosekit-basic.js

@@ -4,7 +4,6 @@ import { defineBold } from "@prosekit/extensions/bold";
 import { defineCode } from "@prosekit/extensions/code";
 import { defineCodeBlock } from "@prosekit/extensions/code-block";
 import { defineDoc } from "@prosekit/extensions/doc";
-import { defineDropCursor } from "@prosekit/extensions/drop-cursor";
 import { defineGapCursor } from "@prosekit/extensions/gap-cursor";
 import { defineHardBreak } from "@prosekit/extensions/hard-break";
 import { defineHeading } from "@prosekit/extensions/heading";
@@ -48,7 +47,6 @@ import { defineVirtualSelection } from "@prosekit/extensions/virtual-selection";
 * - {@link defineBaseKeymap}
 * - {@link defineBaseCommands}
 * - {@link defineHistory}
-* - {@link defineDropCursor}
 * - {@link defineGapCursor}
 * - {@link defineVirtualSelection}
 * - {@link defineModClickPrevention}
@@ -56,7 +54,7 @@ import { defineVirtualSelection } from "@prosekit/extensions/virtual-selection";
 * @public
 */
 function defineBasicExtension() {
-	return union(defineDoc(), defineText(), defineParagraph(), defineHeading(), defineList(), defineBlockquote(), defineImage(), defineHorizontalRule(), defineHardBreak(), defineTable(), defineCodeBlock(), defineItalic(), defineBold(), defineUnderline(), defineStrike(), defineCode(), defineLink(), defineBaseKeymap(), defineBaseCommands(), defineHistory(), defineDropCursor(), defineGapCursor(), defineVirtualSelection(), defineModClickPrevention());
+	return union(defineDoc(), defineText(), defineParagraph(), defineHeading(), defineList(), defineBlockquote(), defineImage(), defineHorizontalRule(), defineHardBreak(), defineTable(), defineCodeBlock(), defineItalic(), defineBold(), defineUnderline(), defineStrike(), defineCode(), defineLink(), defineBaseKeymap(), defineBaseCommands(), defineHistory(), defineGapCursor(), defineVirtualSelection(), defineModClickPrevention());
 }
 
 //#endregion

package/dist/style.css

@@ -54,94 +54,134 @@ img.ProseMirror-separator {
 }
 
 
-/* src/style.css */
-.prosemirror-flat-list {
-  padding: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 32px;
-  margin-bottom: 0;
-  position: relative;
-  display: list-item;
-  list-style: none;
-}
-.prosemirror-flat-list.ProseMirror-selectednode {
-  outline: none;
-}
-.prosemirror-flat-list.ProseMirror-selectednode:after {
-  content: "";
-  position: absolute;
-  left: -32px;
-  right: -2px;
-  top: -2px;
-  bottom: -2px;
-  border: 2px solid #8cf;
-  pointer-events: none;
-}
-.prosemirror-flat-list[data-list-kind=bullet] {
-  list-style: disc;
-}
-.prosemirror-flat-list[data-list-kind=ordered] > * {
-  contain: style;
+:root {
+  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
 }
-.prosemirror-flat-list[data-list-kind=ordered]::before {
-  position: absolute;
-  right: 100%;
-  font-variant-numeric: tabular-nums;
-  content: counter(prosemirror-flat-list-counter, decimal) ". ";
-}
-.prosemirror-flat-list[data-list-kind=ordered] {
-  counter-increment: prosemirror-flat-list-counter;
-}
-.prosemirror-flat-list[data-list-kind=ordered]:first-child,
-:not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered] {
-  counter-reset: prosemirror-flat-list-counter;
-}
-@supports (counter-set: prosemirror-flat-list-counter 1) {
-  [data-list-order]:is(.prosemirror-flat-list[data-list-kind=ordered]:first-child, :not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered]) {
-    counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+
+.prosemirror-flat-list {
+  & {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
-}
-@supports not (counter-set: prosemirror-flat-list-counter 1) {
-  [data-list-order]:is(.prosemirror-flat-list[data-list-kind=ordered]:first-child, :not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered]) {
-    counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+
+  & > .list-marker {
+    position: absolute;
+    left: 0;
+    width: 1.5em;
+    width: 1lh;
+    height: 1.5em;
+    height: 1lh;
+    text-align: center;
   }
-}
-.prosemirror-flat-list[data-list-kind=task] > .list-marker {
-  position: absolute;
-  right: 100%;
-  text-align: center;
-  width: 1.5em;
-  width: 1lh;
-}
-:is(.prosemirror-flat-list[data-list-kind=task] > .list-marker),
-:is(.prosemirror-flat-list[data-list-kind=task] > .list-marker) * {
-  cursor: pointer;
-}
-.prosemirror-flat-list[data-list-kind=toggle] > .list-marker {
-  position: absolute;
-  right: 100%;
-  text-align: center;
-  width: 1.5em;
-  width: 1lh;
-}
-.prosemirror-flat-list[data-list-kind=toggle] > .list-marker::before {
-  content: "\23f7";
-}
-.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable][data-list-collapsed] > .list-marker::before {
-  content: "\23f5";
-}
-.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable] > .list-marker {
-  cursor: pointer;
-}
-.prosemirror-flat-list[data-list-kind=toggle]:not([data-list-collapsable]) > .list-marker {
-  opacity: 40%;
-  pointer-events: none;
-}
-.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable][data-list-collapsed] > .list-content > *:nth-child(n+2) {
-  display: none;
-}
 
+  & > .list-content {
+    margin-left: 1.5em;
+    margin-left: 1lh;
+  }
+
+  &[data-list-kind="bullet"] > .list-marker,
+  &[data-list-kind="toggle"] > .list-marker {
+    background-color: currentColor;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  &[data-list-kind="bullet"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-bullet-icon);
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-toggle-open-icon);
+    }
+
+    &[data-list-collapsable][data-list-collapsed] > .list-marker {
+      mask-image: var(--prosekit-list-toggle-closed-icon);
+    }
+  }
+
+  &[data-list-kind="ordered"] {
+    /*
+      Ensure that the counters in children don't escape, so that the sub lists
+      won't affect the counter of the parent list.
+  
+      See also https://github.com/ocavue/prosemirror-flat-list/issues/23
+      */
+    & > * {
+      contain: style;
+    }
+
+    &::before {
+      position: absolute;
+      right: calc(100% - 1.5em);
+      right: calc(100% - 1lh);
+      content: counter(prosemirror-flat-list-counter, decimal) ". ";
+      font-variant-numeric: tabular-nums;
+    }
+    counter-increment: prosemirror-flat-list-counter;
+
+    /* 
+      Reset the counter for the first list node in the sequence.
+      */
+    &:first-child,
+    :not(&) + & {
+      counter-reset: prosemirror-flat-list-counter;
+
+      /* 
+        If the first list node has a custom order number, set the counter to that value.
+        */
+      &[data-list-order] {
+        @supports (counter-set: prosemirror-flat-list-counter 1) {
+          counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+
+        /* 
+          Safari older than version 17.2 doesn't support `counter-set` 
+          */
+        @supports not (counter-set: prosemirror-flat-list-counter 1) {
+          counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+      }
+    }
+  }
+
+  &[data-list-kind="task"] {
+    & > .list-marker {
+      &,
+      & * {
+        /* Make sure that the checkbox is at the center */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    &[data-list-collapsable] > .list-marker {
+      cursor: pointer;
+    }
+    &:not([data-list-collapsable]) > .list-marker {
+      opacity: 40%;
+      pointer-events: none;
+    }
+
+    /* If collapsed, hide the second and futher children */
+    &[data-list-collapsable][data-list-collapsed] > .list-content > *:nth-child(n+2) {
+      display: none;
+    }
+  }
+}
 
 .ProseMirror .tableWrapper {
   overflow-x: auto;

package/dist/typography.css

@@ -1,3 +1,7 @@
+:root {
+  --prosekit-node-selection-color: rgba(57, 136, 255, 0.2);
+}
+
 .ProseMirror {
   & {
     /* Disable margin collapsing */
@@ -162,13 +166,13 @@
     &:has(> div.list-content > h1) {
       &::before,
       & > .list-marker {
-        top: 1em;
+        top: 0.75em;
       }
     }
     &:has(> div.list-content > h2) {
       &::before,
       & > .list-marker {
-        top: 0.6em;
+        top: 0.5em;
       }
     }
     &:has(> div.list-content > h3) {
@@ -186,31 +190,17 @@
     &:has(> div.list-content > h5) {
       &::before,
       & > .list-marker {
-        top: -0.1em;
+        top: -0.2em;
       }
     }
     &:has(> div.list-content > h6) {
       &::before,
       & > .list-marker {
-        top: -0.1em;
+        top: -0.3em;
       }
     }
   }
 
-  /*
-   In Chrome, when an editor is styled with a background color and a selected
-   node is dragged, the dragged element inherits this background color, along
-   with an additional shadow effect. This visual is not ideal, especially when
-   the dragged element lacks any margin or padding. To address this issue, we
-   adjust the z-index of the dragged element as a workaround, preventing it from
-   inheriting the background color.
-
-   See also https://stackoverflow.com/a/61812377
-   */
-  .ProseMirror-selectednode {
-    z-index: calc(infinity);
-  }
-
   /*
    Don't generate box for node view wrapper. This make it easier to style
    the node views.
@@ -218,5 +208,17 @@
   div[data-node-view-root="true"] {
     display: contents;
   }
+
+  & .ProseMirror-selectednode {
+    border-radius: 0.2rem;
+    outline-color: var(--prosekit-node-selection-color);
+    outline-style: solid;
+    outline-width: 0.3rem;
+    background-color: var(--prosekit-node-selection-color);
+  }
+
+  &.prosekit-dragging {
+    --prosekit-node-selection-color: transparent;
+  }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/basic",
   "type": "module",
-  "version": "0.5.4",
+  "version": "0.6.1",
   "private": false,
   "description": "A quick starter for ProseKit",
   "author": {
@@ -10,14 +10,14 @@
   },
   "license": "MIT",
   "funding": "https://github.com/sponsors/ocavue",
-  "homepage": "https://github.com/ocavue/prosekit#readme",
+  "homepage": "https://github.com/prosekit/prosekit#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ocavue/prosekit.git",
+    "url": "git+https://github.com/prosekit/prosekit.git",
     "directory": "packages/basic"
   },
   "bugs": {
-    "url": "https://github.com/ocavue/prosekit/issues"
+    "url": "https://github.com/prosekit/prosekit/issues"
   },
   "keywords": [
     "ProseMirror"
@@ -41,15 +41,15 @@
     "dist"
   ],
   "dependencies": {
-    "@prosekit/extensions": "^0.10.0",
+    "@prosekit/core": "^0.8.3",
     "@prosekit/pm": "^0.1.11",
-    "@prosekit/core": "^0.8.3"
+    "@prosekit/extensions": "^0.11.1"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
     "happy-dom": "^18.0.1",
     "jsdom": "^26.1.0",
-    "tsdown": "^0.12.9",
+    "tsdown": "^0.13.1",
     "typescript": "~5.8.3",
     "vitest": "^3.2.4",
     "@prosekit/config-tsdown": "0.0.0",