diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/markdown')
10 files changed, 1 insertions, 538 deletions
diff --git a/plugins/jetpack/extensions/blocks/markdown/edit.js b/plugins/jetpack/extensions/blocks/markdown/edit.js deleted file mode 100644 index 13dff7f4..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/edit.js +++ /dev/null @@ -1,127 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { BlockControls, PlainText } from '@wordpress/editor'; -import { Component } from '@wordpress/element'; -import { compose } from '@wordpress/compose'; -import { withDispatch, withSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import MarkdownRenderer from './renderer'; - -/** - * Module variables - */ -const PANEL_EDITOR = 'editor'; -const PANEL_PREVIEW = 'preview'; - -class MarkdownEdit extends Component { - input = null; - - state = { - activePanel: PANEL_EDITOR, - }; - - bindInput = ref => void ( this.input = ref ); - - componentDidUpdate( prevProps ) { - if ( - prevProps.isSelected && - ! this.props.isSelected && - this.state.activePanel === PANEL_PREVIEW - ) { - this.toggleMode( PANEL_EDITOR )(); - } - if ( - ! prevProps.isSelected && - this.props.isSelected && - this.state.activePanel === PANEL_EDITOR && - this.input - ) { - this.input.focus(); - } - } - - isEmpty() { - const source = this.props.attributes.source; - return ! source || source.trim() === ''; - } - - updateSource = source => this.props.setAttributes( { source } ); - - handleKeyDown = e => { - const { attributes, removeBlock } = this.props; - const { source } = attributes; - - // Remove the block if source is empty and we're pressing the Backspace key - if ( e.keyCode === 8 && source === '' ) { - removeBlock(); - e.preventDefault(); - } - }; - - toggleMode = mode => () => this.setState( { activePanel: mode } ); - - renderToolbarButton( mode, label ) { - const { activePanel } = this.state; - - return ( - <button - className={ `components-tab-button ${ activePanel === mode ? 'is-active' : '' }` } - onClick={ this.toggleMode( mode ) } - > - <span>{ label }</span> - </button> - ); - } - - render() { - const { attributes, className, isSelected } = this.props; - const { source } = attributes; - const { activePanel } = this.state; - - if ( ! isSelected && this.isEmpty() ) { - return ( - <p className={ `${ className }__placeholder` }> - { __( 'Write your _Markdown_ **here**…', 'jetpack' ) } - </p> - ); - } - - return ( - <div className={ className }> - <BlockControls> - <div className="components-toolbar"> - { this.renderToolbarButton( PANEL_EDITOR, __( 'Markdown', 'jetpack' ) ) } - { this.renderToolbarButton( PANEL_PREVIEW, __( 'Preview', 'jetpack' ) ) } - </div> - </BlockControls> - - { activePanel === PANEL_PREVIEW || ! isSelected ? ( - <MarkdownRenderer className={ `${ className }__preview` } source={ source } /> - ) : ( - <PlainText - className={ `${ className }__editor` } - onChange={ this.updateSource } - onKeyDown={ this.handleKeyDown } - aria-label={ __( 'Markdown', 'jetpack' ) } - innerRef={ this.bindInput } - value={ source } - /> - ) } - </div> - ); - } -} - -export default compose( [ - withSelect( select => ( { - currentBlockId: select( 'core/editor' ).getSelectedBlockClientId(), - } ) ), - withDispatch( ( dispatch, { currentBlockId } ) => ( { - removeBlock: () => dispatch( 'core/editor' ).removeBlocks( currentBlockId ), - } ) ), -] )( MarkdownEdit ); diff --git a/plugins/jetpack/extensions/blocks/markdown/editor.js b/plugins/jetpack/extensions/blocks/markdown/editor.js deleted file mode 100644 index d05f4039..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/editor.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Internal dependencies - */ -import registerJetpackBlock from '../../shared/register-jetpack-block'; -import { name, settings } from '.'; - -registerJetpackBlock( name, settings ); diff --git a/plugins/jetpack/extensions/blocks/markdown/editor.scss b/plugins/jetpack/extensions/blocks/markdown/editor.scss deleted file mode 100644 index 0cb11581..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/editor.scss +++ /dev/null @@ -1,144 +0,0 @@ -@import '../../shared/styles/gutenberg-colors.scss'; -@import '../../shared/styles/gutenberg-variables.scss'; - -.wp-block-jetpack-markdown__placeholder { - opacity: 0.62; // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L72 - pointer-events: none; -} - -// @TODO: Remove all these specific styles when related Gutenberg core styles become more generic -.editor-block-list__block { - .wp-block-jetpack-markdown__preview { - min-height: 1.8em; - line-height: 1.8; - - & > * { - margin-top: 32px; - margin-bottom: 32px; - } - - // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-library/src/heading/editor.scss#L12-L35 - h1, - h2, - h3 { - line-height: 1.4; - } - - h1 { - font-size: 2.44em; - } - - h2 { - font-size: 1.95em; - } - - h3 { - font-size: 1.56em; - } - - h4 { - font-size: 1.25em; - line-height: 1.5; - } - - h5 { - font-size: 1em; - } - - h6 { - font-size: 0.8em; - } - - hr { - border: none; - border-bottom: 2px solid $dark-gray-100; - margin: 2em auto; - max-width: 100px; - } - - p { - line-height: 1.8; - } - - blockquote { - border-left: 4px solid $black; - margin-left: 0; - margin-right: 0; - padding-left: 1em; - - p { - line-height: 1.5; - margin: 1em 0; - } - } - - ul, - ol { - margin-left: 1.3em; - padding-left: 1.3em; - } - - li { - p { - margin: 0; - } - } - - // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L28-L39 - code, - pre { - color: $dark-gray-800; - font-family: $editor-html-font; - } - - code { - background: $light-gray-200; - border-radius: 2px; - font-size: inherit; // This is necessary to override upstream CSS. - padding: 2px; - } - - pre { - border-radius: 4px; - border: 1px solid $light-gray-500; - font-size: $text-editor-font-size; - padding: 0.8em 1em; - - code { - background: transparent; - padding: 0; - } - } - - table { - overflow-x: auto; - border-collapse: collapse; - width: 100%; - } - - thead, - tbody, - tfoot { - width: 100%; - min-width: 240px; - } - - td, - th { - padding: 0.5em; - border: 1px solid currentColor; - } - } -} - -.wp-block-jetpack-markdown { - .wp-block-jetpack-markdown__editor { - font-family: $editor-html-font; - font-size: $text-editor-font-size; - - &:focus { - border-color: transparent; - box-shadow: 0 0 0 transparent; - } - } -} diff --git a/plugins/jetpack/extensions/blocks/markdown/index.js b/plugins/jetpack/extensions/blocks/markdown/index.js deleted file mode 100644 index ff5d3dc8..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/index.js +++ /dev/null @@ -1,70 +0,0 @@ -/** - * External dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { ExternalLink, Path, Rect, SVG } from '@wordpress/components'; -import { Fragment } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import './editor.scss'; -import edit from './edit'; -import save from './save'; - -export const name = 'markdown'; - -export const settings = { - title: __( 'Markdown', 'jetpack' ), - - description: ( - <Fragment> - <p> - { __( - 'Use regular characters and punctuation to style text, links, and lists.', - 'jetpack' - ) } - </p> - <ExternalLink href="https://en.support.wordpress.com/markdown-quick-reference/"> - { __( 'Support reference', 'jetpack' ) } - </ExternalLink> - </Fragment> - ), - - icon: ( - <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 128"> - <Rect - width="198" - height="118" - x="5" - y="5" - ry="10" - stroke="currentColor" - strokeWidth="10" - fill="none" - /> - <Path d="M30 98v-68h20l20 25 20-25h20v68h-20v-39l-20 25-20-25v39zM155 98l-30-33h20v-35h20v35h20z" /> - </SVG> - ), - - category: 'jetpack', - - keywords: [ - _x( 'formatting', 'block search term', 'jetpack' ), - _x( 'syntax', 'block search term', 'jetpack' ), - _x( 'markup', 'block search term', 'jetpack' ), - ], - - attributes: { - //The Markdown source is saved in the block content comments delimiter - source: { type: 'string' }, - }, - - supports: { - html: false, - }, - - edit, - - save, -}; diff --git a/plugins/jetpack/extensions/blocks/markdown/markdown.php b/plugins/jetpack/extensions/blocks/markdown/markdown.php index 7490b9d2..27978dcb 100644 --- a/plugins/jetpack/extensions/blocks/markdown/markdown.php +++ b/plugins/jetpack/extensions/blocks/markdown/markdown.php @@ -7,14 +7,4 @@ * @package Jetpack */ -/** - * The block depends on the Markdown module to be active for now. - * Related discussion: https://github.com/Automattic/jetpack/issues/10294 - */ -if ( - ( defined( 'IS_WPCOM' ) && IS_WPCOM ) - || ( method_exists( 'Jetpack', 'is_module_active' ) && Jetpack::is_module_active( 'markdown' ) ) -) { - jetpack_register_block( 'jetpack/markdown' ); -} - +jetpack_register_block( 'jetpack/markdown' ); diff --git a/plugins/jetpack/extensions/blocks/markdown/renderer.js b/plugins/jetpack/extensions/blocks/markdown/renderer.js deleted file mode 100644 index ae87568a..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/renderer.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import MarkdownIt from 'markdown-it'; -import { RawHTML } from '@wordpress/element'; - -/** - * Module variables - */ -const markdownConverter = new MarkdownIt(); -const handleLinkClick = event => { - if ( event.target.nodeName === 'A' ) { - const hasConfirmed = window.confirm( - __( 'Are you sure you wish to leave this page?', 'jetpack' ) - ); - - if ( ! hasConfirmed ) { - event.preventDefault(); - } - } -}; - -export default ( { className, source = '' } ) => ( - <RawHTML className={ className } onClick={ handleLinkClick }> - { source.length ? markdownConverter.render( source ) : '' } - </RawHTML> -); diff --git a/plugins/jetpack/extensions/blocks/markdown/save.js b/plugins/jetpack/extensions/blocks/markdown/save.js deleted file mode 100644 index 06d08138..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/save.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Internal dependencies - */ -import MarkdownRenderer from './renderer'; - -export default ( { attributes, className } ) => ( - <MarkdownRenderer className={ className } source={ attributes.source } /> -); diff --git a/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap b/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap deleted file mode 100644 index ebc9bfc2..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap +++ /dev/null @@ -1,63 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MarkdownRenderer renders markdown to HTML as expected 1`] = ` -<RawHTML - className="markdown" - onClick={[Function]} -> - <h1>Heading</h1> -<h2>2nd Heading</h2> -<ul> -<li>List 1</li> -<li>List 1</li> -</ul> -<ul> -<li>List 2</li> -<li>List 2</li> -</ul> -<ul> -<li>List 3</li> -<li>List 3</li> -</ul> -<ol> -<li>Red</li> -<li>Green</li> -<li>Blue</li> -</ol> -<ul> -<li> -<p>A list item.</p> -<p>With multiple paragraphs.</p> -</li> -<li> -<p>Another item in the list.</p> -</li> -</ul> -<p><em>em</em> -<em>em</em> -<strong>strong</strong> -<strong>strong</strong> -<em><strong>em strong</strong></em></p> -<p>*Literal asterisks*</p> -<p>Link to <a href="https://wordpress.com">WordPress</a> and <a href="https://jetpack.com/">https://jetpack.com/</a></p> -<p>email me: <a href="mailto:address@example.com">address@example.com</a></p> -<p>Inline <code>code</code> here.</p> -<pre><code>Block of code with backticks. -</code></pre> -<pre><code>Block of code prefixed by four spaces -</code></pre> -<blockquote> -<p>a blockquote.</p> -<p>2nd paragraph in the blockquote.</p> -<h2>H2 in a blockquote</h2> -</blockquote> -<p>A bunch of horizontal rules:</p> -<hr> -<hr> -<hr> -<hr> -<hr> -<p>👋</p> - -</RawHTML> -`; diff --git a/plugins/jetpack/extensions/blocks/markdown/test/fixtures/source.js b/plugins/jetpack/extensions/blocks/markdown/test/fixtures/source.js deleted file mode 100644 index 0c24e6ba..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/test/fixtures/source.js +++ /dev/null @@ -1,63 +0,0 @@ -export const source = ` -# Heading - -## 2nd Heading - -- List 1 -- List 1 - -* List 2 -* List 2 - -+ List 3 -+ List 3 - -1. Red -2. Green -3. Blue - -* A list item. - - With multiple paragraphs. - -* Another item in the list. - -_em_ -*em* -**strong** -__strong__ -***em strong*** - -\\\*Literal asterisks\\\* - -Link to [WordPress](https://wordpress.com) and <https://jetpack.com/> - -email me: <address@example.com> - -Inline \`code\` here. - -\`\`\` -Block of code with backticks. -\`\`\` - - Block of code prefixed by four spaces - -> a blockquote. -> -> 2nd paragraph in the blockquote. -> -> ## H2 in a blockquote - -A bunch of horizontal rules: - -* * * - -*** - -***** - -- - - - ---------------------------------------- - -👋`; diff --git a/plugins/jetpack/extensions/blocks/markdown/test/markdown-renderer.js b/plugins/jetpack/extensions/blocks/markdown/test/markdown-renderer.js deleted file mode 100644 index f8890eb3..00000000 --- a/plugins/jetpack/extensions/blocks/markdown/test/markdown-renderer.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * External dependencies - */ -import { shallow } from 'enzyme'; -import React from 'react'; - -/** - * Internal dependencies - */ -import { source } from './fixtures/source' -import MarkdownRenderer from '../renderer'; - -describe( 'MarkdownRenderer', () => { - test( 'renders markdown to HTML as expected', () => { - expect( shallow( <MarkdownRenderer className='markdown' source={ source } /> ) ).toMatchSnapshot(); - } ); -} ); |