fix: cannot exit table in wysiwyg (#2250)

* fix: add exitTable command to exit table in wysiwyg * chore: add test case(table keymap) * chore: remove only keyword in test
nhn · Feb 8, 2022 · 9ecc097 · 9ecc097
1 parent c689091
commit 9ecc097
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 2 deletions.
diff --git a/apps/editor/src/__test__/unit/wysiwyg/keymap.spec.ts b/apps/editor/src/__test__/unit/wysiwyg/keymap.spec.ts
@@ -309,6 +309,35 @@ describe('keymap', () => {
 
       expect(wwe.getHTML()).toBe(expected);
     });
+
+    describe('exitTable keymap', () => {
+      it('should exit the table node and add paragraph', () => {
+        wwe.setSelection(5, 5); // in 'foo' cell
+
+        forceKeymapFn('table', 'exitTable');
+
+        const expected = oneLineTrim`
+          <table>
+            <thead>
+              <tr>
+                <th><p>foo</p></th>
+                <th><p>bar</p></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><p>baz</p></td>
+                <td><p>qux</p></td>
+              </tr>
+            </tbody>
+          </table>
+          <p><br></p>
+        `;
+
+        expect(wwe.getHTML()).toBe(expected);
+        expect(wwe.getSelection()).toEqual([39, 39]); // in added paragraph
+      });
+    });
   });
 
   describe('table with list and multiple lines', () => {

diff --git a/apps/editor/src/wysiwyg/command/table.ts b/apps/editor/src/wysiwyg/command/table.ts
@@ -151,10 +151,15 @@ export function addParagraphBeforeTable(tr: Transaction, map: TableOffsetMap, sc
   return tr.setSelection(Selection.near(tableStartPos, -1));
 }
 
-export function addParagraphAfterTable(tr: Transaction, map: TableOffsetMap, schema: Schema) {
+export function addParagraphAfterTable(
+  tr: Transaction,
+  map: TableOffsetMap,
+  schema: Schema,
+  forcedAddtion = false
+) {
   const tableEndPos = tr.doc.resolve(map.tableEndOffset);
 
-  if (!tableEndPos.nodeAfter) {
+  if (forcedAddtion || !tableEndPos.nodeAfter) {
     return addParagraph(tr, tableEndPos, schema);
   }
   return tr.setSelection(Selection.near(tableEndPos, 1));

diff --git a/apps/editor/src/wysiwyg/nodes/table.ts b/apps/editor/src/wysiwyg/nodes/table.ts
@@ -420,6 +420,30 @@ export class Table extends NodeSchema {
     };
   }
 
+  private exitTable(): Command {
+    return (state, dispatch) => {
+      const { selection, tr, schema } = state;
+      const { $from } = selection;
+      const cell = findNodeBy(
+        $from,
+        ({ type }) => type.name === 'tableHeadCell' || type.name === 'tableBodyCell'
+      );
+
+      if (cell) {
+        const para = findNodeBy($from, ({ type }) => type.name === 'paragraph');
+
+        if (para) {
+          const { anchor } = getResolvedSelection(selection);
+          const map = TableOffsetMap.create(anchor)!;
+
+          dispatch!(addParagraphAfterTable(tr, map, schema, true));
+          return true;
+        }
+      }
+      return false;
+    };
+  }
+
   commands() {
     return {
       addTable: this.addTable(),
@@ -451,6 +475,8 @@ export class Table extends NodeSchema {
       'Mod-Backspace': deleteCellContent,
       Delete: deleteCellContent,
       'Mod-Delete': deleteCellContent,
+
+      'Mod-Enter': this.exitTable(),
     };
   }
 }