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;
}