thien-do / samuwrite Goto Github PK

Not high priority, just note for the future

https://web.dev/file-system-access/#drag-and-drop-integration

Because our current "colorful" palette is only for dark theme:

What should be done is to have one for dark and one for light, and select the correct one based on theme.scheme.

Clean this: https://unpkg.com/@tailwindcss/[email protected]/dist/typography.min.css

• The font size should rely on the editor size?
• Should not use media query

Click on the save button should:

• Save to current handle if existed
• Open file picker then save to picked file if handle does not exist (and also set the handle for later save)

Click on the more button next to save button should open a menu:

• Save as (cmd shift s) should always act like save new file (open file picker, update file handle)

Clean this CSS https://unpkg.com/@primer/[email protected]/dist/markdown.css

It should be truncated, or something that would look better.

Use the VERCEL_TOKEN secret

It would be great if we can have both:

• Production deployment when master has new commit
• Preview deployment for each PR

Text letter getting closer on mouse select or double click to long text.

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0

Firefox's console:

Add target=_blank to all hyperlink when render markdown.

It should be absolute path or relative path (not both).

Follow up of #24 . After #30 , we have a select to switch between themes. Now we need to add more themes. Some recommendations:

• carbon
• dracula (or luna)
• gruvbox dark (just the dark one, the light one seems not as good)
• material
• nord (maybe with blue/cyan caret?)
• our theme (for fun)
• paper (maybe with blue caret?)
• peaches (for the ladies?)
• serika and serika dark
• stealth (not really good for writing but interesting idea)

Note the format of bushido.css and serika-dark.css. To be specific, compare to the css from MonkeyType:

• we need a new variable --bg-color-rgb
• we don't have the extra error colors

When the user is about to have an action that would destroy the current content of the editor, we should warn them if the content is not saved. For example:

• When open another file
• When create a new file

For the moment just window.confirm should be enough

Look like we're gonna need a PostCSS config https://parceljs.org/css.html#postcss

Firefox is the only major browser that doesn't support backdrop out of the box yet:

• https://caniuse.com/?search=backdrop
• https://platform-status.mozilla.org/#css-backdrop-filter

Since we use it in several important places (such as our toolbar), the app doesn't look good on Firefox:

The difficult here is that backdrop requires a partially transparent background (alpha < 1). If the alpha is too high (e.g. 0.9) then it looks good on Firefox but looks bad on others (with blur background). If the alpha is good for blur (e.g. 0.5) then the opposite happens.

What should be done here is to somehow set different alpha value based on whether the browser supports backdrop filter or not. See Apple: the opacity is 0.72 in Edge but 0.9 in Firefox

How:

https://iamsteve.me/blog/feature-detection-with-css

Open preview panel, open new file

Expect: preview panel update new content
Actual: not update

Added the preview pane, now we need to fill it with the actual HTML rendered from the markdown. We should use the custom @vimdotmd/markdown npm, which uses unified under. It adds the "source-line" data to the HTML so we can sync the scroll with the editor.

Some reference code from vim.md:

To convert editor's content to HTML:

import { toHTML } from "@vimdotmd/markdown";
import { Editor } from "app/editor/editor";
import { useEffect, useState } from "react";

// Update HTML on editor's value changes
export const usePreviewHtml = (editor: Editor): string => {
	const [html, setHtml] = useState("");

	useEffect(() => {
		if (editor === null) return;
		const syncHtml = (cm: CodeMirror.Editor) => {
			const value = cm.getValue();
			setHtml(toHTML(value));
		};
		syncHtml(editor); // Initial value
		editor.on("change", syncHtml);
		return () => void editor.off("change", syncHtml);
	}, [editor]);

	return html;
};

To sync the scroll from editor:

import { Editor } from "app/editor/editor";
import { useEffect, useRef } from "react";

type Ref = React.RefObject<HTMLDivElement>;

const cursorActivityListener = (editor: CodeMirror.Editor): void => {
	const line = editor.getCursor().line;
	if (line === 0) {
		const container = document.querySelector(".markdown-body");
		container?.parentElement?.scrollTo({ top: 0, behavior: "smooth" });
	} else {
		const element = document.querySelector(`[data-line="${line}"]`);
		element?.scrollIntoView({ block: "nearest", behavior: "smooth" });
	}
};

export const usePreviewScroll = (editor: Editor): Ref => {
	const containerRef = useRef(null);

	useEffect(() => {
		if (editor === null) return;
		editor.on("cursorActivity", cursorActivityListener);
		return () => editor.off("cursorActivity", cursorActivityListener);
	}, [editor]);

	return containerRef;
};

Parcel v2 has several issues so far:

• The distDir option is not reliable (parcel-bundler/parcel#6756) and we need to build the workers separately (yarn build-workers).
• The built-in CSS Modules support does not work well with TypeScript (parcel-bundler/parcel#6758). This yield a warning and break CSS tree shaking, but not a big deal.
• The built-in CSS Modules also does not work well with custom PostCSS config (parcel-bundler/parcel#6853). This can be workaround with a little bit complicated, direct config for PostCSS Modules plugin.

So far none of these are blocking or serious issues, so the priority is low now.

Layout should be a part of prefs

The behaviour should be similar to https://monkeytype.com/ and iA Writer:

• When the app is loaded, the toolbar is shown
• When the user starts typing, the toolbar is faded out
• When the mouse cursor moves, the toolbar is faded in (with a small delay?)

Currently we use the File System Access API directly. It is only supported in chromium browsers. We should use the browser-fs-access library so that it can fallback to other mechanisms in non-chromium browsers.

Some notes:

• In fallback cases (non-chromium), it's likely we cannot have the "reopen" function so just hide the button?

• TypeScript 4.4 parcel-bundler/parcel#6784

Maybe just onKeyDown at App would be sufficient? No need to have mouse trap?

Open recent file is not supported. Save and Save as on non-chromium browsers are the same, so that we need to disable one (?).

1. Uncheck "Preview split" checkbox in Preview menu
2. Turn on preview (cmd P)
3. Turn off preview (cmd P again)

Expected: Editor is focused
Actual: Editor is not focused

References:

• https://www.startpage.com/en/search/privacy-policy.html
• https://duckduckgo.com/privacy
• https://ia.net/writer/privacy
• https://monkeytype.com/privacy-policy

It seems the smooth caret is received well :<

From @hieunguyen135

From @iamquang95

From @ng-hai

#22 should add the HTML content but we should have another PR to add the CSS for that HTML. Some notes:

• We only have one global CSS which is modern normalize, so it's likely whatever CSS put into the preview will not conflict
• The CSS for preview should be scoped (like Tailwind's prose class)
• Some suggestions: (the first PR should just pick 1, we will have other PRs for others)
  • https://github.com/tailwindlabs/tailwindcss-typography
  • https://github.com/sindresorhus/github-markdown-css
  • https://kyleamathews.github.io/typography.js/

The scroll of preview should follow the cursor in editor

• If the user opens a file (aka the handle state in App is not null) then its name should be reflected on the tab's title ("foo.md - Samuwrite")
• If the user hasn't open a file (just load the app) then the title should be just "Samuwrite"
• If the user opens a file and has unsaved changes, an asterisk should be prepended ("* foo.md - Samuwrite")
• If the user does not have a file but has unsaved changes, an asterisk should not be prepended (still "Samuwrite")

Hmm, I think it should be exit preview mode 🙏

• Should be able to scroll anywhere, not just inside the editor
• More?

Well, at least make it work with grammarly.

A block of code have only one data-line, which could leads to a huge block of code will freeze the preview panel until we meet a new line or block of code.

#24 should add a dropdown to select theme. However, it's not very intuitive. I think we should limit our themes to be 10 options, and place them as a grid (5 columns x 2 rows). Each grid item is a square that is themed with that option (e.g. the background, the text, the caret):

The dropdown to select font size:

Should be a slider, with the value (or a dropdown) on the left side:

I think we can use https://github.com/jaywcjlove/hotkeys

We just need to bind the shortcuts first. The actual implementation can be done later.

Esc inside prefs should just close the popover and go back to the toolbar. Another esc from the toolbar will take the user to editor.

This is actually an upstream bug, that HUI's popover does not stop the propagation. It's fixed and waiting for release tailwindlabs/headlessui#779

Currently we hide the toolbar on "onDidScrollChange", this means it listens to many scroll changes, including the ScrollHeightChanged, which caused when we toggle the Preview pane or when we load a new file. This is not expected.

Instead, we should only hide the toolbar when the scroll position is changed, i.e.e ScrollTopChanged or ScrollLeftChanged.

See:

• https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#ondidscrollchange
• https://microsoft.github.io/monaco-editor/api/interfaces/monaco.iscrollevent.html

Allow users to choose the template for the Preview panel from the preview menu in the toolbar

Sometimes, I accidentally refresh the page and lose my work (it would be one hour long work 🙏). It would be great if I could restore that work.

We need disable word wrap for the long line...

Clicking on this button should toggle vim mode:

Vim mode is already provided behind an option when creating new editor:

https://github.com/vimdotmd/vimdotmd-3/blob/63fc48d796dddcf31fc19b245b8b62d6ea473962/src/app/editor/editor.tsx#L41

Things to keep in mind while working on this:

• It's better if we don't need to reload the whole app or re-create the editor when toggling vim mode
• Remember to call vimMode.dispose when necessary
• Maybe the vim mode should no longer be a part of the editor creation, but as a side effect afterward

The open menu should look like this:

Notes:

• The connect items should show Coming soon when clicking on them
• The recent area should show max. 5 items, sorted by opening order -> this is too difficult, we will just show the most recent one for now)
• If no recent then should show a message like "your recently opened files will be shown here" -> No longer applicable due to the above change
• Last opened one is assigned Cmd Shift O -> Should be handled in #2
• "New file" should be assigned to Cmd N, set file handle to null (warn for unsaved), editor to blank -> Done, the shortcut is handled in #2

When click on the preference button, there should be a popover that has a dropdown to select theme.

• We don't need to style the dropdown, just need to make the functionality works first.
• The current theme is called "bushido.css", find the name to see how it is used.
• The theme should only set the CSS variables. See "bushido.css".
• However, the colors in the editor are programmatically calculated from the CSS, so we may need to re-calculate them (like in the case of editor.layout() when preview pane is toggled)
• Should start with some themes from MonkeyType:
  • carbon
  • dracula (or luna)
  • gruvbox dark (just the dark one, the light one seems not as good)
  • material
  • nord (maybe with blue/cyan caret?)
  • our theme (for fun)
  • paper (maybe with blue caret?)
  • peaches (for the ladies?)
  • serika and serika dark
  • stealth (not really good for writing but interesting idea)
• The criteria to select theme is: cover different hues and has distinct caret color

It is necessary for several places:

• Set the correct base theme (e.g. vs or vs-dark) for the editor (so things like cursor image works properly)
• Lighten or darken the bg-color to have the color for preview
• Set the correct font weight modifier

1. iA Writer
2. Caret
3. Ulysses
4. Nota (as @thien-do said that it is Caret v2)