Merge pull request #161 from trey-wallis/dev

Basic markdown syntax

Author: decaf-dev

README.md

@@ -16,6 +16,11 @@ Please upgrade your tables to this new format. This update also includes several
 
 ## What's New?
 
+### Version 3.4.0
+
+-   The pound sign `#` in tags are now optional. See `Tags` below for more details.
+-   NLT now supports bold, italics, highlight and underline. See `Markdown` below for more details.
+
 ### Version 3.3.0
 
 -   Line break elements are now supported for cells in a column with the type `text` selected. See `Line Breaks` below for usage information
@@ -116,6 +121,26 @@ To edit a cell, just click on it. An input, textarea or menu will appear which w
 
 Text can be rendered in cells that are in a column with the `text` type selected.
 
+#### Markdown
+
+To bold text use either double astericks `**` or the bold tag `<b>
+
+-   `**This is bold**`
+-   `<b>This is bold</b>`
+
+To italicize text use either single astericks `*` or the italics tag `<i>
+
+-   `*This is italicized*`
+-   `<i>This is italicized</i>`
+
+To highlight text use the double equal sign syntax `==`
+
+-   `==This is highlighted==`
+
+To underline text use the underline tag `<u>`
+
+-   `<u>This is underlined</u>`
+
 #### Links
 
 Links can be rendered in cells that are in a column with the `text` column type is selected. To render a link, add double squares surrounding text `[[My Link]]`.
@@ -136,7 +161,11 @@ Line breaks can be added using the break line HTML tag `<br>`. For example, if y
 
 ### Tags
 
-Tags can be rendered in cells that are in a column with the `tag` type selected. Tags have a special notion-like menu that will appear. Tags are scoped to each column of a table. You can type text to filter existing tags and select one. You can also create a new tag by typing text and clicking "Create New" or pressing enter.
+Tags can be rendered in cells that are in a column with the `tag` type selected.
+
+Tags have a special notion-like menu that will appear. Tags are scoped to each column of a table. You can type text to filter existing tags and select one. You can also create a new tag by typing text and clicking "Create New" or pressing enter.
+
+Tags can be rendered with or without a pound sign `#`. If you use a pound sign, then the tag will be rendered as a internal Obsidian tag link. Otherwise, it will be rendered as plain text.
 
 ![Screenshot](https://raw.githubusercontent.com/trey-wallis/obsidian-notion-like-tables/master/.readme/tag-menu.png)
 

manifest.json

@@ -6,5 +6,5 @@
 	"author": "Trey Wallis",
 	"authorUrl": "https://github.com/trey-wallis",
 	"isDesktopOnly": false,
-	"version": "3.3.2"
+	"version": "3.4.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-notion-like-tables",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Notion-like tables for Obsidian.md",
   "main": "main.js",
   "scripts": {

src/app/components/EditableTd/index.tsx

@@ -16,7 +16,6 @@ import TagCellEdit from "../TagCellEdit";
 
 import { useMenu } from "../MenuProvider";
 import { randomColor } from "src/app/services/random";
-import { addPound } from "src/app/services/string/adders";
 import { Tag } from "src/app/services/appData/state/tag";
 import { Cell } from "src/app/services/appData/state/cell";
 import {
@@ -119,12 +118,7 @@ export default function EditableTd({
 		if (DEBUG.EDITABLE_TD.HANDLER)
 			console.log("[EditableTd] handleCellContextClick()");
 		try {
-			let text = content;
-			if (type === CELL_TYPE.TAG) {
-				const tag = tags.find((tag) => tag.selected.includes(id));
-				text = addPound(tag.content);
-			}
-			await navigator.clipboard.writeText(text);
+			await navigator.clipboard.writeText(content);
 			new Notice("Cell text copied");
 		} catch (err) {
 			console.log(err);

src/app/components/TagCell/index.tsx

@@ -45,7 +45,9 @@ export default function TagCell({
 	if (content === "") return <></>;
 
 	//If on render view, add the link to make it a clickable tag
-	if (showLink) content = toTagLink(content);
+	if (showLink) {
+		if (content.startsWith("#")) content = toTagLink(content);
+	}
 
 	return (
 		<div

src/app/components/TagCellEdit/index.tsx

@@ -55,8 +55,6 @@ export default function TagCellEdit({
 	);
 
 	function handleTextChange(e: React.ChangeEvent<HTMLInputElement>) {
-		//Disallow pound
-		if (e.target.value.match("#")) return;
 		//Disallow whitespace
 		if (e.target.value.match(/\s/)) return;
 		onInputChange(e.target.value);

src/app/components/TextCell/index.tsx

@@ -1,14 +1,23 @@
 import React from "react";
 
 import parse from "html-react-parser";
-import { parseFileLinks, parseURLs } from "src/app/services/string/parsers";
+import {
+	parseFileLinks,
+	parseURLs,
+	parseBoldMarkdown,
+	parseItalicMarkdown,
+	parseHighlightMarkdown,
+} from "src/app/services/string/parsers";
 interface Props {
 	text: string;
 }
 
 export default function TextCell({ text }: Props) {
 	text = parseURLs(text);
 	text = parseFileLinks(text);
+	text = parseBoldMarkdown(text);
+	text = parseItalicMarkdown(text);
+	text = parseHighlightMarkdown(text);
 
 	return <p className="NLT__p">{parse(text)}</p>;
 }

src/app/constants.ts

@@ -1,9 +1,9 @@
 export const DEBUG = {
 	LOAD_APP_DATA: {
-		DATA: false,
+		DATA: true,
 		IDS: false,
 		TYPES: false,
-		PARSED_TABLE: true,
+		PARSED_TABLE: false,
 	},
 	APP: {
 		HANDLER: false,
@@ -102,3 +102,14 @@ export const MENU_LEVEL = {
 
 export const BREAK_LINE_TAG = "<br>";
 export const AMPERSAND = "&";
+export const BOLD_TAG_MARKDOWN = "**";
+export const ITALIC_TAG_MARKDOWN = "*";
+export const HIGHLIGHT_TAG_MARKDOWN = "==";
+export const UNDERLINE_TAG_START = "<u>";
+export const UNDERLINE_TAG_CLOSE = "</u>";
+export const ITALIC_TAG_START = "<i>";
+export const ITALIC_TAG_CLOSE = "</i>";
+export const BOLD_TAG_START = "<b>";
+export const BOLD_TAG_CLOSE = "</b>";
+export const HIGHLIGHT_TAG_START = "<mark>";
+export const HIGHLIGHT_TAG_CLOSE = "</mark>";

src/app/services/appData/external/merge.test.js

@@ -78,8 +78,8 @@ describe("updateAppDataFromSavedState", () => {
 		const merged = updateAppDataFromSavedState(oldAppData, newAppData);
 		expect(merged.tags[0].color).toEqual(newAppData.tags[0].color);
 		expect(merged.tags[1].color).toEqual(oldAppData.tags[1].color);
-		expect(merged.tags[0].content).toEqual("tag1-updated");
-		expect(merged.tags[1].content).toEqual("tag2");
+		expect(merged.tags[0].content).toEqual("#tag1-updated");
+		expect(merged.tags[1].content).toEqual("#tag2");
 	});
 
 	it("merges header sort name", () => {

src/app/services/appData/external/saveUtils.test.js

@@ -78,13 +78,13 @@ describe("findAppData", () => {
 				"column-id-345678",
 				"table-id-123456",
 			],
-			["#tag1", "#tag2", "#tag3", "row-id-123456"],
+			["tag1", "#tag2", "#tag3", "row-id-123456"],
 		];
 		const data = findAppData(parsedTable);
 		expect(data.tags.length).toEqual(3);
 		expect(data.tags[0].content).toEqual("tag1");
-		expect(data.tags[1].content).toEqual("tag2");
-		expect(data.tags[2].content).toEqual("tag3");
+		expect(data.tags[1].content).toEqual("#tag2");
+		expect(data.tags[2].content).toEqual("#tag3");
 	});
 
 	it("finds errors", () => {
@@ -97,7 +97,7 @@ describe("findAppData", () => {
 				"column-id-345678",
 				"table-id-123456",
 			],
-			["tag1", "#tag2", "#tag3", "row-id-123456"],
+			["tag1 ok", "#tag2", "#tag3", "row-id-123456"],
 		];
 		const data = findAppData(parsedTable);
 		expect(data.cells[0].type).toEqual(CELL_TYPE.ERROR);