Feature - New WYSIWYG editor via tiptap#12182
Feature - New WYSIWYG editor via tiptap#12182Sadashii wants to merge 44 commits intointernetarchive:masterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR replaces the legacy WMD markdown editor with a new Tiptap-based WYSIWYG markdown editor implemented as a Lit web component (<ol-markdown-editor>), and removes the WMD submodule, JS glue code, and related CSS.
Changes:
- Add a new Lit component (
OLMarkdownEditor) backed by Tiptap + tiptap-markdown, and export it via the Lit bundle entrypoint. - Replace markdown
<textarea>usages in multiple edit forms with<ol-markdown-editor>instances. - Remove WMD assets: submodule, initialization JS, and associated legacy CSS imports/files.
Reviewed changes
Copilot reviewed 21 out of 23 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| vendor/js/wmd | Removes the WMD git submodule pointer. |
| static/css/legacy.css | Stops importing legacy WMD styles. |
| static/css/legacy-wmd.css | Deletes WMD styling file. |
| static/css/js-all.css | Removes WMD prompt dialog CSS import. |
| static/css/components/work.css | Removes WMD preview + related description/notes styling. |
| static/css/components/wmd-prompt-dialog--js.css | Deletes WMD prompt dialog styles. |
| static/css/components/wmd-button-bar.css | Deletes WMD button bar styles. |
| package.json | Adds Tiptap + markdown dependencies. |
| package-lock.json | Locks the new dependencies and removes now-unused packages. |
| openlibrary/templates/type/user/edit.html | Swaps description textarea for <ol-markdown-editor>. |
| openlibrary/templates/type/tag/tag_form_inputs.html | Swaps page body textarea for <ol-markdown-editor>. |
| openlibrary/templates/type/page/edit.html | Swaps document body textarea for <ol-markdown-editor>. |
| openlibrary/templates/type/list/edit.html | Swaps list description textarea for <ol-markdown-editor>. |
| openlibrary/templates/type/author/edit.html | Swaps bio textarea for <ol-markdown-editor>. |
| openlibrary/templates/books/edit/excerpts.html | Swaps excerpt comment textarea for <ol-markdown-editor>. |
| openlibrary/templates/books/edit/edition.html | Swaps edition description/notes textareas for <ol-markdown-editor>. |
| openlibrary/templates/books/edit/about.html | Swaps work description textarea for <ol-markdown-editor>. |
| openlibrary/plugins/openlibrary/js/markdown-editor/index.js | Removes WMD init module. |
| openlibrary/plugins/openlibrary/js/index.js | Removes dynamic import + initialization of WMD editor. |
| openlibrary/core/olmarkdown.py | Adds a TODO note. |
| openlibrary/components/lit/index.js | Exports the new Lit markdown editor component. |
| openlibrary/components/lit/OLMarkdownEditor.js | Adds the new Lit-based Tiptap editor implementation. |
| .gitmodules | Removes the WMD submodule definition. |
for more information, see https://pre-commit.ci
for more information, see https://pre-commit.ci
…/openlibrary into 7308/feature/new-wysiwyg-editor
for more information, see https://pre-commit.ci
…/openlibrary into 7308/feature/new-wysiwyg-editor
Suggestion: Lazy-load Tiptap to avoid bloating the shared bundleThe The fix is a dynamic What changes:
The toolbar renders immediately with disabled buttons (existing behavior when Apply with Patch for
|
github-actions
Bot
added
the
Needs: Response
Suggested improvements to
|
|
@Sadashii 
|
Add an HtmlBlock tiptap extension that preserves raw HTML in markdown content. HTML blocks display as editable source code in the editor with a </> label. Includes toolbar button to insert new blocks, image extension with popover, and a mixed markdown/HTML demo on the design page. Removes the anchor-id extension in favor of plain HTML.
for more information, see https://pre-commit.ci
…penlibrary into 7308/feature/new-wysiwyg-editor # Conflicts: # openlibrary/components/lit/OLMarkdownEditor.js
… overflow menu - Add enable-html-block attribute to ol-markdown-editor (default off), only enabled on the page editor template - Move image button into the "More" overflow menu on mobile viewports
…Sadashii/openlibrary into 7308/feature/new-wysiwyg-editor
…IWYG editor Extend editor heading levels from [1, 2] to [1, 2, 3, 4] so existing h3/h4 content on wiki pages (e.g. /about/lib) survives round-trips. Add 76 Jest tests covering markdown round-trip fidelity, idempotency, list indentation post-processing, HTML block preservation, and real OpenLibrary page patterns.
lokesh
added
Needs: Testing
Lead: @lokesh
|
Added a suite of tests: Tested with real data: 181 book descriptions: 146 exact, 35 stable, 0 drift, 0 content loss. Wiki pages: /volunteer, /about/vision, /about/lib are all stable (idempotent after first pass). The "stable" changes are all harmless normalizations: reference-style links inlined, italic → italic, * list markers → -. The 1 drift is /help/faq/editing — a 28K wiki page that's non-idempotent due to Top inline HTML converting to Top then slightly shifting on subsequent passes. This is the same inline anchor pattern we discussed, and the content itself is fully preserved (98% ratio). |
…only) Enables Tiptap's `code` and `codeBlock` marks behind a new `enable-code` attribute on `<ol-markdown-editor>`, opted in only for the wiki/page edit form (matching the existing `enable-html-block` gating). Also teaches OLMarkdown to recognize GitHub-style fenced code blocks, so the server-side renderer emits `<pre><code>` instead of literal backticks + `<br />`. The fenced block is converted to a 4-space indented block in a preprocessor so the vendored Python-Markdown 1.6b engine (which predates fences) handles the rest. Tests cover editor round-trip (10 new cases) and renderer output (fenced_code test covering basic, language tag, multi-line, HTML escaping inside fences, and the full user-repro body).
- Mixed Markdown/HTML example: enable the HTML block button via enable-html-block, and show the attribute in the code snippet. - Remove the custom placeholder example (not distinctive enough). - New example: code blocks + inline code, gated on enable-code.
for more information, see https://pre-commit.ci
|
Update: Wed Apr 15, 2pm PST - Not currently on testing. Will attempt to get it back up, but you can also test locally. @cdrini I would love it you could vet the user experience and feature set of the new text editor. It's available on testing now...
@RayBB If you could help review the code that would be great. cc: @mekarpeles Note I highly recommend reading the handoff document below as it does a good job summarizing the changes, how this was tested, and any risks. It's lengthy, but there is a lot of good stuff to cover! PR #12182 — Review HandoffPR: Feature - New WYSIWYG editor via tiptap This PR replaces the legacy WMD/showdown markdown editor with a new Tiptap-based WYSIWYG editor, exposed as a Lit custom element ( Review Part 1 — User ExperienceWhat changed from the user's perspective
The editor appears on these edit forms:
Toolbar features (left → right)
What markdown/HTML is supportedHeadings: Inline: bold, italic, combined bold+italic, links, bare URLs (auto-linkified via Blocks: paragraphs, bullet lists, ordered lists, nested lists (auto-normalized to 4-space indent to match legacy Python Arbitrary HTML: supported only on the wiki page editor via the HTML block node. Appears as a dashed-bordered box with a Code (wiki only): inline Disabled from Tiptap StarterKit: Nesting: yes — you can bold inside italic, links inside a heading, links inside list items, lists inside blockquotes, etc. (tested). Images — upload? No. URL-only. Users must already have the image hosted somewhere. This matches old WMD behavior. Testing performedAutomated — new Jest suite at
Python-side: Manual — Tested all 8 edit surfaces above. Worth spot-checking before merge:
Risks to existing content
Things reviewer A should specifically verify
Review Part 2 — CodeMajor changesNew — Lit web component system for the editor
Removed — legacy WMD editor
Templates — 8 edit templates updated: old Design library — Python — Dependencies (package.json) — adds Architecture
Risks / concerns
Continuing to iterate on this editorWhere to add toolbar buttons: in Adding a Tiptap extension (e.g., table, task list):
Gating features per surface: mirror the Customizing per-form: the component accepts Limitations to know when extending:
Where should this editor be used in the future?Use
Do not use it for:
Toolbar profile recommendations for future surfaces:
If/when we need distinct profiles, prefer a single |
RayBB
left a comment
RayBB
left a comment
There was a problem hiding this comment.
In broad strokes this looks great. I'm very excited for it.
I have two relatively minor comments here.
Would it be feasible for either of you to record a talk through of the code changes?
I read the handoff doc but it still is a lot to wrap my head around the code for all those.
I'd also be curious to understand why this is in Lit vs Vue. Not that it matters super much but in the docs it says:
If you're considering Vue for a new feature, discuss it in the issue first.
So curious if there's ever a case we'd use Vue for something new?
| i = 0 | ||
| n = len(lines) | ||
| while i < n: | ||
| if self.FENCE_RE.match(lines[i]): | ||
| j = i + 1 | ||
| while j < n and not self.FENCE_RE.match(lines[j]): | ||
| j += 1 | ||
| if j < n: | ||
| if result and result[-1].strip(): | ||
| result.append("") | ||
| for inner in lines[i + 1 : j]: | ||
| result.append(" " + inner) | ||
| if j + 1 < n and lines[j + 1].strip(): | ||
| result.append("") | ||
| i = j + 1 | ||
| continue | ||
| result.append(lines[i]) | ||
| i += 1 |
There was a problem hiding this comment.
Can we use more descriptive variable names here? Maybe also some tests explicitly for this function. It seems to be part of test_olmarkdown_fenced_code
| "dependencies": { | ||
| "@tiptap/core": "^3.20.4", | ||
| "@tiptap/extension-image": "^3.22.1", | ||
| "@tiptap/extension-placeholder": "^3.20.4", | ||
| "@tiptap/pm": "^3.20.4", | ||
| "@tiptap/starter-kit": "^3.20.4", | ||
| "tiptap-markdown": "^0.9.0" | ||
| } |
There was a problem hiding this comment.
I don't know why exactly.. but we seem to have a tradition of putting everything in devDependencies so maybe these should go there too?
|
Howdy folks! Trying to give this a test, could we rebase this off latest master branch? Seeing some conflicts. |
RayBB
added
the
Needs: Submitter Input
# Conflicts: # openlibrary/i18n/messages.pot # openlibrary/templates/design.html
github-actions
Bot
removed
the
Needs: Submitter Input
for more information, see https://pre-commit.ci
Closes #7308
Closes #2370
This PR removes the old outdated wmd markdown editor, and replaces it with a new widely supported tiptap editor, created as a lit component which can now be put-in on any page with the element.
This PR also removes all the legacy wmd css and all the relevant code for cleanup.
Technical
The Tiptap editor and it's dependencies are installed via npm, and the component in itself is defined as a lit component.
Testing
Which pages actually use it
The editor appears only on edit forms:
Screenshot
text.mp4
Stakeholders
@lokesh