From f076582ce479389cf6511024cc34ce4cf42f30cd Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 4 Feb 2018 12:30:22 -0800 Subject: [PATCH] Fixes code blocks (#554) * Fixes code blocks * Flow ignore uncompiled files * :green_heart: * big > bug --- .flowconfig | 3 ++- app/components/Editor/components/Code.js | 25 ++++++++++++------- .../Editor/components/CopyButton.js | 6 ++--- app/components/Editor/components/Image.js | 3 ++- app/components/Editor/marks.js | 4 +-- app/components/Editor/nodes.js | 2 ++ app/components/Editor/plugins.js | 8 +++--- package.json | 2 +- yarn.lock | 18 ++++++------- 9 files changed, 40 insertions(+), 31 deletions(-) diff --git a/.flowconfig b/.flowconfig index 64330e69..a2d58dda 100644 --- a/.flowconfig +++ b/.flowconfig @@ -8,7 +8,8 @@ .*/node_modules/polished/.* .*/node_modules/react-side-effect/.* .*/node_modules/fbjs/.* -.*/node_modules/slate-edit-code/.* +.*/node_modules/@tommoor/slate-edit-code/example/.* +.*/node_modules/@tommoor/slate-edit-code/lib/.* .*/node_modules/slate-edit-list/.* .*/node_modules/slate-prism/.* .*/node_modules/config-chain/.* diff --git a/app/components/Editor/components/Code.js b/app/components/Editor/components/Code.js index f2396b54..d642959a 100644 --- a/app/components/Editor/components/Code.js +++ b/app/components/Editor/components/Code.js @@ -5,37 +5,44 @@ import type { SlateNodeProps } from '../types'; import CopyButton from './CopyButton'; import { color } from 'shared/styles/constants'; +function getCopyText(node) { + return node.nodes.reduce((memo, line) => `${memo}${line.text}\n`, ''); +} + export default function Code({ children, node, readOnly, attributes, }: SlateNodeProps) { - const language = node.data.get('language') || 'javascript'; + // TODO: There is a currently a bug in slate-prism that prevents code elements + // with a language class name from formatting correctly on first load. + // const language = node.data.get('language') || 'javascript'; return ( - {readOnly && } - 
-        {children}
-
+ {readOnly && } + {children} ); } -const Pre = styled.pre` +const Container = styled.div` + position: relative; padding: 0.5em 1em; background: ${color.smokeLight}; border-radius: 4px; border: 1px solid ${color.smokeDark}; code { + display: block; padding: 0; + line-height: 1.4em; } -`; -const Container = styled.div` - position: relative; + pre { + margin: 0; + } &:hover { > span { diff --git a/app/components/Editor/components/CopyButton.js b/app/components/Editor/components/CopyButton.js index b7eb8acb..7f9acee0 100644 --- a/app/components/Editor/components/CopyButton.js +++ b/app/components/Editor/components/CopyButton.js @@ -23,7 +23,7 @@ class CopyButton extends Component { render() { return ( - {this.copied ? 'Copied!' : 'Copy to clipboard'} + {this.copied ? 'Copied!' : 'Copy'} ); } @@ -38,13 +38,13 @@ const StyledCopyToClipboard = styled(CopyToClipboard)` transition: opacity 50ms ease-in-out; z-index: 1; font-size: 12px; - background: ${color.slateLight}; + background: ${color.smoke}; border-radius: 0 2px 0 2px; padding: 1px 6px; cursor: pointer; &:hover { - background: ${color.slate}; + background: ${color.smokeDark}; } `; diff --git a/app/components/Editor/components/Image.js b/app/components/Editor/components/Image.js index 50784ab4..0a6d1c83 100644 --- a/app/components/Editor/components/Image.js +++ b/app/components/Editor/components/Image.js @@ -78,7 +78,8 @@ const StyledImg = styled.img` opacity: ${props => (props.loading ? 0.5 : 1)}; `; -const CenteredImage = styled.div` +const CenteredImage = styled.span` + display: block; text-align: center; `; diff --git a/app/components/Editor/marks.js b/app/components/Editor/marks.js index eaa4c334..a88b6c27 100644 --- a/app/components/Editor/marks.js +++ b/app/components/Editor/marks.js @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import Code from './components/InlineCode'; +import InlineCode from './components/InlineCode'; import { Mark } from 'slate'; type Props = { @@ -13,7 +13,7 @@ export default function renderMark(props: Props) { case 'bold': return {props.children}; case 'code': - return {props.children}; + return {props.children}; case 'italic': return {props.children}; case 'underlined': diff --git a/app/components/Editor/nodes.js b/app/components/Editor/nodes.js index 68ab6e2d..fd85fccd 100644 --- a/app/components/Editor/nodes.js +++ b/app/components/Editor/nodes.js @@ -53,6 +53,8 @@ export default function createRenderNode({ onInsertImage }: Options) { return ; case 'code': return ; + case 'code-line': + return 
{props.children}
; case 'image': return ; case 'link': diff --git a/app/components/Editor/plugins.js b/app/components/Editor/plugins.js index 2362d07c..95334930 100644 --- a/app/components/Editor/plugins.js +++ b/app/components/Editor/plugins.js @@ -3,7 +3,7 @@ import InsertImages from '@tommoor/slate-drop-or-paste-images'; import PasteLinkify from 'slate-paste-linkify'; import CollapseOnEscape from 'slate-collapse-on-escape'; import TrailingBlock from 'slate-trailing-block'; -import EditCode from 'slate-edit-code'; +import EditCode from '@tommoor/slate-edit-code'; import Prism from 'slate-prism'; import EditList from './plugins/EditList'; import KeyboardShortcuts from './plugins/KeyboardShortcuts'; @@ -15,8 +15,6 @@ type Options = { onImageUploadStop: () => void, }; -const onlyInCode = node => node.type === 'code'; - const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => { return [ PasteLinkify({ @@ -37,14 +35,14 @@ const createPlugins = ({ onImageUploadStart, onImageUploadStop }: Options) => { }), EditList, EditCode({ - onlyIn: onlyInCode, containerType: 'code', lineType: 'code-line', exitBlocktype: 'paragraph', + allowMarks: false, selectAll: true, }), Prism({ - onlyIn: onlyInCode, + onlyIn: node => node.type === 'code', getSyntax: node => 'javascript', }), CollapseOnEscape({ toEdge: 'end' }), diff --git a/package.json b/package.json index dcfde167..81b4e287 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ }, "dependencies": { "@tommoor/slate-drop-or-paste-images": "^0.8.1", + "@tommoor/slate-edit-code": "^0.13.3", "aws-sdk": "^2.135.0", "babel-core": "^6.24.1", "babel-eslint": "^8.1.2", @@ -165,7 +166,6 @@ "sequelize-encrypted": "0.1.0", "slate": "^0.31.5", "slate-collapse-on-escape": "^0.6.0", - "slate-edit-code": "^0.13.2", "slate-edit-list": "^0.10.2", "slate-md-serializer": "^1.0.7", "slate-paste-linkify": "^0.5.0", diff --git a/yarn.lock b/yarn.lock index 89078b49..a41d17e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -75,6 +75,15 @@ mime-types "^2.1.11" slate-dev-logger "^0.1.0" +"@tommoor/slate-edit-code@^0.13.3": + version "0.13.3" + resolved "https://registry.yarnpkg.com/@tommoor/slate-edit-code/-/slate-edit-code-0.13.3.tgz#05c00bd23e79d1229fccdd9988c23bd8bb94b448" + dependencies: + detect-indent "^4.0.0" + detect-newline "^2.1.0" + ends-with "^0.2.0" + is-hotkey "^0.1.1" + "@types/geojson@^1.0.0": version "1.0.3" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-1.0.3.tgz#fbcf7fa5eb6dd108d51385cc6987ec1f24214523" @@ -8722,15 +8731,6 @@ slate-dev-logger@^0.1.0, slate-dev-logger@^0.1.36: version "0.1.36" resolved "https://registry.npmjs.org/slate-dev-logger/-/slate-dev-logger-0.1.36.tgz#ecdb37dbf944dfc742bab23b6a20d5a0472db95e" -slate-edit-code@^0.13.2: - version "0.13.2" - resolved "https://registry.npmjs.org/slate-edit-code/-/slate-edit-code-0.13.2.tgz#682a7640da076906e5b4a4c73ec0e46d31d92c62" - dependencies: - detect-indent "^4.0.0" - detect-newline "^2.1.0" - ends-with "^0.2.0" - is-hotkey "^0.1.1" - slate-edit-list@^0.10.2: version "0.10.2" resolved "https://registry.yarnpkg.com/slate-edit-list/-/slate-edit-list-0.10.2.tgz#938a791c7e7974fac3ef00505cc98710c307efc6"