@blocknote/core 0.37.0 → 0.39.0

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -1,159 +0,0 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import {
-  BlockFromConfig,
-  createBlockSpec,
-  FileBlockConfig,
-  Props,
-  PropSchema,
-} from "../../schema/index.js";
-import { defaultProps } from "../defaultProps.js";
-import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
-import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
-import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
-import { createResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
-import { parseVideoElement } from "./parseVideoElement.js";
-
-export const FILE_VIDEO_ICON_SVG =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
-
-export const videoPropSchema = {
-  textAlignment: defaultProps.textAlignment,
-  backgroundColor: defaultProps.backgroundColor,
-  // File name.
-  name: {
-    default: "" as const,
-  },
-  // File url.
-  url: {
-    default: "" as const,
-  },
-  // File caption.
-  caption: {
-    default: "" as const,
-  },
-
-  showPreview: {
-    default: true,
-  },
-  // File preview width in px.
-  previewWidth: {
-    default: undefined,
-    type: "number",
-  },
-} satisfies PropSchema;
-
-export const videoBlockConfig = {
-  type: "video" as const,
-  propSchema: videoPropSchema,
-  content: "none",
-  isFileBlock: true,
-  fileBlockAccept: ["video/*"],
-} satisfies FileBlockConfig;
-
-export const videoRender = (
-  block: BlockFromConfig<typeof videoBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>,
-) => {
-  const icon = document.createElement("div");
-  icon.innerHTML = FILE_VIDEO_ICON_SVG;
-
-  const videoWrapper = document.createElement("div");
-  videoWrapper.className = "bn-visual-media-wrapper";
-
-  const video = document.createElement("video");
-  video.className = "bn-visual-media";
-  if (editor.resolveFileUrl) {
-    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-      video.src = downloadUrl;
-    });
-  } else {
-    video.src = block.props.url;
-  }
-  video.controls = true;
-  video.contentEditable = "false";
-  video.draggable = false;
-  video.width = block.props.previewWidth;
-  videoWrapper.appendChild(video);
-
-  return createResizableFileBlockWrapper(
-    block,
-    editor,
-    { dom: videoWrapper },
-    videoWrapper,
-    editor.dictionary.file_blocks.video.add_button_text,
-    icon.firstElementChild as HTMLElement,
-  );
-};
-
-export const videoParse = (
-  element: HTMLElement,
-): Partial<Props<typeof videoBlockConfig.propSchema>> | undefined => {
-  if (element.tagName === "VIDEO") {
-    // Ignore if parent figure has already been parsed.
-    if (element.closest("figure")) {
-      return undefined;
-    }
-
-    return parseVideoElement(element as HTMLVideoElement);
-  }
-
-  if (element.tagName === "FIGURE") {
-    const parsedFigure = parseFigureElement(element, "video");
-    if (!parsedFigure) {
-      return undefined;
-    }
-
-    const { targetElement, caption } = parsedFigure;
-
-    return {
-      ...parseVideoElement(targetElement as HTMLVideoElement),
-      caption,
-    };
-  }
-
-  return undefined;
-};
-
-export const videoToExternalHTML = (
-  block: BlockFromConfig<typeof videoBlockConfig, any, any>,
-) => {
-  if (!block.props.url) {
-    const div = document.createElement("p");
-    div.textContent = "Add video";
-
-    return {
-      dom: div,
-    };
-  }
-
-  let video;
-  if (block.props.showPreview) {
-    video = document.createElement("video");
-    video.src = block.props.url;
-    if (block.props.previewWidth) {
-      video.width = block.props.previewWidth;
-    }
-  } else {
-    video = document.createElement("a");
-    video.href = block.props.url;
-    video.textContent = block.props.name || block.props.url;
-  }
-
-  if (block.props.caption) {
-    if (block.props.showPreview) {
-      return createFigureWithCaption(video, block.props.caption);
-    } else {
-      return createLinkWithCaption(video, block.props.caption);
-    }
-  }
-
-  return {
-    dom: video,
-  };
-};
-
-export const VideoBlock = createBlockSpec(videoBlockConfig, {
-  render: videoRender,
-  parse: videoParse,
-  toExternalHTML: videoToExternalHTML,
-});

package/src/editor/BlockNoteSchema.ts

@@ -1,107 +0,0 @@
-import {
-  defaultBlockSpecs,
-  defaultInlineContentSpecs,
-  defaultStyleSpecs,
-} from "../blocks/defaultBlocks.js";
-import type {
-  BlockNoDefaults,
-  PartialBlockNoDefaults,
-} from "../schema/blocks/types.js";
-import {
-  BlockSchema,
-  BlockSchemaFromSpecs,
-  BlockSpecs,
-  InlineContentSchema,
-  InlineContentSchemaFromSpecs,
-  InlineContentSpecs,
-  StyleSchema,
-  StyleSchemaFromSpecs,
-  StyleSpecs,
-  getBlockSchemaFromSpecs,
-  getInlineContentSchemaFromSpecs,
-  getStyleSchemaFromSpecs,
-} from "../schema/index.js";
-import type { BlockNoteEditor } from "./BlockNoteEditor.js";
-
-function removeUndefined<T extends Record<string, any> | undefined>(obj: T): T {
-  if (!obj) {
-    return obj;
-  }
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== undefined),
-  ) as T;
-}
-
-export class BlockNoteSchema<
-  BSchema extends BlockSchema,
-  ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema,
-> {
-  public readonly blockSpecs: BlockSpecs;
-  public readonly inlineContentSpecs: InlineContentSpecs;
-  public readonly styleSpecs: StyleSpecs;
-
-  public readonly blockSchema: BSchema;
-  public readonly inlineContentSchema: ISchema;
-  public readonly styleSchema: SSchema;
-
-  // Helper so that you can use typeof schema.BlockNoteEditor
-  public readonly BlockNoteEditor: BlockNoteEditor<BSchema, ISchema, SSchema> =
-    "only for types" as any;
-
-  public readonly Block: BlockNoDefaults<BSchema, ISchema, SSchema> =
-    "only for types" as any;
-
-  public readonly PartialBlock: PartialBlockNoDefaults<
-    BSchema,
-    ISchema,
-    SSchema
-  > = "only for types" as any;
-
-  public static create<
-    BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
-    ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
-    SSpecs extends StyleSpecs = typeof defaultStyleSpecs,
-  >(options?: {
-    /**
-     * A list of custom block types that should be available in the editor.
-     */
-    blockSpecs?: BSpecs;
-    /**
-     * A list of custom InlineContent types that should be available in the editor.
-     */
-    inlineContentSpecs?: ISpecs;
-    /**
-     * A list of custom Styles that should be available in the editor.
-     */
-    styleSpecs?: SSpecs;
-  }) {
-    return new BlockNoteSchema<
-      BlockSchemaFromSpecs<BSpecs>,
-      InlineContentSchemaFromSpecs<ISpecs>,
-      StyleSchemaFromSpecs<SSpecs>
-    >(options);
-    // as BlockNoteSchema<
-    // BlockSchemaFromSpecs<BSpecs>,
-    // InlineContentSchemaFromSpecs<ISpecs>,
-    // StyleSchemaFromSpecs<SSpecs>
-    // >;
-  }
-
-  constructor(opts?: {
-    blockSpecs?: BlockSpecs;
-    inlineContentSpecs?: InlineContentSpecs;
-    styleSpecs?: StyleSpecs;
-  }) {
-    this.blockSpecs = removeUndefined(opts?.blockSpecs) || defaultBlockSpecs;
-    this.inlineContentSpecs =
-      removeUndefined(opts?.inlineContentSpecs) || defaultInlineContentSpecs;
-    this.styleSpecs = removeUndefined(opts?.styleSpecs) || defaultStyleSpecs;
-
-    this.blockSchema = getBlockSchemaFromSpecs(this.blockSpecs) as any;
-    this.inlineContentSchema = getInlineContentSchemaFromSpecs(
-      this.inlineContentSpecs,
-    ) as any;
-    this.styleSchema = getStyleSchemaFromSpecs(this.styleSpecs) as any;
-  }
-}

package/src/editor/BlockNoteTipTapEditor.ts

@@ -1,335 +0,0 @@
-import {
-  Editor,
-  EditorOptions,
-  Editor as TiptapEditor,
-  createDocument,
-} from "@tiptap/core";
-
-import { Node } from "@tiptap/pm/model";
-
-import { EditorView } from "@tiptap/pm/view";
-
-import { EditorState, Transaction } from "@tiptap/pm/state";
-import { blockToNode } from "../api/nodeConversions/blockToNode.js";
-import { PartialBlock } from "../blocks/defaultBlocks.js";
-import { StyleSchema } from "../schema/index.js";
-import type { BlockNoteEditor } from "./BlockNoteEditor.js";
-
-export type BlockNoteTipTapEditorOptions = Partial<
-  Omit<EditorOptions, "content">
-> & {
-  content: PartialBlock<any, any, any>[];
-};
-
-/**
- * Custom Editor class that extends TiptapEditor and separates
- * the creation of the view from the constructor.
- */
-export class BlockNoteTipTapEditor extends TiptapEditor {
-  private _state: EditorState;
-
-  public static create = (
-    options: BlockNoteTipTapEditorOptions,
-    styleSchema: StyleSchema,
-  ) => {
-    // because we separate the constructor from the creation of the view,
-    // we need to patch setTimeout to prevent this code from having any effect:
-    // https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117
-    const oldSetTimeout = globalThis?.window?.setTimeout;
-    if (typeof globalThis?.window?.setTimeout !== "undefined") {
-      globalThis.window.setTimeout = (() => {
-        return 0;
-      }) as any;
-    }
-    try {
-      return new BlockNoteTipTapEditor(options, styleSchema);
-    } finally {
-      if (oldSetTimeout) {
-        globalThis.window.setTimeout = oldSetTimeout;
-      }
-    }
-  };
-
-  protected constructor(
-    options: BlockNoteTipTapEditorOptions,
-    styleSchema: StyleSchema,
-  ) {
-    // possible fix for next.js server side rendering
-    // const d = globalThis.document;
-    // const w = globalThis.window;
-    // if (!globalThis.document) {
-    //   globalThis.document = {
-    //     createElement: () => {},
-    //   };
-    // }
-
-    // options.injectCSS = false
-
-    super({ ...options, content: undefined });
-    // try {
-    //   globalThis.window = w;
-    //   } catch(e) {}
-    //   try {
-    //     globalThis.document = d;
-    //     } catch(e) {}
-
-    // This is a hack to make "initial content detection" by y-prosemirror (and also tiptap isEmpty)
-    // properly detect whether or not the document has changed.
-    // We change the doc.createAndFill function to make sure the initial block id is set, instead of null
-    const schema = this.schema;
-    let cache: any;
-    const oldCreateAndFill = schema.nodes.doc.createAndFill;
-    (schema.nodes.doc as any).createAndFill = (...args: any) => {
-      if (cache) {
-        return cache;
-      }
-      const ret = oldCreateAndFill.apply(schema.nodes.doc, args);
-
-      // create a copy that we can mutate (otherwise, assigning attrs is not safe and corrupts the pm state)
-      const jsonNode = JSON.parse(JSON.stringify(ret!.toJSON()));
-      jsonNode.content[0].content[0].attrs.id = "initialBlockId";
-
-      cache = Node.fromJSON(schema, jsonNode);
-      return cache;
-    };
-
-    let doc: Node;
-
-    try {
-      const pmNodes = options?.content.map((b) =>
-        blockToNode(b, this.schema, styleSchema).toJSON(),
-      );
-      doc = createDocument(
-        {
-          type: "doc",
-          content: [
-            {
-              type: "blockGroup",
-              content: pmNodes,
-            },
-          ],
-        },
-        this.schema,
-        this.options.parseOptions,
-      );
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(
-        "Error creating document from blocks passed as `initialContent`. Caused by exception: ",
-        e,
-      );
-      throw new Error(
-        "Error creating document from blocks passed as `initialContent`:\n" +
-          +JSON.stringify(options.content),
-      );
-    }
-
-    // Create state immediately, so that it's available independently from the View,
-    // the way Prosemirror "intends it to be". This also makes sure that we can access
-    // the state before the view is created / mounted.
-    this._state = EditorState.create({
-      doc,
-      schema: this.schema,
-      // selection: selection || undefined,
-    });
-  }
-
-  get state() {
-    if (this.view) {
-      this._state = this.view.state;
-    }
-    return this._state;
-  }
-
-  dispatch(transaction: Transaction) {
-    if (!this.view) {
-      // before view has been initialized
-      this._state = this.state.apply(transaction);
-      this.emit("transaction", {
-        editor: this,
-        transaction,
-      });
-      return;
-    }
-    // This is a verbatim copy of the default dispatch method, but with the following changes:
-    // - We provide the appendedTransactions to a new `v3-update` event
-    // In the future, we can remove this dispatch method entirely and rely on the new `update` event signature which does what we want by providing the appendedTransactions
-    ////////////////////////////////////////////////////////////////////////////////
-    // if the editor / the view of the editor was destroyed
-    // the transaction should not be dispatched as there is no view anymore.
-    if (this.view.isDestroyed) {
-      return;
-    }
-
-    if (this.isCapturingTransaction) {
-      // Do the default capture behavior
-      (this as any).dispatchTransaction(transaction);
-
-      return;
-    }
-
-    const { state, transactions: appendedTransactions } =
-      this.state.applyTransaction(transaction);
-    const selectionHasChanged = !this.state.selection.eq(state.selection);
-
-    this.emit("beforeTransaction", {
-      editor: this,
-      transaction,
-      nextState: state,
-    });
-    this.view.updateState(state);
-    this.emit("transaction", {
-      editor: this,
-      transaction,
-    });
-
-    if (selectionHasChanged) {
-      this.emit("selectionUpdate", {
-        editor: this,
-        transaction,
-      });
-    }
-
-    const focus = transaction.getMeta("focus");
-    const blur = transaction.getMeta("blur");
-
-    if (focus) {
-      this.emit("focus", {
-        editor: this,
-        event: focus.event,
-        transaction,
-      });
-    }
-
-    if (blur) {
-      this.emit("blur", {
-        editor: this,
-        event: blur.event,
-        transaction,
-      });
-    }
-
-    if (!transaction.docChanged || transaction.getMeta("preventUpdate")) {
-      return;
-    }
-
-    this.emit("update", {
-      editor: this,
-      transaction,
-    });
-    this.emit("v3-update", {
-      editor: this,
-      transaction,
-      appendedTransactions: appendedTransactions.slice(1),
-    });
-  }
-
-  // a helper method that can enable plugins before the view has been initialized
-  // currently only used for testing
-  forceEnablePlugins() {
-    if (this.view) {
-      throw new Error(
-        "forcePluginsEnabled called after view has been initialized",
-      );
-    }
-    this._state = this.state.reconfigure({
-      plugins: this.extensionManager.plugins,
-    });
-  }
-
-  /**
-   * Replace the default `createView` method with a custom one - which we call on mount
-   */
-  private createViewAlternative(
-    blockNoteEditor: BlockNoteEditor<any, any, any>,
-    contentComponent?: any,
-  ) {
-    (this as any).contentComponent = contentComponent;
-
-    const markViews: any = {};
-    this.extensionManager.extensions.forEach((extension) => {
-      if (extension.type === "mark" && extension.config.addMarkView) {
-        // Note: migrate to using `addMarkView` from tiptap as soon as this lands
-        // (currently tiptap doesn't support markviews)
-        markViews[extension.name] =
-          extension.config.addMarkView(blockNoteEditor);
-      }
-    });
-
-    this.view = new EditorView(
-      { mount: this.options.element as any }, // use mount option so that we reuse the existing element instead of creating a new one
-      {
-        ...this.options.editorProps,
-        // @ts-ignore
-        dispatchTransaction: this.dispatch.bind(this),
-        state: this.state,
-        markViews,
-        nodeViews: this.extensionManager.nodeViews,
-      },
-    );
-
-    // `editor.view` is not yet available at this time.
-    // Therefore we will add all plugins directly afterwards.
-    //
-    // To research: this is the default tiptap behavior, but might actually not be necessary
-    // it feels like it's a workaround for plugins that don't account for the view not being available yet
-    const newState = this.state.reconfigure({
-      plugins: this.extensionManager.plugins,
-    });
-
-    this.view.updateState(newState);
-
-    // emit the created event, call here manually because we blocked the default call in the constructor
-    // (https://github.com/ueberdosis/tiptap/blob/45bac803283446795ad1b03f43d3746fa54a68ff/packages/core/src/Editor.ts#L117)
-    this.commands.focus(
-      this.options.autofocus ||
-        this.options.element.getAttribute("data-bn-autofocus") === "true",
-      { scrollIntoView: false },
-    );
-    this.emit("create", { editor: this });
-    this.isInitialized = true;
-  }
-
-  /**
-   * Mounts / unmounts the editor to a dom element
-   *
-   * @param element DOM element to mount to, ur null / undefined to destroy
-   */
-  public mount = (
-    blockNoteEditor: BlockNoteEditor<any, any, any>,
-    element?: HTMLElement | null,
-    contentComponent?: any,
-  ) => {
-    if (!element) {
-      this.destroy();
-      this.isInitialized = false;
-    } else {
-      this.options.element = element;
-      this.createViewAlternative(blockNoteEditor, contentComponent);
-    }
-  };
-}
-
-(BlockNoteTipTapEditor.prototype as any).createView = function () {
-  // no-op
-  // Disable default call to `createView` in the Editor constructor.
-  // We should call `createView` manually only when a DOM element is available
-
-  // additional fix because onPaste and onDrop depend on installing plugins in constructor which we don't support
-  // (note: can probably be removed after tiptap upgrade fixed in 2.8.0)
-  this.options.onPaste = this.options.onDrop = undefined;
-};
-
-declare module "@tiptap/core" {
-  interface EditorEvents {
-    /**
-     * This is a custom event that will be emitted in Tiptap V3.
-     * We use it to provide the appendedTransactions, until Tiptap V3 is released.
-     */
-    "v3-update": {
-      editor: Editor;
-      transaction: Transaction;
-      appendedTransactions: Transaction[];
-    };
-  }
-}

package/src/util/esmDependencies.ts

@@ -1,51 +0,0 @@
-// some dependencies only export as ESM modules. This makes them incompatible with Node CJS.
-// To work around this, we load these dependencies as dynamic imports in a function that initializes them.
-
-// (to reproduce this issue, run ts-node on a file that users server-util)
-export let esmDependencies:
-  | undefined
-  | {
-      rehypeParse: typeof import("rehype-parse");
-      rehypeStringify: typeof import("rehype-stringify");
-      unified: typeof import("unified");
-      hastUtilFromDom: typeof import("hast-util-from-dom");
-      rehypeRemark: typeof import("rehype-remark");
-      remarkGfm: typeof import("remark-gfm");
-      remarkStringify: typeof import("remark-stringify");
-      remarkParse: typeof import("remark-parse");
-      remarkRehype: typeof import("remark-rehype");
-      rehypeFormat: typeof import("rehype-format");
-    };
-
-export async function initializeESMDependencies() {
-  if (esmDependencies) {
-    return esmDependencies;
-  }
-  const vals = await Promise.all([
-    import("rehype-parse"),
-    import("rehype-stringify"),
-    import("unified"),
-    import("hast-util-from-dom"),
-    import("rehype-remark"),
-    import("remark-gfm"),
-    import("remark-stringify"),
-    import("remark-parse"),
-    import("remark-rehype"),
-    import("rehype-format"),
-  ]);
-
-  esmDependencies = {
-    rehypeParse: vals[0],
-    rehypeStringify: vals[1],
-    unified: vals[2],
-    hastUtilFromDom: vals[3],
-    rehypeRemark: vals[4],
-    remarkGfm: vals[5],
-    remarkStringify: vals[6],
-    remarkParse: vals[7],
-    remarkRehype: vals[8],
-    rehypeFormat: vals[9],
-  };
-
-  return esmDependencies;
-}