Roadmap 2022

[zbeyens]

⚠️ Not up-to-date. Closed for now.

Roadmap

Here is our full roadmap to have a complete rich-text editor.

There is no estimated delivery date, this entirely depends on contributions.

Elements

• Alignment
  – Enables support for text alignment, useful to align your content
  to left, right and center it.

  • Use a node prop instead of a node of type align_x

• BasicElements – Enables support for basic elements.

  • Blockquote – Enables support for block quotes, useful for
    quotations and passages.
  • CodeBlock – Enables support for pre-formatted code blocks.
    • Code highlighter.
  • Heading – Enables support for headings with configurable levels
    (from 1 to 6).
  • Paragraph – Enables support for paragraphs.

• Combobox – Enables support for autocompleting.
  When typing a configurable trigger, such as @ or #, a combobox
  component appears with autocompleted suggestions.

  • Mention – Enables support for autocompleting @mentions.
  • Emoji – Enables support for inserting emoji characters by typing
    identifiers based on Unicode Short Names preceded by a colon (:)
    and selecting the suggestion. emoji proof of concept #638
  • Slash command – Enables support for autocompleting /slash-commands.

• HorizontalLine – Enables support for dividers, useful for
  separating and grouping document sections.

• Image – Enables support for images.

  • ImageCaption – Allows for adding captions to images to give
    additional context.
  • ImageResize – Allows for resizing images using handles.
  • ImageStyle – Allows for using configurable styles to display the
    images, for example, as a full width image or side image.
  • ImageToolbar – Allows for using a contextual toolbar for images.
    It appears when an image is selected and can be configured to
    contain buttons for features such as the text alternative or
    image styles.
  • ImageUpload – Allows for pasting images from clipboard, dragging
    and dropping images, selecting them through a file system
    dialog.
    • Pasting images from clipboard.
    • Drag and drop.
    • File system dialog.
    • Balloon to insert.

• Indent – Enables support for indenting block elements including
  lists.

  • IndentBlock – Enables support for indenting block elements
    excluding lists.

• Link – Enables support for hyperlinks.

  • Insert/update links from text.
  • Insert/update links from clipboard.
  • Balloon
    to edit and delete.
  • Hotkey – cmd+k

• List – Enables support for bulleted, numbered and to-do lists.

  • TodoList – Enables support for lists of interactive checkboxes
    with labels. It supports all features of regular lists so you
    can nest a to-do list together with bulleted and numbered lists
    in any combination.
    • Supports all features of regular lists.

• MediaEmbed – Enables support for embeddable media such as YouTube
  or Vimeo videos, Instagram posts and tweets or Google Maps.

  • MediaEmbedToolbar – Provides an optional toolbar for media embed
    that shows up when the media element is selected.
  • Insert videos
  • Balloon to insert, edit, delete
  • Paste the media URL to insert the element
  • YouTube
  • Vimeo
  • Spotify
  • Instagram
  • Twitter
  • Google Maps

• PageBreak – Enables support for page breaks to better support printing.

• Table – Enables support for tables.

  • TableCellProperties – Allows for styling individual table cells.
  • TableProperties – Allows for styling entire tables.
  • TableToolbar – Provides a configurable toolbar showing up when
    the table element is selected.
  • Insert table
  • Add/delete rows and columns

Marks

• BasicMarks – Enables support for basic text formatting.
  • Bold – Enables support for bold formatting.
  • Code – Enables support for inline code formatting.
  • Italic – Enables support for italic formatting.
  • Strikethrough – Enables support for strikethrough formatting.
  • Subscript – Enables support for subscript formatting.
  • Superscript – Enables support for superscript formatting.
  • Underline – Enables support for underline formatting.
• Font – Enables support for font formatting.
  • FontBackgroundColor – Enables support for font background colors
    with a configurable color palette panel.
  • FontColor – Enables support for font colors with a configurable
    color palette panel.
  • FontSize – Enables support for font sizes.
  • FontFamily – Enables support for font families.
• Highlight – Enables support for highlights, useful when reviewing
  content or highlighting it for future reference.
  • Insert highlight
  • Remove highlight
  • Configurable color palette panel
• RemoveMark – Enables support for removing all the marks in the
  selection.

Deserializers

• Paste HTML – Enables support for deserializing content from
  HTML format to Slate format.
• Paste Markdown – Enables support for deserializing content
  from Markdown format to Slate format.
• Paste CSV – Enables support for deserializing content
  from CSV format to Slate format.
• Paste from Word – This feature allows you to paste content from Microsoft Word and maintain the original structure and formatting. After creating a document in Microsoft Word you can simply copy it to Plate and retain basic text styling, heading levels, links, lists, tables and images.
• Paste from Google Docs – This feature allows you to paste content from Google Docs and maintain the original structure and formatting. After creating a document in Google Docs you can simply copy it to Plate and retain basic text styling, heading levels, links, lists, tables and images..

Serializers

• SerializeHtml
  – Enables support for serializing content from Slate format to
  HTML format.
• SerializeMarkdown
  – Enables support for serializing content from Slate format to
  Markdown format.

Normalizers

• NormalizeTypes – Enables support for defining type rules for
  specific locations in the document. For example, it can help to
  ensure that there will always be a single title field at the
  beginning of the document.
• RestrictedEditing – Enables support for defining which parts of a
  document can be editable for users with more restricted editing
  rights. It allows you to edit only within the created restricted
  area.
• TrailingNode – Enables support for inserting a trailing node of a
  configurable type when the type of the last node is not matching
  at a configurable depth.

Handlers

• Autoformat – Enables support for autoformatting actions.
  • Block formatting.
    • Configurable markup to trigger the autoformatting.
    • Configurable character to trigger the autoformatting.
    • Configurable option to enable autoformatting in the middle of a block by inserting a block instead of updating.
  • Mark formatting.
    • Configurable option to enable mark formatting.
  • Text formatting.
• SoftBreak – Enables support for inserting soft breaks.

Toolbar

• BalloonToolbar – Provides a toolbar, pointing at a particular
  element or range.
• BlockToolbar – Provides an additional configurable toolbar on the
  left-hand side of the content area (the gutter). The toolbar is
  represented by a button with an icon. It is positioned next to the
  block element (e.g. a paragraph) where the anchor is, following
  the caret as the user edits the content and navigates the
  document.
• HeadingToolbar – Provides a heading toolbar.
• Toolbar – Provides a toolbar.
• ToolbarMenu – Provides a toolbar button that opens a menu of other toolbar buttons.

Utilities

• NodeID – Enables support for inserting nodes with an id key.

Widgets

• SearchHighlight – Enables support for highlighting searching text.
• SpecialCharacter – Enables support for inserting special
  characters via a dropdown. Add plugins like special characters
  essentials or special characters currency to fill it with some
  signs.
  • SpecialCharacterEssential – Adds a basic set with the most
    popular signs to the special characters feature.
  • SpecialCharacterArrow – Adds the arrows category and signs to
    the special characters feature.
  • SpecialCharacterCurrency – Adds the currency category and signs
    to the special characters feature.
  • SpecialCharacterLa - [] SpecialCharacter – Enables support for
    inserting special characters via a dropdown. Add plugins like
    special characters essentials or special characters currency to
    fill it with some signs.
  • SpecialCharacterEssential – Adds a basic set with the most
    popular signs to the special characters feature.
  • SpecialCharacterArrow – Adds the arrows category and signs to
    the special characters feature.
  • SpecialCharacterCurrency – Adds the currency category and signs
    to the special characters feature.
  • SpecialCharacterLatin – Adds the Latin category and signs to the
    special characters feature.
  • SpecialCharacterMath – Adds the mathematical category and signs
    to the special characters feature.
  • SpecialCharacterText – Adds the text category and signs to the
    special characters feature.tin – Adds the Latin category and
    signs to the special characters feature.
  • SpecialCharacterMath – Adds the mathematical category and signs
    to the special characters feature.
  • SpecialCharacterText – Adds the text category and signs to the
    special characters feature.
• WordCount – Provides the number of words and characters written in
  the editor.

Storage

• Autosave
  – Enables support for saving the editor value in a (local) storage when
  needed, for example, when the user changed the content.

Collaboration

• Comments – Enables support for commenting element and text nodes.
  • Text comments
  • Element comments
• RTC – Enables support for real-time collaboration through slate-yjs. It allows for
  editing the same document by multiple users at the same time. It
  also shows the selection of other users in real time and
  automatically solves all conflicts.
  • RTCPresenceList – Enables support for displaying all users that
    are currently connected to the edited document in real-time
    collaboration. The users are displayed as a row of avatars.
  • RTCComments – Enables support for commenting element and text
    nodes, replying to comments, and creating discussion threads
    with multiple users in real-time collaboration.
  • RTCTrackChanges – Enables support for making content suggestions
    with multiple users in real-time collaboration.
• TrackChanges – Enables the track changes mode (aka “suggestion
  mode”). In this mode, changes are marked in the content and shown
  as suggestions that can be accepted or discarded by the users.

[ghost]

SerializeMarkdown +1
Code highlighter +1

[Hideman85]

For the RealTimeColaboration aspect there is one repo to take as inspiration slate-collaborative but same as I mentioned in #283 it would be great to be backend agnostic and propose some providers (like node - express for the case of the linked repo) or GraphQL / AWS AppSync in my case.

The second lib use automerge internally to keep a state of the document across multiple clients and I think is a really great lib for this use. In addition automerge come with an other backend hypermerge that is a peer-to-peer sharing without the need of a server that could be also proposed as backend provider for the collaborative aspect.

In the RTC tasks list I would suggest the addition of these tasks:

• Cursor support (slate decorator for the cursor point / range for a user)
• History view / Red lining I suppose can also be done with slate decorator for showing deltas

[zbeyens]

There is also slate-yjs.

[dylans]

I would note that we've ran into so many edge cases and issues with slate-collaborative and automerge that it's been an interesting experience to say the least.

With respect to tables on the roadmap, the current table plugin really needs a lot of work to feel usable. Specifically, it's difficult to interact with content once in the table and move things around:

• copy/paste works on a single cell, so no easy way to copy/paste (you can copy/paste an entire table if you select the area before/after the table)
• operations (like selecting a bunch of cells and trying to make the content bold) applies only to the last cell in the selection
• no mechanism to move a row or column around (obviously don't want to turn this into a datagrid which is a slippery slope), but basic operations to move things around are needed to make it useful
• mechanism for heading cell to persist at top of page when top of table scrolls off the viewport

For the MediaEmbed extension, a few other notes:

• Having the UI be something that is configurable (I imagine this being something that you show/hide that is more likely a modal/balloon)
• Some embedding requires more than just a URL (for example, LucidChart I think requires the URL and an id that represents the integration id)
• Configuration for display dimensions, zoom, inline vs. block, etc.

[evangow]

Regarding the comment feature, it would be great if the comment plugin wasn't necessarily tied into the other collaboration features. The use-case being: users should be able to make a post that remains static and other users should be able to comment on it. For this use case, I wouldn't need the other features that normally come built-in with collaboration workflows (e.g. any real-time editing capabilities, etc.)

[evangow]

Also, +1 for HorizontalLine

[sepsol]

I think adding the RTL feature would also be a nice idea.

[thuurvdp]

The planned mentioning feature to configure the direction top or bottom would be really helpful. At the moment we have issues implementing the editor because the mention goes off screen.

Are there any hacks we can use untill this feature is added ?

[tjramage]

Would love to see hotkey support for links! (MOD + K to auto-trigger a URL alert input, with support for text selection)

[dylans]

I would say mod+k for links only if text is selected. If no text selected I probably want the browser’s search shortcut.

[dylans]

Also mod+k is really common for command bar UX on various apps now, so we need to think about the right keyboard shortcut for this.

[mjlikre]

Is there anything regarding inserting latex formulas into the editor?

[Toubat]

+1

[SanjoSolutions]

FYI: I'm working on the comments feature. The work can be found here: https://github.com/xolvio/plate.

[CloudDrivenSolutions]

Is there a way I can test this out?

[SanjoSolutions]

The packages are published on NPM:

• https://www.npmjs.com/package/@xolvio/plate-comments
• https://www.npmjs.com/package/@xolvio/plate-ui-comments

The code for it can be found here:

• https://github.com/xolvio/plate/tree/comments-xspecs/packages/collaboration/comments
• https://github.com/xolvio/plate/tree/comments-xspecs/packages/ui/collaboration/comments

Here can be seen the integration of the packages into the Plate Playground: https://github.com/xolvio/plate/blob/comments-xspecs/docs/src/components/Playground.tsx.

You can clone the repository https://github.com/xolvio/plate/tree/comments-xspecs, checkout the branch "comments-xspecs" and run the Plate Playground to try it out.

git clone https://github.com/xolvio/plate.git
cd plate
git checkout -b comments-xspecs comments-xspecs
yarn
yarn build
yarn dev