@blocknote/core 0.1.0-alpha.3

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@blocknote/core",
+  "private": false,
+  "license": "MIT",
+  "version": "0.1.0-alpha.3",
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "javascript",
+    "editor",
+    "typescript",
+    "prosemirror",
+    "wysiwyg",
+    "rich-text-editor",
+    "notion",
+    "yjs",
+    "block-based",
+    "tiptap"
+  ],
+  "description": "A \"Notion-style\" block-based extensible text editor built on top of Prosemirror and Tiptap.",
+  "type": "module",
+  "source": "src/index.ts",
+  "types": "./types/src/index.d.ts",
+  "main": "./dist/blocknote.umd.cjs",
+  "module": "./dist/blocknote.js",
+  "exports": {
+    ".": {
+      "import": "./dist/blocknote.js",
+      "require": "./dist/blocknote.umd.cjs"
+    },
+    "./style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --max-warnings 0"
+  },
+  "dependencies": {
+    "@atlaskit/button": "^16.3.5",
+    "@atlaskit/dropdown-menu": "^11.1.2",
+    "@atlaskit/menu": "^1.3.0",
+    "@atlaskit/theme": "^12.1.4",
+    "@tippyjs/react": "^4.2.6",
+    "@tiptap/core": "^2.0.0-beta.182",
+    "@tiptap/extension-bold": "^2.0.0-beta.28",
+    "@tiptap/extension-code": "^2.0.0-beta.28",
+    "@tiptap/extension-collaboration": "^2.0.0-beta.38",
+    "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.37",
+    "@tiptap/extension-dropcursor": "^2.0.0-beta.29",
+    "@tiptap/extension-gapcursor": "^2.0.0-beta.39",
+    "@tiptap/extension-hard-break": "^2.0.0-beta.33",
+    "@tiptap/extension-history": "^2.0.0-beta.26",
+    "@tiptap/extension-horizontal-rule": "^2.0.0-beta.36",
+    "@tiptap/extension-italic": "^2.0.0-beta.28",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.26",
+    "@tiptap/extension-strike": "^2.0.0-beta.29",
+    "@tiptap/extension-text": "^2.0.0-beta.17",
+    "@tiptap/extension-underline": "^2.0.0-beta.25",
+    "@tiptap/react": "^2.0.0-beta.114",
+    "lodash": "^4.17.21",
+    "prosemirror-model": "1.18.1",
+    "prosemirror-state": "1.4.1",
+    "prosemirror-view": "1.26.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "styled-components": "^5.3.3",
+    "uuid": "^8.3.2"
+  },
+  "overrides": {
+    "react-dom": "$react-dom",
+    "react": "$react"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.179",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.12",
+    "@types/styled-components": "^5.1.24",
+    "@types/uuid": "^8.3.4",
+    "eslint": "^8.10.0",
+    "eslint-config-react-app": "^7.0.0",
+    "typescript": "^4.5.4",
+    "vite": "^3.0.5",
+    "vite-plugin-eslint": "^1.7.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "rules": {
+      "curly": 1
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "806198ea45da0806b9f71010400594fdde4bbef5"
+}

package/src/BlockNoteExtensions.ts

@@ -0,0 +1,90 @@
+import { Extensions, extensions } from "@tiptap/core";
+
+import Bold from "@tiptap/extension-bold";
+import Code from "@tiptap/extension-code";
+import DropCursor from "@tiptap/extension-dropcursor";
+import GapCursor from "@tiptap/extension-gapcursor";
+import HardBreak from "@tiptap/extension-hard-break";
+import Italic from "@tiptap/extension-italic";
+import Underline from "@tiptap/extension-underline";
+// import Placeholder from "@tiptap/extension-placeholder";
+import { Node } from "@tiptap/core";
+import { History } from "@tiptap/extension-history";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import { blocks } from "./extensions/Blocks";
+import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
+import { BubbleMenuExtension } from "./extensions/BubbleMenu/BubbleMenuExtension";
+import { DraggableBlocksExtension } from "./extensions/DraggableBlocks/DraggableBlocksExtension";
+import HyperlinkMark from "./extensions/Hyperlinks/HyperlinkMark";
+import { FixedParagraph } from "./extensions/Paragraph/FixedParagraph";
+import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
+import SlashMenuExtension from "./extensions/SlashMenu";
+import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
+import UniqueID from "./extensions/UniqueID/UniqueID";
+export const Document = Node.create({
+  name: "doc",
+  topNode: true,
+  content: "block+",
+});
+
+export const getBlockNoteExtensions = () => {
+  const ret: Extensions = [
+    extensions.ClipboardTextSerializer,
+    extensions.Commands,
+    extensions.Editable,
+    extensions.FocusEvents,
+    extensions.Tabindex,
+
+    // DevTools,
+    GapCursor,
+
+    // DropCursor,
+    Placeholder.configure({
+      emptyNodeClass: blockStyles.isEmpty,
+      hasAnchorClass: blockStyles.hasAnchor,
+      isFilterClass: blockStyles.isFilter,
+      includeChildren: true,
+      showOnlyCurrent: false,
+    }),
+    UniqueID.configure({
+      types: ["tcblock"],
+    }),
+    HardBreak,
+    // Comments,
+
+    // basics:
+    Text,
+
+    // marks:
+    Bold,
+    Code,
+    Italic,
+    Strike,
+    Underline,
+    HyperlinkMark,
+    FixedParagraph,
+    // custom blocks:
+    ...blocks,
+    DraggableBlocksExtension,
+    DropCursor.configure({ width: 5, color: "#ddeeff" }),
+    BubbleMenuExtension,
+    History,
+    SlashMenuExtension,
+    // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
+    // should be handled before Enter handlers in other components like splitListItem
+    // SlashCommandExtension.configure({
+    //     // Extra commands can be registered here
+    //     commands: {},
+    // }),
+    // MentionsExtension.configure({
+    //     providers: {
+    //         people: (query) => {
+    //             return PEOPLE.filter((mention) => mention.match(query));
+    //         },
+    //     },
+    // }),
+    TrailingNode,
+  ];
+  return ret;
+};

package/src/EditorContent.tsx

@@ -0,0 +1 @@
+export { EditorContent } from "@tiptap/react";

package/src/editor.module.css

@@ -0,0 +1,3 @@
+.bnEditor {
+  outline: none;
+}

package/src/extensions/Blocks/OrderedListPlugin.ts

@@ -0,0 +1,46 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+
+const PLUGIN_KEY = new PluginKey(`ordered-list`);
+
+export const OrderedListPlugin = () => {
+  return new Plugin({
+    key: PLUGIN_KEY,
+    appendTransaction: (_transactions, _oldState, newState) => {
+      const newTr = newState.tr;
+      let modified = false;
+      let count = 1;
+      let skip = 0;
+      newState.doc.descendants((node, pos) => {
+        if (node.type.name === "tcblock" && !node.attrs.listType) {
+          count = 1;
+        }
+        if (
+          skip === 0 &&
+          node.type.name === "tcblock" &&
+          node.attrs.listType === "oli"
+        ) {
+          skip = node.content.childCount;
+          // This assumes that the content node is always the first child of the oli block,
+          // as the content model grows this assumption may need to change
+          if (node.content.child(0).attrs.position !== `${count}.`) {
+            // TODO: @DAlperin currently sub-items just continue from the order of the parent,
+            //  sub-items should be ordered separately with letters or roman numerals or some such
+            newTr.setNodeMarkup(pos + 1, undefined, {
+              ...node.attrs,
+              position: `${count}.`,
+            });
+            modified = true;
+          }
+
+          count++;
+        } else if (skip > 0) {
+          skip--;
+        }
+      });
+      if (modified) {
+        return newTr;
+      }
+      return null;
+    },
+  });
+};

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -0,0 +1,146 @@
+import {
+  combineTransactionSteps,
+  findChildren,
+  getChangedRanges,
+} from "@tiptap/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+const PLUGIN_KEY = new PluginKey(`previous-blocks`);
+
+/**
+ * This plugin tracks transformation of Block node attributes, so we can support CSS transitions.
+ *
+ * Problem it solves: Prosemirror recreates the DOM when transactions happen. So when a transaction changes an Node attribute,
+ * it results in a completely new DOM element. This means CSS transitions don't work.
+ *
+ * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
+ */
+export const PreviousBlockTypePlugin = () => {
+  return new Plugin({
+    key: PLUGIN_KEY,
+    view(_editorView) {
+      return {
+        update: async (view, _prevState) => {
+          if (this.key?.getState(view.state).needsUpdate) {
+            // use setTimeout 0 to clear the decorations so that at least
+            // for one DOM-render the decorations have been applied
+            setTimeout(() => {
+              view.dispatch(
+                view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true })
+              );
+            }, 0);
+          }
+        },
+      };
+    },
+    state: {
+      init() {
+        return {
+          prevBlockAttrs: {} as any,
+          needsUpdate: false,
+        };
+      },
+
+      apply(transaction, prev, oldState, newState) {
+        prev.needsUpdate = false;
+        prev.prevBlockAttrs = {};
+        if (!transaction.docChanged || oldState.doc.eq(newState.doc)) {
+          return prev;
+        }
+
+        const transform = combineTransactionSteps(oldState.doc, [transaction]);
+        // const { mapping } = transform;
+        const changes = getChangedRanges(transform);
+
+        // TODO: instead of iterating through the entire document, only check nodes affected by the transactions
+        // We didn't get this to work yet:
+        // changes.forEach(({ oldRange, newRange }) => {
+        // const oldNodes = findChildrenInRange(
+        //   oldState.doc,
+        //   oldRange,
+        //   (node) => node.attrs.id
+        // );
+
+        // const newNodes = findChildrenInRange(
+        //   newState.doc,
+        //   newRange,
+        //   (node) => node.attrs.id
+        // );
+
+        changes.forEach(() => {
+          const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id);
+
+          const oldNodesById = new Map(
+            oldNodes.map((node) => [node.node.attrs.id, node])
+          );
+
+          const newNodes = findChildren(newState.doc, (node) => node.attrs.id);
+
+          for (let node of newNodes) {
+            const oldNode = oldNodesById.get(node.node.attrs.id);
+            if (oldNode) {
+              const newAttrs = {
+                listType: node.node.attrs.listType,
+                blockColor: node.node.attrs.blockColor,
+                blockStyle: node.node.attrs.blockStyle,
+                headingType: node.node.attrs.headingType,
+                depth: newState.doc.resolve(node.pos).depth,
+              };
+
+              const oldAttrs = {
+                listType: oldNode.node.attrs.listType,
+                blockColor: oldNode.node.attrs.blockColor,
+                blockStyle: oldNode.node.attrs.blockStyle,
+                headingType: oldNode.node.attrs.headingType,
+                depth: oldState.doc.resolve(oldNode.pos).depth,
+              };
+
+              if (
+                JSON.stringify(oldAttrs) !== JSON.stringify(newAttrs) // TODO: faster deep equal?
+              ) {
+                (oldAttrs as any).depthChange = oldAttrs.depth - newAttrs.depth;
+                prev.prevBlockAttrs[node.node.attrs.id] = oldAttrs;
+                prev.needsUpdate = true;
+              }
+            }
+          }
+        });
+
+        return prev;
+      },
+    },
+    props: {
+      decorations(state) {
+        const pluginState = (this as Plugin).getState(state);
+        if (!pluginState.needsUpdate) {
+          return undefined;
+        }
+
+        const decorations: Decoration[] = [];
+
+        state.doc.descendants((node, pos) => {
+          if (!node.attrs.id) {
+            return;
+          }
+          const prevAttrs = pluginState.prevBlockAttrs[node.attrs.id];
+          if (!prevAttrs) {
+            return;
+          }
+
+          const decorationAttributes: any = {};
+          for (let [key, val] of Object.entries(prevAttrs)) {
+            decorationAttributes["data-prev-" + key] = val || "none";
+          }
+          const decoration = Decoration.node(pos, pos + node.nodeSize, {
+            ...decorationAttributes,
+          });
+
+          decorations.push(decoration);
+        });
+
+        return DecorationSet.create(state.doc, decorations);
+      },
+    },
+  });
+};