- Add MetedataEditor for meta inputs - Add toggle between editor modes - Add Breadcrumb for clearer navigation - Add custom tool for formatting inline code in WysiwygEditor
27 lines
858 B
JavaScript
27 lines
858 B
JavaScript
// EditorModeToggle.jsx
|
|
// Custom KendoReact component for switching between HTML and Markdown editing modes
|
|
// Demonstrates reusable UI components and state management patterns
|
|
import React from 'react';
|
|
import { Button } from '@progress/kendo-react-buttons';
|
|
|
|
function EditorModeToggle({ editMode, onToggle }) {
|
|
return (
|
|
// Toggle button positioned above the editor with consistent styling
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
marginBottom: '8px'
|
|
}}>
|
|
<Button
|
|
onClick={onToggle}
|
|
size="small"
|
|
icon={editMode === 'html' ? 'code' : 'edit'}
|
|
>
|
|
{editMode === 'html' ? 'Switch to Markdown' : 'Switch to HTML'}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EditorModeToggle;
|