{"id":16006032,"url":"https://github.com/thibaudcolas/draftjs_exporter_wagtaildbhtml","last_synced_at":"2025-03-15T06:18:27.963Z","repository":{"id":146980887,"uuid":"107432826","full_name":"thibaudcolas/draftjs_exporter_wagtaildbhtml","owner":"thibaudcolas","description":"Convert the Facebook Draft.js editor’s raw ContentState to Wagtail's DB-HTML representation","archived":false,"fork":false,"pushed_at":"2018-01-15T12:09:25.000Z","size":23,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-11T12:12:35.118Z","etag":null,"topics":["draft-js","wagtail","wagtail-cms"],"latest_commit_sha":null,"homepage":"https://thibaudcolas.github.io/draftjs_exporter_wagtaildbhtml","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thibaudcolas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-18T16:16:05.000Z","updated_at":"2024-05-29T08:52:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"fa26b20b-8c05-4aaf-aa37-efce96d85a3c","html_url":"https://github.com/thibaudcolas/draftjs_exporter_wagtaildbhtml","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaudcolas%2Fdraftjs_exporter_wagtaildbhtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaudcolas%2Fdraftjs_exporter_wagtaildbhtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaudcolas%2Fdraftjs_exporter_wagtaildbhtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaudcolas%2Fdraftjs_exporter_wagtaildbhtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thibaudcolas","download_url":"https://codeload.github.com/thibaudcolas/draftjs_exporter_wagtaildbhtml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243690319,"owners_count":20331758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draft-js","wagtail","wagtail-cms"],"created_at":"2024-10-08T11:22:58.096Z","updated_at":"2025-03-15T06:18:27.942Z","avatar_url":"https://github.com/thibaudcolas.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [draftjs_exporter_wagtaildbhtml](https://thibaudcolas.github.io/draftjs_exporter_wagtaildbhtml/) 🐍 [![Build Status](https://travis-ci.org/thibaudcolas/draftjs_exporter_wagtaildbhtml.svg?branch=master)](https://travis-ci.org/thibaudcolas/draftjs_exporter_wagtaildbhtml)\n\n\u003e Convert the Facebook Draft.js editor’s raw ContentState to Wagtail's DB-HTML.\n\n## Output format\n\nWagtail's DB-HTML content representation is an HTML-like XML syntax, with a few custom elements and attributes.\n\nHere are examples of representations specific to this format:\n\n```html\n\u003c!-- Bold --\u003e\n\u003cb\u003ebold\u003c/b\u003e\n\u003c!-- Italic --\u003e\n\u003ci\u003eItalic\u003c/i\u003e\n\u003c!-- Image --\u003e\n\u003cembed alt=\"Right-aligned image\" embedtype=\"image\" format=\"right\" id=\"49\"/\u003e\n\u003c!-- Embed --\u003e\n\u003cembed embedtype=\"media\" url=\"https://www.youtube.com/watch?v=y8Kyi0WNg40\"/\u003e\n\u003c!-- Document link --\u003e\n\u003ca id=\"1\" linktype=\"document\"\u003edocument link\u003c/a\u003e\n\u003c!-- Internal page link --\u003e\n\u003ca id=\"42\" linktype=\"page\"\u003einternal page link\u003c/a\u003e\n```\n\n### Differences in format compared to Wagtail 1 processing\n\nThere are a number of differences between the DB-HTML coming from Wagtail 1's rich text processing pipeline, and the DB-HTML produced from Draft.js ContentState by `draftjs_exporter`.\n\nThe reasons for those differences are:\n\n* Wagtail 1's DB-HTML comes from Hallo, which doesn't provide much control over its HTML output.\n* Working on arbitrary HTML from the editor, Wagtail's DB-HTML pipeline doesn't normalise ambiguous representations.\n* In contrast, `draftjs_exporter` operates on a more constrained format with less potential for ambiguities.\n* `drafjs_exporter` also further constraints its output to normalise potentially ambiguous representations.\n\n### Spacing unicode character\n\nHallo inserts `\\u00a0` after a comma in some cases (no-break space).\n\n```html\n\u003c!-- DB-HTML from Hallo in Wagtail --\u003e\n\u003cb\u003ebold\u003c/b\u003e,\\u00a0\u003ci\u003eitalic\u003c/i\u003e\n```\n\n### Order of tags for multiple styles\n\n* Hallo wraps style tags in the order they are used in the editor\n* `draftjs_exporter` always wraps style tags in the same order (alphabetical) ([`style_state.py#L30`](https://github.com/springload/draftjs_exporter/blob/dcfa0491ce78783a20720ed5b557166154a57259/draftjs_exporter/style_state.py#L30))\n\n```html\n\u003c!-- DB-HTML of Wagtail with Hallo --\u003e\n\u003ci\u003e\u003cb\u003eitalic bold\u003c/b\u003e\u003c/i\u003e\n\u003c!-- DB-HTML of draftjs_exporter with Draftail, regardless of activation order --\u003e\n\u003cb\u003e\u003ci\u003eitalic bold\u003c/i\u003e\u003c/b\u003e\n```\n\n### Wrapping in `p` tags\n\n* Hallo frequently wraps content within `p` tags.\n* `draftjs_exporter` only outputs `p` tags for individual blocks of type `UNSTYLED` (the editor's default format).\n\n```html\n\u003c!-- DB-HTML of Wagtail with Hallo --\u003e\n\u003cp\u003e\n    \u003cul\u003e\u003cli\u003eUnordered list item 1\u003c/li\u003e\u003c/ul\u003e\n    \u003cp\u003eHorizontal rule:\u003c/p\u003e\n\u003c/p\u003e\n\u003c!-- DB-HTML of draftjs_exporter with Draftail --\u003e\n\u003cul\u003e\u003cli\u003eUnordered list item 1\u003c/li\u003e\u003c/ul\u003e\n\u003cp\u003eHorizontal rule:\u003c/p\u003e\n\n\u003c!-- DB-HTML of Wagtail with Hallo --\u003e\n\u003cp\u003e\n    \u003chr/\u003e\n    \u003cembed embedtype=\"media\" url=\"https://www.youtube.com/watch?v=y8Kyi0WNg40\"/\u003e\n\u003c/p\u003e\n\u003c!-- DB-HTML of draftjs_exporter with Draftail --\u003e\n\u003chr/\u003e\n\u003cembed embedtype=\"media\" url=\"https://www.youtube.com/watch?v=y8Kyi0WNg40\"/\u003e\n```\n\n### Line breaks\n\n* Hallo's behavior has yet to be defined.\n* Draftail always inserts empty blocks for empty lines, and line breaks when using the \"soft line break\" control / keyboard shortcut.\n\n```html\n\u003c!-- DB-HTML of Wagtail with Hallo --\u003e\n\u003col\u003e\u003cli\u003eOrdered list item 1\u003cbr/\u003e\u003c/li\u003e\u003c/ol\u003e\n\u003c!-- DB-HTML of draftjs_exporter with Draftail --\u003e\n\u003col\u003e\u003cli\u003eOrdered list item 1\u003c/li\u003e\u003c/ol\u003e\n\n\u003c!-- DB-HTML of Wagtail with Hallo --\u003e\n\u003cp\u003e\u003cbr/\u003e\u003c/p\u003e\n\u003c!-- DB-HTML of draftjs_exporter with Draftail --\u003e\n\u003cp\u003e\u003c/p\u003e\n\n\u003c!-- DB-HTML of Wagtail with Hallo --\u003e\n\u003cp\u003e\n    \u003cembed alt=\"Full width image\" embedtype=\"image\" format=\"fullwidth\" id=\"1\"/\u003e\n    \u003cbr/\u003e\n\u003c/p\u003e\n\u003c!-- DB-HTML of draftjs_exporter with Draftail --\u003e\n\u003cembed alt=\"Full-width image\" embedtype=\"image\" format=\"fullwidth\" id=\"1\"/\u003e\n\u003cp\u003e\u003c/p\u003e\n```\n\n### To test further\n\nOverlapping style ranges\n\n## Installation\n\n\u003e Requirements: `virtualenv`, `pyenv`, `twine`\n\n```sh\ngit clone git@github.com:thibaudcolas/draftjs_exporter_wagtaildbhtml.git\ncd draftjs_exporter_wagtaildbhtml/\n# Install the git hooks.\n./.githooks/deploy\n# Install the Python environment.\nvirtualenv .venv\nsource ./.venv/bin/activate\nmake init\n# Install required Python versions\npyenv install --skip-existing 2.7.11\npyenv install --skip-existing 3.4.4\npyenv install --skip-existing 3.5.1\n# Make required Python versions available globally.\npyenv global system 2.7.11 3.4.4 3.5.1\n```\n\n## Commands\n\n```sh\nmake help            # See what commands are available.\nmake init            # Install dependencies and initialise for development.\nmake lint            # Lint the project.\nmake test            # Test the project.\nmake test-watch      # Restarts the tests whenever a file changes.\nmake test-coverage   # Run the tests while generating test coverage data.\nmake test-ci         # Continuous integration test suite.\nmake dev             # Restarts the example whenever a file changes.\nmake clean-pyc       # Remove Python file artifacts.\nmake publish         # Publishes a new version to pypi.\n```\n\n## Debugging\n\n* Always run the tests. `npm install -g nodemon`, then `make test-watch`.\n* Use a debugger. `pip install ipdb`, then `import ipdb; ipdb.set_trace()`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthibaudcolas%2Fdraftjs_exporter_wagtaildbhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthibaudcolas%2Fdraftjs_exporter_wagtaildbhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthibaudcolas%2Fdraftjs_exporter_wagtaildbhtml/lists"}