react-markdown-menu
A small medium-esk react component to allow editing markdown files
Install
npm install react-markdown-menu
or
yarn add react-markdown-menu
Useage
While the component is intended to be used as a compound component until it has been tested the main usage will be through the base MarkdownMenu
component
static propTypes = // The number of pixels from the left of the browser to place the menu x: PropTypesnumber // The number of pixels from the top of the browser to place the menu y: PropTypesnumber // A function that is called whenever a button on the menu is clicked. // The function is of the type: // function onChange(modifiedText: string, line: boolean): undefined // When a button is clicked to modified text is sent to the onChange, // and a boolean to say whether to replace the entire line or // just the selected area onChange: PropTypesfuncisRequired // The text selection of the entire line the cursor is currently on lineSelection: PropTypesstring // The text selection of whatever is curretly highlighted selection: PropTypesstring ; /* the rest of the class */
Below is an example using a textarea as the editor
;;; Component state = {}; { let length = 0; const lines = value; const max = lines; const start = maxmaxlength - 1 || 0; const end = linesmaxlength - 1; return start end; } { // Setup event listeners if thistextareaRef const textarea = thistextarea = ; const menu = ; console; const hideMenu = this; // Hide then menu on scroll of the window. document; // Hide the menu on clicking outside of the menu document; // Update the selected text and position of the menu let clickEvent; // Keep track of the click position to know where to place the menu textarea; // Handle text and line selection textarea; } { const selectionRange lineRange = thisstate; const start end = line ? lineRange : selectionRange; thistextareavalue = ``; thistextarea; } { const x y selection lineSelection = thisstate; return <div> <MarkdownMenu ref= thismenu = node x=x y=y onChange=thisonChange selection=selection lineSelection=lineSelection /> <textarea ref= thistextareaRef = node /> </div> ; } ;
The experimental compound component example that hasn't been completely tested and the API not yet refined.
;;; Component { let length = 0; const lines = value; const max = lines; const start = maxmaxlength - 1 || 0; const end = linesmaxlength - 1; return start end; } { const selectionStart selectionEnd = element; return selectionStart selectionEnd; } { elementvalue = ``; } { element; } { return <Editor onChange=consolelog updateText=thisupdateText updateSelection=thisupdateSelection getSelectionRange=thisgetSelectionRange onChangeSelection= element getLineRange=thisgetLineRange render= <textarea /> /> ; } ;