Skip to content

Add markdown display support for long text fields#2542

Open
emilienbidet wants to merge 1 commit intoteableio:developfrom
emilienbidet:claude/markdown-wysiwyg-editor-0z3DQ
Open

Add markdown display support for long text fields#2542
emilienbidet wants to merge 1 commit intoteableio:developfrom
emilienbidet:claude/markdown-wysiwyg-editor-0z3DQ

Conversation

@emilienbidet
Copy link

Summary

This PR adds markdown display and editing capabilities to long text fields. Users can now configure long text fields to display content as markdown with a dedicated WYSIWYG editor for rich text editing.

Key Changes

Core Schema & Types

  • Added LongTextDisplayType enum with Markdown option to @teable/core
  • Created longTextShowAsSchema to support markdown display configuration
  • Extended ILongTextFieldOptions to include optional showAs property
  • Updated union schema to include long text show-as options

UI Components

  • LongTextShowAs: New field setting component allowing users to toggle between plain text and markdown display modes
  • MarkdownWYSIWYGEditor: Full-featured markdown editor with:
    • Text formatting toolbar (bold, italic, strikethrough, code)
    • Heading levels (H1-H3)
    • List types (bullet, numbered, task lists)
    • Block elements (quotes, code blocks, horizontal rules)
    • Link and image insertion with image upload support
    • Live preview toggle
    • Keyboard shortcuts (Ctrl+S to save, Esc to cancel)
    • Drag-and-drop and paste image support
  • MarkdownExpandModal: Modal dialog for expanded markdown editing with fullscreen support
  • LongTextEditor: Updated to detect markdown mode and render appropriate UI (preview + expand button vs. plain textarea)

Field Configuration

  • Updated LongTextOptions component to include the new LongTextShowAs selector
  • Properly spreads existing options when updating to preserve other field settings

Internationalization

  • Added translations for "Plain text" and "Markdown" labels across all supported languages (EN, DE, ES, FR, IT, JA, RU, TR, UK, ZH)

Cell Editor Integration

  • Updated CellEditorMain to pass field options to the long text editor
  • Editor now respects the showAs configuration to render appropriate UI

Implementation Details

  • Markdown rendering uses existing MarkdownPreview component
  • Image uploads are handled through AttachmentManager with proper attachment ID generation
  • Editor maintains local state for unsaved changes with cancel/save functionality
  • Fullscreen mode available for better editing experience on large content
  • Readonly mode properly disables all editing controls

https://claude.ai/code/session_01UeuVodegDcLtwLKhTvfvHH

This adds a markdown display option for long text fields that allows users
to edit content using a WYSIWYG editor with the following features:

- Added LongTextDisplayType enum with "markdown" option
- Added showAs option to long text field schema (similar to single line text)
- Created LongTextShowAs component for field settings UI
- Created MarkdownWYSIWYGEditor with toolbar support for:
  - Bold, italic, strikethrough, inline code
  - Headings (H1, H2, H3)
  - Lists (bullet, numbered, task)
  - Quotes, code blocks, horizontal rules
  - Links, images, tables
  - Image upload via drag & drop, paste, or file picker
- Created MarkdownExpandModal for full-screen editing with preview
- Updated LongTextEditor to detect markdown mode and show expand button
- Added translations for "plainText" and "markdown" in all locales

https://claude.ai/code/session_01UeuVodegDcLtwLKhTvfvHH
@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@emilienbidet
Copy link
Author

I will test it tonight

@tea-artist tea-artist added the preview This issue is already ready for preview label Feb 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

preview This issue is already ready for preview

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants