@blocknote/core 0.2.2-alpha.0 → 0.2.3

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.2.2-alpha.0",
+  "version": "0.2.3",
   "files": [
     "dist",
     "types",
@@ -71,13 +71,15 @@
     "prosemirror-gapcursor": "^1.3.1",
     "prosemirror-history": "^1.3.0",
     "prosemirror-keymap": "^1.2.0",
-    "prosemirror-model": "^1.19.0",
+    "prosemirror-model": "~1.18.3",
     "prosemirror-schema-list": "^1.2.2",
     "prosemirror-state": "^1.4.2",
     "prosemirror-transform": "^1.7.1",
     "prosemirror-view": "^1.30.0",
     "uuid": "^8.3.2",
-    "y-prosemirror": "1.0.20"
+    "y-prosemirror": "1.0.20",
+    "y-protocols": "1.0.5",
+    "yjs": "13.5.44"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.179",
@@ -102,5 +104,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "6a4d8a348913f994f3bfd729909bad4834b51988"
+  "gitHead": "04fb17b9fd76a5a9a5a3476c0a1d441848110ea9"
 }

package/src/BlockNoteExtensions.ts

@@ -1,6 +1,5 @@
 import { Extensions, extensions } from "@tiptap/core";
 
-import { Node } from "@tiptap/core";
 import Bold from "@tiptap/extension-bold";
 import Code from "@tiptap/extension-code";
 import DropCursor from "@tiptap/extension-dropcursor";
@@ -16,7 +15,6 @@ import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
 import { FormattingToolbarExtension } from "./extensions/FormattingToolbar/FormattingToolbarExtension";
 import { DraggableBlocksExtension } from "./extensions/DraggableBlocks/DraggableBlocksExtension";
 import HyperlinkMark from "./extensions/HyperlinkToolbar/HyperlinkMark";
-import { FixedParagraph } from "./extensions/Paragraph/FixedParagraph";
 import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
 import SlashMenuExtension from "./extensions/SlashMenu";
 import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
@@ -28,12 +26,6 @@ import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenu
 import { Link } from "@tiptap/extension-link";
 import { SlashMenuItem } from "./extensions/SlashMenu/SlashMenuItem";
 
-export const Document = Node.create({
-  name: "doc",
-  topNode: true,
-  content: "block+",
-});
-
 export type UiFactories = Partial<{
   formattingToolbarFactory: FormattingToolbarFactory;
   hyperlinkToolbarFactory: HyperlinkToolbarFactory;
@@ -64,7 +56,7 @@ export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
       showOnlyCurrent: false,
     }),
     UniqueID.configure({
-      types: ["block"],
+      types: ["blockContainer"],
     }),
     HardBreak,
     // Comments,
@@ -78,7 +70,6 @@ export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
     Italic,
     Strike,
     Underline,
-    FixedParagraph,
 
     // custom blocks:
     ...blocks,

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -9,9 +9,11 @@ import { Decoration, DecorationSet } from "prosemirror-view";
 const PLUGIN_KEY = new PluginKey(`previous-blocks`);
 
 const nodeAttributes: Record<string, string> = {
-  listItemType: "list-item-type",
-  listItemIndex: "list-item-index",
-  headingLevel: "heading-level",
+  // Numbered List Items
+  index: "index",
+  // Headings
+  level: "level",
+  // All Blocks
   type: "type",
   depth: "depth",
   "depth-change": "depth-change",
@@ -91,43 +93,40 @@ export const PreviousBlockTypePlugin = () => {
             const newContentNode = node.node.firstChild;
             if (oldNode && oldContentNode && newContentNode) {
               const newAttrs = {
-                listItemType: newContentNode.attrs.listItemType,
-                listItemIndex: newContentNode.attrs.listItemIndex,
-                headingLevel: newContentNode.attrs.headingLevel,
+                index: newContentNode.attrs.index,
+                level: newContentNode.attrs.level,
                 type: newContentNode.type.name,
                 depth: newState.doc.resolve(node.pos).depth,
               };
 
               const oldAttrs = {
-                listItemType: oldContentNode.attrs.listItemType,
-                listItemIndex: oldContentNode.attrs.listItemIndex,
-                headingLevel: oldContentNode.attrs.headingLevel,
+                index: oldContentNode.attrs.index,
+                level: oldContentNode.attrs.level,
                 type: oldContentNode.type.name,
                 depth: oldState.doc.resolve(oldNode.pos).depth,
               };
 
-              // Hacky fix to avoid processing certain transactions created by ordered list indexing plugin.
+              // Hacky fix to avoid processing certain transactions created by the numbered list indexing plugin.
 
-              // True when an existing ordered list item is assigned an index for the first time, which happens
+              // True when an existing numbered list item is assigned an index for the first time, which happens
               // immediately after it's created. Using this condition to start an animation ensures it's not
-              // immediately overridden by a different transaction created by the ordered list indexing plugin.
+              // immediately overridden by a different transaction created by the numbered list indexing plugin.
               const indexInitialized =
-                oldAttrs.listItemIndex === null &&
-                newAttrs.listItemIndex !== null;
+                oldAttrs.index === null && newAttrs.index !== null;
 
-              // True when an existing ordered list item changes nesting levels, before its index is updated by the
-              // ordered list indexing plugin. This condition ensures that animations for indentation still work with
-              // ordered list items, while preventing unnecessary animations being done when dragging/dropping them.
+              // True when an existing numbered list item changes nesting levels, before its index is updated by the
+              // numbered list indexing plugin. This condition ensures that animations for indentation still work with
+              // numbered list items, while preventing unnecessary animations being done when dragging/dropping them.
               const depthChanged =
-                oldAttrs.listItemIndex !== null &&
-                newAttrs.listItemIndex !== null &&
-                oldAttrs.listItemIndex === newAttrs.listItemIndex;
+                oldAttrs.index !== null &&
+                newAttrs.index !== null &&
+                oldAttrs.index === newAttrs.index;
 
-              // Only false for transactions in which the block remains an ordered list item before & after, but neither
+              // Only false for transactions in which the block remains a numbered list item before & after, but neither
               // of the previous conditions apply.
               const shouldUpdate =
-                oldAttrs.listItemType === "ordered" &&
-                newAttrs.listItemType === "ordered"
+                oldAttrs.type === "numberedListItem" &&
+                newAttrs.type === "numberedListItem"
                   ? indexInitialized || depthChanged
                   : true;
 
@@ -162,7 +161,6 @@ export const PreviousBlockTypePlugin = () => {
       decorations(state) {
         const pluginState = (this as Plugin).getState(state);
         if (!pluginState.needsUpdate) {
-          // console.log("0");
           return undefined;
         }
 
@@ -170,12 +168,10 @@ export const PreviousBlockTypePlugin = () => {
 
         state.doc.descendants((node, pos) => {
           if (!node.attrs.id) {
-            // console.log("1");
             return;
           }
           const prevAttrs = pluginState.prevBlockAttrs[node.attrs.id];
           if (!prevAttrs) {
-            // console.log("2");
             return;
           }
 

package/src/extensions/Blocks/apiTypes.ts

@@ -0,0 +1,48 @@
+export type BlockSpec<
+  // Type of the block.
+  // Examples might include: "paragraph", "heading", or "bulletListItem".
+  Type extends string,
+  // Changeable props which affect the block's behaviour or appearance.
+  // An example might be: { textAlignment: "left" | "right" | "center" | "justify" } for a paragraph block.
+  Props extends Record<string, string>
+> = {
+  type: Type;
+  props: Props;
+};
+
+export type BlockSpecUpdate<Spec> = Spec extends BlockSpec<
+  infer Type,
+  infer Props
+>
+  ? {
+      type: Type;
+      props?: Partial<Props>;
+    }
+  : never;
+
+export type NumberedListItemBlock = BlockSpec<"numberedListItem", {}>;
+
+export type BulletListItemBlock = BlockSpec<"bulletListItem", {}>;
+
+export type HeadingBlock = BlockSpec<
+  "heading",
+  {
+    level: "1" | "2" | "3";
+  }
+>;
+
+export type ParagraphBlock = BlockSpec<"paragraph", {}>;
+
+export type Block =
+  | ParagraphBlock
+  | HeadingBlock
+  | BulletListItemBlock
+  | NumberedListItemBlock;
+
+export type BlockUpdate = BlockSpecUpdate<Block>;
+
+/*
+TODO:
+ 1) guard read / writes (now we just pass on internal node attrs)
+ 2) where to locate this code / types
+*/

package/src/extensions/Blocks/helpers/findBlock.ts

@@ -1,3 +1,5 @@
 import { findParentNode } from "@tiptap/core";
 
-export const findBlock = findParentNode((node) => node.type.name === "block");
+export const findBlock = findParentNode(
+  (node) => node.type.name === "blockContainer"
+);

package/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts

@@ -37,7 +37,7 @@ export function getBlockInfoFromPos(
     if (depth === 0) {
       return undefined;
     }
-    if (node.type.name === "block") {
+    if (node.type.name === "blockContainer") {
       break;
     }
 

package/src/extensions/Blocks/index.ts

@@ -1,15 +1,17 @@
 import { Node } from "@tiptap/core";
-import { Block } from "./nodes/Block";
+import { BlockContainer } from "./nodes/BlockContainer";
 import { BlockGroup } from "./nodes/BlockGroup";
-import { TextContent } from "./nodes/BlockTypes/TextBlock/TextContent";
-import { HeadingContent } from "./nodes/BlockTypes/HeadingBlock/HeadingContent";
-import { ListItemContent } from "./nodes/BlockTypes/ListItemBlock/ListItemContent";
+import { ParagraphBlockContent } from "./nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent";
+import { HeadingBlockContent } from "./nodes/BlockContent/HeadingBlockContent/HeadingBlockContent";
+import { BulletListItemBlockContent } from "./nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
+import { NumberedListItemBlockContent } from "./nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
 
 export const blocks: any[] = [
-  TextContent,
-  HeadingContent,
-  ListItemContent,
-  Block,
+  ParagraphBlockContent,
+  HeadingBlockContent,
+  BulletListItemBlockContent,
+  NumberedListItemBlockContent,
+  BlockContainer,
   BlockGroup,
   Node.create({
     name: "doc",

package/src/extensions/Blocks/nodes/Block.module.css

@@ -115,34 +115,34 @@ NESTED BLOCKS
 }
 
 /* HEADINGS*/
-[data-heading-level="1"] {
+[data-level="1"] {
   --level: 3em;
 }
-[data-heading-level="2"] {
+[data-level="2"] {
   --level: 2em;
 }
-[data-heading-level="3"] {
+[data-level="3"] {
   --level: 1.3em;
 }
 
-[data-prev-heading-level="1"] {
+[data-prev-level="1"] {
   --prev-level: 3em;
 }
-[data-prev-heading-level="2"] {
+[data-prev-level="2"] {
   --prev-level: 2em;
 }
-[data-prev-heading-level="3"] {
+[data-prev-level="3"] {
   --prev-level: 1.3em;
 }
 
-.blockOuter[data-prev-type="headingContent"] > .block > .blockContent {
+.blockOuter[data-prev-type="heading"] > .block > .blockContent {
   font-size: var(--prev-level);
   font-weight: bold;
 }
 
 .blockOuter:not([data-prev-type])
   > .block
-  > .blockContent[data-content-type="headingContent"] {
+  > .blockContent[data-content-type="heading"] {
   font-size: var(--level);
   font-weight: bold;
 }
@@ -155,15 +155,15 @@ NESTED BLOCKS
 }
 
 /* Ordered */
-[data-list-item-type="ordered"] {
-  --index: attr(data-list-item-index)
+[data-content-type="numberedListItem"] {
+  --index: attr(data-index)
 }
 
-[data-prev-list-item-type="ordered"] {
-  --prev-index: attr(data-prev-list-item-index)
+[data-prev-type="numberedListItem"] {
+  --prev-index: attr(data-prev-index)
 }
 
-.blockOuter[data-prev-list-item-type="ordered"]:not([data-prev-list-item-index="none"])
+.blockOuter[data-prev-type="numberedListItem"]:not([data-prev-index="none"])
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
@@ -172,14 +172,14 @@ NESTED BLOCKS
 
 .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="ordered"]::before {
+> .blockContent[data-content-type="numberedListItem"]::before {
   margin-right: 1.2em;
   content: var(--index)".";
 }
 
 /* Unordered */
 /* No list nesting */
-.blockOuter[data-prev-list-item-type="unordered"]
+.blockOuter[data-prev-type="bulletListItem"]
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
@@ -188,43 +188,43 @@ NESTED BLOCKS
 
 .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="unordered"]::before {
+> .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "•";
 }
 
 /* 1 level of list nesting */
-[data-list-item-type="unordered"]~.blockGroup
-> .blockOuter[data-prev-list-item-type="unordered"]
+[data-content-type="bulletListItem"]~.blockGroup
+> .blockOuter[data-prev-type="bulletListItem"]
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
-[data-list-item-type="unordered"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
 > .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="unordered"]::before {
+> .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
 /* 2 levels of list nesting */
-[data-list-item-type="unordered"]~.blockGroup
-[data-list-item-type="unordered"]~.blockGroup
-> .blockOuter[data-prev-list-item-type="unordered"]
+[data-content-type="bulletListItem"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
+> .blockOuter[data-prev-type="bulletListItem"]
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
   content: "▪";
 }
 
-[data-list-item-type="unordered"]~.blockGroup
-[data-list-item-type="unordered"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
 > .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="unordered"]::before {
+> .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "▪";
 }
@@ -257,12 +257,14 @@ NESTED BLOCKS
   content: "Type to filter";
 }
 
-.blockContent[data-content-type="headingContent"].isEmpty
+.blockContent[data-content-type="heading"].isEmpty
   > :first-child::before {
   content: "Heading";
 }
 
-.blockContent[data-content-type="listItemContent"].isEmpty
-  > :first-child:before {
+.blockContent[data-content-type="bulletListItem"].isEmpty
+> :first-child:before,
+.blockContent[data-content-type="numberedListItem"].isEmpty
+> :first-child:before {
   content: "List";
 }