Skip to content

Latest commit

 

History

History
211 lines (183 loc) · 6.12 KB

README.md

File metadata and controls

211 lines (183 loc) · 6.12 KB
Raw

devkeep-md-editor

React markdown editor component thats uses SimpleMde and Highlight.js under the hood. Designed to allow customizable theme.

View live demo here

Follow me on twitter for updates

Install

npm install devkeep-md-editor

or

yarn add devkeep-md-editor

Props

Prop Description Type
initialValue The initial markdown string string
onSave Called when (CMD/CTRL+S) is pressed with markdown string as a callback param function
onDelete Called when (CMD/CTRL+D) is pressed function
codeMirrorHandle Called when codemirror editor instance is available, you can use this to listen to code mirror events and manipulate content directly function
localSaveId Used as key for saving markdown to local storage function
useSpellChecker Enable spellchecker on editor, will highlight mis-spellings in red bool
useHighlightJS Enabling will add highlight.js script to the page bool
highlightTheme Highlight.js theme to use - will add a css link tag with theme from highlight to page string
theme This is theme object you can use to style toolbar, editor and preview parts, see below for options object
toolbarOptions Toolbar icons to display see simplemde docs for options array
defaultView The default state to display the editor in, one of "fullscreen", "preview", "side-by-side" (fullscreen and side-by-side are not available on mobile views) string
title Title to display above editor string
editTitleWidth Width css value string
onEditTitle Pass this prop to render title as input, when changed will fire event with new title value function
autoFocusEditTitle Auto focus the edit title on render boolean
onBack Function to be called when back button is clicked function

Example theme object:

{
  toolbar: {
    background: "#333",
    color: "white",
    activeBtnBackground: "#242020",
    activeBtnColor: 'white',
    disabledBtnBackground: "gray",
    disabledBtnColor: '#333'
  },
  preview: { background: "green", color: "white", codeBlockBackground: 'black' },
  editor: { background: "#333", color: "white" },
  cursorColor: "white",
  height: "87vh"
}

Example

Demo: https://bsmithdev.netlify.app/devkeep-md-editor

import React, { useEffect, useRef, useState } from 'react';
import { render } from 'react-dom';
import { MarkdownEditor } from './lib';

const exmapleMD = `# Intro
Go ahead, play around with the editor! Be sure to check out **bold** and *italic* styling, or even [links](https://google.com). You can type the Markdown syntax, use the toolbar, or use shortcuts like \`cmd-b\` or \`ctrl - b\`.

## Code blocks

\`\`\`javascript
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
\`\`\`

## Lists
Unordered lists can be started using the toolbar or by typing \`* \`, \` - \`, or \` + \`. Ordered lists can be started by typing \`1. \`.

#### Unordered
* Lists are a piece of cake
* They even auto continue as you type
* A double enter will end them
* Tabs and shift-tabs work too

#### Ordered
1. Numbered lists...
2. ...work too!

## What about images?
![Yes](https://i.imgur.com/sZlktY7.png)
`

const darkTheme = {
  toolbar: {
    background: "#333",
    color: "white",
    activeBtnBackground: "#242020",
    activeBtnColor: 'white',
    disabledBtnBackground: "gray",
    disabledBtnColor: '#333',
  },
  preview: { background: "#333", color: "white", codeBlockBackground: 'black' },
  editor: { background: "#333", color: "white" },
  cursorColor: "white",
  height: "85vh"
}

const greenTheme = {
  toolbar: {
    background: "green",
    color: "white",
    activeBtnBackground: "#242020",
    activeBtnColor: 'white',
    disabledBtnBackground: "gray",
    disabledBtnColor: '#333'
  },
  preview: { background: "green", color: "white", codeBlockBackground: 'black' },
  editor: { background: "green", color: "white" },
  cursorColor: "white",
  height: "85vh"
}

const toolbarOptions = [
  'bold',
  'italic',
  'heading',
  '|',
  'quote',
  'ordered-list',
  'unordered-list',
  '|',
  'code',
  'link',
  'image',
  'table',
  '|',
  'preview',
  'fullscreen',
  'side-by-side',
  '|',
];

const App = () => {

  const [firstTheme, setFirstTheme] = useState(true);
  const cmRef = useRef()
  const simpleMDERef = useRef()

  // Example of using simpleMDE object to change to edit mode from preview when
  // Editor container is double clicked
  const changePreviewToEdit = () => {
    if (simpleMDERef.current.isPreviewActive()) {
      simpleMDERef.current.togglePreview()
    }
  }

  const switchTheme = () => {
    setFirstTheme(!firstTheme)
  }

  // Called on (CMD/CRTL+S)
  const onSave = (markdown) => {
    console.log(markdown)
    alert('SAVE');
  };

  // Called on (CMD/CRTL+D)
  const onDelete = () => {
    alert('DELETE');
  };

  // This handle returns the codemirror instance you can use to listen to events.
  // And manipulate content directly. It is called as soon as codemirror is available.
  const codeMirrorHandle = (cm) => {
    cmRef.current = cm
  }

  // This handle returns the simpleMDE instance object
  // See https://github.com/sparksuite/simplemde-markdown-editor#useful-methods
  // For how you can use this
  const simpleMDEHandle = (simpleMDE) => {
    simpleMDERef.current = simpleMDE
  }

  return (
    <div
      style={{ width: "60%", margin: "auto" }}
      onDoubleClick={changePreviewToEdit}
    >
      <MarkdownEditor
        initialValue={exmapleMD}
        onSave={onSave}
        onDelete={onDelete}
        codeMirrorHandle={codeMirrorHandle}
        simplemdeHandle={simpleMDEHandle}
        useSpellChecker={false}
        useHighlightJS
        highlightTheme="agate"
        theme={firstTheme ? darkTheme : greenTheme}
        toolbarOptions={toolbarOptions}
        defaultView={"side-by-side"}
        title={"This is a demo"}
        onBack={()=> alert('Go back')}
      />
      <button onClick={switchTheme}>Switch Theme</button>
    </div>

  );
};

render(<App />, document.getElementById('root'));