fix: Ensure copy code button appears in collab editing (#3021)

* fix: Ensure copy code button appears in collab editing

* fix: code actions should not flip in RTL doc (code is always left aligned)

app/editor/components/Styles.ts

@@ -690,6 +690,21 @@ const EditorStyles = styled.div<{
     }
   }
 
+  .code-actions,
+  .notice-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: absolute;
+    z-index: 1;
+    top: 8px;
+    right: 8px;
+  }
+
+  .notice-actions {
+    ${(props) => (props.rtl ? "left" : "right")}: 8px;
+  }
+
   .code-block,
   .notice-block {
     position: relative;
@@ -701,25 +716,9 @@ const EditorStyles = styled.div<{
       border-width: 1px;
       font-size: 13px;
       display: none;
-      position: absolute;
       border-radius: 4px;
-      padding: 2px;
-      z-index: 1;
-      top: 4px;
-    }
-
-    &.code-block {
-      select,
-      button {
-        right: 4px;
-      }
-    }
-
-    &.notice-block {
-      select,
-      button {
-        ${(props) => (props.rtl ? "left" : "right")}: 4px;
-      }
+      padding: 2px 4px;
+      height: 18px;
     }
 
     button {
@@ -732,12 +731,14 @@ const EditorStyles = styled.div<{
       }
 
       button {
-        display: ${(props) => (props.readOnly ? "inline" : "none")};
+        display: inline;
       }
     }
 
     select:focus,
-    select:active {
+    select:active,
+    button:focus,
+    button:active {
       display: inline;
     }
   }

shared/editor/nodes/CodeFence.ts

@@ -111,6 +111,11 @@ export default class CodeFence extends Node {
         const select = document.createElement("select");
         select.addEventListener("change", this.handleLanguageChange);
 
+        const actions = document.createElement("div");
+        actions.className = "code-actions";
+        actions.appendChild(select);
+        actions.appendChild(button);
+
         this.languageOptions.forEach(([key, label]) => {
           const option = document.createElement("option");
           const value = key === "none" ? "" : key;
@@ -123,7 +128,7 @@ export default class CodeFence extends Node {
         return [
           "div",
           { class: "code-block", "data-language": node.attrs.language },
-          ["div", { contentEditable: "false" }, select, button],
+          ["div", { contentEditable: "false" }, actions],
           ["pre", ["code", { spellCheck: "false" }, 0]],
         ];
       },

shared/editor/nodes/Notice.tsx

@@ -63,6 +63,10 @@ export default class Notice extends Node {
           select.appendChild(option);
         });
 
+        const actions = document.createElement("div");
+        actions.className = "notice-actions";
+        actions.appendChild(select);
+
         let component;
 
         if (node.attrs.style === "tip") {
@@ -81,7 +85,7 @@ export default class Notice extends Node {
           "div",
           { class: `notice-block ${node.attrs.style}` },
           icon,
-          ["div", { contentEditable: "false" }, select],
+          ["div", { contentEditable: "false" }, actions],
           ["div", { class: "content" }, 0],
         ];
       },