Integrate TipTap editor (#91)

package.json

@@ -4,6 +4,21 @@
 	"private": true,
 	"license": "UNLICENSED",
 	"dependencies": {
+		"@tiptap/extension-color": "^2.10.3",
+		"@tiptap/extension-font-family": "^2.10.3",
+		"@tiptap/extension-image": "^2.10.3",
+		"@tiptap/extension-link": "^2.10.3",
+		"@tiptap/extension-list-item": "^2.10.3",
+		"@tiptap/extension-ordered-list": "^2.10.3",
+		"@tiptap/extension-placeholder": "^2.10.3",
+		"@tiptap/extension-table": "^2.10.3",
+		"@tiptap/extension-table-cell": "^2.10.3",
+		"@tiptap/extension-table-header": "^2.10.3",
+		"@tiptap/extension-table-row": "^2.10.3",
+		"@tiptap/extension-text-style": "^2.10.3",
+		"@tiptap/extension-typography": "^2.10.3",
+		"@tiptap/pm": "^2.10.3",
+		"@tiptap/starter-kit": "^2.10.3",
 		"@travisspomer/tidbits": "^1.0.9"
 	},
 	"devDependencies": {

src/app.scss

@@ -310,6 +310,14 @@
 	src: url("https://files.greeneclipse.com/font/cot4.woff2") format("woff2");
 }
 @font-face
+{
+	font-family: Concourse;
+	font-style: italic;
+	font-weight: 600;
+	font-display: block;
+	src: url("https://files.greeneclipse.com/font/cot4i.woff2") format("woff2");
+}
+@font-face
 {
 	font-family: Inconsolata;
 	font-style: normal;
@@ -544,6 +552,12 @@ ul, ol
 	{
 		margin: 8px 0 8px 0;
 
+		& > p
+		{
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+
 		/* ::marker is not widely-supported right now so don't depend on it. */
 		&::marker
 		{
@@ -602,6 +616,12 @@ table
 		border-color: transparent transparent var(--grey) transparent;
 
 		vertical-align: top;
+
+		& > p
+		{
+			margin-top: 0;
+			margin-bottom: 0;
+		}
 	}
 
 	&.compact
@@ -1199,11 +1219,36 @@ input[type=text], input[type=email], input[type=number], input[type=password], i
 	height: 36px;
 }
 
-textarea, select
+textarea, select, .tiptap
 {
 	@include textbox;
 }
 
+.tiptap
+{
+	min-height: 6em;
+	cursor: text;
+
+	& > :first-child
+	{
+		margin-top: 0;
+	}
+
+	& > :last-child
+	{
+		margin-bottom: 0;
+	}
+
+	&:not(.ProseMirror-focused) p.is-editor-empty:first-child::before
+	{
+		content: attr(data-placeholder);
+		opacity: 0.25;
+		float: left;
+		height: 0;
+		pointer-events: none;
+	}
+}
+
 textarea
 {
 	resize: vertical;

src/lib/components/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ButtonBorder from "./ButtonBorder.svelte"
-	
+
 	/** Come on, you know what the id property is for. */
 	export let id: string | undefined = undefined
 	/** Optionally, a link to navigate to when the button is clicked. Supplying this will make the button an A tag. If you also use on:click, call preventDefault on the event object to stop navigation to this URL. */
@@ -14,6 +14,8 @@
 	export let disabled: boolean = false
 	/** If true, the content can be selected. */
 	export let selectable: boolean = false
+	/** If true, the button appears checked. */
+	export let checked: boolean = false
 
 	/** If true, the button is itty bitty. */
 	export let tiny: boolean = false
@@ -32,6 +34,7 @@
 	{danger} {accent} {toolbar} {ghost}
 	regular={!tiny} tiny={tiny}
 	{selectable}
+	{checked}
 	{align}
 	on:click
 >

src/lib/components/ButtonBorder.svelte

@@ -12,6 +12,7 @@
 	/** If true, the control will show focus visuals at rest. */
 	export let focus: boolean = false
 	export let selectable: boolean = false
+	export let checked: boolean = false
 	/** If false, the button border won't use click visuals. Defaults to true. */
 	export let clickable: boolean = true
 
@@ -43,7 +44,7 @@
 		display: inline-grid;
 		justify-content: center;
 		position: relative;
-		
+
 		font: inherit;
 
 		user-select: none;
@@ -220,7 +221,7 @@
 				{
 					transform: translateY(3px);
 				}
-			}			
+			}
 		}
 
 		@include disabled-or-disabled-class
@@ -332,7 +333,7 @@
 
 		&.toolbar
 		{
-			min-width: unset;
+			min-width: 32px;
 
 			@include rest
 			{
@@ -573,15 +574,34 @@
 						opacity: var(--solid-shadow-opacity);
 						transform: translateY(2px);
 					}
-				}				
+				}
+			}
+
+		}
+
+		&.checked
+		{
+			.face
+			{
+				background-color: var(--link-underline);
 			}
 
+			@include hover-or-focus-class
+			{
+				.face
+				{
+					background-color: var(--link-underline);
+				}
+			}
 		}
 
 	}
 </style>
 
-<svelte:element this={tag} {id} class:root={true} {href} {title} disabled={disabled ? true : undefined} class:disabled
+<svelte:element this={tag} {id}
+	class:root={true} {href} {title}
+	role="button"
+	disabled={disabled ? true : undefined} class:disabled
 	class:danger={danger && !disabled}
 	class:accent={accent && !disabled && !danger}
 	class:toolbar={toolbar && !disabled && !accent && !danger}
@@ -591,10 +611,12 @@
 	class:tiny={tiny && !regular}
 	class:clickable={clickable && !disabled}
 	class:focus
+	class:checked
 	style:user-select={selectable ? "unset" : ""}
 	style:justify-content={justifyContent}
 	on:click
 	on:dragstart|preventDefault
+	tabindex="0"
 >
 	<span class="shadow"></span>
 	<span class="bottom"></span>