Custom Insert Module by keshav234156 · Pull Request #538 · publiclab/PublicLab.Editor

keshav234156 · 2020-06-17T23:59:05Z

concerns #419
Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with grunt jasmine
code is in uniquely-named feature branch and has no merge conflicts
PR is descriptively titled
PR body includes fixes #0000-style reference to original issue #
ask @publiclab/reviewers for help, in a comment below

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

We have a loose schedule of reviewing and pulling in changes every Tuesday and Friday, and publishing changes on Fridays.

Thanks!

Co-authored-by: Cess <cessmbuguar@gmail.com>

adds .vscode in .gitignore adds _SpecRunner.html in .gitignore Co-authored-by: Emily Ashley <15912063+emilyashley@users.noreply.github.com> Co-authored-by: Govind Goel <52847415+govindgoel@users.noreply.github.com> Co-authored-by: Cess <cessmbuguar@gmail.com>

keshav234156 · 2020-06-18T00:02:26Z

keshav234156 · 2020-06-18T00:03:21Z

@jywarren @Shulammite-Aso @Shreyaa-sharmaa @NitinBhasneria This is the initial design. How is it?

Shulammite-Aso · 2020-06-18T11:16:47Z

This looks great! I think we'll need to include maps in the options of things to add too, and show another UI for indicating lat, lon and preset layers. And maybe enable search suggestions? But one thing at a time anyway. great!

keshav234156 · 2020-06-21T05:50:48Z

This looks great! I think we'll need to include maps in the options of things to add too, and show another UI for indicating lat, lon and preset layers. And maybe enable search suggestions? But one thing at a time anyway. great!

I think it would be better to have a different module for maps as inputs would be different for it. What do you think about this? @jywarren @cesswairimu @ebarry @emilyashley

keshav234156 · 2020-06-21T06:20:15Z

I have added the functionality Please have a look!.

@Shulammite-Aso @Shreyaa-sharmaa @NitinBhasneria

…into CustomInsert

keshav234156 · 2020-06-23T16:56:02Z

@jywarren Can you please guide me on how to implement the search tag function.
For inline maps, I think it's better to have different module as inputs will be different. What do you think should be possible inputs and can you please clarify lit more on how it should look like?

jywarren

This is looking really great. In terms of UI design, i was wondering if you thought a modal would be better, especially for use on mobile devices? The HTML builder markup could be included into a Bootstrap modal, what do you think?

Thanks for input @Shulammite-Aso i agree we should think on maps but also agree we can do it later and one thing at a time makes sense.

Finally, i wanted to suggest that the HTML builder template code be kept very modular (like in a function?), because I think we can re-use it upstream in our woofmark clone. We don't have to worry about this in this PR, but imagine - what if the HTML equivalent of [notes:_____] were actually the builder HTML form itself. So that you'd see something like:

Power tag: [notes:________] (edit)

and when you click edit you get this set of form configurable options. When you click Save again, it transforms the whole form back into the [notes:_______] markdown format. I know this is a bit of a leap but if we build that conversion HTML>Markdown>HTML into our fork of woofmark we could achieve this! Does that make sense to folks? Pls ask questions!

src/modules/PublicLab.CustomInsert.js

jywarren

The only thing I'd like to ask for is some tests to protect this functionality at a basic level. Like, to click the button, select a type,and insert it, and confirm that the correct markdown appears. Would that be possible, @keshav234156 ?

keshav234156 · 2020-06-23T17:13:36Z

Ok,tests are possible to implement here.@shreyaa-sharma is already doing a great work at #541 of integrating jest-puppeteer.We can surely have test after #541 is merged.

keshav234156 · 2020-06-23T17:25:34Z

I think modal would be better especially for small screens. Should I try implementing it.
Should we implement search function for tags similar to main website or it should be included in later stages.

jywarren · 2020-06-23T19:00:39Z

Oh that'll be awesome. Shall we wait until we can use Jest then? 🎉

Let's hold a little on search for tags - in the spirit of one thing at a time at least for this PR.

Do you want to try for a modal based design here? Either with code, or potentially working really quickly with a rough sketch or with https://www.layoutit.com/ ?

jywarren · 2020-06-23T19:01:06Z

(and if we're going to wait let's mark this title as "pending Jest tests in #541"?

keshav234156 · 2020-06-24T15:42:15Z

@jywarren I tried implementing Bootstrap modal (https://getbootstrap.com/docs/3.4/javascript/#modals). But it didn't work as when modal open then pointer leaves the editor and so it's not able to insert required text

jywarren · 2020-06-30T15:15:59Z

Hmm. Are you able to programmatically re-insert the pointer? I guess it may be hard to re-insert it at the right place.

What if we took a different approach - we started by inserting the module, but it contained its own interface for configuring (using the HTML->Markdown interpretation). Then you'd see it inline, and be able to configure it as it is, inside the text document? Maybe something like this:

Although it could be more fully featured and larger than the popup we'd had

jywarren · 2020-06-30T16:35:19Z

Hi! I think we are ready for this to get a Jest test now! After #541 is now complete!

…into CustomInsert

keshav234156 · 2020-07-07T03:56:24Z

@jywarren I have added the test.
I have tried a lot implementing modal but wasn't successful in implementing it. I have also tried the ah as you have told me above. I was able to insert a module as a whole but it wasn't able to insert the text and the text pointer remained hidden behind the module.

keshav234156 · 2020-07-07T04:17:31Z

Made some changes so that the module is compatible with small screen till we do the next brainstorming

keshav234156 · 2020-07-07T04:17:53Z

@Shulammite-Aso @Shreyaa-s @NitinBhasneria please review!!

jywarren · 2020-07-07T19:15:48Z

One small request - could there be a space after "Notes" and "List", to space them apart from the carets/arrows? Thank you!

jywarren · 2020-07-09T19:02:55Z

src/modules/PublicLab.CustomInsert.js

+   builder += '<span class="caret"></span>';
+   builder += '</button>';
+   builder += '<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="menu">';
+   builder += '<li role="presentation"><a role="menuitem" tabindex="-1" id="Notes">Notes</a></li>';


Hi, I wonder if it may be better to use a classname so as not to have to use a more unique id, and to nest the selectors, so you'd be able to call: . woofmark-command-insert .notes instead of relying on a completely unique Notes id? And similarly for other ids here! What do you think?

Ok. Making changes

Are you saying to change id into class. How would that be beneficial? 🤔

well, if you use an id, then if there are 2 editors on the page, they're no longer unique, and thats a rule with ids. It may be better to use nested classes for specificity. This may not come up much, but in those edge cases it's a good practice. And, the id "menu" is not very unique so it already may collide with ids in other code. So i guess I'm just noting that we could bypass the uniqueness thing entirely by relying more on classes. Thanks!

test/ui-testing/CustomInsert.test.js

jywarren · 2020-07-14T18:56:59Z

Almost there! I see a question or two still needing addressing, then let's resolve conflicts and we should be able to merge this!

src/modules/PublicLab.CustomInsert.js

keshav234156 · 2020-07-21T11:01:06Z

Moved to #568

anshukaira and others added 3 commits June 17, 2020 19:04

updated privacy link (#413)

8516760

Co-authored-by: Cess <cessmbuguar@gmail.com>

Intial Design

f2804ad

added Custom Insert Functionality

1eb977d

keshav234156 added 2 commits June 23, 2020 19:47

Merge branch 'master' of https://github.com/publiclab/PublicLab.Editor …

bf262c0

…into CustomInsert

Merge branch 'main' of https://github.com/publiclab/PublicLab.Editor …

35efe08

…into CustomInsert

keshav234156 mentioned this pull request Jun 23, 2020

Editor Team - First Release Coordination 🙌🎉 #532

Closed

9 tasks

keshav234156 added 3 commits June 23, 2020 21:57

fixed test

ae961c2

Merge branch 'main' of https://github.com/publiclab/PublicLab.Editor …

ea4bb90

…into CustomInsert

fix test

392e40a

keshav234156 mentioned this pull request Jun 23, 2020

GSoC / Outreachy Editor Project Planning Issues and General Disscussion #490

Open

35 tasks

jywarren approved these changes Jun 23, 2020

View reviewed changes

src/modules/PublicLab.CustomInsert.js Outdated Show resolved Hide resolved

jywarren requested changes Jun 23, 2020

View reviewed changes

keshav234156 added 2 commits July 5, 2020 02:21

Merge branch 'main' of https://github.com/publiclab/PublicLab.Editor …

80760e3

…into CustomInsert

Added tests

52425ce

Made it compatible with small screens

7255e0f

keshav234156 and others added 4 commits July 7, 2020 10:02

fixed indentation

57aa1b4

fixed indentation

9eb8f1e

fixed indentation

62f308b

Merge branch 'main' into CustomInsert

88bdf45

jywarren requested changes Jul 9, 2020

View reviewed changes

jywarren mentioned this pull request Jul 9, 2020

Custom insert map #546

Open

5 tasks

cypherean reviewed Jul 9, 2020

View reviewed changes

test/ui-testing/CustomInsert.test.js Show resolved Hide resolved

test/ui-testing/CustomInsert.test.js Show resolved Hide resolved

jywarren reviewed Jul 14, 2020

View reviewed changes

src/modules/PublicLab.CustomInsert.js Show resolved Hide resolved

keshav234156 mentioned this pull request Jul 21, 2020

Added Custom Insert Module #568

Merged

5 tasks

jywarren closed this Jul 21, 2020

Comments

Conversation

keshav234156 commented Jun 17, 2020

Uh oh!

keshav234156 commented Jun 18, 2020

Uh oh!

keshav234156 commented Jun 18, 2020

Uh oh!

Shulammite-Aso commented Jun 18, 2020

Uh oh!

keshav234156 commented Jun 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keshav234156 commented Jun 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keshav234156 commented Jun 23, 2020

Uh oh!

jywarren left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jywarren left a comment

Choose a reason for hiding this comment

Uh oh!

keshav234156 commented Jun 23, 2020

Uh oh!

keshav234156 commented Jun 23, 2020

Uh oh!

jywarren commented Jun 23, 2020

Uh oh!

jywarren commented Jun 23, 2020

Uh oh!

keshav234156 commented Jun 24, 2020

Uh oh!

jywarren commented Jun 30, 2020

Uh oh!

jywarren commented Jun 30, 2020

Uh oh!

keshav234156 commented Jul 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keshav234156 commented Jul 7, 2020

Uh oh!

keshav234156 commented Jul 7, 2020

Uh oh!

jywarren commented Jul 7, 2020

Uh oh!

jywarren Jul 9, 2020

Choose a reason for hiding this comment

Uh oh!

keshav234156 Jul 14, 2020

Choose a reason for hiding this comment

Uh oh!

keshav234156 Jul 14, 2020

Choose a reason for hiding this comment

Uh oh!

jywarren Jul 14, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jywarren commented Jul 14, 2020

Uh oh!

Uh oh!

keshav234156 commented Jul 21, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

keshav234156 commented Jun 21, 2020 •

edited

Loading

keshav234156 commented Jun 21, 2020 •

edited

Loading

keshav234156 commented Jul 7, 2020 •

edited

Loading