merge v1.2.0-dev

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Marker",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite --port 3000",
     "build": "tsc && vite build",
@@ -30,6 +30,10 @@
     "@tiptap/extension-ordered-list": "^2.0.3",
     "@tiptap/extension-paragraph": "^2.0.3",
     "@tiptap/extension-placeholder": "^2.0.3",
+    "@tiptap/extension-table": "^2.2.4",
+    "@tiptap/extension-table-cell": "^2.2.4",
+    "@tiptap/extension-table-header": "^2.2.4",
+    "@tiptap/extension-table-row": "^2.2.4",
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
     "@tiptap/starter-kit": "^2.0.3",

postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "marker"
-version = "1.1.1"
+version = "1.2.0"
 description = "A Secure Visual Markdown Editor"
 authors = ["tk"]
 license = ""

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Marker",
-    "version": "1.1.1"
+    "version": "1.2.0"
   },
   "tauri": {
     "allowlist": {

src/components/Editor/Editor.tsx

@@ -47,16 +47,17 @@ const Editor: React.FC<props> = ({
     setUpdateContent((p) => p + 1);
   }
   async function saveFile() {
-    let mdContent = "---\n" + yaml.stringify(metadata) + "---\n";
-    mdContent += htmlToMarkdown(editor?.getHTML() || "");
-    await writeTextFile(file.path, mdContent).catch(() =>
+    try {
+      let mdContent = "---\n" + yaml.stringify(metadata) + "---\n";
+      mdContent += htmlToMarkdown(editor?.getHTML() || "");
+      await writeTextFile(file.path, mdContent);
+      updateTOC();
+      setUpdateContent(0);
+    } catch {
       alert(
-        "An error occurred when trying to save this file. Try again later.",
-      ),
-    );
-
-    updateTOC();
-    setUpdateContent(0);
+        "An error occurred when trying to save this file. Let us know by opening an issue at https://github.com/tk04/marker",
+      );
+    }
   }
   function updateTOC(initEditor?: EditorType) {
     // @ts-ignores

src/components/Editor/NodeViews/Image/Image.tsx

@@ -10,7 +10,16 @@ import Options from "./Options";
 import type props from "../types";
 import getImgUrl from "@/utils/getImgUrl";
 
-var imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "heif"];
+var imageExtensions = [
+  "svg",
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "bmp",
+  "webp",
+  "heif",
+];
 const ImageView: React.FC<props> = ({
   editor,
   node,
@@ -37,7 +46,7 @@ const ImageView: React.FC<props> = ({
       updateAssetSrc();
     }
 
-    const ext: string = node.attrs.src.split(".").pop();
+    const ext: string = node.attrs.src.split("?")[0].split(".").pop();
     setIsImage(imageExtensions.includes(ext.toLowerCase()));
   }, [node.attrs.src]);
 

src/components/Editor/NodeViews/TableView.tsx

@@ -0,0 +1,35 @@
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+
+import { HiPlus } from "react-icons/hi2";
+import props from "./types";
+
+const TableView: React.FC<props> = ({ editor }) => {
+  return (
+    <NodeViewWrapper>
+      <div className="flex" autoCorrect="false" autoCapitalize="false">
+        <div>
+          <NodeViewContent />
+          <button
+            className="absolute w-[calc(100%-30px)] cursor-pointer border border-black/70 text-sm text-center bg-white border-dashed mt-1 py-1 opacity-0 hover:opacity-100 select-none"
+            onClick={() => {
+              editor.commands.addRowAfter();
+            }}
+          >
+            <HiPlus size={17} className="inline" />
+          </button>
+        </div>
+
+        <button
+          className="block border border-black/70 text-sm text-center bg-white border-dashed opacity-0 hover:opacity-100 ml-1 px-1 select-none"
+          onClick={() => {
+            editor.commands.addColumnAfter();
+          }}
+        >
+          <HiPlus size={17} className="inline" />
+        </button>
+      </div>
+    </NodeViewWrapper>
+  );
+};
+
+export default TableView;

src/components/Project/Selector.tsx

@@ -28,7 +28,7 @@ const Selector = () => {
           <BsFolder2Open size={18} />
           <h1 className="w-fit">{currProject.name}</h1>
         </div>
-        <p className="text-neutral-400 text-[10px] text-ellipsis overflow-hidden">
+        <p className="text-neutral-400 text-[10px] w-full whitespace-nowrap text-ellipsis overflow-hidden">
           {currProject.dir}
         </p>
       </PopoverTrigger>
@@ -39,9 +39,8 @@ const Selector = () => {
               key={p[0]}
               to={`/project/${p[0]}`}
               onClick={() => setOpen(false)}
-              className={`block border-b py-4 px-5 last:border-b-0 hover:bg-neutral-100 hover:cursor-pointer ${
-                p[1].dir == currProject.dir && "bg-neutral-100"
-              }`}
+              className={`block border-b py-4 px-5 last:border-b-0 hover:bg-neutral-100 hover:cursor-pointer ${p[1].dir == currProject.dir && "bg-neutral-100"
+                }`}
             >
               <div className="flex items-center gap-2 text-neutral-700">
                 <BsFolder2Open />

src/hooks/useEditor.ts

@@ -16,9 +16,16 @@ import StarterKit from "@tiptap/starter-kit";
 import Code from "@tiptap/extension-code";
 import Placeholder from "@tiptap/extension-placeholder";
 
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+
 import ImageView from "@/components/Editor/NodeViews/Image/Image";
 import CodeBlockLowlight from "@/components/Editor/extensions/CodeBlockLowlight";
 import { RichTextLink } from "@/components/Editor/extensions/link-text";
+import TableView from "@/components/Editor/NodeViews/TableView";
+import { DeleteCells } from "@/lib/tableShortcut";
 
 interface props {
   content: string;
@@ -34,6 +41,50 @@ const useTextEditor = ({ content, onUpdate, folderPath }: props) => {
       },
     },
     extensions: [
+      Table.extend({
+        addNodeView() {
+          return ReactNodeViewRenderer(TableView, {
+            contentDOMElementTag: "table",
+          });
+        },
+        addInputRules() {
+          return [
+            {
+              find: /table(\r\n|\r|\n)/,
+              type: this.type,
+              handler({ state, range, match, commands }) {
+                const { tr } = state;
+                const { $from } = state.selection;
+                const start = range.from;
+                let end = range.to;
+
+                const isEmptyLine =
+                  $from.parent.textContent.trim() === match[0].slice(0, -1);
+                if (isEmptyLine) {
+                  tr.delete(tr.mapping.map(start), tr.mapping.map(end));
+                  commands.insertTable({
+                    rows: 2,
+                    cols: 2,
+                    withHeaderRow: true,
+                  });
+                }
+              },
+            },
+          ];
+        },
+        addKeyboardShortcuts() {
+          return {
+            ...this.parent?.(),
+            Backspace: DeleteCells,
+            "Mod-Backspace": DeleteCells,
+            Delete: DeleteCells,
+            "Mod-Delete": DeleteCells,
+          };
+        },
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
       BubbleMenu.configure({
         element: document.querySelector(".menu") as HTMLElement,
       }),

src/lib/tableShortcut.ts

@@ -0,0 +1,57 @@
+import {
+  findParentNodeClosestToPos,
+  KeyboardShortcutCommand,
+} from "@tiptap/core";
+
+import { CellSelection } from "@tiptap/pm/tables";
+
+export function isCellSelection(value: unknown): value is CellSelection {
+  return value instanceof CellSelection;
+}
+
+export const DeleteCells: KeyboardShortcutCommand = ({ editor }) => {
+  const { selection } = editor.state;
+
+  if (!isCellSelection(selection)) {
+    return false;
+  }
+
+  let cellCount = 0;
+  const table = findParentNodeClosestToPos(
+    selection.ranges[0].$from,
+    (node) => {
+      return node.type.name === "table";
+    },
+  );
+  let numRows = 0;
+  let numCols = 0;
+
+  table?.node.descendants((node) => {
+    if (node.type.name === "table") {
+      return false;
+    }
+    if (node.type.name == "tableRow") {
+      //@ts-ignore
+      numCols = node.content.content.length;
+      numRows += 1;
+    }
+    if (["tableCell", "tableHeader"].includes(node.type.name)) {
+      cellCount += 1;
+    }
+  });
+
+  const allCellsSelected = cellCount === selection.ranges.length;
+  if (allCellsSelected) {
+    editor.commands.deleteTable();
+    return true;
+  } else if (selection.ranges.length == numRows) {
+    // delete column
+    editor.commands.deleteColumn();
+    return true;
+  } else if (selection.ranges.length == numCols) {
+    // delete row
+    editor.commands.deleteRow();
+    return true;
+  }
+  return false;
+};

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }