This will be easy after #66 was merged

The tooltip is saying but it's fake. Wasn't implemented :P

For the sake of simplicity, just create an empty CodeBlock when user deleted all blocks

This should be pretty easy, just need add a new case to this pattern match

https://github.com/thangngoc89/rtop-ui/blob/6395a122980f1504fd51b7f6036a23548b15ca77/client/src_editor/Editor_CodeMirror.re#L132-L134

• When users trying to save a note that doesn't belong to them. Show a message warning about that. And offer creating a fork of the modified content
• Anonymous user: Track #57

Prior art could be seen here https://developer.apple.com/videos/play/wwdc2018/402/

(around 2 minute mark)

Tab : indentMore
Shift-Tab: indentLess

Pretty much a new docker image with the first 3 lines of current Dockerfile for frontend building

https://github.com/thangngoc89/rtop-ui/blob/9bdf5b413d9cb04e164440189178cb55b5da6b5b/Dockerfile#L1-L3

This would help speeding up now.sh build speed

You can do it here:

https://github.com/thangngoc89/rtop-ui/blob/f054918e9f47fc20861b7bd991e313005e8d1911/client/src_editor/Editor_Blocks.re#L269

set state.focusedBlock to the newly created block

Currently, it's too easy to delete a block, a little confirmation would be nice. And no confirmation needed for empty block

Reproduce:

• https://staging.rtop.khoanguyen.me/
• Focus on any editor
• Focus on title
• Type anything

A fix for this would be listening to blur event from CodeMirror just like focusEvent

https://github.com/thangngoc89/rtop-ui/blob/2b27acd776328ad4a0cba686a7a87540ddec7b3c/src_editor/Editor_CodeMirror.re#L111-L115

and set state.focusedBlock = None

Should be Ctrl + /. not sure how to this, but it's probably somewhere in https://codemirror.net/doc/manual.html#events

Also add a hint for shift-enter key (samething)

A nice UI touch would be decrease opacity of all widgets while evaluating

This is a main tracker for client side routing and pages, pretty everything are unimplemented but I need a place to keep track of ideas in my head.

IDs

I'm using NanoId to generate 22 characters id for pretty much everything that need random ids. It has smaller collision chance then UUID

Authentication

• Currently only Github login is supported. In the future, I can support passwordless login method. I want to avoid the responsibility of storing user's password

Sketches

/s/:sketch-id/

Design decisions:

• Having the url encoded of note content means that we always have an offline fallback when user is offline, and in the worst event, the server went down but all playground links are still available and well

/u/:user-id

List all notes of a user

codemirror/codemirror5@a7e29ee
codemirror/codemirror5@ff21fec

I want the data to be as portable as possible so here are some of my thoughts about data serialization and deserialization:

Source code format (.re, .ml):

Any notebook should be a valid ReasonML program.

When serialize a note into source code format, text block will be block comment like this:

/*:  # ReasonML playground */

(*:  # ReasonML playground *)

Notice the colon, it's used to distinguish between text block and actual code comment in deserialization.

Markdown format

~~Simply convert code blocks into markdown's codeblock with fences ~~

From @jordwalke in #98

Another approach to permanence, would be to have an export/import feature. Imagine importing a standard markdown file where `reason tags become the runnable example code blocks.

`reason-norun could become blocks embedded as code that doesn't become a runnable block, but instead is only syntax highlighted.

TODO:

• Source code format:
  • Serialize
  • Deserialize
• Markdown format:
  • Serialize
  • Deserialize

Top priority is to remove the read only mode. It's quite annoying.
This would allow user to freely play with the playground and save it to a fork when they hit save.

Some article for seting up:

• https://www.cypress.io/blog/2018/08/08/Fast-Tests-Tiny-Docker-Image/#
• https://github.com/bahmutov/tiny-blog/blob/master/package.json
• Stubing GraphQL responses cypress-io/cypress-documentation#122

When this happens, inform user, and let's them choose what action to take:

• Use server data
• Use url encoded data
• Show a diff view before deciding

• Add a new column calls edit_token in note table. Noone could select this column. And this should be nullable.
• On saving a new note anonymously, set the edit_token.
• Save edit_token in localStorage
• On updating a new anonymous note, send the edit_token for permission checking.

That hint is really distracting, only displays it for last code block is reasonable.

So here is the loop for displaying blocks https://github.com/thangngoc89/rtop-ui/blob/master/src_editor/Editor_Page.re#L171

The ideas is you find a last code block id by iterating state.blocks from end, so you only display blockHint when b_id == blockId

Thinking about Ctrl+Shift+I (like VSCode)

If you write something like:

let x = 1;
while (true) {};

Anything else you add after, even after removing the infinite loop, will not be run

(it doesn't crash the tab or anything all that bad though!)

From kennetpostigo on Discord

1. Evaluate only highlighted or active cursor line and any of the previous lines it depends on
2. If the evaluated output isn't long show it along side the actual line.
3. If it's really long output then show it directly underneath that line and allow the output to be collapsible
4. evaluate each cell onChange instead of shift + enter, of course add something like debounce

Currently for separating each directive (for executing and getting result back), I'm using a very dumb approach: try to execute the code when encountering a semicolon. This works perfectly fine in ReasonML. For OCaml, there is ;; that could be used as separator. It's a valid syntax but nobody uses it in real code anyway.

So for supporting OCaml syntax, there are 3 steps:

• add UI for ocaml syntax, user must use ;; for separating structures (ui inspirations
  https://rebench.github.io/ (press on the red RED button on top-left corner)
• use toplevel parser to slice code into directives
• support converting reason-ocaml syntax convertion. For re -> ml, pipe the result through ocaml format because refmt's output is so bad

Unlike the normal compiler, when encountering an error (syntax error, type error) toplevel skips the current directive and move on to the next on.

To simulate a normal compiler behaviour, I hides all all warnings/errors report after the first error. The same thing needs to be done for type evaluation as well.

the idea is hook up to codemirror's goup and godown event, check if cursor is at the begin/end of buffer and focus on next/previous block

For new users, it would be confuse to know the true power of rtop-ui.

These guys, they are default button

Use your imagination, I have no ideas how this should look like

Everything is immutable except index.html. So we can cache everything for a year :D

See for details on headers rewrite: https://github.com/zeit/serve-handler/blob/master/README.md#rewrites-array

Edit this file now.json

Use doc.markText to replace the link with another node with replaceWith option. Next thing is to figure out how to find the links

• use codemirror markdown mode https://codemirror.net/mode/gfm/index.html
• remove all colors, make it black and grey. see
  http://opoloo.github.io/maxdown/ for theming inspiration

I already have the localStorage listener in place. You for a better oauth experience, we can open a new pop up

This happens with monospace font (FiraCode) used in code editor. I already extracted the font into a variable here https://github.com/thangngoc89/rtop-ui/blob/9256862a1795ecbb21a09482fbccd2ec86034e93/client/src/App.css#L2

You can add fontfaceobserver and append a new class to body tag with the variable modifier

https://rtop.khoa.xyz/s/6NYoiYN9cf5Oz8IoNUAJBP/C4CwlgzgBJUIZQHYFMDuSD2xlA---N4IgRgNg9gxg1gZxALgNqgJYBMUgC4YCMGAVgCIBiASoQI4CKArAA4BCAGgIYDqA7AFKcMMEABoQWTnk4pQcDADscyEDChYApmJAA3ThACuWlcwBOivAH0NSiIo0AKADogMeAAQB3KKcTuoCu4AtgCe7hjMnFguAJQA3E4KiRAaHpzuALzuhHEgAL55opjKINwAagYAKgCC7ACczITMMNWeANIAwhAACgAebQByzABs2pLSsiDySrh4Gr142nqGxvgAFhgI4VvpcwvukLBwiYkAxKfuIVAG7ghr1xBY7gYIGu5rGlGKAObuAEwnBRgDQwTgvN54D7uAh4FJeDAQCAHN7zZg+OZPThbD5fBS-QjufKFYq4BQYKj8OAAGU4XQAmt8AGZBOBwOpkIL8ABeZTWYykMmQckUJTUmiW+iMuDMFksFgcnHiRKKrhKtAALFSAMoUdVYACqAFF1bQSABxUysSp1Q0W9imfkTIVTEWzeaLcTLKUqfRIsVvQ7wHamN5qBQKEEY9xY6O3H5wsxQb6mThBA5hSFvTycEJEgC6eSAA

This would solve several issues like:

• Working loading state: #1
• Prevent infinite loops: #39
• More type safety
• More browser supports (comlink uses ES6 proxy)

I actually have no idea how to achieving this yet so if you have some ideas, please comment

• Travis
• Now

Should be just like this:

https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example

Use: https://github.com/typicode/husky

We can keep track of currently focused codeblock by tapping into CodeMirror's event https://codemirror.net/doc/manual.html#events

Currently, on the Note page has the correct title, setup Helmet for all pages`

Right now if you have a code block then a text block, it's not easy to move the text block above the code without copy/pasting the content. Would be nice to have a move up/down button to control the blocks.

type network = Bitcoin | Testnet | Litecoin;

[@bs.module "bitcoinjs-lib"] [@bs.new] external new_tx_builder : network => 'a = "TransactionBuilder";

let createTxBuilder = (~network: option(network)=?, ()) => {
  let network = switch (network) {
  | Some(n) => n
  | None => Testnet
  };
  new_tx_builder(network);
};

This is OCaml's compiler acting up. This is the error message:

File "", Characters -1--1:
Error: The external function `TransactionBuilder' is not available

Is such thing possible?
Also, catch error throws by importScript

It would be nice to be able to export the entire contents of the page to some text format that can be re-imported later.

I think ideally it would work like other tools where the content is encoded in the URL, but perhaps this is easier to implement and will make the tool usable more quickly.