Merge pull request #37 from trey-wallis/dev

Fix bugs

Author: decaf-dev

.github/workflows/release.yml

@@ -21,12 +21,6 @@ jobs:
               id: set-tag-var
               run: |
                   echo "::set-output name=tag::$(git describe --abbrev=0) --tags"
-            - name: Update version in manifest.json
-              id: update-version
-              run: |
-                  sed "s/0\.1\.0/$TAG/" manifest.json
-              env:
-                  TAG: ${{ steps.vars.outputs.tag }}
             # Create the release on github
             - name: Create Release
               id: create_release

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "notion-like-tables",
 	"name": "Notion-Like Tables",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"minAppVersion": "0.12.0",
 	"description": "Create markdown tables using an interface similar to that found in Notion.so.",
 	"author": "Trey Wallis",

src/app/App.tsx

@@ -10,7 +10,6 @@ import EditableTh from "./components/EditableTh";
 import {
 	initialHeader,
 	initialCell,
-	initialHeaderMenuState,
 	initialRow,
 	initialTag,
 	Tag,
@@ -34,7 +33,6 @@ interface Props {
 export default function App({ plugin, settings, data }: Props) {
 	const [oldAppData, setOldAppData] = useState<AppData>(data);
 	const [appData, setAppData] = useState<AppData>(data);
-	const [headerMenu, setHeaderMenu] = useState(initialHeaderMenuState);
 	const appRef = useRef<HTMLInputElement>();
 
 	const app = useApp();
@@ -56,7 +54,9 @@ export default function App({ plugin, settings, data }: Props) {
 					if (DEBUG) console.log("Saving Data");
 					try {
 						await saveData(app, oldAppData, appData);
-					} catch (err) {}
+					} catch (err) {
+						console.log(err);
+					}
 				}
 			}
 		}

src/app/components/DragMenu/index.tsx

@@ -1,12 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useRef } from "react";
+import { v4 as uuidv4 } from "uuid";
 
 import IconButton from "../IconButton";
 import Menu from "../Menu";
 
-// import DragIndicator from "@mui/icons-material/DragIndicator";
 import MoreVert from "@mui/icons-material/MoreVert";
 import DeleteIcon from "@mui/icons-material/Delete";
-import { useApp, useForceUpdate } from "../../services/hooks";
 
 import IconText from "../IconText";
 
@@ -23,14 +22,14 @@ export default function DragMenu({ onDeleteClick }: Props) {
 		isOpen: false,
 	};
 	const [clickedButton, setClickedButton] = useState(initialClickedButton);
+	const [buttonId] = useState(uuidv4());
 
 	const buttonRef = useRef<HTMLInputElement>();
 
 	function handleOutsideClick(e: MouseEvent | undefined) {
 		if (e) {
 			const el = e.target as HTMLInputElement;
-			console.log(el.nodeName);
-			if (el.nodeName === "svg" || el.nodeName === "path") return;
+			if (el.id === buttonId) return;
 		}
 		setClickedButton(initialClickedButton);
 	}
@@ -63,6 +62,7 @@ export default function DragMenu({ onDeleteClick }: Props) {
 	return (
 		<div className="NLT__td NLT__hidden-column">
 			<IconButton
+				id={buttonId}
 				icon={<MoreVert />}
 				ref={buttonRef}
 				onClick={handleDragClick}

src/app/components/EditableTd/index.tsx

@@ -6,7 +6,7 @@ import TagCell from "../TagCell";
 import ErrorCell from "../ErrorCell";
 import TagMenuContent from "../TagMenuContent";
 
-import { useForceUpdate, useApp } from "../../services/hooks";
+import { useForceUpdate } from "../../services/hooks";
 import { randomColor } from "../../services/utils";
 import { Tag } from "../../services/state";
 

src/app/components/EditableTh/index.tsx

@@ -52,11 +52,6 @@ export default function EditableTh({
 		});
 	}
 
-	function handleOutsideClick() {
-		setHeaderMenu(initialHeaderMenuState);
-		onSaveClick(id, content);
-	}
-
 	return (
 		<div className="NLT__header-group" onClick={handleHeaderClick}>
 			<HeaderMenu
@@ -69,7 +64,7 @@ export default function EditableTh({
 				content={content}
 				position={position}
 				type={type}
-				onOutsideClick={handleOutsideClick}
+				onOutsideClick={onSaveClick}
 				onItemClick={onItemClick}
 				onDeleteClick={onDeleteClick}
 				onClose={() => setHeaderMenu(initialHeaderMenuState)}

src/app/components/IconButton/index.tsx

@@ -1,18 +1,24 @@
 import React, { forwardRef } from "react";
 
 interface Props {
+	id?: string;
 	selected?: boolean;
 	icon: React.ReactNode;
 	onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const IconButton = forwardRef<HTMLInputElement, Props>(
-	({ selected = false, icon, onClick }, ref) => {
+	({ id = "", selected, icon, onClick }, ref) => {
 		let className = "NLT__button--reset";
 		if (selected) className += " NLT__selected";
 
 		return (
-			<button className={className} ref={ref} onClick={onClick}>
+			<button
+				id={id !== "" ? id : ""}
+				className={className}
+				ref={ref}
+				onClick={onClick}
+			>
 				{icon}
 			</button>
 		);

src/app/components/TagMenuContent/index.tsx

@@ -27,6 +27,14 @@ export default function TagMenuContent({
 	onTextChange,
 	onRemoveTagClick,
 }: Props) {
+	function handleTextChange(e: React.ChangeEvent<HTMLInputElement>) {
+		//Disallow pound
+		if (e.target.value.match("#")) return;
+		//Disallow whitespace
+		if (e.target.value.match(/\s/)) return;
+		onTextChange(e);
+	}
+
 	function renderSelectableTags() {
 		const filteredTags = tags.filter((tag: Tag) =>
 			tag.content.includes(inputText)
@@ -83,7 +91,7 @@ export default function TagMenuContent({
 					autoFocus
 					type="text"
 					value={inputText}
-					onChange={onTextChange}
+					onChange={handleTextChange}
 				/>
 			</div>
 			<div className="NLT__tag-menu-bottom">

src/app/constants.ts

@@ -1,4 +1,4 @@
-export const DEBUG = false;
+export const DEBUG = true;
 
 interface CellType {
 	TEXT: string;

src/app/services/dataUtils/index.tsx

@@ -28,10 +28,13 @@ export const findErrorData = (el: HTMLElement): ErrorData | null => {
 		const errors: number[] = [];
 
 		td.forEach((td, i) => {
-			let cellType = getCellType(td.textContent, true);
-			if (cellType === CELL_TYPE.ERROR) {
+			const cellType = td.textContent;
+			if (
+				cellType !== CELL_TYPE.TEXT &&
+				cellType != CELL_TYPE.NUMBER &&
+				cellType !== CELL_TYPE.TAG
+			)
 				errors.push(i);
-			}
 		});
 
 		if (errors.length === 0) {
@@ -76,17 +79,11 @@ export const findAppData = (
 			let cellType = "";
 			//Set header type based off of the first row's specified cell type
 			if (i === 1) {
-				cellType = getCellType(td.textContent, true);
+				cellType = td.textContent;
 				headers[j].type = cellType;
 				return;
 			} else {
-				//If empty then just set it to the type it's supposed to be.
-				//We do this to allow blank cells
-				if (td.textContent === "") {
-					cellType = headers[j].type;
-				} else {
-					cellType = getCellType(td.textContent, false);
-				}
+				cellType = findCellType(td.textContent, headers[j].type);
 			}
 
 			//Check if doesn't match header
@@ -168,7 +165,7 @@ export const loadData = (
 	el: HTMLElement,
 	settings: NltSettings
 ): AppData | ErrorData => {
-	let data = findErrorData(el);
+	const data = findErrorData(el);
 	if (data !== null) {
 		return data;
 	} else {
@@ -345,38 +342,33 @@ export const writeContentToDataString = (
 	return data;
 };
 
-export const getCellType = (textContent: string, firstRow: boolean) => {
-	if (firstRow) {
-		switch (textContent) {
-			case CELL_TYPE.TEXT:
-				return CELL_TYPE.TEXT;
-			case CELL_TYPE.NUMBER:
-				return CELL_TYPE.NUMBER;
-			case CELL_TYPE.TAG:
-				return CELL_TYPE.TAG;
-			case CELL_TYPE.MULTI_TAG:
-				return CELL_TYPE.MULTI_TAG;
-			default:
-				return CELL_TYPE.ERROR;
+export const findCellType = (textContent: string, expectedType: string) => {
+	//If empty then just set it to the type it's supposed to be.
+	//We do this to allow blank cells
+	if (textContent === "") return expectedType;
+
+	const numTags = countNumTags(textContent);
+	if (numTags === 1) {
+		//If we have a tag like "#test test" the first will match, but it's technically invalid
+		if (textContent.match(/\s/)) {
+			return CELL_TYPE.ERROR;
+		} else {
+			return CELL_TYPE.TAG;
 		}
+	} else if (numTags > 1) {
+		return CELL_TYPE.MULTI_TAG;
 	} else {
 		if (textContent.match(/^\d+$/)) {
-			return CELL_TYPE.NUMBER;
+			if (expectedType === CELL_TYPE.TEXT) return CELL_TYPE.TEXT;
+			else return CELL_TYPE.NUMBER;
 		} else {
-			const numTags = countNumTags(textContent);
-			if (numTags === 1) {
-				return CELL_TYPE.TAG;
-			} else if (numTags > 1) {
-				return CELL_TYPE.MULTI_TAG;
-			} else {
-				return CELL_TYPE.TEXT;
-			}
+			return CELL_TYPE.TEXT;
 		}
 	}
 };
 
 export const countNumTags = (textContent: string): number => {
-	return (textContent.match(/#\w+/g) || []).length;
+	return (textContent.match(/#[a-zA-z0-9-_]+/g) || []).length;
 };
 
 export const hasLink = (content: string): boolean => {

src/index.js

@@ -4,13 +4,19 @@ import App from "./app/App.tsx";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 
+const data = {
+	headers: [],
+	rows: [],
+	cells: [],
+	tags: [],
+};
 //This is for testing with react-scripts (npm run start)
 ReactDOM.render(
 	<React.StrictMode>
 		<div className="theme-light">
 			<div className="markdown-reading-view">
 				<div className="markdown-preview-view">
-					<App />
+					<App data={data} />
 				</div>
 			</div>
 		</div>

versions.json

@@ -1,5 +1,6 @@
 {
-	"0.0.0": "0.12.0",
+	"0.1.0": "0.12.0",
 	"0.1.1": "0.12.0",
-	"0.1.2": "0.12.0"
+	"0.1.2": "0.12.0",
+	"0.1.3": "0.12.0"
 }