Merge branch 'main' into link-toolbar-error-fix

Author: matthewlipski

examples/05-interoperability/05-converting-blocks-to-pdf/README.md

@@ -1 +1,5 @@
 # Exporting documents to PDF
+
+This example exports the current document (all blocks) as an PDF file and downloads it to your computer.
+
+**Try it out:** Edit the document and click "Download .pdf" in top-left corner, to download the PDF file.

examples/05-interoperability/06-converting-blocks-to-docx/README.md

@@ -1 +1,5 @@
 # Exporting documents to .docx (Office Open XML)
+
+This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.
+
+**Try it out:** Edit the document and click "Download .docx" in top-left corner, to download the DOCX file.

examples/05-interoperability/07-converting-blocks-to-odt/tsconfig.json

@@ -15,7 +15,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

nx.json

@@ -11,7 +11,7 @@
     "build": {
       "cache": true,
       "dependsOn": ["^build"],
-      "outputs": ["{projectRoot}/dist"]
+      "outputs": ["{projectRoot}/dist", "{projectRoot}/types"]
     },
     "test": {
       "cache": true,

package.json

@@ -25,7 +25,7 @@
     "start:built": "npx serve playground/dist -c ../serve.json",
     "build:clean": "npm run clean && npm run gen && npm run clean && lerna run --stream build",
     "build": "lerna run --stream build",
-    "build:site": "lerna run --stream docs:build --concurrency 1",
+    "build:site": "npm run gen && lerna run --stream docs:build --concurrency 1",
     "lint": "lerna run --stream lint",
     "bootstrap": "lerna bootstrap --ci -- --force && patch-package",
     "install-new-packages": "lerna bootstrap -- --force && patch-package",

packages/react/src/editor/BlockNoteView.tsx

@@ -163,7 +163,6 @@ function BlockNoteViewComponent<
     className,
     editorColorScheme,
     contentEditableProps,
-    ref,
     ...rest,
   };
 
@@ -176,7 +175,7 @@ function BlockNoteViewComponent<
         }}>
         <ElementRenderer ref={setElementRenderer} />
         {renderEditor ? (
-          <BlockNoteViewEditor>{children}</BlockNoteViewEditor>
+          <BlockNoteViewEditor ref={ref}>{children}</BlockNoteViewEditor>
         ) : (
           children
         )}
@@ -199,73 +198,82 @@ export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as <
 /**
  * Renders the editor itself and the default UI elements
  */
-export const BlockNoteViewEditor = (props: { children: ReactNode }) => {
-  const ctx = useBlockNoteViewContext()!;
-  const editor = useBlockNoteEditor();
+export const BlockNoteViewEditor = React.forwardRef(
+  (props: { children: ReactNode }, ref: React.Ref<HTMLDivElement>) => {
+    const ctx = useBlockNoteViewContext()!;
+    const editor = useBlockNoteEditor();
 
-  const portalManager = useMemo(() => {
-    return getContentComponent();
-  }, []);
+    const portalManager = useMemo(() => {
+      return getContentComponent();
+    }, []);
 
-  const mount = useCallback(
-    (element: HTMLElement | null) => {
-      editor.mount(element, portalManager);
-    },
-    [editor, portalManager]
-  );
+    const mount = useCallback(
+      (element: HTMLElement | null) => {
+        editor.mount(element, portalManager);
+      },
+      [editor, portalManager]
+    );
 
-  return (
-    <>
-      <Portals contentComponent={portalManager} />
-      <EditorElement {...ctx.editorProps} {...props} mount={mount}>
-        {/* Renders the UI elements such as formatting toolbar, etc, unless they have been explicitly disabled  in defaultUIProps */}
-        <BlockNoteDefaultUI {...ctx.defaultUIProps} />
-        {/* Manually passed in children, such as customized UI elements / controllers */}
-        {props.children}
-      </EditorElement>
-    </>
-  );
-};
+    return (
+      <>
+        <Portals contentComponent={portalManager} />
+        <EditorElement {...ctx.editorProps} {...props} mount={mount} ref={ref}>
+          {/* Renders the UI elements such as formatting toolbar, etc, unless they have been explicitly disabled  in defaultUIProps */}
+          <BlockNoteDefaultUI {...ctx.defaultUIProps} />
+          {/* Manually passed in children, such as customized UI elements / controllers */}
+          {props.children}
+        </EditorElement>
+      </>
+    );
+  }
+);
 
 /**
  * Renders the container div + contentEditable div.
  */
-const EditorElement = (
-  props: {
-    className?: string;
-    editorColorScheme?: string;
-    autoFocus?: boolean;
-    mount: (element: HTMLElement | null) => void;
-    contentEditableProps?: Record<string, any>;
-    children: ReactNode;
-    ref?: React.Ref<HTMLDivElement>;
-  } & HTMLAttributes<HTMLDivElement>
-) => {
-  const {
-    className,
-    editorColorScheme,
-    autoFocus,
-    mount,
-    children,
-    contentEditableProps,
-    ...rest
-  } = props;
-  return (
-    // The container wraps the contentEditable div and UI Elements such as sidebar, formatting toolbar, etc.
-    <div
-      className={mergeCSSClasses("bn-container", editorColorScheme, className)}
-      data-color-scheme={editorColorScheme}
-      {...rest}>
-      {/* The actual contentEditable that Prosemirror mounts to */}
+const EditorElement = React.forwardRef(
+  (
+    props: {
+      className?: string;
+      editorColorScheme?: string;
+      autoFocus?: boolean;
+      mount: (element: HTMLElement | null) => void;
+      contentEditableProps?: Record<string, any>;
+      children: ReactNode;
+    } & HTMLAttributes<HTMLDivElement>,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const {
+      className,
+      editorColorScheme,
+      autoFocus,
+      mount,
+      children,
+      contentEditableProps,
+      ...rest
+    } = props;
+    return (
+      // The container wraps the contentEditable div and UI Elements such as sidebar, formatting toolbar, etc.
       <div
-        aria-autocomplete="list"
-        aria-haspopup="listbox"
-        data-bn-autofocus={autoFocus}
-        ref={mount}
-        {...contentEditableProps}
-      />
-      {/* The UI elements such as sidebar, formatting toolbar, etc. */}
-      {children}
-    </div>
-  );
-};
+        className={mergeCSSClasses(
+          "bn-container",
+          editorColorScheme,
+          className
+        )}
+        data-color-scheme={editorColorScheme}
+        {...rest}
+        ref={ref}>
+        {/* The actual contentEditable that Prosemirror mounts to */}
+        <div
+          aria-autocomplete="list"
+          aria-haspopup="listbox"
+          data-bn-autofocus={autoFocus}
+          ref={mount}
+          {...contentEditableProps}
+        />
+        {/* The UI elements such as sidebar, formatting toolbar, etc. */}
+        {children}
+      </div>
+    );
+  }
+);