diff --git a/document_page_markdown/README.rst b/document_page_markdown/README.rst new file mode 100644 index 00000000000..40c4073c039 --- /dev/null +++ b/document_page_markdown/README.rst @@ -0,0 +1,128 @@ +.. image:: https://odoo-community.org/readme-banner-image + :target: https://odoo-community.org/get-involved?utm_source=readme + :alt: Odoo Community Association + +====================== +Document Page Markdown +====================== + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:03227fb6b784d826d7804fc914b505749da16c52f32a998c93b3203ae085c341 + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Alpha-red.png + :target: https://odoo-community.org/page/development-status + :alt: Alpha +.. |badge2| image:: https://img.shields.io/badge/license-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fknowledge-lightgray.png?logo=github + :target: https://github.com/OCA/knowledge/tree/16.0/document_page_markdown + :alt: OCA/knowledge +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/knowledge-16-0/knowledge-16-0-document_page_markdown + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png + :target: https://runboat.odoo-community.org/builds?repo=OCA/knowledge&target_branch=16.0 + :alt: Try me on Runboat + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module adds a **Markdown** entry to the *Structure* section of the knowledge +page editor's ``/`` menu. + +Picking it opens a *Write* / *Preview* box, the same way a pull request +description works: you write `Markdown +`_, check the formatted result in +the preview, and insert it in the page as regular content. + +The preview is rendered server side by the very same renderer that produces the +inserted content, so what you see is what you get. + +.. IMPORTANT:: + This is an alpha version, the data model and design can change at any time without warning. + Only for development or testing purpose, do not use in production. + `More details on development status `_ + +**Table of contents** + +.. contents:: + :local: + +Installation +============ + +This module requires the ``markdown`` Python library:: + + pip install markdown + +Usage +===== + +#. Go to *Knowledge > Pages* and open or create a page. +#. In the page content, type ``/`` and pick *Markdown* under *Structure*. +#. Write (or paste) Markdown in the *Write* tab. The toolbar inserts the syntax + for you if you prefer. +#. Check the result in the *Preview* tab. +#. Click *Insert*: the formatted content is added at the cursor, as regular page + content, so history, diffs and reports keep working as usual. + +Known issues / Roadmap +====================== + +What is inserted is the rendered content, not the Markdown source: reopening the +page lets you edit it with the rich text editor, not as Markdown. + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +~~~~~~~ + +* Escodoo + +Contributors +~~~~~~~~~~~~ + +* `Escodoo `_: + + * Cristiano Mafra Junior + +Maintainers +~~~~~~~~~~~ + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +.. |maintainer-CristianoMafraJunior| image:: https://github.com/CristianoMafraJunior.png?size=40px + :target: https://github.com/CristianoMafraJunior + :alt: CristianoMafraJunior + +Current `maintainer `__: + +|maintainer-CristianoMafraJunior| + +This module is part of the `OCA/knowledge `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/document_page_markdown/__init__.py b/document_page_markdown/__init__.py new file mode 100644 index 00000000000..0650744f6bc --- /dev/null +++ b/document_page_markdown/__init__.py @@ -0,0 +1 @@ +from . import models diff --git a/document_page_markdown/__manifest__.py b/document_page_markdown/__manifest__.py new file mode 100644 index 00000000000..ee4f29f5d82 --- /dev/null +++ b/document_page_markdown/__manifest__.py @@ -0,0 +1,27 @@ +# Copyright 2026 Escodoo +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +{ + "name": "Document Page Markdown", + "summary": "Insert Markdown written content in knowledge pages", + "version": "16.0.1.0.0", + "category": "Knowledge Management", + "author": "Escodoo, Odoo Community Association (OCA)", + "website": "https://github.com/OCA/knowledge", + "license": "AGPL-3", + "development_status": "Alpha", + "maintainers": ["CristianoMafraJunior"], + "depends": ["document_page"], + "external_dependencies": {"python": ["markdown"]}, + "assets": { + "web.assets_backend": [ + "document_page_markdown/static/src/js/markdown_dialog.esm.js", + "document_page_markdown/static/src/js/markdown_powerbox.esm.js", + "document_page_markdown/static/src/xml/markdown_dialog.xml", + "document_page_markdown/static/src/scss/markdown_dialog.scss", + ], + "web.assets_tests": [ + "document_page_markdown/static/tests/tours/markdown_powerbox_tour.esm.js", + ], + }, +} diff --git a/document_page_markdown/models/__init__.py b/document_page_markdown/models/__init__.py new file mode 100644 index 00000000000..427be24e72a --- /dev/null +++ b/document_page_markdown/models/__init__.py @@ -0,0 +1 @@ +from . import document_page diff --git a/document_page_markdown/models/document_page.py b/document_page_markdown/models/document_page.py new file mode 100644 index 00000000000..56739afab17 --- /dev/null +++ b/document_page_markdown/models/document_page.py @@ -0,0 +1,21 @@ +# Copyright 2026 Escodoo +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +import markdown + +from odoo import api, models + + +class DocumentPage(models.Model): + _inherit = "document.page" + + def _markdown_extensions(self): + """Extensions passed to the renderer. Override to add your own.""" + return ["extra", "sane_lists", "nl2br", "admonition"] + + @api.model + def render_markdown(self, source): + """Render a Markdown source into the HTML inserted in a page.""" + if not source: + return "" + return markdown.markdown(source, extensions=self._markdown_extensions()) diff --git a/document_page_markdown/readme/CONTRIBUTORS.rst b/document_page_markdown/readme/CONTRIBUTORS.rst new file mode 100644 index 00000000000..e4d12da6c82 --- /dev/null +++ b/document_page_markdown/readme/CONTRIBUTORS.rst @@ -0,0 +1,3 @@ +* `Escodoo `_: + + * Cristiano Mafra Junior diff --git a/document_page_markdown/readme/DESCRIPTION.rst b/document_page_markdown/readme/DESCRIPTION.rst new file mode 100644 index 00000000000..e3cc62f819e --- /dev/null +++ b/document_page_markdown/readme/DESCRIPTION.rst @@ -0,0 +1,10 @@ +This module adds a **Markdown** entry to the *Structure* section of the knowledge +page editor's ``/`` menu. + +Picking it opens a *Write* / *Preview* box, the same way a pull request +description works: you write `Markdown +`_, check the formatted result in +the preview, and insert it in the page as regular content. + +The preview is rendered server side by the very same renderer that produces the +inserted content, so what you see is what you get. diff --git a/document_page_markdown/readme/INSTALL.rst b/document_page_markdown/readme/INSTALL.rst new file mode 100644 index 00000000000..eaf3efc42e4 --- /dev/null +++ b/document_page_markdown/readme/INSTALL.rst @@ -0,0 +1,3 @@ +This module requires the ``markdown`` Python library:: + + pip install markdown diff --git a/document_page_markdown/readme/ROADMAP.rst b/document_page_markdown/readme/ROADMAP.rst new file mode 100644 index 00000000000..860cc4b8cd8 --- /dev/null +++ b/document_page_markdown/readme/ROADMAP.rst @@ -0,0 +1,2 @@ +What is inserted is the rendered content, not the Markdown source: reopening the +page lets you edit it with the rich text editor, not as Markdown. diff --git a/document_page_markdown/readme/USAGE.rst b/document_page_markdown/readme/USAGE.rst new file mode 100644 index 00000000000..34ef9c72d31 --- /dev/null +++ b/document_page_markdown/readme/USAGE.rst @@ -0,0 +1,7 @@ +#. Go to *Knowledge > Pages* and open or create a page. +#. In the page content, type ``/`` and pick *Markdown* under *Structure*. +#. Write (or paste) Markdown in the *Write* tab. The toolbar inserts the syntax + for you if you prefer. +#. Check the result in the *Preview* tab. +#. Click *Insert*: the formatted content is added at the cursor, as regular page + content, so history, diffs and reports keep working as usual. diff --git a/document_page_markdown/static/description/icon.png b/document_page_markdown/static/description/icon.png new file mode 100644 index 00000000000..3a0328b516c Binary files /dev/null and b/document_page_markdown/static/description/icon.png differ diff --git a/document_page_markdown/static/description/index.html b/document_page_markdown/static/description/index.html new file mode 100644 index 00000000000..7b73f698b33 --- /dev/null +++ b/document_page_markdown/static/description/index.html @@ -0,0 +1,473 @@ + + + + + +README.rst + + + +
+ + + +Odoo Community Association + +
+

Document Page Markdown

+ +

Alpha License: AGPL-3 OCA/knowledge Translate me on Weblate Try me on Runboat

+

This module adds a Markdown entry to the Structure section of the knowledge +page editor’s / menu.

+

Picking it opens a Write / Preview box, the same way a pull request +description works: you write Markdown, check the formatted result in +the preview, and insert it in the page as regular content.

+

The preview is rendered server side by the very same renderer that produces the +inserted content, so what you see is what you get.

+
+

Important

+

This is an alpha version, the data model and design can change at any time without warning. +Only for development or testing purpose, do not use in production. +More details on development status

+
+

Table of contents

+ +
+

Installation

+

This module requires the markdown Python library:

+
+pip install markdown
+
+
+
+

Usage

+
    +
  1. Go to Knowledge > Pages and open or create a page.
    2. +
  2. In the page content, type / and pick Markdown under Structure.
    3. +
  3. Write (or paste) Markdown in the Write tab. The toolbar inserts the syntax +for you if you prefer.
    4. +
  4. Check the result in the Preview tab.
    5. +
  5. Click Insert: the formatted content is added at the cursor, as regular page +content, so history, diffs and reports keep working as usual.
    6. +
+
+
+

Known issues / Roadmap

+

What is inserted is the rendered content, not the Markdown source: reopening the +page lets you edit it with the rich text editor, not as Markdown.

+
+
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • Escodoo
    • +
+
+
+

Contributors

+
    +
  • Escodoo:
      +
    • Cristiano Mafra Junior
      • +
    +
    • +
+
+
+

Maintainers

+

This module is maintained by the OCA.

+ +Odoo Community Association + +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

Current maintainer:

+

CristianoMafraJunior

+

This module is part of the OCA/knowledge project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+
+ + diff --git a/document_page_markdown/static/src/js/markdown_dialog.esm.js b/document_page_markdown/static/src/js/markdown_dialog.esm.js new file mode 100644 index 00000000000..de2734ca7a4 --- /dev/null +++ b/document_page_markdown/static/src/js/markdown_dialog.esm.js @@ -0,0 +1,130 @@ +/** @odoo-module **/ + +import {Component, markup, useRef, useState, xml} from "@odoo/owl"; +import {Dialog} from "@web/core/dialog/dialog"; +import {_lt} from "@web/core/l10n/translation"; +import {useService} from "@web/core/utils/hooks"; +import {useWowlService} from "@web/legacy/utils"; + +const TOOLBAR_COMMANDS = [ + {name: "h1", icon: "fa-header", title: _lt("Heading"), prefix: "# "}, + {name: "h2", icon: "fa-header fa-sm", title: _lt("Subheading"), prefix: "## "}, + {name: "bold", icon: "fa-bold", title: _lt("Bold"), wrap: "**"}, + {name: "italic", icon: "fa-italic", title: _lt("Italic"), wrap: "*"}, + {name: "strike", icon: "fa-strikethrough", title: _lt("Strikethrough"), wrap: "~~"}, + {name: "code", icon: "fa-code", title: _lt("Code"), wrap: "`"}, + {name: "quote", icon: "fa-quote-right", title: _lt("Quote"), prefix: "> "}, + {name: "ul", icon: "fa-list-ul", title: _lt("Bulleted list"), prefix: "- "}, + {name: "ol", icon: "fa-list-ol", title: _lt("Numbered list"), prefix: "1. "}, + { + name: "check", + icon: "fa-check-square-o", + title: _lt("Checklist"), + prefix: "- [ ] ", + }, + {name: "link", icon: "fa-link", title: _lt("Link"), template: "[$1](https://)"}, + { + name: "table", + icon: "fa-table", + title: _lt("Table"), + block: "| A | B |\n| --- | --- |\n| | |", + }, + {name: "hr", icon: "fa-minus", title: _lt("Separator"), block: "---"}, +]; + +/** + * Write Markdown, preview it, and insert it as rich content. + */ +export class MarkdownDialog extends Component { + setup() { + this.orm = useService("orm"); + this.textareaRef = useRef("textarea"); + this.toolbar = TOOLBAR_COMMANDS; + this.state = useState({source: "", preview: "", previewing: false}); + } + + /** + * Apply a toolbar command on the current selection. + * + * @param {Object} command One of the entries of `TOOLBAR_COMMANDS`. + */ + applyCommand(command) { + const textarea = this.textareaRef.el; + const value = textarea.value; + let start = textarea.selectionStart; + let end = textarea.selectionEnd; + if (command.prefix) { + // Line commands apply to the whole line(s) the cursor is on. + start = value.lastIndexOf("\n", start - 1) + 1; + const nextBreak = value.indexOf("\n", end); + end = nextBreak === -1 ? value.length : nextBreak; + } + const selection = value.slice(start, end); + let replacement = selection; + if (command.wrap) { + replacement = `${command.wrap}${selection}${command.wrap}`; + } else if (command.prefix) { + replacement = selection + .split("\n") + .map((line) => `${command.prefix}${line}`) + .join("\n"); + } else if (command.template) { + replacement = command.template.replace("$1", selection || _lt("label")); + } else if (command.block) { + const lineBreak = start === 0 || value[start - 1] === "\n" ? "" : "\n"; + replacement = `${lineBreak}${command.block}\n`; + } + textarea.value = value.slice(0, start) + replacement + value.slice(end); + textarea.focus(); + const cursor = start + replacement.length; + textarea.setSelectionRange(cursor, cursor); + this.state.source = textarea.value; + } + + onInput(ev) { + this.state.source = ev.target.value; + } + + /** + * Switch between the "Write" and "Preview" tabs. + * + * @param {Boolean} previewing + */ + async showTab(previewing) { + this.state.previewing = previewing; + if (previewing) { + this.state.preview = markup(await this.renderMarkdown()); + } + } + + renderMarkdown() { + return this.orm.call("document.page", "render_markdown", [this.state.source]); + } + + async onInsert() { + if (this.state.source) { + this.props.insert(await this.renderMarkdown()); + } + this.props.close(); + } +} + +MarkdownDialog.template = "document_page_markdown.MarkdownDialog"; +MarkdownDialog.components = {Dialog}; +MarkdownDialog.props = { + insert: Function, + // Injected by the dialog service. + close: Function, +}; + +/** + * Mountable wrapper, so the legacy wysiwyg widget can open the dialog. + */ +export class MarkdownDialogWrapper extends Component { + setup() { + useWowlService("dialog").add(MarkdownDialog, this.props); + } +} + +MarkdownDialogWrapper.template = xml``; +MarkdownDialogWrapper.props = {insert: Function}; diff --git a/document_page_markdown/static/src/js/markdown_powerbox.esm.js b/document_page_markdown/static/src/js/markdown_powerbox.esm.js new file mode 100644 index 00000000000..3b7329407a0 --- /dev/null +++ b/document_page_markdown/static/src/js/markdown_powerbox.esm.js @@ -0,0 +1,56 @@ +/** @odoo-module **/ + +import { + parseHTML, + preserveCursor, +} from "@web_editor/js/editor/odoo-editor/src/utils/utils"; +import {ComponentWrapper} from "web.OwlCompatibility"; +import {MarkdownDialogWrapper} from "@document_page_markdown/js/markdown_dialog.esm"; +import Wysiwyg from "web_editor.wysiwyg"; +import core from "web.core"; + +const _t = core._t; + +/** + * Add a "Markdown" entry to the editor's "/" powerbox, on knowledge pages. + */ +Wysiwyg.include({ + /** + * @override + */ + _getPowerboxOptions: function () { + const options = this._super(...arguments); + if (this.options.recordInfo.res_model !== "document.page") { + return options; + } + options.commands.push({ + category: _t("Structure"), + name: _t("Markdown"), + priority: 25, + description: _t("Write Markdown and insert it as content."), + fontawesome: "fa-file-code-o", + isDisabled: () => !this.odooEditor.isSelectionInBlockRoot(), + callback: () => this._openMarkdownDialog(), + }); + return options; + }, + + /** + * Ask for a Markdown source and insert its rendering at the cursor. + * + * @private + * @returns {Promise} resolved once the dialog is mounted + */ + _openMarkdownDialog: function () { + // Clicking in the dialog loses the selection inside the editable, so + // it has to be restored before inserting anything. + const restoreSelection = preserveCursor(this.odooEditor.document); + const wrapper = new ComponentWrapper(this, MarkdownDialogWrapper, { + insert: (html) => { + restoreSelection(); + this.odooEditor.execCommand("insert", parseHTML(html)); + }, + }); + return wrapper.mount(document.body); + }, +}); diff --git a/document_page_markdown/static/src/scss/markdown_dialog.scss b/document_page_markdown/static/src/scss/markdown_dialog.scss new file mode 100644 index 00000000000..663b97500a6 --- /dev/null +++ b/document_page_markdown/static/src/scss/markdown_dialog.scss @@ -0,0 +1,39 @@ +.o_markdown_dialog { + .o_markdown_tabs { + margin-bottom: 0; + } + + .o_markdown_body { + border: 1px solid $border-color; + border-top: 0; + border-radius: 0 0 $border-radius $border-radius; + padding: 8px; + min-height: 320px; + } + + .o_markdown_toolbar { + border-bottom: 1px solid $border-color; + margin-bottom: 8px; + padding-bottom: 4px; + } + + .o_markdown_source { + width: 100%; + min-height: 280px; + resize: vertical; + font-family: $font-family-monospace; + font-size: 0.9em; + white-space: pre; + overflow-wrap: normal; + overflow-x: auto; + } + + .o_markdown_preview { + overflow-x: auto; + + table { + @extend .table, .table-bordered; + width: auto; + } + } +} diff --git a/document_page_markdown/static/src/xml/markdown_dialog.xml b/document_page_markdown/static/src/xml/markdown_dialog.xml new file mode 100644 index 00000000000..fc79bcb3d4c --- /dev/null +++ b/document_page_markdown/static/src/xml/markdown_dialog.xml @@ -0,0 +1,66 @@ + + + + +
+ +
+
+ +
+