use EditorView to handle side effect

packages/editor/src/services/codemirror-editor/use-codemirror-editor/use-codemirror-editor.ts

@@ -10,6 +10,7 @@ import {
   EditorState, Prec, type Extension,
 } from '@codemirror/state';
 import { keymap, EditorView } from '@codemirror/view';
+import type { Command } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 import deepmerge from 'ts-deepmerge';
@@ -34,9 +35,9 @@ import { useReplaceText, type ReplaceText } from './utils/replace-text';
 import { useSetCaretLine, type SetCaretLine } from './utils/set-caret-line';
 
 
-const onPressEnter = ({ state, dispatch }) => {
+const onPressEnter: Command = (editor) => {
   // insertNewlineContinueMarkup(state, dispatch);
-  insertNewRowToMarkdownTable(state, dispatch);
+  insertNewRowToMarkdownTable(editor);
 
   return true;
 };

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/insert-new-row-to-table-markdown.ts

@@ -1,6 +1,7 @@
-import type {
-  EditorState, Transaction,
-} from '@codemirror/state';
+// import type {
+//   Transaction,
+// } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { MarkdownTable } from '@growi/core/dist/models';
 
 // https://regex101.com/r/7BN2fR/10
@@ -8,29 +9,24 @@ const linePartOfTableRE = /^([^\r\n|]*)\|(([^\r\n|]*\|)+)$/;
 // https://regex101.com/r/1UuWBJ/3
 export const emptyLineOfTableRE = /^([^\r\n|]*)\|((\s*\|)+)$/;
 
-// type ArgType = {
-//   state: EditorState,
-//   dispatch: (transaction: Transaction) => boolean
-// }
-
-const getCurPos = (editorState: EditorState): number => {
-  return editorState.selection.main.head;
+const getCurPos = (editor: EditorView): number => {
+  return editor.state.selection.main.head;
 };
 
-const isInTable = (editorState: EditorState): boolean => {
-  const curPos = getCurPos(editorState);
-  const lineText = editorState.doc.lineAt(curPos).text;
+const isInTable = (editor: EditorView): boolean => {
+  const curPos = getCurPos(editor);
+  const lineText = editor.state.doc.lineAt(curPos).text;
   return linePartOfTableRE.test(lineText);
 };
 
-const getBot = (editorState: EditorState): number => {
-  if (!isInTable(editorState)) {
-    return getCurPos(editorState);
+const getBot = (editor: EditorView): number => {
+  if (!isInTable(editor)) {
+    return getCurPos(editor);
   }
 
-  const doc = editorState.doc;
+  const doc = editor.state.doc;
   const firstLine = 1;
-  let line = doc.lineAt(getCurPos(editorState)).number - 1;
+  let line = doc.lineAt(getCurPos(editor)).number - 1;
   for (; line >= firstLine; line--) {
     const strLine = doc.line(line).text;
     if (!linePartOfTableRE.test(strLine)) {
@@ -41,15 +37,15 @@ const getBot = (editorState: EditorState): number => {
   return doc.line(botLine).from;
 };
 
-const getEot = (editorState: EditorState): number => {
-  if (!isInTable(editorState)) {
-    return getCurPos(editorState);
+const getEot = (editor: EditorView): number => {
+  if (!isInTable(editor)) {
+    return getCurPos(editor);
   }
 
-  const doc = editorState.doc;
+  const doc = editor.state.doc;
   const lastLine = doc.lines;
 
-  let line = doc.lineAt(getCurPos(editorState)).number + 1;
+  let line = doc.lineAt(getCurPos(editor)).number + 1;
 
   for (; line <= lastLine; line++) {
     const strLine = doc.line(line).text;
@@ -63,12 +59,12 @@ const getEot = (editorState: EditorState): number => {
   return doc.line(eotLine).to;
 };
 
-const getStrFromBot = (editorState: EditorState): string => {
-  return editorState.sliceDoc(getBot(editorState), getCurPos(editorState));
+const getStrFromBot = (editor: EditorView): string => {
+  return editor.state.sliceDoc(getBot(editor), getCurPos(editor));
 };
 
-const getStrToEot = (editorState: EditorState): string => {
-  return editorState.sliceDoc(getCurPos(editorState), getEot(editorState));
+const getStrToEot = (editor: EditorView): string => {
+  return editor.state.sliceDoc(getCurPos(editor), getEot(editor));
 };
 
 const addRowToMarkdownTable = (mdtable: MarkdownTable): any => {
@@ -76,13 +72,13 @@ const addRowToMarkdownTable = (mdtable: MarkdownTable): any => {
   const newRow: string[] = new Array(numCol);
 
   newRow.fill('');
-  // (new Array(numCol)).forEach(() => { return newRow.push('') }); // create cols
+
   mdtable.table.push(newRow);
 };
 
 export const mergeMarkdownTable = (mdtableList: MarkdownTable[]): MarkdownTable => {
   let newTable: any[] = [];
-  const options = mdtableList[0].options; // use option of first markdown-table
+  const options = mdtableList[0].options;
   mdtableList.forEach((mdtable) => {
     newTable = newTable.concat(mdtable.table);
   });
@@ -90,41 +86,36 @@ export const mergeMarkdownTable = (mdtableList: MarkdownTable[]): MarkdownTable
 };
 
 export const replaceFocusedMarkdownTableWithEditor = (
-    state: EditorState, dispatch: (transaction: Transaction) => boolean, table: MarkdownTable,
+    editor: EditorView, table: MarkdownTable,
 ): void => {
-  const botPos = getBot(state);
-  const eotPos = getEot(state);
+  const botPos = getBot(editor);
+  const eotPos = getEot(editor);
 
-  const nextLine = state.doc.lineAt(getCurPos(state)).number + 1;
+  const nextLine = editor.state.doc.lineAt(getCurPos(editor)).number + 1;
 
-  const nextCurPos = state.doc.line(nextLine).from + 2;
-  // const nextCurPos = state.doc.lineAt(getCurPos(state) + 2).from + 3;
-
-  dispatch(state.update({
+  editor.dispatch({
     changes: {
       from: botPos,
       to: eotPos,
       insert: table.toString(),
     },
-    // selection: { anchor: nextCurPos },
-    // selection: { anchor: state.doc.lineAt(getCurPos(state)).to },
-  }));
+  });
 
-  // const nextCurPos = state.doc.lineAt(getCurPos(state) + 1).from + 3;
+  const nextCurPos = editor.state.doc.line(nextLine).from + 2;
 
-  // dispatch(state.update({
-  //   selection: { anchor: 10 },
-  // }));
+  editor.dispatch({
+    selection: { anchor: nextCurPos },
+  });
 };
 
-const addRow = (state: EditorState, dispatch: (transaction: Transaction) => boolean) => {
-  const strFromBot = getStrFromBot(state);
+const addRow = (editor: EditorView) => {
+  const strFromBot = getStrFromBot(editor);
 
   let table = MarkdownTable.fromMarkdownString(strFromBot);
 
   addRowToMarkdownTable(table);
 
-  const strToEot = getStrToEot(state);
+  const strToEot = getStrToEot(editor);
 
   const tableBottom = MarkdownTable.fromMarkdownString(strToEot);
 
@@ -132,76 +123,65 @@ const addRow = (state: EditorState, dispatch: (transaction: Transaction) => bool
     table = mergeMarkdownTable([table, tableBottom]);
   }
 
-  replaceFocusedMarkdownTableWithEditor(state, dispatch, table);
+  replaceFocusedMarkdownTableWithEditor(editor, table);
 };
 
-const removeRow = (state: EditorState, dispatch: (transaction: Transaction) => boolean) => {
-
-  const curPos = getCurPos(state);
+const removeRow = (editor: EditorView) => {
 
-  const curLine = state.doc.lineAt(curPos).number;
+  const curPos = getCurPos(editor);
 
-  const bolPos = state.doc.line(curLine).from;
-  const eolPos = state.doc.line(curLine).to;
+  const curLine = editor.state.doc.lineAt(curPos).number;
 
-  const insert = state.lineBreak;
+  const bolPos = editor.state.doc.line(curLine).from;
+  const eolPos = editor.state.doc.line(curLine).to;
 
-  const nextCurPos = state.doc.lineAt(getCurPos(state)).to + 1;
-  // console.log(nextCurPos);
+  const nextCurPos = editor.state.doc.lineAt(getCurPos(editor)).to + 1;
 
-  dispatch(state.update(
-    {
-      changes: {
-        from: bolPos,
-        to: eolPos,
-        insert,
-      },
-      // selection: { anchor: nextCurPos },
+  editor.dispatch({
+    changes: {
+      from: bolPos,
+      to: eolPos,
     },
-  ));
+  });
+
+  editor.dispatch({
+    selection: { anchor: nextCurPos },
+  });
 };
 
-const reformTable = (state: EditorState, dispatch: (transaction: Transaction) => boolean) => {
-  const tableStr = getStrFromBot(state) + getStrToEot(state);
+const reformTable = (editor: EditorView) => {
+  const tableStr = getStrFromBot(editor) + getStrToEot(editor);
   const table = MarkdownTable.fromMarkdownString(tableStr);
-  replaceFocusedMarkdownTableWithEditor(state, dispatch, table);
+  replaceFocusedMarkdownTableWithEditor(editor, table);
 };
 
-export const insertNewRowToMarkdownTable = (state: EditorState, dispatch: (transaction: Transaction) => boolean): void => {
+export const insertNewRowToMarkdownTable = (editor: EditorView): void => {
 
-  const curPos = getCurPos(state);
+  const curPos = getCurPos(editor);
 
-  const curLine = state.doc.lineAt(curPos).number;
+  const curLine = editor.state.doc.lineAt(curPos).number;
 
-  const bolPos = state.doc.line(curLine).from;
-  const eolPos = state.doc.line(curLine).to;
+  const bolPos = editor.state.doc.line(curLine).from;
+  const eolPos = editor.state.doc.line(curLine).to;
 
-  const strFromBol = state.sliceDoc(bolPos, curPos);
-  const strToEol = state.sliceDoc(curPos, eolPos);
+  const strFromBol = editor.state.sliceDoc(bolPos, curPos);
+  const strToEol = editor.state.sliceDoc(curPos, eolPos);
 
-  const isLastRow = getStrToEot(state) === strToEol;
+  const isLastRow = getStrToEot(editor) === strToEol;
   const isEndOfLine = curPos === eolPos;
 
-  if (isInTable(state)) {
+  if (isInTable(editor)) {
 
     if (isEndOfLine) {
-      addRow(state, dispatch);
+      addRow(editor);
     }
 
     else if (isLastRow && emptyLineOfTableRE.test(strFromBol + strToEol)) {
-      removeRow(state, dispatch);
+      removeRow(editor);
     }
 
     else {
-      reformTable(state, dispatch);
+      reformTable(editor);
     }
   }
-
-  // const nextCurPos = state.doc.lineAt(getCurPos(state) + 1).from + 3;
-
-  // console.log(nextCurPos);
-
-  // dispatch(state.update({
-  //   selection: { anchor: nextCurPos },
-  // }));
 };