@springmicro/rte 0.1.3

package/src/slate/utils/table.js

@@ -0,0 +1,131 @@
+import { Transforms, Editor, Range, Element, Path } from "slate"
+
+export class TableUtil {
+  constructor(editor) {
+    this.editor = editor
+  }
+
+  insertTable = (rows, columns) => {
+    const [tableNode] = Editor.nodes(this.editor, {
+      match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+      mode: "highest",
+    })
+
+    if (tableNode) return
+    if (!rows || !columns) {
+      return
+    }
+    //Creating a 2-d array of blank string as default text for the table
+    const cellText = Array.from({ length: rows }, () => Array.from({ length: columns }, () => ""))
+    const newTable = createTableNode(cellText, rows, columns)
+
+    Transforms.insertNodes(this.editor, newTable, {
+      mode: "highest",
+    })
+    Transforms.insertNodes(
+      this.editor,
+      { type: "p", children: [{ text: "" }] },
+      { mode: "highest" }
+    )
+  }
+
+  removeTable = () => {
+    Transforms.removeNodes(this.editor, {
+      match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+      // mode:'highest'
+    })
+  }
+
+  insertRow = (action) => {
+    const { selection } = this.editor
+
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row",
+      })
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+        })
+        const [, currentRow] = tableNode
+
+        const path = action === "after" ? Path.next(currentRow) : currentRow
+
+        Transforms.insertNodes(this.editor, createRow(Array(table.columns).fill("")), {
+          at: path,
+        })
+        Transforms.setNodes(
+          this.editor,
+          { rows: table.rows + 1 },
+          {
+            at: tablePath,
+          }
+        )
+      }
+    }
+  }
+
+  insertColumn = (action) => {
+    const { selection } = this.editor
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell",
+      })
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table",
+        })
+        const [, currentCell] = tableNode
+        const startPath = action === "after" ? Path.next(currentCell) : currentCell
+
+        // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
+        startPath[startPath.length - 2] = 0
+        for (let row = 0; row < table.rows; row++) {
+          Transforms.insertNodes(this.editor, createTableCell(""), {
+            at: startPath,
+          })
+          startPath[startPath.length - 2]++
+        }
+
+        Transforms.setNodes(
+          this.editor,
+          { columns: table.columns + 1 },
+          {
+            at: tablePath,
+          }
+        )
+      }
+    }
+  }
+}
+
+const createRow = (cellText) => {
+  const newRow = Array.from(cellText, (value) => createTableCell(value))
+  return {
+    type: "table-row",
+    children: newRow,
+  }
+}
+
+export const createTableCell = (text) => {
+  return {
+    type: "table-cell",
+    children: [
+      {
+        type: "p",
+        children: [{ text }],
+      },
+    ],
+  }
+}
+
+const createTableNode = (cellText, rows, columns) => {
+  const tableChildren = Array.from(cellText, (value) => createRow(value))
+  let tableNode = {
+    type: "table",
+    children: tableChildren,
+    rows,
+    columns,
+  }
+  return tableNode
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@mui/material": ["../../node_modules/@mui/material"],
+      "@springmicro/utils": ["../../node_modules/@springmicro/utils"],
+      "react": ["../../node_modules/react"],
+      "react-dom": ["../../node_modules/react-dom"],
+      "react-icons": ["../../node_modules/react-icons"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["src/main.tsx", "**/*.stories.tsx"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,41 @@
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [react(), dts({ rollupTypes: true })],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.tsx"),
+      name: "@springmicro/rte",
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: [
+        "react",
+        "react-dom",
+        "react-icons",
+        "@mui/material",
+        "@springmicro/utils",
+      ],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "React-dom",
+          "react-icons": "React-icons",
+          "@mui/material": "MuiMaterial",
+          "@springmicro/utils": "SpringMicroUtils",
+        },
+        // manualChunks(id: string) {
+        //   if (id.includes("domhandler")) {
+        //     return "domhandler";
+        //   }
+        //   if (id.includes("escape-html")) {
+        //     return "escape-html";
+        //   }
+        // },
+      },
+    },
+  },
+});