GNS3 / gns3-web-ui

WebUI implementation for GNS3
GNU General Public License v3.0
149 stars 52 forks source link

Project readme support #952

Closed grossmj closed 3 years ago

grossmj commented 4 years ago

Starting with GNS3 2.3, project readme files support Markdown format.

An user can edit the README file using File -> Edit project. The file can be edited in plain text or Markdown:

Screenshot from 2020-07-31 14-33-37

The file can be previewed, similar to what is done on GitHub:

Screenshot from 2020-07-31 14-33-45

The is a new setting to automatically open the readme when a project is opened (set by default).

Screenshot from 2020-07-31 14-34-10

The readme is automatically shown when the project is opened:

Screenshot from 2020-07-31 14-34-28

The file content is retrieved from the server using a POST request on /v2/projects/{project_id}/files/README.txt

piotrpekala7 commented 4 years ago

Because we use angular material components in our application I tried to use this package https://www.npmjs.com/package/mat-markdown-editor mat-markdown-editor - it has very good design, example here: https://stackblitz.com/edit/angular-w4tejv?file=src%2Fapp%2Fapp.module.ts

piotrpekala7 commented 4 years ago

unfortunately this package doesn't work with ivy compiler (which is part of Angular 10 framework), we have following error:

ERROR in Failed to compile entry-point mat-markdown-editor (es2015 as esm2015) due to compilation errors:
node_modules/mat-markdown-editor/esm2015/mat-markdown-editor.js:332:26 - error NG1010: Value at position 0 in the NgModule.imports of MaterialModule is not a reference: [object Object]

332                 imports: [
                             ~
333                     MatAutocompleteModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
363                     MatTooltipModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
364                 ],
    ~~~~~~~~~~~~~~~~~
node_modules/mat-markdown-editor/esm2015/mat-markdown-editor.js:328:7 - error NG6002: Appears in the NgModule.imports of MatMarkdownEditorModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

328 class MaterialModule {
piotrpekala7 commented 4 years ago

I've seen that there are many similar topics (it's not only the problem of this package) https://stackoverflow.com/questions/60726180/angular-9-value-at-position-x-in-the-ngmodule-imports-is-not-a-reference. In my opinion we can back to this package when they release version compatible with angular v9+

piotrpekala7 commented 4 years ago

I created pr with implementation https://github.com/GNS3/gns3-web-ui/pull/964, I used this package https://www.npmjs.com/package/marked. We don't have section general preferences in web UI, where should we store this kind of settings?

DavidRMaltby commented 4 years ago

@piotrpekala7 , Are there any disadvantages for us using the marked package vs. mat-markdown-editor? If so, would you still like to use the mat-markdown-editor when they release a version compatible with angular v9+

piotrpekala7 commented 4 years ago

@DavidRMaltby package designed for angular material - benefits: -> many more options -> toolbar with text selection and editing -> consistent with the rest of the interface so yes, after they release version for angular v9 and higher I'd like to use it web UI

piotrpekala7 commented 4 years ago

we decided to wait for upgrade of markdown editor for angular material

piotrpekala7 commented 4 years ago

still we don't have new version https://www.npmjs.com/package/mat-markdown-editor

piotrpekala7 commented 4 years ago

@grossmj @DavidRMaltby I updated & merged pr with basic markdown editor, I will check in next releases if we have ability to use option with material design https://github.com/GNS3/gns3-web-ui/pull/964