Added OK button to popup & fixed overflow behavior

Author: matthewlipski

packages/core/src/blocks/Code/helpers/render/createSourceBlockWithPreview.ts

@@ -103,6 +103,25 @@ export const createSourceBlockWithPreview = (
   sourceBlockPopup.className = "bn-source-block-popup";
   sourceBlockPopup.appendChild(sourceBlock.dom);
 
+  // Wrapper with an "OK" button that closes the popup.
+  const okButtonWrapper = document.createElement("div");
+  okButtonWrapper.className = "bn-code-block-source-popup-ok-button-wrapper";
+  okButtonWrapper.contentEditable = "false";
+
+  const okButton = document.createElement("button");
+  okButton.className = "bn-code-block-source-popup-ok-button";
+  okButton.textContent = "OK";
+  okButtonWrapper.appendChild(okButton);
+
+  // Lays the source code and the "OK" button out side by side, with the button
+  // to the right of the `pre` element.
+  const pre = sourceBlock.contentDOM.parentElement!;
+  const sourcePopupBody = document.createElement("div");
+  sourcePopupBody.className = "bn-code-block-source-popup-body";
+  sourceBlockPopup.insertBefore(sourcePopupBody, pre);
+  sourcePopupBody.appendChild(pre);
+  sourcePopupBody.appendChild(okButtonWrapper);
+
   const errorMessage = "error" in preview && preview.error ? preview.error : "";
 
   const sourceError = document.createElement("div");
@@ -129,7 +148,7 @@ export const createSourceBlockWithPreview = (
   const unsubscribeFromStore = store?.subscribe(updateFromStore);
 
   // Opens the popup when clicking the preview.
-  const handleMouseDown = (event: MouseEvent) => {
+  const handlePreviewMouseDown = (event: MouseEvent) => {
     if (!editor.isEditable) {
       return;
     }
@@ -142,7 +161,16 @@ export const createSourceBlockWithPreview = (
     editor.setTextCursorPosition(block.id, "end");
     editor.focus();
   };
-  previewContainer.addEventListener("mousedown", handleMouseDown);
+  previewContainer.addEventListener("mousedown", handlePreviewMouseDown);
+
+  // Closes the popup when clicking the "OK" button.
+  const handleOkButtonMouseDown = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    store?.setState((state) => ({ ...state, popupOpen: undefined }));
+  };
+  okButton.addEventListener("mousedown", handleOkButtonMouseDown);
 
   return {
     dom: previewWithSourcePopup,
@@ -194,7 +222,8 @@ export const createSourceBlockWithPreview = (
     destroy: () => {
       sourceBlock.destroy();
       unsubscribeFromStore?.();
-      previewContainer.removeEventListener("mousedown", handleMouseDown);
+      previewContainer.removeEventListener("mousedown", handlePreviewMouseDown);
+      okButton.removeEventListener("mousedown", handleOkButtonMouseDown);
     },
   };
 };

packages/core/src/editor/Block.css

@@ -485,6 +485,7 @@ NESTED BLOCKS
   padding: 12px;
   min-height: 1.5em;
   cursor: text;
+  overflow: auto;
 }
 
 .bn-source-block-popup {
@@ -498,7 +499,9 @@ NESTED BLOCKS
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
   box-shadow: var(--bn-shadow-medium);
+  max-height: 200px;
   opacity: 0;
+  overflow: auto;
   pointer-events: none;
 }
 
@@ -532,11 +535,17 @@ NESTED BLOCKS
   color: black;
 }
 
-.bn-source-block-popup > pre {
+.bn-code-block-source-popup-body {
+  display: flex;
+  align-items: flex-end;
+}
+
+.bn-code-block-source-popup-body > pre {
   white-space: pre;
   overflow-x: auto;
   margin: 0;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   tab-size: 2;
   padding: 16px;
 }
@@ -549,6 +558,29 @@ NESTED BLOCKS
   white-space: pre-wrap;
 }
 
+.bn-code-block-source-popup-ok-button-wrapper {
+  align-items: flex-end;
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 16px;
+}
+
+.bn-code-block-source-popup-ok-button {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  background-color: rgb(37, 99, 235);
+  color: white;
+  font-size: 0.8em;
+  font-weight: 500;
+  border-radius: var(--bn-border-radius-small);
+  padding: 4px 8px;
+}
+
+.bn-editor[contenteditable="true"] .bn-code-block-source-popup-ok-button:hover {
+  background-color: rgb(29, 78, 216);
+}
+
 .bn-add-source-code-button {
   align-items: center;
   background-color: rgb(242, 241, 238);
@@ -587,6 +619,10 @@ NESTED BLOCKS
 /* INLINE MATH PREVIEW */
 /* Shares the block-preview markup/classes; these rules override the
    block-preview defaults that don't suit inline use. */
+.bn-inline-content-section .bn-preview-with-source-popup {
+  display: inline-block;
+}
+
 .bn-inline-content-section .bn-preview-container {
   padding: 0;
   min-height: 0;
@@ -598,7 +634,7 @@ NESTED BLOCKS
 }
 
 /* Keeps the popup from collapsing to a sliver while the source is empty. */
-.bn-inline-content-section .bn-source-block-popup > pre {
+.bn-inline-content-section .bn-code-block-source-popup-body > pre {
   min-height: 1.5em;
   box-sizing: content-box;
 }

packages/math-block/src/block/react/render/MathBlockPreviewWithPopup.tsx

@@ -31,7 +31,7 @@ export const MathBlockPreviewWithPopup = (
   const { mathMLString, error } = useLatexToMathMLString(source);
 
   // Opens the popup when clicking the preview.
-  const handleMouseDown = (event: MouseEvent) => {
+  const handlePreviewMouseDown = (event: MouseEvent) => {
     if (!editor.isEditable) {
       return;
     }
@@ -45,6 +45,14 @@ export const MathBlockPreviewWithPopup = (
     editor.focus();
   };
 
+  // Closes the popup when clicking the "OK" button.
+  const handleOkButtonMouseDown = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    store.setState((state) => ({ ...state, popupOpen: undefined }));
+  };
+
   return (
     <div
       className={
@@ -56,7 +64,7 @@ export const MathBlockPreviewWithPopup = (
       <div
         className="bn-preview-container"
         contentEditable={false}
-        onMouseDown={handleMouseDown}
+        onMouseDown={handlePreviewMouseDown}
       >
         {source.length > 0 ? (
           <span dangerouslySetInnerHTML={{ __html: mathMLString }} />
@@ -67,9 +75,22 @@ export const MathBlockPreviewWithPopup = (
         )}
       </div>
       <div className="bn-source-block-popup">
-        <pre>
-          <code ref={contentRef} />
-        </pre>
+        <div className="bn-code-block-source-popup-body">
+          <pre>
+            <code ref={contentRef} />
+          </pre>
+          <div
+            className="bn-code-block-source-popup-ok-button-wrapper"
+            contentEditable={false}
+          >
+            <button
+              className="bn-code-block-source-popup-ok-button"
+              onMouseDown={handleOkButtonMouseDown}
+            >
+              OK
+            </button>
+          </div>
+        </div>
         <div
           className="bn-code-block-source-error"
           contentEditable={false}

…nder/createMathBlockPreviewWithPopup.tsx …ender/createMathBlockPreviewWithPopup.tspackages/math-block/src/block/vanilla/render/createMathBlockPreviewWithPopup.tsx renamed to packages/math-block/src/block/vanilla/render/createMathBlockPreviewWithPopup.ts packages/math-block/src/block/vanilla/render/createMathBlockPreviewWithPopup.tsx renamed to packages/math-block/src/block/vanilla/render/createMathBlockPreviewWithPopup.ts

@@ -37,7 +37,7 @@ export const MathInlinePreviewWithPopup = (
   const { mathMLString, error } = useLatexToMathMLString(source, true);
 
   // Opens the popup when clicking the preview.
-  const handleMouseDown = (event: MouseEvent) => {
+  const handlePreviewMouseDown = (event: MouseEvent) => {
     if (!editor.isEditable || !pos) {
       return;
     }
@@ -56,6 +56,24 @@ export const MathInlinePreviewWithPopup = (
     editor.focus();
   };
 
+  // Closes the popup by moving the selection to just after the inline content.
+  const handleOkButtonMouseDown = (event: MouseEvent) => {
+    if (!editor.isEditable || !pos) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const view = editor.prosemirrorView!;
+    view.dispatch(
+      view.state.tr.setSelection(
+        TextSelection.create(view.state.tr.doc, pos + node.nodeSize),
+      ),
+    );
+    editor.focus();
+  };
+
   return (
     <span
       // The source is hidden, so highlight the whole inline content while the
@@ -69,7 +87,7 @@ export const MathInlinePreviewWithPopup = (
       <span
         className="bn-preview-container"
         contentEditable={false}
-        onMouseDown={handleMouseDown}
+        onMouseDown={handlePreviewMouseDown}
       >
         {source.length > 0 ? (
           <span dangerouslySetInnerHTML={{ __html: mathMLString }} />
@@ -80,9 +98,22 @@ export const MathInlinePreviewWithPopup = (
         )}
       </span>
       <div className="bn-source-block-popup">
-        <pre>
-          <code ref={contentRef} />
-        </pre>
+        <div className="bn-code-block-source-popup-body">
+          <pre>
+            <code ref={contentRef} />
+          </pre>
+          <div
+            className="bn-code-block-source-popup-ok-button-wrapper"
+            contentEditable={false}
+          >
+            <button
+              className="bn-code-block-source-popup-ok-button"
+              onMouseDown={handleOkButtonMouseDown}
+            >
+              OK
+            </button>
+          </div>
+        </div>
         <div
           className="bn-code-block-source-error"
           contentEditable={false}