@prosekit/basic 0.5.0 → 0.5.1

package/dist/prosekit-basic.d.ts

@@ -22,9 +22,7 @@ import { UnderlineExtension } from "@prosekit/extensions/underline";
 import { VirtualSelectionExtension } from "@prosekit/extensions/virtual-selection";
 
 //#region src/index.d.ts
-/**
-* @internal
-*/
+
 /**
 * @internal
 */
@@ -63,6 +61,5 @@ type BasicExtension = Union<[DocExtension, TextExtension, ParagraphExtension, He
 * @public
 */
 declare function defineBasicExtension(): BasicExtension;
-
 //#endregion
 export { BasicExtension, defineBasicExtension };

package/dist/prosekit-basic.js

@@ -56,35 +56,7 @@ import { defineVirtualSelection } from "@prosekit/extensions/virtual-selection";
 * @public
 */
 function defineBasicExtension() {
-	return union(
-		// Nodes
-		defineDoc(),
-		defineText(),
-		defineParagraph(),
-		defineHeading(),
-		defineList(),
-		defineBlockquote(),
-		defineImage(),
-		defineHorizontalRule(),
-		defineHardBreak(),
-		defineTable(),
-		defineCodeBlock(),
-		// Marks
-		defineItalic(),
-		defineBold(),
-		defineUnderline(),
-		defineStrike(),
-		defineCode(),
-		defineLink(),
-		// Others
-		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(), defineDropCursor(), defineGapCursor(), defineVirtualSelection(), defineModClickPrevention());
 }
 
 //#endregion

package/dist/style.css

@@ -146,56 +146,52 @@ img.ProseMirror-separator {
 .ProseMirror .tableWrapper {
   overflow-x: auto;
 }
-
 .ProseMirror table {
-  border-collapse: collapse;
-  table-layout: fixed;
   width: 100%;
   overflow: hidden;
+  border-collapse: collapse;
+  table-layout: fixed;
 }
-
-.ProseMirror td, .ProseMirror th {
+.ProseMirror td,
+.ProseMirror th {
   box-sizing: border-box;
-  vertical-align: top;
-  border-width: 1px;
-  padding-left: .75rem;
-  padding-right: .75rem;
   position: relative;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  border-width: 1px;
+  vertical-align: top;
 }
-
 .ProseMirror .column-resize-handle {
   z-index: 20;
-  pointer-events: none;
-  background-color: highlighttext;
-  width: 4px;
   position: absolute;
   top: 0;
-  bottom: 0;
   right: -2px;
+  bottom: 0;
+  width: 4px;
+  background-color: HighlightText;
+  pointer-events: none;
 }
-
 .ProseMirror.resize-cursor {
   cursor: ew-resize;
   cursor: col-resize;
 }
-
 .ProseMirror .selectedCell {
   --color: 210, 100%, 56%;
   border: 1px double hsl(var(--color));
   background-color: hsla(var(--color), 20%);
 }
 
-.prosekit-placeholder:before {
+.prosekit-placeholder::before {
+  position: absolute;
+  height: 0;
   content: attr(data-placeholder);
-  opacity: .3;
+  opacity: 30%;
   pointer-events: none;
-  height: 0;
-  position: absolute;
 }
 
 .prosekit-virtual-selection {
-  background-color: #8888884d;
   border-radius: 2px;
+  background-color: #8888884d;
   box-shadow: 0 0 0 2px #8888884d;
 }
 
@@ -203,25 +199,24 @@ img.ProseMirror-separator {
   background-color: #e5534b80;
   text-decoration: line-through;
 }
-
 .prosekit-commit-addition {
   background-color: #53e54b80;
 }
 
 .ProseMirror-gapcursor {
-  pointer-events: none;
   display: none;
   position: relative;
+  pointer-events: none;
 }
 
 .ProseMirror-gapcursor:after {
-  content: "";
-  border-top: 1px solid;
-  width: 20px;
-  animation: 1.1s steps(2, start) infinite ProseMirror-cursor-blink;
   display: block;
   position: absolute;
   top: -2px;
+  width: 20px;
+  border-top: 1px solid currentColor;
+  content: "";
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
 }
 
 @keyframes ProseMirror-cursor-blink {

package/dist/typography.css

@@ -1,160 +1,222 @@
 div.ProseMirror {
-  flex-direction: column;
-  line-height: 1.5;
-  display: flex;
-}
-
-div.ProseMirror p:first-child, div.ProseMirror h1:first-child, div.ProseMirror h2:first-child, div.ProseMirror h3:first-child, div.ProseMirror h4:first-child, div.ProseMirror h5:first-child, div.ProseMirror h6:first-child {
-  margin-top: 0;
-}
-
-div.ProseMirror p:last-child, div.ProseMirror h1:last-child, div.ProseMirror h2:last-child, div.ProseMirror h3:last-child, div.ProseMirror h4:last-child, div.ProseMirror h5:last-child, div.ProseMirror h6:last-child {
-  margin-bottom: 0;
-}
-
-div.ProseMirror h1, div.ProseMirror h2, div.ProseMirror h3, div.ProseMirror h4, div.ProseMirror h5, div.ProseMirror h6 {
-  border-style: none;
-  padding-top: 0;
-  padding-bottom: 0;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-div.ProseMirror a {
-  font-weight: 500;
-  text-decoration: underline;
-}
-
-div.ProseMirror p, div.ProseMirror ul, div.ProseMirror ol, div.ProseMirror pre {
-  margin: 0;
-  padding: .5rem 0;
-  line-height: 1.5;
-}
-
-div.ProseMirror blockquote {
-  border-left: .25em solid #9996;
-  padding-left: 1em;
-}
-
-div.ProseMirror h1 {
-  margin: 1rem 0;
-  font-size: 2.25em;
-}
-
-div.ProseMirror h2 {
-  margin: 1.75em 0 .5em;
-  font-size: 1.75em;
-}
-
-div.ProseMirror h3 {
-  margin: 1.5em 0 .5em;
-  font-size: 1.375em;
-}
-
-div.ProseMirror h4 {
-  margin: 1em 0;
-  font-size: 1.125em;
-}
-
-div.ProseMirror h5 {
-  margin: .5em 0;
-}
-
-div.ProseMirror h6 {
-  opacity: .8;
-}
-
-div.ProseMirror img, div.ProseMirror video {
-  width: min-content;
-  max-width: 100%;
-  margin: 0;
-}
-
-div.ProseMirror code {
-  font-size: .875em;
-  font-weight: 600;
-}
-
-div.ProseMirror pre {
-  background-color: var(--prosemirror-highlight-bg, inherit);
-  color: var(--prosemirror-highlight, inherit);
-  border: 1px solid #80808033;
-  border-radius: .375rem;
-  margin: .5rem 0;
-  padding: 2rem;
-  overflow-x: auto;
-}
-
-div.ProseMirror pre, div.ProseMirror code {
-  white-space: pre;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  hyphens: none;
-  tab-size: 4;
-}
-
-div.ProseMirror pre code {
-  font-weight: inherit;
-}
-
-div.ProseMirror hr {
-  border-width: 1px;
-  margin: 2em 0;
-}
-
-div.ProseMirror .prosekit-horizontal-rule {
-  margin: 1em 0;
-  padding: 1em 0;
-  line-height: 1px;
-}
-
-div.ProseMirror .prosekit-horizontal-rule hr {
-  margin: 0;
-}
-
-div.ProseMirror .tableWrapper {
-  margin-top: .5em;
-  margin-bottom: 1em;
-}
-
-div.ProseMirror .prosemirror-flat-list {
-  line-height: 1.5;
-}
-
-div.ProseMirror .prosemirror-flat-list:before, div.ProseMirror .prosemirror-flat-list > .list-marker {
-  top: .5rem;
-}
-
-div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h1):before, div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h1) > .list-marker {
-  top: 1em;
-}
-
-div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h2):before, div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h2) > .list-marker {
-  top: .6em;
-}
-
-div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h3):before, div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h3) > .list-marker {
-  top: .25em;
-}
-
-div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h4):before, div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h4) > .list-marker {
-  top: 0;
-}
-
-div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h5):before, div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h5) > .list-marker {
-  top: -.1em;
-}
-
-div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h6):before, div.ProseMirror .prosemirror-flat-list:has( > div.list-content > h6) > .list-marker {
-  top: -.1em;
-}
-
-div.ProseMirror .ProseMirror-selectednode {
-  z-index: calc(infinity);
-}
-
-div.ProseMirror div[data-node-view-root="true"] {
-  display: contents;
+  & {
+    /* Disable margin collapsing */
+    display: flex;
+    flex-direction: column;
+  }
+
+  & {
+    /* Set the default line height as same as block handle's height */
+    line-height: 1.5;
+  }
+
+  & p:first-child,
+  & h1:first-child,
+  & h2:first-child,
+  & h3:first-child,
+  & h4:first-child,
+  & h5:first-child,
+  & h6:first-child {
+    margin-top: 0;
+  }
+
+  & p:last-child,
+  & h1:last-child,
+  & h2:last-child,
+  & h3:last-child,
+  & h4:last-child,
+  & h5:last-child,
+  & h6:last-child {
+    margin-bottom: 0;
+  }
+
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-style: none;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  & a {
+    font-weight: 500;
+    text-decoration: underline;
+  }
+
+  & p,
+  & ul,
+  & ol,
+  & pre {
+    margin: 0;
+    padding: 0.5rem 0;
+    line-height: 1.5;
+  }
+
+  & blockquote {
+    padding-left: 1em;
+    border-left: 0.25em solid hsl(0 0% 60% / 0.4);
+  }
+
+  & h1 {
+    margin: 1rem 0;
+    font-size: 2.25em;
+  }
+
+  & h2 {
+    margin: 1.75em 0 0.5em;
+    font-size: 1.75em;
+  }
+
+  & h3 {
+    margin: 1.5em 0 0.5em;
+    font-size: 1.375em;
+  }
+
+  & h4 {
+    margin: 1em 0;
+    font-size: 1.125em;
+  }
+
+  & h5 {
+    margin: 0.5em 0;
+  }
+
+  & h6 {
+    opacity: 0.8;
+  }
+
+  & img,
+  & video {
+    width: min-content;
+    max-width: 100%;
+    margin: 0;
+  }
+
+  & code {
+    font-weight: 600;
+    font-size: 0.875em;
+  }
+
+  & pre {
+    margin: 0.5rem 0;
+    padding: 2rem 2rem;
+    overflow-x: auto;
+    border: 1px solid hsl(0 0% 50% / 0.2);
+    border-radius: 0.375rem;
+    /* CSS variables `prosemirror-highlight` and `prosemirror-highlight-bg` are set by package `prosemirror-highlight` */
+    background-color: var(--prosemirror-highlight-bg, inherit);
+    color: var(--prosemirror-highlight, inherit);
+  }
+
+  & pre,
+  & code {
+    white-space: pre;
+    word-break: normal;
+    word-spacing: normal;
+    word-wrap: normal;
+    hyphens: none;
+    tab-size: 4;
+  }
+
+  & pre code {
+    font-weight: inherit;
+  }
+
+  & hr {
+    margin: 2em 0;
+    border-width: 1px;
+  }
+
+  & .prosekit-horizontal-rule {
+    margin: 1em 0;
+    padding: 1em 0;
+    /* Set a small line-height so that the block handle can align to the middle
+    of the horizontal rule */
+    line-height: 1px;
+
+    & hr {
+      margin: 0;
+    }
+  }
+
+  & .tableWrapper {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+  }
+
+  & .prosemirror-flat-list {
+    /* Use the same line-height as <p> */
+    line-height: 1.5;
+
+    &::before,
+    & > .list-marker {
+      /* Use the same padding as <p> */
+      top: 0.5rem;
+    }
+
+    &:has(> div.list-content > h1) {
+      &::before,
+      & > .list-marker {
+        top: 1em;
+      }
+    }
+    &:has(> div.list-content > h2) {
+      &::before,
+      & > .list-marker {
+        top: 0.6em;
+      }
+    }
+    &:has(> div.list-content > h3) {
+      &::before,
+      & > .list-marker {
+        top: 0.25em;
+      }
+    }
+    &:has(> div.list-content > h4) {
+      &::before,
+      & > .list-marker {
+        top: 0;
+      }
+    }
+    &:has(> div.list-content > h5) {
+      &::before,
+      & > .list-marker {
+        top: -0.1em;
+      }
+    }
+    &:has(> div.list-content > h6) {
+      &::before,
+      & > .list-marker {
+        top: -0.1em;
+      }
+    }
+  }
+
+  /*
+   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.
+   */
+  div[data-node-view-root="true"] {
+    display: contents;
+  }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/basic",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": false,
   "description": "A quick starter for ProseKit",
   "author": {
@@ -41,16 +41,16 @@
     "dist"
   ],
   "dependencies": {
+    "@prosekit/extensions": "^0.9.1",
     "@prosekit/core": "^0.8.1",
-    "@prosekit/extensions": "^0.9.0",
     "@prosekit/pm": "^0.1.10"
   },
   "devDependencies": {
-    "tsdown": "^0.11.1",
+    "tsdown": "^0.12.4",
     "typescript": "~5.8.3",
-    "vitest": "^3.1.3",
-    "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-tsdown": "0.0.0"
+    "vitest": "^3.1.4",
+    "@prosekit/config-tsdown": "0.0.0",
+    "@prosekit/config-vitest": "0.0.0"
   },
   "publishConfig": {
     "dev": {}