Bruno Docs

[donus3]

According to #361

This PR implements a documentation feature for each request. The "Docs" button is put by the query URL bar. When it is clicked the documentation section will show on the right side as a new pane.
The document content is a markdown text. This means we just put the markdown inside the docs section in bru or just edit the markdown in the documentation textarea in the app.

To edit the docs

To preview the docs

Hit cmd+s in order to save the document to the bru file

dummy.bru

meta {
  name: Dummy
  type: http
  seq: 1
}

get {
  url: https://dummyjson.com/products/1
  body: json
  auth: none
}

query {
  : 
}

auth:bearer {
  token: 
}

docs {
  ---
  __Advertisement :)__
  
  - __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
    resize in browser.
  - __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
    i18n with plurals support and easy syntax.
  
  You will like those projects!
  
  ---
  
  # h1 Heading 8-)
  ## h2 Heading
  ### h3 Heading
  #### h4 Heading
  ##### h5 Heading
  ###### h6 Heading
  
  
  ## Horizontal Rules
  
  ___
  
  ---
  
  ***
  
  
  ## Typographic replacements
  
  Enable typographer option to see result.
  
  (c) (C) (r) (R) (tm) (TM) (p) (P) +-
  
  test.. test... test..... test?..... test!....
  
  !!!!!! ???? ,,  -- ---
  
  "Smartypants, double quotes" and 'single quotes'
  
  
  ## Emphasis
  
  **This is bold text**
  
  __This is bold text__
  
  *This is italic text*
  
  _This is italic text_
  
  ~~Strikethrough~~
  
  
  ## Blockquotes
  
  
  > Blockquotes can also be nested...
  >> ...by using additional greater-than signs right next to each other...
  > > > ...or with spaces between arrows.
  
  
  ## Lists
  
  Unordered
  
  + Create a list by starting a line with `+`, `-`, or `*`
  + Sub-lists are made by indenting 2 spaces:
    - Marker character change forces new list start:
      * Ac tristique libero volutpat at
      + Facilisis in pretium nisl aliquet
      - Nulla volutpat aliquam velit
  + Very easy!
  
  Ordered
  
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  
  
  1. You can use sequential numbers...
  1. ...or keep all the numbers as `1.`
  
  Start numbering with offset:
  
  57. foo
  1. bar
  
  
  ## Code
  
  Inline `code`
  
  Indented code
  
      // Some comments
      line 1 of code
      line 2 of code
      line 3 of code
  
  
  Block code "fences"
  
  ```
  Sample text here...
  ```
  
  Syntax highlighting
  
  ``` js
  var foo = function (bar) {
    return bar++;
  };
  
  console.log(foo(5));
  ```
  
  ## Tables
  
  | Option | Description |
  | ------ | ----------- |
  | data   | path to data files to supply the data that will be passed into templates. |
  | engine | engine to be used for processing templates. Handlebars is the default. |
  | ext    | extension to be used for dest files. |
  
  Right aligned columns
  
  | Option | Description |
  | ------:| -----------:|
  | data   | path to data files to supply the data that will be passed into templates. |
  | engine | engine to be used for processing templates. Handlebars is the default. |
  | ext    | extension to be used for dest files. |
  
  
  ## Links
  
  [link text](http://dev.nodeca.com)
  
  [link with title](http://nodeca.github.io/pica/demo/ "title text!")
  
  Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
  
  
  ## Images
  
  ![Minion](https://octodex.github.com/images/minion.png)
  ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
  
  Like links, Images also have a footnote style syntax
  
  ![Alt text][id]
  
  With a reference later in the document defining the URL location:
  
  [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
  
  
  ## Plugins
  
  The killer feature of `markdown-it` is very effective support of
  [syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
  
  
  ### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
  
  > Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
  >
  > Shortcuts (emoticons): :-) :-( 8-) ;)
  
  see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
  
  
  ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
  
  - 19^th^
  - H~2~O
  
  
  ### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
  
  ++Inserted text++
  
  
  ### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
  
  ==Marked text==
  
  
  ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
  
  Footnote 1 link[^first].
  
  Footnote 2 link[^second].
  
  Inline footnote^[Text of inline footnote] definition.
  
  Duplicated footnote reference[^second].
  
  [^first]: Footnote **can have markup**
  
      and multiple paragraphs.
  
  [^second]: Footnote text.
  
  
  ### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
  
  Term 1
  
  :   Definition 1
  with lazy continuation.
  
  Term 2 with *inline markup*
  
  :   Definition 2
  
          { some code, part of Definition 2 }
  
      Third paragraph of definition 2.
  
  _Compact style:_
  
  Term 1
    ~ Definition 1
  
  Term 2
    ~ Definition 2a
    ~ Definition 2b
  
  
  ### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
  
  This is HTML abbreviation example.
  
  It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
  
  *[HTML]: Hyper Text Markup Language
  
  ### [Custom containers](https://github.com/markdown-it/markdown-it-container)
  
  ::: warning
  *here be dragons*
  :::
}

Open for you all to comment on the design idea. Thank you.

[helloanoop]

@donus3 This is nuts . Truly ❤️❤️❤️

Gonna review this PR today and have this merged.
You rock!

[helloanoop]

Hi @donus3 I have one feedback.

For now, let's add a new tab called as Docs inside the request pane next to the tests.
I understand that the request tabs are kind of getting lengthier.

Everything else looks good, Can you make this change ?

PS: We can revisit the approach later to provide the docs in a sidebar.

[donus3]

Hi @helloanoop Thank you for the feedback and I understand your concerns.

I've updated the as per your comment please help recheck the PR.

Thank you.

[helloanoop]

Hey @donus3 Great work ! Merged !!

PS: I had to revert the style updates on the right pane in the PR. 625a19e

When you have some time, please raise another and describing the reason and the benefits of the style updates around scrolling.

[gouravkr]

I would just like to add my vote for the documentation panel being in the sidebar for the following reasons:

1. It serves a different purpose to all the other tabs above the request pane. While all other tabs are for building and testing the request, docs are for reference
2. We'd often wish to refer to docs and request at the same time, whether we are writing the docs based on the request, or the request based on the docs. Having the ability to view them both together would be really nice. Otherwise we'd have to constantly keep switching between the two.

[MelGrubb]

I like the Docs tab, and I've documented a few of my queries, but lately I've fallen back on simply putting "#" comments directly in the request. This is because it's not obvious which requests have docs and which ones don't. If I write docs for a request, it's probably because they're important information to "future me" about how to use the thing (e.g. "Don't forget to set the ClientId variable first!") In cases like that, I would want the Docs tab to be the first thing I see, or at least be alerted to the fact that docs exist.

Perhaps making the tab labels bold when they have anything to say would work, but that would still be too subtle to grab users' attention, and might still get overlooked. Moving the Docs to a lower pane below the other tabs would work at the expense of some vertical space. Only auto-expanding that pane when there are docs to be read would get it out of the way for the majority of requests that don't have docs. I'm not sure what the best UI is. I just know that when I write docs, it's because I want to provide some important information about the request to other users, and I think that information should be more obvious.