[14.0][ADD] web_widget_html_markdown by thomaspaulb · Pull Request #7 · sunflowerit/web

thomaspaulb · 2022-09-13T15:11:10Z

No description provided.

web_widget_html_markdown/readme/USAGE.rst

web_widget_html_markdown/demo/bootstrap_markdown.xml

thomaspaulb

Generally OK, could use a cleanup pass, we can do it together in a sprint.

thomaspaulb · 2022-09-16T12:18:18Z

web_widget_html_markdown/readme/DESCRIPTION.rst

+        2) Write some markdown and then add some HTML. ( will cause loss of HTML if you edit markdown again)
+        3) Only markdown.
+- RE-editing pure markdown content is LOSSLESS because we preserve the markdown content in a special tag.
+- Every switch to markdown will cause destruction of HTML. Html Can Be added after writing Markdown part but will always be deleted.


I would change this a little bit:

This module implements a Markdown editor on Html fields, in contract to web_widget_text_markdown, which implements it on Text fields. In readonly mode, the widget displays HTML, but when editing, the widget offers you an option to edit in Markdown or in HTML. If you edit markdown, it will save as the rendered HTML, but with the source Markdown embedded inside a <script> tag. When editing again, it will show you the Markdown source. If you edit HTML, you will lose the Markdown and the content will just behave as a regular HTML field with an HTML widget.

The benefit of this module over web_widget_text_html is that it allows markdown-editing of HTML fields such as for example the mail.message body for the chatter, or HTML fields that end up in printed reports such as the Quotation description. Such fields cannot be converted to Text fields because it will cause problems for their functionality. But with this widget, they can still be edited as Markdown.

A difficulty with this module is that once you start editing a field as HTML, whether with this Markdown widget in HTML mode, or through a view that has the normal HTML editor, you will lose the Markdown source and you will have to keep editing the field as HTML, or do a backconversion to Markdown. This backconversion is always lossy to a certain extent and we did not bother implementing it - but it's something for the roadmap.

I like. shorter. Done. I used your text, but i left the two titles.

thomaspaulb · 2022-09-16T12:19:32Z

web_widget_html_markdown/readme/ROADMAP.rst

@@ -0,0 +1 @@
+* HTML Will be lost when passing from Html to markdown


Implement conversion from HTML to Markdown, either through a JS or a Python module, instead of currently just wiping the content of the field.

Done but slightly different, now that we changed stuff:

Implement conversion from HTML to Markdown, either through a JS or a Python module, instead of not allowing it, or allowing it only after HTML is emptied.

web_widget_html_markdown/readme/USAGE.rst

thomaspaulb · 2022-09-16T12:20:13Z

web_widget_html_markdown/readme/USAGE.rst

+    ...
+
+The widget is called unidiectional because itt is used on a Html field to edit HTML 
+or Markdown, but the conversion is unidirectional, ONLY from Markdown to HTML.


This part I think can go, the DESCRIPTION explains it enough

thomaspaulb · 2022-09-16T12:20:40Z

web_widget_html_markdown/readme/USAGE.rst

+or Markdown, but the conversion is unidirectional, ONLY from Markdown to HTML.
+
+This will replace the default Html widget by the new Markdown/HTML widget and
+allow the field to be edited as Markdown or HTML, depending on the user's choice.


This part is good, and then below we can explain the new options that will be added.

thomaspaulb · 2022-09-16T12:36:44Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+                .replace(/\<\/p\>/g,'')
+                .replace(/\<\/br\>/g,'')
+                .replace(/\<br\>/g,'')
+                .replace(/&nbsp;/g,'')


Doesnt the isSet function already do this?

This works on the current value, and isSet works on the last-saved value.

confirmed. done.

thomaspaulb · 2022-09-16T12:51:03Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+
+
+
+    var FieldHtmlMarkDown = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {


We should, I think, spend some together-time still on trying to make this widget inherit directly from HtmlField. I shot down that idea earlier but we duplicate a lot of code here, so it's worth another shot.

Now done and tested

thomaspaulb · 2022-09-16T12:52:03Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+                    // this will use marked
+                    var render_val = self._getHtmlValue(e.getContent());
+                    return render_val;
+                },


Currently the dropzone.js functionality, added in the 11.0 version of the text widget module, does not work. We can re-enable it.

thomaspaulb · 2022-09-16T13:02:33Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+            this.$el.prepend(md_s);
+            //
+            this.$el.find('input').addClass('mk_html_switch');
+            this.$el.find('input').change([self], self._switch_markdown_html);


I think it's best practice to make a separate sub-widget out of this and then instantiate it with:

this.sub_widget = new SubWidgetClass(this); this.$el.prepend(this.sub_widget);

And then do the events in the Odoo events: way, let them bubble up to here via messages, and then catch them here.

@thomaspaulb Question: Are we sure? All other issues are done. I see the radiobutton+the editors as one widget.
The radiobutton+information_area as a separate widget would make sense if it was reusable elsewhere, this part of the widget is used once and makes sense only in conjunction with the rest. so I don't see why we should separate this.

After the cleanup, the widget is 200lines, i have refactored the views in XML, so if your concern is length of code it should not be a problem.
I am all for modularity, but this sub-widget has not use anywhere else.

thomaspaulb · 2022-09-16T13:04:12Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+              var has_md_source_tag = self._html_has_md_source_tag();
+              if (!is_empty && !has_md_source_tag ) {
+                  // THIS SHOULD NEVER APPEAR, WE HAVE HIDDEN THE RADIOBUTTON IN ALL
+                  // POSSIBLE CIRCUMSTANCES, KEEPING IT FOR TESTING PURPOSES.


Are we now keeping the radiobutton or not?

Gio says we can clean it up.

gfcapalbo · 2022-09-20T09:43:59Z

@thomaspaulb All errors found. Tested, works perfect

   Complete cleanup of unnecessary code

```
   fixed all bugs
```

   Comments explaining why and how of choices

   Better infoarea/radio management ( the object is defined once and then re-used.)

```
   refactored in sections with titles.
```
```
   tested.
```

   Table formatting works while editing and also readonly.

ONLY ONE SMALL PROBLEM:

  [ENTER, CRTRL-X,  CTRL-Z, MOUSE ACTIONS are not seen as "onchange" in HTML editor]

SHould be quite easy to extend though, i am surprised it is not so in HTML widget. ( confirmed, HTML widget did not see those clipboard, mouse and actions as "onchange" events.

REST WORKS PERFECT

thomaspaulb · 2022-09-20T12:51:52Z

web_widget_html_markdown/README.rst

@@ -0,0 +1,131 @@
+========================================
+Web Widget Html Markdown Unidirectional 
+========================================


reset this to an empty file, it will be autogenerated anyway

This title is fetched from manifest. I gave it this name , in the hopes of a 2-way version. But i will remove.
If we make a 2-way version it will be a replacement. cleaning up.

thomaspaulb · 2022-09-20T12:52:14Z

web_widget_html_markdown/__manifest__.py

@@ -0,0 +1,27 @@
+# Copyright (C) 2014 Sudokeys (<http://www.sudokeys.com>)
+# Copyright (C) 2017 Komit (<http://www.komit-consulting.com>)


change to therp

thomaspaulb · 2022-09-20T12:52:56Z

web_widget_html_markdown/readme/CREDITS.rst

@@ -0,0 +1 @@
+* Therp B.V. https://therp.nl


thomaspaulb · 2022-09-20T12:54:56Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+" <div id='radio_container'> <input id='markdown' type='radio' name='mk_html_switcher' value='markdown'>"+
+" <label id='markdown_label' for='markdown'>Markdown</label>  " +
+"<input type='radio' id='html' name='mk_html_switcher' value='html' checked >" +
+"  <label id='html_lable' for='html'>HTML</label></div><div id='md_infoarea'></div>")


Make this a template

thomaspaulb · 2022-09-20T12:57:08Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+                var layoutInfo = $.summernote.core.dom.makeLayoutInfo(this.wysiwyg.$editor);
+                $.summernote.pluginEvents.codeview(undefined, undefined, layoutInfo, false);
+            }
+             if (self.mode == 'edit' && self.$is_markdown) {


thomaspaulb · 2022-09-20T12:57:37Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+                     // we use recursion (max1) is_markdown is reset
+                    return self.commitChanges()
+                 });
+            } else if (self.mode == 'edit') {


But what if mode is not edit? Shouldnt we still call super?

No/ this is taken from source HTML. if we are not in edit mode commit changes shouldnt be ran.
We have replicated 5 lines of code because we had to add forceChange:true.
I explain in a brief comment.

Not done.

thomaspaulb · 2022-09-20T13:38:04Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+              var has_md_source_tag = self._html_has_md_source_tag();
+              if (!is_empty && !has_md_source_tag ) {
+                  // THIS SHOULD NEVER APPEAR, WE HAVE HIDDEN THE RADIOBUTTON IN ALL
+                  // POSSIBLE CIRCUMSTANCES, KEEPING IT FOR TESTING PURPOSES.


Gio says we can clean it up.

thomaspaulb · 2022-09-20T13:41:15Z

web_widget_html_markdown/static/src/js/web_widget_html_markdown.js

+                .replace(/\<\/p\>/g,'')
+                .replace(/\<\/br\>/g,'')
+                .replace(/\<br\>/g,'')
+                .replace(/&nbsp;/g,'')


This works on the current value, and isSet works on the last-saved value.

gfcapalbo · 2022-09-21T10:12:24Z

@thomaspaulb all done. one commit. Just one question.

gfcapalbo · 2022-09-21T16:04:45Z

@thomaspaulb added all the options, and verified for no regressions.

While testing, added a useful badge that tells user in readonly mode if content was saved in pure HTML or with Markdown tag.

gfcapalbo · 2022-09-21T20:43:56Z

@thomaspaulb working and testable. Had some troubles , solved.
Now working, as proof-of concept. It uses jQuery.html() to compare the first HTML element and works perfectly.
all i need to do is extend it to compare a checksum generated by all HTML,except the hidden tag.

thomaspaulb commented Sep 13, 2022

View reviewed changes

web_widget_html_markdown/readme/USAGE.rst Outdated Show resolved Hide resolved

thomaspaulb commented Sep 13, 2022

View reviewed changes

web_widget_html_markdown/demo/bootstrap_markdown.xml Outdated Show resolved Hide resolved

thomaspaulb commented Sep 16, 2022

View reviewed changes

gfcapalbo force-pushed the 14.0-web_widget_html_markdown_monodirectional branch 2 times, most recently from 4bd0744 to dbfc425 Compare September 20, 2022 10:56

thomaspaulb commented Sep 20, 2022

View reviewed changes

gfcapalbo force-pushed the 14.0-web_widget_html_markdown_monodirectional branch from a77dbc6 to 7b126be Compare September 21, 2022 09:56

gfcapalbo force-pushed the 14.0-web_widget_html_markdown_monodirectional branch from d35c428 to 0cee218 Compare September 21, 2022 10:50

gfcapalbo force-pushed the 14.0-web_widget_html_markdown_monodirectional branch from 0de1384 to a4d10e7 Compare September 21, 2022 16:36

gfcapalbo force-pushed the 14.0-web_widget_html_markdown_monodirectional branch 2 times, most recently from c552826 to cbb493a Compare September 21, 2022 20:47

gfcapalbo force-pushed the 14.0-web_widget_html_markdown_monodirectional branch 2 times, most recently from b762848 to c984871 Compare October 11, 2022 13:34

[ADD] web_widget_html_markdown

b5a08d7

gfcapalbo force-pushed the 14.0-web_widget_html_markdown_monodirectional branch from 6278a15 to b5a08d7 Compare October 11, 2022 14:15

[FIX] remove HTML, the value of this is already the element.

2961503

		@@ -0,0 +1 @@
		* HTML Will be lost when passing from Html to markdown




		var FieldHtmlMarkDown = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {

		@@ -0,0 +1,27 @@
		# Copyright (C) 2014 Sudokeys (<http://www.sudokeys.com>)
		# Copyright (C) 2017 Komit (<http://www.komit-consulting.com>)

Conversation

thomaspaulb commented Sep 13, 2022

Uh oh!

Uh oh!

Uh oh!

thomaspaulb left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gfcapalbo commented Sep 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gfcapalbo commented Sep 20, 2022 •

edited

Loading