First attempt: Bold Style Not Showing Up in UI

[Jaikant]

Description

I am trying plate for the first time. I'm using Plate (version 26.0.5). I tried to set up the editor to handle bold text formatting, but the bold style does not visually appear in the UI when applied. The underlying representation of the text correctly shows the bold attribute set to true, but this change is not reflected in the text's styling on the screen.

Environment

-- Started using a new NextJs project from scratch.

Steps to Reproduce

1. Set up a Plate editor with bold plugin from @udecode/plate-basic-marks.
2. Apply bold styling to text (e.g., using ⌘+B).
3. Observe that the text does not display as bold in the editor.

Expected Behavior

Text that has been formatted as bold should visually appear bold in the editor.

Actual Behavior

Bold formatted text does not change appearance; it looks the same as regular text.

Editor Code Example

"use client"
import React, { useState } from 'react';
import { Plate,  createPlugins } from '@udecode/plate-common';
import { Editor } from '@/components/plate-ui/editor';
import { createEditor } from 'slate';
import { withReact } from 'slate-react';
import { createBoldPlugin } from '@udecode/plate-basic-marks';

const exampleValue = [{"type":"h1","children":[{"text":"🌳 Blocks"}],"id":"1"},{"type":"p","children":[{"text":"Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized."}],"id":"2"},{"type":"blockquote","children":[{"text":"Create blockquotes to emphasize important information or highlight quotes from external sources."}],"id":"3"},{"type":"code_block","lang":"javascript","children":[{"type":"code_line","children":[{"text":"// Use code blocks to showcase code snippets"}]},{"type":"code_line","children":[{"text":"function greet() {"}]},{"type":"code_line","children":[{"text":" console.info('Hello World!');"}]},{"type":"code_line","children":[{"text":"}"}]}],"id":"4"},{"type":"h1","children":[{"text":"🌱 Marks"}],"id":"1"},{"type":"p","children":[{"text":"Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options."}],"id":"2"},{"type":"p","children":[{"text":"Make text "},{"text":"bold","bold":true},{"text":", "},{"text":"italic","italic":true},{"text":", "},{"text":"underlined","underline":true},{"text":", or apply a "},{"text":"combination","bold":true,"italic":true,"underline":true},{"text":" of these styles for a visually striking effect."}],"id":"3"},{"type":"p","children":[{"text":"Add "},{"text":"strikethrough","strikethrough":true},{"text":" to indicate deleted or outdated content."}],"id":"4"},{"type":"p","children":[{"text":"Write code snippets with inline "},{"text":"code","code":true},{"text":" formatting for easy readability."}],"id":"5"},{"type":"p","children":[{"text":"Press "},{"text":"⌘+B","kbd":true},{"text":" to apply bold mark or "},{"text":"⌘+I","kbd":true},{"text":" for italic mark."}],"id":"6"}];

const MyEditor = () => {
  const [value, setValue] = useState(exampleValue);
  const editor = withReact(createEditor());
  const plugins = createPlugins([createBoldPlugin()], { editor });


  return (
  <Plate 
    plugins={plugins}
    initialValue={value}
    onChange={(newValue) => {
      // save newValue...
      console.log(newValue)
      setValue(newValue)
    }}

  >
    <Editor placeholder="Type your message here." />
  </Plate>

  )
}
export default MyEditor

This is the starter nextjs project which comes with tailwind configured. Only difference being I opted not to use a src directory so My tailwind config is has follows:

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
...

[12joan]

This is expected. By default, Plate plugins are headless, and components for marks and elements must be added separately as explained on the Plugin Components docs page.

[Jaikant]

Thank you so much your direction helped find a solution.
Below is the new code, which worked!

"use client"
import React, { useState } from 'react';
import { Plate,  createPlugins, PlateLeaf, withProps } from '@udecode/plate-common';
import { Editor } from '@/components/plate-ui/editor';
import { createBoldPlugin, MARK_BOLD } from '@udecode/plate-basic-marks';

const exampleValue = [{"type":"h1","children":[{"text":"🌳 Blocks"}],"id":"1"},{"type":"p","children":[{"text":"Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized."}],"id":"2"},{"type":"blockquote","children":[{"text":"Create blockquotes to emphasize important information or highlight quotes from external sources."}],"id":"3"},{"type":"code_block","lang":"javascript","children":[{"type":"code_line","children":[{"text":"// Use code blocks to showcase code snippets"}]},{"type":"code_line","children":[{"text":"function greet() {"}]},{"type":"code_line","children":[{"text":" console.info('Hello World!');"}]},{"type":"code_line","children":[{"text":"}"}]}],"id":"4"},{"type":"h1","children":[{"text":"🌱 Marks"}],"id":"1"},{"type":"p","children":[{"text":"Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options."}],"id":"2"},{"type":"p","children":[{"text":"Make text "},{"text":"bold","bold":true},{"text":", "},{"text":"italic","italic":true},{"text":", "},{"text":"underlined","underline":true},{"text":", or apply a "},{"text":"combination","bold":true,"italic":true,"underline":true},{"text":" of these styles for a visually striking effect."}],"id":"3"},{"type":"p","children":[{"text":"Add "},{"text":"strikethrough","strikethrough":true},{"text":" to indicate deleted or outdated content."}],"id":"4"},{"type":"p","children":[{"text":"Write code snippets with inline "},{"text":"code","code":true},{"text":" formatting for easy readability."}],"id":"5"},{"type":"p","children":[{"text":"Press "},{"text":"⌘+B","kbd":true},{"text":" to apply bold mark or "},{"text":"⌘+I","kbd":true},{"text":" for italic mark."}],"id":"6"}];

const MyEditor = () => {
  const [value, setValue] = useState(exampleValue);
  const plugins = createPlugins([createBoldPlugin()], 
  {
    components: {
        [MARK_BOLD]: withProps(PlateLeaf, { as: 'strong' }),
      }
   }
  );

  return (
  <Plate 
    plugins={plugins}
    initialValue={value}
    onChange={(newValue) => {
      // save newValue...
      console.log(newValue)
      setValue(newValue)
    }}

  >
    <Editor placeholder="Type your message here." />
  </Plate>

  )
}
export default MyEditor