• web_widget_markdown

  2 20 0.0 JavaScript

  Odoo JavaScript Widget to add markdown support to Text Field (Edit and Readonly modes).

  

The Odoo FieldText transforms the Dom node of your widget into a in edit mode. We can see it in odoo/addons/web/static/src/js/fields/basic_fields.js


init: function () {
    this._super.apply(this, arguments);

    if (this.mode === 'edit') {
        this.tagName = 'textarea';
    }
    this.autoResizeOptions = {parent: this};
},

Enter fullscreen mode Exit fullscreen mode

This behavior is the closest to our expected result so we are inheriting that widget to gain time.

In our widget, we defined the className property to add our class .o_field_markdown to identify our widget in the DOM. Also, it is used in our tests to check widget behavior.

The $el property of a widget

$el property accessible inside the Widget holds the JQuery object of the root DOM element of the widget. So in this case we use the JQuery HTML function to inject the content

Hello World

inside the $el to pass this test. In TDD the workflow is to make the tests pass with minimum effort, then write new tests, refactor to make it pass again, etc...

After updating the module and going to http://localhost:8069/web/tests/ we can see that our tests pass!

Improving our tests and refactoring the widget

Adding more tests

We will add another test to make our test suite slightly more robust and see if our current implementation of the widget still holds up (Spoiler alert: it won't).


QUnit.test('web_widget_markdown readonly test 2', async function(assert) {
    assert.expect(2);
    var form = await testUtils.createView({
        View: FormView,
        model: 'blog',
        data: this.data,
        arch: '' +
                '' +
                    '' +
                    '' +
                '' +
            '',
        res_id: 2,
    });
    assert.strictEqual(
        form.$('.o_field_markdown').find("h2").length, 
        1, 
        "h2 should be present"
    )
    assert.strictEqual(
        form.$('.o_field_markdown h2').text(), 
        "Second title", 
        "
 should contain 'Second title'"
    )
    form.destroy();
});

Enter fullscreen mode Exit fullscreen mode

We changed "QUnit.only" to "QUnit.test" to run multiple tests and then in the test interface we searched for the "Markdown Widget" module to run only them:



Now the tests are failing because we are always injecting

Hello world as the value!

Refactoring the widget

The value property

Every widget inheriting InputField, DebouncedField or even AbstractField hold their value inside a value property. So inside the _renderReadonly method, we use the same logic as before, injecting directly the HTML content inside the $el. But this time we will use the underlying markdown function of the SimpleMDE library to parse this.value and return the HTML transformed version.

This is the new field_widget.js


odoo.define('my_field_widget', function (require) {
"use strict";
var fieldRegistry = require('web.field_registry');
var basicFields = require('web.basic_fields');

var markdownField = basicFields.FieldText.extend({
    supportedFieldTypes: ['text'],
    className: 'o_field_markdown',
    jsLibs: [
        '/web_widget_markdown/static/lib/simplemde.min.js',
    ],

    _renderReadonly: function () {
        this.$el.html(SimpleMDE.prototype.markdown(this.value));
    },
});

fieldRegistry.add('markdown', markdownField);

return {
    markdownField: markdownField,
};
});

Enter fullscreen mode Exit fullscreen mode

We added the external JavaScript library SimpleMDE in the jsLibs definition of our widget.

Running the tests again now gives us :



Victory! 😊

Simulating Edit mode in our test suite

The current use case of our widget will be, going into Edit mode, writing markdown, Saving, and then seeing it rendered as HTML.

This what we will simulate in this new test function by using some of the most useful functions in the testUtils module.


QUnit.test('web_widget_markdown edit form', async function(assert) {
    assert.expect(2);
    var form = await testUtils.createView({
        View: FormView,
        model: 'blog',
        data: this.data,
        arch: '' +
                '' +
                    '' +
                    '' +
                '' +
            '',
        res_id: 1,
    });
    await testUtils.form.clickEdit(form);
    await testUtils.fields.editInput(form.$('.o_field_markdown'), ' **bold content**');
    await testUtils.form.clickSave(form);
    assert.strictEqual(
        form.$('.o_field_markdown').find("strong").length, 
        1, 
        "b should be present"
    )
    assert.strictEqual(
        form.$('.o_field_markdown strong').text(), 
        "bold content", 
        " should contain 'bold content'"
    )
    form.destroy();
});

Enter fullscreen mode Exit fullscreen mode

What is happening inside the test?

We create the mock form similar to the other 2 tests. Then we simulate the click on Edit button with clickEdit. After that, we edit the input with editInput and write some markdown that we will test after. Finally, we simulate the user hitting the Save button via clickSave .

Odoo versions compatibility

clickEdit and clickSave are new functions in the file odoo/addons/web/static/tests/helpers/test_utils_form.js present from Odoo 12 and onwards.

If you use Odoo 11, replace these calls with that


// instead of await testUtils.form.clickEdit(form);
form.$buttons.find(".o_form_button_edit").click();

// intead of await testUtils.form.clickSave(form);
form.$buttons.find(".o_form_button_save").click();

Enter fullscreen mode Exit fullscreen mode

Run the tests again on your browser and you will see that it passes! 🥳

Conclusion

This is already running quite long and for now, our widget is functional in render and edit mode. In the next part, we will add the Markdown Editor itself instead of the </code> tag to make it easier for the user to write.</p> <p>We will view more types of Fields, create a template and change our tests to take into consideration the change of input type.</p> <p>The code for this Part 1 of the tutorial is <a href="https://github.com/Coding-Dodo/web_widget_markdown/tree/web-widget-markdown-tutorial-part-one">available here on Github</a>.</p> <p><a href="https://codingdodo.com/create-odoo-markdown-widget-field-with-tdd-part-2/">Part 2 of this tutorial is already available at Coding Dodo.</a></p> <p>Thanks for reading, if you liked this article please consider:</p> <ul> <li>☕️ <a href="https://www.buymeacoffee.com/CodingDodo">Buying me a Coffee</a> </li> <li>🥳 Register on <a href="https://codingdodo.com">Codingdodo.com</a> </li> </ul>

• SimpleMDE

  12 9,677 0.0 JavaScript

  A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

  

There is a lot of awesome JavaScript markdown editors but I settled for simpleMDE as a very easy embeddable Markdown Editor.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project