feat: Selectable non-editable text in blocks without inline content

packages/core/src/api/exporters/copyExtension.ts

@@ -10,44 +10,6 @@ import { createExternalHTMLExporter } from "./html/externalHTMLExporter";
 import { createInternalHTMLSerializer } from "./html/internalHTMLSerializer";
 import { cleanHTMLToMarkdown } from "./markdown/markdownExporter";
 
-async function selectedFragmentToHTML<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema
->(
-  view: EditorView,
-  editor: BlockNoteEditor<BSchema, I, S>
-): Promise<{
-  internalHTML: string;
-  externalHTML: string;
-  plainText: string;
-}> {
-  const selectedFragment = view.state.selection.content().content;
-
-  const internalHTMLSerializer = createInternalHTMLSerializer(
-    view.state.schema,
-    editor
-  );
-  const internalHTML = internalHTMLSerializer.serializeProseMirrorFragment(
-    selectedFragment,
-    {}
-  );
-
-  await initializeESMDependencies();
-  const externalHTMLExporter = createExternalHTMLExporter(
-    view.state.schema,
-    editor
-  );
-  const externalHTML = externalHTMLExporter.exportProseMirrorFragment(
-    selectedFragment,
-    {}
-  );
-
-  const plainText = await cleanHTMLToMarkdown(externalHTML);
-
-  return { internalHTML, externalHTML, plainText };
-}
-
 const copyToClipboard = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
@@ -65,20 +27,35 @@ const copyToClipboard = <
   // the selection to the parent `blockContainer` node. This is
   // for the use-case in which only a block without content is
   // selected, e.g. an image block.
-  if (
+  const fragment =
     "node" in view.state.selection &&
     (view.state.selection.node as Node).type.spec.group === "blockContent"
-  ) {
-    editor.dispatch(
-      editor._tiptapEditor.state.tr.setSelection(
-        new NodeSelection(view.state.doc.resolve(view.state.selection.from - 1))
-      )
-    );
-  }
+      ? new NodeSelection(
+          view.state.doc.resolve(view.state.selection.from - 1)
+        ).content().content
+      : view.state.selection.content().content;
 
   (async () => {
-    const { internalHTML, externalHTML, plainText } =
-      await selectedFragmentToHTML(view, editor);
+    const internalHTMLSerializer = createInternalHTMLSerializer(
+      view.state.schema,
+      editor
+    );
+    const internalHTML = internalHTMLSerializer.serializeProseMirrorFragment(
+      fragment,
+      {}
+    );
+
+    await initializeESMDependencies();
+    const externalHTMLExporter = createExternalHTMLExporter(
+      view.state.schema,
+      editor
+    );
+    const externalHTML = externalHTMLExporter.exportProseMirrorFragment(
+      fragment,
+      {}
+    );
+
+    const plainText = cleanHTMLToMarkdown(externalHTML);
 
     // TODO: Writing to other MIME types not working in Safari for
     //  some reason.
@@ -113,49 +90,6 @@ export const createCopyToClipboardExtension = <
                 // Prevent default PM handler to be called
                 return true;
               },
-              // This is for the use-case in which only a block without content
-              // is selected, e.g. an image block, and dragged (not using the
-              // drag handle).
-              dragstart(view, event) {
-                // Checks if a `NodeSelection` is active.
-                if (!("node" in view.state.selection)) {
-                  return;
-                }
-
-                // Checks if a `blockContent` node is being dragged.
-                if (
-                  (view.state.selection.node as Node).type.spec.group !==
-                  "blockContent"
-                ) {
-                  return;
-                }
-
-                // Expands the selection to the parent `blockContainer` node.
-                editor.dispatch(
-                  editor._tiptapEditor.state.tr.setSelection(
-                    new NodeSelection(
-                      view.state.doc.resolve(view.state.selection.from - 1)
-                    )
-                  )
-                );
-
-                // Stops the default browser drag start behaviour.
-                event.preventDefault();
-                event.dataTransfer!.clearData();
-
-                (async () => {
-                  const { internalHTML, externalHTML, plainText } =
-                    await selectedFragmentToHTML(view, editor);
-
-                  // TODO: Writing to other MIME types not working in Safari for
-                  //  some reason.
-                  event.dataTransfer!.setData("blocknote/html", internalHTML);
-                  event.dataTransfer!.setData("text/html", externalHTML);
-                  event.dataTransfer!.setData("text/plain", plainText);
-                })();
-                // Prevent default PM handler to be called
-                return true;
-              },
             },
           },
         }),

packages/core/src/editor/Block.css

@@ -268,11 +268,13 @@ NESTED BLOCKS
 }
 
 [data-file-block] .bn-file-block-content-wrapper {
-  cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  user-select: none;
+}
+
+[data-file-block] .bn-visual-media-wrapper {
+  cursor: pointer;
 }
 
 [data-file-block] .bn-add-file-button {

packages/core/src/editor/BlockNoteEditor.ts

@@ -393,6 +393,7 @@ export class BlockNoteEditor<
     }
 
     const tiptapOptions: BlockNoteTipTapEditorOptions = {
+      injectCSS: false,
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
       content: initialContent,

packages/core/src/editor/BlockNoteExtensions.ts

@@ -15,6 +15,7 @@ import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
 import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
 import { createDropFileExtension } from "../api/parsers/fileDropExtension";
 import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
+import { FullySelectedNodeExtension } from "../extensions/FullySelectedNode/FullySelectedNodeExtension";
 import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
 import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";
 import { TrailingNode } from "../extensions/TrailingNode/TrailingNodeExtension";
@@ -155,6 +156,8 @@ export const getBlockNoteExtensions = <
     ...(opts.trailingBlock === undefined || opts.trailingBlock
       ? [TrailingNode]
       : []),
+
+    FullySelectedNodeExtension,
   ];
 
   if (opts.collaboration) {
@@ -197,5 +200,5 @@ export const getBlockNoteExtensions = <
   }
 
   const disableExtensions: string[] = opts.disableExtensions || [];
-  return ret.filter(ex => !disableExtensions.includes(ex.name));
+  return ret.filter((ex) => !disableExtensions.includes(ex.name));
 };

packages/core/src/editor/tiptap.css

@@ -0,0 +1,77 @@
+/* From https://github.com/ueberdosis/tiptap/blob/a170cf4057de98d0350e318c51e57e2998fac38e/packages/core/src/style.ts */
+.ProseMirror {
+    position: relative;
+}
+
+.ProseMirror {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    -webkit-font-variant-ligatures: none;
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+    white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+    white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+    white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+}
+
+.ProseMirror-gapcursor {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+    margin: 0;
+}
+
+.ProseMirror-gapcursor:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid black;
+    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+    to {
+        visibility: hidden;
+    }
+}
+
+/* Edited section to replace `.ProseMirror-hideselection` with `.ProseMirror-fullyselected */
+.ProseMirror-fullyselected *::selection {
+    background: transparent;
+}
+
+.ProseMirror-fullyselected *::-moz-selection {
+    background: transparent;
+}
+
+.ProseMirror-fullyselected * {
+    caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+    display: block;
+}
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+    opacity: 0
+}

packages/core/src/extensions/FullySelectedNode/FullySelectedNodeExtension.ts

@@ -0,0 +1,72 @@
+import { Editor, Extension } from "@tiptap/core";
+import { getBlockInfoFromPos } from "../../api/getBlockInfoFromPos";
+
+// Removes the `ProseMirror-fullyselected` class name from the editor when a
+// NodeSelection is active on a block without inline content, but the DOM
+// selection is within the node, rather than fully wrapping it. These 2
+// scenarios look identical in the editor state, so we need to check the DOM
+// selection to differentiate them.
+const onSelectionChange = (editor: Editor) => {
+  const selection = document.getSelection();
+  if (selection === null) {
+    return;
+  }
+
+  // selectionchange events don't bubble, so we have to scope them in this way
+  // instead of setting the listener on the editor element.
+  if (
+    !editor.view.dom.contains(selection.anchorNode) ||
+    !editor.view.dom.contains(selection.focusNode)
+  ) {
+    return;
+  }
+
+  // Node selection is active.
+  const isNodeSelection = "node" in editor.state.selection;
+  if (!isNodeSelection) {
+    editor.view.dom.classList.remove("ProseMirror-fullyselected");
+    return;
+  }
+
+  const blockInfo = getBlockInfoFromPos(
+    editor.state.doc,
+    editor.state.selection.from
+  );
+
+  // Selected block has no inline content.
+  const selectedNodeHasNoContent =
+    blockInfo.contentNode.type.spec.content === "";
+  if (!selectedNodeHasNoContent) {
+    editor.view.dom.classList.remove("ProseMirror-fullyselected");
+    return;
+  }
+
+  const blockElement = editor.view.domAtPos(blockInfo.startPos).node;
+
+  if (
+    // Selection doesn't wrap this node.
+    selection.type !== "Range" ||
+    selection.anchorNode !== blockElement ||
+    selection.focusNode !== blockElement ||
+    selection.anchorOffset !== 0 ||
+    selection.focusOffset !== 1
+  ) {
+    editor.view.dom.classList.remove("ProseMirror-fullyselected");
+  } else if (!editor.view.dom.classList.contains("ProseMirror-fullyselected")) {
+    editor.view.dom.classList.add("ProseMirror-fullyselected");
+  }
+};
+
+export const FullySelectedNodeExtension = Extension.create({
+  name: "fullySelectedNode",
+  onCreate() {
+    document.addEventListener("selectionchange", () => {
+      onSelectionChange(this.editor);
+    });
+  },
+  onDestroy() {
+    document.removeEventListener("selectionchange", () => {
+      onSelectionChange(this.editor);
+    });
+  },
+});

packages/core/src/index.ts

@@ -1,4 +1,5 @@
 import * as locales from "./i18n/locales";
+export * from "./api/getBlockInfoFromPos";
 export * from "./api/exporters/html/externalHTMLExporter";
 export * from "./api/exporters/html/internalHTMLSerializer";
 export * from "./api/getCurrentBlockContentType";