├── .gitignore ├── LICENSE.md ├── README.md ├── package.json ├── src ├── block.js ├── edit.js ├── icon-md.js ├── save.js ├── schema.js └── styled │ └── index.js ├── tiny-mde.php └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | src/**/*.css 2 | /node_modules 3 | /dist 4 | .cache 5 | yarn-error.log -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2019 Tiny Pixel Collective 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tiny MDE 2 | 3 | A chill little Markdown composition interface for the Block Editor. Work-in-progress. 4 | 5 | Intentionally slim to serve as a learning example to accompany an upcoming piece for [Roots.io](https://https://roots.io). 6 | 7 | ## Features 8 | 9 | - makes it simple to compose with markdown.includes github mentions. emoji. `syntax highlighting`. 🤤 10 | 11 | - CSS-in-JS library [astroturf](https://github.com/4Catalyzer/astroturf). A match made in heaven -- as it compiles to static, everyday CSS files, which gives us time to store the reference to the database for block validation. Get sassy with precss, do `@import`s, win the scope war. No runtime baggage. 12 | 13 | - [Parcel](https://parceljs.org/) is a great way to manage a project configuration for something with the scope of a block. 14 | 15 | - Accessible: No JS on the frontend, JSX-ally in the editor. 💪🏾 16 | 17 | ## About 18 | 19 | **TINY MDE** © 2019+, Tiny Pixel Collective Released under the [MIT License](http://mit-license.org/). 20 | 21 | Built with [ReactMDE](https://github.com/andrerpena/react-mde), [ShowdownJS](https://github.com/showdownjs/showdown). 🙏 22 | 23 | Authored and maintained by [Kelly Mears](https://github.com/kellymears). 24 | 25 | > [tinypixel.io](https://tinypixel.io)  ·  26 | > GitHub [@pixelcollective](https://github.com/pixelcollective)  ·  27 | > Twitter [@tinydevteam](https://twitter.com/tinydevteam) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "src/index.js", 3 | "source": { 4 | "src/**/*.css": "dist/styles" 5 | }, 6 | "scripts": { 7 | "start": "parcel src/block.js --no-source-maps --no-hmr --no-cache", 8 | "watch": "parcel watch src/block.js --no-source-maps --hmr-hostname fleek.test --no-cache", 9 | "build": "parcel build src/block.js --no-content-hash" 10 | }, 11 | "keywords": [ 12 | "wordpress", 13 | "plugin", 14 | "javascript" 15 | ], 16 | "devDependencies": { 17 | "@babel/core": "^7.0.0", 18 | "@wordpress/babel-preset-default": "^4.0.0", 19 | "@wordpress/blocks": "^6.1.0", 20 | "@wordpress/element": "^2.1.9", 21 | "astroturf": "^0.9.1", 22 | "browser-sync": "^2.26.3", 23 | "browser-sync-webpack-plugin": "2.0.1", 24 | "extract-text-webpack-plugin": "^3.0.2", 25 | "parcel-bundler": "^1.12.0", 26 | "postcss-modules": "^1.4.1", 27 | "precss": "^4.0.0" 28 | }, 29 | "dependencies": { 30 | "converter": "^0.0.5", 31 | "react-mde": "^7.0.4", 32 | "showdown": "^1.9.0" 33 | }, 34 | "postcss": { 35 | "modules": true, 36 | "plugins": [ 37 | "precss" 38 | ] 39 | }, 40 | "babel": { 41 | "presets": [ 42 | "@wordpress/default" 43 | ], 44 | "plugins": [ 45 | [ 46 | "astroturf/plugin" 47 | ] 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/block.js: -------------------------------------------------------------------------------- 1 | import { name, settings } from './schema' 2 | const { registerBlockType } = wp.blocks 3 | 4 | registerBlockType(name, settings) 5 | -------------------------------------------------------------------------------- /src/edit.js: -------------------------------------------------------------------------------- 1 | const { Component, RawHTML } = wp.element 2 | import * as Showdown from 'showdown' 3 | import { StyledReactMde, visibility } from './styled' 4 | class Edit extends Component { 5 | constructor() { 6 | super(...arguments) 7 | 8 | this.converter = new Showdown.Converter({ 9 | tables: true, 10 | simplifiedAutoLink: true, 11 | strikethrough: true, 12 | tasklists: true, 13 | ghMentions: true, 14 | }) 15 | 16 | this.state = { 17 | tab: '', 18 | value: '', 19 | markdownRendered: '', 20 | } 21 | 22 | this.handleRender = this.handleRender.bind(this) 23 | this.handleTabChange = this.handleTabChange.bind(this) 24 | this.handleValueChange = this.handleValueChange.bind(this) 25 | } 26 | 27 | componentDidMount() { 28 | this.setState({ 29 | tab: 'write', 30 | value: this.props.attributes.markdownRaw, 31 | }) 32 | } 33 | 34 | handleTabChange(tab) { 35 | this.setState({ tab }) 36 | } 37 | 38 | handleRender(markdown) { 39 | return this.converter.makeHtml(markdown) 40 | } 41 | 42 | handleValueChange(value) { 43 | this.props.setAttributes({ 44 | markdownRaw: value, 45 | markdownRendered: this.converter.makeHtml(value), 46 | }) 47 | this.setState({ 48 | value, 49 | markdownRendered: this.converter.makeHtml(value), 50 | }) 51 | } 52 | 53 | render() { 54 | const { 55 | className, 56 | attributes, 57 | } = this.props 58 | 59 | return ( 60 |
61 | Promise.resolve(this.converter.makeHtml(markdown))} 67 | /> 68 |
69 | { attributes.markdownRendered } 70 |
71 |
72 | { attributes.markdownRendered } 73 |
74 |
75 | { attributes.markdownRaw } 76 |
77 |
78 | ) 79 | } 80 | } 81 | 82 | export default Edit 83 | -------------------------------------------------------------------------------- /src/icon-md.js: -------------------------------------------------------------------------------- 1 | let pathData = 'M950.154 192H73.846C33.127 192 0 225.12699999999995 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846C1024 225.12699999999995 990.875 192 950.154 192zM576 703.875L448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-0.125V703.875zM767.091 735.875L608 512h96V320h128v192h96L767.091 735.875z' 2 | 3 | const MarkdownIcon = ({ width, height }) => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | ) 11 | } 12 | 13 | export { MarkdownIcon } -------------------------------------------------------------------------------- /src/save.js: -------------------------------------------------------------------------------- 1 | const { RawHTML } = wp.element 2 | import { visibility } from './styled' 3 | 4 | export const save = ({ 5 | attributes: { 6 | markdownRaw, 7 | markdownRendered, 8 | }, 9 | }) => { 10 | return ( 11 |
12 |
13 | 14 | { markdownRendered } 15 | 16 |
17 |
18 |
19 | { markdownRaw } 20 |
21 |
22 |
23 | ) 24 | } -------------------------------------------------------------------------------- /src/schema.js: -------------------------------------------------------------------------------- 1 | const { __ } = wp.i18n 2 | 3 | import Edit from './edit' 4 | import { save } from './save' 5 | import { MarkdownIcon } from './icon-md' 6 | 7 | export const name = 'tinyblocks/markdown' 8 | 9 | export const settings = { 10 | title: __('Markdown', 'tiny-pixel'), 11 | description: __('Express yourself', 'tiny-pixel'), 12 | category: 'common', 13 | keywords: [ 14 | __('markdown', 'tiny-pixel'), 15 | __('Tiny Pixel', 'tiny-pixel'), 16 | __('code', 'tiny-pixel'), 17 | ], 18 | icon: { 19 | background: '#000', 20 | color: '#fff', 21 | src: , 22 | }, 23 | edit: Edit, 24 | save, 25 | attributes: { 26 | markdownRendered: { 27 | type: 'string', 28 | source: 'html', 29 | selector: '.md__rendered', 30 | }, 31 | markdownRaw: { 32 | type: 'string', 33 | source: 'text', 34 | selector: '.md__raw', 35 | default: '', 36 | }, 37 | }, 38 | supports: { 39 | align: [ 40 | 'full', 41 | ], 42 | }, 43 | } 44 | -------------------------------------------------------------------------------- /src/styled/index.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'astroturf' 2 | import ReactMde from 'react-mde' 3 | import 'react-mde/lib/styles/css/react-mde-all' 4 | 5 | export const StyledReactMde = styled(ReactMde)` 6 | background: rgba(0, 0, 0, 0.05); 7 | 8 | :global(.mde-header button svg) { 9 | width: 15px; 10 | height: 15px; 11 | min-height: 15px; 12 | max-height: 15px; 13 | max-width: 15px; 14 | min-width: 15px; 15 | margin-right: 15px; 16 | fill: rgba(0, 0, 0, 0.7); 17 | } 18 | 19 | :global(.md__raw), 20 | :global(.md__render_pane), 21 | :global(.md__rendered), 22 | :global(.mde-header .mde-tabs) { 23 | display: none; 24 | } 25 | ` 26 | 27 | export const visibility = css` 28 | .hidden { 29 | display: none; 30 | } 31 | ` -------------------------------------------------------------------------------- /tiny-mde.php: -------------------------------------------------------------------------------- 1 | 'tinyblocks-tiny-mde-js', 37 | 'editor_style' => 'tinyblocks-tiny-mde-public-css', 38 | 'style' => 'tinyblocks-tiny-mde-public-css', 39 | ] 40 | ); 41 | } 42 | ); 43 | --------------------------------------------------------------------------------