Online WYSIWYG GFM editor. Same look as Github's markdown. Supports HTML-in-Markdown feat. (eg. center-align/superscript/underline)
Home Page: https://evitanrelta.github.io/markgh
Online markdown editor for 
<h1 align="center">
MarkGH <img src="./assets/github_logo.png" height="30" />
</h1>
Online markdown editor for <img src="./assets/github_logo.png" height="25" />
* Avoid writing **_raw markdown_**
* Edit it like a **_Word document_**
NodeViewContent and NodeViewWrapper overrides the whiteSpace style, as shown:
return value of
NodeViewContent:
Which prevents us from changing the whiteSpace styling:
Rendered HTML:
Which forces our text in codeblocks to wrap instead of having a horizontal overflow scrollbar:
Expected:
I've already submitted an issue (ueberdosis/tiptap#2883) on the TipTap repo, and a pull request (ueberdosis/tiptap#2884) to fix it.
But for now, we'll likely have to temporarily patch it on our side.
VSCode has updated their Typescript version, which added the feature to prevent organizing specific imports (like CSS overwriting files that needs to be imported last).
Quote from the Typescript PR:
when organizing imports in each block of newline-contiguousimport c from "C"; import d from "D"; import a from "A"; import b from "B";turns into
import c from "C"; import a from "A"; import b from "B"; import d from "D";
Thus, we can now properly import the customCss files after the githubMarkdownCss files, and remove unnecessary !important CSS property that was previously needed.
80 is seriously too short
But 120 IMO is too long
To be able to login to Github, and stay logged-in after refreshing.
Left: Expected coloring
Right: What's rendered
Its's caused by hljs adding both hljs-tag and hljs-attr to the same element, which causes them to override each other's CSS
TipTap editor wraps the contents of li tags in p tags, as shown:
which causes the spacing between list items to be bigger, as shown (left: original, right: TipTap):
We should create a published branch that when receiving a new push, will automatically build & publish it via gh-pages using Github Actions workflow.
Since, currently, the site is published (via gh-pages) from any branch/commits (basically whenever we feel like it), without any documentation on which commit the published site is using, having a dedicated published branch will also document which commits are included in the published Github Page.
TipTap adds invisible elements to the back of some elements, as shown:
which produces artifacts during the HTML-to-Markdown conversion, as shown:
Similar to GitHub's feature for copying code
align, width, height) on table elements| Left Header | Right Header |
| ----------- | ------------ |
| left | a |
| asd | aaaaaa |
cell.innerText which doesn't have any formatting)| Left-aligned | Center-aligned | Right-aligned |
| :--- | :---: | ---: |
| git status | git status | git status |
| git diff | git diff | git diff |
After reloading the website, there'll be artifacts such as newlines and text (eg. "LanguageLanguage" as shown in gif below):
Currently, TipTap's TextAlign extension sets alignment using inline styles, as shown:
But since Github's markdown uses the align attribute (eg. <h1 align="center">) instead, perhaps extending the TextAlign extension to use align attribute too would be easier on the HTML-to-Markdown converter.
When un-codeblocking a multi-lined codeblock, it gets converted into 1 paragraph with no <br> linebreak elements.
Thus, when you try to edit that paragraph, it'll suddenly collapse into 1 line.
For now, #8 can be fixed by applying the below CSS to every BulletList / OrderedList TipTap node.
.markdown-body ol.no-list-item-spacing > li > p,
.markdown-body ul.no-list-item-spacing > li > p {
margin: 0 !important;
}I've yet to figured out how to create an TipTap extension for the ol / ul element. I've only managed to add the classname to the li element in the fix-008-list-item-spacing branch.
When you press and hold a key in the editor, the input is laggy, as shown:
If you enable Show Markdown and press and hold a key in the editor, it will not update the editor until u let go.
Currently, a mix of regular JSX elements and MUI components are being used.
Which can cause problems when changing colorschemes/MUI-themes later on, as the JSX elements might not inherit the color changes.
For example: div can be swapped out with MUI's Box or Container
When creating a new codeblock, user is unable to type anything inside it, as shown:
User needs to press Enter before being able to type. However, this problem seems to go away when disabling Github's markdown's CSS:
A similar reported problem (ueberdosis/tiptap#728) also suggests that it's due to CSS.
You cannot type outside and before a codeblock.
Meaning that if a codeblock is the first thing in the editor, and you want to type something before it, you'll need un-codeblock, type something before it, then codeblock the section agn.
Oftentimes, PRs and Issues depends on another PR/Issue being merged/implemented first.
dependent-issues is a Github Actions that checks for those dependencies.
States such as the current markdown text, and the import-into-editor function is used in many components. Thus it'd be useful to abstract them out to a global store using Redux.
States to track using redux:
Its an ongoing Github Issue at TipTap to develop the extension: ueberdosis/tiptap#1354 & ueberdosis/tiptap#333
An old Vue implementation can be found here: ueberdosis/tiptap#333 (comment)
Error message:
Can be disabled via:
https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data
When converting Markdown to HTML, an extra newline is added at the bottom of codeblocks:
Likely due to MarkdownIt having a \n character at the end of codeblocks:
Currently, the formatting buttons of TipTap are bareboned, as shown:
They need to be redesigned to icon-buttons, similar to Google Docs:
Or like QuillJS:
Will likely need to add as keyboard shortcuts: https://tiptap.dev/guide/custom-extensions#keyboard-shortcuts
Based on: ueberdosis/tiptap#2364
Known issue: react-grid-layout/react-resizable#51
A suggested fix is to set the size constraints to match the ratio: react-grid-layout/react-resizable#51 (comment)
Reloading the webpage clears the syntax-language input box.
Only happens to the first codeblock, as its likely due to React reusing the codeblock element, and not unmounting-remounting the element.
Based on: https://superuser.com/a/1389094
Its possible to add specify the syntax-highlighting language in <pre><code> HTML-in-Markdown codeblocks using lang attribute, as shown:
<pre lang="javascript"><code>const x
</code></pre>Thus, the converter should support it.
You can add <br> in the editor by pressing Shift-Enter.
But, currently, <br> is ignored by the Turndown converter.
Containers and buttons are out of alignment on my laptop screen which is 4:3
Elements (like images) aren't allowed in Tiptip editor's codeblocks, but can be added to Github's markdown using HTML syntax
Like this:
Thus, it should be allowed in the editor.
To convert them to tsx during next spring cleaning
QuillJS hasn't had any release since 2019. A few of their recent pull-request have been approved (indicating some activity), but there's currently 1.1k open issues (indicating the repo isn't well-maintained) and there's no release date for the next version (v2.0.0). There's also many Issues on their Github asking if QuillJS is dead (eg. 1, 2, 3, 4)
The documentation for customisation is also IMO lacking.
There's also features that we need (eg. image resizing, insert image via URL, nested codeblocks/quotes, set language for syntax highlighting etc.) that QuillJS doesn't support; and many 3rd-party QuillJS modules that implements those feats. (eg. quill-image-resize-module) are outdated and don't work anymore.
Thus, we should switch our rich-text editor library. Some libraries were suggested on a QuillJS's issue, including:
Currently, according to Github, the majority of the code is CSS. Which might be a bit misleading since this is suppose to be a JS/Typescript/React project.
Perhaps, we could move the Github CSS files (the biggest CSS files) to another repo, so that this repo will be labeled as a Typescript project?
Or somehow ignore them in Github's language statistics?
Currently, when editing in the TipTap's editor, a solid black line appears.
TipTap has an extension already, which highlights using a library called lowlight, which is based on highlight.js, the same highlighter as QuillJS. So hopefully it won't be too hard to implement.
https://tiptap.dev/examples/syntax-highlighting also provides an example on adding a dropdown menu to select the syntax language:
Typescript keeps warning about anonymous default exports.
Anonymous default exports also has problems with being unable to declare the export type (microsoft/TypeScript#13626).
And Typescript might not be able to infer the export type too:
Thus, we should replace them with named export. From this:
import Code from '@tiptap/extension-code'
export default Code.extend({ excludes: '' })To this:
import Code from '@tiptap/extension-code'
export const CodeNoExcludes = Code.extend({ excludes: '' })Attempting to drag-highlight images on TipTap editor doesn't highlight the image (but highlights the surrounding text).
Though, if you try copy-pasting it, it will copy the image.
Mentioned on this TipTap Github Issue
TextSelection endpoint not pointing into a node with inline content (doc) error in the console:
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.