GSoC Proposal:Editor repair and fortification

About me:

Name: Keshav Garg

Email: KESHAVGARG234156@gmail.com

Github: https://github.com/keshav234156

Affiliation: Indian Institute Of Technology, Mandi

Location: Mandi, India

Degree: Bachelor of Technology in Computer Science and Engineering

Timezone: Indian Standard Time IST(UTC + 5:30)

Project Description:

PublicLab.Editor is a general-purpose, JavaScript modular library for rich-text posting, which provides an author-friendly minimal, mobile/desktop (fluid) interface for creating blog-like content, designed for PublicLab.org .It's built on the Woofmark library which is full of bugs. The projects aim at fixing these bugs, Interface improvements, and Development process refinements.

Problems:

Part 1: Potential Bugs

Bold and Italic formatting bug: https://github.com/publiclab/PublicLab.Editor/issues/307 We are facing this bug due to https://github.com/bevacqua/woofmark/blob/master/src/html/wrapping.js#L19-L21 . Only the HTML mode is using the wrapping function. The Markdown mode is using another function and it works perfectly in Markdown mode. Solving this bug would involve introducing the woofmark in src code and making changes to this function. This will also help in solving other bugs.
Converting text to Header and back again: In the Rich view, we can't convert Header back into text. We should fix this behavior. Also, we can only add header up to "h4" tag. We should increase it to "h6".
Table Borders : Borders of tables are currently not shown. This should be changed to
Exiting out of code module: Right now there is no way by which we can start a new paragraph after we have used code module. We can solve this such that pressing the respective hotkey exits the module like in case of quoted text.
Inserting Hyperlinks and File Attachment: Default text that appears after inserting the Hyperlink and Attachment is link text and null respectively. The user most probably wants to change the name other than the default text.If we try to change there name only the first alphabet of the word is identified as link Eg. Word (here blue represent what is identified as a link).We can improve it by asking the user to enter text and link.
Decentering a centered text:If a text has already been centered by the user(and it may happen sometimes by mistake ) then it can't be uncentered. Also if you want the further paragraph to be uncentered then it's not possible now.
Error Showing even after the User has removed the text causing error :

Part 2: Interface and General Improvements

Adding new Custom Insert Modules. Inline Power tags are used to insert a list of notes for a given tag eg.

Title Author Updated Likes Comments

Nothing yet on the topic "<tagname>" -- be the first to post something!

. But it’s difficult for a non-programmer to know the syntax for inserting it in Markdown. So we can start with making separate modules for this, which will insert the required syntax in Markdown.
Wikis, Notes, Nodes, Activity, Question :

Title	Author	Updated	Likes	Comments
Nothing yet on the topic "<tagname>" -- be the first to post something!

It would be a separate module. It will first ask the user What they want to add? And they can select the options[Wikis, Notes, Nodes, Activity, Question] from the dropdown. Similarly, they will give input of How they want it to be inserted [List, Grid]. The third input would be the tag. Tag search will be similar to that of already present at PublicLab.org

Then after pressing the add button, the relevant syntax would be added to Markdown mode.
2. Inline Maps : Similarly, we can make one more separate module for inserting inline maps which would take input as Latitude, Longitude, Zoom level and Preset Layers from the user.

Implementing the feature of darkening of all the icons: Implementing the feature of darkening of all the icons when it in use. Eg. The bold icon would be darkened when in use. Similar to the feature that is present in Google Docs. We can easily work on this feature after we have introduced woofmark in the source code of PublicLab.Editor.We can get status of whether we are using a particular module from https://github.com/bevacqua/woofmark/blob/master/src/markdown/boldOrItalic.js#L15-L35 and then can implement the feature of icon highlighting for all modules so that it becomes easy for users to know which modules are currently in use.
The stickiness of toolbar and Improvement :
The idea of a floating toolbar was introduced so that in case of long notes users don't have to scroll to the end of the page to use the toolbar. But it keeps floating even outside the text area giving a bad user experience. The better way would be to fix the toolbar at the bottom and introduce a vertical scrollbar in a Rich mode as we have in Markdown mode.
Design optimization for the Bottom bar in Mobile view: The bottom-bar occupies a lot of space in the mobile view. We should optimize it to look good in the mobile view.
Making toolbar Responsive: Toolbar is cropped in Mobile view and small Screen View.

Part 3: Development process refinement

Integrating the jest-puppeteer for testing and writing tests in a similar way to that implemented in Image-Sequencer.jest-puppeteer facilitates Keyboard Typing and Mouse simulation so would be best suitable here as well.
Adding a test for Bold and Italic Formatting Bug.
Eslint and Husky: Eslint is a tool for identifying and reporting patterns faced in ECMAScript/JavaScript Code, with the goal of making the code more consistent. In order to force the contributor to use Eslint before they commit their code, we will use Husky.

Timeline/Milestone:

May 4 - May 25 (Community Bonding Period)

Get to know the community in a better way and read documentation related to Woofmark, Eslint, Husky and jest-puppeteer

May 26 - June 1 Week - 1

Setting up Eslint and Husky for automatic linting

June 2 - June 8 Week - 2

Removing woofmark as a node module and including it in PublicLab.Editor source code.
Making toolbar Responsive

June 9 - June 15 Week - 3

Integrating the jest-puppeteer for testing

June 16 - June 22

End Semester Examination

June 23 -June 29 Week - 4

Fixing Bold and Italic formatting bug
Adding test For Bold Formatting
Adding test For Italic Formatting

June 30 - July 6 Week - 5

Phase-1 Evaluation
Creating FTOs from the work completed till now

July 7 - July 13 Week - 6

Implementing the feature of darkening of all the icons
Fixing Stickiness of toolbar and Improvement

July 14 - July 20 Week - 7

1.Fixing Inserting Hyperlinks and File Attachment 2.Fixing exiting out of code module 3. Fixing converting text to Header and back again bug.

July 21 - July 27 Week - 8

Adding new Custom Insert Modules - Wikis, Notes, Nodes, Activity, Question

July 28 - August 3 Week - 9

Phase-2 Evaluation
Creating FTOs from the work completed till now

August 4 - August 10 Week - 10

Adding new Custom Insert Modules.-Inline Maps.

August 11 - August 17 Week - 11

Design optimization for the Bottom bar in Mobile view
Fixing the error Showing even after the User has removed the text causing error.
Decentering a centered text

August 18 - August 24 Week - 12

Writing Final Project Report
Complete the remaining work(if any)
Create FTOs from work done till now

Needs:

While working on the above-mentioned tasks, the review and suggestion from the mentors and the community members at least once a week would be highly appreciable and would be enough to complete the project.

Contributions:

Experience:

Currently I am a second year student of B.Tech from IIT,Mandi.I have been actively been contributing to Image-Sequencer and PublicLab.Editor projects and I am comfortable with the codebase of both the repositories

I was also a GCI 2019 Mentor in PublicLab and was chosen as the best mentor.I reviewed a lot of PRs made by the candidate during the GCI period.

Audience:

PublicLab.Editor is an important and substantial part of PublicLab.org. It's used by all the users who write their ideas,views on various issue. At this point of time it's full of bugs.After completing the project I expect users will have a great experience in writing their ideas/views on various issues.

Commitment:

I fully understand that completing this big project demands commitment. So to complete this project I commit to spend at least 40 hours per week which can be increased as per the situation and work conditions.

17 Comments

In addition to this ,Inserting stuff in tables is the area where much improvement is needed. Right now I am thinking of how we can make it better and will include in the proposal after I get Initial idea on it.Please do share your view regarding how we can make it better Thanks!!

Hi @keshavgarg234156 - Just chiming in that I replied at some length on your issue in GitHub which is relevant here too:

https://github.com/publiclab/PublicLab.Editor/issues/419#issuecomment-603279770

I'll excerpt it here too:

So, on https://publiclab.org/wiki/inline-maps it shows that there are Markdown extensions that we call "inline grids" on plots2, that look like: [map:_______] -- these get auto-converted along with Markdown into the interactive features. So, really what we need is a UI for generating these and inserting these strings. For a simple example, you can look at the button/popup for generating tables; it's a submodule of the Rich Text module here: https://github.com/publiclab/PublicLab.Editor/blob/master/src/modules/PublicLab.RichTextModule.Table.js

You click the button, choose height and width, and then it inserts the string for a Markdown table. In our case, we'd have a more complex UI to show the types of inline features we want, and then you'd click OK and it'd insert the corresponding string in the format specified in /inline-maps, that is, [map:________] where it'd substitute in the parameters that were selected in the form.

This is a bit convoluted i know but think of it as a "helper" which helps you write Markdown, essentially. The part for displaying the maps is already done and works, it's just hard for non-programmers to know the exact formatting and parameters for the inline grid "markdown extensions" so we are helping people step by step configure this stuff by choosing a map region, etc.

I'd probably start by just having people input the values in <input>s and get that working before doing a more complex UI which could include a draggable map. That way you could tackle the problem in separate modular parts, you know? Likewise, just focus on one basic type of inline content first, and build on that to add additional types.

Thanks!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

@keshavgarg234156 , Great proposal ❤️ , love the problems details and images. I also love that you already have contributions already. I would like to see a few mockups of the solutions you have in mind, also on the contributions you could add any issues you have created. Thanks

Reply to this comment...

So https://publiclab.org/wiki/inline-maps and https://publiclab.org/wiki/advanced-grids have a bunch of like content that'd be the main candidates for custom inserts!

I love the more compact bottom bar design!

Thanks for your proposal, @keshavgarg234156!!!

Thanks!! and also feeling great that you liked my proposal.

Custom Inserts Ideas 1. Custom Font-size and Font-colour: https://drive.google.com/file/d/1fWQVquIX-zPozz6fR4TTOIVbmFhPmQAZ/view

Customs insert for the table: Merge cell and unmerge cell, add row and column after the initial table has been inserted and CSVparser that can generate table by uploading excel sheet.
https://publiclab.org/wiki/inline-maps and https://publiclab.org/ wiki/advanced-grids

Can you just give a priority order of above 3 tasks.

Thanks again!!

Hi, I would do the inline grids first -- the table-style ones, like [notes:____] and [activities:_____] and [questions:_____]. Then you'll be well situated to do a more complex one like maps.

I would love to see some mockups, even wireframes (not too much detail) on how people would select the type of insert they want to make, and how they might input parameters like which type of content (i.e. which tag) they want it to display. For example, if the desired output Markdown is [notes:water-quality], how do we best prompt them to select the notes type of display, and the tag water-quality?

To this last question, perhaps a row of icons would work, and once you choose one, you could input text for the tag. In a later version, we might make that input auto-complete the tagnames, like on https://publiclab.org/tags:

Is this a question? Click here to post it to the Questions page.

I have added Custom insert modules - Wikis, Notes, Nodes, Activity, Question, Inline Maps. Added mockups for both. Please have a look!! Thanks!!

Hi! I like the mockup of the insert type selector UI -- maybe the list vs. grid could be a pair of icons?

Also, ideally we can use all standard Bootstrap 4 UI elements.

I wonder if one of these could be used to mock it up more?

https://pinegrow.com/docs/bootstrap-visual-editor/

https://pingendo.com/

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Hi Keshav, I really loved your proposal. It explains things well. Best of luck

Reply to this comment...

There is change in the timeline. Kindly change the timeline. Thanks

Reply to this comment...

also noting, big support for "jest-puppeteer for testing" !!!

Reply to this comment...

Hey Keshav, I have read your proposal in great detail and it looks awesome. Couple of pointers i have:

I would like to see some more mocks and wireframes, gifs maybe if possible.
We are really pushing having great tests in all our projects, hence do you think you would need more time for testing than 1 week because we have no tests, right?
I need you to think on how we can make use of maps using inline syntax more intuitive to the users, should we do autocomplete? Or a link somewhere to see usage?
We can make the map module also generic, make functionalities to change map layer, map marker, etc. This is optional and you may include if you have time.

Overall i like the proposal very much 😃 !

Thanks :)

Is this a question? Click here to post it to the Questions page.

Thanks!!! @sagarpreet for reviewing

Have added mockups for Custom Insert Modules-Wikis, Notes, Nodes, Activity, Question, Inline Maps. Any other issue where you fell that mockup would be helpful
For testing, I have basically given one week for integrating the jest-puppeteer and another week for adding two tests.I feel that setting up and writing test initially will be a little bit difficult at the start.After having the initial setup, it become an easier process. So we can then start involving the newcomer in it. We can make a list of the test that needs to be added. Similar to https://github.com/publiclab/image-sequencer/issues/1369 .If time permits I will do some more test myself

Reply to this comment...

UPDATED the Proposal Updates: 1. Added Custom insert modules - Wikis, Notes, Nodes, Activity, Question, Inline Maps. Added mockups for both 2. Added table-border issue 3. Changed the timeline 4 Fixed Styling of toolbar issue ( https://github.com/publiclab/plots2/pull/7534 ) 5. Removed Using the center-alignment button in Markdown mode, Disabling of #Markdown button, table popup issue. Will be fixing it before the GSoC period So that I give more time to priority issue during the GSoC period.

Hi, just to clarify the educational features -- the idea is that a teacher may want to invite students to write posts, but can pre-authorize them to bypass our spam moderation system by sharing a special code in a link, like https://publiclab.org/invite/123456 -- this would then allow them to post directly. Sorry, am trying to recall where this conversation was happening but can't immediately find it - if you can point me to it I can move this comment there.

@warren It may to https://publiclab.org/notes/keshav_sethi0004/03-12-2020/gsoc-2020-proposal-spam-management-dashboard

Reply to this comment...

Hi, can you please make table for timeline?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Public Lab Research note

Public Lab

Research note

GSoC Proposal:Editor repair and fortification

About me:

Project Description:

Problems:

Part 1: Potential Bugs

Part 2: Interface and General Improvements

Part 3: Development process refinement

Timeline/Milestone:

May 4 - May 25 (Community Bonding Period)

May 26 - June 1 Week - 1

June 2 - June 8 Week - 2

June 9 - June 15 Week - 3

June 16 - June 22

June 23 -June 29 Week - 4

June 30 - July 6 Week - 5

July 7 - July 13 Week - 6

July 14 - July 20 Week - 7

July 21 - July 27 Week - 8

July 28 - August 3 Week - 9

August 4 - August 10 Week - 10

August 11 - August 17 Week - 11

August 18 - August 24 Week - 12

Needs:

Contributions:

Experience:

Audience:

Commitment:

17 Comments

first-time-poster

markdown