feat: Complete Tiptap editor migration with modern Wiki/Docs redesign #3229
+17,561
−30,210
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add Tiptap editor and related extensions: - @tiptap/core, @tiptap/pm, @tiptap/starter-kit - Extensions: mention, image, table, task-list, code-block-lowlight - Extensions: placeholder, typography, link, highlight, underline - lowlight for code syntax highlighting Part of TinyMCE to Tiptap migration (Phase 0: Foundation) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add Tiptap editor module with: - EditorRegistry: WeakMap-based instance management for clean lifecycle - createTiptapEditor: Factory function for editor instances - tiptapController: Main interface (initComplex, initSimple, initNotes, initInline) - HTMX lifecycle hooks: automatic cleanup on beforeSwap, init on afterSwap - Backwards-compatible API methods for gradual migration - Plugin registration system for extensions (AI tools, etc.) Key features: - Automatic textarea sync for form submission - Proper cleanup prevents orphaned editors and memory leaks - Supports complex, simple, notes, and inline editor variants Part of TinyMCE to Tiptap migration (Phase 0: Foundation) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add modern editor styling that matches Leantime's design system: - Container styling with focus states - ProseMirror content typography (headings, paragraphs, lists) - Task list (checkbox) styling - Code blocks and inline code - Table styling with resize handles - Image styling with selection state - Placeholder styling - Dark mode support via CSS variables - Editor variants: simple, notes, inline - Smooth animations Part of TinyMCE to Tiptap migration (Phase 0: Foundation) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add tiptap bundle: compiled-tiptap-editor.{version}.min.js
- Copy tiptap CSS to dist folder
Part of TinyMCE to Tiptap migration (Phase 0: Foundation)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update modal lifecycle callbacks to handle Tiptap editors: - beforePostSubmit: destroy all Tiptap editors before form submission - beforeShowCont: destroy all Tiptap editors before modal content swap - afterShowCont: initialize Tiptap editors in modal after content loads Maintains backwards compatibility with TinyMCE cleanup. Part of TinyMCE to Tiptap migration (Phase 0: Foundation) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create test-utils.js with 7 test suites covering: - EditorRegistry functionality - TiptapController API - Editor lifecycle (create, destroy) - Multiple editor management - Formatting commands - destroyWithin for HTMX simulation - Extension registration - Create tiptap-test.html manual test page - Update webpack.mix.js to compile test utilities Run tests via: leantime.tiptapTests.runAll() Test page at: /tiptap-test.html Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add tiptap-editor CSS to stylesheets - Add compiled-tiptap-editor JS after TinyMCE editor component This loads Tiptap globally so it can be used across all domains. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Updates submodule reference to include: - feat(notes): migrate notes editor from TinyMCE to Tiptap Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create caldav-plugin.md in .claude/docs/ for Copilot AI integration. Includes: - Quick reference for feature location and access - Common user questions in Q&A format - Troubleshooting guides for sync issues - Technical details (architecture, hooks, tables) - Error message explanations - Cross-references to related features Format optimized for AI retrieval and conversational responses. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 1.5 implementation: - Add toolbar.js extension with configurable button groups - Support complex/simple/notes toolbar configurations - Add floating toolbar CSS with shadow and pill-shaped design - Fix duplicate toolbar bug when switching between notes - Add task list CSS for proper checkbox alignment in editor and note cards - Integrate toolbar into tiptap index.js with cleanup on re-init Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace TinyMCE with Tiptap in showAll.tpl.php (standalone comments) - Replace TinyMCE with Tiptap in generalComment.sub.php (ticket comments) - Add bottom toolbar support (simple config) with B, I, link, image, list - Add CSS for bottom toolbar border radius integration - Add toolbar: 'simple' option to initSimpleEditor() method - Proper editor cleanup when switching between reply boxes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace TinyMCE with Tiptap in articleDialog.tpl.php - Add toolbar: 'complex' option to initComplexEditor() method - Full complex toolbar with headings, lists, tables, code blocks Note: Wiki template insertion feature deferred to Phase 6 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add a new Connect Calendar modal that: - Embeds iCal URL import form directly - Provides filter hook for plugins to inject calendar providers - Replaces "Import Calendar" link in sidebar with "Connect Calendar" This enables plugins (Google Calendar, CalDAV, etc.) to add their own calendar connection options via the filter: leantime.domain.calendar.controllers.connectcalendar.connectOptions.providers BREAKING: Changes sidebar link from "Import Calendar" to "Connect Calendar" Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 6 - Advanced Features: - Add @mentions autocomplete extension (mention.js) - Fetch users from /api/users with project context - Show avatar initials, name, email in dropdown - Keyboard navigation support (arrows, Enter, Escape) - Update toolbar to support dynamically registered plugin buttons - Add CSS styles for mention popup and AI dialog Phase 7 - Polish & Cleanup: - Add deprecation notice to editors.js (TinyMCE) - Console warning when editorController is used - Update EditorTypeEnum with Tiptap class names - Migrate remaining domain templates to Tiptap: - Ideas, Valuecanvas, Projects, Goalcanvas, Canvas, Dashboard - Update commentsController and authController for Tiptap - Update ticketsController to use tiptapController Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 6 Extensions: - Mermaid diagrams with edit dialog - Details/collapsible sections with toggle and delete - Math/LaTeX equations (block and inline) - Multi-column layouts (2 and 3 columns) - Emoji picker with search - Table of contents auto-generation - Embed extension for video/docs - Slash commands organized alphabetically Toolbar Enhancements: - Three-dot "more" menu with lesser-used items - Superscript and subscript formatting - Text alignment (left, center, right) - Text color picker with 9 colors - Highlight picker with 7 pastel colors - Font family picker (8 fonts) - Font size picker (11 sizes) - Horizontal rule and clear formatting Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add Reactions htmx controller and blade partial for comment reactions: - Toggle reactions via HTMX POST requests - Display reaction counts with user tooltips - Support for emoji reactions (like, love, celebrate, funny, etc.) - Single reaction per user per comment (toggling replaces) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Updates submodule to include: - Two-way sync with Google Calendar - Task syncing with green color differentiation - Timezone conversion fixes (UTC to user timezone) - Sync Items setting (events, tasks, or both) - Duplicate event prevention - Calendar selection in account settings - Sync Now button for manual sync Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove TinyMCE from webpack.mix.js build (37 files) - Remove tinymce and tinymce-mention npm dependencies - Remove TinyMCE script tag from header.blade.php - Remove TinyMCE cleanup code from modals.js - Remove TinyMCE accessibility functions from accessibility.js - Delete editors.js (TinyMCE configuration) - Delete tinymce-plugins directory (11+ custom plugins) - Delete tinymceSkin CSS directory - Delete wysiwyg-overrides.css and editor.less - Remove TinyMCE-specific CSS from theme files (dark.css, light.css) - Update acceptance tests to use Tiptap selectors - Fix toolbar more menu positioning (viewport-aware flip) - Polish toolbar UI with system hover colors Bundle impact: - Removed ~1MB+ compiled TinyMCE JavaScript - Removed ~100KB+ TinyMCE CSS Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Show popup with visibility:hidden first to get accurate dimensions - Use requestAnimationFrame to ensure DOM has rendered before positioning - Compare space above vs below cursor and position accordingly - Add dynamic max-height constraint when space is limited Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add media queries for tablets (768px) and phones (480px) - Responsive toolbar with hidden non-essential buttons on small screens - Full-width dialogs (template picker, mermaid, math, emoji) on mobile - Touch-friendly improvements with larger tap targets - Horizontal scroll for tables and code blocks on mobile - Font size 16px to prevent iOS zoom on input focus Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extend Mention with LeantimeMention that outputs data-tagged-user-id attribute for backend notification system to detect mentioned users - Parse mentions from both old TinyMCE format (a.userMention) and new Tiptap format (span[data-type="mention"]) - Switch KaTeX CDN from jsdelivr.net to unpkg.com to comply with CSP policy (script-src only allows unpkg.com for external scripts) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Install katex@0.16.9 as npm dependency - Import KaTeX JS and CSS directly in math.js (bundled via webpack) - Copy KaTeX fonts to public/dist/fonts/katex - This fixes the CSP issue where KaTeX CSS was blocked (style-src defaulted to 'self' and blocked external stylesheets) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Updated the app/Plugins submodule to the latest commit and added KaTeX font files to public/dist/mix-manifest.json for both vendor and katex font directories. This ensures KaTeX fonts are available for frontend usage.
- Block math: 1.5em font size with more padding (24px) - Inline math: 1.2em font size - Preview dialog: 1.6em for clear editing preview - General math elements: 1.4em base size Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added fontFamily and fontSize buttons to complex and notes toolbars - Buttons appear after bold/italic/strike for easy text formatting - Simple toolbar remains minimal (no font options) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added color and highlight buttons next to fontSize in toolbar - Removes need to access these from the "more" dropdown menu - Applied to both complex and notes editor configurations Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Since these are now in the main toolbar, removed duplicate entries from the three-dot dropdown menu to avoid confusion. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changed 'color' to 'textColor' in toolbar config to match the button definition name. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ation - Remove explicit heading color CSS that was causing invisible text - Add heading level popover (Paragraph, H1-H4) to toolbar - Strip text color marks when applying headings to prevent white-on-white - Fix slash command keyboard navigation to not re-render on arrow keys - Add smooth scrolling for slash command menu during keyboard navigation - Prevent mouse hover from interfering during keyboard navigation - Bundle KaTeX locally instead of CDN to avoid CSP issues - Copy KaTeX fonts to correct location for CSS references Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replaces old KaTeX font asset paths with new paths under /css/fonts and adds /css/katex.min.css to mix-manifest.json. This change ensures correct asset mapping for KaTeX resources after build or asset reorganization.
- Add margin between tags input and title/editor in article dialog - Fix title input overlap with icon picker Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement Notion-inspired document experience with: - 3-panel layout (Contents | Document | Properties) inside unified content box - Click-to-edit with Tiptap editor and auto-save - Inline editable title, icon picker, and tags - Status dropdown pill (Draft/Published) - Collapsible panels with caret toggles and localStorage persistence - Properties panel with author, parent, milestone, and activity feed - Modern typography and spacing for document readability Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add milestone dropdown selector to Properties panel - Load all project milestones in Show controller - Handle milestone updates in ArticleContent HTMX controller - Improve toolbar/editor connection with unified styling - Auto-collapse side panels on screens ≤1280px - Remove Article Settings button (now handled inline) - Fix dropdown menu positioning and overflow Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add real activity tracking using zp_audit table for wiki articles - Record audit events for content edits, title changes, status changes, parent/milestone updates, tag changes, and icon changes - Create ArticleActivity HTMX controller and Blade partial for live feed - Activity feed loads via HTMX and refreshes after every save - Natural-language labels (e.g. "published the article", "added a milestone") - Remove milestone card box styling for cleaner appearance - Fix milestone not clearing when set to None (cast empty string to 0) - Remove "Linked Milestone" title from milestone card - Show (Draft) label on parent dropdown options - Match glass background and border-radius to standard card specs - Add right padding to properties panel for balanced spacing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix icon picker dropdown by matching working articleDialog pattern (btn classes, iconPlaceholder span, dropdown-menu div) - Add hover caret indicator to icon picker - Align tags input to title text start (56px margin-left) - Revert content background to solid white (secondary-background) - Fix activity feed growing instead of scrolling by constraining overflow on the HTMX container Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…controls - Add 4 Columns slash command alongside existing 2 and 3 Columns - Add Sidebar Left, Sidebar Right, and Sidebar Both slash commands using new layout attribute on columnLayout node (1fr/2fr grids) - Add NodeView toolbar with trash button to delete column layouts - Add Backspace shortcut to remove empty column layouts - Remove column and sidebar layout templates from template picker (now handled natively by slash commands) - Fix activity feed scroll by using fixed height on wiki-layout and removing overflow-y from properties panel Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Auto-fixed by Laravel Pint: statement_indentation and unary_operator_spaces rules. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
gloriafolaron
requested review from
TareqK and
marcelfolaron
and removed request for
a team
|
|
…estone dropdown - Bump sidebar text from 12px to 14px (base-font-size) for accessibility - Update document body from hardcoded 15px to var(--font-size-l) (16px) - Match status pill styling to system-wide pattern with theme color variables - Fix milestone dropdown text truncation, overflow, and hover color - Rename Properties panel to Details - Remove box border from Delete Article link - Bump tag input and tag pills to base font size Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR delivers a complete migration from TinyMCE to Tiptap as the rich text editor across Leantime, along with a full redesign of the Wiki/Docs view into a modern, Notion-inspired document experience. This is a foundational change that replaces ~30,000 lines of legacy TinyMCE code with ~8,000 lines of modular, purpose-built Tiptap extensions.
Key highlights:
Tiptap Editor — Where It's Used
The Tiptap editor replaces TinyMCE in every rich text area across the application:
tiptapComplextiptapComplexsimpleEditortiptapSimpletiptapNotestiptapComplexThe editor is loaded globally via
header.blade.phpand initializes automatically based on CSS class detection.Slash Commands (27 total)
Type
/in any Tiptap editor to access the slash command menu with search, keyboard navigation, and icons:$x^2$)Editor Features & Extensions
LaTeX / Math Support
$x^2$for inline formulas rendered with KaTeXCmd+Alt+EMermaid Diagrams
Cmd+Alt+MEmbeds (14 services)
Multi-Column Layouts
Cmd+Alt+2,Cmd+Alt+3Collapsible Sections
<details>/<summary>elementsCmd+Alt+DTable of Contents
Cmd+Alt+T@Mentions
@to mention team members/api/usersEmoji
:followed by shortcode (e.g.,:smile:)Toolbar
Wiki/Docs View Redesign
3-Panel Layout
Click-to-Edit (Notion-style)
Cmd+E(toggle edit),Escape(exit),Cmd+S(save)Properties Panel (right sidebar)
Activity Feed
ArticleActivitycontroller)Responsive Behavior
Template Picker Changes
Comment Reactions (New Feature)
A new emoji reaction system for comments across the application:
ReactionsHTMX controller and serviceTinyMCE Removal
Completely removed all TinyMCE assets and plugins:
public/assets/js/libs/tinymce-plugins/— all custom plugins deleted (~24,000 lines)public/assets/css/libs/tinymceSkin/— all skin CSS deleted (~4,700 lines)public/assets/css/components/wysiwyg-overrides.css— removed (526 lines)public/assets/js/app/core/editors.js— TinyMCE initialization code removedpublic/assets/js/app/core/accessibility.js— removedpublic/assets/less/editor.less— removedNet result: -30,498 lines removed, +17,563 lines added = ~13,000 fewer lines of code
Backend Changes
New Files
app/Domain/Wiki/Hxcontrollers/ArticleActivity.phpapp/Domain/Wiki/Hxcontrollers/ArticleContent.phpapp/Domain/Comments/Hxcontrollers/Reactions.phpapp/Domain/Wiki/Templates/partials/activityFeed.blade.phpapp/Domain/Comments/Templates/partials/reactions.blade.phpapp/Domain/Audit/Repositories/Audit.phpModified Files
app/Domain/Wiki/Controllers/Show.phpapp/Domain/Wiki/Services/Wiki.phpgetArticleActivity()methodapp/Domain/Wiki/Templates/show.tpl.phpapp/Domain/Wiki/Templates/templates.tpl.phpapp/Domain/Wiki/Templates/articleDialog.tpl.phpBreaking Changes
None. All changes are additive:
Test Results
show.tpl.phpClass "Redis" not foundinfrastructure issues — none in Wiki/Audit codeThe 12 unit test failures are all
Class "Redis" not founderrors inApiClientTest,FileManagerTest,MenuRepositoryTest, andTicketsServiceTest— these are Docker/Redis configuration issues that exist on master and are completely unrelated to this PR.Test Plan
/and verify menu appears with all 27 commands:smile:) — verify emoji renders🤖 Generated with Claude Code