@prosekit/basic 0.4.1 → 0.5.1

package/dist/prosekit-basic.d.ts

@@ -1,2 +1,65 @@
-export { defineBasicExtension } from './_tsup-dts-rollup.js';
-export { BasicExtension } from './_tsup-dts-rollup.js';
+import { BaseCommandsExtension, BaseKeymapExtension, HistoryExtension, Union } from "@prosekit/core";
+import { BlockquoteExtension } from "@prosekit/extensions/blockquote";
+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";
+import { HorizontalRuleExtension } from "@prosekit/extensions/horizontal-rule";
+import { ImageExtension } from "@prosekit/extensions/image";
+import { ItalicExtension } from "@prosekit/extensions/italic";
+import { LinkExtension } from "@prosekit/extensions/link";
+import { ListExtension } from "@prosekit/extensions/list";
+import { ModClickPreventionExtension } from "@prosekit/extensions/mod-click-prevention";
+import { ParagraphExtension } from "@prosekit/extensions/paragraph";
+import { StrikeExtension } from "@prosekit/extensions/strike";
+import { TableExtension } from "@prosekit/extensions/table";
+import { TextExtension } from "@prosekit/extensions/text";
+import { UnderlineExtension } from "@prosekit/extensions/underline";
+import { VirtualSelectionExtension } from "@prosekit/extensions/virtual-selection";
+
+//#region src/index.d.ts
+
+/**
+* @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]>;
+/**
+* Define a basic extension that includes some common functionality. You can
+* copy this function and customize it to your needs.
+*
+* It's a combination of the following extension functions:
+*
+* - {@link defineDoc}
+* - {@link defineText}
+* - {@link defineParagraph}
+* - {@link defineHeading}
+* - {@link defineList}
+* - {@link defineBlockquote}
+* - {@link defineImage}
+* - {@link defineHorizontalRule}
+* - {@link defineHardBreak}
+* - {@link defineTable}
+* - {@link defineCodeBlock}
+* - {@link defineItalic}
+* - {@link defineBold}
+* - {@link defineUnderline}
+* - {@link defineStrike}
+* - {@link defineCode}
+* - {@link defineLink}
+* - {@link defineBaseKeymap}
+* - {@link defineBaseCommands}
+* - {@link defineHistory}
+* - {@link defineDropCursor}
+* - {@link defineGapCursor}
+* - {@link defineVirtualSelection}
+* - {@link defineModClickPrevention}
+*
+* @public
+*/
+declare function defineBasicExtension(): BasicExtension;
+//#endregion
+export { BasicExtension, defineBasicExtension };

package/dist/prosekit-basic.js

@@ -1,100 +1,63 @@
-// src/index.ts
-import {
-  defineBaseCommands,
-  defineBaseKeymap,
-  defineHistory,
-  union
-} from "@prosekit/core";
-import {
-  defineBlockquote
-} from "@prosekit/extensions/blockquote";
-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 {
-  defineHeading
-} from "@prosekit/extensions/heading";
-import {
-  defineHorizontalRule
-} from "@prosekit/extensions/horizontal-rule";
-import {
-  defineImage
-} from "@prosekit/extensions/image";
-import {
-  defineItalic
-} from "@prosekit/extensions/italic";
-import {
-  defineLink
-} from "@prosekit/extensions/link";
-import {
-  defineList
-} from "@prosekit/extensions/list";
-import {
-  defineModClickPrevention
-} from "@prosekit/extensions/mod-click-prevention";
-import {
-  defineParagraph
-} from "@prosekit/extensions/paragraph";
-import {
-  defineStrike
-} from "@prosekit/extensions/strike";
-import {
-  defineTable
-} from "@prosekit/extensions/table";
-import {
-  defineText
-} from "@prosekit/extensions/text";
-import {
-  defineUnderline
-} from "@prosekit/extensions/underline";
-import {
-  defineVirtualSelection
-} from "@prosekit/extensions/virtual-selection";
+import { defineBaseCommands, defineBaseKeymap, defineHistory, union } from "@prosekit/core";
+import { defineBlockquote } from "@prosekit/extensions/blockquote";
+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";
+import { defineHorizontalRule } from "@prosekit/extensions/horizontal-rule";
+import { defineImage } from "@prosekit/extensions/image";
+import { defineItalic } from "@prosekit/extensions/italic";
+import { defineLink } from "@prosekit/extensions/link";
+import { defineList } from "@prosekit/extensions/list";
+import { defineModClickPrevention } from "@prosekit/extensions/mod-click-prevention";
+import { defineParagraph } from "@prosekit/extensions/paragraph";
+import { defineStrike } from "@prosekit/extensions/strike";
+import { defineTable } from "@prosekit/extensions/table";
+import { defineText } from "@prosekit/extensions/text";
+import { defineUnderline } from "@prosekit/extensions/underline";
+import { defineVirtualSelection } from "@prosekit/extensions/virtual-selection";
+
+//#region src/index.ts
+/**
+* Define a basic extension that includes some common functionality. You can
+* copy this function and customize it to your needs.
+*
+* It's a combination of the following extension functions:
+*
+* - {@link defineDoc}
+* - {@link defineText}
+* - {@link defineParagraph}
+* - {@link defineHeading}
+* - {@link defineList}
+* - {@link defineBlockquote}
+* - {@link defineImage}
+* - {@link defineHorizontalRule}
+* - {@link defineHardBreak}
+* - {@link defineTable}
+* - {@link defineCodeBlock}
+* - {@link defineItalic}
+* - {@link defineBold}
+* - {@link defineUnderline}
+* - {@link defineStrike}
+* - {@link defineCode}
+* - {@link defineLink}
+* - {@link defineBaseKeymap}
+* - {@link defineBaseCommands}
+* - {@link defineHistory}
+* - {@link defineDropCursor}
+* - {@link defineGapCursor}
+* - {@link defineVirtualSelection}
+* - {@link defineModClickPrevention}
+*
+* @public
+*/
 function defineBasicExtension() {
-  return union(
-    // Nodes
-    defineDoc(),
-    defineText(),
-    defineParagraph(),
-    defineHeading(),
-    defineList(),
-    defineBlockquote(),
-    defineImage(),
-    defineHorizontalRule(),
-    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());
 }
-export {
-  defineBasicExtension
-};
+
+//#endregion
+export { defineBasicExtension };

package/dist/style.css

@@ -1,58 +1,60 @@
-/* ../../node_modules/.pnpm/prosemirror-view@1.38.1/node_modules/prosemirror-view/style/prosemirror.css */
 .ProseMirror {
   position: relative;
 }
+
 .ProseMirror {
   word-wrap: break-word;
   white-space: pre-wrap;
   white-space: break-spaces;
   -webkit-font-variant-ligatures: none;
   font-variant-ligatures: none;
-  font-feature-settings: "liga" 0;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
 }
+
 .ProseMirror pre {
   white-space: pre-wrap;
 }
+
 .ProseMirror li {
   position: relative;
 }
-.ProseMirror-hideselection *::selection {
-  background: transparent;
-}
-.ProseMirror-hideselection *::-moz-selection {
-  background: transparent;
-}
-.ProseMirror-hideselection {
-  caret-color: transparent;
-}
-.ProseMirror [draggable][contenteditable=false] {
-  user-select: text;
-}
+
+.ProseMirror-hideselection *::selection { background: transparent; }
+.ProseMirror-hideselection *::-moz-selection { background: transparent; }
+.ProseMirror-hideselection { caret-color: transparent; }
+
+/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
+.ProseMirror [draggable][contenteditable=false] { user-select: text }
+
 .ProseMirror-selectednode {
   outline: 2px solid #8cf;
 }
+
+/* Make sure li selections wrap around markers */
+
 li.ProseMirror-selectednode {
   outline: none;
 }
+
 li.ProseMirror-selectednode:after {
   content: "";
   position: absolute;
   left: -32px;
-  right: -2px;
-  top: -2px;
-  bottom: -2px;
+  right: -2px; top: -2px; bottom: -2px;
   border: 2px solid #8cf;
   pointer-events: none;
 }
+
+/* Protect against generic img rules */
+
 img.ProseMirror-separator {
   display: inline !important;
   border: none !important;
   margin: 0 !important;
 }
 
-/* ../pm/src/view/style/prosemirror.css */
 
-/* ../../node_modules/.pnpm/prosemirror-flat-list@0.5.4/node_modules/prosemirror-flat-list/dist/style.css */
+/* src/style.css */
 .prosemirror-flat-list {
   padding: 0;
   margin-top: 0;
@@ -79,9 +81,6 @@ img.ProseMirror-separator {
 .prosemirror-flat-list[data-list-kind=bullet] {
   list-style: disc;
 }
-.prosemirror-flat-list[data-list-kind=ordered] {
-  counter-increment: prosemirror-flat-list-counter;
-}
 .prosemirror-flat-list[data-list-kind=ordered] > * {
   contain: style;
 }
@@ -91,6 +90,9 @@ img.ProseMirror-separator {
   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;
@@ -112,8 +114,8 @@ img.ProseMirror-separator {
   width: 1.5em;
   width: 1lh;
 }
-.prosemirror-flat-list[data-list-kind=task] > .list-marker,
-.prosemirror-flat-list[data-list-kind=task] > .list-marker * {
+: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 {
@@ -140,34 +142,32 @@ img.ProseMirror-separator {
   display: none;
 }
 
-/* ../extensions/src/list/style.css */
 
-/* ../extensions/src/table/style.css */
 .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 {
-  vertical-align: top;
   box-sizing: border-box;
   position: relative;
-  border-width: 1px;
-  padding-left: 0.75rem;
   padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  border-width: 1px;
+  vertical-align: top;
 }
 .ProseMirror .column-resize-handle {
+  z-index: 20;
   position: absolute;
-  right: -2px;
   top: 0;
+  right: -2px;
   bottom: 0;
   width: 4px;
-  z-index: 20;
   background-color: HighlightText;
   pointer-events: none;
 }
@@ -176,31 +176,25 @@ img.ProseMirror-separator {
   cursor: col-resize;
 }
 .ProseMirror .selectedCell {
-  --color:
-    210,
-    100%,
-    56%;
-  background-color: hsla(var(--color), 20%);
+  --color: 210, 100%, 56%;
   border: 1px double hsl(var(--color));
+  background-color: hsla(var(--color), 20%);
 }
 
-/* ../extensions/src/placeholder/style.css */
 .prosekit-placeholder::before {
   position: absolute;
-  opacity: 30%;
-  pointer-events: none;
   height: 0;
   content: attr(data-placeholder);
+  opacity: 30%;
+  pointer-events: none;
 }
 
-/* ../extensions/src/virtual-selection/style.css */
 .prosekit-virtual-selection {
+  border-radius: 2px;
   background-color: #8888884d;
   box-shadow: 0 0 0 2px #8888884d;
-  border-radius: 2px;
 }
 
-/* ../extensions/src/commit/style.css */
 .prosekit-commit-deletion {
   background-color: #e5534b80;
   text-decoration: line-through;
@@ -209,28 +203,30 @@ img.ProseMirror-separator {
   background-color: #53e54b80;
 }
 
-/* ../extensions/src/gap-cursor/style.css */
 .ProseMirror-gapcursor {
   display: none;
-  pointer-events: none;
   position: relative;
+  pointer-events: none;
 }
+
 .ProseMirror-gapcursor:after {
-  content: "";
   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 {
   to {
     visibility: hidden;
   }
 }
+
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
 }
 
-/* src/style.css */
+

package/dist/typography.css

@@ -1,160 +1,222 @@
-/* src/typography.css */
 div.ProseMirror {
-  display: flex;
-  flex-direction: column;
-}
-div.ProseMirror {
-  line-height: 1.5;
-}
-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 {
-  font-weight: 600;
-  line-height: 1.25;
-  padding-top: 0;
-  padding-bottom: 0;
-  border-style: none;
-}
-div.ProseMirror a {
-  text-decoration: underline;
-  font-weight: 500;
-}
-div.ProseMirror p,
-div.ProseMirror ul,
-div.ProseMirror ol,
-div.ProseMirror pre {
-  margin: 0;
-  padding: 0.5rem 0;
-  line-height: 1.5;
-}
-div.ProseMirror blockquote {
-  padding-left: 1em;
-  border-left: 0.25em solid hsl(0 0% 60% / 0.4);
-}
-div.ProseMirror h1 {
-  margin: 1rem 0;
-  font-size: 2.25em;
-}
-div.ProseMirror h2 {
-  margin: 1.75em 0 0.5em;
-  font-size: 1.75em;
-}
-div.ProseMirror h3 {
-  margin: 1.5em 0 0.5em;
-  font-size: 1.375em;
-}
-div.ProseMirror h4 {
-  margin: 1em 0;
-  font-size: 1.125em;
-}
-div.ProseMirror h5 {
-  margin: 0.5em 0;
-}
-div.ProseMirror h6 {
-  opacity: 0.8;
-}
-div.ProseMirror img,
-div.ProseMirror video {
-  margin: 0;
-  width: min-content;
-  max-width: 100%;
-}
-div.ProseMirror code {
-  font-size: 0.875em;
-  font-weight: 600;
-}
-div.ProseMirror pre {
-  margin: 0.5rem 0;
-  padding: 2rem 2rem;
-  overflow-x: auto;
-  border-radius: 0.375rem;
-  border: 1px solid hsl(0 0% 50% / 0.2);
-  color: var(--prosemirror-highlight, inherit);
-  background-color: var(--prosemirror-highlight-bg, inherit);
-}
-div.ProseMirror pre,
-div.ProseMirror code {
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  tab-size: 4;
-  hyphens: none;
-}
-div.ProseMirror pre code {
-  font-weight: inherit;
-}
-div.ProseMirror hr {
-  margin: 2em 0;
-  border-width: 1px;
-}
-div.ProseMirror .prosekit-horizontal-rule {
-  padding: 1em 0;
-  margin: 1em 0;
-  line-height: 1px;
-}
-:is(div.ProseMirror .prosekit-horizontal-rule) hr {
-  margin: 0;
-}
-div.ProseMirror .tableWrapper {
-  margin-top: 0.5em;
-  margin-bottom: 1em;
-}
-div.ProseMirror .prosemirror-flat-list {
-  line-height: 1.5;
-}
-:is(div.ProseMirror .prosemirror-flat-list)::before,
-:is(div.ProseMirror .prosemirror-flat-list) > .list-marker {
-  top: 0.5rem;
-}
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h1)::before,
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h1) > .list-marker {
-  top: 1em;
-}
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h2)::before,
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h2) > .list-marker {
-  top: 0.6em;
-}
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h3)::before,
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h3) > .list-marker {
-  top: 0.25em;
-}
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h4)::before,
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h4) > .list-marker {
-  top: 0;
-}
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h5)::before,
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h5) > .list-marker {
-  top: -0.1em;
-}
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h6)::before,
-:is(div.ProseMirror .prosemirror-flat-list):has(> div.list-content > h6) > .list-marker {
-  top: -0.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,8 +1,9 @@
 {
   "name": "@prosekit/basic",
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "private": false,
+  "description": "A quick starter for ProseKit",
   "author": {
     "name": "ocavue",
     "email": "ocavue@gmail.com"
@@ -40,21 +41,30 @@
     "dist"
   ],
   "dependencies": {
-    "@prosekit/core": "^0.8.0",
-    "@prosekit/extensions": "^0.8.0",
-    "@prosekit/pm": "^0.1.9"
+    "@prosekit/extensions": "^0.9.1",
+    "@prosekit/core": "^0.8.1",
+    "@prosekit/pm": "^0.1.10"
   },
   "devDependencies": {
-    "postcss": "^8.5.3",
-    "postcss-nesting": "^13.0.1",
-    "tsup": "^8.4.0",
-    "typescript": "~5.7.3",
-    "vitest": "^3.0.9",
-    "@prosekit/dev": "0.0.0"
+    "tsdown": "^0.12.4",
+    "typescript": "~5.8.3",
+    "vitest": "^3.1.4",
+    "@prosekit/config-tsdown": "0.0.0",
+    "@prosekit/config-vitest": "0.0.0"
+  },
+  "publishConfig": {
+    "dev": {}
+  },
+  "dev": {
+    "entry": {
+      "prosekit-basic": "./src/index.ts",
+      "style": "./src/style.css",
+      "typography": "./src/typography.css"
+    }
   },
   "scripts": {
     "build:tsc": "tsc -b tsconfig.json",
-    "build:tsup": "tsup"
+    "build:tsdown": "tsdown"
   },
   "types": "./dist/prosekit-basic.d.ts",
   "typesVersions": {

package/dist/_tsup-dts-rollup.d.ts

@@ -1,89 +0,0 @@
-import { BaseCommandsExtension } from '@prosekit/core';
-import { BaseKeymapExtension } from '@prosekit/core';
-import { BlockquoteExtension } from '@prosekit/extensions/blockquote';
-import { BoldExtension } from '@prosekit/extensions/bold';
-import { CodeBlockExtension } from '@prosekit/extensions/code-block';
-import { CodeExtension } from '@prosekit/extensions/code';
-import { DocExtension } from '@prosekit/extensions/doc';
-import { DropCursorExtension } from '@prosekit/extensions/drop-cursor';
-import { GapCursorExtension } from '@prosekit/extensions/gap-cursor';
-import { HeadingExtension } from '@prosekit/extensions/heading';
-import { HistoryExtension } from '@prosekit/core';
-import { HorizontalRuleExtension } from '@prosekit/extensions/horizontal-rule';
-import { ImageExtension } from '@prosekit/extensions/image';
-import { ItalicExtension } from '@prosekit/extensions/italic';
-import { LinkExtension } from '@prosekit/extensions/link';
-import { ListExtension } from '@prosekit/extensions/list';
-import { ModClickPreventionExtension } from '@prosekit/extensions/mod-click-prevention';
-import { ParagraphExtension } from '@prosekit/extensions/paragraph';
-import { StrikeExtension } from '@prosekit/extensions/strike';
-import { TableExtension } from '@prosekit/extensions/table';
-import { TextExtension } from '@prosekit/extensions/text';
-import { UnderlineExtension } from '@prosekit/extensions/underline';
-import { Union } from '@prosekit/core';
-import { VirtualSelectionExtension } from '@prosekit/extensions/virtual-selection';
-
-/**
- * @internal
- */
-export declare type BasicExtension = Union<[
-DocExtension,
-TextExtension,
-ParagraphExtension,
-HeadingExtension,
-ListExtension,
-BlockquoteExtension,
-ImageExtension,
-HorizontalRuleExtension,
-TableExtension,
-CodeBlockExtension,
-ItalicExtension,
-BoldExtension,
-UnderlineExtension,
-StrikeExtension,
-CodeExtension,
-LinkExtension,
-BaseKeymapExtension,
-BaseCommandsExtension,
-HistoryExtension,
-DropCursorExtension,
-GapCursorExtension,
-VirtualSelectionExtension,
-ModClickPreventionExtension
-]>;
-
-/**
- * Define a basic extension that includes some common functionality. You can
- * copy this function and customize it to your needs.
- *
- * It's a combination of the following extension functions:
- *
- * - {@link defineDoc}
- * - {@link defineText}
- * - {@link defineParagraph}
- * - {@link defineHeading}
- * - {@link defineList}
- * - {@link defineBlockquote}
- * - {@link defineImage}
- * - {@link defineHorizontalRule}
- * - {@link defineTable}
- * - {@link defineCodeBlock}
- * - {@link defineItalic}
- * - {@link defineBold}
- * - {@link defineUnderline}
- * - {@link defineStrike}
- * - {@link defineCode}
- * - {@link defineLink}
- * - {@link defineBaseKeymap}
- * - {@link defineBaseCommands}
- * - {@link defineHistory}
- * - {@link defineDropCursor}
- * - {@link defineGapCursor}
- * - {@link defineVirtualSelection}
- * - {@link defineModClickPrevention}
- *
- * @public
- */
-export declare function defineBasicExtension(): BasicExtension;
-
-export { }