diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js index 4d891424..ad8945d8 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js @@ -33,6 +33,12 @@ export const NODE_COMPONENTS = { 'table-row': props => {props.children}, 'table-cell': props => {props.children}, 'thematic-break': props =>
, + link: props => { + const data = props.node.get('data'); + const url = data.get('url'); + const title = data.get('title'); + return {props.children}; + }, shortcode: props => { const { attributes, node, state: editorState } = props; const isSelected = editorState.selection.hasFocusIn(node); diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css index 6a13efba..396f7302 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.css @@ -13,40 +13,6 @@ .wrapper { position: relative; - & h1, & h2, & h3 { - padding: 0; - color: #7c8382; - text-decoration: none; - border-bottom: none; - margin-bottom: 20px; - line-height: 1.45; - } - & h1 { - font-size: 2.5rem; - } - & h2 { - font-size: 2rem; - } - & h3 { - font-size: 1.8rem; - } - & p { - margin-top: 20px; - margin-bottom: 20px; - } - & hr { - border: 1px solid; - margin-bottom: 20px; - } - & li > p { - margin: 0; - } - & div[data-plugin] { - background: #fff; - border: 1px solid #aaa; - padding: 10px; - margin-bottom: 20px; - } } .editor { @@ -56,6 +22,58 @@ min-height: var(--richTextEditorMinHeight); font-family: var(--fontFamily); + & h1 { + font-size: 32px; + margin-top: 16px; + } + + & h2 { + font-size: 24px; + margin-top: 12px; + } + + & h3 { + font-size: 20px; + margin-top: 8px; + } + + & h4 { + font-size: 18px; + margin-top: 8px; + } + + & h5, + & h6 { + font-size: 16px; + margin-top: 8px; + } + + & h1, & h2, & h3, & h4, & h5, & h6 { + font-weight: 700; + } + + & p, + & pre, + & blockquote, + & ul, + & ol { + margin-top: 16px; + margin-bottom: 16px; + } + + & a { + text-decoration: underline; + } + + & hr { + border: 1px solid; + margin-bottom: 16px; + } + + & li > p { + margin: 0; + } + & ul, & ol { padding-left: 30px; @@ -75,10 +93,18 @@ padding: 10px; } + & code { + background-color: var(--backgroundColorShaded); + border-radius: var(--borderRadius); + padding: 0 2px; + font-size: 85%; + } + & blockquote { - padding-left: 1em; - border-left: 3px solid #eee; - margin-left: 0; margin-right: 0; + padding-left: 16px; + border-left: 3px solid var(--backgroundColorShaded); + margin-left: 0; + margin-right: 0; } & table { @@ -96,7 +122,7 @@ .shortcode { border: 2px solid black; padding: 8px; - margin: 16px 0; + margin: 2px 0; cursor: pointer; }