fix: improvements for checkbox behavior (#87)

Author: smsochneg

src/extensions/yfm/Checkbox/CheckboxSpecs/spec.ts

@@ -30,13 +30,16 @@ export const getSpec = (
             id: {default: null},
             checked: {default: null},
         },
+        toDOM(node) {
+            return ['div', node.attrs];
+        },
         selectable: false,
         allowSelection: false,
         complex: 'leaf',
     },
 
     [CheckboxNode.Label]: {
-        content: 'text*',
+        content: 'inline*',
         group: 'block',
         parseDOM: [
             {

src/extensions/yfm/Checkbox/CheckboxSpecs/toYfm.ts

@@ -13,12 +13,16 @@ export const toYfm: Record<CheckboxNode, SerializerNodeToken> = {
         state.write(`[${checked ? 'X' : ' '}] `);
     },
 
-    [CheckboxNode.Label]: (state, node) => {
-        if (!node.content.size || node.textContent.trim().length === 0) {
+    [CheckboxNode.Label]: (state, node, _, idx) => {
+        if ((!node.content.size || node.textContent.trim().length === 0) && idx !== 0) {
             state.write(getPlaceholderContent(node));
             return;
         }
 
+        if (!idx) {
+            state.write('[ ] ');
+        }
+
         state.renderInline(node);
     },
 };

src/extensions/yfm/Checkbox/index.scss

@@ -2,8 +2,6 @@
     display: flex;
     align-items: center;
 
-    margin-bottom: 15px;
-
     &__label {
         display: inline-block;
     }

src/extensions/yfm/Checkbox/index.ts

@@ -67,7 +67,7 @@ export const Checkbox: ExtensionAuto<CheckboxOptions> = (builder, opts) => {
     });
 
     builder
-        .addPlugin(keymapPlugin)
+        .addPlugin(keymapPlugin, builder.Priority.High)
         .addAction(checkboxAction, () => addCheckbox())
         .addInputRules(({schema}) => ({
             rules: [

src/extensions/yfm/Checkbox/plugin.test.ts

@@ -35,7 +35,7 @@ describe('checkbox', () => {
 
             state.selection = new TextSelection(state.doc.resolve(7));
 
-            const {res, tr} = applyCommand(state, splitCheckbox);
+            const {res, tr} = applyCommand(state, splitCheckbox());
 
             expect(res).toBe(true);
             expect(tr.doc).toMatchNode(
@@ -54,7 +54,7 @@ describe('checkbox', () => {
 
             state.selection = new TextSelection(state.doc.resolve(10));
 
-            const {res, tr} = applyCommand(state, splitCheckbox);
+            const {res, tr} = applyCommand(state, splitCheckbox());
 
             expect(res).toBe(true);
             expect(tr.doc).toMatchNode(
@@ -73,10 +73,26 @@ describe('checkbox', () => {
 
             state.selection = new TextSelection(state.doc.resolve(3));
 
-            const {res, tr} = applyCommand(state, splitCheckbox);
+            const {res, tr} = applyCommand(state, splitCheckbox());
 
             expect(res).toBe(true);
             expect(tr.doc).toMatchNode(doc(p()));
         });
+
+        it('should create new paragraph when argument is true', () => {
+            const state = EditorState.create({
+                schema,
+                doc: doc(checkbox(checkboxInput(), checkboxLabel('text123'))),
+            });
+
+            state.selection = new TextSelection(state.doc.resolve(7));
+
+            const {res, tr} = applyCommand(state, splitCheckbox(true));
+
+            expect(res).toBe(true);
+            expect(tr.doc).toMatchNode(
+                doc(checkbox(checkboxInput(), checkboxLabel('text')), p('123')),
+            );
+        });
     });
 });

src/extensions/yfm/Checkbox/plugin.ts

@@ -2,66 +2,76 @@ import {keymap} from 'prosemirror-keymap';
 import {Fragment} from 'prosemirror-model';
 import {Command, TextSelection} from 'prosemirror-state';
 import {findParentNodeOfType} from 'prosemirror-utils';
+import {isWholeSelection} from '../../../utils/selection';
 import {pType} from '../../base/BaseSchema';
 import {checkboxInputType, checkboxLabelType, checkboxType} from './utils';
 
-export const splitCheckbox: Command = (state, dispatch) => {
-    const {$from, $to} = state.selection;
-    const {schema} = state;
-    const label = findParentNodeOfType(checkboxLabelType(schema))(state.selection);
+export const splitCheckbox: (replaceWithParagraph?: boolean) => Command =
+    (replaceWithParagraph) => (state, dispatch) => {
+        const {$from, $to} = state.selection;
+        const {schema} = state;
+        const label = findParentNodeOfType(checkboxLabelType(schema))(state.selection);
 
-    if (!label) return false;
+        if (!label) return false;
 
-    const checkbox = findParentNodeOfType(checkboxType(schema))(state.selection);
+        const checkbox = findParentNodeOfType(checkboxType(schema))(state.selection);
 
-    if (label.node.content.size === 0 && checkbox) {
-        dispatch?.(
-            state.tr
-                .replaceWith(
-                    checkbox.pos,
-                    checkbox.pos + checkbox.node.nodeSize,
-                    pType(schema).create(),
-                )
-                .scrollIntoView(),
-        );
+        if (label.node.content.size === 0 && checkbox) {
+            dispatch?.(
+                state.tr
+                    .replaceWith(
+                        checkbox.pos,
+                        checkbox.pos + checkbox.node.nodeSize,
+                        pType(schema).create(),
+                    )
+                    .scrollIntoView(),
+            );
 
-        return true;
-    }
+            return true;
+        }
 
-    if ($from.pos === $to.pos) {
-        const {tr} = state;
+        if ($from.pos === $to.pos) {
+            const {tr} = state;
 
-        const node = checkboxType(schema).create({}, [
-            checkboxInputType(schema).create(),
-            checkboxLabelType(schema).create(
-                {},
-                Fragment.from($from.parent.cut($from.parentOffset).content),
-            ),
-        ]);
+            const content = Fragment.from($from.parent.cut($from.parentOffset).content);
 
-        tr.insert($from.after(), [node]);
+            const node = replaceWithParagraph
+                ? pType(state.schema).create({}, content)
+                : checkboxType(schema).create({}, [
+                      checkboxInputType(schema).create(),
+                      checkboxLabelType(schema).create({}, content),
+                  ]);
 
-        tr.replace(label.start + $from.parentOffset, label.pos + label.node.nodeSize);
-        tr.setSelection(new TextSelection(tr.doc.resolve(tr.selection.$from.after() + 4)));
-        dispatch?.(tr);
+            tr.insert($from.after(), [node]);
 
-        return true;
-    }
+            tr.replace(label.start + $from.parentOffset, label.pos + label.node.nodeSize);
+            tr.setSelection(
+                new TextSelection(
+                    tr.doc.resolve(tr.selection.$from.after() + (replaceWithParagraph ? 2 : 4)),
+                ),
+            );
+            dispatch?.(tr);
 
-    return false;
-};
+            return true;
+        }
+
+        return false;
+    };
 
 const removeCheckbox: Command = (state, dispatch) => {
     const label = findParentNodeOfType(checkboxLabelType(state.schema))(state.selection);
     const checkbox = findParentNodeOfType(checkboxType(state.schema))(state.selection);
 
+    const {selection} = state;
+    const {from, to} = selection;
+
     if (!label || !checkbox) {
         return false;
     }
 
-    const idx = state.selection.from - label.pos - 2;
+    const idx = from - label.pos - 2;
 
-    if (idx < 0) {
+    if (idx < 0 && from === to && !isWholeSelection(selection)) {
         const {tr} = state;
         dispatch?.(
             tr
@@ -80,6 +90,7 @@ const removeCheckbox: Command = (state, dispatch) => {
 
 export const keymapPlugin = () =>
     keymap({
-        Enter: splitCheckbox,
+        Enter: splitCheckbox(),
         Backspace: removeCheckbox,
+        'Shift-Enter': splitCheckbox(true),
     });