Hello
thien-do / samuwrite Goto Github PK
View Code? Open in Web Editor NEWWIP editor
Home Page: https://samuwrite.com
WIP editor
Home Page: https://samuwrite.com
Hello
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:
samuwrite/src/editor/state/theme/rules.ts
Lines 6 to 14 in 397c94c
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
Click on the save button should:
Click on the more button next to save button should open a menu:
Use the VERCEL_TOKEN
secret
It would be great if we can have both:
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:
Note the format of bushido.css and serika-dark.css. To be specific, compare to the css from MonkeyType:
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:
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:
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:
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:
distDir
option is not reliable (parcel-bundler/parcel#6756) and we need to build the workers separately (yarn build-workers
).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:
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:
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 (?).
Expected: Editor is focused
Actual: Editor is not focused
#22 should add the HTML content but we should have another PR to add the CSS for that HTML. Some notes:
The scroll of preview should follow the cursor in editor
handle
state in App is not null) then its name should be reflected on the tab's title ("foo.md - Samuwrite")Hmm, I think it should be exit preview mode ๐
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):
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:
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:
Things to keep in mind while working on this:
The open menu should look like this:
Notes:
When click on the preference button, there should be a popover that has a dropdown to select theme.
It is necessary for several places:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.