How to add Bullets/Numbering to annotations in diagram component

This article explains how to add bullets/numbering to annotations in the diagram component. In Syncfusion® Diagram, we don’t have a built-in feature to add bullets/numberings to node/connector annotations. However, we can achieve this functionality by incorporating the Rich Text Editor into the diagram. By using the HTML template node, we can integrate the Rich Text Editor within the diagram. To implement this, we make use of the node template property of the diagram to render the Rich Text Editor.

 <DiagramComponent
   id="diagram"
   ref={(diagram) => (diagramInstance = diagram)}
   width={'100%'}
   height={'945px'}
   nodes={nodes}
   nodeTemplate={diagramTemplate}
 ></DiagramComponent>

function diagramTemplate(props) {
 if (props.id === 'node1') {
   return (
     <div className="control-pane">
       <div className="control-section" id="rte">
         <div className="rte-control-section">
           <RichTextEditorComponent id="defaultRTE" height="{600}" ref={(richtexteditor) => {
               rteObj = richtexteditor;
             }}>
             <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
           </RichTextEditorComponent>
   										   
         </div>
       </div>
     </div>
   );
 }
}

After rendering the diagram with the integrated Rich Text Editor, if you wish to enable bullet points for typing and encounter an issue where pressing the Enter key does not move the cursor to the next line, you can resolve this by leveraging the commandManager property of the diagram. This property allows you to modify the behavior and ensure that pressing Enter appropriately moves the cursor to the next line.

The Command Manager allows you to define custom commands with properties such as execute, canExecute, gesture, parameter, and name.

• execute - A method to be executed.
• canExecute - A method to define whether the command can be executed at the moment.
• gesture - A combination of keys and KeyModifiers
• parameter - Defines any additional parameters that are required at runtime.
• name - Defines the name of the command.

We have enabled the Enter key without restrictions by specifying the Enter key in gesture property and returning the canExecute function as false.

   <DiagramComponent
       id="diagram"
       ref={(diagram) => (diagramInstance = diagram)}
       width={'100%'}
       height={'945px'}
       nodes={nodes}
       nodeTemplate={diagramTemplate}
       commandManager={getCommandManagerSettings()}
 ></DiagramComponent>

function getCommandManagerSettings() {
 let commandManager = {
   commands: [
     {
       name: 'Enter Key',
       parameter: 'node',
       // Method to define whether the command can be executed at the current moment
       canExecute: function () {
         return false;
       },
       // Command handler
       execute: function () {},
       // Defines that the command has to be executed on the recognition of key press.
       gesture: {
         key: Keys.Enter,
       },
     },
   ],
 };
 return commandManager;
}

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to add Bullets/Numbering to annotations in the diagram component in React Diagram.

You can refer to our React Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!