@blocknote/core 0.1.0-alpha.3

package/src/extensions/SlashMenu/defaultCommands.tsx

@@ -0,0 +1,229 @@
+import {
+  RiH1,
+  RiH2,
+  RiH3,
+  RiListOrdered,
+  RiListUnordered,
+  RiText,
+} from "react-icons/ri";
+import formatKeyboardShortcut from "../helpers/formatKeyboardShortcut";
+import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
+
+/**
+ * An array containing commands for creating all default blocks.
+ */
+const defaultCommands: { [key: string]: SlashMenuItem } = {
+  // Command for creating a level 1 heading
+  heading: new SlashMenuItem(
+    "Heading",
+    SlashMenuGroups.HEADINGS,
+    (editor, range) => {
+      return editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .addNewBlockAsSibling({ headingType: 1 })
+        .run();
+    },
+    ["h", "heading1", "h1"],
+    RiH1,
+    "Used for a top-level heading",
+    formatKeyboardShortcut("Mod-Alt-1")
+  ),
+
+  // Command for creating a level 2 heading
+  heading2: new SlashMenuItem(
+    "Heading 2",
+    SlashMenuGroups.HEADINGS,
+    (editor, range) => {
+      return editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .addNewBlockAsSibling({ headingType: 2 })
+        .run();
+    },
+    ["h2", "heading2", "subheading"],
+    RiH2,
+    "Used for key sections",
+    formatKeyboardShortcut("Mod-Alt-2")
+  ),
+
+  // Command for creating a level 3 heading
+  heading3: new SlashMenuItem(
+    "Heading 3",
+    SlashMenuGroups.HEADINGS,
+    (editor, range) => {
+      return editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .addNewBlockAsSibling({ headingType: 3 })
+        .run();
+    },
+    ["h3", "heading3", "subheading"],
+    RiH3,
+    "Used for subsections and group headings",
+    formatKeyboardShortcut("Mod-Alt-3")
+  ),
+
+  // Command for creating an ordered list
+  numberedList: new SlashMenuItem(
+    "Numbered List",
+    SlashMenuGroups.BASIC_BLOCKS,
+    (editor, range) => {
+      return editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .addNewBlockAsSibling({ listType: "oli" })
+        .run();
+    },
+    ["li", "list", "numberedlist", "numbered list"],
+    RiListOrdered,
+    "Used to display a numbered list",
+    formatKeyboardShortcut("Mod-Shift-7")
+  ),
+
+  // Command for creating a bullet list
+  bulletlist: new SlashMenuItem(
+    "Bullet List",
+    SlashMenuGroups.BASIC_BLOCKS,
+    (editor, range) => {
+      return editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .addNewBlockAsSibling({ listType: "li" })
+        .run();
+    },
+    ["ul", "list", "bulletlist", "bullet list"],
+    RiListUnordered,
+    "Used to display an unordered list",
+    formatKeyboardShortcut("Mod-Shift-8")
+  ),
+
+  // Command for creating a paragraph (pretty useless)
+  paragraph: new SlashMenuItem(
+    "Paragraph",
+    SlashMenuGroups.BASIC_BLOCKS,
+    (editor, range) => {
+      return editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .addNewBlockAsSibling()
+        .run();
+    },
+    ["p"],
+    RiText,
+    "Used for the body of your document",
+    formatKeyboardShortcut("Mod-Alt-0")
+  ),
+
+  //     replaceRangeWithNode(editor, range, node);
+
+  //     return true;
+  //   },
+  //   ["ol", "orderedlist"],
+  //   OrderedListIcon,
+  //   "Used to display an ordered (enumerated) list item"
+  // ),
+
+  // Command for creating a blockquote
+  // blockquote: new SlashCommand(
+  //   "Block Quote",
+  //   CommandGroup.BASIC_BLOCKS,
+  //   (editor, range) => {
+  //     const paragraph = editor.schema.node("paragraph");
+  //     const node = editor.schema.node(
+  //       "blockquote",
+  //       { "block-id": uniqueId.generate() },
+  //       paragraph
+  //     );
+
+  //     replaceRangeWithNode(editor, range, node);
+
+  //     return true;
+  //   },
+  //   ["quote", "blockquote"],
+  //   QuoteIcon,
+  //   "Used to make a quote stand out",
+  //   "Ctrl+Shift+B"
+  // ),
+
+  // Command for creating a horizontal rule
+  // horizontalRule: new SlashCommand(
+  //   "Horizontal Rule",
+  //   CommandGroup.BASIC_BLOCKS,
+  //   (editor, range) => {
+  //     const node = editor.schema.node("horizontalRule", {
+  //       "block-id": uniqueId.generate(),
+  //     });
+
+  //     // insert horizontal rule, create a new block after the horizontal rule if applicable
+  //     // and put the cursor in the block after the horizontal rule.
+  //     editor
+  //       .chain()
+  //       .focus()
+  //       .replaceRangeAndUpdateSelection(range, node)
+  //       .command(({ tr, dispatch }) => {
+  //         if (dispatch) {
+  //           // the node immediately after the cursor
+  //           const nodeAfter = tr.selection.$to.nodeAfter;
+
+  //           // the position of the cursor
+  //           const cursorPos = tr.selection.$to.pos;
+
+  //           // check if there is no node after the cursor (end of document)
+  //           if (!nodeAfter) {
+  //             // create a new block of the default type (probably paragraph) after the cursor
+  //             const { parent } = tr.selection.$to;
+  //             const node = parent.type.contentMatch.defaultType?.create();
+
+  //             if (node) {
+  //               tr.insert(cursorPos, node);
+  //             }
+  //           }
+
+  //           // try to put the cursor at the start of the node directly after the inserted horizontal rule
+  //           tr.doc.nodesBetween(cursorPos, cursorPos + 1, (node, pos) => {
+  //             if (node.type.name !== "horizontalRule") {
+  //               tr.setSelection(TextSelection.create(tr.doc, pos));
+  //             }
+  //           });
+  //         }
+
+  //         return true;
+  //       })
+  //       .scrollIntoView()
+  //       .run();
+  //     return true;
+  //   },
+  //   ["hr", "horizontalrule"],
+  //   SeparatorIcon,
+  //   "Used to separate sections with a horizontal line"
+  // ),
+
+  // Command for creating a table
+  // table: new SlashCommand(
+  //   "Table",
+  //   CommandGroup.BASIC_BLOCKS,
+  //   (editor, range) => {
+  //     editor.chain().focus().deleteRange(range).run();
+  //     // TODO: add blockid, pending https://github.com/ueberdosis/tiptap/pull/1469
+  //     editor
+  //       .chain()
+  //       .focus()
+  //       .insertTable({ rows: 1, cols: 2, withHeaderRow: false })
+  //       .scrollIntoView()
+  //       .run();
+  //     return true;
+  //   },
+  //   ["table", "database"],
+  //   TableIcon,
+  //   "Used to create a simple table"
+  // ),
+};
+
+export default defaultCommands;

package/src/extensions/SlashMenu/index.ts

@@ -0,0 +1,11 @@
+import { SlashMenuExtension } from "./SlashMenuExtension";
+import defaultCommands from "./defaultCommands";
+import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
+
+export {
+  defaultCommands,
+  SlashMenuItem as SlashCommand,
+  SlashMenuGroups as CommandGroup,
+};
+
+export default SlashMenuExtension;

package/src/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -0,0 +1,70 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+
+// based on https://github.com/ueberdosis/tiptap/blob/40a9404c94c7fef7900610c195536384781ae101/demos/src/Experiments/TrailingNode/Vue/trailing-node.ts
+
+/**
+ * Extension based on:
+ * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
+ * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
+ */
+
+export interface TrailingNodeOptions {
+  node: string;
+}
+
+export const TrailingNode = Extension.create<TrailingNodeOptions>({
+  name: "trailingNode",
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(this.name);
+    // const disabledNodes = Object.entries(this.editor.schema.nodes)
+    //   .map(([, value]) => value)
+    //   .filter((node) => this.options.notAfter.includes(node.name));
+
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state) => {
+          const { doc, tr, schema } = state;
+          const shouldInsertNodeAtEnd = plugin.getState(state);
+          const endPosition = doc.content.size - 2;
+          const type = schema.nodes["tcblock"];
+          const contenttype = schema.nodes["tccontent"];
+          if (!shouldInsertNodeAtEnd) {
+            return;
+          }
+
+          return tr.insert(
+            endPosition,
+            type.create(undefined, contenttype.create())
+          );
+        },
+        state: {
+          init: (_, _state) => {
+            // (maybe fix): use same logic as apply() here
+            // so it works when initializing
+          },
+          apply: (tr, value) => {
+            if (!tr.docChanged) {
+              return value;
+            }
+
+            let lastNode = tr.doc.lastChild;
+
+            if (!lastNode || lastNode.type.name !== "blockgroup") {
+              throw new Error("Expected blockgroup");
+            }
+
+            lastNode = lastNode.lastChild;
+
+            if (!lastNode || lastNode.type.name !== "tcblock") {
+              throw new Error("Expected tcblock");
+            }
+            return lastNode.nodeSize > 4; // empty <tcblock><tccontent/></tcblock> is length 4
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/UniqueID/UniqueID.ts

@@ -0,0 +1,281 @@
+import {
+  combineTransactionSteps,
+  Extension,
+  findChildren,
+  findChildrenInRange,
+  getChangedRanges,
+} from "@tiptap/core";
+import { Fragment, Slice } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { v4 } from "uuid";
+
+/**
+ * Code from Tiptap UniqueID extension (https://tiptap.dev/api/extensions/unique-id)
+ * This extension is licensed under MIT (even though it's part of Tiptap pro).
+ *
+ * If you're a user of BlockNote, we still recommend to support their awesome work and become a sponsor!
+ * https://tiptap.dev/pro
+ */
+
+/**
+ * Removes duplicated values within an array.
+ * Supports numbers, strings and objects.
+ */
+function removeDuplicates(array: any, by = JSON.stringify) {
+  const seen: any = {};
+  return array.filter((item: any) => {
+    const key = by(item);
+    return Object.prototype.hasOwnProperty.call(seen, key)
+      ? false
+      : (seen[key] = true);
+  });
+}
+
+/**
+ * Returns a list of duplicated items within an array.
+ */
+function findDuplicates(items: any) {
+  const filtered = items.filter(
+    (el: any, index: number) => items.indexOf(el) !== index
+  );
+  const duplicates = removeDuplicates(filtered);
+  return duplicates;
+}
+
+const UniqueID = Extension.create({
+  name: "uniqueID",
+  // we’ll set a very high priority to make sure this runs first
+  // and is compatible with `appendTransaction` hooks of other extensions
+  priority: 10000,
+  addOptions() {
+    return {
+      attributeName: "id",
+      types: [],
+      generateID: () => v4(),
+      filterTransaction: null,
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          [this.options.attributeName]: {
+            default: null,
+            parseHTML: (element) =>
+              element.getAttribute(`data-${this.options.attributeName}`),
+            renderHTML: (attributes) => {
+              if (!attributes[this.options.attributeName]) {
+                return {};
+              }
+              return {
+                [`data-${this.options.attributeName}`]:
+                  attributes[this.options.attributeName],
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+  // check initial content for missing ids
+  onCreate() {
+    // Don’t do this when the collaboration extension is active
+    // because this may update the content, so Y.js tries to merge these changes.
+    // This leads to empty block nodes.
+    // See: https://github.com/ueberdosis/tiptap/issues/2400
+    if (
+      this.editor.extensionManager.extensions.find(
+        (extension) => extension.name === "collaboration"
+      )
+    ) {
+      return;
+    }
+    const { view, state } = this.editor;
+    const { tr, doc } = state;
+    const { types, attributeName, generateID } = this.options;
+    const nodesWithoutId = findChildren(doc, (node) => {
+      return (
+        types.includes(node.type.name) && node.attrs[attributeName] === null
+      );
+    });
+    nodesWithoutId.forEach(({ node, pos }) => {
+      tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        [attributeName]: generateID(),
+      });
+    });
+    tr.setMeta("addToHistory", false);
+    view.dispatch(tr);
+  },
+  addProseMirrorPlugins() {
+    let dragSourceElement: any = null;
+    let transformPasted = false;
+    return [
+      new Plugin({
+        key: new PluginKey("uniqueID"),
+        appendTransaction: (transactions, oldState, newState) => {
+          console.log("appendTransaction");
+          const docChanges =
+            transactions.some((transaction) => transaction.docChanged) &&
+            !oldState.doc.eq(newState.doc);
+          const filterTransactions =
+            this.options.filterTransaction &&
+            transactions.some((tr) => {
+              var _a, _b;
+              return !((_b = (_a = this.options).filterTransaction) === null ||
+              _b === void 0
+                ? void 0
+                : _b.call(_a, tr));
+            });
+          if (!docChanges || filterTransactions) {
+            return;
+          }
+          const { tr } = newState;
+          const { types, attributeName, generateID } = this.options;
+          const transform = combineTransactionSteps(
+            oldState.doc,
+            transactions as any
+          );
+          const { mapping } = transform;
+          // get changed ranges based on the old state
+          const changes = getChangedRanges(transform);
+
+          changes.forEach(({ newRange }) => {
+            const newNodes = findChildrenInRange(
+              newState.doc,
+              newRange,
+              (node) => {
+                return types.includes(node.type.name);
+              }
+            );
+            const newIds = newNodes
+              .map(({ node }) => node.attrs[attributeName])
+              .filter((id) => id !== null);
+            const duplicatedNewIds = findDuplicates(newIds);
+            newNodes.forEach(({ node, pos }) => {
+              var _a;
+              // instead of checking `node.attrs[attributeName]` directly
+              // we look at the current state of the node within `tr.doc`.
+              // this helps to prevent adding new ids to the same node
+              // if the node changed multiple times within one transaction
+              const id =
+                (_a = tr.doc.nodeAt(pos)) === null || _a === void 0
+                  ? void 0
+                  : _a.attrs[attributeName];
+              if (id === null) {
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  [attributeName]: generateID(),
+                });
+                return;
+              }
+              // check if the node doesn’t exist in the old state
+              const { deleted } = mapping.invert().mapResult(pos);
+              const newNode = deleted && duplicatedNewIds.includes(id);
+              if (newNode) {
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  [attributeName]: generateID(),
+                });
+              }
+            });
+          });
+          if (!tr.steps.length) {
+            return;
+          }
+          return tr;
+        },
+        // we register a global drag handler to track the current drag source element
+        view(view) {
+          const handleDragstart = (event: any) => {
+            var _a;
+            dragSourceElement = (
+              (_a = view.dom.parentElement) === null || _a === void 0
+                ? void 0
+                : _a.contains(event.target)
+            )
+              ? view.dom.parentElement
+              : null;
+          };
+          window.addEventListener("dragstart", handleDragstart);
+          return {
+            destroy() {
+              window.removeEventListener("dragstart", handleDragstart);
+            },
+          };
+        },
+        props: {
+          // `handleDOMEvents` is called before `transformPasted`
+          // so we can do some checks before
+          handleDOMEvents: {
+            // only create new ids for dropped content while holding `alt`
+            // or content is dragged from another editor
+            drop: (view, event: any) => {
+              var _a;
+              if (
+                dragSourceElement !== view.dom.parentElement ||
+                ((_a = event.dataTransfer) === null || _a === void 0
+                  ? void 0
+                  : _a.effectAllowed) === "copy"
+              ) {
+                dragSourceElement = null;
+                transformPasted = true;
+              }
+              return false;
+            },
+            // always create new ids on pasted content
+            paste: () => {
+              transformPasted = true;
+              return false;
+            },
+          },
+          // we’ll remove ids for every pasted node
+          // so we can create a new one within `appendTransaction`
+          transformPasted: (slice) => {
+            if (!transformPasted) {
+              return slice;
+            }
+            const { types, attributeName } = this.options;
+            const removeId = (fragment: any) => {
+              const list: any[] = [];
+              fragment.forEach((node: any) => {
+                // don’t touch text nodes
+                if (node.isText) {
+                  list.push(node);
+                  return;
+                }
+                // check for any other child nodes
+                if (!types.includes(node.type.name)) {
+                  list.push(node.copy(removeId(node.content)));
+                  return;
+                }
+                // remove id
+                const nodeWithoutId = node.type.create(
+                  {
+                    ...node.attrs,
+                    [attributeName]: null,
+                  },
+                  removeId(node.content),
+                  node.marks
+                );
+                list.push(nodeWithoutId);
+              });
+              return Fragment.from(list);
+            };
+            // reset check
+            transformPasted = false;
+            return new Slice(
+              removeId(slice.content),
+              slice.openStart,
+              slice.openEnd
+            );
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export { UniqueID, UniqueID as default };
+//# sourceMappingURL=tiptap-extension-unique-id.esm.js.map

package/src/extensions/helpers/formatKeyboardShortcut.ts

@@ -0,0 +1,9 @@
+import browser from "../../lib/atlaskit/browser";
+
+export default function formatKeyboardShortcut(shortcut: string) {
+  if (browser.ios || browser.mac) {
+    return shortcut.replace("Mod", "⌘");
+  } else {
+    return shortcut.replace("Mod", "Ctrl");
+  }
+}

package/src/fonts-inter.css

@@ -0,0 +1,94 @@
+/* Generated using https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin */
+
+/* inter-100 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-100.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-200 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-200.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-300 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-300.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-regular - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-regular.woff2")
+      format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-regular.woff")
+      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-500 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-500.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-600.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-700 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-700.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-800 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-800.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-900 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  src: local(""),
+    url("./assets/inter-v12-latin/inter-v12-latin-900.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./assets/inter-v12-latin/inter-v12-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}