diff --git a/shared/editor/commands/toggleBlockType.ts b/shared/editor/commands/toggleBlockType.ts index 2fd4d4b9c..50af07e5e 100644 --- a/shared/editor/commands/toggleBlockType.ts +++ b/shared/editor/commands/toggleBlockType.ts @@ -3,6 +3,13 @@ import { NodeType } from "prosemirror-model"; import { Command } from "prosemirror-state"; import isNodeActive from "../queries/isNodeActive"; +/** + * Toggles the block type of the current selection between the given type and the toggle type. + * + * @param type The node type + * @param toggleType The toggle node type + * @returns A prosemirror command. + */ export default function toggleBlockType( type: NodeType, toggleType: NodeType, diff --git a/shared/editor/commands/toggleCheckboxItem.ts b/shared/editor/commands/toggleCheckboxItem.ts new file mode 100644 index 000000000..74ce909c1 --- /dev/null +++ b/shared/editor/commands/toggleCheckboxItem.ts @@ -0,0 +1,34 @@ +import { Command } from "prosemirror-state"; +import { findParentNode } from "@shared/editor/queries/findParentNode"; + +/** + * A prosemirror command to toggle the checkbox item at the current selection. + * + * @returns A prosemirror command. + */ +export default function toggleCheckboxItem(): Command { + return (state, dispatch) => { + const { empty } = state.selection; + + // if the selection has anything in it then use standard behavior + if (!empty) { + return false; + } + + // check we're in a matching node + const listItem = findParentNode( + (node) => node.type === state.schema.nodes.checkbox_item + )(state.selection); + + if (!listItem) { + return false; + } + + dispatch?.( + state.tr.setNodeMarkup(listItem.pos, undefined, { + checked: !listItem.node.attrs.checked, + }) + ); + return true; + }; +} diff --git a/shared/editor/nodes/CheckboxItem.ts b/shared/editor/nodes/CheckboxItem.ts index 0a947ca76..bf743eeef 100644 --- a/shared/editor/nodes/CheckboxItem.ts +++ b/shared/editor/nodes/CheckboxItem.ts @@ -5,6 +5,7 @@ import { sinkListItem, liftListItem, } from "prosemirror-schema-list"; +import toggleCheckboxItem from "../commands/toggleCheckboxItem"; import { MarkdownSerializerState } from "../lib/markdown/serializer"; import checkboxRule from "../rules/checkboxes"; import Node from "./Node"; @@ -93,6 +94,7 @@ export default class CheckboxItem extends Node { checked: false, }), Tab: sinkListItem(type), + "Mod-Enter": toggleCheckboxItem(), "Shift-Tab": liftListItem(type), "Mod-]": sinkListItem(type), "Mod-[": liftListItem(type), diff --git a/shared/editor/nodes/index.ts b/shared/editor/nodes/index.ts index 797c5f99b..68daefe47 100644 --- a/shared/editor/nodes/index.ts +++ b/shared/editor/nodes/index.ts @@ -83,7 +83,7 @@ export const basicExtensions: Nodes = [ * editors that need advanced formatting. */ export const richExtensions: Nodes = [ - ...basicExtensions.filter((n) => n !== SimpleImage), + ...basicExtensions.filter((n) => n !== SimpleImage && n !== Keys), Image, HardBreak, CodeBlock, @@ -109,6 +109,7 @@ export const richExtensions: Nodes = [ Math, MathBlock, PreventTab, + Keys, ]; /** diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index 07671e2e1..a3fb56f09 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/shared/i18n/locales/en_US/translation.json @@ -211,7 +211,6 @@ "Choose icon": "Choose icon", "Loading": "Loading", "Select a color": "Select a color", - "Loading editor": "Loading editor", "Search": "Search", "Default access": "Default access", "View and edit": "View and edit",