tailordev / monod Goto Github PK

View Code? Open in Web Editor NEW

874.0 21.0 61.0 3.37 MB

:notebook: Our cool, secure, and offline-first Markdown editor.

Home Page: https://monod.lelab.tailordev.fr/

License: MIT License

JavaScript 66.79% CSS 26.36% Shell 0.09% HTML 0.53% TeX 6.23%

offline-first markdown-editor secure

monod's People

Contributors

Stargazers

Watchers

Forkers

maptracker astannard nolboo shinzui haigiodhh qianxueseng-com quirkycode cuulee rlugojr jirikuncar mihirk dieface msports neuroradiology ggaulard notsatyarth richardy2012 adirelle whitehsu gar finalfreq patrickseamars abeyer stevensona darkdare tmpace prayashm stuartlynn zdoc01 krichprollsch kunamatata jacquesbh cybernetics pauldebus fstfwd priestd09 wooodhead monsieurbiz vijo bebatut dolanor-galaxy theuncanny rohitarava9 syedpeer jeffladiray mytech-today-now alexanderankin

monod's Issues

Revision introduced in #55 introduces error on Heroku

Heroku deployment fails because of #55 as the applicatio does not live in a Git-based directory:

remote:        Error: Command failed: git rev-parse HEAD
remote:        fatal: Not a git repository (or any parent up to mount point /tmp)
remote:        Stopping at filesystem boundary (GIT_DISCOVERY_ACROSS_FILESYSTEM not set)

We can fix it by using the SOURCE_VERSION env var if available. As I think we will have the same issue with Heaven, let's use SHA too:

const VERSION = process.env.SOURCE_VERSION || process.env.SHA || childProces....;

I found an error. You can't escape * inside emphasis, as in * Look a \* symbol*.

cf. https://www.reddit.com/r/programming/comments/4ace7f/monod_the_markdown_editor/

Allow html in raw content

This may be a security issue, but we must allow html tags and avoid sanitizing raw content. This is part of the markdown specs.

Clarify application dev/production dependencies

In my opinion, as we make a build for production, almost nothing is required for production except lazy loaded assets as CodeMirror modes or application sprites. The package.json file should be fixed accordingly.

Improve app version rendering

As suggested by @willdurand the application version should be stored in the <body>'s data-monod-version attribute and the dedicated block should be part of the application's .layout. At this time it is rendered without styles before the application and it's really ugly/bad.

Version appears on the PDF

We should not display the version element in the print style.

Add codemirror modes 'hot loading' for gfm code blocks

At this time, we need to explicitly import codemirror supported modes to add syntax highlighting for markdown code blocks. It seems less than ideal.

Design a protocol for rendering speed test

I would like to collect metrics to objectively evaluate improvements related to the recent chunks rendering strategy. Moreover, benchmark our editor compared to stackedit (or other competitors) with the same protocol would be a plus. This study may be published in a new blog post.

I have not done my homework yet, but @willdurand do you have an idea how to programmatically access to relevant metrics? With Chrome developer tools? Or should we use a headless browser like PhantomJS?

vertical handler does not trigger any event when click is performed on arrows

Emojis rendering is surprising

I am surprised, we should have seen this before...

Include default table styles in preview

It's missing dude.

Add emoji support in front-matter values

It appears that gray-matter fails at parsing YAML front-matter with an emoji 😢

Edit (2016-09-28): it is required to enclose Emoji with quotes because it is how YAML is supposed to work:

variable: "Hello :tada:"

This issue is therefore about rendering Emoji from the YAML front-matter in the preview of a template, which is... challenging.

Git revision

// webpack.config.js

const childProcess = require('child_process');

const VERSION = childProcess.execSync('git rev-parse HEAD').toString();

Then, we can edit the HtmlWebpackPlugin:

// webpack.config.js

        new HtmlWebpackPlugin({
            // Here, we use the `html-webpack-template` npm package
            template: 'lib/webpack-template.ejs',
            // The page's title is read from npm's `package.json` file
            title: pkg.name,
            version: VERSION,
            // Main "div" `id`
            appMountId: 'app',
            // No need to inject assets in the given template as it is handled
            // by the template itself
            inject: false
        })

And finally, the template:

<!-- lib/webpack-template.ejs -->
<p class="git-version"><%= htmlWebpackPlugin.options.version %></p>

Front Matter support

Determine the best way to retrieve front matter data (YAML parsing may be an option).

Restore codemirror gfm mode

Damned, we have lost syntax highlighting 😭

Scrolling boundary conditions

Top boundary conditions can be optimize with something like:

if (top <= clientHeight / 2) {
  this.props.doUpdatePosition(top / height);
} else {
  this.props.doUpdatePosition((top + clientHeight) / height);
}

Test the 'change' event from Codemirror component

We need to spend more time to test this.

Monod crashes when rendering html nested blocks

The app crashes in dev (not in production) with FF 44.0.2 (MacOSX) when trying to render preview for the first time. Console message is:

Error: Danger: Did not assign to every index of resultList.

Still investigating.

The app should create a new URI (with UUID) to edit different documents

Uncaught ReferenceError: jQuery is not defined

in vendor.[hash].js file

Staging env seems broken

CSS optim?

WDYT?

Focus mode is broken

We cannot have a full width in focus mode 😡

Add monod favicon

uncaught exception: No document id

I noticed this exception when editing a new file on release 82bead4 deployed in staging.

gray-matter warnings

See: https://gist.github.com/aff45fdce728a8af356af952d59e1072 :-(

Scrolling is not smooth anymore

This seems to still be a problem.

Add encryption (client side) à la ZeroBin (zero knowledge enc)

Should be done after #66

Update development documentation

One need to update development documentation to add the following:

In development you will need to serve the app and the back-end separately (in two terminal sessions):

$ npm start  # back-end

---
$ npm run dev  # the app

If it's the first time you run the app, you will need to create MONOD_DATA_DIR (defaults to data):

$ mkdir data

Check we support markdown extras syntax

Check list:

Update preview scrolling while editing the last line of a long document

It would be nice to scroll the preview to the bottom while editing the bottom of a document. To reproduce this scenario:

Add a long text to the editor (longer than the ClientVerticalHeight)
Scroll to bottom
Everything is now sync
Add a new line at the bottom and start typing
You feel a bit frustrated for not seeing live preview on the right

Offline first with service workers

Add piwik analytics

Might be a useful metric about the impact of what we did!

Add three templates

We have to determine what a "template" is first.

Add basic backend to store documents so that we can share them

Add a link to TailorDev website in the footer

Switch back to a single style sheet

After testing a separated print style sheet on google chrome, it seems that the same behavior occurs as with a single style sheet with print media. Hence, we need to rollback to a single style sheet to be able to test it in development.

Server error (500 or 400)

handle client error
handle server error

Apr 01 15:12:58 splinter docker/monod-staging:  { [Error: ENOENT: no such file or directory, open '/data/a1ce5cdc-1766-4364-ac6d-2a849ffc45e7']
Apr 01 15:12:59 splinter docker/monod-staging:    errno: -2,
Apr 01 15:12:59 splinter docker/monod-staging:    code: 'ENOENT',
Apr 01 15:12:59 splinter docker/monod-staging:    syscall: 'open',
Apr 01 15:12:59 splinter docker/monod-staging:    path: '/data/a1ce5cdc-1766-4364-ac6d-2a849ffc45e7' }

Allow browser spell checking for markdown raw content.

As reported here:
https://twitter.com/jbarnoud/status/717354016624214017

[preview] 'nextState' is defined but never used

Small error log in the console:

ERROR in ./app/components/Preview.jsx

/Users/maupetit/WebDev/TailorDev/tdit/app/components/Preview.jsx
  50:36  error  'nextState' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

Add redirection from Heroku to `monod.lelab.tailordev.fr`

set up redirection
update blog posts
tweet

Improve report template

Purpose

The idea is to make the report template a little bit more pretty. We think that Overleaf is a good source for inspiration: https://www.overleaf.com/gallery/tagged/report.

A report is a document that contains information about a project of any kind (thesis, internship, milestone, etc.). We would like to have the following information:

title
date
version
(optionally) reporter name(s)
(optionally) institution name

The report template could add a first-page like this one, and then leave the rest of the document "as is" (with a reader-friendly font). It is just an example of what could be done ;-)

Proposal

The code of this template is here: app/components/Templates/Report.jsx. It is a React JSX component that owns its style and metadata (extra variables). We would like to improve its current look but we don't have many expectation except to make it more useful and nice. It is quite subjective, but we are open to any suggestion as @jmaupetit said in his comment below.

Cheers!

Issue last updated by @willdurand.

Introducing Monod
=================

> **TL;DR** This editor is the first experiment we wanted to tackle at **Le lab**. This _week #1 release_ is a pure client-side application written with [React](https://facebook.github.io/react/) by the good folks at [TailorDev](https://tailordev.fr)!

Read more about how and why we build Monod at: https://tailordev.fr/blog/.

See: we have code & Emoji support, yay! :clap:

``` python
def hello():
    print("Have fun with Monod!")

Play with this page and [give us feedback](mailto:[email protected]?subject=About Monod). We would ❤️ to ear from you!

Add support for font-awesome icons

Come on, we have emoji. Once #13 is fixed, we can include font-awesome for awesome content.

Improve modes switch transition

We need to work on transitions to switch between editor modes (focus/preview/reading).