fix(app/block-editor): operate column block as row

Merge commits below into one:

* fix(block-editor): show slash commands
* chore: lint
* fix(block-editor): drag-menu with columns
* fix(block-editor): operation columns
* chore: ts
* fix(block-editor): columns insert selection

Author: Debbl

.npmrc

@@ -1 +1,2 @@
 public-hoist-pattern[]=*@nextui-org/*
+public-hoist-pattern[]=*@tiptap/*

src/shared/components/control/block-editor/DragHandle.tsx

@@ -79,7 +79,14 @@ function DragHandle() {
 
         const depth = $pos.depth;
         // if depth is 0, we are inserting a new block at the top level
-        const insertPos = depth === 0 ? $pos.pos + 1 : $pos.after(depth);
+        let insertPos = depth === 0 ? $pos.pos + 1 : $pos.after(depth);
+
+        const node = $pos.node();
+        if (node.type.name === 'column') {
+          const columnBlock = $pos.node(1);
+          if (columnBlock.type.name !== 'columnBlock') return false;
+          insertPos = $pos.pos + columnBlock.content.size;
+        }
 
         if (insertPos >= 0 && insertPos <= state.doc.content.size) {
           commands.insertContentAt(insertPos, editor.schema.nodes.paragraph.create());
@@ -108,8 +115,17 @@ function DragHandle() {
         const depth = $pos.depth;
 
         // if depth is 0, we are deleting the block itself
-        const start = depth === 0 ? $pos.pos : $pos.before(depth);
-        const end = depth === 0 ? $pos.pos + 1 : $pos.after(depth);
+        let start = depth === 0 ? $pos.pos : $pos.before(depth);
+        let end = depth === 0 ? $pos.pos + 1 : $pos.after(depth);
+
+        const node = $pos.node();
+        if (node.type.name === 'column') {
+          const columnBlock = $pos.node(1);
+
+          if (columnBlock.type.name !== 'columnBlock') return false;
+          start -= 1;
+          end = start + columnBlock.nodeSize;
+        }
 
         // Ensure we're not trying to delete beyond document boundaries
         if (start >= 0 && end <= state.doc.content.size && start < end) {

src/shared/components/control/block-editor/helper.js renamed to src/shared/components/control/block-editor/helper.ts

@@ -16,9 +16,9 @@
 
 import { isFunction, isPlainObject } from '../../../utils';
 
-let uploadHandler;
+let uploadHandler: any;
 
-function setUploadHandler(handler) {
+function setUploadHandler(handler: any) {
   if (!isFunction(handler)) {
     return;
   }
@@ -36,15 +36,15 @@ function getInitialBlockData() {
   return { type: 'doc', content: [] };
 }
 
-function isBlockDataValid(data) {
+function isBlockDataValid(data: any) {
   return isPlainObject(data) && data.type === 'doc' && Array.isArray(data.content);
 }
 
-function unwrapBlockData({ data }) {
+function unwrapBlockData({ data }: { data: any }) {
   return data;
 }
 
-function wrapBlockData(data) {
+function wrapBlockData(data: any) {
   return { version: BLOCK_DATA_SPEC_VERSION, data };
 }
 

src/shared/components/control/block-editor/index.js renamed to src/shared/components/control/block-editor/index.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { TextSelection } from '@tiptap/pm/state';
 import {
   CheckSquare,
   Code,
@@ -47,7 +48,22 @@ function createColumnItems() {
     description: `Create ${count} columns block.`,
     searchTerms: ['columnBlock', 'column'],
     icon: <ItemIcon size={18} />,
-    command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setColumns(count).run(),
+    command: ({ editor, range }) =>
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .setColumns(count)
+        .command(({ editor, tr, dispatch }) => {
+          if (!dispatch) return false;
+          const selection = editor.view.state.selection;
+
+          tr.setSelection(TextSelection.create(tr.doc, selection.$from.pos + 1, selection.$to.pos));
+          dispatch(tr);
+
+          return true;
+        })
+        .run(),
   }));
 }
 

src/shared/components/control/block-editor/slash.tsx

@@ -20,7 +20,7 @@ import { toast } from 'react-toastify';
 import { isFunction } from '../../../utils';
 import { getUploadHandler } from './helper';
 
-function onUpload(file) {
+function onUpload(file: File) {
   const uploadHandler = getUploadHandler();
 
   if (!isFunction(uploadHandler)) {
@@ -31,14 +31,14 @@ function onUpload(file) {
 
   return new Promise((resolve, reject) => {
     req
-      .then(res => {
+      .then((res: any) => {
         if (res.success) {
           resolve(res.data);
         } else {
           throw new Error('Error uploading image. Please try again.');
         }
       })
-      .catch(err => {
+      .catch((err: any) => {
         reject(err);
         return err.message;
       });