diff --git a/app/editor/components/Styles.ts b/app/editor/components/Styles.ts index 4f4f37558..115de376e 100644 --- a/app/editor/components/Styles.ts +++ b/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; } } diff --git a/shared/editor/nodes/CodeFence.ts b/shared/editor/nodes/CodeFence.ts index 140662c58..3b8b6e0fb 100644 --- a/shared/editor/nodes/CodeFence.ts +++ b/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]], ]; }, diff --git a/shared/editor/nodes/Notice.tsx b/shared/editor/nodes/Notice.tsx index 14273aeb0..42040eb0f 100644 --- a/shared/editor/nodes/Notice.tsx +++ b/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], ]; },