+
+
<>
-
-
+
+
-
+
-
+
-
+
<>
@@ -75,41 +103,24 @@ export function EditorToolbar({
tooltip="Strikethrough (⌘+⇧+M)"
nodeType={MARK_STRIKETHROUGH}
>
-
+
-
+
-
- {/* NOTE: id prop was removed, probably was for Playground to support multiple editors */}
- {/* */}
- {/* {isEnabled("indentlist", id) && indentList && (
- <>
-
-
-
- )} */}
-
- {/* NOTE: id prop was removed, probably was for Playground to support multiple editors */}
- {/* <>
-
-
- */}
-
-
+
-
+
-
-
diff --git a/src/views/edit/editor/toolbar/components/ChangeBlockDropdown.tsx b/src/views/edit/editor/toolbar/components/ChangeBlockDropdown.tsx
index 8260cd2..da21c48 100644
--- a/src/views/edit/editor/toolbar/components/ChangeBlockDropdown.tsx
+++ b/src/views/edit/editor/toolbar/components/ChangeBlockDropdown.tsx
@@ -24,6 +24,21 @@ import {
import { Icons } from "../../../../../components/icons";
+import {
+ MoreIcon,
+ HeaderOneIcon,
+ HeaderTwoIcon,
+ HeaderThreeIcon,
+ CodeBlockIcon,
+ CitationIcon,
+ NumberedListIcon,
+ PropertiesIcon,
+ FontIcon,
+ DeleteIcon,
+ TrashIcon,
+ ParagraphIcon,
+} from "evergreen-ui";
+
import {
DropdownMenu,
DropdownMenuContent,
@@ -38,51 +53,51 @@ import { ToolbarButton } from "../../components/Toolbar";
const items = [
{
description: "Paragraph",
- icon: Icons.paragraph,
+ icon: ParagraphIcon,
label: "Paragraph",
value: ELEMENT_PARAGRAPH,
},
{
description: "Heading 1",
- icon: Icons.h1,
+ icon: HeaderOneIcon,
label: "Heading 1",
value: ELEMENT_H1,
},
{
description: "Heading 2",
- icon: Icons.h2,
+ icon: HeaderTwoIcon,
label: "Heading 2",
value: ELEMENT_H2,
},
{
description: "Heading 3",
- icon: Icons.h3,
+ icon: HeaderThreeIcon,
label: "Heading 3",
value: ELEMENT_H3,
},
{
description: "Quote (⌘+⇧+.)",
- icon: Icons.blockquote,
+ icon: CitationIcon,
label: "Quote",
value: ELEMENT_BLOCKQUOTE,
},
{
description: "Code (```)",
- icon: Icons.codeblock,
+ icon: CodeBlockIcon,
label: "Code",
value: ELEMENT_CODE_BLOCK,
},
{
- value: "ul",
- label: "Bulleted list",
description: "Bulleted list",
- icon: Icons.ul,
+ icon: PropertiesIcon,
+ label: "Bulleted list",
+ value: "ul",
},
{
- value: "ol",
- label: "Numbered list",
description: "Numbered list",
- icon: Icons.ol,
+ icon: NumberedListIcon,
+ label: "Numbered list",
+ value: "ol",
},
];
@@ -91,9 +106,6 @@ const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;
/**
* Toolbar dropdown for toggling block types, e.g. paragraph, heading, blockquote.
*
- * Unlike the InsertBlockDropdown, this dropdown is for toggling existing blocks, not
- * creating new ones.
- *
* Referred to as "Turn into" dropdown in Plate UI docs.
* https://platejs.org/docs/components/turn-into-dropdown-menu
*/
@@ -129,7 +141,7 @@ export default function ChangeBlockDropdown(props: DropdownMenuProps) {
className="lg:min-w-[130px]"
isDropdown
pressed={openState.open}
- tooltip="Turn into"
+ tooltip="Change type"
>
{selectedItemLabel}
diff --git a/src/views/edit/editor/toolbar/components/DebugDropdown.tsx b/src/views/edit/editor/toolbar/components/DebugDropdown.tsx
index 16164dc..c77adbb 100644
--- a/src/views/edit/editor/toolbar/components/DebugDropdown.tsx
+++ b/src/views/edit/editor/toolbar/components/DebugDropdown.tsx
@@ -4,12 +4,29 @@ import { ToolbarButton } from "../../components/Toolbar";
import {
useOpenState,
DropdownMenu,
+ DropdownMenuLabel,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
} from "./DropdownMenu";
-import { Icons } from "../../../../../components/icons";
+
+import {
+ MoreIcon,
+ HeaderOneIcon,
+ HeaderTwoIcon,
+ HeaderThreeIcon,
+ CodeBlockIcon,
+ CitationIcon,
+ NumberedListIcon,
+ PropertiesIcon,
+ FontIcon,
+ DeleteIcon,
+ TrashIcon,
+} from "evergreen-ui";
+
import { EditorMode } from "../../../EditorMode";
const options = Object.freeze([
@@ -22,6 +39,7 @@ const options = Object.freeze([
interface Props {
selectedEditorMode: EditorMode;
setSelectedEditorMode: (s: EditorMode) => any;
+ deleteDocument: () => void;
}
/**
@@ -30,6 +48,7 @@ interface Props {
export default function DebugDropdown({
selectedEditorMode,
setSelectedEditorMode,
+ deleteDocument,
}: Props) {
const openState = useOpenState();
@@ -40,29 +59,38 @@ export default function DebugDropdown({
isDropdown
pressed={openState.open}
tooltip="Change editor debug mode"
+ size="xs"
>
-
+
-
+
+ Toggle debug mode
+
+ {options.map(({ key, label }) => (
+
+ {
+ setSelectedEditorMode(key);
+ }}
+ >
+ {label}
+
+
+ ))}
+
+
- {options.map(({ key, label }) => (
-
- {
- setSelectedEditorMode(key);
- }}
- >
- {label}
-
-
- ))}
+
+
+
);
diff --git a/src/views/edit/editor/toolbar/components/DropdownMenu.tsx b/src/views/edit/editor/toolbar/components/DropdownMenu.tsx
index 3e0a00f..59fa373 100644
--- a/src/views/edit/editor/toolbar/components/DropdownMenu.tsx
+++ b/src/views/edit/editor/toolbar/components/DropdownMenu.tsx
@@ -56,12 +56,12 @@ export const DropdownMenuSubTrigger = withRef<
export const DropdownMenuSubContent = withCn(
DropdownMenuPrimitive.SubContent,
- "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ "z-50 min-w-32 overflow-hidden border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
);
const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
className: cn(
- "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ "z-50 min-w-32 overflow-hidden border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
),
sideOffset: 4,
});
@@ -76,7 +76,7 @@ export const DropdownMenuContent = withRef<
const menuItemVariants = cva(
cn(
- "relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+ "relative flex h-9 cursor-pointer select-none items-center px-2 py-1.5 text-sm outline-none transition-colors",
"focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
),
{
@@ -99,7 +99,7 @@ export const DropdownMenuCheckboxItem = withRef<
>(({ children, className, ...props }, ref) => (
(({ children, className, hideIcon, ...props }, ref) => (
((rest, ref) => {
const state = useLinkToolbarButtonState();
@@ -14,7 +14,7 @@ export const LinkToolbarButton = withRef((rest, ref) => {
return (
-
+
);
});
diff --git a/src/views/edit/index.tsx b/src/views/edit/index.tsx
index 9db9f0d..d0d37cf 100644
--- a/src/views/edit/index.tsx
+++ b/src/views/edit/index.tsx
@@ -1,12 +1,11 @@
import React, { useContext, useState, useEffect } from "react";
import { observer } from "mobx-react-lite";
import Editor from "./editor";
-import { Pane } from "evergreen-ui";
+import { IconButton, Pane, ChevronLeftIcon } from "evergreen-ui";
import { useEditableDocument } from "./useEditableDocument";
import { EditableDocument } from "./EditableDocument";
import { JournalResponse } from "../../preload/client/journals";
import { EditLoadingComponent } from "./loading";
-import { useIsMounted } from "../../hooks/useIsMounted";
import { JournalsStoreContext } from "../../hooks/useJournalsLoader";
import { useParams, useNavigate } from "react-router-dom";
import { useSearchStore } from "../documents/SearchStore";
@@ -15,8 +14,8 @@ import { EditorMode } from "./EditorMode";
import Titlebar from "../../titlebar/macos";
import PlateContainer from "./PlateContainer";
import { EditorToolbar } from "./editor/toolbar/EditorToolbar";
-import { SaveActions } from "./SaveActions";
import FrontMatter from "./FrontMatter";
+import { Separator } from "./editor/components/Separator";
// Loads document, with loading and error placeholders
function DocumentLoadingContainer() {
@@ -70,6 +69,8 @@ const DocumentEditView = observer((props: DocumentEditProps) => {
const [selectedViewMode, setSelectedViewMode] = React.useState(
EditorMode.Editor,
);
+ const navigate = useNavigate();
+ const searchStore = useSearchStore()!;
function renderEditor(tab: string) {
switch (tab) {
@@ -102,6 +103,20 @@ const DocumentEditView = observer((props: DocumentEditProps) => {
}
}
+ function goBack() {
+ if (
+ !document.dirty ||
+ confirm(
+ "Document is unsaved, exiting will discard document. Stop editing anyways?",
+ )
+ ) {
+ // This handles the edit case but hmm... if its new... it should be added to the search...
+ // but in what order? Well... if we aren't paginated... it should be at the top.
+ searchStore.updateSearch(document);
+ navigate(-1);
+ }
+ }
+
// flexGrows are needed so save / edit buttons are at bottom on both empty documents
// and scrollable documents
return (
@@ -115,25 +130,32 @@ const DocumentEditView = observer((props: DocumentEditProps) => {
setSelectedEditorMode={setSelectedViewMode}
>
+
+ Back to documents
+
+
+
-
+
- {/* Saving / Delete, todo: move to toolbar*/}
-
+
+ {renderEditor(selectedViewMode)}
+
-
-
-
- {renderEditor(selectedViewMode)}
);
diff --git a/src/views/edit/loading.tsx b/src/views/edit/loading.tsx
index a3dab21..3130ac4 100644
--- a/src/views/edit/loading.tsx
+++ b/src/views/edit/loading.tsx
@@ -1,8 +1,9 @@
import React from "react";
import { observer } from "mobx-react-lite";
-import { Pane, Button, Alert } from "evergreen-ui";
-import { css } from "emotion";
+import { Pane, IconButton, ChevronLeftIcon } from "evergreen-ui";
import { useNavigate } from "react-router-dom";
+import Titlebar from "../../titlebar/macos";
+import { Separator } from "./editor/components/Separator";
export interface LoadingComponentProps {
error?: Error | null;
@@ -15,68 +16,27 @@ export const EditLoadingComponent = observer((props: LoadingComponentProps) => {
const navigate = useNavigate();
return (
-
- navigate("/documents")}>Back
-
-
+
+ {}}
+ marginRight={8}
>
-
- {placeholderDate}/
-
-
- Loading...
-
-
-
-
-
- {/* note: its not actually clear to me whether toJS is necessary here. */}
-
- {props.error && (
-
- {JSON.stringify(props.error)}
-
- )}
-
-
-
+ Back to documents
+
+
+
+
+
+
+ Coming soon...
+
-
+
);
});
diff --git a/tailwind.config.js b/tailwind.config.js
index 11a57d0..b5605e1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,8 @@
import { fontFamily } from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */
+const plugin = require("tailwindcss/plugin");
+
export const darkMode = ["class"];
export const content = ["src/**/*.{ts,tsx}"];
export const theme = {
@@ -73,4 +75,20 @@ export const theme = {
},
},
};
-export const plugins = [require("tailwindcss-animate")];
+export const plugins = [
+ require("tailwindcss-animate"),
+ plugin(function ({ addUtilities }) {
+ addUtilities({
+ // The titlebar which replaces the native (default) titlebar is draggable; set .drag-none on
+ // inner elements that need to be clickable / interactive, like buttons, inputs, etc.
+ ".drag-none": {
+ "-webkit-app-region": "no-drag",
+ // "-webkit-user-drag": "none",
+ // "-khtml-user-drag": "none",
+ // "-moz-user-drag": "none",
+ // "-o-user-drag": "none",
+ // "user-drag": "none",
+ },
+ });
+ }),
+];