diff --git a/app/editor/menus/formatting.ts b/app/editor/menus/formatting.ts index 4787c23be..369506461 100644 --- a/app/editor/menus/formatting.ts +++ b/app/editor/menus/formatting.ts @@ -14,6 +14,7 @@ import { } from "outline-icons"; import { EditorState } from "prosemirror-state"; import { isInTable } from "prosemirror-tables"; +import isInCode from "@shared/editor/queries/isInCode"; import isInList from "@shared/editor/queries/isInList"; import isMarkActive from "@shared/editor/queries/isMarkActive"; import isNodeActive from "@shared/editor/queries/isNodeActive"; @@ -28,6 +29,7 @@ export default function formattingMenuItems( const { schema } = state; const isTable = isInTable(state); const isList = isInList(state); + const isCode = isInCode(state); const allowBlocks = !isTable && !isList; return [ @@ -47,19 +49,21 @@ export default function formattingMenuItems( tooltip: dictionary.strong, icon: BoldIcon, active: isMarkActive(schema.marks.strong), + visible: !isCode, }, { name: "strikethrough", tooltip: dictionary.strikethrough, icon: StrikethroughIcon, active: isMarkActive(schema.marks.strikethrough), + visible: !isCode, }, { name: "highlight", tooltip: dictionary.mark, icon: HighlightIcon, active: isMarkActive(schema.marks.highlight), - visible: !isTemplate, + visible: !isTemplate && !isCode, }, { name: "code_inline", @@ -69,7 +73,7 @@ export default function formattingMenuItems( }, { name: "separator", - visible: allowBlocks, + visible: allowBlocks && !isCode, }, { name: "heading", @@ -77,7 +81,7 @@ export default function formattingMenuItems( icon: Heading1Icon, active: isNodeActive(schema.nodes.heading, { level: 1 }), attrs: { level: 1 }, - visible: allowBlocks, + visible: allowBlocks && !isCode, }, { name: "heading", @@ -85,7 +89,7 @@ export default function formattingMenuItems( icon: Heading2Icon, active: isNodeActive(schema.nodes.heading, { level: 2 }), attrs: { level: 2 }, - visible: allowBlocks, + visible: allowBlocks && !isCode, }, { name: "blockquote", @@ -93,11 +97,11 @@ export default function formattingMenuItems( icon: BlockQuoteIcon, active: isNodeActive(schema.nodes.blockquote), attrs: { level: 2 }, - visible: allowBlocks, + visible: allowBlocks && !isCode, }, { name: "separator", - visible: allowBlocks || isList, + visible: (allowBlocks || isList) && !isCode, }, { name: "checkbox_list", @@ -105,24 +109,25 @@ export default function formattingMenuItems( icon: TodoListIcon, keywords: "checklist checkbox task", active: isNodeActive(schema.nodes.checkbox_list), - visible: allowBlocks || isList, + visible: (allowBlocks || isList) && !isCode, }, { name: "bullet_list", tooltip: dictionary.bulletList, icon: BulletedListIcon, active: isNodeActive(schema.nodes.bullet_list), - visible: allowBlocks || isList, + visible: (allowBlocks || isList) && !isCode, }, { name: "ordered_list", tooltip: dictionary.orderedList, icon: OrderedListIcon, active: isNodeActive(schema.nodes.ordered_list), - visible: allowBlocks || isList, + visible: (allowBlocks || isList) && !isCode, }, { name: "separator", + visible: !isCode, }, { name: "link", @@ -130,6 +135,7 @@ export default function formattingMenuItems( icon: LinkIcon, active: isMarkActive(schema.marks.link), attrs: { href: "" }, + visible: !isCode, }, ]; }