GSoC / Outreachy Editor Project Planning Issues and General Disscussion

[keshav234156]

In this issue, we can discuss about weekly goals and the issue we are going to work during the whole project. I have also made the Summer of Code 2020 project https://github.com/publiclab/PublicLab.Editor/projects/1 to keep the track of Issues To Do, In Progress, Done.

Editor Project Collaboration plan : https://docs.google.com/document/d/1LX1VEi_TEplnduXETqwr8mPPt-hshlg03dLeaa74hMI/edit

UI Improvements

• Make history icons consistent Make history icons consistent #572
• Main image box Main image box padding and background #564
• Toolbar Stickness fix toolbar stickness issue  #522
• Choose File Button UI Choose File button UI improvement #462
• Image Popup Image Popup in MainImageModule IMPROVED: #437
• Popup Disappearing in Editor Popup Disappearing problem solved jywarren/woofmark#3
• Compact Design for main Image Module Compact Design for main Image Module #594

Bugs

• Made history icons consistent in demo editor fixes Make history icons consistent in demo editor #571
• Filename Error Choose File button UI improvement #462
• Add support for class attribute in links Add support for class attribute in links #547
• Refine drag and drop events Refine drag and drop events to prevent interference with other drag/drop-sensitive fields in downstream use cases jywarren/woofmark#2
• Change heading back into plain text Feature to change heading back into plain text jywarren/woofmark#5
• Replacing uglify-js with Terserhttps://github.com/Replacing uglify-js with Terser jywarren/woofmark#29
• fix bold texts loosing formatting fix bold texts loosing formatting after converting to markdown and back to wysiwyg jywarren/woofmark#15
• Feature to decenter text in wysiwyg and markdown mode ADDS: Feature to decenter text in wysiwyg and markdown mode #521
• Fixes Disabling of Markdown buttton on using shortcut keys Fixes Disabling of Markdown buttton on using shortcut keys #465

Features

• Added Custom Insert Module Added Custom Insert Module #568
• Adds puppeteer as a dev dependency Adds puppeteer as a dev dependency #565
• Add user workflow for documenting bugs Add user workflow for documenting bugs #530
• Added eslint,lint-staged and Husky Added eslint,lint-staged and Husky #519
• Remove file button added Remove file button added #472
• Created issue template chooser Created issue template chooser  #474

Pending bugs and features PR

• Add "Related work" section to Title module Add "Related work" section to Title module #534
• Custom insert map Custom insert map #546 (WIP)
• upgrade Bootstrap to 4 upgrade Bootstrap to 4 #566 (WIP )
• Hide publish bar when typing on mobile devices Hide publish bar when typing on mobile devices #583

Tests

• Remove file test Added remove file test #574
• Jest test for bold and italic command Jest test for bold and italic command #543
• Choose file updated test Choose File button test updated #542
• Heading test Heading test jywarren/woofmark#34

Left undone

• Proper documentation with each module. Proper Documentation for each module use. #501
• Making toolbar Responsive Making toolbar Responsive #496
• Implementing the feature of darkening of all the icons display a "pressed" state to different formatting buttons when activated #494
• Adding functionalities to Extras tab. Adding functionalities to the Extras Tab #500
• Embedding audio, video and calendar Embedding audio, video and calendar  #499

Whenever working on any Issue please leave a comment on the issue or Assign the issue to yourself.

Thanks !!!

[keshav234156]

Hi @Shreyaa-s @NitinBhasneria @Shulammite-Aso ,
For this week let us focus on the opening issue from the proposal that we all made. You all can then add the links above in the task list.

[Shulammite-Aso]

Most of the issues are the same in our proposals. I think splitting up the project so that each one of us will have specific areas to focus on, will be a fine thing.

publiclab/plots2#7873 had mentioned the same thing.

What do you think?

[keshav234156]

Yes, I saw all the proposals. Roughly around 75% of the proposal is the same. We can open all the remaining issues that are different and not present in other's proposal

I don't think giving a complete specific area to each one of us would be useful. Let's first open up the completely small independent issue and then we can start by claiming that independent issues.

Thanks!!

[shreyaa-s-zz]

I agree with @Shulammite-Aso . My proposal also focuses on some issues related to the work you've mentioned. This would mean a greater chance of the code breaking or having discrepancies if we were to work separately. A big team on Editor would yield the desired results only if we were to work as a team. Let's have a meeting where we could discuss our ideas, plan the next week, divide the work and establish a workflow. What say @keshav234156 @Shulammite-Aso @NitinBhasneria ?

[keshav234156]

@Shreyaa-s We can use this thread to discuss our ideas, plan the next week, divide the work and establish a workflow

[shreyaa-s-zz]

@keshav234156 that's fine by me.

[NitinBhasneria]

I agree with dividing and working seperately. But we all should know what each others are doing. @keshav234156 I agree with you.

[NitinBhasneria]

Yes, I saw all the proposals. Roughly around 75% of the proposal is the same. We can open all the remaining issues that are different and not present in other's proposal

I don't think giving a complete specific area to each one of us would be useful. Let's first open up the completely small independent issue and then we can start by claiming that independent issues.

Thanks!!

Here, I think that deciding the workflow and then divide the work will be a better option. simply claiming the issues won't help much. So, first of all we should decide what will be the best workflow as a team. Let's pin @jywarren @cesswairimu @emilyashley for there views. Thanks.

[Shulammite-Aso]

Here, I think that deciding the workflow and then divide the work will be a better option.

Let's pin @jywarren @cesswairimu @emilyashley for there views. Thanks.

I think this is cool!
We're either going to be dividing the work up and deciding how best to work on them by ourselves, or the mentors already have plans coming in place. I think we have to hear from them first either ways.

Thank you.

[keshav234156]

ok, Let's start by making a list of different sub-project projects possible

1. Potential Bugs
2. Mobile view optimization
3. Adding a new module for Customizing maps on PublicLab.org Adding new module for Custom Inserts on PublicLab.org #419
4. Adding test suite
5. Adding a linting tool
6. Develop a workflow for documenting hard-to-reproduce bugs, so that users can report and document them (with screenshots, GIFs, screen recordings, js console captures?)

[keshav234156]

@NitinBhasneria @Shulammite-Aso @Shreyaa-s Please list other sub-project possible other than this ?

[cesswairimu]

Hey all, congrats everyone once more and I love the discussions already going on here 🎉 🎉 ...
I think with all of you working on one project, the subprojects are bond to inter twin at any moment .. working collaboratively is more of the approach we should be going for...of course at a given time everyone will be working on separate issues but you might find one issue is dependent on or complete something, someone else is working on... makes sense?

We normally let the interns decide on how to divide the issues among themselves but we also encourage reviewing each other pull requests, interacting on discussions on each others work,
picking up approaches and mockups from each others proposals to come up with a better implementation on the parts you are working on e.t.c

[Shulammite-Aso]

Thank you @cesswairimu
Noted!! 🎉

[shreyaa-s-zz]

Hey @cesswairimu Thanks for the input!

@keshav234156 if we're making a list of sub projects that we can cover/discuss, here's my input:

• 1. Adding functionalities to Extras tab. Adding functionalities to the Extras Tab #500 (this is a major project)

• 2. Issues and UI for Add location Optional 'Add a location' #497

• 3. Embedding audio, video and calendar Embedding audio, video and calendar  #499

[Shulammite-Aso]

@NitinBhasneria @Shulammite-Aso @Shreyaa-s Please list other sub-project possible other than this ?

There is also; User testing, using lookback.io perhaps?

Also the new module will be for adding custom contents like maps and a grid of other contents in publiclab.org.
I think I would like to work on this part if we don't mind??
Only I'm not sure yet if there should be a different module for adding maps and another for adding grid contents, or if they should both be using the same module? I'm yet to figure that out.

[keshav234156]

Can we all choose some other channel to disscuss.I think it's very difficult to chat here on github. We can create a room on riot or any other similar software. what are your thoughts on this??

[Shulammite-Aso]

I have a UI sketch of the new custom inserts on my proposal. And I'm thinking the UI could be handled differently from the actual module extension.
But I can't tell how intertwined the two will be yet to decide if different persons can handle each.

[Shulammite-Aso]

Can we all choose some other channel to disscuss.I think it's very difficult to chat here on github. We can create a room on riot or any other similar software. what are your thoughts on this??

Oh!
I think our mentors should be able to come back and follow up on our chats. That may be difficult if we create a different group??

[Shulammite-Aso]

Unless it will be cool to have them their too.

[NitinBhasneria]

Can we all choose some other channel to disscuss.I think it's very difficult to chat here on github. We can create a room on riot or any other similar software. what are your thoughts on this??

@keshav234156 I agree with you but as @Shulammite-Aso said it would be difficult to follow up our chats.
Also, I do think we four of us can have a different suitable platform for discussing the workflow and then we can tell the workflow to the mentors after deciding.

[keshav234156]

https://riot.im/app/#/room/!hFdwKeIWxjjMOPWhpb:matrix.org just made a room. @Shulammite-Aso yes, Mentors can also be added in this room. Please send a "Hi" message so that I can know that you have been added and it works properly

[keshav234156]

@NitinBhasneria ok then we can discuss it here

[keshav234156]

@keshav234156 if we're making a list of sub projects that we can cover/discuss, here's my input:
7. Adding functionalities to Extras tab. #402 (this is a major project)
8. Adding tools for shortcode syntax.

For Adding functionalities to Extras tab we need to first discuss with @jywarren . This issue was opened up by a contributor and it hasn't be approved by Jeff yet.
I beleive Adding tools for shortcode syntax and Custom Insert are similar?

[NitinBhasneria]

ok, Let's start by making a list of different sub-project projects possible

1. Potential Bugs
2. Mobile view optimization
3. Adding a new module for Customizing maps on PublicLab.org Adding new module for Custom Inserts on PublicLab.org #419
4. Adding test suite
5. Adding a linting tool
6. Develop a workflow for documenting hard-to-reproduce bugs, so that users can report and document them (with screenshots, GIFs, screen recordings, js console captures?)

I think the first one "Potential Bugs" should be elaborated more @keshav234156
In other words there are many issues in this potential bugs which should be divided according to the modules

[keshav234156]

@Shreyaa-s sorry, I misunderstood, saw your proposal and it mentions Adding functionalities to the 'Extras' tab. I think you wanted this to be a sub-project. So can you please open up issues for different modules as mentioned in your proposal

[NitinBhasneria]

@Shreyaa-s sorry, I misunderstood, saw your proposal and it mentions Adding functionalities to the 'Extras' tab. I think you wanted this to be a sub-project. So can you please open up issues for different modules as mentioned in your proposal

Ahh, @keshav234156 I think we should first list out the things we need to work and then divide them according to the interest then we can individually open the issues. What do you think?

[shreyaa-s-zz]

https://riot.im/app/#/room/!hFdwKeIWxjjMOPWhpb:matrix.org just made a room. @Shulammite-Aso yes, Mentors can also be added in this room. Please send a "Hi" message so that I can know that you have been added and it works properly

It says failed to join room. You've not been invited to this room.

[shreyaa-s-zz]

@keshav234156 if we're making a list of sub projects that we can cover/discuss, here's my input:
7. Adding functionalities to Extras tab. #402 (this is a major project)
8. Adding tools for shortcode syntax.

For Adding functionalities to Extras tab we need to first discuss with @jywarren . This issue was opened up by a contributor and it hasn't be approved by Jeff yet.
I beleive Adding tools for shortcode syntax and Custom Insert are similar?

I believe so, yes. Also I think we need to take @jywarren 's approval and input on the same. It will be easier to prioritize and work on the features accordingly.

[keshav234156]

I think the first one "Potential Bugs" should be elaborated more @keshav234156
In other words there are many issues in this potential bugs which should be divided according to > modules
@NitinBhasneria all the potential bugs don't belong to any particular module These changes are to bemade in woofmark

[jywarren]

Oh that's great to hear.

Just an update -- I'm sorry, but the PL team has asked for another week to consider the comment toolbar removal, so I'm going to mark it above as "on hold" until we hear back from them. Thanks!

[sagarpreet-chadha]

Wow teaaam, thanks for volunteering 🎉 🎉 🎉

Only last 2 tasks are remaining, both are actually related and we have all the functions also already there.
As we donot have to store anything in the DB, which means everything has to happen in the browser only.

Now the functions which actually previews the content are in 2 places:

1. PL editor library (which shows preview on runtime dynamically)
2. Plots2 (which shows the published content)

I think if we go with second option it will be little complicated and will require API calls.
Maybe we can use a temp DB which will store the content and delete automatically after 1 hr, now we can make the client to open in a new tab /preview/<published_temp_id>
Maybe I am missing something?

If we go with first option, I am not sure how we will pass this data to new tab (maybe by cookies?)

Can we open a big full screen modal to show preview content? This will save any server calls.

Or maybe we can dowload the content as HTML file. User will click to open this file in new tab?

@jywarren what do you think?

[jywarren]

Hi @sagarpreet-chadha -- basically my thought was to make a Rails controller action called preview, at /preview, which accepts POST parameters params[:title] and params[:body], and displays them as if they were published (maybe with an alert saying "this is a preview"?). It could use the same template as notes_controller#show, more or less?

But, we wouldn't actually store it at all, and any POSTs to this route would be done in a new tab, without closing the editor. So we could, using JavaScript, just fetch the correct ones and open a new tab with a request including them in POST, just for the purposes of temporarily previewing the current state.

It might be a little complicated in terms of making a POST request to a new tab, but see how you can use an ad-hoc form and target attribute to do this, in this example: https://github.com/publiclab/infragram/blob/549af937b943d9aa830ff195bb35207694bceced/index.html#L220-L233 (i think that should work!)

This task is a little complex but I'm sure you're all up to it!

[sagarpreet-chadha]

Okay awesome 💯
Using this logic, this makes easy to open in a new tab and fire api & passing content as body from current tab.
Correct we can use the existing code of notes-controller for this new action 👍
Makes sense 🎉

[Shulammite-Aso]

adjust OpenGraph tags for questions/notes/wikis so that if no main image is available, openGraph lead image tags show a "scraped" lead image (see how we do this in card display, for example https://publiclab.org/tag/bucket-monitor shows a scraped lead image for https://publiclab.org/notes/kgradow1/07-03-2020/bucket-monitor-prototype)

@sagarpreet-chadha please do you know where the code for this is?

[sagarpreet-chadha]

Hey @Shulammite-Aso ,
This is an interesting task 😄
Just so we are on the same page, opengraph is an api used by most social medias like facebook, twitter to scrape certain data like images, title, etc from a website.
The images, data, etc scraped can be controlled by us by giving certain tags (these tags are different for different social medias, we can find them easily online).
I am not sure on which social media the example given by Jeff works. So in short, you need to search those tags in the repository if any 💯 🎉

[Shulammite-Aso]

Hey @Shulammite-Aso ,
This is an interesting task
Just so we are on the same page, opengraph is an api used by most social medias like facebook, twitter to scrape certain data like images, title, etc from a website.
The images, data, etc scraped can be controlled by us by giving certain tags (these tags are different for different social medias, we can find them easily online).
I am not sure on which social media the example given by Jeff works. So in short, you need to search those tags in the repository if any

oh yeah. found out some of this too when i read about opengraph today. Just wanted to know which file is rendered as questions/notes/wikis, in case i'll be needing it. Will do some more searching on this however. If i need any more help i'll just get back here.

Thanks!!!!

[sagarpreet-chadha]

Some files which you may need to checkout:

https://github.com/publiclab/plots2/blob/main/app/views/questions/show.html.erb
https://github.com/publiclab/plots2/blob/main/app/views/wiki/show.html.erb
https://github.com/publiclab/plots2/blob/main/app/views/notes/show.html.erb

[cypherean]

For this task ensure the formatting toolbar (in both rich and markdown modes) doesn't stick to the bottom of the frame as we scroll far enough down or up that the text area is no longer shown at all what changes do we need in the current toolbar? @jywarren @sagarpreet-chadha @ebarry

[Shulammite-Aso]

@sagarpreet-chadha so my guess is that from https://github.com/publiclab/plots2/blob/29d0ff7f99f301d5cbfb3cf4727331608ac5887b/app/views/layouts/application.html.erb#L50 i'm supposed to use an else after this:

<% if @node.main_image %>
        <meta property="og:image" content="https://<%= request.host %><%= @node.main_image.path(:default) %>" />
        <meta name="twitter:image" content="https://<%= request.host %><%= @node.main_image.path(:default) %>">
    <% end %>

to indicate that if no main_image is available, it should display an image from the body of post if any at @node.body.
My worry is how to get the image from @node.body, is there a way to like say "..document.querySelector(img)" in a .erb file?
That is ofcus if i'm on the right direction.

[Shulammite-Aso]

Also @jywarren @sagarpreet-chadha how will i be able to tell my changes are working, or do i just push what i have?

[sagarpreet-chadha]

Hey @Shulammite-Aso , can you check how non-main images are stored in DB, we would be using erb in nodes views also to get non-main image, maybe check there?

Yes you are going in the correct direction 👍
Okay so for testing, you can either use ngrok to expose your local server and test the wiki link in any social media or you can deploy in unstable. Hope this helps 💯

[jywarren]

Hi all, I'm going to work on the main image upload issues to get the v2.2.0 published to the live site today, i hope! Also looking at #600 from @Shulammite-Aso.

I'd like to ask if someone could prepare a list of completed fixes to woofmark in a release on that repo, so we can repoint
this repo's dependency at a semver version number -- see how woofmark is getting incremented commit by commit? #597

[jywarren]

Hi all, congratulations to our Outreachy folks for a fantastic summer! 🎉

So, let's start thinking about our next release! Looking at https://github.com/publiclab/PublicLab.Editor/commits, there are some significant changes in woofmark which could constitute a patch-level or minor-level release to either v2.3.0 or v2.2.1, depending on our judgement: #597

If someone also wants to try going through some of the PRs in https://github.com/jywarren/woofmark/pulls and testing them in GitPod, we could also add some of those, although perhaps we ought to add more Jest tests to woofmark to make reviewing these easier!

[jywarren]

Hi all, are there more updates to the listing of issues/tasks at the top here? We are getting into our GSoC final evaluations and would like to be able to track more easily from here, so we'd appreciate it a lot if @NitinBhasneria and @keshav234156 could update the listing to show what's completed or at least note what's left. Thanks!!! 🎉

[NitinBhasneria]

@jywarren Should we add the issues that are not in the list and we have worked on them or should we check the existing issues?

[NitinBhasneria]

@jywarren I have updated the list.
@keshav234156 please have a look once and edit if any changes are there.

[sagarpreet-chadha]

Hey @NitinBhasneria , can you make the list of issues that are solved and not mentioned in above list and comment here.
Let's not add them to the the list at top yet. It will help us give a better final evaluation.
Thanks 💯

[NitinBhasneria]

@sagarpreet-chadha I have updated the list please have a look. In last section I have included the work left undone.
Thanks.

[NitinBhasneria]

Hey @NitinBhasneria , can you make the list of issues that are solved and not mentioned in above list and comment here.
Let's not add them to the the list at top yet. It will help us give a better final evaluation.
Thanks

In the updated list I have added the PR's as most os the issue's PR is not linked so it is having difficulty when we open the issue listed.

[keshav234156]

PR for #566 and #419 are already made, Just need to resolve test issues that we are facing. Then with some minute changes, they are ready to be merged. Added WIP tag as they just on the final stage of completion

[jywarren]

OK, thank you Keshav!!!

[jywarren]

And thank you @NitinBhasneria !!!

[jywarren]

Satisfying to check off those ✅ , no? 😂 🎉

[ebarry]

Thanks for checking in on the Comment Editor toolbar @sagarpreet-chadha ! I was reminded by @jywarren that we decided to make toolbars stay and be consistent on all commenting types - this is recorded in https://pad.publiclab.org/p/editor-tasks.